/* ============================================================================
   Vital Scan — v5 polish layer.
   Loaded AFTER app.css and responsive.css to nudge consistency across the
   whole product without rewriting each page. Keep this file purely additive
   — it should never break the underlying design system.
   ========================================================================= */

/* ── Reduce-motion: respect the OS preference for users who get motion
   sickness from animations. Most of our microinteractions are decorative. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}

/* ── Buttons: consistent height + press feedback + focus rings ──────────── */
.btn,
button.btn {
  min-height: 38px;
  padding-inline: 16px;
  font-weight: 600;
  letter-spacing: .005em;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn:not(:disabled):active { transform: translateY(0); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(27,154,170,.35), 0 8px 18px rgba(13,59,102,.12);
}
.btn-primary {
  background: linear-gradient(135deg, var(--vs-primary, #0a2e57), var(--vs-accent, #1b9aaa));
  border: none;
  color: #fff;
  box-shadow: 0 6px 16px rgba(13,59,102,.18);
}
.btn-primary:not(:disabled):hover { box-shadow: 0 10px 22px rgba(13,59,102,.24); }
.btn-ghost {
  background: #fff;
  border: 1px solid var(--vs-line, #e3eaf1);
  color: var(--vs-primary, #0a2e57);
}
.btn-ghost:not(:disabled):hover { background: var(--vs-bg-2, #ecf5ff); border-color: var(--vs-accent, #1b9aaa); }
.btn-sm { min-height: 30px; padding-inline: 10px; font-size: 12.5px; }

/* ── Form controls: unified appearance ─────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"],
input[type="date"], input[type="time"], input[type="datetime-local"],
select, textarea {
  font: inherit;
  color: var(--vs-ink, #0d2c3b);
  background: #fff;
  border: 1px solid var(--vs-line, #d4dde6);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  width: 100%;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--vs-accent, #1b9aaa);
  box-shadow: 0 0 0 3px rgba(27,154,170,.18);
}
input::placeholder, textarea::placeholder { color: #9aa9b8; }
input[disabled], select[disabled], textarea[disabled] { background: #f4f7fa; opacity: .85; cursor: not-allowed; }
label { font-weight: 600; font-size: 12.5px; color: var(--vs-muted, #5b7184); letter-spacing: .25px; }

/* ── Cards: subtle elevation that scales gracefully on mobile ──────────── */
.card, .vs-card, .pay-card, .empty-card {
  background: #fff;
  border: 1px solid var(--vs-line, #e3eaf1);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(13,59,102,.04), 0 8px 24px rgba(13,59,102,.05);
}

/* ── Tables: clean default look ────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
table th { background: var(--vs-bg-2, #f4f7fa); color: var(--vs-primary, #0a2e57); text-align: left; padding: 10px 12px; font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; border-bottom: 1px solid var(--vs-line, #e3eaf1); }
table td { padding: 10px 12px; border-bottom: 1px solid #eef2f5; vertical-align: top; }
table tr:last-child td { border-bottom: none; }
table tr:hover td { background: rgba(27,154,170,.04); }

/* ── Pills / chips ─────────────────────────────────────────────────────── */
.chip, .pill, .tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font: 600 11.5px var(--vs-font, system-ui);
  background: var(--vs-bg-2, #eef2f5); color: var(--vs-ink-2, #3c5a73);
}

/* ── Scrollbar polish (WebKit) — subtle, not loud ─────────────────────── */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(13,59,102,.18); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(13,59,102,.32); border: 2px solid transparent; background-clip: padding-box; }

/* ── App header: tighten alignment + shadow ────────────────────────────── */
.app-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--vs-line, #e3eaf1);
  box-shadow: 0 1px 0 rgba(13,59,102,.04);
}
.app-nav a {
  position: relative;
  transition: color .15s ease;
}
.app-nav a.active::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: -2px;
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--vs-primary, #0a2e57), var(--vs-accent, #1b9aaa));
}

/* ── Modal feel — softer backdrop ──────────────────────────────────────── */
.modal-backdrop, .vs-modal-backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ── Toast: cleaner edge ──────────────────────────────────────────────── */
.toast { box-shadow: 0 12px 28px rgba(13,59,102,.18); border-radius: 12px; }

/* ── Touch targets on mobile: never less than 44 px tall ───────────────── */
@media (max-width: 640px) {
  .btn, button.btn, .nav a, .app-nav a, .slot-btn, .date-chip, .qa, .apt-stat, .vs-bot-mic { min-height: 44px; }
  input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], select, textarea { min-height: 44px; padding: 10px 14px; font-size: 16px; /* avoids iOS zoom */ }
  body { -webkit-text-size-adjust: 100%; }
}

/* ── Empty states: friendly look ───────────────────────────────────────── */
.empty, .empty-card {
  text-align: center;
  padding: 32px 24px;
  color: var(--vs-muted, #5b7184);
}
.empty-card h3, .empty h3 { color: var(--vs-primary, #0a2e57); margin: 0 0 6px; }

/* ── Filter bar (used on doctor appointments + admin) ──────────────────── */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
  background: #fff; border: 1px solid var(--vs-line, #e3eaf1); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(13,59,102,.04), 0 8px 24px rgba(13,59,102,.05);
}
.filter-bar > div { display: flex; flex-direction: column; gap: 4px; }
.filter-bar label { font-size: 11px; }

/* ── Date picker (slot strip, override picker) — better hover state ───── */
.date-chip {
  background: #fff; border: 1px solid var(--vs-line, #e3eaf1); border-radius: 12px;
  padding: 8px 10px; cursor: pointer;
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.date-chip:hover { border-color: var(--vs-accent, #1b9aaa); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(13,59,102,.08); }
.date-chip.active { background: linear-gradient(135deg, var(--vs-primary, #0a2e57), var(--vs-accent, #1b9aaa)); color: #fff; border-color: transparent; }
.date-chip.active .dow, .date-chip.active .mon { color: rgba(255,255,255,.78); }

/* ── Slot button polish ─────────────────────────────────────────────────── */
.slot-btn {
  background: #fff; border: 1px solid var(--vs-line, #e3eaf1); color: var(--vs-primary, #0a2e57);
  border-radius: 10px; padding: 9px 12px; font-weight: 600;
  transition: transform .12s, background .15s, border-color .15s, color .15s;
  cursor: pointer;
}
.slot-btn:hover { background: var(--vs-bg-2, #ecf5ff); border-color: var(--vs-accent, #1b9aaa); transform: translateY(-1px); }
.slot-btn.selected, .slot-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--vs-primary, #0a2e57), var(--vs-accent, #1b9aaa));
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(13,59,102,.22);
}

/* ── Login / signup pages — center the card and breathe ────────────────── */
body.auth-page main, body.auth main { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; background: linear-gradient(135deg, var(--vs-bg, #f6f9ff), var(--vs-bg-3, #e1f0ff)); }

/* ── Nicer KPI card across dashboards ──────────────────────────────────── */
.kpi-card, .stat-card, .mr-card {
  position: relative; overflow: hidden;
}
.kpi-card::before, .stat-card::before, .mr-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--vs-primary, #0a2e57), var(--vs-accent, #1b9aaa));
  opacity: .85;
}

/* ── Selection color matches brand ────────────────────────────────────── */
::selection { background: rgba(27,154,170,.28); color: var(--vs-ink, #051d2d); }

/* ── Quick Rx voice strip: pulsing red border while recording ────────── */
#rx-voice-strip.rx-recording {
  border: 2px solid #ef4444;
  border-radius: 12px;
  padding: 8px;
  animation: vs-rec-pulse 1.4s ease-in-out infinite;
  background: #fff5f5;
}
@keyframes vs-rec-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
  50%     { box-shadow: 0 0 0 6px rgba(239,68,68,0);   }
}
.rx-diet-disabled { transition: opacity .15s ease, filter .15s ease; }

/* ── Print: hide chrome ───────────────────────────────────────────────── */
@media print {
  .app-header, .vs-bot-fab, .vs-bot-panel, .toast-host, .filter-bar, .pager, .no-print { display: none !important; }
  body { background: #fff; }
}