/* ── Design tokens ── */
:root {
  --ds-blue:     #2563EB;
  --ds-blue-dk:  #1D4ED8;
  --ds-blue-lt:  #EFF6FF;
  --ds-green:    #059669;
  --ds-green-dk: #047857;
  --ds-green-lt: #ECFDF5;
  --ds-amber:    #D97706;
  --ds-red:      #DC2626;
  --ds-bg:       #F2F5FF;
  --ds-card:     #FFFFFF;
  --ds-border:   #E2E8F0;
  --ds-text:     #0F172A;
  --ds-mid:      #475569;
  --ds-lt:       #94A3B8;
  --ds-r:        16px;
  --ds-r-sm:     10px;
  --ds-sh:       0 2px 6px rgba(0,0,0,0.05), 0 8px 24px rgba(37,99,235,0.07);
}

/* ── Base ── */
body { background: var(--ds-bg); font-family: 'Nunito', sans-serif; color: var(--ds-text); }
h1,h2,h3,h4,h5,h6 { font-family: 'Sora', sans-serif; }

/* ── Bootstrap overrides ── */
.card { border-radius: var(--ds-r) !important; box-shadow: var(--ds-sh) !important; border: none !important; overflow-x: hidden; }
.card-header {
  background: #FAFBFE !important;
  border-bottom: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r) var(--ds-r) 0 0 !important;
  padding: 0.85rem 1.25rem !important;
}
.card-header h5 { font-size: 0.95rem !important; font-weight: 700 !important; margin: 0 !important; }
.card-body { padding: 1.25rem !important; }
.form-label { font-weight: 600 !important; font-size: 0.82rem !important; color: var(--ds-mid) !important; margin-bottom: 0.25rem !important; }
.form-control, .form-select { border-color: var(--ds-border); border-radius: var(--ds-r-sm); font-family: 'Nunito', sans-serif; }
.form-control:focus, .form-select:focus { border-color: var(--ds-blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.table thead th { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.8rem; color: var(--ds-mid); border-color: var(--ds-border); }
.table td { font-size: 0.85rem; border-color: var(--ds-border); }

/* ── Utility ── */
.ds-link { color: var(--ds-blue) !important; font-weight: 600 !important; text-decoration: none !important; font-size: 0.8rem; }
.ds-link:hover { color: var(--ds-blue-dk) !important; text-decoration: underline !important; }
.ds-badge-success { background: var(--ds-green) !important; color: #fff; font-size: 0.8rem; padding: 0.35em 0.7em; border-radius: 50px; }
.ds-badge-danger  { background: var(--ds-red)   !important; color: #fff; font-size: 0.8rem; padding: 0.35em 0.7em; border-radius: 50px; }
.ds-organizer { font-size: 0.88rem; color: var(--ds-mid); margin: 0; word-break: break-word; }
.ds-organizer strong { color: var(--ds-text); font-weight: 700; }

/* Color utilities */
.text-ds-blue  { color: var(--ds-blue) !important; }
.text-ds-green { color: var(--ds-green) !important; }
.text-ds-amber { color: var(--ds-amber) !important; }
.text-ds-mid   { color: var(--ds-mid) !important; }

/* Modal header variants */
.ds-modal-success {
  background: linear-gradient(135deg, #047857, #059669);
  color: #fff;
  border-radius: 16px 16px 0 0;
  border-bottom: none !important;
}
.ds-modal-success .modal-title { font-family: 'Sora', sans-serif; font-weight: 800; color: #fff; }
.ds-modal-success .btn-close { filter: invert(1) brightness(2); }

/* ── Shared hero component for ng pages ── */
.ng-hero {
  background: linear-gradient(135deg, #C7D2FE 0%, #DDD6FE 50%, #FBCFE8 100%);
  padding: 2.25rem 2rem;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 1.5rem;
  border: 1px solid #C4B5FD;
}
.ng-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.5) 0%, transparent 60%);
}
.ng-hero-title {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  color: #3730A3;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 0.2rem;
  position: relative;
}
.ng-hero-sub {
  font-size: 0.97rem;
  color: #6D6A8A;
  font-weight: 500;
  margin: 0;
  position: relative;
}
.btn { font-family: 'Sora', sans-serif !important; font-weight: 600 !important; }

/* ── Shared modal styles ── */
.modal-content {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
  overflow: hidden;
}

.ds-modal-danger {
  background: linear-gradient(135deg, #B91C1C, #DC2626);
  color: #fff;
  border-radius: 16px 16px 0 0;
  border-bottom: none !important;
}
.ds-modal-danger .modal-title { font-family: 'Sora', sans-serif; font-weight: 800; color: #fff; }
.ds-modal-danger .btn-close { filter: invert(1) brightness(2); }

.ds-modal-warning {
  background: linear-gradient(135deg, #B45309, #D97706);
  color: #fff;
  border-radius: 16px 16px 0 0;
  border-bottom: none !important;
}
.ds-modal-warning .modal-title { font-family: 'Sora', sans-serif; font-weight: 800; color: #fff; }
.ds-modal-warning .btn-close { filter: invert(1) brightness(2); }

.ds-modal-hero {
  background: linear-gradient(135deg, #C7D2FE 0%, #DDD6FE 50%, #FBCFE8 100%);
  border-bottom: 1px solid #C4B5FD !important;
  border-radius: 16px 16px 0 0;
  padding: 1.1rem 1.4rem !important;
  position: relative;
  overflow: hidden;
}
.ds-modal-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 15% 50%, rgba(255,255,255,0.45) 0%, transparent 60%);
}
.ds-modal-hero .modal-title {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  color: #3730A3 !important;
  letter-spacing: -0.02em;
  position: relative;
}
.ds-modal-hero .btn-close { position: relative; filter: opacity(0.6); }
.ds-modal-hero .btn-close:hover { filter: opacity(1); }
.ds-modal-hero-label {
  font-size: 0.82rem;
  color: #3730A3;
  font-weight: 700;
  font-family: 'Sora', sans-serif;
  position: relative;
}
.ds-modal-hero-input {
  background: rgba(255,255,255,0.65) !important;
  border-color: #A5B4FC !important;
  position: relative;
}
.ds-modal-hero-input:focus {
  background: rgba(255,255,255,0.9) !important;
  border-color: #3730A3 !important;
  box-shadow: 0 0 0 3px rgba(55,48,163,0.12) !important;
}
.ds-modal-hero-close { position: relative; filter: opacity(0.6); }
.ds-modal-hero-close:hover { filter: opacity(1); }

/* ── Filter pills (shared: contacts page + plan contacts modal) ── */
.ct-filter-pill {
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  padding: 0.25rem 0.85rem; border-radius: 50px;
  border: 1.5px solid var(--ds-border);
  background: var(--ds-card); color: var(--ds-mid);
  cursor: pointer; transition: all 0.13s; white-space: nowrap;
}
.ct-filter-pill:hover { border-color: #A5B4FC; color: #3730A3; background: #F5F3FF; }
.ct-filter-pill.active { background: #3730A3; border-color: #3730A3; color: #fff; }

.ng-hero-pill {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.6rem 1.35rem;
  border-radius: 50px;
  background: rgba(255,255,255,0.55);
  color: #3730A3;
  border: 1.5px solid #A5B4FC;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
}

/* ── Plan page event tooltip ── */
#planEventTooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: #fff;
  color: #0F172A;
  font-family: 'Nunito', sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  box-shadow: 0 2px 8px rgba(99,102,241,0.10), 0 8px 28px rgba(99,102,241,0.13);
  border: 1.5px solid #C7D2FE;
  max-width: 260px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
#planEventTooltip.visible { opacity: 1; }
#planEventTooltip .pet-title {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
  color: #3730A3;
}
#planEventTooltip .pet-row {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  color: #475569;
}
#planEventTooltip .pet-row i { color: #818CF8; flex-shrink: 0; }
#planEventTooltip .pet-divider {
  border: none;
  border-top: 1px solid #E0E7FF;
  margin: 0.35rem 0;
}

/* ── Mobile button optimization ── */
@media (max-width: 576px) {
  .btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }
}