/**
 * Avyukt Dental CRM — v3.1 Design Override
 * Wins over all previous CSS declarations
 * Clean patient cards · iOS glass modals · Label pills
 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════
   1. iOS-STYLE GLASS MODAL / OVERLAY
══════════════════════════════════════════════════════════════ */
.adcrm-overlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(10, 2, 8, 0.45) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 10% !important; /* 80% width modal */
}
.adcrm-overlay.open {
  display: flex !important;
}

.drawer {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 22px !important;
  width: 100% !important;
  max-width: 480px !important;
  padding: 22px 18px 26px !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,.22),
    0 8px 24px rgba(233,30,140,.12),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  animation: iosSlideIn .32s cubic-bezier(.34,1.3,.64,1) !important;
  margin: 0 auto !important;
}
.drawer::-webkit-scrollbar { display: none !important; }

@keyframes iosSlideIn {
  from { opacity: 0; transform: scale(.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Drag handle */
.drw-handle {
  width: 40px !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--pink), var(--pink-d)) !important;
  border-radius: 20px !important;
  margin: 0 auto 18px !important;
  opacity: .35 !important;
}

/* Modal title */
.drw-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  margin-bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-bottom: 1.5px solid rgba(233,30,140,.12) !important;
  padding-bottom: 14px !important;
}

/* Form labels */
.fl {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .7px !important;
  color: var(--pink-d) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Form inputs */
.fi, .fs {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1.5px solid rgba(233,30,140,.18) !important;
  border-radius: 12px !important;
  padding: 11px 13px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  color: var(--text) !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  -webkit-appearance: none !important;
}
.fi:focus, .fs:focus {
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 3px rgba(233,30,140,.10) !important;
  background: #fff !important;
}
.fi::placeholder { color: var(--text3) !important; }
textarea.fi { resize: vertical; min-height: 80px !important; }

/* Save button */
.save-btn {
  width: 100% !important;
  background: linear-gradient(135deg, var(--pink), var(--pink-d)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 6px !important;
  box-shadow: 0 4px 16px rgba(233,30,140,.35) !important;
  transition: filter .15s, transform .12s !important;
  letter-spacing: .2px !important;
}
.save-btn:hover  { filter: brightness(1.07) !important; }
.save-btn:active { transform: scale(.97) !important; }
.save-btn:disabled { opacity: .65 !important; }

/* Cancel button */
.cancel-btn, .adcrm-modal-cancel {
  width: 100% !important;
  background: rgba(0,0,0,.04) !important;
  border: 1.5px solid rgba(0,0,0,.08) !important;
  color: var(--text2) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  transition: background .15s !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
}
.cancel-btn:hover, .adcrm-modal-cancel:hover { background: rgba(0,0,0,.08) !important; }

/* Two-column row inside form */
.fg-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.fg { margin-bottom: 14px !important; position: relative !important; }

/* ══════════════════════════════════════════════════════════════
   2. PATIENT CARDS — COMPLETE REDESIGN
══════════════════════════════════════════════════════════════ */
.pat-card {
  position: relative !important;
  background: #fff !important;
  border-radius: 18px !important;
  padding: 14px 14px 13px 18px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 2px 16px rgba(233,30,140,.08), 0 1px 4px rgba(0,0,0,.04) !important;
  border: 1.5px solid rgba(233,30,140,.09) !important;
  border-left: 4px solid var(--pink) !important;
  transition: box-shadow .18s, transform .12s !important;
  overflow: visible !important;
}
.pat-card:active { transform: scale(.99) !important; }
.pat-card::before { display: none !important; } /* remove old pseudo stripe */

/* Top-right delete × */
.pat-del-btn {
  position: absolute !important;
  top: 10px !important; right: 10px !important;
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(229,57,53,.1) !important;
  color: var(--red) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  transition: background .15s, transform .12s !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
.pat-del-btn:hover { background: var(--red) !important; color: #fff !important; transform: scale(1.12) !important; }

/* Patient avatar */
.pat-av {
  width: 46px !important; height: 46px !important;
  border-radius: 14px !important;
  flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important; font-weight: 900 !important;
  margin-right: 11px !important;
}

/* Top row */
.pat-top {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 9px !important;
  padding-right: 28px !important; /* room for delete btn */
}
.pat-name {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important; font-weight: 800 !important;
  color: var(--text) !important;
  margin-bottom: 3px !important;
  line-height: 1.2 !important;
}
.pat-sub {
  font-size: 12px !important;
  color: var(--text2) !important;
  font-weight: 500 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 3px !important;
  line-height: 1.4 !important;
}
.pat-sep { color: var(--text3) !important; }

/* ── Label pills ─────────────────────────────────────────── */
.pat-labels {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-bottom: 11px !important;
  margin-top: 1px !important;
}
.plbl {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}
.plbl-blue   { background: rgba(21,101,192,.12) !important;  color: #1565C0 !important; }
.plbl-green  { background: rgba(0,168,107,.12) !important;   color: #007A4D !important; }
.plbl-red    { background: rgba(229,57,53,.12) !important;   color: #C62828 !important; }
.plbl-gold   { background: rgba(201,168,76,.18) !important;  color: #7A5C00 !important; }
.plbl-orange { background: rgba(230,81,0,.12) !important;    color: #BF360C !important; }

/* ── Patient action buttons (PAB) ────────────────────────── */
.pat-actions {
  display: flex !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
}
.pab {
  border: none !important;
  border-radius: 10px !important;
  padding: 7px 13px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: filter .13s, transform .1s !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.pab:active { transform: scale(.95) !important; }
.pab-wa   { background: #E8F5E9 !important; color: #1B5E20 !important; }
.pab-call { background: #E3F2FD !important; color: #0D47A1 !important; }
.pab-pay  { background: linear-gradient(135deg, var(--pink), var(--pink-d)) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(233,30,140,.3) !important; }
.pab-done { background: linear-gradient(135deg, var(--green), #00875A) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(0,168,107,.25) !important; }
.pab-fu   { background: linear-gradient(135deg, var(--orange), #E65100) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(255,109,0,.25) !important; }
.pab-edit { background: rgba(0,0,0,.05) !important; color: var(--text2) !important; border: 1.5px solid rgba(0,0,0,.08) !important; }
.pab-del  { background: rgba(229,57,53,.10) !important; color: var(--red) !important; border: 1.5px solid rgba(229,57,53,.2) !important; }
.pab-wa:hover, .pab-call:hover, .pab-edit:hover { filter: brightness(.93) !important; }
.pab-pay:hover, .pab-done:hover, .pab-fu:hover { filter: brightness(1.08) !important; }
.pab-del:hover { background: rgba(229,57,53,.18) !important; }

/* ══════════════════════════════════════════════════════════════
   3. PAYMENT CARDS — REDESIGN
══════════════════════════════════════════════════════════════ */
.pay-card {
  background: #fff !important;
  border-radius: 18px !important;
  padding: 15px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04) !important;
  border: 1.5px solid rgba(0,0,0,.05) !important;
  transition: box-shadow .18s !important;
  overflow: hidden !important;
}
.pay-card[data-status=paid]    { border-left: 4px solid var(--green) !important; }
.pay-card[data-status=partial] { border-left: 4px solid var(--orange) !important; }
.pay-card[data-status=due]     { border-left: 4px solid var(--red) !important; }

.pay-card-hd {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 13px !important;
}
.pay-av {
  width: 42px !important; height: 42px !important;
  border-radius: 12px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important; font-weight: 900 !important;
  flex-shrink: 0 !important;
}
.pay-pname {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important; font-weight: 800 !important;
  color: var(--text) !important;
  margin-bottom: 3px !important;
}
.pay-trt { font-size: 11px !important; color: var(--text3) !important; font-weight: 500 !important; }

.pay-badge {
  border-radius: 20px !important;
  padding: 4px 11px !important;
  font-size: 11px !important; font-weight: 800 !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}
.pb-paid    { background: rgba(0,168,107,.12) !important; color: #007A4D !important; }
.pb-partial { background: rgba(230,81,0,.12) !important;  color: var(--orange) !important; }
.pb-due     { background: rgba(229,57,53,.12) !important; color: #C62828 !important; }

/* 3-col amounts */
.pay-3col {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 7px !important;
  margin-bottom: 11px !important;
}
.pa {
  background: var(--bg2) !important;
  border-radius: 11px !important;
  padding: 9px 6px !important;
  text-align: center !important;
}
.pa-n {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important; font-weight: 900 !important;
  line-height: 1.1 !important;
}
.pa-tot  { color: var(--text) !important; }
.pa-paid { color: var(--green) !important; }
.pa-due  { color: var(--red) !important; }
.pa-l { font-size: 10px !important; font-weight: 700 !important; color: var(--text3) !important; text-transform: uppercase !important; margin-top: 3px !important; letter-spacing: .3px !important; }

/* Progress bar */
.prog-wrap {
  background: var(--bg) !important;
  border-radius: 20px !important;
  height: 7px !important;
  overflow: hidden !important;
  margin-bottom: 5px !important;
}
.prog {
  height: 100% !important;
  border-radius: 20px !important;
  background: linear-gradient(90deg, var(--pink), var(--pink-d)) !important;
  transition: width .5s ease !important;
}
.prog.prog-full { background: linear-gradient(90deg, var(--green), #00C853) !important; }

.pay-pct-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}
.prog-pct  { font-size: 11px !important; font-weight: 700 !important; color: var(--text2) !important; }
.prog-inst { font-size: 11px !important; color: var(--text3) !important; }

/* History details */
.pay-hist {
  border-top: 1.5px solid var(--bg2) !important;
  padding-top: 8px !important;
  margin-bottom: 2px !important;
}
.pay-hist > summary {
  font-size: 12px !important; font-weight: 800 !important; color: var(--pink) !important;
  cursor: pointer !important; list-style: none !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
  padding: 4px 0 !important; user-select: none !important;
  -webkit-user-select: none !important;
}
.pay-hist > summary::-webkit-details-marker { display: none !important; }
.pay-hist > summary::after { content: ' ▾' !important; font-size: 10px !important; }
.pay-hist[open] > summary::after { content: ' ▴' !important; }

.inst-list  { padding-top: 8px !important; }
.inst-row {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--bg2) !important;
}
.inst-row:last-child { border-bottom: none !important; }
.inst-num  { font-size: 12px !important; font-weight: 700 !important; color: var(--text) !important; }
.inst-d    { font-size: 11px !important; color: var(--text3) !important; margin-top: 1px !important; }
.inst-right { display: flex !important; align-items: center !important; gap: 6px !important; }
.inst-mode {
  background: var(--bg2) !important; color: var(--text2) !important;
  border-radius: 5px !important; padding: 2px 7px !important;
  font-size: 10px !important; font-weight: 800 !important;
  text-transform: uppercase !important;
}
.inst-amt  { font-weight: 900 !important; color: var(--green) !important; font-size: 13px !important; }
.inst-due-row {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  background: rgba(229,57,53,.08) !important; border-radius: 9px !important;
  padding: 8px 11px !important; margin-top: 5px !important;
  font-weight: 800 !important; color: var(--red) !important; font-size: 12px !important;
}

/* Pay action row */
.pay-actions {
  display: flex !important; gap: 7px !important; flex-wrap: wrap !important;
  margin-top: 11px !important;
}

/* ══════════════════════════════════════════════════════════════
   4. PAYMENT MODAL PAYMENT MODE BUTTONS
══════════════════════════════════════════════════════════════ */
.pm-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
.pm-btn, .adcrm-pm-btn {
  border: 1.5px solid rgba(233,30,140,.18) !important;
  border-radius: 10px !important;
  padding: 9px 6px !important;
  text-align: center !important;
  cursor: pointer !important;
  background: rgba(255,255,255,.7) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: all .15s !important;
  color: var(--text2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}
.pm-btn.sel, .adcrm-pm-btn.sel {
  border-color: var(--pink) !important;
  background: var(--pink-l) !important;
  color: var(--pink-d) !important;
  box-shadow: 0 2px 10px rgba(233,30,140,.2) !important;
}
/* Hide old large icon div */
.pm-ico { display: none !important; }

/* Pay strip in modal */
.pay-strip {
  background: linear-gradient(135deg, #1A0A12, #2D0A20) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin-bottom: 14px !important;
  color: #fff !important;
}
.ps-row { display: flex !important; gap: 8px !important; }
.ps-col {
  flex: 1 !important; background: rgba(255,255,255,.12) !important;
  border-radius: 10px !important; padding: 10px !important; text-align: center !important;
}
.ps-col-n {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18px !important; font-weight: 900 !important;
}
.ps-col-l {
  font-size: 9px !important; opacity: .6 !important;
  font-weight: 700 !important; text-transform: uppercase !important;
  margin-top: 2px !important; letter-spacing: .3px !important;
}

/* ══════════════════════════════════════════════════════════════
   5. SECTION HEADER
══════════════════════════════════════════════════════════════ */
.sec-hd {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 13px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18px !important; font-weight: 900 !important;
  color: var(--text) !important;
}
.sec-hd-l {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ══════════════════════════════════════════════════════════════
   6. FILTER PILLS
══════════════════════════════════════════════════════════════ */
.pills {
  display: flex !important;
  gap: 7px !important;
  overflow-x: auto !important;
  margin-bottom: 12px !important;
  padding-bottom: 2px !important;
  scrollbar-width: none !important;
}
.pills::-webkit-scrollbar { display: none !important; }
.pill {
  border: 1.5px solid rgba(233,30,140,.2) !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  background: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important; font-weight: 700 !important;
  color: var(--text2) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all .15s !important;
}
.pill.active, .pill:hover {
  background: var(--pink) !important;
  border-color: var(--pink) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   7. SEARCH BAR
══════════════════════════════════════════════════════════════ */
.search-bar {
  display: flex !important;
  align-items: center !important;
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 0 13px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.04) !important;
}
.search-ico { font-size: 16px !important; margin-right: 8px !important; flex-shrink: 0 !important; }
.search-bar input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  padding: 11px 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  color: var(--text) !important;
  outline: none !important;
}
.search-bar input::placeholder { color: var(--text3) !important; }

/* ══════════════════════════════════════════════════════════════
   8. BADGE
══════════════════════════════════════════════════════════════ */
.badge {
  background: var(--pink) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
  font-size: 12px !important; font-weight: 800 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* ══════════════════════════════════════════════════════════════
   9. ANIMATIONS
══════════════════════════════════════════════════════════════ */
@keyframes slideInNew {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pat-card  { animation: slideInNew .28s ease both !important; }
.pay-card  { animation: slideInNew .28s ease both !important; }
.adcrm-toast {
  position: fixed !important;
  bottom: 80px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(20px) !important;
  background: rgba(26,10,18,.92) !important;
  backdrop-filter: blur(10px) !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 20px !important;
  font-size: 13px !important; font-weight: 700 !important;
  opacity: 0 !important;
  transition: opacity .25s, transform .25s !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  z-index: 999999 !important;
  max-width: 90vw !important;
}
.adcrm-toast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* ══════════════════════════════════════════════════════════════
   10. SHIMMER FOR LOADING STATE
══════════════════════════════════════════════════════════════ */
#patient-list-container {
  transition: opacity .2s !important;
}

/* ══════════════════════════════════════════════════════════════
   11. ALIAS — .adcrm-drawer = .drawer (modals.php uses adcrm-drawer)
══════════════════════════════════════════════════════════════ */
.adcrm-drawer {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 22px !important;
  width: 100% !important;
  max-width: 460px !important;
  padding: 22px 18px 26px !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,.24),
    0 8px 24px rgba(233,30,140,.14),
    inset 0 1.5px 0 rgba(255,255,255,1) !important;
  animation: iosSlideIn .3s cubic-bezier(.34,1.2,.64,1) !important;
  margin: 0 auto !important;
  scrollbar-width: none !important;
}
.adcrm-drawer::-webkit-scrollbar { display: none !important; }

/* Re-center overlay for dialog (not bottom-sheet) */
.adcrm-overlay {
  align-items: center !important;
  padding: 20px 10% !important;
}

/* ── Treatment plan editable label pill ────────────────────────── */
.adcrm-edit-plan-lbl {
  transition: filter .15s, transform .1s !important;
}
.adcrm-edit-plan-lbl:hover {
  filter: brightness(.88) !important;
  transform: scale(1.04) !important;
}

/* ── Plan selector in pay modal ───────────────────────────────── */
#pay-plan-selector {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1.5px solid rgba(233,30,140,.2) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 4px !important;
}
#pay-plan-selector:focus {
  outline: none !important;
  border-color: var(--pink) !important;
}

/* ── Payment card — per-treatment breakdown rows ─────────────────── */
.pay-treatments > summary {
  font-size: 12px;
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
  padding: 6px 0 2px;
  list-style: none;
}
.pay-treatments > summary::before { content: '▶ '; font-size: 10px; }
.pay-treatments[open] > summary::before { content: '▼ '; }

.pay-treatment-row {
  background: rgba(233,30,140,.04);
  border: 1px solid rgba(233,30,140,.1);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.pay-treat-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.pay-treat-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.pay-treatment-row .pay-hist > summary {
  font-size: 11px;
  color: var(--text3);
  cursor: pointer;
  list-style: none;
}
.pay-treatment-row .pay-hist > summary::before { content: '▶ '; font-size: 9px; }
.pay-treatment-row .pay-hist[open] > summary::before { content: '▼ '; }

/* ── Payment card — clean treatment rows ──────────────────────────── */
.pay-treats-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pay-treat-row {
  background: rgba(0,0,0,.025);
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.06);
}
.pay-treat-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pay-treat-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: block;
}
.pay-treat-date {
  font-size: 11px;
  color: var(--text3);
  margin-left: 4px;
}
.pay-treat-right {
  text-align: right;
  flex-shrink: 0;
}
.pay-treat-amt {
  font-size: 12px;
  font-weight: 700;
  display: block;
}
.pay-treat-amt.done { color: var(--green); }
.pay-treat-amt.due  { color: var(--red); }
.pay-treat-split {
  font-size: 11px;
  color: var(--text3);
  display: block;
  margin-top: 1px;
}
.pay-hist-inner {
  margin-top: 8px;
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: 6px;
}
.pay-hist-inner > summary {
  font-size: 11px;
  color: var(--pink);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.pay-hist-inner > summary::before { content: '▶ '; font-size: 9px; }
.pay-hist-inner[open] > summary::before { content: '▼ '; }
/* Remove old conflicting treatment styles */
.pay-treatments, .pay-treatment-row { all: unset; }

/* ══════════════════════════════════════════════════════════════
   STAT CARDS — CLICKABLE
══════════════════════════════════════════════════════════════ */
.stat-link {
  cursor: pointer !important;
  transition: transform .15s, box-shadow .15s !important;
}
.stat-link:hover  { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0,0,0,.12) !important; }
.stat-link:active { transform: scale(.97) !important; }
.stat-link::after { content: ' →'; font-size: 10px; opacity: .4; }

/* ══════════════════════════════════════════════════════════════
   FOLLOW-UPS — REDESIGN
══════════════════════════════════════════════════════════════ */
.fu-alert-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(229,57,53,.08) !important;
  border: 1.5px solid rgba(229,57,53,.2) !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #C62828 !important;
  margin-bottom: 14px !important;
}
.fu-overdue-badge {
  background: var(--red) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  margin-left: 6px !important;
}
.fu-section-lbl {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  margin: 14px 0 8px !important;
  padding: 0 2px !important;
}
.fu-lbl-due      { color: #C62828 !important; }
.fu-lbl-upcoming { color: #1565C0 !important; }

.fu-card {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 14px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  border: 1.5px solid rgba(0,0,0,.06) !important;
  border-left: 4px solid var(--pink) !important;
  transition: transform .12s !important;
}
.fu-card:active { transform: scale(.99) !important; }
.fu-overdue  { border-left-color: var(--red) !important; background: rgba(229,57,53,.02) !important; }
.fu-today    { border-left-color: var(--orange) !important; }
.fu-upcoming { border-left-color: #1565C0 !important; }

.fu-card-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
.fu-av {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
}
.fu-info { flex: 1; min-width: 0; }
.fu-name {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin-bottom: 3px !important;
}
.fu-meta {
  font-size: 12px !important;
  color: var(--text2) !important;
  font-weight: 500 !important;
}
.fu-status-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}
.fu-badge {
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
.fu-badge-red    { background: rgba(229,57,53,.12) !important; color: #C62828 !important; }
.fu-badge-orange { background: rgba(230,81,0,.12) !important;  color: #BF360C !important; }
.fu-badge-blue   { background: rgba(21,101,192,.12) !important; color: #1565C0 !important; }
.fu-days-away    { font-size: 10px !important; color: var(--text3) !important; font-weight: 600 !important; }
.fu-due-amt      { font-size: 11px !important; font-weight: 800 !important; color: #C62828 !important; }
.fu-notes {
  background: rgba(0,0,0,.03) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  color: var(--text2) !important;
  margin-top: 8px !important;
}
.fu-empty-today {
  text-align: center !important;
  padding: 36px 20px !important;
  background: rgba(0,168,107,.05) !important;
  border-radius: 16px !important;
  border: 1.5px dashed rgba(0,168,107,.25) !important;
  margin-bottom: 14px !important;
}
.fu-empty-ico { font-size: 40px !important; margin-bottom: 8px !important; }
.fu-empty-txt { font-size: 14px !important; font-weight: 700 !important; color: var(--green) !important; }

/* ══════════════════════════════════════════════════════════════
   ANALYTICS — REDESIGN
══════════════════════════════════════════════════════════════ */
.an-hero {
  background: linear-gradient(135deg, #1a0210 0%, #2d0820 50%, #1a0a30 100%) !important;
  border-radius: 20px !important;
  padding: 18px !important;
  margin-bottom: 14px !important;
  color: #fff !important;
}
.an-month-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}
.an-month {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #fff !important;
  min-width: 140px !important;
  text-align: center !important;
}
.an-arr {
  background: rgba(255,255,255,.15) !important;
  border: none !important;
  color: #fff !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s !important;
  line-height: 1 !important;
}
.an-arr:hover { background: rgba(255,255,255,.28) !important; }
.an-4grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
.an-box {
  border-radius: 12px !important;
  padding: 12px !important;
  background: rgba(255,255,255,.1) !important;
}
.an-box-n {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1.1 !important;
}
.an-box-l {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.7) !important;
  margin-top: 3px !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
}
.an-box-sub { font-size: 10px !important; color: rgba(255,255,255,.45) !important; margin-top: 2px !important; }
.an-up { color: #69F0AE !important; }
.an-dn { color: #FF6B6B !important; }

.an-outstanding {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(229,57,53,.08) !important;
  border: 1.5px solid rgba(229,57,53,.2) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #C62828 !important;
  margin-bottom: 14px !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.an-outstanding:hover { background: rgba(229,57,53,.13) !important; }
.an-outstanding-arrow { font-size: 12px !important; opacity: .7 !important; }

.an-card {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 14px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  border: 1.5px solid rgba(0,0,0,.05) !important;
}
.an-card-hd {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}
.an-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}
.an-card-sub { font-size: 11px !important; color: var(--text3) !important; font-weight: 500 !important; }
.an-g2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.an-g2 .an-card { margin-bottom: 0 !important; }

.an-table-wrap { overflow-x: auto !important; }
.an-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}
.an-table thead tr { border-bottom: 2px solid var(--bg2) !important; }
.an-table th {
  text-align: left !important;
  padding: 6px 8px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--text3) !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
}
.an-table th:not(:first-child) { text-align: right !important; }
.an-table td { padding: 10px 8px !important; border-bottom: 1px solid var(--bg2) !important; }
.an-td-month { font-weight: 700 !important; color: var(--text) !important; }
.an-td-rev   { text-align: right !important; font-weight: 800 !important; color: var(--pink) !important; }
.an-td-num   { text-align: right !important; font-weight: 600 !important; color: var(--text2) !important; }
.an-tr-current { background: rgba(233,30,140,.04) !important; }
.an-tr-current .an-td-month { color: var(--pink) !important; }

.an-snapshot {
  background: linear-gradient(135deg, rgba(233,30,140,.06), rgba(123,31,162,.06)) !important;
  border-color: rgba(233,30,140,.15) !important;
}
.an-snapshot-label { font-size: 11px !important; font-weight: 800 !important; color: var(--pink-d) !important; margin-bottom: 6px !important; text-transform: uppercase !important; letter-spacing: .4px !important; }
.an-snapshot-amount { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 28px !important; font-weight: 900 !important; color: var(--pink) !important; margin-bottom: 8px !important; }
.an-snapshot-chips { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.an-snapshot-chips span {
  background: rgba(233,30,140,.1) !important;
  color: var(--pink-d) !important;
  border-radius: 20px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE FIXES — ensure cards render correctly on all devices
══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 480px) {

  /* Follow-up card — prevent layout collapse */
  .fu-card-top {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }
  .fu-status-col {
    min-width: 70px !important;
    align-items: flex-end !important;
  }
  .fu-info { overflow: hidden !important; }
  .fu-name { font-size: 14px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

  /* Payment treat list — stack cleanly on narrow screens */
  .pay-treat-head { flex-wrap: wrap !important; gap: 4px !important; }
  .pay-treat-right { width: 100% !important; text-align: left !important; }

  /* Analytics 2-col grid → stack on very narrow */
  .an-g2 { grid-template-columns: 1fr !important; }
  .an-4grid { grid-template-columns: 1fr 1fr !important; }

  /* Stat cards */
  .stats-grid { grid-template-columns: 1fr 1fr !important; }

  /* Patient card actions wrap */
  .pat-actions { gap: 5px !important; }
  .pab { font-size: 11px !important; padding: 6px 10px !important; }
}

/* ══════════════════════════════════════════════════════════════
   DAILY REVENUE CALENDAR — TABLE LAYOUT
══════════════════════════════════════════════════════════════ */
.rc-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 3px !important;
}
.rc-th {
  text-align: center !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--text3) !important;
  padding: 4px 0 8px !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}
.rc-td {
  vertical-align: bottom !important;
  border-radius: 8px !important;
  background: rgba(0,0,0,.025) !important;
  transition: transform .12s, box-shadow .12s !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.rc-td.rc-blank { background: transparent !important; }
.rc-td.rc-paid  { background: rgba(233,30,140,.06) !important; }
.rc-td.rc-weekend .rc-dn { opacity: .5 !important; }
.rc-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 5px 2px 4px !important;
  gap: 2px !important;
  min-height: 52px !important;
}
.rc-dn {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text2) !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}
.rc-bar-wrap {
  flex: 1 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0 4px !important;
}
.rc-bar {
  width: 100% !important;
  border-radius: 4px 4px 0 0 !important;
  min-height: 0 !important;
  transition: height .3s ease !important;
}
.rc-amt {
  font-size: 8px !important;
  font-weight: 900 !important;
  color: var(--pink-d) !important;
  text-align: center !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}