/* Tierarztpraxis Arsenal — Intake & Reminder Console
   Custom bits on top of Tailwind. Keep small. */

:root {
  --brand: #50804c;
  --brand-600: #406a3d;
  --ember: #ff6900;
  --forest: #1e6724;
  --alert: #cf2e2e;
  --rose: #f6405f;
  --sky: #2aabee;
}

html { scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; }

/* hero / display font */
.font-display { letter-spacing: -0.01em; }

/* chip / pill toggle (used in allergy step) */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: .5rem .85rem;
  border-radius: 9999px;
  border: 1px solid rgb(231 229 228);
  background: #fff;
  font-size: .8rem;
  font-weight: 500;
  color: rgb(68 64 60);
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
}
.chip:hover { border-color: rgb(214 211 209); }
.chip:has(input:checked) {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(80,128,76,.2);
}

/* KPI card */
.kpi {
  background: #fff;
  border: 1px solid rgb(231 229 228);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.04);
}
.kpi-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgb(120 113 108);
  font-weight: 600;
}
.kpi-value {
  font-family: "Fraunces", Inter, serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: rgb(28 25 23);
  line-height: 1.1;
}

/* risk badge */
.risk {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  border-radius: 9999px;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  border: 1px solid transparent;
}
.risk .dot { width: 6px; height: 6px; border-radius: 9999px; }
.risk-low    { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.risk-low .dot    { background: #10b981; }
.risk-medium { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.risk-medium .dot { background: #f97316; }
.risk-high   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.risk-high .dot   { background: #ef4444; }

/* booking card */
.booking {
  background: #fff;
  border: 1px solid rgb(231 229 228);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.04);
}
@media (max-width: 640px) {
  .booking { grid-template-columns: 1fr; }
}
.booking-time {
  font-family: "Fraunces", Inter, serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: rgb(28 25 23);
  min-width: 4.5rem;
  text-align: center;
  padding: .5rem .75rem;
  border-radius: .75rem;
  background: rgb(247 245 242);
}
.booking-pet {
  font-weight: 600;
  color: rgb(28 25 23);
}
.booking-meta {
  font-size: .8rem;
  color: rgb(87 83 78);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin-top: .15rem;
}
.booking-meta .sep::before { content: "·"; margin: 0 .5rem; color: rgb(168 162 158); }
.booking-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

/* reminder pipeline (visual) */
.pipeline {
  margin-top: .85rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
@media (max-width: 420px) { .pipeline { grid-template-columns: 1fr; } }
.reminder {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .65rem;
  border-radius: .65rem;
  font-size: .75rem;
  border: 1px solid rgb(231 229 228);
  background: #fafaf9;
  color: rgb(87 83 78);
}
.reminder .ic {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
}
.reminder.sent  { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.reminder.sent .ic { background: #16a34a; color: #fff; }
.reminder.queue { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.reminder.queue .ic { background: #f97316; color: #fff; }

/* day header */
.day-header {
  display: flex; align-items: baseline; gap: .75rem;
  margin-bottom: .75rem;
}
.day-header .when {
  font-family: "Fraunces", Inter, serif;
  font-weight: 600; font-size: 1.15rem; color: rgb(28 25 23);
}
.day-header .rel { font-size: .8rem; color: rgb(120 113 108); }
.day-header .count {
  margin-left: auto; font-size: .75rem; color: rgb(120 113 108);
  background: #fff; border: 1px solid rgb(231 229 228); border-radius: 9999px;
  padding: .15rem .6rem;
}

/* review summary card */
#reviewCard dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: rgb(120 113 108); font-weight: 600; }
#reviewCard dd { color: rgb(28 25 23); margin-top: .15rem; }
#reviewCard .grid > div { padding: .6rem .8rem; background: #fff; border: 1px solid rgb(231 229 228); border-radius: .65rem; }

/* focus polish */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: .5rem;
}

/* step transitions */
.step { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }