:root {
  --navy: #1a2744;
  --navy-light: #243656;
  --navy-dark: #111d33;
  --cream: #f0e9d8;
  --cream-light: #f7f3eb;
  --cream-dark: #e0d5c0;
  --white: #ffffff;
  --muted: #6b6456;
  --muted-light: #9a9488;
  --danger: #991b1b;
  --danger-light: #dc2626;
  --danger-bg: #fef2f2;
  --success: #065f46;
  --success-light: #10b981;
  --success-bg: #ecfdf5;
  --warning: #b45309;
  --warning-bg: #fffbeb;
  --info: #1e40af;
  --info-bg: #eff6ff;
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(26, 39, 68, 0.05);
  --shadow-md: 0 4px 12px rgba(26, 39, 68, 0.08);
  --shadow-lg: 0 8px 24px rgba(26, 39, 68, 0.12);
  --shadow-xl: 0 16px 48px rgba(26, 39, 68, 0.15);
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --sidebar-width: 260px;
  --mobile-nav-height: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--navy);
  background-color: var(--cream-light);
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
}
h1 {
  font-size: 2.25rem;
}
h2 {
  font-size: 1.875rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.25rem;
}
h5 {
  font-size: 1.125rem;
}
h6 {
  font-size: 1rem;
}
p {
  margin-bottom: var(--space-md);
  color: var(--muted);
}
a {
  color: var(--navy);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--navy-light);
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--navy);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
}
.sidebar-nav {
  flex: 1;
  padding: var(--space-lg) 0;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  color: rgba(240, 233, 216, 0.7);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
}
.nav-link:hover {
  color: var(--cream);
  background: rgba(240, 233, 216, 0.05);
}
.nav-link.active {
  color: var(--cream);
  background: rgba(240, 233, 216, 0.08);
  border-left-color: var(--cream);
}
.nav-link i {
  font-size: 1.25rem;
  flex-shrink: 0;
}
.nav-section-title {
  padding: var(--space-lg) var(--space-lg) var(--space-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(240, 233, 216, 0.4);
}
.sidebar-footer {
  padding: var(--space-lg);
  border-top: 1px solid rgba(240, 233, 216, 0.1);
}
.user-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
  padding: 6px;
  margin-left: -6px;
  margin-right: -6px;
  transition: background var(--transition-fast);
}
.user-info:hover {
  background: rgba(240, 233, 216, 0.08);
  color: inherit;
}
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.user-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.user-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-role {
  font-size: 0.75rem;
  color: rgba(240, 233, 216, 0.5);
}
.logout-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: rgba(240, 233, 216, 0.6);
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.logout-link:hover {
  color: var(--danger-light);
  background: rgba(153, 27, 27, 0.1);
}

/* Mobile Nav */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mobile-nav-height);
  background: var(--navy);
  z-index: 100;
  justify-content: space-around;
  align-items: center;
  padding: 0 var(--space-sm);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}
.mobile-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-xs) var(--space-sm);
  color: rgba(240, 233, 216, 0.5);
  font-size: 0.6875rem;
  font-weight: 500;
  border: none;
  background: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.mobile-nav-link i {
  font-size: 1.375rem;
}
.mobile-nav-link.active,
.mobile-nav-link:hover {
  color: var(--cream);
}
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 39, 68, 0.5);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}
.mobile-menu-overlay.open {
  opacity: 1;
  visibility: visible;
}
.mobile-menu {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  background: var(--navy);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-menu-overlay.open .mobile-menu {
  transform: translateX(0);
}
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  border-bottom: 1px solid rgba(240, 233, 216, 0.1);
}
.close-menu {
  background: none;
  border: none;
  color: var(--cream);
  font-size: 1.5rem;
  cursor: pointer;
}
.mobile-menu-nav {
  flex: 1;
  padding: var(--space-md) 0;
}
.mobile-menu-nav .nav-link {
  padding: var(--space-md) var(--space-lg);
}
.mobile-menu-footer {
  padding: var(--space-lg);
  border-top: 1px solid rgba(240, 233, 216, 0.1);
}

/* Main Content */
.main-content {
  min-height: 100vh;
  padding: var(--space-xl);
}
.main-content.with-sidebar {
  margin-left: var(--sidebar-width);
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-md);
}
.page-header h1 {
  font-size: 1.75rem;
}
.page-header-actions {
  display: flex;
  gap: var(--space-sm);
}

/* Dashboard's "Welcome back" header, doubling as a visible link to
   Profile - the sidebar footer link alone was too easy to miss,
   especially on mobile where it's a tap behind the Menu button. */
.dashboard-welcome {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
  padding: 4px 8px;
  margin: -4px -8px;
  transition: background var(--transition-fast);
}
.dashboard-welcome:hover {
  background: rgba(26, 39, 68, 0.04);
  color: inherit;
}
.dashboard-welcome .user-avatar {
  background: var(--navy);
  color: var(--cream);
  flex-shrink: 0;
}

/* Flash Messages */
.flash-message {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  font-size: 0.9375rem;
  font-weight: 500;
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.flash-success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(6, 95, 70, 0.15);
}
.flash-error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(153, 27, 27, 0.15);
}
.flash-info {
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid rgba(30, 64, 175, 0.15);
}
.flash-close {
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.flash-close:hover {
  opacity: 1;
}

/* Cards */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(26, 39, 68, 0.06);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}
.card:hover {
  box-shadow: var(--shadow-md);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid rgba(26, 39, 68, 0.06);
}
.card-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
}
.card-body {
  padding: var(--space-xl);
}
.card-footer {
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid rgba(26, 39, 68, 0.06);
  background: var(--cream-light);
}

/* Stat Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.stat-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(26, 39, 68, 0.06);
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.stat-icon.navy {
  background: rgba(26, 39, 68, 0.08);
  color: var(--navy);
}
.stat-icon.success {
  background: var(--success-bg);
  color: var(--success);
}
.stat-icon.danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.stat-icon.warning {
  background: var(--warning-bg);
  color: var(--warning);
}
.stat-content {
  flex: 1;
}
.stat-value {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: var(--space-xs);
}
.stat-label {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 500;
}

/* Tables */
.table-container {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
thead {
  background: var(--cream-light);
}
th {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 2px solid rgba(26, 39, 68, 0.08);
  white-space: nowrap;
}
td {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid rgba(26, 39, 68, 0.08);
  color: var(--navy);
  vertical-align: middle;
}
tbody tr {
  transition: background var(--transition-fast);
}
tbody tr:nth-child(even) {
  background: var(--cream-light);
}
tbody tr:hover {
  background: rgba(240, 233, 216, 0.6);
}
tbody tr.overdue {
  background: var(--danger-bg);
}
tbody tr.overdue:hover {
  background: #fee2e2;
}
tbody tr.due-soon {
  background: var(--warning-bg);
}
tbody tr.due-soon:hover {
  background: #fef3c7;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.badge-paid {
  background: var(--success-bg);
  color: var(--success);
}
.badge-pending {
  background: var(--warning-bg);
  color: var(--warning);
}
.badge-invoiced {
  background: var(--info-bg);
  color: var(--info);
}
.badge-admin {
  background: var(--navy);
  color: var(--cream);
}
.badge-staff {
  background: rgba(26, 39, 68, 0.08);
  color: var(--navy);
}
.badge-deleted {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Status-toggle buttons styled as badges (Staff, Service Catalog "Active/
   Inactive" toggles) - these are real interactive <button>s, not
   decorative labels, so they need a proper hover state and a touch
   target bigger than a plain badge's tight padding. */
.badge-toggle {
  transition:
    filter var(--transition-fast),
    transform var(--transition-fast);
}
.badge-toggle:hover {
  filter: brightness(0.95);
}
.badge-toggle:active {
  transform: scale(0.97);
}
@media (max-width: 768px) {
  .badge-toggle {
    min-height: 36px;
    padding: 8px 14px;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.btn-primary {
  background: var(--navy);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--navy-light);
  color: var(--cream);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-secondary {
  background: var(--cream);
  color: var(--navy);
  border: 1px solid rgba(26, 39, 68, 0.12);
}
.btn-secondary:hover {
  background: var(--cream-dark);
  color: var(--navy);
}
.btn-danger {
  background: var(--danger);
  color: var(--white);
}
.btn-danger:hover {
  background: var(--danger-light);
  color: var(--white);
}
.btn-success {
  background: var(--success);
  color: var(--white);
}
.btn-success:hover {
  background: #047857;
}
.btn-ghost {
  background: transparent;
  color: var(--muted);
}
.btn-ghost:hover {
  background: rgba(26, 39, 68, 0.05);
  color: var(--navy);
}
.btn-sm {
  padding: 6px 12px;
  font-size: 0.8125rem;
}
.btn-lg {
  padding: var(--space-md) var(--space-xl);
  font-size: 1rem;
}
.btn-block {
  width: 100%;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Forms */
.form-group {
  margin-bottom: var(--space-lg);
}
.form-label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--navy);
}
.form-label .required {
  color: var(--danger);
  margin-left: 2px;
}
.form-control {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1.5px solid rgba(26, 39, 68, 0.12);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--navy);
  background: var(--white);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.form-control:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 39, 68, 0.08);
}
.form-control::placeholder {
  color: var(--muted-light);
}
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6456' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}
textarea.form-control {
  min-height: 100px;
  resize: vertical;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}
.form-hint {
  font-size: 0.8125rem;
  color: var(--muted-light);
  margin-top: var(--space-xs);
}
.form-error {
  font-size: 0.8125rem;
  color: var(--danger);
  margin-top: var(--space-xs);
}
.form-control[multiple] {
  min-height: 120px;
  padding: var(--space-sm);
}
.form-control[multiple] option {
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
}
.form-control[multiple] option:checked {
  background: var(--navy);
  color: var(--cream);
}

/* Schedule's collapsible custom-range/sort filters. The toggle is a real
   button that sits in the same row as Due Today/Due Tomorrow/All Horses
   on mobile - not a plain text link - and the panel it controls is a
   plain class toggle (not native <details>), so it can be forced open
   on desktop with a simple CSS override further down. */
.schedule-custom-filters {
  display: none;
  padding-top: var(--space-lg);
}
.schedule-custom-filters.open {
  display: block;
}

@media screen and (min-width: 769px) {
  .schedule-filter-toggle {
    display: none;
  }
  .schedule-custom-filters {
    display: block !important;
  }
}

/* Search */
.search-filter-bar {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}
.search-box {
  position: relative;
  flex: 1;
  min-width: 250px;
}
.search-box i {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-light);
  font-size: 1.125rem;
}
.search-box input {
  width: 100%;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 2.5rem;
  border: 1.5px solid rgba(26, 39, 68, 0.12);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  transition: all var(--transition-fast);
}
.search-box input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 39, 68, 0.08);
}

/* Login Page */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(
    circle at 50% 0%,
    var(--navy-light) 0%,
    var(--navy) 55%,
    var(--navy-dark) 100%
  );
  padding: var(--space-lg);
}
.login-container {
  width: 100%;
  max-width: 400px;
  animation: loginRise 0.4s ease;
}
@keyframes loginRise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.login-brand {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.login-brand-logo {
  height: 110px;
  width: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.25));
}
.login-brand i {
  font-size: 3.5rem;
  color: var(--cream);
  margin-bottom: var(--space-md);
}
.login-brand h1 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--cream);
  margin-bottom: var(--space-sm);
}
.login-brand p {
  color: rgba(240, 233, 216, 0.6);
  font-size: 1rem;
}
.login-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.login-card h2 {
  font-size: 1.625rem;
  margin-bottom: var(--space-xs);
}
.login-card .subtitle {
  color: var(--muted);
  margin-bottom: var(--space-xl);
  font-size: 0.9375rem;
}
.login-footnote {
  text-align: center;
  color: rgba(240, 233, 216, 0.5);
  margin-top: var(--space-xl);
  font-size: 0.8125rem;
}

/* Icon-prefixed inputs (login form) - a plain-text icon inside the field
   reads as "what kind of input is this" faster than a label alone,
   especially useful on a small screen where the label and field aren't
   always in the same glance. */
.input-icon-group {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon-group > i:first-child {
  position: absolute;
  left: var(--space-md);
  color: var(--muted-light);
  font-size: 1.125rem;
  pointer-events: none;
}
.input-icon-group .form-control {
  padding-left: 2.75rem;
}
.input-icon-toggle {
  position: absolute;
  right: 4px;
  background: none;
  border: none;
  color: var(--muted-light);
  font-size: 1.125rem;
  padding: 8px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  transition: color var(--transition-fast);
}
.input-icon-toggle:hover {
  color: var(--navy);
}
.input-icon-group .form-control.has-toggle {
  padding-right: 2.75rem;
}

/* Profile */
.profile-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}
.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  flex-shrink: 0;
}
.profile-info {
  flex: 1;
  min-width: 250px;
}
.profile-info h1 {
  font-size: 1.75rem;
  margin-bottom: var(--space-xs);
}
.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  color: var(--muted);
  font-size: 0.9375rem;
}
.profile-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.profile-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Info Grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}
.info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.info-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-light);
}
.info-value {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--navy);
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 24px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(26, 39, 68, 0.1);
}
.timeline-item {
  position: relative;
  padding-bottom: var(--space-xl);
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-dot {
  position: absolute;
  left: -24px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--navy);
}
.timeline-item.overdue .timeline-dot {
  border-color: var(--danger);
  background: var(--danger);
}
.timeline-item.due-soon .timeline-dot {
  border-color: var(--warning);
  background: var(--warning);
}
.timeline-content {
  background: var(--cream-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.timeline-date {
  font-weight: 600;
  color: var(--navy);
}
.timeline-body {
  color: var(--muted);
  font-size: 0.9375rem;
}
.timeline-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-sm);
}
.service-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--white);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--navy);
  border: 1px solid rgba(26, 39, 68, 0.08);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
}
.empty-state i {
  font-size: 3.5rem;
  color: var(--cream-dark);
  margin-bottom: var(--space-lg);
}
.empty-state h3 {
  color: var(--navy);
  margin-bottom: var(--space-sm);
}
.empty-state p {
  color: var(--muted);
  margin-bottom: var(--space-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Empty-state table cells ("No records found" rows) - a shared,
   var()-based replacement for the hardcoded padding:40px previously
   inlined on each page, so it actually shrinks on mobile instead of
   eating a fixed chunk of a narrow screen regardless of viewport. */
.empty-cell {
  padding: var(--space-3xl) var(--space-xl) !important;
  text-align: center;
}

/* Timeline cards with breathing room on all sides (dashboard staff
   alerts/recent activity, horse profile service history) - keeps the
   24px left offset the connector dot/line need, but lets the other
   three sides shrink on mobile via var(--space-md)/var(--space-lg). */
.timeline-padded {
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 24px;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition-fast);
}
.pagination a {
  color: var(--navy);
  background: var(--white);
  border: 1px solid rgba(26, 39, 68, 0.1);
}
.pagination a:hover {
  background: var(--cream);
  border-color: var(--navy);
}
.pagination .current {
  background: var(--navy);
  color: var(--cream);
  font-weight: 600;
}

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 39, 68, 0.5);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  backdrop-filter: blur(4px);
}
.modal-overlay.open {
  display: flex;
}
.modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  animation: modalSlideUp 0.3s ease;
}
@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl);
  border-bottom: 1px solid rgba(26, 39, 68, 0.06);
}
.modal-header h3 {
  font-size: 1.25rem;
}
.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.modal-close:hover {
  color: var(--navy);
}
.modal-body {
  padding: var(--space-xl);
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid rgba(26, 39, 68, 0.06);
  background: var(--cream-light);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Inline row action buttons (Horses list View/Edit, Visits Quick Log/Log/View) */
.row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Row action "..." dropdown menu — actions-menu is the one actually used
   by horses.php. app.js reparents .actions-menu-list to <body> and
   switches it to position:fixed with computed coordinates whenever it
   opens, so it can't be clipped by a horizontally-scrolling table
   container. The rules below cover both the closed/default state and
   the open state after JS repositions it. */
.actions-menu {
  position: relative;
  display: inline-block;
}
.actions-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 1.25rem;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}
.actions-menu-btn:hover,
.actions-menu.open .actions-menu-btn {
  background: var(--cream);
  color: var(--navy);
}
.actions-menu-list {
  display: none;
  min-width: 180px;
  background: var(--white);
  border: 1px solid rgba(26, 39, 68, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 500;
}
.actions-menu-list.open {
  display: block;
}
.actions-menu-list a,
.actions-menu-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
}
.actions-menu-list a:hover,
.actions-menu-list button:hover {
  background: var(--cream-light);
}
.actions-menu-list a.danger,
.actions-menu-list button.danger {
  color: var(--danger);
}

/* Legacy row-menu dropdown (kept in case any page still references it) */
.row-menu {
  position: relative;
  display: inline-block;
}
.row-menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 180px;
  background: var(--white);
  border: 1px solid rgba(26, 39, 68, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 200;
}
/* app.js reparents the dropdown to <body> and switches it to
   position:fixed with computed coordinates whenever a table's
   horizontal scroll container would otherwise clip it (which the
   default position:absolute above cannot escape). The rule above is
   the pre-JS/no-JS fallback appearance. */
.row-menu-dropdown.open {
  display: block;
}
.row-menu-dropdown a,
.row-menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
}
.row-menu-dropdown a:hover,
.row-menu-dropdown button:hover {
  background: var(--cream-light);
}
.row-menu-dropdown .row-menu-danger {
  color: var(--danger);
}
.row-menu-dropdown .row-menu-divider {
  height: 1px;
  background: rgba(26, 39, 68, 0.08);
  margin: 4px 0;
}
.actions-menu-list .row-menu-divider {
  height: 1px;
  background: rgba(26, 39, 68, 0.08);
  margin: 4px 0;
}

/* Quick Log Service modal checklist */
.quick-log-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding: var(--space-sm) var(--space-md);
  border: 1.5px solid rgba(26, 39, 68, 0.12);
  border-radius: var(--radius-md);
}
.quick-log-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
}
.quick-log-check-item input {
  width: auto;
}

/* Utility: hide an element on print without affecting on-screen layout,
   plus app-wide print cleanup (used by Schedule's Print button and any
   future page - hides navigation chrome, keeps just the content) */
@media print {
  @page {
    size: landscape;
    margin: 12mm;
  }
  .no-print,
  .sidebar,
  .mobile-nav,
  .mobile-menu-overlay,
  .app-footer,
  .flash-message,
  .page-header-actions {
    display: none !important;
  }
  .main-content.with-sidebar {
    margin-left: 0 !important;
    padding: 0 !important;
  }
  body {
    background: var(--white);
  }
  .card {
    box-shadow: none;
    border: 1px solid rgba(26, 39, 68, 0.15);
  }
  .search-filter-bar,
  .col-actions,
  .quick-log-btn,
  .actions-menu,
  .badge-toggle {
    display: none !important;
  }
  .table-container {
    overflow: visible;
    width: 100%;
  }
  table {
    width: 100%;
    font-size: 0.75rem;
    border-collapse: collapse;
  }
  th,
  td {
    padding: 6px 8px;
    border: 1px solid rgba(26, 39, 68, 0.25);
  }
  thead {
    background: var(--cream-light) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .main-content.with-sidebar {
    margin-left: 0;
  }
  .sidebar {
    transform: translateX(-100%);
  }
  .mobile-nav {
    display: flex;
  }
  .main-content.with-sidebar {
    padding-bottom: calc(var(--mobile-nav-height) + var(--space-xl));
  }
  .mobile-menu-overlay {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  /* Card layout replacing horizontal scroll on small screens. The
     first <td> in each row becomes the card's title (no label, bold,
     larger) - it's always the identifying field (horse name, etc.) so
     a "Horse: Bella" label above it is redundant. Everything else packs
     into a compact 2-column grid instead of one full-width row per
     field, which is what was making these cards feel bulky. */
  table.table-responsive-cards thead {
    display: none;
  }
  table.table-responsive-cards,
  table.table-responsive-cards tbody {
    display: block;
    width: 100%;
  }
  table.table-responsive-cards tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px var(--space-md);
    margin-bottom: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid rgba(26, 39, 68, 0.1);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: 0 1px 3px rgba(26, 39, 68, 0.06);
  }
  table.table-responsive-cards tr:nth-child(even) {
    background: var(--white);
  }
  table.table-responsive-cards tr:last-child {
    margin-bottom: 0;
  }
  table.table-responsive-cards td {
    padding: 3px 0;
    text-align: left;
    font-size: 0.875rem;
  }
  table.table-responsive-cards td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted-light);
    margin-bottom: 1px;
  }
  /* First field = card title: full width, no label, stands out. */
  table.table-responsive-cards td:first-child {
    grid-column: 1 / -1;
    font-size: 1rem;
    padding: 0 0 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(26, 39, 68, 0.08);
  }
  table.table-responsive-cards td:first-child::before {
    content: none;
  }
  /* Actions always span the full card width, at the bottom. */
  table.table-responsive-cards td.col-actions {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(26, 39, 68, 0.08);
  }
  table.table-responsive-cards td.col-actions::before {
    content: none;
  }
  /* Empty-state / colspan cells span the full card - no label, centered. */
  table.table-responsive-cards td.empty-cell,
  table.table-responsive-cards td[colspan] {
    grid-column: 1 / -1;
    text-align: center;
  }
  table.table-responsive-cards td.empty-cell::before,
  table.table-responsive-cards td[colspan]::before {
    content: none;
  }
  table.table-responsive-cards .actions-menu-list {
    text-align: left;
  }
}
@media (max-width: 768px) {
  /* Tighter spacing scale for mobile. Because the whole app - including
     inline style="" attributes across every page - uses var(--space-*)
     rather than hardcoded values, redefining the scale here cascades
     into every page automatically: card padding, page margins, grid
     gaps, modal padding, form spacing, all of it, with zero changes
     needed to any PHP file. This is the fix for content feeling cramped
     or oddly-proportioned on small screens - fixed desktop-sized spacing
     was fighting the smaller viewport. */
  :root {
    --space-md: 0.875rem;
    --space-lg: 1.125rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
  }

  .main-content {
    padding: var(--space-lg);
  }
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .page-header h1 {
    font-size: 1.5rem;
  }
  .page-header-actions {
    width: 100%;
  }
  .page-header-actions .btn {
    flex: 1;
  }
  .profile-actions {
    width: 100%;
  }
  .profile-actions .btn {
    flex: 1;
    min-width: 0;
  }

  /* Stat cards: 2 columns on phones (still readable, less wasted
     vertical scroll than stacking every single one) - see the 480px
     tier below for the final drop to 1 column on the smallest phones. */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  .stat-card {
    padding: var(--space-lg);
  }
  .stat-value {
    font-size: 1.5rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
  .profile-header {
    flex-direction: column;
  }
  .search-filter-bar {
    flex-direction: column;
  }
  .search-box {
    min-width: 100%;
  }

  /* Touch targets: comfortable tap area on phones (44px is the common
     iOS/Android minimum recommendation) without changing desktop sizing. */
  .btn {
    min-height: 44px;
  }
  .btn-sm {
    min-height: 38px;
  }
  .form-control {
    min-height: 44px;
    font-size: 16px; /* iOS Safari auto-zooms on focus for inputs under 16px - this avoids that */
  }
  select.form-control {
    font-size: 16px;
  }
  .nav-link,
  .mobile-menu-nav .nav-link {
    min-height: 48px;
  }

  /* Tables: tighter cells plus a visible scroll affordance so a wide
     table doesn't just look silently cut off on a narrow phone. */
  th,
  td {
    padding: var(--space-sm);
    font-size: 0.8125rem;
  }
  .table-container {
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--white) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to left, var(--white) 30%, rgba(255, 255, 255, 0)) 100% 0,
      linear-gradient(to right, rgba(26, 39, 68, 0.12), rgba(26, 39, 68, 0)),
      linear-gradient(to left, rgba(26, 39, 68, 0.12), rgba(26, 39, 68, 0)) 100%
        0;
    background-repeat: no-repeat;
    background-size:
      24px 100%,
      24px 100%,
      8px 100%,
      8px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  .login-card {
    padding: var(--space-xl);
  }
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Modal and Quick Log checklist: full-width, comfortable tap targets */
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--space-lg);
  }
  .modal-footer {
    flex-direction: column-reverse;
  }
  .modal-footer .btn {
    width: 100%;
  }
  .quick-log-checklist {
    max-height: 160px;
  }
  .quick-log-check-item {
    min-height: 32px;
  }

  /* Row-menu dropdown gets repositioned to position:fixed by app.js when
     opened (so it can't be clipped by a horizontally-scrolling table
     container) - this just gives it a sane minimum tap-friendly size. */
  .row-menu-dropdown a,
  .row-menu-dropdown button,
  .actions-menu-list a,
  .actions-menu-list button {
    min-height: 44px;
  }

  .timeline-padded {
    padding: var(--space-md) var(--space-md) var(--space-md) 22px;
  }
}

/* Extra-small phones: one more notch down for the tightest viewports */
@media (max-width: 480px) {
  :root {
    --space-lg: 1rem;
    --space-xl: 1.25rem;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .card-body {
    padding: var(--space-lg);
  }
  .modal-header h3 {
    font-size: 1.0625rem;
  }
  .btn {
    font-size: 0.875rem;
    padding: var(--space-sm) var(--space-md);
  }
  .profile-avatar {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  .info-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .info-item {
    padding: 10px 0;
    border-bottom: 1px solid rgba(26, 39, 68, 0.06);
  }
  .info-item:last-child {
    border-bottom: none;
  }
  .timeline-content {
    padding: var(--space-md);
  }
  .timeline-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* Utilities */
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-muted {
  color: var(--muted);
}
.text-danger {
  color: var(--danger);
}
.text-success {
  color: var(--success);
}
.mb-0 {
  margin-bottom: 0;
}
.mb-sm {
  margin-bottom: var(--space-sm);
}
.mb-md {
  margin-bottom: var(--space-md);
}
.mb-lg {
  margin-bottom: var(--space-lg);
}
.mb-xl {
  margin-bottom: var(--space-xl);
}
.mt-sm {
  margin-top: var(--space-sm);
}
.mt-md {
  margin-top: var(--space-md);
}
.mt-lg {
  margin-top: var(--space-lg);
}
.d-flex {
  display: flex;
}
.align-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-sm {
  gap: var(--space-sm);
}
.gap-md {
  gap: var(--space-md);
}
.w-100 {
  width: 100%;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

/* App Footer */
.app-footer {
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(26, 39, 68, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  text-align: center;
}
.app-footer-logo {
  height: 26px;
  width: auto;
  opacity: 0.85;
}
.app-footer-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.app-footer-brand {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--navy);
}
.app-footer-copyright {
  font-size: 0.8125rem;
  color: var(--muted-light);
}
@media (max-width: 768px) {
  .app-footer {
    margin-top: var(--space-xl);
  }
}

/* Horse profile photo (horse_profile.php) */
.horse-details-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-xl);
}
.horse-details-layout .info-grid {
  flex: 1;
  min-width: 0;
}
.horse-photo {
  flex: 0 0 220px;
  width: 220px;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--cream);
  border: 1px solid rgba(26, 39, 68, 0.08);
  padding: 0;
}
.horse-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}
.horse-photo:hover img {
  transform: scale(1.04);
}
.photo-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  display: block;
}
.photo-lightbox {
  cursor: zoom-out;
}
.horse-photo-edit-preview {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.horse-photo-edit-preview img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* Plain (non-card) horse profile layout */
.profile-section {
  padding: var(--space-xl) 0;
  border-top: 1px solid rgba(26, 39, 68, 0.1);
}
.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 1.125rem;
  margin-bottom: var(--space-lg);
}
.section-count {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
}
.profile-section .timeline-content {
  background: none;
  padding: 0 0 var(--space-sm);
}
.horse-details-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-xl);
}
.horse-details-layout .info-grid {
  flex: 1;
  min-width: 0;
}
@media (max-width: 768px) {
  .horse-details-layout {
    flex-direction: column;
  }
  .horse-photo {
    flex: none;
    width: 100%;
    max-width: 320px;
  }
}

/* Horses list */
.list-count {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: var(--space-sm);
}
.horse-list {
  border-top: 1px solid rgba(26, 39, 68, 0.12);
}
.horse-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.3fr) minmax(0, 1.2fr) auto 20px;
  align-items: center;
  column-gap: var(--space-lg);
  padding: 14px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid rgba(26, 39, 68, 0.08);
  border-radius: var(--radius-md);
  color: inherit;
  transition: background var(--transition-fast);
}
.horse-row:hover {
  background: var(--cream);
  color: inherit;
}
.horse-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
}
.horse-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.horse-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.horse-sub,
.horse-address {
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.last-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--cream);
  color: var(--navy);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.horse-row:hover .last-pill {
  background: var(--white);
}
.last-pill.never {
  background: var(--warning-bg);
  color: var(--warning);
}
.horse-caret {
  color: var(--muted-light);
  font-size: 1rem;
  transition:
    transform var(--transition-fast),
    color var(--transition-fast);
}
.horse-row:hover .horse-caret {
  color: var(--navy);
  transform: translateX(3px);
}
@media (max-width: 768px) {
  .horse-row {
    grid-template-columns: 44px minmax(0, 1fr) 16px;
    row-gap: 2px;
    padding: 14px 8px;
    margin: 0 -8px;
  }
  .horse-avatar {
    grid-row: 1 / span 3;
    align-self: start;
  }
  .horse-main {
    grid-column: 2;
    grid-row: 1;
  }
  .horse-address {
    grid-column: 2;
    grid-row: 2;
  }
  .horse-address:empty {
    display: none;
  }
  .horse-last {
    grid-column: 2;
    grid-row: 3;
    margin-top: 6px;
  }
  .horse-caret {
    grid-column: 3;
    grid-row: 1 / span 3;
    align-self: center;
  }
}

/* Dashboard */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}
.dash-stat {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--cream);
  color: inherit;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
}
a.dash-stat:hover {
  background: var(--cream-dark);
  color: inherit;
  transform: translateY(-1px);
}
.stat-circle {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.dash-stat.is-danger .stat-circle {
  background: var(--danger);
  color: var(--white);
}
.dash-stat.is-warning .stat-circle {
  background: var(--warning);
  color: var(--white);
}
.dash-stat-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dash-stat-value {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
}
.dash-stat-label {
  margin-top: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}
.dash-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: start;
}
.dash-section {
  min-width: 0;
}
.dash-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.dash-section-head h2 {
  font-size: 1.375rem;
}
.dash-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
}
.dash-link:hover {
  color: var(--navy);
}
.dash-list {
  border-top: 1px solid rgba(26, 39, 68, 0.12);
}
.due-row,
.activity-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 14px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid rgba(26, 39, 68, 0.08);
  border-radius: var(--radius-md);
  color: inherit;
  transition: background var(--transition-fast);
}
.due-row:hover,
.activity-row:hover {
  background: var(--cream);
  color: inherit;
}
.due-row .horse-avatar,
.activity-row .horse-avatar {
  flex-shrink: 0;
}
.due-info,
.activity-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: inherit;
}
.due-name,
.activity-horse {
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.due-meta,
.activity-by {
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.due-badge {
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.due-badge.overdue {
  background: var(--danger-bg);
  color: var(--danger);
}
.due-badge.today {
  background: var(--warning-bg);
  color: var(--warning);
}
.activity-row:hover .last-pill {
  background: var(--white);
}
.activity-row:hover .horse-caret {
  color: var(--navy);
  transform: translateX(3px);
}
.dash-more {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
}
.dash-more:hover {
  color: var(--navy);
}
.all-clear {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-top: 1px solid rgba(26, 39, 68, 0.12);
  color: var(--muted);
}
.all-clear i {
  font-size: 2rem;
  color: var(--success-light);
}
.all-clear strong {
  display: block;
  color: var(--navy);
}
.all-clear span {
  font-size: 0.875rem;
}
@media (max-width: 1100px) {
  .dash-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .dash-stats {
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
  }
  .dash-stat {
    padding: var(--space-md) var(--space-sm);
    gap: var(--space-sm);
  }
  .stat-circle {
    width: 38px;
    height: 38px;
    font-size: 1.125rem;
  }
  .dash-stat-value {
    font-size: 1.625rem;
  }
  .dash-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
  .due-row,
  .activity-row {
    padding: 12px 8px;
    margin: 0 -8px;
    gap: var(--space-sm);
  }
  .due-row .horse-avatar,
  .activity-row .horse-avatar {
    width: 38px;
    height: 38px;
    font-size: 1.0625rem;
  }
  .activity-row .horse-caret {
    display: none;
  }
}

/* Small phones: keep the due-today rows inside the screen */
@media (max-width: 480px) {
  .due-row {
    flex-wrap: wrap;
  }
  .due-row .due-info {
    flex: 1 1 calc(100% - 52px);
  }
  .due-row .due-badge,
  .due-row .btn {
    margin-left: 46px;
  }
  .due-row .btn {
    margin-left: auto;
  }
  .dash-stat-label {
    font-size: 0.75rem;
  }
  .last-pill {
    padding: 3px 10px;
    font-size: 0.75rem;
  }
}

/* Never let the page scroll sideways */
html,
body {
  overflow-x: clip;
}

/* Visits */
.visit-section {
  margin-bottom: var(--space-2xl);
}
.due-badge.upcoming {
  background: var(--cream);
  color: var(--navy);
}
.due-row .row-actions {
  flex-shrink: 0;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
}
@media (max-width: 480px) {
  .due-row .row-actions {
    margin-left: auto;
  }
  .due-row .row-actions .btn {
    margin-left: 0;
  }
}

/* Reminders */
.reminder-form {
  flex-shrink: 0;
  margin: 0;
}
.horse-avatar.done {
  background: var(--cream-dark);
  color: var(--navy);
  font-size: 1.125rem;
}
.due-row.is-dismissed {
  opacity: 0.65;
}
.dismissed-note {
  text-align: right;
}
@media (max-width: 480px) {
  .due-row .reminder-form {
    margin-left: auto;
  }
  .due-row .reminder-form .btn {
    margin-left: 0;
  }
  .dismissed-note {
    flex: 1 1 100%;
    margin-left: 46px;
    text-align: left;
  }
  .due-row.is-dismissed {
    flex-wrap: wrap;
  }
}

/* Schedule */
.schedule-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.seg-group {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 100px;
  background: var(--cream);
}
.seg {
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}
.seg:hover {
  color: var(--navy);
}
.seg.active {
  background: var(--navy);
  color: var(--cream);
}
.schedule-custom-filters {
  margin-bottom: var(--space-lg);
}
.sched-count {
  margin-left: var(--space-sm);
  font-family: var(--font-body);
  vertical-align: middle;
}
.sched-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1.3fr) 250px 110px 20px;
  align-items: center;
  column-gap: var(--space-lg);
  padding: 14px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid rgba(26, 39, 68, 0.08);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.sched-row:hover {
  background: var(--cream);
}
.sched-row:hover .horse-caret {
  color: var(--navy);
  transform: translateX(3px);
}
/* Whole row opens the profile; phone/map links sit above that layer. */
.sched-link {
  color: var(--navy);
}
.sched-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.sched-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 0.8125rem;
}
.sched-contact a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
}
.sched-contact a:hover {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sched-contact a span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sched-contact i {
  flex-shrink: 0;
  color: var(--muted-light);
}
.sched-dates {
  display: flex;
  gap: var(--space-lg);
  font-size: 0.875rem;
  color: var(--navy);
  white-space: nowrap;
}
.sd {
  display: flex;
  flex-direction: column;
}
.sd em {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.print-only {
  display: none;
}
@media print {
  .sched-screen {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
}
@media (max-width: 768px) {
  .sched-screen .dash-section-head {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  .sched-screen .dash-section-head h2 {
    font-size: 1.25rem;
  }
  .sched-screen .dash-section-head .btn {
    width: 100%;
  }
  .seg-group {
    display: flex;
    width: 100%;
  }
  .seg {
    flex: 1;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    font-size: 0.8125rem;
  }
  .schedule-tabs {
    gap: var(--space-sm);
  }
  .schedule-filter-toggle {
    width: 100%;
  }
  .schedule-custom-filters .form-group .btn {
    flex: 1;
  }

  /* One horse = name + status, then labelled dates, then tap-to-call / map. */
  .sched-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 10px;
    padding: 16px 8px;
    margin: 0 -8px;
  }
  .sched-row .horse-avatar {
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
    grid-column: 1;
    grid-row: 1;
  }
  .sched-row .horse-name,
  .sched-row .horse-sub {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .sched-row .horse-main {
    grid-column: 2;
    grid-row: 1;
  }
  .sched-row .sched-status {
    grid-column: 3;
    grid-row: 1;
  }
  .sched-row .sched-dates {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--cream-light);
    white-space: normal;
  }
  .sched-row:hover .sched-dates {
    background: var(--white);
  }
  .sched-row .sched-contact {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .sched-row .sched-contact:empty {
    display: none;
  }
  .sched-row .sched-contact a {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 100px;
    background: var(--cream);
    color: var(--navy);
    font-weight: 600;
    max-width: 100%;
  }
  .sched-row .horse-caret {
    display: none;
  }
}

/* Horse photos inside avatars */
.horse-avatar,
.profile-avatar {
  position: relative;
  overflow: hidden;
}
.horse-avatar img,
.profile-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Service history */
.hist-day {
  margin: var(--space-lg) 0 var(--space-xs);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.horse-list > .hist-day:first-child {
  margin-top: var(--space-md);
}
.hist-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1.3fr) 20px;
  align-items: center;
  column-gap: var(--space-lg);
  padding: 14px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid rgba(26, 39, 68, 0.08);
  border-radius: var(--radius-md);
  color: inherit;
  transition: background var(--transition-fast);
}
.hist-row:hover {
  background: var(--cream);
  color: inherit;
}
.hist-row:hover .horse-caret {
  color: var(--navy);
  transform: translateX(3px);
}
.hist-row:hover .service-tag {
  background: var(--cream-light);
}
.hist-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.history-filters {
  margin-bottom: var(--space-md);
}
.history-filters .schedule-custom-filters {
  padding-top: var(--space-md);
}
@media (max-width: 768px) {
  .hist-row {
    grid-template-columns: 40px minmax(0, 1fr);
    row-gap: 8px;
    column-gap: 12px;
    padding: 14px 8px;
    margin: 0 -8px;
  }
  .hist-row .horse-avatar {
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
  }
  .hist-row .horse-name,
  .hist-row .horse-sub {
    white-space: normal;
  }
  .hist-row .hist-tags {
    grid-column: 2;
  }
  .hist-row .horse-caret {
    display: none;
  }
  .history-filters .schedule-filter-toggle {
    width: 100%;
  }
  .search-filter-bar .form-control {
    max-width: none !important;
    width: 100%;
  }
}

/* My Profile */
.acct-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.acct-header .profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  font-size: 1.75rem;
}
.acct-id {
  min-width: 0;
}
.acct-id h2 {
  font-size: 1.5rem;
  overflow-wrap: anywhere;
}
.acct-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.acct-username {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.acct-form {
  max-width: 640px;
}
.pw-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.pw-details summary::-webkit-details-marker {
  display: none;
}
.pw-caret {
  color: var(--muted-light);
  transition: transform var(--transition-fast);
}
.pw-details[open] .pw-caret {
  transform: rotate(180deg);
}
.acct-actions {
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(26, 39, 68, 0.1);
}
@media (max-width: 768px) {
  .acct-header .profile-avatar {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  .acct-actions .btn {
    width: 100%;
  }
  .acct-form .form-row {
    gap: 0;
  }
}

/* Staff */
.staff-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-lg);
  padding: 14px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid rgba(26, 39, 68, 0.08);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.staff-row:hover {
  background: var(--cream);
}
.staff-row .horse-sub {
  white-space: normal;
  overflow-wrap: anywhere;
}
.staff-row.is-inactive .horse-main,
.staff-row.is-inactive .horse-avatar {
  opacity: 0.55;
}
.you-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 100px;
  background: var(--cream);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.staff-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-md);
}
.staff-form {
  margin: 0;
  display: inline-flex;
}
.status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: none;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--transition-fast);
}
.status-toggle::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.status-toggle.on {
  background: var(--success-bg);
  color: var(--success);
}
.status-toggle.off {
  background: var(--danger-bg);
  color: var(--danger);
}
.status-toggle:hover:not(:disabled) {
  filter: brightness(0.95);
}
.status-toggle:disabled {
  cursor: default;
  opacity: 0.7;
}
@media (max-width: 768px) {
  .staff-row {
    grid-template-columns: 40px minmax(0, 1fr);
    row-gap: 10px;
    column-gap: 12px;
    padding: 14px 8px;
    margin: 0 -8px;
  }
  .staff-row .horse-avatar {
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
  }
  .staff-row .horse-name {
    white-space: normal;
  }
  .staff-controls {
    grid-column: 2;
    justify-content: flex-start;
    gap: var(--space-sm) var(--space-md);
  }
  .staff-controls .staff-actions {
    flex-basis: 100%;
  }
  .staff-controls .staff-actions .btn {
    flex: 1;
  }
  .staff-controls .staff-actions .staff-form {
    flex: 1;
  }
  .staff-controls .staff-actions .staff-form .btn {
    width: 100%;
  }
  .status-toggle {
    min-height: 36px;
    padding: 4px 14px;
  }
}

/* Service catalog */
.order-chip {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.staff-row.is-inactive .order-chip {
  opacity: 0.55;
}
.staff-row.is-editing {
  background: var(--cream);
}
.staff-row a.horse-name {
  color: var(--navy);
}
.staff-row a.horse-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cat-usage {
  font-size: 0.8125rem;
  color: var(--muted-light);
}
.cat-form-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}
@media (max-width: 768px) {
  .order-chip {
    width: 40px;
    height: 40px;
  }
  .cat-form-actions .btn {
    flex: 1;
  }
}

/* Deleted records */
.del-note {
  color: var(--danger);
}
.staff-row.is-inactive .horse-avatar img {
  filter: grayscale(1);
}
@media (max-width: 768px) {
  .staff-controls .btn:only-child {
    width: 100%;
  }
}

/* Deleted records: grouped per horse */
.del-group summary {
  list-style: none;
  cursor: pointer;
}
.del-group summary::-webkit-details-marker {
  display: none;
}
.del-group summary .staff-row {
  border-bottom: none;
}
.del-group {
  border-bottom: 1px solid rgba(26, 39, 68, 0.08);
}
.del-caret {
  color: var(--muted-light);
  transition: transform var(--transition-fast);
}
.del-group[open] .del-caret {
  transform: rotate(90deg);
}
.del-items {
  margin: 0 0 var(--space-md) 56px;
  padding-left: var(--space-md);
  border-left: 2px solid var(--cream-dark);
}
.del-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 12px 0;
  border-bottom: 1px solid rgba(26, 39, 68, 0.06);
}
.del-item:last-of-type {
  border-bottom: none;
}
.del-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.del-item-title {
  font-weight: 600;
  color: var(--navy);
}
.del-items .dash-more {
  margin-top: var(--space-xs);
}
@media (max-width: 768px) {
  .del-items {
    margin-left: 20px;
  }
  .del-item {
    flex-wrap: wrap;
  }
  .del-item .btn {
    width: 100%;
  }
  .del-group summary .staff-controls {
    grid-column: auto;
  }
  .del-group summary .staff-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    row-gap: 0;
  }
}

/* Restore button on deleted records */
.del-item-actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .del-item-actions {
    width: 100%;
  }
  .del-item-actions .btn,
  .del-item-actions .staff-form {
    flex: 1;
  }
  .del-item-actions .staff-form .btn {
    width: 100%;
  }
}

/* Settings */
.setting-short {
  max-width: 200px;
}
@media (max-width: 768px) {
  .setting-short {
    max-width: none;
  }
}