/* ==========================================================================
   PrescriberNow — Provider Dashboard Design System v4
   Pure CSS rework. Zero HTML/JS changes.
   Brand tokens, layout, typography, components, responsive.
   ========================================================================== */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Core palette */
  --pn-navy:      #001B72;
  --pn-blue:      #2A7DE2;
  --pn-blue-2:    #1E5FB8;
  --pn-blue-3:    #EFF6FF;
  --pn-teal:      #0F8C8C;
  --pn-teal-soft: #E0F4F4;
  --pn-bg:        #F4F7FB;
  --pn-card:      #FFFFFF;
  --pn-ink:       #0F172A;
  --pn-muted:     #64748B;
  --pn-border:    #E2E8F0;
  --pn-border-2:  #CBD5E1;
  --pn-soft:      #DCE3EC;
  --pn-success:   #059669;
  --pn-danger:    #B91C1C;
  --pn-warn:      #B45309;
  --pn-warn-bg:   #FEF3C7;

  /* Elevation */
  --pn-shadow-0: 0 1px 2px rgba(15,30,61,.04);
  --pn-shadow-1: 0 1px 3px rgba(15,30,61,.05), 0 6px 20px -12px rgba(15,30,61,.10);
  --pn-shadow-2: 0 4px 16px rgba(15,30,61,.08), 0 18px 40px -20px rgba(15,30,61,.14);
  --pn-shadow-3: 0 8px 32px rgba(15,30,61,.12), 0 2px 8px rgba(15,30,61,.06);

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;  --sp-8: 40px;

  /* Typography */
  --font-ui:   'Fahkwang', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Radius */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --t-fast:   .12s;
  --t-mid:    .20s;
}

/* ── 2. RESET & BASE ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  background: var(--pn-bg);
  color: var(--pn-ink);
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  line-height: 1.5;
}

/* ── 3. TOP BAR ───────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--pn-border);
  box-shadow: 0 1px 0 rgba(15,30,61,.04), 0 2px 12px rgba(15,30,61,.05);
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.hdr-logo { height: 32px; width: auto; }

.hdr-title {
  flex: 1;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pn-teal);
}

.hdr-title small {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--pn-muted);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 2px;
}

.hdr-menu {
  background: transparent;
  border: 1px solid var(--pn-border);
  color: var(--pn-navy);
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.hdr-menu:hover { background: var(--pn-bg); border-color: var(--pn-blue); }

/* Header launcher pills (Tasks / Snippets) — match the admin dashboard pattern.
   These replace the old floating FAB launchers so nothing covers the tour. */
.pn-nav-launcher {
  background: transparent;
  border: 1px solid var(--pn-border);
  color: var(--pn-navy);
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font: 600 13px inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.pn-nav-launcher:hover { background: var(--pn-bg); border-color: var(--pn-blue); }

/* ── 4. MAIN LAYOUT ───────────────────────────────────────────────────────── */
main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-8);
}

/* ── 5. PAGE VISIBILITY ───────────────────────────────────────────────────── */
.page { display: none; }
.page.is-active { display: block; }

/* ── 6. PENDING CREDENTIAL BANNER ─────────────────────────────────────────── */
#pendingBanner {
  border-radius: var(--r-lg) !important;
  margin: 0 0 var(--sp-4) !important;
  border: 1.5px solid #F59E0B !important;
  background: #FFFBEB !important;
}

/* ── 7. WELCOME / HERO CARD ───────────────────────────────────────────────── */
.welcome-card, .hero-tile, .dash-hero {
  position: relative;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid var(--pn-border) !important;
  border-radius: var(--r-xl) !important;
  padding: var(--sp-6) var(--sp-6) !important;
  margin-bottom: var(--sp-4);
  box-shadow: var(--pn-shadow-1) !important;
}

/* Subtle decorative accent */
.welcome-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 100%;
  background: linear-gradient(135deg, transparent 40%, rgba(15,140,140,.04) 100%);
  pointer-events: none;
}

/* Live status dot */
.welcome-card::before {
  content: "";
  position: absolute;
  top: 24px; right: 24px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 0 4px rgba(52,211,153,.18);
}

.welcome-card h1, .dash-hero h1 {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  color: var(--pn-navy) !important;
  margin: 0 0 6px !important;
  max-width: 480px;
}

.welcome-card p, .dash-hero p {
  font-size: 14px !important;
  color: var(--pn-muted) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  max-width: 460px;
}

.eyebrow, .eyebrow-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--pn-teal-soft) !important;
  color: var(--pn-teal) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: var(--r-pill) !important;
  margin-bottom: 10px !important;
  font-family: var(--font-ui) !important;
}

/* ── 8. DUTY TOGGLE BAR ───────────────────────────────────────────────────── */
#dutyToggleBar {
  background: #fff !important;
  border: 1px solid var(--pn-border) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--sp-4) var(--sp-5) !important;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4) !important;
  box-shadow: var(--pn-shadow-0);
  transition: border-color var(--t-mid), box-shadow var(--t-mid);
}
#dutyToggleBar:focus-within { border-color: var(--pn-blue); box-shadow: var(--pn-shadow-1); }

#dutyLabel { font-weight: 700; font-size: 15px; color: var(--pn-navy); }
#dutySub   { font-size: 12px; color: var(--pn-muted); margin-top: 2px; }

/* ── 9. OFFLINE STATE ─────────────────────────────────────────────────────── */
#offlineState {
  background: #fff !important;
  border: 2px dashed var(--pn-border-2) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--sp-8) var(--sp-6) !important;
  text-align: center;
  margin: 0 0 var(--sp-4) !important;
}

/* ── 10. KPI GRID ─────────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.kpi {
  background: #fff !important;
  border: 1px solid var(--pn-border) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--sp-4) var(--sp-3) !important;
  text-align: center;
  box-shadow: var(--pn-shadow-0);
  transition: transform var(--t-fast), box-shadow var(--t-mid);
  position: relative;
  overflow: hidden;
}

.kpi::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pn-border);
  opacity: .5;
}

.kpi:hover { transform: translateY(-1px); box-shadow: var(--pn-shadow-1); }

.kpi b {
  display: block;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  color: var(--pn-navy) !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
  margin-bottom: 4px;
}

.kpi span {
  font-size: 10.5px !important;
  color: var(--pn-muted) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  line-height: 1.3;
}

.kpi.alert b     { color: var(--pn-warn) !important; }
.kpi.alert::after { background: linear-gradient(90deg, #F59E0B, #FCD34D); opacity: 1; }

/* ── 11. SECTION TITLES ───────────────────────────────────────────────────── */
.section-title {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  color: var(--pn-navy) !important;
  letter-spacing: -.015em !important;
  margin: var(--sp-5) 0 var(--sp-3) !important;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--pn-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title small {
  font-size: 12px !important;
  color: var(--pn-muted) !important;
  font-style: normal !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
}

/* ── 12. FILTER CHIPS ─────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: 0 2px var(--sp-3);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter-bar::-webkit-scrollbar { display: none; }

.chip {
  background: #fff !important;
  border: 1.5px solid var(--pn-border) !important;
  padding: 7px 16px !important;
  border-radius: var(--r-pill) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--pn-ink) !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  flex-shrink: 0;
}

.chip:hover:not(.is-active) {
  background: #F1F5F9 !important;
  border-color: var(--pn-border-2) !important;
}

.chip.is-active {
  background: var(--pn-navy) !important;
  color: #fff !important;
  border-color: var(--pn-navy) !important;
  box-shadow: 0 2px 8px rgba(0,27,114,.22) !important;
}

/* ── 13. PATIENT QUEUE CARDS ──────────────────────────────────────────────── */
.order-card {
  background: #fff !important;
  border: 1px solid var(--pn-border) !important;
  border-radius: var(--r-lg) !important;
  margin-bottom: var(--sp-3) !important;
  overflow: hidden;
  box-shadow: var(--pn-shadow-0);
  transition: box-shadow var(--t-mid), transform var(--t-fast), border-color var(--t-mid);
}

.order-card:hover {
  box-shadow: var(--pn-shadow-1) !important;
  transform: translateY(-1px);
}

.order-card.is-open {
  border-color: var(--pn-blue) !important;
  box-shadow: 0 0 0 2px rgba(42,125,226,.10), var(--pn-shadow-2) !important;
  transform: none;
}

/* Left accent stripe for open card */
.order-card.is-open::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--pn-blue);
  border-radius: 3px 0 0 3px;
}
.order-card { position: relative; }

.order-head {
  padding: 16px 18px !important;
  display: flex;
  align-items: center;
  gap: 14px !important;
  cursor: pointer;
}

.order-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #D8E8F8, #C3D8F5) !important;
  color: #1E40AF !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800 !important;
  font-size: 14px !important;
  flex: 0 0 auto;
  box-shadow: 0 1px 4px rgba(42,125,226,.15) !important;
}

.order-name {
  flex: 1;
  font-weight: 700;
  font-size: 15px !important;
  color: var(--pn-ink);
  letter-spacing: -.01em;
  min-width: 0;
}

/* Inline-styled status pills (Available / Mine / Out of state / REFILL) must
   never inherit the block metaline rule below — keep them hugging their text. */
.order-name span[style] {
  display: inline-block;
  width: auto;
}
.order-name span {
  display: block;
  font-weight: 400;
  font-size: 12px !important;
  color: var(--pn-muted) !important;
  margin-top: 3px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-body {
  display: none;
  padding: 0 18px 18px !important;
  border-top: 1px solid #F1F5F9 !important;
}

.order-card.is-open .order-body { display: block; }

/* ── 14. STATUS PILLS ─────────────────────────────────────────────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px !important;
  border-radius: var(--r-pill);
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  text-transform: none !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.status-pending   { background: #FEF9C3; color: #854D0E; border: 1px solid #FDE047; }
.status-approved,
.status-signed    { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }
.status-filled,
.status-dispensed { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
.status-rejected,
.status-denied    { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }

/* ── 15. DETAIL ROWS ──────────────────────────────────────────────────────── */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0 !important;
  border-bottom: 1px solid #F1F5F9;
  font-size: 13px !important;
  gap: var(--sp-3);
}

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

.detail-row span:first-child {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  color: #94A3B8 !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.detail-row span:last-child {
  color: var(--pn-ink) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  text-align: right;
  max-width: 62%;
  word-break: break-word;
}

/* ── 16. MEDICAL BLOCK ────────────────────────────────────────────────────── */
.medical-block {
  background: #FAFBFD !important;
  border: 1px solid var(--pn-border) !important;
  border-left: 3px solid var(--pn-soft) !important;
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
  padding: 14px 16px !important;
  margin-top: var(--sp-3);
  font-size: 13px !important;
  line-height: 1.6;
}

.medical-block h4 {
  font-size: 10px !important;
  color: #94A3B8 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important;
}

/* ── 17. ACTION ROW & BUTTONS ─────────────────────────────────────────────── */
.action-row {
  display: flex;
  gap: var(--sp-2) !important;
  margin-top: var(--sp-4) !important;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  font-family: var(--font-ui);
  border: none;
  cursor: pointer;
  flex: 1;
  min-height: 40px;
  letter-spacing: .01em;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

.btn-primary {
  background: var(--pn-blue) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(42,125,226,.22) !important;
  border: none !important;
}
.btn-primary:hover  { background: var(--pn-blue-2) !important; box-shadow: 0 4px 16px rgba(42,125,226,.32) !important; transform: translateY(-1px); }
.btn-primary:active { transform: scale(.98); }

.btn-secondary {
  background: #fff !important;
  color: var(--pn-navy) !important;
  border: 1.5px solid var(--pn-border-2) !important;
}
.btn-secondary:hover { border-color: var(--pn-blue) !important; color: var(--pn-blue) !important; background: var(--pn-blue-3) !important; }

.btn-danger {
  background: #FEF2F2 !important;
  color: var(--pn-danger) !important;
  border: 1.5px solid #FECACA !important;
}
.btn-danger:hover { background: #FEE2E2 !important; border-color: #FCA5A5 !important; }

.btn-info {
  background: var(--pn-blue-3) !important;
  color: #1E40AF !important;
  border: 1.5px solid #BFDBFE !important;
}
.btn-info:hover { background: #DBEAFE !important; border-color: #93C5FD !important; }

/* ── 18. NOTE / TEXTAREA ──────────────────────────────────────────────────── */
.note-input {
  width: 100%;
  padding: 11px 13px !important;
  border-radius: var(--r-md) !important;
  border: 1.5px solid var(--pn-border-2) !important;
  font-family: var(--font-ui);
  font-size: 14px !important;
  margin-top: var(--sp-3);
  resize: vertical;
  min-height: 64px;
  background: #FAFBFD !important;
  color: var(--pn-ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.note-input:focus {
  outline: none;
  border-color: var(--pn-blue) !important;
  box-shadow: 0 0 0 3px rgba(42,125,226,.10) !important;
  background: #fff !important;
}

/* ── 19. FORM INPUTS (GLOBAL) ─────────────────────────────────────────────── */
input, textarea, select {
  font-family: var(--font-ui) !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

input:focus, textarea:focus, select:focus,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none !important;
  border-color: var(--pn-blue) !important;
  box-shadow: 0 0 0 3px rgba(42,125,226,.10) !important;
}

/* ── 20. EMPTY STATES ─────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--sp-8) var(--sp-6) !important;
  background: linear-gradient(180deg, #FAFBFD, #F4F7FB) !important;
  border: 1.5px dashed var(--pn-border-2) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
}

.empty-state h3 {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  color: var(--pn-navy) !important;
  font-size: 21px !important;
  margin: 0 0 var(--sp-2) !important;
  letter-spacing: -.01em;
}

.empty-state p {
  color: var(--pn-muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  max-width: 360px;
  margin: 0 auto !important;
}

#inboxList .empty-state,
#queueList .empty-state {
  padding: var(--sp-7) var(--sp-6) !important;
}

/* ── 21. CALENDAR ─────────────────────────────────────────────────────────── */
.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--sp-4);
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.cal-nav { display: flex; gap: var(--sp-2); }

.cal-nav .btn {
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: #fff !important;
  border: 1px solid var(--pn-border) !important;
  color: var(--pn-navy) !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background var(--t-fast), border-color var(--t-fast);
  flex: initial;
  min-height: 34px;
}
.cal-nav .btn:hover { background: var(--pn-bg) !important; border-color: var(--pn-blue) !important; }

.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-2);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--pn-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0 4px var(--sp-2);
  border-bottom: 1px solid var(--pn-border);
}
.cal-dow > div { text-align: center; padding: 4px 0; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.cal-day {
  position: relative;
  background: #fff;
  border: 1px solid var(--pn-border);
  border-radius: var(--r-sm) !important;
  min-height: 90px;
  padding: 6px 7px;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.cal-day:hover        { border-color: var(--pn-blue); box-shadow: var(--pn-shadow-0); }
.cal-day.is-outside   { background: #F8FAFC; color: #94A3B8; border-style: dashed; }
.cal-day.is-today     { background: #EFF6FF; border-color: var(--pn-blue); box-shadow: inset 0 0 0 1.5px rgba(42,125,226,.25); }
.cal-day.is-selected  { outline: 2px solid var(--pn-blue); outline-offset: -2px; }
.cal-day .cal-daynum  { font-weight: 700; font-size: 13px; color: var(--pn-navy); line-height: 1; }
.cal-day.is-outside .cal-daynum { color: #CBD5E1; }

.cal-day .cal-vchip {
  display: block;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.3;
  background: #EFF6FF;
  color: #1E40AF;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.cal-day .cal-vchip.is-past { background: #F1F5F9; color: #64748B; }
.cal-day .cal-vchip.is-join { background: #ECFDF5; color: #065F46; }

.cal-day .cal-vmore {
  align-self: flex-start;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: #E2E8F0;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  margin-top: auto;
}

.cal-detail {
  margin-top: var(--sp-5);
}

.cal-detail h4 {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--pn-navy);
  margin: 0 0 var(--sp-3);
  font-size: 18px;
}

/* ── 22. STATS CARDS ──────────────────────────────────────────────────────── */
#page-stats [style*="grid-template-columns:repeat(2"] {
  gap: var(--sp-3) !important;
  margin-bottom: var(--sp-4) !important;
}

/* ── 23. PROFILE ──────────────────────────────────────────────────────────── */
.profile-card {
  background: #fff !important;
  border: 1px solid var(--pn-border) !important;
  border-radius: var(--r-xl) !important;
  padding: var(--sp-7) var(--sp-6) !important;
  text-align: center;
  margin-bottom: var(--sp-4);
  box-shadow: var(--pn-shadow-1) !important;
}

.profile-card h2 {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 22px !important;
  color: var(--pn-navy) !important;
  font-weight: 600 !important;
  margin: var(--sp-2) 0 4px !important;
  letter-spacing: -.01em;
}

.profile-card .role { color: var(--pn-muted); font-size: 14px; }

.profile-section {
  background: #fff !important;
  border: 1px solid var(--pn-border) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px 20px !important;
  margin-bottom: var(--sp-3) !important;
  box-shadow: var(--pn-shadow-0);
}

.profile-section h3 {
  font-size: 10px !important;
  color: #94A3B8 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  margin: 0 0 var(--sp-3) !important;
  font-weight: 700 !important;
}

/* ── 24. LOGOUT BUTTON ────────────────────────────────────────────────────── */
#logoutBtn {
  border-radius: var(--r-md) !important;
  color: var(--pn-danger) !important;
  border-color: #FECACA !important;
  font-weight: 700 !important;
}
#logoutBtn:hover { background: #FEF2F2 !important; border-color: #FCA5A5 !important; }

/* ── 25. BOTTOM TAB BAR ───────────────────────────────────────────────────── */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(226,232,240,.8) !important;
  padding: var(--sp-1) 0 calc(var(--sp-1) + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  box-shadow: 0 -2px 20px rgba(15,30,61,.06) !important;
}

.tab-btn {
  flex: 1;
  background: none;
  border: none;
  font-family: var(--font-ui);
  padding: var(--sp-2) 4px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--pn-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  transition: color var(--t-fast);
}

.tab-btn b {
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
}

.tab-btn.is-active { color: var(--pn-blue) !important; }

/* Active indicator dot */
.tab-btn.is-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2.5px;
  background: var(--pn-blue);
  border-radius: 0 0 3px 3px;
}

/* ── 26. TOAST ────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  background: var(--pn-ink);
  color: #fff;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--pn-shadow-3);
  z-index: 99999;
  opacity: 0;
  transition: opacity .25s var(--ease-out), transform .3s var(--ease-out);
  pointer-events: none;
  white-space: nowrap;
}
.toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(-6px); }

/* ── 27. SIGN Rx MODAL ────────────────────────────────────────────────────── */
/* The modal uses inline styles; we polish the inner classes */
.sm-chip {
  display: inline-block;
  border: 1.5px solid var(--pn-border-2);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  font-size: 13px;
  cursor: pointer;
  background: #fff;
  color: var(--pn-ink);
  font-family: var(--font-ui);
  line-height: 1.3;
  transition: all var(--t-fast);
}
.sm-chip:hover { background: #F8FAFC; border-color: #94A3B8; }
.sm-chip.is-on {
  background: var(--pn-blue-3);
  border-color: var(--pn-blue);
  color: #1E40AF;
  font-weight: 600;
}

.sm-row {
  padding: 10px 13px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--pn-border);
  background: #fff;
  transition: background var(--t-fast);
}
.sm-row:last-child { border-bottom: none; }
.sm-row:hover      { background: #F8FAFC; }
.sm-row.is-on      { background: var(--pn-blue-3); color: #1E40AF; }

.sm-tog {
  display: inline-block;
  font-size: 12px;
  padding: 5px 11px;
  border: 1.5px solid var(--pn-border-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  background: #fff;
  color: var(--pn-ink);
  font-family: var(--font-ui);
  line-height: 1.3;
  transition: all var(--t-fast);
}
.sm-tog:hover  { background: #F8FAFC; }
.sm-tog.is-on  { background: var(--pn-blue-3); color: #1E40AF; border-color: var(--pn-blue); font-weight: 600; }

.sm-lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--pn-muted);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}

.sm-fl {
  font-size: 10.5px;
  color: var(--pn-muted);
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  letter-spacing: .03em;
}

/* ── 28. CHART MODAL ──────────────────────────────────────────────────────── */
/* Desktop: the chart card uses the screen so the Overview is wide & spacious.
   Inline style on #chartModalCard is width:100% only; this rule sets the desktop
   max-width (must beat the inline style, hence !important). The mobile media
   query (max-width:768px) forces full-width below. */
@media (min-width: 769px) {
  #chartModalCard {
    width: min(1180px, 94vw) !important;
    max-width: min(1180px, 94vw) !important;
    border-radius: 16px !important;
    min-height: auto !important;
    margin: 28px auto !important;
    overflow: hidden;
  }
}
#chartModal .ch-tab {
  transition: color var(--t-fast), border-bottom-color var(--t-fast);
  font-size: 13px !important;
  padding: 13px 15px !important;
  letter-spacing: .01em !important;
  font-weight: 600 !important;
}
#chartModal .ch-tab:hover:not(.is-active) {
  color: var(--pn-navy) !important;
  background: rgba(0,27,114,.03);
}

/* ── 29. SKELETON LOADERS ─────────────────────────────────────────────────── */
@keyframes pn-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.pn-skel,
.kpi b:empty,
.kpi b[data-empty="true"] {
  background: linear-gradient(90deg, #EEF2F7 0%, #F8FAFC 40%, #EEF2F7 80%) !important;
  background-size: 200% 100% !important;
  animation: pn-shimmer 1.4s ease-in-out infinite !important;
  color: transparent !important;
  border-radius: var(--r-sm);
}

.kpi b:empty,
.kpi b[data-empty="true"] {
  display: inline-block;
  min-width: 48px;
  height: 28px;
}

.pn-skel {
  display: inline-block;
  min-width: 60px;
  min-height: 18px;
}
.pn-skel.is-block { display: block; width: 100%; min-height: 14px; margin: var(--sp-2) 0; }
.pn-skel.is-tall  { min-height: 28px; }

/* Queue placeholder rows while loading */
.queue-loading-row {
  background: #fff;
  border: 1px solid var(--pn-border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.queue-loading-row .skel-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(90deg, #EEF2F7 0%, #F8FAFC 40%, #EEF2F7 80%);
  background-size: 200% 100%;
  animation: pn-shimmer 1.4s ease-in-out infinite;
  flex: 0 0 auto;
}
.queue-loading-row .skel-line {
  height: 13px;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, #EEF2F7 0%, #F8FAFC 40%, #EEF2F7 80%);
  background-size: 200% 100%;
  animation: pn-shimmer 1.4s ease-in-out infinite;
  margin-bottom: var(--sp-2);
}
.queue-loading-row .skel-line:last-child { margin-bottom: 0; width: 60%; }

/* ── 30. CUSTOM SCROLLBAR (DESKTOP) ──────────────────────────────────────── */
@media (min-width: 1024px) {
  *::-webkit-scrollbar              { width: 8px; height: 8px; }
  *::-webkit-scrollbar-track        { background: transparent; }
  *::-webkit-scrollbar-thumb        { background: #CBD5E1; border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box; }
  *::-webkit-scrollbar-thumb:hover  { background: #94A3B8; background-clip: padding-box; }
}

/* ── 31. DESKTOP LAYOUT ───────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Full-width content with sidebar margin handled by pn-sidebar.js.
     Wider on desktop so we actually use the screen instead of a narrow column. */
  main { max-width: 1280px !important; padding: var(--sp-6) var(--sp-7) var(--sp-8); }

  /* On very wide screens, use even more of the space. */
  @media (min-width: 1600px) { main { max-width: 1500px !important; } }

  /* KPI grid becomes 4 columns */
  .kpi-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* Filter chips don't wrap on large screens */
  .filter-bar { flex-wrap: nowrap !important; }

  /* Calendar cells get more room */
  .cal-day { min-height: 100px; }

  /* Hide bottom tabbar — sidebar is the nav on desktop */
  .tabbar { display: none !important; }
  body { padding-bottom: 30px !important; }

  /* Topbar gets slightly more padding */
  .topbar { padding: 0 var(--sp-7); }
}

/* ── 32. RESPONSIVE: SMALL PHONES ────────────────────────────────────────── */
@media (max-width: 420px) {
  main { padding: var(--sp-3) var(--sp-3) var(--sp-7) !important; }

  .topbar { padding: 0 var(--sp-4); height: 54px; }

  .welcome-card, .hero-tile, .dash-hero {
    padding: var(--sp-4) var(--sp-4) !important;
    border-radius: var(--r-lg) !important;
  }
  .welcome-card h1, .dash-hero h1 { font-size: 22px !important; }

  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--sp-2) !important; }
  .kpi b { font-size: 24px !important; }

  .order-head { padding: 13px 14px !important; gap: var(--sp-3) !important; }
  .order-body { padding: 0 14px 14px !important; }

  .btn { padding: 9px 12px !important; font-size: 12.5px !important; }
  .section-title { font-size: 18px !important; }

  .cal-day { min-height: 58px; padding: 4px 4px; }
  .cal-day .cal-daynum { font-size: 11px; }
  .cal-day .cal-vchip { font-size: 9px; padding: 1px 3px; }
  .cal-nav .btn { padding: 6px 10px !important; font-size: 12px !important; }
}

/* ── 33. RESPONSIVE: MEDIUM TABLETS ──────────────────────────────────────── */
@media (min-width: 520px) and (max-width: 1023px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  main { padding: var(--sp-4) var(--sp-5) var(--sp-8); }
}

/* ── 34. FOCUS / ACCESSIBILITY ────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--pn-blue);
  outline-offset: 2px;
}

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--pn-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 35. CALENDAR EMPTY PLACEHOLDER ─────────────────────────────────────── */
.calendar-empty {
  background: #fff;
  border: 2px dashed var(--pn-border-2);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  text-align: center;
  color: var(--pn-muted);
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE OPTIMISATION — appended 2026-06-01
   Pure CSS additions; no HTML/JS changes.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── M1. SHARED MOBILE BASE (≤768px) ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Layout ── */
  main {
    padding: var(--sp-3) var(--sp-3) var(--sp-8) !important;
    max-width: 100% !important;
  }

  /* ── Topbar ── */
  .topbar {
    padding: 0 var(--sp-3) !important;
    height: 56px !important;
    gap: 10px !important;
  }
  .hdr-title { font-size: 10px !important; }
  .hdr-title small { font-size: 11px !important; }

  /* ── KPI grid: 2 columns on tablet ── */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-2) !important;
  }

  /* ── Patient queue cards ── */
  .order-card { margin-bottom: var(--sp-2) !important; }
  .order-head {
    padding: 14px 14px !important;
    gap: 12px !important;
  }
  .order-body { padding: 0 14px 14px !important; }

  /* ── Action buttons: full-width row, min tap target ── */
  .action-row { gap: var(--sp-2) !important; }
  .btn {
    min-height: 44px !important;
    padding: 10px 14px !important;
  }

  /* ── Filter chips: horizontal scroll strip, no page bleed ── */
  .filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: var(--sp-2) !important;
    /* prevent the strip from forcing page width */
    max-width: 100% !important;
    /* pull side margins flush so chips reach edge */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .chip {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    min-height: 36px !important;
  }

  /* ── Calendar: header stacks, grid stays 7-col but with reduced padding ── */
  .cal-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--sp-2) !important;
  }
  .cal-nav { flex-wrap: wrap !important; gap: var(--sp-2) !important; }
  .cal-nav .btn {
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-height: 36px !important;
    flex: initial !important;
  }
  .cal-dow { gap: 3px !important; padding: 0 2px var(--sp-2) !important; font-size: 9.5px !important; }
  .cal-grid { gap: 3px !important; }
  .cal-day  {
    min-height: 68px !important;
    padding: 5px 4px !important;
    font-size: 11px !important;
  }
  .cal-day .cal-daynum { font-size: 12px !important; }
  .cal-day .cal-vchip  { font-size: 9px !important; padding: 1px 4px !important; }

  /* ── Profile & availability sections: full-width cards ── */
  .profile-section {
    padding: 16px 14px !important;
    border-radius: var(--r-md) !important;
  }
  .profile-card { padding: 18px 14px !important; }

  /* ── Detail rows: allow wrapping on narrow screens ── */
  .detail-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .detail-row span:last-child {
    word-break: break-word !important;
    text-align: left !important;
  }

  /* ── Welcome/hero card ── */
  .welcome-card, .hero-tile, .dash-hero {
    padding: var(--sp-4) !important;
    border-radius: var(--r-lg) !important;
  }
  .welcome-card h1, .dash-hero h1 { font-size: 22px !important; }
  .welcome-card p,  .dash-hero p  { font-size: 13px !important; }

  /* ── Duty toggle bar ── */
  #dutyToggleBar {
    flex-wrap: wrap !important;
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  /* ── Bottom tab bar: ensure min tap targets ── */
  .tab-btn {
    padding: var(--sp-2) 2px !important;
    min-height: 48px !important;
    font-size: 9.5px !important;
  }
  .tab-btn b { font-size: 20px !important; }

  /* ── Toast: stays above tab bar, never wider than screen ── */
  .toast {
    bottom: 80px !important;
    max-width: calc(100vw - 32px) !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* ── Chart modal: full-screen on phone ── */
  #chartModal > div {
    max-width: 100% !important;
    border-radius: 0 !important;
    min-height: 100dvh !important;
  }
  /* Modal tabs: allow horizontal scroll so all 5 tabs are reachable */
  #chartModal [style*="display:flex"][style*="border-bottom"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }
  .ch-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 44px !important;
  }

  /* ── Tables inside any card: contained horizontal scroll ── */
  table {
    width: 100% !important;
    min-width: 0 !important;
  }
  .table-scroll-wrap,
  .order-body table,
  .profile-section table,
  #chartModal table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* ── Inline grids inside page-stats (styled inline): shrink text ── */
  #page-stats [style*="grid-template-columns:repeat(2"] {
    gap: 8px !important;
  }

  /* ── Sign-Rx bottom-sheet modal inner grid ── */
  /* The 3-col drug-detail grid collapses to 2 */
  .sm-chip { padding: 7px 10px !important; font-size: 12.5px !important; }
}

/* ── M2. SMALL PHONES (≤480px) ───────────────────────────────────────────── */
@media (max-width: 480px) {

  /* ── Layout ── */
  main {
    padding: var(--sp-3) var(--sp-2) var(--sp-8) !important;
  }

  /* ── KPI: single-column stacks look bad; keep 2-col but shrink ── */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-2) !important;
  }
  .kpi { padding: 12px 8px !important; }
  .kpi b { font-size: 22px !important; }
  .kpi span { font-size: 9.5px !important; }

  /* ── Topbar ── */
  .topbar { height: 52px !important; padding: 0 var(--sp-3) !important; }
  .hdr-logo { height: 26px !important; }

  /* ── Buttons full-width on phone ── */
  .action-row {
    flex-direction: column !important;
  }
  .action-row .btn {
    width: 100% !important;
    flex: none !important;
    min-height: 44px !important;
  }

  /* ── Order card heads more compact ── */
  .order-head { padding: 12px 12px !important; gap: 10px !important; }
  .order-body { padding: 0 12px 12px !important; }
  .order-avatar { width: 38px !important; height: 38px !important; font-size: 12px !important; }
  .order-name   { font-size: 14px !important; }

  /* ── Calendar: really tight cells on narrow phone ── */
  .cal-day {
    min-height: 52px !important;
    padding: 4px 3px !important;
  }
  .cal-day .cal-daynum  { font-size: 10.5px !important; }
  .cal-day .cal-vchip   { display: none !important; } /* hide event chips — show +N count only */
  .cal-day .cal-vmore   { font-size: 9px !important; }
  .cal-dow { font-size: 8.5px !important; gap: 2px !important; }

  /* ── Section titles ── */
  .section-title { font-size: 17px !important; }

  /* ── Profile card ── */
  .profile-card { padding: 14px 12px !important; }
  .profile-section { padding: 14px 12px !important; margin-bottom: var(--sp-2) !important; }

  /* ── Welcome card ── */
  .welcome-card h1, .dash-hero h1 { font-size: 19px !important; }

  /* ── Bottom tab bar ── */
  .tab-btn { font-size: 8.5px !important; }

  /* ── Page-stats inline grids: force 2-col ── */
  #page-stats [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Availability week-grid rows: stack time pickers ── */
  #pf-week-grid [data-day] {
    grid-template-columns: 28px 1fr !important;
    grid-template-rows: auto auto !important;
  }

  /* ── Sign-Rx 3-col inline grid: force 2-col ── */
  /* (targets the inline grid-template-columns:1fr 1fr 1fr inside the modal) */
  #signRxModal [style*="grid-template-columns:1fr 1fr 1fr"],
  [id*="Modal"] [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── END MOBILE OPTIMISATION ─────────────────────────────────────────────── */


/* Live queue pulse — live-work alert with depth + motion */
.pn-pulse{position:relative;display:inline-flex;max-width:100%;align-items:center;gap:12px;border-radius:12px;padding:11px 15px;margin:0 0 16px;font-size:14px;font-weight:600;overflow:hidden;isolation:isolate;
  transform:translateZ(0);animation:pnPulseIn .5s cubic-bezier(.2,.8,.2,1) both}
/* sheen sweep over the surface */
.pn-pulse::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  transform:translateX(-120%);animation:pnSheen 4.2s ease-in-out 1.1s infinite}
.pn-pulse>*{position:relative;z-index:1}
.pn-pulse-on{background:linear-gradient(135deg,#F0FFF8 0%,#DEFBEC 100%);border:1px solid #9DEBC4;
  color:#065F46;cursor:pointer;box-shadow:0 1px 2px rgba(6,95,70,.06),0 10px 24px -12px rgba(16,185,129,.45),inset 0 1px 0 rgba(255,255,255,.7)}
.pn-pulse-on:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(6,95,70,.08),0 18px 34px -14px rgba(16,185,129,.55),inset 0 1px 0 rgba(255,255,255,.8)}
.pn-pulse-on:active{transform:translateY(0)}
.pn-pulse-off{background:linear-gradient(135deg,#FFFBEB 0%,#FEF0C7 100%);border:1px solid #FBD24E;
  color:#92400E;box-shadow:0 1px 2px rgba(146,64,14,.06),0 10px 24px -14px rgba(245,158,11,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.pn-pulse b{font-weight:800}
.pn-pulse-txt{line-height:1.3}
.pn-pulse-count{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 8px;
  border-radius:8px;background:#059669;color:#fff;font-weight:800;font-size:14px;box-shadow:0 3px 8px -2px rgba(5,150,105,.6)}
/* transition-in + gentle nudge to draw the eye */
.pn-pulse .pn-pulse-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:13px;color:#047857;
  padding:6px 12px;border-radius:9px;background:rgba(255,255,255,.7);box-shadow:0 1px 3px rgba(6,95,70,.14);transition:gap .2s,background .2s}
.pn-pulse-on:hover .pn-pulse-cta{gap:9px;background:#fff}
.pn-pulse-cta .arw{font-size:15px}
/* radar orb — a breathing core with an expanding ping ring */
.pn-pulse-dot{position:relative;width:11px;height:11px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 35% 30%,#4ADE80,#10B981 70%);box-shadow:0 0 0 3px rgba(16,185,129,.18),0 1px 3px rgba(6,95,70,.4);
  animation:pnBreathe 2.4s ease-in-out infinite}
.pn-pulse-dot::before,.pn-pulse-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(16,185,129,.55)}
.pn-pulse-dot::before{animation:pnRadar 2.4s ease-out infinite}
.pn-pulse-dot::after{animation:pnRadar 2.4s ease-out 1.2s infinite}
.pn-pulse-btn{background:linear-gradient(135deg,#0A2A8C,#001B72);color:#fff;border:none;border-radius:9px;padding:8px 15px;font-family:inherit;font-weight:800;font-size:12.5px;cursor:pointer;flex-shrink:0;
  box-shadow:0 4px 12px -3px rgba(0,27,114,.55);transition:transform .18s,box-shadow .18s}
.pn-pulse-btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px -4px rgba(0,27,114,.6)}
.pn-pulse-btn:active{transform:translateY(0)}
@keyframes pnPulseIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pnSheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
@keyframes pnBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes pnRadar{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .pn-pulse,.pn-pulse::after,.pn-pulse-dot,.pn-pulse-dot::before,.pn-pulse-dot::after{animation:none}
  .pn-pulse-on:hover{transform:none}
}