/* ==========================================================================
   AURA PRACTICE: NEXT-GEN EMR & SMART PHARMACY SUITE
   Faithfully Enhanced from TatvaPractice with Modern Aesthetics & Dual Theme
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THEME TOKENS
   -------------------------------------------------------------------------- */
:root, [data-theme="light"] {
  /* Surface & Backgrounds */
  --bg-app: #F5F6FA;
  --bg-sidebar: #FFFFFF;
  --bg-topbar: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-subtle: #F8FAFC;
  --bg-hover: #F1F5F9;
  --bg-input: #FFFFFF;

  /* Tatva Signature Purple Accents */
  --tatva-purple: #5B21B6;
  --tatva-purple-hover: #4C1D95;
  --tatva-purple-subtle: rgba(91, 33, 182, 0.08);
  --tatva-hero-gradient: linear-gradient(135deg, #3B125C 0%, #2A0845 100%);

  /* Secondary Accents */
  --primary: #6D28D9;
  --accent: #0284C7;
  --success: #059669;
  --success-bg: #ECFDF5;
  --success-border: #A7F3D0;
  --warning: #D97706;
  --danger: #DC2626;

  /* Text Colors */
  --text-main: #1E293B;
  --text-muted: #64748B;
  --text-faint: #94A3B8;

  /* Borders & Shadows */
  --border-light: #E2E8F0;
  --border-card: #E5E7EB;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-popover: 0 12px 28px rgba(0, 0, 0, 0.15);

  --slot-booked-bg: #ECFDF5;
  --slot-booked-border: #10B981;
  --slot-booked-color: #065F46;

  --slot-avail-border: #7C3AED;
  --slot-avail-color: #6D28D9;
}

[data-theme="dark"] {
  --bg-app: #0B0914;
  --bg-sidebar: #131022;
  --bg-topbar: #131022;
  --bg-card: #1A162E;
  --bg-subtle: #201C38;
  --bg-hover: #262144;
  --bg-input: #131022;

  --tatva-purple: #8B5CF6;
  --tatva-purple-hover: #A78BFA;
  --tatva-purple-subtle: rgba(139, 92, 246, 0.15);
  --tatva-hero-gradient: linear-gradient(135deg, #270B42 0%, #150326 100%);

  --primary: #A78BFA;
  --accent: #38BDF8;
  --success: #10B981;
  --success-bg: rgba(16, 185, 129, 0.15);
  --success-border: rgba(16, 185, 129, 0.35);
  --warning: #F59E0B;
  --danger: #EF4444;

  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
  --text-faint: #64748B;

  --border-light: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.1);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.7);
  --shadow-popover: 0 12px 30px rgba(0, 0, 0, 0.8);

  --slot-booked-bg: rgba(16, 185, 129, 0.15);
  --slot-booked-border: #10B981;
  --slot-booked-color: #34D399;

  --slot-avail-border: #8B5CF6;
  --slot-avail-color: #C4B5FD;
}

/* --------------------------------------------------------------------------
   2. GLOBAL RESET & LAYOUT SHELL
   -------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-app);
  color: var(--text-main);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s, color 0.25s;
}

.app-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* --------------------------------------------------------------------------
   3. LEFT SIDEBAR (Tatva Icon Sidebar)
   -------------------------------------------------------------------------- */
.app-sidebar {
  width: 90px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 100;
  transition: background 0.25s, border-color 0.25s;
}

.sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.brand-logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #6D28D9, #0284C7);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 10px rgba(109, 40, 217, 0.3);
}

.brand-logo-icon svg {
  width: 20px;
  height: 20px;
}

.brand-name {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 4px;
}

.brand-name span {
  color: var(--primary);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: center;
  flex: 1;
}

.nav-item {
  width: 76px;
  background: transparent;
  border: none;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

.nav-item.active {
  background: var(--tatva-purple-subtle);
  color: var(--primary);
  border: 1px solid rgba(109, 40, 217, 0.2);
}

.nav-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.nav-icon svg {
  width: 20px;
  height: 20px;
}

.nav-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.1;
}

.nav-badge {
  position: absolute;
  top: 4px;
  right: 12px;
  background: var(--danger);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
}

.ai-sparkle svg {
  color: #F59E0B;
}

.sidebar-footer {
  padding-top: 12px;
}

.version-tag {
  font-size: 0.62rem;
  color: var(--text-faint);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. TOPBAR (Clinic Selector & Header Actions)
   -------------------------------------------------------------------------- */
.app-main-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.clinic-topbar {
  height: 60px;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 90;
  transition: background 0.25s, border-color 0.25s;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.clinic-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-light);
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--bg-card);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: border-color 0.2s;
}

.clinic-selector:hover {
  border-color: var(--primary);
}

.live-status-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--success);
}

.dot-pulse {
  width: 6px;
  height: 6px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--success);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-btn-round {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.icon-btn-round:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--bg-hover);
}

.theme-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.theme-toggle-btn:hover {
  border-color: var(--primary);
  transform: rotate(20deg);
}

[data-theme="light"] .sun-icon { display: block; color: #D97706; }
[data-theme="light"] .moon-icon { display: none; }
[data-theme="dark"] .sun-icon { display: none; }
[data-theme="dark"] .moon-icon { display: block; color: #A78BFA; }

.user-pill-dr {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  cursor: pointer;
}

.dr-avatar {
  width: 30px;
  height: 30px;
  background: #F59E0B;
  color: #fff;
  font-weight: 800;
  font-size: 0.72rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dr-info {
  display: flex;
  flex-direction: column;
}

.dr-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-main);
}

.dr-spec {
  font-size: 0.64rem;
  color: var(--text-muted);
}

.crown-badge {
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   5. PURPLE HERO BANNER (Tatva Signature Style)
   -------------------------------------------------------------------------- */
.banner-hero {
  background: var(--tatva-hero-gradient);
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-greeting {
  font-family: 'Outfit', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.hero-sub {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.view-mode-toggle {
  display: flex;
  background: rgba(0, 0, 0, 0.25);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.mode-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.mode-btn.active {
  background: #ffffff;
  color: #3B125C;
}

.btn {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-outline-white {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #ffffff;
}

.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

.btn-white-glow {
  background: #ffffff;
  color: #3B125C;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.btn-white-glow:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.btn-primary {
  background: var(--tatva-purple);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--tatva-purple-hover);
}

.btn-outline-primary {
  background: transparent;
  border: 1.5px solid var(--tatva-purple);
  color: var(--tatva-purple);
}

.btn-outline-primary:hover {
  background: var(--tatva-purple-subtle);
}

.btn-sm {
  padding: 5px 12px;
  font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   6. MAIN CARD CONTAINER & QUEUE TABS
   -------------------------------------------------------------------------- */
.main-card-container {
  background: var(--bg-card);
  margin: 20px 24px;
  border-radius: 14px;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  transition: background 0.25s, border-color 0.25s;
}

.queue-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.queue-tabs {
  display: flex;
  gap: 16px;
}

.q-tab {
  background: transparent;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.q-tab:hover {
  color: var(--text-main);
  background: var(--bg-hover);
}

.q-tab.active {
  color: var(--primary);
  background: var(--tatva-purple-subtle);
}

.q-count {
  background: var(--border-light);
  color: var(--text-main);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

.q-tab.active .q-count {
  background: var(--primary);
  color: #fff;
}

.queue-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-navigator {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
}

.date-arrow {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 700;
}

.icon-btn-filter {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  border-radius: 8px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.queue-search-row {
  margin-bottom: 16px;
}

.search-input-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  padding: 8px 14px;
  border-radius: 10px;
  width: 380px;
}

.search-input-box svg {
  color: var(--text-faint);
}

.search-input-box input {
  background: transparent;
  border: none;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.82rem;
  width: 100%;
}

.search-input-box input:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   7. TATVA DATA TABLE
   -------------------------------------------------------------------------- */
.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.tatva-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.tatva-table th {
  background: var(--bg-subtle);
  padding: 12px 14px;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-light);
}

.tatva-table td {
  padding: 14px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.pat-name-cell strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  display: block;
}

.pat-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.link-name {
  color: var(--primary);
  cursor: pointer;
}

.link-name:hover {
  text-decoration: underline;
}

.id-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-hover);
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--text-muted);
}

.visit-type-badge {
  background: var(--tatva-purple-subtle);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.slot-time {
  color: var(--primary);
}

.btn-more-dots {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   8. SCREEN 2 & 3: APPOINTMENT SLOT SELECTOR
   -------------------------------------------------------------------------- */
.slot-header-bar {
  background: var(--tatva-hero-gradient);
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.slot-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-back {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}

.slot-card {
  background: var(--bg-card);
  margin: 20px 24px;
  border-radius: 14px;
  border: 1px solid var(--border-card);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.month-selector-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.month-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.month-arrows {
  display: flex;
  gap: 8px;
}

.arrow-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-light);
  background: var(--bg-hover);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text-muted);
}

/* Date Bubble Strip (Screenshot 2) */
.days-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 24px;
}

.day-bubble {
  min-width: 68px;
  padding: 10px 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.day-bubble:hover {
  border-color: var(--primary);
}

.day-bubble.active {
  background: var(--tatva-purple);
  color: #fff;
  border-color: var(--tatva-purple);
  box-shadow: 0 4px 12px rgba(91, 33, 182, 0.35);
}

.day-num {
  font-size: 1.15rem;
  font-weight: 800;
}

.day-name {
  font-size: 0.7rem;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Doctor Select Box */
.doc-select-box {
  margin-bottom: 20px;
}

.doc-select-box label {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}

.doc-dropdown-preview {
  border: 1px solid var(--border-light);
  padding: 10px 14px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--bg-subtle);
}

/* Time Tabs (Morning, Afternoon, Evening, Night) */
.time-day-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--border-light);
  margin-bottom: 16px;
}

.time-tab {
  background: transparent;
  border: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
}

.time-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.slots-avail-banner {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.slots-avail-banner strong {
  color: var(--text-main);
}

/* Slot Chips Grid */
.slot-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.slot-chip {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

/* Booked Slot (Green) */
.slot-chip.booked {
  background: var(--slot-booked-bg);
  border: 1px solid var(--slot-booked-border);
  color: var(--slot-booked-color);
}

.check-icon {
  font-size: 0.75rem;
}

/* Available Slot (Purple outline) */
.slot-chip.available {
  background: var(--bg-card);
  border: 1.5px solid var(--slot-avail-border);
  color: var(--slot-avail-color);
}

.slot-chip.available:hover {
  background: var(--tatva-purple-subtle);
}

.slot-chip.disabled {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  color: var(--text-faint);
  cursor: not-allowed;
}

/* Popover Wrap & Card (Screenshot 3 exact popover) */
.slot-popover-wrap {
  position: relative;
  display: inline-block;
}

.slot-popover-card {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: var(--shadow-popover);
  padding: 14px 18px;
  z-index: 100;
  width: 280px;
  animation: popIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.slot-popover-card::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--bg-card) transparent transparent transparent;
}

@keyframes popIn {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.popover-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

.popover-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-subtle);
  padding: 10px;
  border-radius: 8px;
}

.popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.popover-item strong {
  color: var(--text-main);
}

/* --------------------------------------------------------------------------
   9. SCREEN 4: ALL PATIENTS DIRECTORY (Screenshot 4)
   -------------------------------------------------------------------------- */
.patients-filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.till-date-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-light);
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-subtle);
}

.date-input {
  background: transparent;
  border: none;
  font-size: 0.82rem;
  color: var(--text-main);
  width: 90px;
}

.patient-count-badge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.icon-download {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-light);
  background: var(--bg-hover);
  border-radius: 8px;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   10. SCREEN 5: PATIENT DETAILS & CLINICAL VISIT (Screenshot 5)
   -------------------------------------------------------------------------- */
.pat-details-layout {
  display: flex;
  gap: 20px;
  padding: 20px 24px;
}

.pat-mini-sidebar {
  width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  height: fit-content;
}

.pat-profile-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 12px;
}

.avatar-circle {
  width: 38px;
  height: 38px;
  background: #CBD5E1;
  color: #334155;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pat-mini-info strong {
  font-size: 0.85rem;
  display: block;
  color: var(--text-main);
}

.pat-mini-info span {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.pat-sub-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pat-sub-nav li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.pat-sub-nav li:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

.pat-sub-nav li.active {
  background: var(--tatva-purple-subtle);
  color: var(--primary);
  font-weight: 700;
}

.pat-details-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  align-items: start;
}

.emr-card-col {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.emr-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 14px;
}

.sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sec-title h3 {
  font-size: 0.95rem;
  font-weight: 700;
}

.sec-date {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.vitals-table td {
  padding: 10px 8px;
  font-size: 0.78rem;
}

.quick-vitals-logger {
  margin-top: 14px;
}

/* Right Column Rx Styles */
.doc-meta-title h3 {
  font-size: 0.98rem;
  font-weight: 700;
}

.rx-timestamp {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.rx-header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.visit-pager {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}

.icon-tool {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
}

.rx-sub-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.88rem;
}

.rx-badge-pill {
  font-size: 0.68rem;
  background: var(--tatva-purple-subtle);
  color: var(--primary);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
}

.generic-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.freq-tag {
  font-size: 0.72rem;
  color: var(--primary);
  font-weight: 600;
}

.note-pill {
  font-size: 0.68rem;
  background: var(--bg-hover);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-muted);
}

.emr-push-pharmacy-bar {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.push-info strong {
  font-size: 0.82rem;
  display: block;
  color: var(--text-main);
}

.push-info span {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   11. PHARMACY POS & LIVE DISPENSING (SCREEN 6)
   -------------------------------------------------------------------------- */
.pharmacy-two-col {
  display: flex;
  gap: 20px;
  padding: 0 4px;
}

.queue-orders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.pharm-card-item {
  background: var(--bg-subtle);
  border: 1.5px solid var(--border-light);
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.pharm-card-item:hover {
  border-color: var(--primary);
}

.pharm-card-item.active {
  border-color: var(--primary);
  background: var(--tatva-purple-subtle);
}

.fefo-indicator-badge {
  background: var(--warning);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.pos-billing-summary {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 16px;
  margin-top: 20px;
}

.billing-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.b-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.b-row.grand-total {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  border-top: 1px dashed var(--border-light);
  padding-top: 8px;
}

.pos-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.pay-methods {
  display: flex;
  gap: 8px;
}

.pay-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  cursor: pointer;
}

.pay-btn.active {
  background: var(--tatva-purple);
  border-color: var(--tatva-purple);
  color: #fff;
}

/* --------------------------------------------------------------------------
   12. PRINTABLE MODAL & TOASTS
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-overlay.hidden { display: none; }

.modal-box {
  background: #ffffff;
  border-radius: 14px;
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  color: #111827;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

.invoice-printable-area {
  padding: 24px;
  overflow-y: auto;
}

.inv-header {
  display: flex;
  justify-content: space-between;
}

.inv-clinic-info h2 { font-size: 1.15rem; font-weight: 800; color: #3B125C; }
.inv-clinic-info p { font-size: 0.74rem; color: #475569; }

.inv-number { font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 700; color: #6D28D9; }

.inv-line { border: none; border-top: 1.5px solid #E2E8F0; margin: 12px 0; }

.inv-parties-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 16px;
  font-size: 0.78rem;
}

.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
  margin-bottom: 16px;
}

.inv-table th {
  background: #F1F5F9;
  padding: 8px;
  text-align: left;
}

.inv-table td {
  padding: 8px;
  border-bottom: 1px solid #E2E8F0;
}

.inv-footer-summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.inv-amounts { width: 240px; }
.inv-amounts .inv-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  margin-bottom: 4px;
}

.inv-total-row {
  font-weight: 800;
  font-size: 0.95rem;
  border-top: 1px solid #CBD5E1;
  padding-top: 6px;
}

.modal-footer {
  padding: 14px 20px;
  background: #F8FAFC;
  border-top: 1px solid #E5E7EB;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: #1E293B;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 0.82rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideIn 0.25s ease-out;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.view-panel {
  display: none;
}

.view-panel.active {
  display: block;
}

/* ==========================================================================
   SCREEN 7: PRESCRIPTION WRITING PAD (Screenshots 1 - 4)
   ========================================================================== */

.pad-top-action-bar {
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-light);
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 60px;
  z-index: 80;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pad-bar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-icon-back {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s;
}

.btn-icon-back:hover {
  background: var(--bg-hover);
  color: var(--primary);
}

.pad-patient-chip-wrap {
  position: relative;
  display: inline-block;
}

.pad-patient-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.pad-patient-chip:hover {
  background: var(--bg-hover);
}

.pad-patient-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 390px;
  max-height: 490px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.22);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeInDown 0.15s ease-out;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.pad-popover-header {
  padding: 10px 14px;
  background: var(--bg-body);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pad-popover-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
}

.pad-popover-close {
  background: transparent;
  border: none;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.pad-popover-close:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

.pad-popover-search {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
}

.pad-popover-search input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.82rem;
  color: var(--text-main);
  background: transparent;
}

.pad-popover-clear {
  background: transparent;
  border: none;
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
}

.pad-popover-body {
  padding: 8px;
  overflow-y: auto;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.popover-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.popover-sec-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.sec-badge {
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}

.popover-patient-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.popover-pat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.12s ease;
}

.popover-pat-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
}

.popover-pat-card.active-current {
  background: var(--tatva-purple-subtle);
  border-color: rgba(109, 40, 217, 0.25);
}

.popover-pat-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.popover-pat-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #E2E8F0;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popover-pat-card.active-current .popover-pat-avatar {
  background: var(--primary);
  color: #fff;
}

.popover-pat-info strong {
  display: block;
  font-size: 0.82rem;
  color: var(--text-main);
  line-height: 1.2;
}

.popover-pat-info span {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.popover-status-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

.badge-status-queue {
  background: #E0E7FF;
  color: #4338CA;
}

.badge-status-in-consult {
  background: #FEF3C7;
  color: #B45309;
}

.badge-status-finished {
  background: #D1FAE5;
  color: #065F46;
}

.badge-status-draft {
  background: #F3E8FF;
  color: #6B21A8;
}

.avatar-mini {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #CBD5E1;
  color: #334155;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chip-names strong {
  font-size: 0.88rem;
  color: var(--text-main);
  display: block;
}

.chip-names span {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.pad-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pad-btn-tool {
  background: transparent;
  border: 1px solid var(--border-light);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.pad-btn-tool:hover {
  background: var(--bg-hover);
  color: var(--text-main);
  border-color: var(--border-card);
}

.btn-voice-rx {
  background: var(--tatva-purple-subtle);
  border: 1.5px solid var(--primary);
  color: var(--primary);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-voice-rx:hover {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(109, 40, 217, 0.35);
}

.btn-icon-more {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: pointer;
}

/* Pad Two Column Layout */
.pad-two-col-layout {
  display: flex;
  gap: 20px;
  padding: 20px 24px;
  align-items: flex-start;
}

.pad-left-col {
  width: 290px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 130px;
}

.pad-sub-tabs {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 3px;
  gap: 4px;
}

.sub-tab {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sub-tab.active {
  background: var(--bg-hover);
  color: var(--primary);
  font-weight: 700;
}

.ai-tab {
  color: #7C3AED;
}

.sparkle-icon {
  font-size: 0.9rem;
}

/* Left Module Cards */
.left-module-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.mod-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mod-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mod-title strong {
  font-size: 0.82rem;
  color: var(--text-main);
}

.btn-text-add {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-text-add:hover {
  text-decoration: underline;
}

.past-visit-accordion {
  margin-top: 10px;
  background: var(--bg-subtle);
  border-radius: 8px;
  padding: 8px 10px;
}

.accordion-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}

.visit-date-tag {
  font-size: 0.7rem;
  color: var(--primary);
  font-weight: 700;
  margin: 6px 0 8px;
}

.vital-row-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.vital-row-item .v-label {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.vital-row-item .v-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vital-row-item .v-input {
  width: 52px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 2px 6px;
  text-align: right;
  font-weight: 700;
  color: var(--text-main);
  font-size: 0.78rem;
}

.vital-row-item .v-unit {
  font-size: 0.68rem;
  color: var(--text-faint);
  width: 36px;
}

/* Right Main Pad Modules */
.pad-right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.pad-module-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}

.pad-module-card:hover {
  border-color: rgba(109, 40, 217, 0.3);
}

.pad-mod-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.mod-bullet {
  font-size: 0.8rem;
}

.info-bubble {
  font-size: 0.7rem;
  color: var(--text-faint);
  cursor: help;
  margin-left: 4px;
}

.mod-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-tool-link {
  background: transparent;
  border: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-tool-link:hover {
  color: var(--primary);
}

.btn-clear-mod:hover {
  color: var(--danger);
}

/* Pill Input Box (Screenshot 1-4) */
.pad-search-wrap {
  position: relative;
  width: 100%;
}

.pad-pill-input {
  width: 100%;
  background: var(--bg-subtle);
  border: 1.5px solid var(--border-light);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text-main);
  transition: all 0.2s;
}

.pad-pill-input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px var(--tatva-purple-subtle);
}

/* Autocomplete Dropdown (Exact Screenshot with Apple / Formulation search) */
.med-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
  margin-top: 6px;
}

.med-search-dropdown.hidden {
  display: none;
}

.med-dropdown-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 0.15s;
}

.med-dropdown-item:hover {
  background: var(--tatva-purple-subtle);
}

.med-dropdown-item strong {
  font-size: 0.84rem;
  color: var(--text-main);
}

.med-dropdown-item span {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.add-new-med-row {
  padding: 12px 16px;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  background: var(--bg-subtle);
  border-top: 1.5px dashed var(--border-light);
  display: flex;
  align-items: center;
  gap: 6px;
}

.add-new-med-row:hover {
  background: var(--tatva-purple-subtle);
}

/* Chips Suggestions */
.chips-suggestions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.suggest-chip {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.suggest-chip:hover {
  background: var(--tatva-purple-subtle);
  border-color: var(--primary);
  color: var(--primary);
}

/* Line Item Tables (Important Reports & Clinical Note & Diagnosis) */
.mod-line-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.line-row-header {
  display: grid;
  grid-template-columns: 1fr 1fr 30px;
  gap: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  padding: 0 6px;
}

.line-row-item {
  display: grid;
  grid-template-columns: 20px 1fr 1fr 30px;
  gap: 8px;
  align-items: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  padding: 6px 10px;
  border-radius: 8px;
}

.drag-handle {
  color: var(--text-faint);
  cursor: grab;
  font-size: 0.85rem;
}

.form-control-flat {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text-main);
  padding: 4px;
}

.form-control-flat:focus {
  outline: none;
  border-bottom: 1.5px solid var(--primary);
}

.btn-trash-line {
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 0.9rem;
}

.btn-trash-line:hover {
  color: var(--danger);
}

.btn-add-line {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.btn-add-line:hover {
  text-decoration: underline;
}

.clinical-note-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
}

.pad-textarea {
  width: 100%;
  min-height: 80px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text-main);
  line-height: 1.5;
  resize: vertical;
}

.pad-textarea:focus {
  outline: none;
}

.pad-textarea-sm {
  width: 100%;
  height: 60px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--text-main);
  resize: none;
}

.pad-textarea-sm:focus {
  outline: none;
  border-color: var(--primary);
}

/* Follow-up & Additional Notes Split */
.pad-split-two-modules {
  display: flex;
  gap: 16px;
}

.follow-input-row {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 10px;
}

.follow-input-row .cal-icon {
  position: absolute;
  right: 12px;
  pointer-events: none;
}

.quick-days-chips {
  display: flex;
  gap: 8px;
}

.day-chip {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.day-chip.active {
  background: var(--tatva-purple-subtle);
  color: var(--primary);
  border-color: var(--primary);
}

/* Pre-Visit Test Chips & Badges */
.test-quick-chip {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 0.70rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.test-quick-chip:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #0f172a;
}

.test-quick-chip.active {
  background: #e0e7ff;
  border-color: #6366f1;
  color: #4338ca;
  font-weight: 600;
}

.test-selected-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  border-radius: 14px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  animation: fadeIn 0.2s ease;
}

.test-selected-pill .btn-remove-test {
  background: transparent;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 2px;
  font-weight: 700;
}

.test-selected-pill .btn-remove-test:hover {
  color: #b91c1c;
}

.opd-date-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 4px;
  font-size: 0.75rem;
}

.opd-date-card.exact {
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  color: #065f46;
}

.opd-date-card.option {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0369a1;
}

.opd-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  width: fit-content;
}

.opd-badge.exact {
  background: #059669;
  color: #ffffff;
}

.opd-badge.option-1 {
  background: #0284c7;
  color: #ffffff;
}

.opd-badge.option-2 {
  background: #6366f1;
  color: #ffffff;
}

/* Differential Diagnosis Box */
.diff-diag-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px;
}

.diff-header-bar {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Bottom Bar */
.pad-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px dashed var(--border-light);
}

.mod-count-indicator {
  font-size: 0.75rem;
  color: var(--text-faint);
  font-weight: 600;
}

/* ==========================================================================
   CUSTOMIZE YOUR PAD MODAL (Exact Screenshot 5 Layout)
   ========================================================================== */

.customize-modal-box {
  max-width: 820px;
  width: 100%;
}

.modal-close-icon {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--text-muted);
}

.customize-modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: 75vh;
}

.customize-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.custom-col {
  display: flex;
  flex-direction: column;
}

.col-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-faint);
  letter-spacing: 0.5px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--border-light);
  margin-bottom: 12px;
}

.custom-items-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.custom-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  transition: all 0.2s;
}

.custom-item-row:hover {
  background: var(--bg-hover);
}

.item-name-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  margin-left: 10px;
}

.item-name-block strong {
  font-size: 0.82rem;
  color: var(--text-main);
}

.btn-text-link {
  background: transparent;
  border: none;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
}

.btn-text-link:hover {
  color: var(--primary);
}

/* iOS Style Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CBD5E1;
  transition: .3s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
}

input:checked + .slider {
  background-color: var(--tatva-purple);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--tatva-purple);
}

input:checked + .slider:before {
  transform: translateX(16px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* ==========================================================================
   PAD PRESCRIPTION TABLE & MEDICATION ROW STYLING
   ========================================================================== */

.pad-rx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 10px;
}

.pad-rx-table th {
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 10px;
  border-bottom: 1.5px solid var(--border-light);
}

.pad-rx-table td {
  padding: 8px 10px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.8rem;
}

.pad-rx-row {
  transition: background-color 0.15s ease;
  animation: rowFadeIn 0.25s ease-out;
}

@keyframes rowFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.pad-rx-row:hover {
  background: var(--bg-hover);
}

.drug-name-cell strong {
  display: block;
  font-size: 0.84rem;
  color: var(--text-main);
  font-weight: 700;
}

.drug-name-cell .generic-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.rx-table-input {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--text-main);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.rx-table-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--tatva-purple-subtle);
}

.rx-select {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 0.76rem;
  color: var(--text-main);
  cursor: pointer;
}

.rx-select:focus {
  outline: none;
  border-color: var(--primary);
}

.freq-select-btn-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.freq-pill {
  font-size: 0.7rem;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 600;
}

.freq-pill.active {
  background: var(--tatva-purple-subtle);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-remove-rx-row {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 1.1rem;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.btn-remove-rx-row:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.empty-rx-notice {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
}

.empty-rx-notice .empty-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
  opacity: 0.7;
}

.empty-rx-notice p {
  font-size: 0.82rem;
  margin-bottom: 12px;
}

.empty-rx-notice .quick-load-btn {
  background: var(--tatva-purple-subtle);
  border: 1.5px solid var(--primary);
  color: var(--primary);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.empty-rx-notice .quick-load-btn:hover {
  background: var(--primary);
  color: #fff;
}

/* ==========================================================================
   OFFICIAL PRESCRIPTION PDF PREVIEW & PRINT ENGINE (Exact Tatva Layout)
   ========================================================================== */

.rx-modal-box {
  max-width: 900px;
  width: 100%;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
}

.rx-pill-tag {
  background: var(--tatva-purple-subtle);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.letterhead-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--text-muted);
  cursor: pointer;
  margin-right: 6px;
}

.rx-pdf-viewport {
  background: #4A4D50;
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  justify-content: center;
}

.rx-a4-sheet {
  background: #ffffff;
  color: #000000;
  width: 100%;
  max-width: 760px;
  min-height: 980px;
  padding: 40px 48px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.84rem;
  line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  position: relative;
  display: flex;
  flex-direction: column;
}

.rx-clinic-letterhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.clinic-branding h2 {
  font-size: 1.25rem;
  font-weight: 900;
  color: #2E1065;
  letter-spacing: -0.3px;
  margin: 0;
}

.clinic-branding p {
  font-size: 0.74rem;
  color: #374151;
  margin: 2px 0 0;
}

.clinic-sub-address {
  font-size: 0.7rem !important;
  color: #6B7280 !important;
}

.doc-header-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  font-size: 0.72rem;
  color: #374151;
}

.doc-header-meta strong {
  font-size: 0.95rem;
  color: #111827;
  font-weight: 800;
}

.rx-blank-letterhead-spacer {
  height: 120px;
}

.rx-blank-letterhead-spacer.hidden {
  display: none;
}

.rx-print-divider {
  border: none;
  border-top: 1.2px solid #000000;
  margin: 10px 0;
}

.rx-patient-meta-grid {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 2px 0;
}

.rx-meta-left, .rx-meta-right {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rx-section-block {
  margin: 12px 0;
  font-size: 0.82rem;
}

.rx-sec-line {
  display: flex;
  gap: 6px;
}

.rx-sec-title {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}

.rx-clinical-note-box {
  border: 1px solid #000000;
  padding: 8px 12px;
  margin: 4px 0 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: pre-line;
}

.rx-medications-numbered-list {
  list-style: none;
  padding-left: 0;
  margin: 4px 0;
}

.rx-medications-numbered-list li {
  margin-bottom: 6px;
  font-size: 0.82rem;
  line-height: 1.35;
}

.rx-print-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
  padding-top: 30px;
}

.rx-qr-booking-block {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rx-qr-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.rx-qr-link:hover .rx-qr-url {
  text-decoration: underline;
  color: #1d4ed8;
}

.rx-qr-code {
  width: 70px;
  height: 70px;
  min-width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.rx-qr-code svg,
.rx-qr-code img {
  width: 70px;
  height: 70px;
  display: block;
}

.rx-qr-text {
  font-size: 0.7rem;
  color: #111827;
  line-height: 1.3;
}

.rx-qr-url {
  font-size: 0.68rem;
  color: #2563eb;
  font-weight: 600;
  margin-top: 2px;
  text-decoration: underline;
}

.rx-doctor-sign-block {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.rx-doctor-sign-block .sign-space {
  height: 35px;
}

.rx-doctor-sign-block strong {
  font-size: 0.9rem;
  color: #111827;
}

.rx-page-num {
  text-align: right;
  font-size: 0.72rem;
  color: #6B7280;
  margin-top: 14px;
}

/* ==========================================================================
   PRINT MEDIA RULES (Clean A4 Sheet Output)
   ========================================================================== */

@media print {
  body * {
    visibility: hidden;
  }

  #printable-rx-sheet,
  #printable-rx-sheet * {
    visibility: visible;
  }

  #printable-rx-sheet {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 10mm 15mm !important;
    background: #ffffff !important;
    color: #000000 !important;
  }

  .modal-overlay {
    background: transparent !important;
    position: static !important;
    padding: 0 !important;
  }

  .modal-header, .modal-footer {
    display: none !important;
  }

  .rx-qr-link {
    text-decoration: none !important;
    color: #000000 !important;
  }

  .rx-qr-url {
    color: #000000 !important;
  }
}

/* ==========================================================================
   SCREEN 8: OPD BILLING DASHBOARD STYLING (Screenshots)
   ========================================================================== */

.billing-sub-tabs-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 14px;
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}

.billing-tabs-left {
  display: flex;
  gap: 8px;
}

.b-tab {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.b-tab:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

.b-tab.active {
  background: var(--tatva-purple-subtle);
  color: var(--primary);
  font-weight: 700;
}

.billing-filters-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-icon-export {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--primary);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-icon-export:hover {
  background: var(--tatva-purple-subtle);
  border-color: var(--primary);
}

/* 4 KPI Summary Cards Grid */
.billing-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.kpi-card-box {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: 12px;
  padding: 16px 20px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}

.kpi-card-box:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.kpi-card-box.active {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(109, 40, 217, 0.12);
}

.kpi-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text-main);
}

.kpi-green .kpi-value { color: var(--success); }
.kpi-orange .kpi-value { color: var(--warning); }
.kpi-red .kpi-value { color: var(--danger); }

.kpi-arrow-down {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--primary);
  display: none;
}

.kpi-card-box.active .kpi-arrow-down {
  display: block;
}

.sort-icon {
  font-size: 0.7rem;
  color: var(--text-faint);
  margin-left: 2px;
}

.link-bill-no {
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
}

.link-bill-no:hover {
  text-decoration: underline;
}

.bill-date-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.action-tools-cell {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   SCREEN 9: EDIT / CREATE OPD BILL STYLING (Screenshots 2 & 3)
   ========================================================================== */

.create-bill-top-bar {
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-light);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 60px;
  z-index: 80;
}

.c-bill-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.c-bill-left h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.advance-balance-chip {
  background: var(--tatva-purple-subtle);
  border: 1px solid rgba(109, 40, 217, 0.2);
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chip-plus-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 0.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.c-bill-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.form3c-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.create-bill-container {
  padding: 20px 24px;
}

/* Patient Strip */
.bill-patient-strip {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.b-field-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.patient-pill-display {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px 14px;
}

.b-pat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}

.b-pat-item .icon {
  font-size: 0.85rem;
}

/* Split Grid */
.bill-split-grid {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.bill-items-col {
  flex: 1.6;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.bill-items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.bill-items-header h3 {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0;
}

.b-actions-links {
  display: flex;
  gap: 10px;
}

.bill-items-table th {
  background: var(--bg-subtle);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 8px 10px;
}

.bill-items-table td {
  padding: 8px 10px;
  vertical-align: middle;
}

.add-bill-item-bar {
  margin-top: 14px;
}

.add-item-input-wrap {
  position: relative;
}

.add-item-input-wrap input {
  width: 100%;
  background: var(--bg-subtle);
  border: 1px dashed var(--border-card);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text-main);
  transition: all 0.2s;
}

.add-item-input-wrap input:focus {
  outline: none;
  border-color: var(--primary);
  border-style: solid;
  background: var(--bg-card);
}

/* Right Payment Ticket Column */
.bill-payment-col {
  flex: 1;
  position: sticky;
  top: 140px;
}

.billing-ticket-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 24px 22px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  position: relative;
}

.pay-head-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 8px;
}

.payment-method-row {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.pay-mode-dropdown-wrap {
  flex: 1.2;
}

.pay-mode-select {
  width: 100%;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
}

.pay-amount-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0 10px;
}

.pay-amount-input-wrap .curr-sign {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.pay-amount-input {
  width: 100%;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
  padding: 8px 6px;
}

.pay-amount-input:focus { outline: none; }

.add-upi-ref-link {
  font-size: 0.72rem;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
}

.add-upi-ref-link:hover { text-decoration: underline; }

.btn-add-payment-mode {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  margin: 4px 0 16px;
  display: inline-block;
}

.ticket-breakdown {
  border-top: 1.5px dashed var(--border-light);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.t-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.t-row strong {
  color: var(--text-main);
}

.extra-discount-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.extra-discount-inputs input {
  width: 60px;
  text-align: right;
  padding: 3px 6px;
  font-size: 0.78rem;
  border: 1px solid var(--border-light);
  border-radius: 6px;
}

.toggle-unit-btn-group {
  display: flex;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  overflow: hidden;
}

.unit-btn {
  background: var(--bg-card);
  border: none;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 7px;
  cursor: pointer;
  color: var(--text-muted);
}

.unit-btn.active {
  background: var(--primary);
  color: #fff;
}

.t-divider {
  border-top: 1px solid var(--border-light);
  margin: 4px 0;
}

.t-payable-row {
  font-size: 0.95rem;
  font-weight: 800;
}

.t-payable-row strong {
  font-size: 1.05rem;
  color: var(--text-main);
}

.t-paid-row {
  font-size: 0.95rem;
  font-weight: 800;
}

.t-paid-row strong {
  font-size: 1.15rem;
  color: var(--success);
}

/* Scalloped ticket bottom border */
.ticket-scallop-bottom {
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 8px;
  background: radial-gradient(circle, transparent, transparent 50%, var(--bg-card) 50%, var(--bg-card) 100%);
  background-size: 16px 16px;
}

/* ==========================================================================
   OFFICIAL BILL CUM RECEIPT STYLING (Exact PDF Layout)
   ========================================================================== */

.receipt-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 2px solid #000000;
  margin-bottom: 12px;
}

.receipt-doc-meta {
  width: 220px;
}

.receipt-doc-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #6D28D9;
  display: block;
}

.receipt-qual, .receipt-spec {
  font-size: 0.76rem;
  color: #374151;
}

.receipt-clinic-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.receipt-clinic-meta {
  width: 280px;
  text-align: right;
  font-size: 0.72rem;
  color: #1F2937;
  line-height: 1.35;
}

.receipt-clinic-name {
  font-size: 1rem;
  font-weight: 800;
  color: #6D28D9;
  display: block;
  margin-bottom: 2px;
}

.receipt-title-bar {
  text-align: center;
  margin: 12px 0 16px;
}

.receipt-title-bar h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.receipt-meta-grid {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  padding: 8px 0;
  margin-bottom: 16px;
  font-size: 0.78rem;
  line-height: 1.5;
}

.r-meta-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rec-status-tag {
  color: #059669;
  font-weight: 700;
}

.receipt-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-bottom: 16px;
}

.receipt-items-table th {
  background: #F3F4F6;
  padding: 8px 10px;
  font-weight: 700;
  border-bottom: 1px solid #000000;
}

.receipt-items-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #E5E7EB;
}

.receipt-summary-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
}

.receipt-summary-box {
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
}

.r-sum-row {
  display: flex;
  justify-content: space-between;
}

.r-sum-total {
  font-weight: 800;
  border-top: 1px solid #000000;
  padding-top: 6px;
  font-size: 0.85rem;
}

.r-sum-grand {
  font-weight: 800;
  font-size: 0.95rem;
  color: #059669;
  border-top: 1.5px solid #000000;
  padding-top: 4px;
}

.receipt-bottom-grid {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 20px;
}

.r-qr-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.receipt-page-footer {
  margin-top: 24px;
  padding-top: 8px;
  border-top: 1px solid #E5E7EB;
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #6B7280;
}

/* ==========================================================================
   VIEW BILL / PREVIEW SCREEN STYLING (Screenshot 1)
   ========================================================================== */

.btn-outline-purple {
  background: #ffffff;
  border: 1.5px solid #5B21B6;
  color: #5B21B6;
  font-weight: 700;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 0.84rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-outline-purple:hover {
  background: #F5F3FF;
}

.btn-change-bill-patient {
  background: #EDE9FE;
  border: 1px solid #DDD6FE;
  color: #6D28D9;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.15s ease;
}

.btn-change-bill-patient:hover {
  background: #DDD6FE;
}

.bill-patient-search-wrap {
  position: relative;
  width: 100%;
}

.bill-patient-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
}

.bill-patient-drop-item {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.82rem;
  transition: background 0.1s ease;
}

.bill-patient-drop-item:hover {
  background: var(--bg-hover);
}

.bill-notes-section {
  padding: 10px 14px 14px;
}

.btn-add-notes-link {
  background: transparent;
  border: none;
  color: #6D28D9;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-add-notes-link:hover {
  text-decoration: underline;
}

.bill-notes-box {
  margin-top: 8px;
}

.bill-notes-box textarea {
  width: 100%;
  padding: 8px;
  font-size: 0.78rem;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-body);
  color: var(--text-main);
  box-sizing: border-box;
}

/* View Bill Screen Structure */
.view-bill-top-bar {
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-light);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 60px;
  z-index: 80;
}

.vb-bar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.view-bill-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.vb-bar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-config-print {
  background: transparent;
  border: none;
  color: #6D28D9;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.btn-config-print:hover {
  background: var(--bg-hover);
}

.preview-mode-tag {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
}

.view-bill-container {
  padding: 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.view-bill-grid {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 28px;
  align-items: start;
}

.view-bill-actions-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vb-action-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.vb-action-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #6D28D9;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vb-action-btn:hover {
  background: #F5F3FF;
  border-color: rgba(109, 40, 217, 0.2);
}

.vb-btn-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vb-chevron {
  font-size: 0.9rem;
  color: #6D28D9;
  font-weight: 800;
}

.vb-whatsapp-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.wa-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.wa-icon-bubble {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #E8F5E9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wa-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wa-title {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}

.wa-phone {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-main);
  font-family: 'JetBrains Mono', monospace;
}

.btn-wa-send {
  background: #25D366;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.btn-wa-send:hover {
  background: #20BA5A;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* Realistic Paper Receipt Sheet */
.bill-cum-receipt-sheet {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 36px 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  max-width: 780px;
  margin: 0 auto;
  color: #1E293B;
}

.bcr-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 16px;
}

.bcr-doctor-info .bcr-doc-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #6D28D9;
  margin: 0 0 2px;
}

.bcr-doctor-info .bcr-doc-qual,
.bcr-doctor-info .bcr-doc-spec {
  font-size: 0.76rem;
  color: #475569;
}

.bcr-clinic-info {
  text-align: right;
  max-width: 320px;
}

.bcr-clinic-info .bcr-clinic-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #6D28D9;
  margin: 0 0 4px;
}

.bcr-clinic-info .bcr-clinic-addr {
  font-size: 0.72rem;
  color: #475569;
  line-height: 1.35;
}

.bcr-title-bar {
  border-top: 1.5px solid #1E293B;
  border-bottom: 1.5px solid #1E293B;
  text-align: center;
  padding: 6px 0;
  margin-bottom: 16px;
}

.bcr-title-bar .bcr-heading {
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
  color: #1E293B;
  letter-spacing: 0.5px;
}

.bcr-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
  font-size: 0.78rem;
}

.bcr-meta-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bcr-meta-line {
  display: flex;
  gap: 8px;
}

.bcr-meta-line .lbl {
  width: 120px;
  color: #475569;
}

.bcr-meta-line .val {
  color: #1E293B;
}

.bcr-meta-line .val.status-paid-tag {
  color: #059669;
  font-weight: 700;
}

.bcr-table-wrap {
  margin-bottom: 20px;
}

.bcr-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.bcr-items-table th {
  background: #F8FAFC;
  border-top: 1px solid #1E293B;
  border-bottom: 1px solid #1E293B;
  padding: 8px 10px;
  font-weight: 700;
  color: #1E293B;
}

.bcr-items-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #E2E8F0;
  color: #1E293B;
}

.bcr-totals-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 28px;
}

.bcr-totals-box {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
}

.bcr-tot-line {
  display: flex;
  justify-content: space-between;
  color: #475569;
}

.bcr-tot-line .val {
  color: #1E293B;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

.bcr-payable-line {
  border-top: 1px solid #1E293B;
  padding-top: 6px;
  font-size: 0.88rem;
  color: #1E293B;
}

.bcr-payable-line strong {
  color: #1E293B;
}

.bcr-total-paid-line {
  border-top: 1px solid #E2E8F0;
  padding-top: 6px;
  font-size: 0.88rem;
  color: #059669;
}

.bcr-total-paid-line strong {
  color: #059669;
}

.bcr-qr-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid #E2E8F0;
}

.bcr-qr-caption {
  font-size: 0.74rem;
  color: #64748B;
}


/* ==========================================================================
   SCREEN 10: DR. DASHBOARD & FOLLOW UP (Exact Screenshot Layout)
   ========================================================================== */

.dr-dash-header-strip {
  padding: 16px 24px 8px;
}

.dr-dash-heading {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 2px;
}

.dr-dash-subheading {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0;
}

.followup-card-container {
  margin-top: 8px;
}

.followup-sub-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.followup-left-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.f-select-pill {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  background: var(--bg-card);
  cursor: pointer;
}

.dr-dash-tabs-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dr-pill-tab {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 6px 16px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.dr-pill-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.dr-pill-tab.active {
  background: #6D28D9;
  color: #FFFFFF;
  border-color: #6D28D9;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(109, 40, 217, 0.25);
}

.followup-right-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.f-search-box {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 4px 12px;
  background: var(--bg-card);
  width: 250px;
  transition: border-color 0.2s;
}

.f-search-box:focus-within {
  border-color: var(--primary);
}

.f-search-box input {
  border: none;
  background: transparent;
  width: 100%;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--text-main);
  outline: none;
}

.f-search-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.btn-availability-pill {
  background: var(--bg-card);
  color: #6D28D9;
  border: 1.5px solid #6D28D9;
  border-radius: 20px;
  padding: 6px 18px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-availability-pill:hover {
  background: #6D28D9;
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(109, 40, 217, 0.25);
}

.followup-table th {
  background: var(--bg-subtle);
  padding: 10px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-light);
}

.followup-table th.sorted-col {
  color: #6D28D9;
}

.sort-active-down {
  font-size: 0.65rem;
  margin-left: 2px;
}

.th-filter-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.th-filter-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
}

.followup-table td {
  padding: 11px 12px;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border-light);
}

.status-pill-overdue {
  background: #8E8E93;
  color: #FFFFFF;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-block;
}

.status-pill-due {
  background: #F59E0B;
  color: #FFFFFF;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-block;
}

.status-pill-upcoming {
  background: #3B82F6;
  color: #FFFFFF;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-block;
}

.btn-action-kebab {
  background: transparent;
  border: none;
  font-size: 1.15rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s;
}

.btn-action-kebab:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

.followup-table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 4px 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.f-pagination-mock {
  display: flex;
  gap: 4px;
}

.f-page-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.76rem;
  cursor: pointer;
  color: var(--text-main);
}

.f-page-btn.active {
  background: #6D28D9;
  color: #fff;
  border-color: #6D28D9;
  font-weight: 700;
}

/* Doctor Availability Modal Styling */
.availability-modal-box {
  width: 680px;
  max-width: 95vw;
}

.avail-section-intro {
  padding: 12px 20px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-light);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.avail-schedule-list {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.avail-day-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.day-label {
  width: 160px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
}

.day-slots-config {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slot-shift-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

.shift-name {
  width: 95px;
  font-weight: 600;
  color: var(--text-main);
}

.cap-tag {
  font-size: 0.72rem;
  color: var(--primary);
  font-weight: 600;
  margin-left: 6px;
}

.avail-params-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-light);
}

.param-box label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

/* Floating Action Popover for Follow-up */
.action-popover {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  min-width: 220px;
  overflow: hidden;
  animation: fadeIn 0.15s ease-out;
}

.popover-item {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s;
}

.popover-item:hover {
  background: var(--bg-hover);
  color: var(--primary);
}

/* ==========================================================================
   16. PHARMACY MANAGEMENT SUITE (DASHBOARD, MASTER, INWARDING & FEFO)
   ========================================================================== */

/* Sub-Navigation Tabs */
.pharmacy-subnav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 20px;
  overflow-x: auto;
}

.pharm-nav-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.pharm-nav-tab:hover {
  color: var(--text-main);
  background: var(--bg-hover);
}

.pharm-nav-tab.active {
  background: var(--bg-card);
  color: var(--primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.pharm-subview {
  animation: fadeIn 0.2s ease-out;
}

.pharm-subview.hidden {
  display: none !important;
}

/* KPI Summary Cards (Screenshot 1: 121, 0, 282, 6) */
.pharm-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.pharm-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.pharm-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pharm-kpi-card.kpi-purchase-inv {
  border-left: 5px solid #10B981;
}

.pharm-kpi-card.kpi-purchase-ret {
  border-left: 5px solid #F59E0B;
}

.pharm-kpi-card.kpi-sale-inv {
  border-left: 5px solid #6366F1;
}

.pharm-kpi-card.kpi-sale-ret {
  border-left: 5px solid #A855F7;
}

.pharm-kpi-card .kpi-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pharm-kpi-card .kpi-num {
  font-family: 'Outfit', sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.1;
}

.text-emerald { color: #10B981 !important; }
.text-amber { color: #F59E0B !important; }
.text-indigo { color: #6366F1 !important; }
.text-purple { color: #A855F7 !important; }

.bg-emerald { background-color: #10B981 !important; }
.bg-amber { background-color: #F59E0B !important; }
.bg-indigo { background-color: #6366F1 !important; }
.bg-purple { background-color: #A855F7 !important; }

.pharm-kpi-card .kpi-lbl {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.pharm-kpi-card .kpi-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  background: var(--bg-subtle);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pharm-kpi-card .kpi-add-btn:hover {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
}

.pharm-kpi-card .plus-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  line-height: 1;
}

/* Pharmacy Spline Chart Card (Screenshot 1) */
.pharm-chart-card {
  padding: 24px;
  margin-bottom: 24px;
}

.chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}

.chart-main-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-main);
}

.chart-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.chart-legend-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.chart-legend-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.chart-legend-badge .leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.pharm-chart-svg-container {
  width: 100%;
  height: 360px;
  position: relative;
  user-select: none;
}

.pharm-chart-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart-grid-line {
  stroke: var(--border-light);
  stroke-dasharray: 4, 4;
  stroke-opacity: 0.6;
}

.chart-axis-line {
  stroke: var(--border-light);
  stroke-width: 1.5;
}

.chart-axis-label {
  font-size: 11px;
  fill: var(--text-muted);
  font-weight: 500;
}

.chart-spline-path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-width 0.2s;
}

.chart-point {
  fill: #FFFFFF;
  stroke-width: 2.5;
  transition: r 0.15s, stroke-width 0.15s;
  cursor: pointer;
}

[data-theme="dark"] .chart-point {
  fill: #1A162E;
}

.chart-point.active,
.chart-point:hover {
  r: 5.5;
  stroke-width: 3.5;
}

.chart-hover-col {
  fill: transparent;
  cursor: pointer;
  transition: fill 0.15s;
}

.chart-hover-col:hover,
.chart-hover-col.active {
  fill: rgba(109, 40, 217, 0.04);
}

.chart-guideline {
  stroke: #94A3B8;
  stroke-width: 1.5;
  stroke-dasharray: 4, 4;
  pointer-events: none;
}

/* Floating Chart Tooltip (Screenshot 1 September Box) */
.pharm-chart-tooltip {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  z-index: 20;
  min-width: 165px;
  transition: left 0.15s ease-out, top 0.15s ease-out;
}

.pharm-chart-tooltip .tt-month-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}

.pharm-chart-tooltip .tt-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.78rem;
  padding: 2px 0;
  color: var(--text-muted);
}

.pharm-chart-tooltip .tt-item strong {
  color: var(--text-main);
  font-family: 'JetBrains Mono', monospace;
}

.pharm-chart-tooltip .tt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

/* Purchase Master (Screenshot 2) */
.pharm-master-topbar,
.pharm-edit-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.btn-text-back {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-text-back:hover {
  opacity: 0.8;
}

.master-type-selector select {
  font-weight: 600;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 6px 12px;
}

.pharm-master-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.pharm-master-header-row .master-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
}

.pharm-master-header-row .master-actions-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.master-invoices-table tbody tr {
  transition: background 0.15s;
}

.master-invoices-table tbody tr:hover {
  background: var(--bg-hover);
}

.btn-add-payment {
  padding: 4px 12px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  background: transparent;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-add-payment:hover {
  background: var(--primary);
  color: #FFFFFF;
}

.table-action-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: pointer;
  margin: 0 3px;
  font-size: 0.85rem;
  transition: all 0.15s;
}

.table-action-icon:hover {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
}

.master-pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
  font-size: 0.82rem;
  color: var(--text-muted);
}

.master-pagination-bar .entries-counter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.master-page-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-num-btn {
  padding: 4px 10px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.page-num-btn:hover {
  background: var(--bg-hover);
}

.page-num-btn.active {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
}

/* Edit / Inward Invoice (Screenshot 3) */
.supplier-banner-card {
  background: linear-gradient(135deg, rgba(91, 33, 182, 0.05) 0%, rgba(2, 132, 199, 0.05) 100%);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.sup-meta-col .sup-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sup-meta-col .sup-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
}

.sup-meta-col .sup-id-badge {
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--tatva-purple-subtle);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 4px;
}

.sup-meta-col .sup-contact-row {
  font-size: 0.84rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.sup-tax-col,
.sup-po-col {
  text-align: right;
}

.sup-tax-col .sup-label,
.sup-po-col .sup-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sup-tax-col .sup-val,
.sup-po-col .sup-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  color: var(--text-main);
  display: block;
  margin-top: 2px;
}

.inward-controls-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px 22px;
  margin-bottom: 16px;
}

.inward-input-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inward-input-group label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Inward Items Table */
.inward-items-table {
  width: 100%;
}

.inward-items-table th {
  font-size: 0.72rem;
  white-space: nowrap;
  padding: 10px 8px;
}

.inward-items-table td {
  padding: 8px;
  vertical-align: middle;
}

.inward-items-table .table-input-xs {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-main);
  font-size: 0.8rem;
}

.inward-items-table .pack-split {
  display: flex;
  align-items: center;
  gap: 4px;
}

.inward-items-table .pack-split input {
  width: 45px;
  text-align: center;
}

.inward-table-tools {
  padding: 12px 16px;
  border-top: 1px solid var(--border-light);
}

.inward-reconciliation-split {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-top: 20px;
  padding: 20px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-subtle);
  border-radius: 0 0 10px 10px;
}

.inward-left-notes {
  flex: 1;
}

.inward-note-box {
  background: var(--bg-card);
  border-left: 4px solid var(--primary);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
}

.inward-note-box .note-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}

.inward-note-box p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.inward-tax-summary-box {
  width: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
}

.inward-tax-summary-box .sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.inward-tax-summary-box .sum-row strong {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-main);
}

.inward-tax-summary-box .net-total-row {
  border-top: 1px solid var(--border-light);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 600;
  color: var(--text-main);
}

.inward-tax-summary-box .overall-disc-row {
  padding: 6px 0;
}

.inward-tax-summary-box .disc-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.inward-tax-summary-box .disc-input-wrap input {
  width: 50px;
  text-align: center;
}

.inward-tax-summary-box .grand-total-row {
  border-top: 2px solid var(--primary);
  margin-top: 8px;
  padding-top: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
}

.inward-tax-summary-box .grand-total-val {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary);
}

.inward-actions-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
}

@media (max-width: 1200px) {
  .pharm-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .inward-reconciliation-split {
    flex-direction: column;
  }
  .inward-tax-summary-box {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .pharm-kpi-row {
    grid-template-columns: 1fr;
  }
}

.patient-filter-chips {
  display: flex;
  gap: 6px;
  align-items: center;
}

.filter-chip {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-chip:hover {
  background: var(--tatva-purple-subtle);
  border-color: var(--primary);
  color: var(--primary);
}

.filter-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(107, 70, 193, 0.25);
}

.visit-pager {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-main);
  background: var(--bg-subtle);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
}

.visit-pager-btn {
  background: none;
  border: none;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0 4px;
  color: var(--primary);
  border-radius: 4px;
  transition: background 0.15s;
}

.visit-pager-btn:hover:not(:disabled) {
  background: var(--tatva-purple-subtle);
}

.visit-pager-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ======================================================== */
/* ADD NEW PATIENT SCREEN & FORM STYLES (TatvaCare UI)      */
/* ======================================================== */

.add-patient-card-container {
  max-width: 1040px;
  margin: 0 auto 40px auto;
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 24px 32px;
}

.form-section-card {
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 24px;
}

.form-section-card:last-of-type {
  border-bottom: none;
  padding-bottom: 8px;
}

.form-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.form-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.btn-toggle-section {
  background: none;
  border: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s;
}

.btn-toggle-section:hover {
  color: var(--primary);
}

.personal-details-grid {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 32px;
  align-items: flex-start;
}

@media (max-width: 860px) {
  .personal-details-grid {
    grid-template-columns: 1fr;
  }
}

.form-row-flex {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  align-items: flex-start;
}

@media (max-width: 600px) {
  .form-row-flex {
    flex-direction: column;
    gap: 12px;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.req-star {
  color: #ef4444;
  margin-left: 2px;
  font-weight: 700;
}

.tatva-input,
.tatva-select {
  height: 42px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0 14px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text-main);
  background: var(--bg-card);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.tatva-input:focus,
.tatva-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--tatva-purple-subtle);
}

.gender-segmented-group {
  display: flex;
  height: 42px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-subtle);
}

.gender-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border-right: 1px solid var(--border-light);
}

.gender-btn:last-child {
  border-right: none;
}

.gender-btn:hover {
  background: var(--tatva-purple-subtle);
  color: var(--primary);
}

.gender-btn.active {
  background: var(--primary);
  color: #fff;
}

.avatar-upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
}

.avatar-preview-circle {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px dashed #cbd5e1;
  transition: all 0.2s;
}

[data-theme="dark"] .avatar-preview-circle {
  background: #1e293b;
  border-color: #334155;
}

.avatar-preview-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-upload-profile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1.5px solid var(--primary);
  border-radius: 8px;
  background: transparent;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-upload-profile:hover {
  background: var(--tatva-purple-subtle);
}

.form-bottom-action-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  margin-top: 12px;
  border-top: 1px solid var(--border-light);
}

/* ========================================================================== */
/* SCREEN: DATA ANALYTICS & OPD INSIGHTS (Modular, rem/em/%, High-Fidelity)  */
/* ========================================================================== */

#view-analytics {
  display: none;
  flex-direction: column;
  background: var(--bg-body, #f8fafc);
  min-height: calc(100vh - 3.75rem);
}

#view-analytics.active {
  display: flex;
}

/* Top Navigation Bar in Analytics */
.analytics-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: var(--bg-card, #ffffff);
  border-bottom: 0.0625rem solid var(--border-light, #e2e8f0);
}

.analytics-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-icon-back {
  background: transparent;
  border: 0.0625rem solid var(--border-light, #cbd5e1);
  border-radius: 0.5rem;
  width: 2.125rem;
  height: 2.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-main, #1e293b);
  transition: all 0.15s ease;
}

.btn-icon-back:hover {
  background: var(--bg-subtle, #f1f5f9);
  border-color: var(--primary, #6366f1);
  color: var(--primary, #6366f1);
}

.analytics-page-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  margin: 0;
}

.icon-btn-round {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 0.0625rem solid var(--border-light, #cbd5e1);
  background: var(--bg-card, #ffffff);
  color: var(--text-muted, #64748b);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-btn-round:hover {
  background: var(--bg-subtle, #f1f5f9);
  color: var(--primary, #6366f1);
  border-color: var(--primary, #6366f1);
  transform: rotate(45deg);
}

/* Purple Hero Banner (OPD Overview / OPD Appointments) */
.analytics-banner-hero {
  background: linear-gradient(135deg, #2b123e 0%, #3a1555 50%, #200d30 100%);
  padding: 1.5rem 2rem;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.analytics-banner-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 22rem;
  background: radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.analytics-banner-title {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: #ffffff;
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
}

/* Main Content Layout with Left Sub-sidebar */
.analytics-layout-grid {
  display: flex;
  flex: 1;
  padding: 1.125rem 1.5rem 2.5rem;
  gap: 1.25rem;
  background: var(--bg-body, #f8fafc);
}

/* Sub-sidebar Navigation */
.analytics-sub-sidebar {
  width: 5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-top: 0.25rem;
  flex-shrink: 0;
}

.analytics-nav-pill {
  width: 4.75rem;
  height: 4rem;
  border-radius: 0.875rem;
  border: 0.0625rem solid transparent;
  background: var(--bg-card, #ffffff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.04);
}

.analytics-nav-pill:hover {
  background: var(--bg-subtle, #f1f5f9);
  border-color: rgba(99, 102, 241, 0.2);
  transform: translateY(-0.0625rem);
}

.analytics-nav-pill.active {
  background: #4f46e5;
  border-color: #4338ca;
  box-shadow: 0 0.25rem 0.75rem rgba(79, 70, 229, 0.35);
}

.analytics-nav-pill .an-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.analytics-nav-pill.active .an-icon {
  filter: drop-shadow(0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3));
}

.analytics-nav-pill .an-label {
  font-size: 0.70rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 4.25rem;
}

.analytics-nav-pill.active .an-label {
  color: #ffffff !important;
}

/* Analytics Main Card */
.analytics-main-card {
  flex: 1;
  background: var(--bg-card, #ffffff);
  border: 0.0625rem solid var(--border-light, #e2e8f0);
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.03);
}

/* Filter Controls Row */
.analytics-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-left-group {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.tatva-select-pill {
  padding: 0.55rem 1.25rem 0.55rem 1rem;
  border-radius: 2rem;
  border: 0.0625rem solid var(--border-light, #cbd5e1);
  background: var(--bg-card, #ffffff);
  color: var(--text-main, #1e293b);
  font-size: 0.88rem;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.02);
}

.tatva-select-pill:focus,
.tatva-select-pill:hover {
  border-color: var(--primary, #6366f1);
  box-shadow: 0 0 0 0.1875rem rgba(99, 102, 241, 0.12);
}

.clinic-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.125rem;
  border-radius: 2rem;
  background: var(--bg-subtle, #f8fafc);
  border: 0.0625rem solid var(--border-light, #e2e8f0);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  letter-spacing: 0.02em;
}

.clinic-badge-pill .info-dot-icon {
  font-size: 0.82rem;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
}

.btn-date-range-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1.25rem;
  border-radius: 2rem;
  border: 0.09375rem solid #6366f1;
  background: var(--bg-card, #ffffff);
  color: var(--text-main, #1e293b);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 0.0625rem 0.1875rem rgba(99, 102, 241, 0.08);
}

.btn-date-range-picker:hover {
  background: rgba(99, 102, 241, 0.04);
  box-shadow: 0 0.1875rem 0.5rem rgba(99, 102, 241, 0.15);
}

.btn-date-range-picker svg {
  color: #6366f1;
}

.btn-date-range-picker .chevron-down {
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  transition: transform 0.2s ease;
}

/* Date Range Popover (Screenshots 1 & 2) */
.date-range-popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(40rem, 95vw);
  background: var(--bg-card, #ffffff);
  border: 0.0625rem solid var(--border-light, #cbd5e1);
  border-radius: 0.875rem;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.14), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
  z-index: 1200;
  overflow: hidden;
  animation: fadeInDown 0.15s ease;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.date-popover-body {
  display: flex;
}

.preset-options-col {
  width: 8.75rem;
  border-right: 0.0625rem solid var(--border-light, #f1f5f9);
  padding: 1rem 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--bg-subtle, #fbfcfe);
}

.preset-item {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0.55rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-main, #334155);
  cursor: pointer;
  transition: all 0.12s ease;
}

.preset-item:hover {
  background: #f1f5f9;
  color: var(--primary, #6366f1);
}

.preset-item.active {
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 700;
}

.dual-calendar-wrap {
  flex: 1;
  padding: 1rem 1.25rem;
}

.calendar-header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

.cal-nav-btn {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  border: 0.0625rem solid var(--border-light, #e2e8f0);
  background: var(--bg-card, #ffffff);
  color: var(--text-main, #334155);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.cal-nav-btn:hover {
  background: var(--bg-subtle, #f1f5f9);
  border-color: #cbd5e1;
}

.cal-month-titles {
  display: flex;
  justify-content: space-around;
  flex: 1;
  padding: 0 1rem;
}

.cal-month-titles strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main, #1e293b);
}

.dual-month-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.375rem;
}

.single-month {
  display: flex;
  flex-direction: column;
}

.month-day-names {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 0.5rem;
}

.month-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 0.25rem;
}

.month-dates span {
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.80rem;
  font-weight: 500;
  color: var(--text-main, #334155);
  cursor: pointer;
  border-radius: 50%;
  user-select: none;
  transition: all 0.12s ease;
}

.month-dates span.empty {
  cursor: default;
  background: transparent !important;
}

.month-dates span:not(.empty):hover {
  background: #f1f5f9;
}

/* In Range highlight */
.month-dates span.in-range {
  background: #eef2ff;
  color: #4f46e5;
  border-radius: 0;
  font-weight: 600;
}

.month-dates span.in-range.start-range {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-radius: 50% 0 0 50% !important;
  font-weight: 700;
}

.month-dates span.in-range.end-range {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-radius: 0 50% 50% 0 !important;
  font-weight: 700;
}

.month-dates span.in-range.start-range.end-range {
  border-radius: 50% !important;
}

/* Date Popover Footer */
.date-popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-top: 0.0625rem solid var(--border-light, #f1f5f9);
  background: var(--bg-card, #ffffff);
}

.btn-clear-date {
  background: none;
  border: none;
  color: #f59e0b;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.375rem 0.625rem;
}

.btn-clear-date:hover {
  text-decoration: underline;
}

.popover-btn-group {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

/* Section Header Bar */
.analytics-section-block {
  margin-bottom: 1.5rem;
}

.section-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.indicator-bar {
  width: 0.25rem;
  height: 1rem;
  background: #4f46e5;
  border-radius: 0.125rem;
}

.section-heading {
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--text-main, #0f172a);
  margin: 0;
}

.count-tag {
  background: var(--bg-subtle, #f1f5f9);
  color: var(--text-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 0.75rem;
}

/* Key Metrics Responsive Grid (4-columns) */
.metrics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 64rem) {
  .metrics-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 40rem) {
  .metrics-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.kpi-metric-card {
  background: var(--bg-card, #ffffff);
  border: 0.0625rem solid var(--border-light, #f1f5f9);
  border-radius: 0.875rem;
  padding: 1.125rem 1.25rem;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.kpi-metric-card:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.06);
  border-color: rgba(99, 102, 241, 0.2);
}

.kpi-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.kpi-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.kpi-title .info-dot {
  font-size: 0.78rem;
  color: #94a3b8;
  cursor: pointer;
}

.kpi-icon-bubble {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #f3e8ff;
  color: #9333ea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.kpi-value {
  margin-top: 0.625rem;
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text-main, #0f172a);
  letter-spacing: -0.02em;
}

.kpi-value.highlight-drug {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main, #0f172a);
}

/* Trend Badges (e.g. ↓ 70% vs previous period) */
.analytics-trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  margin-top: 0.5rem;
  padding: 0.2em 0.55em;
  border-radius: 1em;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  width: fit-content;
}

.analytics-trend-badge.down {
  background: rgba(244, 63, 94, 0.1);
  color: #e11d48;
}

.analytics-trend-badge.up {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

/* Insights 2x2 Grid */
.insights-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (max-width: 64rem) {
  .insights-charts-grid {
    grid-template-columns: 1fr;
  }
}

.insight-chart-card {
  background: var(--bg-card, #ffffff);
  border: 0.0625rem solid var(--border-light, #f1f5f9);
  border-radius: 0.875rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
}

.insight-chart-card:hover {
  box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.06);
  border-color: rgba(99, 102, 241, 0.2);
}

.chart-card-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.125rem;
}

.chart-icon-bubble {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 0.5rem;
  background: #ede9fe;
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
}

.chart-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main, #1e293b);
}

.chart-title .info-dot {
  font-size: 0.78rem;
  color: #94a3b8;
  margin-left: 0.25rem;
  cursor: pointer;
}

.donut-chart-flex {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 1.5rem;
}

.svg-donut-wrap {
  width: 8.75rem;
  height: 8.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.chart-legend-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 10.625rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.80rem;
  color: var(--text-main, #334155);
}

.legend-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-footnote {
  font-size: 0.70rem;
  font-style: italic;
  color: var(--text-muted, #94a3b8);
  margin-top: 0.375rem;
}

/* SVG Bar Charts (Screenshots 2 & 3) */
.bar-chart-wrap {
  width: 100%;
  height: 12.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 0.5rem;
}

.bar-chart-wrap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bar-chart-legend {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.78rem;
  color: var(--text-main, #334155);
  margin-top: 0.5rem;
  padding-left: 1.5rem;
}

/* Subview transitions */
.analytics-subview-panel {
  display: block;
  animation: fadeInDown 0.2s ease;
}

.analytics-subview-panel.hidden {
  display: none !important;
}

/* Dark Theme Adaptations for Data Analytics */
[data-theme="dark"] #view-analytics {
  background: var(--bg-body, #0b0f17);
}

[data-theme="dark"] .analytics-top-header {
  background: #111827;
  border-bottom-color: #1f2937;
}

[data-theme="dark"] .analytics-main-card {
  background: #111827;
  border-color: #1f2937;
}

[data-theme="dark"] .analytics-nav-pill {
  background: #1f2937;
  border-color: #374151;
}

[data-theme="dark"] .analytics-nav-pill.active {
  background: #6366f1;
  border-color: #4f46e5;
}

[data-theme="dark"] .kpi-metric-card,
[data-theme="dark"] .insight-chart-card {
  background: #161e2e;
  border-color: #1f2937;
}

[data-theme="dark"] .kpi-icon-bubble {
  background: #2e1065;
  color: #c084fc;
}

[data-theme="dark"] .date-range-popover {
  background: #111827;
  border-color: #374151;
}

[data-theme="dark"] .preset-options-col {
  background: #0f172a;
  border-right-color: #1f2937;
}

[data-theme="dark"] .preset-item {
  color: #cbd5e1;
}

[data-theme="dark"] .preset-item.active {
  background: #1e1b4b;
  color: #818cf8;
}

[data-theme="dark"] .date-popover-footer {
  background: #111827;
  border-top-color: #1f2937;
}

[data-theme="dark"] .bar-chart-wrap svg line {
  stroke: rgba(255, 255, 255, 0.08) !important;
}

/* Clear All Date Filter Button (Screenshot 1) */
.btn-analytics-clear-all {
  background: transparent;
  border: none;
  color: #ea580c;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: opacity 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn-analytics-clear-all:hover {
  color: #c2410c;
  opacity: 0.85;
}

[data-theme="dark"] .btn-analytics-clear-all {
  color: #fb923c;
}

[data-theme="dark"] .btn-analytics-clear-all:hover {
  color: #fdba74;
}

/* Empty / No Data Value in KPI Cards (Screenshot 1) */
.empty-val-text {
  font-style: italic;
  color: var(--text-muted, #94a3b8);
  font-weight: 500;
  font-size: 1.35rem;
}

/* Care Horizontal Sub-Navigation Tabs (Screenshots 1 - 11) */
.care-sub-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 0.0625rem solid var(--border-light, #f1f5f9);
  padding: 0 0.5rem 0.5rem 0.5rem;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  white-space: nowrap;
}

.care-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.25rem;
  background: none;
  border: none;
  border-bottom: 0.125rem solid transparent;
  color: var(--text-muted, #64748b);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.care-nav-tab:hover {
  color: var(--primary, #6366f1);
}

.care-nav-tab.active {
  color: var(--primary, #6366f1);
  border-bottom-color: var(--primary, #6366f1);
}

.care-tab-icon {
  font-size: 0.95rem;
}

/* Care Tab Content Panels */
.care-tab-panel {
  display: block;
}

.care-tab-panel.hidden {
  display: none !important;
}

/* Reports Tab Header & OPD/IPD Toggle (Screenshot 13) */
.reports-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.report-type-toggle {
  display: inline-flex;
  background: var(--bg-surface-secondary, #f1f5f9);
  border-radius: 0.5rem;
  padding: 0.2rem;
  gap: 0.25rem;
}

.report-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border: none;
  background: none;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  transition: all 0.15s ease;
}

.report-toggle-btn.active {
  background: var(--bg-card, #ffffff);
  color: var(--primary, #6366f1);
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.06);
}

/* Report Cards Grid (Screenshot 13) */
.report-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

@media (max-width: 75rem) {
  .report-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 48rem) {
  .report-cards-grid {
    grid-template-columns: 1fr;
  }
}

.report-card {
  background: var(--bg-card, #ffffff);
  border: 0.0625rem solid var(--border-light, #f1f5f9);
  border-radius: 0.875rem;
  padding: 1.25rem 1.25rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-height: 9.5rem;
}

.report-card:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}

.report-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.report-card-info {
  flex: 1;
}

.report-card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  margin-bottom: 0.25rem;
}

.report-card-desc {
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
  line-height: 1.35;
}

.report-icon-bubble {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.btn-report-download {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 0.0625rem solid #6366f1;
  color: #6366f1;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  margin-top: 0.75rem;
}

.btn-report-download:hover {
  background: #6366f1;
  color: #ffffff;
}

[data-theme="dark"] .care-sub-nav {
  border-bottom-color: #1f2937;
}

[data-theme="dark"] .care-nav-tab {
  color: #94a3b8;
}

[data-theme="dark"] .care-nav-tab.active {
  color: #818cf8;
  border-bottom-color: #818cf8;
}

[data-theme="dark"] .report-type-toggle {
  background: #111827;
}

[data-theme="dark"] .report-toggle-btn.active {
  background: #1f2937;
  color: #818cf8;
}

[data-theme="dark"] .report-card {
  background: #161e2e;
  border-color: #1f2937;
}

[data-theme="dark"] .report-card-title {
  color: #f8fafc;
}

[data-theme="dark"] .report-card-desc {
  color: #94a3b8;
}

/* ==========================================================================
   21. PHARMACY MODULES QUICK NAV, REPORTS & MEDICINE MASTER (TatvaCare Replicas)
   ========================================================================== */

/* 5 Pharmacy Sub-Module Quick Nav Cards (Screenshot 2) */
.pharm-modules-nav-card {
  margin-top: 1.5rem;
  padding: 1.75rem 1.5rem;
  background: var(--bg-card);
  border: 0.0625rem solid var(--border-light);
  border-radius: 1rem;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.04);
}

.pharm-modules-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

@media (max-width: 62rem) {
  .pharm-modules-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 36rem) {
  .pharm-modules-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pharm-module-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0.75rem;
  border-radius: 0.875rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent;
  user-select: none;
}

.pharm-module-item:hover {
  background: rgba(92, 84, 212, 0.05);
  transform: translateY(-0.25rem);
}

.pharm-mod-icon-circle {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: #f1f0fd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.875rem;
  transition: all 0.25s ease;
  box-shadow: 0 0.25rem 0.75rem rgba(92, 84, 212, 0.08);
}

.pharm-module-item:hover .pharm-mod-icon-circle {
  background: #5c54d4;
  box-shadow: 0 0.5rem 1.25rem rgba(92, 84, 212, 0.35);
}

.pharm-module-item:hover .pharm-mod-icon-circle svg {
  stroke: #ffffff;
}

.pharm-module-item:hover .pharm-mod-icon-circle svg circle {
  fill: #ffffff;
}

.pharm-mod-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #374151;
  letter-spacing: 0.01em;
}

.pharm-module-item:hover .pharm-mod-label {
  color: #5c54d4;
}

/* Pharmacy Reports & Masters Topbar */
.pharm-reports-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 0.0625rem solid var(--border-light);
}

.pharm-rep-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.bread-clinic {
  font-weight: 700;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bread-sep {
  color: #9ca3af;
}

.bread-doc {
  color: #6b7280;
  font-weight: 600;
}

.bread-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.bread-active {
  color: #111827;
  font-weight: 700;
}

.pharm-rep-heading {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin: 0;
}

.pharm-rep-quick-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Reports & Masters Sub-nav Pills (Exact TatvaCare styling) */
.pharm-reports-pills-bar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  scrollbar-width: thin;
}

.pharm-rep-pill,
.pharm-master-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  border-radius: 2rem;
  border: 0.0625rem solid var(--border-light);
  background: var(--bg-card);
  color: #4b5563;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.pharm-rep-pill:hover,
.pharm-master-pill:hover {
  background: var(--bg-hover);
  color: var(--text-main);
  border-color: #cbd5e1;
}

.pharm-rep-pill.active,
.pharm-master-pill.active {
  background: #5c54d4;
  color: #ffffff;
  border-color: #5c54d4;
  box-shadow: 0 0.25rem 0.75rem rgba(92, 84, 212, 0.28);
}

.rep-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}

.pharm-rep-pill.active .rep-pill-badge,
.pharm-master-pill.active .rep-pill-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.rep-pill-badge.badge-red {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.pharm-rep-pill.active .rep-pill-badge.badge-red {
  background: #dc2626;
  color: #ffffff;
}

.rep-pill-badge.badge-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.pharm-rep-pill.active .rep-pill-badge.badge-amber {
  background: #d97706;
  color: #ffffff;
}

/* KPI Insight Strip for Expiring Soon */
.pharm-exp-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 64rem) {
  .pharm-exp-stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 36rem) {
  .pharm-exp-stats-strip {
    grid-template-columns: 1fr;
  }
}

.exp-stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--bg-card);
  border: 0.0625rem solid var(--border-light);
  border-radius: 0.875rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.02);
  transition: transform 0.15s ease;
}

.exp-stat-card:hover {
  transform: translateY(-0.125rem);
}

.exp-stat-card.border-red {
  border-left: 0.25rem solid #ef4444;
}

.exp-stat-card.border-amber {
  border-left: 0.25rem solid #f59e0b;
}

.exp-stat-card.border-blue {
  border-left: 0.25rem solid #3b82f6;
}

.exp-stat-card.border-purple {
  border-left: 0.25rem solid #8b5cf6;
}

.exp-stat-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.exp-stat-info {
  display: flex;
  flex-direction: column;
}

.exp-stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.exp-stat-val {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0.15rem 0;
}

.exp-stat-sub {
  font-size: 0.72rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}

/* Badges for Expiry Urgency */
.badge-days-critical {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 0.0625rem solid rgba(239, 68, 68, 0.3);
}

.badge-days-critical::before {
  content: "●";
  font-size: 0.7rem;
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

.badge-days-warning {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  border: 0.0625rem solid rgba(245, 158, 11, 0.3);
}

.badge-days-safe {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
  border: 0.0625rem solid rgba(59, 130, 246, 0.25);
}

.badge-stock-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 0.82rem;
  background: #f3f4f6;
  color: #1f2937;
}

.badge-stock-pill.low {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  font-weight: 800;
}

.table-pharm-expiring tbody tr:hover {
  background-color: rgba(92, 84, 212, 0.03);
}

.filter-btn-group {
  display: inline-flex;
  background: #f3f4f6;
  padding: 0.25rem;
  border-radius: 0.625rem;
  gap: 0.25rem;
}

.filter-pill-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-pill-btn:hover {
  color: #111827;
}

.filter-pill-btn.active {
  background: #ffffff;
  color: #5c54d4;
  font-weight: 700;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08);
}

/* Dark mode overrides for new pharmacy components */
[data-theme="dark"] .pharm-modules-nav-card {
  background: #1e2230;
  border-color: #2d3348;
}

[data-theme="dark"] .pharm-mod-icon-circle {
  background: #282d42;
}

[data-theme="dark"] .pharm-module-item:hover {
  background: rgba(129, 140, 248, 0.08);
}

[data-theme="dark"] .pharm-mod-label {
  color: #e2e8f0;
}

[data-theme="dark"] .pharm-rep-pill,
[data-theme="dark"] .pharm-master-pill {
  background: #1e2230;
  border-color: #2d3348;
  color: #94a3b8;
}

[data-theme="dark"] .pharm-rep-pill.active,
[data-theme="dark"] .pharm-master-pill.active {
  background: #6366f1;
  color: #ffffff;
  border-color: #6366f1;
}

[data-theme="dark"] .exp-stat-card {
  background: #1e2230;
  border-color: #2d3348;
}

[data-theme="dark"] .filter-btn-group {
  background: #161a26;
}

[data-theme="dark"] .filter-pill-btn {
  color: #94a3b8;
}

[data-theme="dark"] .filter-pill-btn.active {
  background: #282d42;
  color: #818cf8;
}

/* ==========================================================================
   22. START WALK-IN CONSULTATION SCREEN (tatvapractice.tatvacare.in/walk_in_consultation)
   ========================================================================== */

.walkin-hero-bar {
  background: linear-gradient(135deg, #361752 0%, #482068 100%);
  padding: 1.125rem 1.5rem;
  border-radius: 0.75rem 0.75rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: #ffffff;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
}

.walkin-back-arrow-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  transition: background 0.15s ease, transform 0.1s ease;
  padding: 0;
}

.walkin-back-arrow-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateX(-0.125rem);
}

.walkin-header-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
}

.walkin-main-card {
  border-radius: 0 0 0.75rem 0.75rem;
  padding: 2.25rem 2rem 2.5rem 2rem;
  background: var(--bg-card);
  border: 0.0625rem solid var(--border-light);
  border-top: none;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.04);
}

.walkin-search-section {
  position: relative;
  max-width: 58rem;
}

.walkin-input-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.625rem;
  letter-spacing: 0.01em;
}

.walkin-input-wrapper {
  position: relative;
  width: 100%;
}

.walkin-input-prefix-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.walkin-input-field {
  width: 100%;
  height: 3.125rem;
  padding: 0 2.75rem 0 3rem;
  font-size: 1rem;
  border: 0.0625rem solid #d1d5db;
  border-radius: 0.5rem;
  background: var(--bg-card);
  color: var(--text-main);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}

.walkin-input-field:focus {
  border-color: #5c54d4;
  box-shadow: 0 0 0 0.2rem rgba(92, 84, 212, 0.18);
}

.walkin-clear-btn {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.walkin-clear-btn:hover {
  color: #4b5563;
}

/* Patient Search Dropdown */
.walkin-dropdown-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.375rem);
  background: var(--bg-card);
  border: 0.0625rem solid var(--border-light);
  border-radius: 0.625rem;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
  z-index: 100;
  max-height: 24rem;
  overflow-y: auto;
}

.walkin-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 1rem;
  background: #f8fafc;
  border-bottom: 0.0625rem solid var(--border-light);
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
}

.walkin-patient-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-bottom: 0.0625rem solid #f1f5f9;
  cursor: default;
  transition: background-color 0.12s ease;
  gap: 1rem;
}

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

.walkin-patient-row:hover {
  background-color: #f8fafc;
}

.walkin-row-left {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.walkin-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: #374151;
}

.walkin-cell-icon {
  color: #9ca3af;
  flex-shrink: 0;
}

.walkin-cell-name {
  font-weight: 600;
  color: #111827;
  min-width: 14rem;
}

.walkin-cell-name strong {
  color: #111827;
}

.walkin-cell-name .walkin-demog {
  color: #6b7280;
  font-weight: 500;
  font-size: 0.85rem;
  margin-left: 0.25rem;
}

.walkin-cell-phone {
  color: #4b5563;
  font-weight: 500;
  min-width: 9rem;
}

.walkin-cell-id {
  color: #4b5563;
  font-family: monospace;
  font-weight: 600;
  font-size: 0.85rem;
  min-width: 7rem;
}

.walkin-row-right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.btn-walkin-details {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border-radius: 0.375rem;
  border: 0.0625rem solid #6366f1;
  background: #ffffff;
  color: #4f46e5;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-walkin-details:hover {
  background: #eef2ff;
  border-color: #4338ca;
  color: #3730a3;
}

.btn-walkin-consult {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1.15rem;
  border-radius: 0.375rem;
  border: 0.0625rem solid #4338ca;
  background: #4338ca;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 0.125rem 0.375rem rgba(67, 56, 202, 0.25);
}

.btn-walkin-consult:hover {
  background: #3730a3;
  border-color: #3730a3;
}

/* Add New Patient Button */
.walkin-btn-row {
  margin-top: 1.25rem;
}

.btn-walkin-add-patient {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid #7c3aed;
  background: #ffffff;
  color: #5c54d4;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 0.125rem 0.375rem rgba(124, 58, 237, 0.06);
}

.btn-walkin-add-patient:hover {
  background: #f5f3ff;
  border-color: #6d28d9;
  transform: translateY(-0.0625rem);
}

.plus-icon-blue {
  font-size: 1.25rem;
  font-weight: 700;
  color: #5c54d4;
  line-height: 1;
}

/* Quick Pick Section */
.walkin-quick-pick-box {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 0.0625rem solid var(--border-light);
}

.quick-pick-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.875rem;
}

.quick-pick-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #10b981;
}

.quick-pick-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.quick-patient-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.45rem 0.875rem;
  border-radius: 2rem;
  border: 0.0625rem solid var(--border-light);
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-patient-chip:hover {
  background: rgba(92, 84, 212, 0.08);
  border-color: #5c54d4;
}

.quick-chip-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #e0e7ff;
  color: #4338ca;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
}

.quick-chip-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.quick-chip-id {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Dark theme overrides for walk-in */
[data-theme="dark"] .walkin-main-card {
  background: #1e2230;
  border-color: #2d3348;
}

[data-theme="dark"] .walkin-input-field {
  background: #161a26;
  border-color: #2d3348;
  color: #f8fafc;
}

[data-theme="dark"] .walkin-dropdown-panel {
  background: #1e2230;
  border-color: #2d3348;
}

[data-theme="dark"] .walkin-dropdown-header {
  background: #161a26;
  border-bottom-color: #2d3348;
  color: #94a3b8;
}

[data-theme="dark"] .walkin-patient-row {
  border-bottom-color: #2d3348;
}

[data-theme="dark"] .walkin-patient-row:hover {
  background: rgba(129, 140, 248, 0.1);
}

[data-theme="dark"] .btn-walkin-add-patient {
  background: #1e2230;
  border-color: #6366f1;
  color: #818cf8;
}

[data-theme="dark"] .quick-patient-chip {
  background: #161a26;
  border-color: #2d3348;
}

/* ==========================================================================
   23. APPOINTMENTS WEEKLY CALENDAR VIEW (tatvapractice.tatvacare.in)
   ========================================================================== */

.cal-status-pills-bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  overflow-x: auto;
  padding-bottom: 0;
  margin-bottom: 1.25rem;
  border-bottom: 0.0625rem solid #e5e7eb;
}

.cal-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.25rem 0.75rem 0.25rem;
  border: none;
  border-bottom: 0.1875rem solid transparent;
  background: transparent;
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  position: relative;
  margin-bottom: -0.0625rem;
}

.cal-status-pill:hover {
  color: #1e293b;
}

.cal-status-pill.active {
  background: transparent;
  color: #5c54d4;
  border-bottom-color: #5c54d4;
  font-weight: 700;
  box-shadow: none;
}

.cal-pill-num {
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 1rem;
  background: #f1f5f9;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.15rem;
}

.cal-status-pill.active .cal-pill-num {
  background: #ede9fe;
  color: #5c54d4;
}

/* Calendar Toolbar */
.cal-toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.cal-search-wrap {
  position: relative;
  flex: 1;
  max-width: 24rem;
}

.cal-search-svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}

.cal-search-input {
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem 0 2.375rem;
  font-size: 0.85rem;
  border: 0.0625rem solid var(--border-light);
  border-radius: 0.5rem;
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  transition: border-color 0.15s;
}

.cal-search-input:focus {
  border-color: #5c54d4;
}

.cal-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cal-view-type-toggle {
  display: inline-flex;
  background: #f1f5f9;
  padding: 0.2rem;
  border-radius: 0.5rem;
  gap: 0.2rem;
}

.cal-vbtn {
  padding: 0.3rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cal-vbtn.active {
  background: #ffffff;
  color: #1e293b;
  font-weight: 700;
  box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.06);
}

.cal-date-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0.0625rem solid var(--border-light);
  border-radius: 0.5rem;
  padding: 0.2rem 0.4rem;
  background: var(--bg-card);
}

.cal-nav-arrow {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  padding: 0 0.4rem;
  line-height: 1;
}

.cal-nav-arrow:hover {
  color: #1e293b;
}

.cal-date-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
  padding: 0.15rem 0.4rem;
}

.cal-tool-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--border-light);
  background: var(--bg-card);
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cal-tool-icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

/* Doctor Availability Banner */
.cal-doc-availability-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  background: #f8fafc;
  border: 0.0625rem solid #e2e8f0;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  color: #475569;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cal-avail-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.strip-pulse-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.2);
}

.cal-avail-right {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.78rem;
}

.cal-legend-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.25rem;
}

.dot-urgent { background: #ef4444; }
.dot-confirmed { background: #10b981; }
.dot-available { background: #3b82f6; }

/* Weekly Matrix Grid */
.cal-grid-matrix-container {
  border: 0.0625rem solid #e2e8f0;
  border-radius: 0.625rem;
  overflow-x: auto;
  background: #ffffff;
}

.cal-table-grid {
  width: 100%;
  border-collapse: collapse;
  min-width: 55rem;
  table-layout: fixed;
}

.cal-table-grid th,
.cal-table-grid td {
  border-right: 0.0625rem solid #f1f5f9;
  border-bottom: 0.0625rem solid #f1f5f9;
  padding: 0.35rem 0.45rem;
  vertical-align: top;
}

.cal-table-grid th:last-child,
.cal-table-grid td:last-child {
  border-right: none;
}

.cal-table-grid thead th {
  background: #fafafa;
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 600;
}

.cal-th-tz {
  width: 5.5rem;
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 700;
}

.cal-th-day {
  position: relative;
}

.cal-th-day.is-active-day {
  background: #f0f7ff;
  color: #1d4ed8;
}

.cal-th-day.is-active-day::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.2rem;
  background: #3b82f6;
}

.cal-day-name {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cal-day-num {
  font-size: 1.1rem;
  font-weight: 800;
  margin-top: 0.15rem;
  display: inline-block;
}

.cal-day-badge {
  font-size: 0.68rem;
  background: #dbeafe;
  color: #1e40af;
  padding: 0.05rem 0.35rem;
  border-radius: 0.75rem;
  margin-left: 0.25rem;
  vertical-align: middle;
}

/* Time column */
.cal-td-time {
  background: #fafafa;
  text-align: right;
  padding-right: 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  vertical-align: middle;
}

/* Patient card inside slot */
.cal-slot-card {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.cal-slot-card:hover {
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08);
}

.cal-slot-card.urgent {
  background: #fee2e2;
  border: 0.0625rem solid #fca5a5;
  color: #991b1b;
}

.cal-slot-card.confirmed {
  background: #ecfdf5;
  border: 0.0625rem solid #a7f3d0;
  color: #065f46;
}

.cal-card-time {
  font-weight: 800;
  font-size: 0.75rem;
}

.cal-card-icon {
  font-size: 0.75rem;
  line-height: 1;
}

.cal-card-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Available Slot Chip */
.cal-slot-avail-btn {
  display: block;
  width: 100%;
  padding: 0.25rem 0.35rem;
  margin-bottom: 0.25rem;
  background: #ffffff;
  border: 0.0625rem dashed #cbd5e1;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cal-slot-avail-btn:hover {
  background: #f0fdf4;
  border-color: #10b981;
  color: #059669;
  font-weight: 700;
}

/* Off duty cell */
.cal-td-offduty {
  background: #fafafa;
  color: #cbd5e1;
  text-align: center;
  font-size: 0.72rem;
  padding: 0.5rem 0.25rem;
}

/* Dark mode for Calendar */
[data-theme="dark"] .cal-status-pill {
  background: #1e2230;
  border-color: #2d3348;
  color: #94a3b8;
}

[data-theme="dark"] .cal-status-pill.active {
  background: #282d42;
  color: #818cf8;
  border-color: #6366f1;
}

[data-theme="dark"] .cal-pill-num {
  background: #161a26;
  color: #94a3b8;
}

[data-theme="dark"] .cal-search-input {
  background: #161a26;
  border-color: #2d3348;
  color: #f8fafc;
}

[data-theme="dark"] .cal-view-type-toggle {
  background: #161a26;
}

[data-theme="dark"] .cal-vbtn.active {
  background: #282d42;
  color: #f8fafc;
}

[data-theme="dark"] .cal-date-nav {
  background: #1e2230;
  border-color: #2d3348;
}

[data-theme="dark"] .cal-date-label {
  color: #f8fafc;
}

[data-theme="dark"] .cal-tool-icon-btn {
  background: #1e2230;
  border-color: #2d3348;
}

[data-theme="dark"] .cal-doc-availability-strip {
  background: #161a26;
  border-color: #2d3348;
  color: #94a3b8;
}

[data-theme="dark"] .cal-grid-matrix-container {
  background: #1e2230;
  border-color: #2d3348;
}

[data-theme="dark"] .cal-table-grid thead th {
  background: #161a26;
  color: #94a3b8;
}

[data-theme="dark"] .cal-th-day.is-active-day {
  background: #21283d;
  color: #818cf8;
}

[data-theme="dark"] .cal-td-time {
  background: #161a26;
  color: #64748b;
}

[data-theme="dark"] .cal-table-grid th,
[data-theme="dark"] .cal-table-grid td {
  border-color: #2d3348;
}

[data-theme="dark"] .cal-slot-avail-btn {
  background: #1e2230;
  border-color: #2d3348;
  color: #94a3b8;
}

[data-theme="dark"] .cal-slot-avail-btn:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #34d399;
}

/* ==========================================================================
   24. WALK-IN CONSULTATION VIEW (tatvapractice.tatvacare.in/walk_in_consultation)
   ========================================================================== */
.walk-in-container {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.walk-in-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.walk-in-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.walk-in-header-left h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
}

.walk-in-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--tatva-purple-subtle);
  color: var(--primary);
  border: 0.0625rem solid rgba(109, 40, 217, 0.2);
  padding: 0.35rem 0.85rem;
  border-radius: 2rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.walk-in-card {
  background: var(--bg-card);
  border: 0.0625rem solid var(--border-light);
  border-radius: 0.875rem;
  padding: 2rem;
  box-shadow: var(--shadow-md);
}

.walk-in-search-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.walk-in-search-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.75rem;
}

.walk-in-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.walk-in-search-icon {
  position: absolute;
  left: 1rem;
  color: var(--text-muted);
  pointer-events: none;
}

.walk-in-search-input {
  width: 100%;
  height: 3.25rem;
  padding: 0 3rem 0 3.25rem;
  font-size: 1rem;
  border: 0.125rem solid var(--border-light);
  border-radius: 0.75rem;
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.03);
}

.walk-in-search-input:focus {
  border-color: var(--tatva-purple);
  box-shadow: 0 0 0 0.2rem var(--tatva-purple-subtle);
}

.walk-in-clear-btn {
  position: absolute;
  right: 1rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: none;
  background: var(--bg-hover);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.walk-in-results-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.5rem;
  background: var(--bg-card);
  border: 0.0625rem solid var(--border-light);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-popover);
  max-height: 22rem;
  overflow-y: auto;
  z-index: 100;
}

.walk-in-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border-bottom: 0.0625rem solid var(--border-light);
  transition: background 0.12s ease;
  gap: 1rem;
}

.walk-in-result-item:last-child {
  border-bottom: none;
}

.walk-in-result-item:hover {
  background: var(--bg-hover);
}

.walk-in-pat-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.walk-in-pat-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-main);
}

.walk-in-pat-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.walk-in-pat-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-walkin-details {
  padding: 0.45rem 0.85rem;
  border: 0.0625rem solid var(--border-light);
  border-radius: 0.5rem;
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-walkin-details:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--tatva-purple-subtle);
}

.btn-walkin-consult {
  padding: 0.45rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--primary);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
}

.btn-walkin-consult:hover {
  background: var(--tatva-purple-hover);
  box-shadow: 0 0.125rem 0.5rem rgba(109, 40, 217, 0.3);
}

.walk-in-footer-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 0.0625rem solid var(--border-light);
  flex-wrap: wrap;
  gap: 1rem;
}

.walk-in-recent-chips {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.recent-chips-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.walk-in-quick-chip {
  padding: 0.3rem 0.75rem;
  border-radius: 1rem;
  border: 0.0625rem solid var(--border-light);
  background: var(--bg-hover);
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.walk-in-quick-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--tatva-purple-subtle);
}

[data-theme="dark"] .walk-in-card {
  background: #1e2230;
  border-color: #2d3348;
}

[data-theme="dark"] .walk-in-search-input {
  background: #161a26;
  border-color: #2d3348;
  color: #f8fafc;
}

[data-theme="dark"] .walk-in-results-dropdown {
  background: #1e2230;
  border-color: #2d3348;
}

[data-theme="dark"] .walk-in-result-item:hover {
  background: #252b3d;
}

[data-theme="dark"] .btn-walkin-details {
  background: #161a26;
  border-color: #2d3348;
  color: #94a3b8;
}

[data-theme="dark"] .walk-in-quick-chip {
  background: #161a26;
  border-color: #2d3348;
  color: #94a3b8;
}

/* ==========================================================================
   AURA AI & INTERACTIVE SYMPTOMS STYLES
   ========================================================================== */

.active-tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-surface, #f9fafb);
  border: 1px dashed var(--border-color, #e5e7eb);
  border-radius: 8px;
  margin-bottom: 10px;
  min-height: 42px;
  align-items: center;
}

.empty-tags-hint {
  font-size: 0.76rem;
  color: var(--text-muted, #9ca3af);
  font-style: italic;
}

.symptom-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  animation: tagPopIn 0.15s ease-out;
  transition: all 0.15s;
}

[data-theme="dark"] .symptom-tag-pill {
  background: #2e1065;
  color: #ddd6fe;
  border-color: #6b21a8;
}

@keyframes tagPopIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.symptom-tag-pill .btn-del-symptom {
  background: none;
  border: none;
  color: #7c3aed;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  transition: all 0.15s;
}

[data-theme="dark"] .symptom-tag-pill .btn-del-symptom {
  color: #c4b5fd;
}

.symptom-tag-pill .btn-del-symptom:hover {
  background: #7c3aed;
  color: #ffffff;
}

.active-count-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: #e0e7ff;
  color: #4338ca;
  margin-left: 6px;
}

.btn-ai-suggest-symptoms {
  background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3) !important;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-ai-suggest-symptoms:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.suggest-chip.active-chip {
  background: #ede9fe !important;
  border-color: #7c3aed !important;
  color: #5b21b6 !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .suggest-chip.active-chip {
  background: #2e1065 !important;
  border-color: #9333ea !important;
  color: #e9d5ff !important;
}

/* Aura AI Clinical Assistant Panel */
.pad-ai-panel-box {
  background: var(--bg-card, #ffffff);
  border: 1px solid #c4b5fd;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.08);
}

[data-theme="dark"] .pad-ai-panel-box {
  background: #181c2b;
  border-color: #4c1d95;
}

.ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color, #f3f4f6);
  padding-bottom: 8px;
}

.ai-badge-glow {
  background: linear-gradient(135deg, #7c3aed, #4338ca);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}

.ai-diag-card {
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  border-radius: 8px;
  padding: 10px;
}

[data-theme="dark"] .ai-diag-card {
  background: #1f1438;
  border-color: #581c87;
}

.ai-diag-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.ai-conf-meter {
  font-size: 0.75rem;
  font-weight: 700;
  color: #7c3aed;
}

[data-theme="dark"] .ai-conf-meter {
  color: #c084fc;
}

.ai-rationale-box {
  font-size: 0.74rem;
  color: var(--text-muted, #4b5563);
  line-height: 1.45;
  background: rgba(255, 255, 255, 0.8);
  padding: 8px;
  border-radius: 6px;
  margin: 6px 0;
  border-left: 3px solid #7c3aed;
}

[data-theme="dark"] .ai-rationale-box {
  background: rgba(24, 28, 43, 0.8);
  color: #cbd5e1;
  border-left-color: #a855f7;
}

.ai-med-item-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 9px 11px;
  margin-bottom: 8px;
  transition: all 0.15s;
}

[data-theme="dark"] .ai-med-item-card {
  background: #131722;
  border-color: #272c3d;
}

.ai-med-item-card:hover {
  border-color: #a78bfa;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
}

.stock-pill-instock {
  font-size: 0.68rem;
  font-weight: 700;
  background: #dcfce7;
  color: #15803d;
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-block;
}

[data-theme="dark"] .stock-pill-instock {
  background: #064e3b;
  color: #6ee7b7;
}

.stock-pill-external {
  font-size: 0.68rem;
  font-weight: 700;
  background: #f3e8ff;
  color: #6b21a8;
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-block;
}

[data-theme="dark"] .stock-pill-external {
  background: #3b0764;
  color: #d8b4fe;
}

.btn-apply-diag {
  background: #7c3aed;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-apply-diag:hover {
  background: #6d28d9;
}

.btn-ai-prescribe {
  background: #059669;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-ai-prescribe:hover {
  background: #047857;
}

.btn-prescribe-all {
  width: 100%;
  background: linear-gradient(135deg, #059669, #0d9488);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
  transition: all 0.15s;
}

.btn-prescribe-all:hover {
  filter: brightness(1.08);
}

/* ========================================================================== */
/* ADMIN AUTHENTICATION, GOOGLE RECAPTCHA & ROLE-BASED ACCESS CONTROL (RBAC)  */
/* ========================================================================== */

.modal-admin-auth {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
}

.modal-admin-card {
  background: var(--surface, #ffffff);
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(226, 232, 240, 0.8);
  overflow: hidden;
  animation: modal-admin-appear 0.25s ease-out;
}

@keyframes modal-admin-appear {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.admin-auth-header {
  background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%);
  color: #ffffff;
  padding: 24px;
  text-align: center;
}

.admin-auth-header h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  margin: 8px 0 2px;
}

.admin-auth-header p {
  font-size: 0.78rem;
  color: #c7d2fe;
}

.admin-auth-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Admin Google reCAPTCHA v2 */
.admin-recaptcha-box {
  background: #f9f9f9;
  border: 1px solid #d3d3d3;
  border-radius: 4px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.admin-recaptcha-left {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.admin-recaptcha-chk {
  width: 22px;
  height: 22px;
  accent-color: #4f46e5;
  cursor: pointer;
}

.admin-recaptcha-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: #333333;
}

.quick-roles-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #f8fafc;
  padding: 12px;
  border-radius: 8px;
  border: 1px dashed #cbd5e1;
}

.quick-roles-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

.quick-role-btn {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.15s;
}

.quick-role-btn:hover {
  background: #ede9fe;
  border-color: #818cf8;
  color: #4338ca;
}

/* User Role Badges */
.role-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.role-badge.admin {
  background: #ede9fe;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

.role-badge.receptionist {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.role-badge.pharmacist {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

/* ========================================================================== */
/* GOVERNMENT MANDATED DRUG REGISTER (SCHEDULE H1 & NSAIDs)                  */
/* ========================================================================== */

.mandated-header-card {
  background: linear-gradient(135deg, #991b1b 0%, #dc2626 50%, #b91c1c 100%);
  color: #ffffff;
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 15px rgba(185, 28, 28, 0.25);
  margin-bottom: 20px;
}

.mandated-title h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
}

.mandated-title p {
  font-size: 0.8rem;
  color: #fecaca;
  margin-top: 4px;
}

.mandated-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.mandated-stat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mandated-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

.mandated-stat-val {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
}

.mandated-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.mandated-badge-h1 {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 800;
}

.mandated-badge-nsaid {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 800;
}

/* ==========================================================================
   CROSS-PLATFORM MULTI-DEVICE RESPONSIVENESS (DOCTOR / CLINIC SUITE)
   Optimized for PC (Desktop/Laptop), Tablet (iPad/Surface), and Mobile Phones
   ========================================================================== */

/* Universal Responsive Table & Form Containers */
.table-responsive,
.table-card,
.table-container,
.appointments-table-wrap,
.rep-table-wrap,
.pharmacy-table-wrap,
.mandated-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* 1. Mobile Smartphones (<= 768px) */
@media (max-width: 768px) {
  .app-shell {
    flex-direction: column;
    width: 100%;
    overflow-x: hidden;
  }

  /* Bottom Navigation Bar Dock for Mobile Doctors & Staff */
  .app-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    height: 64px;
    background: var(--bg-card);
    z-index: 9999;
    border-right: none;
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 4px 6px max(6px, env(safe-area-inset-bottom));
  }

  .sidebar-brand,
  .sidebar-footer {
    display: none !important;
  }

  .sidebar-nav {
    flex-direction: row;
    justify-content: space-around;
    gap: 2px;
    width: 100%;
  }

  .nav-item {
    width: auto;
    flex: 1;
    max-width: 72px;
    padding: 6px 2px 4px;
    border-radius: 8px;
    gap: 2px;
  }

  .nav-icon svg {
    width: 20px;
    height: 20px;
  }

  .nav-label {
    font-size: 0.64rem;
    white-space: nowrap;
  }

  .app-main-wrap {
    width: 100%;
    padding-bottom: 74px; /* Clearance for mobile bottom dock */
    overflow-x: hidden;
  }

  /* Clinic Topbar on Mobile */
  .clinic-topbar {
    padding: 8px 12px;
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-card);
    backdrop-filter: blur(8px);
  }

  .topbar-left {
    gap: 6px;
  }

  .clinic-selector .clinic-name {
    font-size: 0.82rem;
  }

  .live-status-chip {
    padding: 2px 6px;
    font-size: 0.68rem;
  }

  .topbar-right {
    gap: 6px;
  }

  .user-pill-dr {
    padding: 4px 8px;
  }

  .user-pill-dr .dr-info,
  .user-pill-dr .crown-badge {
    display: none;
  }

  /* Greeting & Banner Headers */
  .banner-hero {
    padding: 16px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .hero-greeting {
    font-size: 1.25rem !important;
  }

  .hero-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .hero-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 42px;
    font-size: 0.82rem;
  }

  /* Tab Pills & Filter Chips */
  .tab-pills-row,
  .dashboard-controls,
  .patient-filter-chips {
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .dashboard-controls {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 10px;
  }

  /* Consultation Pad (Mobile Doctor Use) */
  .pad-top-action-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    position: sticky;
    top: 0;
  }

  .pad-bar-left {
    width: 100%;
    justify-content: space-between;
  }

  .pad-bar-right {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 6px;
  }

  .pad-two-col-layout {
    flex-direction: column;
    padding: 10px;
    gap: 12px;
  }

  .pad-left-col {
    width: 100%;
    position: static;
  }

  /* Patient Details Layout */
  .pat-details-layout {
    flex-direction: column;
    padding: 12px;
    gap: 12px;
  }

  .pat-mini-sidebar {
    width: 100%;
  }

  .pat-sub-nav {
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
  }

  .pat-details-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Pharmacy Modules on Mobile */
  .pharm-kpi-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pharm-tab-nav,
  .rep-tab-pills,
  .master-tab-pills {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .mandated-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .mandated-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* Responsive Modals */
  .modal-content,
  .invoice-modal-card {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 92vh;
    margin: 8px auto;
    padding: 14px;
    border-radius: 12px;
    overflow-y: auto;
  }

  .printable-invoice-sheet {
    overflow-x: auto;
  }
}

/* 2. Tablet Screens (769px to 1024px: iPads, Android Tablets, Surface Pro) */
@media (min-width: 769px) and (max-width: 1024px) {
  .app-sidebar {
    width: 72px;
    padding: 12px 0;
  }

  .sidebar-brand .brand-name {
    display: none;
  }

  .nav-item {
    width: 62px;
    padding: 8px 2px;
  }

  .nav-label {
    font-size: 0.65rem;
  }

  .app-main-wrap {
    width: calc(100% - 72px);
  }

  .clinic-topbar {
    padding: 10px 16px;
  }

  .pat-details-layout {
    gap: 14px;
    padding: 16px;
  }

  .pat-mini-sidebar {
    width: 190px;
  }

  .pat-details-grid {
    grid-template-columns: 280px 1fr;
    gap: 14px;
  }

  .pad-two-col-layout {
    gap: 14px;
    padding: 14px;
  }

  .pad-left-col {
    width: 260px;
  }

  .pharm-kpi-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .mandated-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .modal-content,
  .invoice-modal-card {
    max-width: 720px;
    width: 90vw;
  }
}

/* 3. Large PC / Desktop (1025px+) */
@media (min-width: 1025px) {
  .app-sidebar {
    width: 90px;
  }

  .nav-item {
    width: 76px;
  }

  .modal-content,
  .invoice-modal-card {
    max-width: 780px;
  }
}

/* ==========================================================================
   AURA AI CLINICAL COPILOT & LLM API KEY SETTINGS
   ========================================================================== */

/* Co-Pilot View Container */
.ai-copilot-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 72px);
  background: var(--bg-surface);
  overflow: hidden;
}

/* Header */
.ai-copilot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.ai-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ai-sparkle-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
  flex-shrink: 0;
}

.ai-header-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-header-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 3px 0 0 0;
}

.ai-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-active-provider-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.78rem;
  font-weight: 600;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Split Workspace Body */
.ai-copilot-body {
  display: grid;
  grid-template-columns: 360px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left Sidebar */
.ai-copilot-sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border-light);
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Patient Context Card */
.ai-context-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.ai-context-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.context-patient-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-heading);
}

.context-patient-meta {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.context-vitals-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.vital-tag {
  background: #f1f5f9;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.context-symptoms-box {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
}

.context-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 6px;
}

.context-symptoms-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.symptom-tag {
  background: #ede9fe;
  color: #6d28d9;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

/* Quick Presets */
.ai-presets-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-presets-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-heading);
}

.ai-presets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-preset-btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.ai-preset-btn:hover {
  background: #f5f3ff;
  border-color: #c4b5fd;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(124, 58, 237, 0.08);
}

.preset-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.preset-text strong {
  display: block;
  font-size: 0.8rem;
  color: var(--text-heading);
  margin-bottom: 2px;
}

.preset-text small {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Right Chat Area */
.ai-copilot-chat-area {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #f8fafc;
}

.ai-chat-stream {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
}

/* Messages */
.ai-message {
  display: flex;
  gap: 12px;
  max-width: 88%;
}

.ai-message.assistant-message {
  align-self: flex-start;
}

.ai-message.user-message {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ai-message-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ede9fe;
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ai-message.user-message .ai-message-avatar {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
}

.ai-message-body {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.ai-message.user-message .ai-message-body {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.ai-message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.ai-message.user-message .ai-message-header {
  color: rgba(255, 255, 255, 0.8);
}

.ai-message-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-body);
}

.ai-message.user-message .ai-message-text {
  color: #fff;
}

.ai-message-text p {
  margin: 0 0 10px 0;
}

.ai-message-text p:last-child {
  margin-bottom: 0;
}

.ai-message-text ul,
.ai-message-text ol {
  margin: 6px 0 10px 18px;
  padding: 0;
}

.ai-message-text li {
  margin-bottom: 4px;
}

.ai-tip-box {
  background: #f8fafc;
  border-left: 3px solid #6366f1;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  margin-top: 10px;
  color: #475569;
}

/* Typing Indicator */
.ai-typing-indicator {
  padding: 10px 24px;
}

.typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 8px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7c3aed;
  animation: typing-bounce 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-5px); opacity: 1; }
}

.typing-text {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-left: 4px;
  font-weight: 500;
}

/* Chat Input Bar */
.ai-chat-input-bar {
  padding: 14px 24px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

.ai-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color 0.2s ease;
}

.ai-input-wrap:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.ai-chat-textarea {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  resize: none;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text-body);
  line-height: 1.5;
}

.ai-input-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   AI SETTINGS MODAL
   ========================================================================== */

.ai-settings-modal-box {
  max-width: 880px;
  width: 92vw;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.ai-active-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  margin-bottom: 20px;
}

.ai-badge-secure {
  font-size: 0.72rem;
  font-weight: 600;
  color: #4338ca;
  background: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid #c7d2fe;
}

.ai-providers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ai-provider-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
  position: relative;
}

.ai-provider-card.active-provider {
  border-color: #6366f1;
  background: #faf5ff;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
}

.provider-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.provider-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.provider-logo {
  font-size: 1.35rem;
  line-height: 1;
}

.provider-name {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-heading);
}

.provider-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: block;
}

.provider-radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.provider-radio-pill input[type="radio"]:checked + .radio-label {
  color: #4338ca;
  font-weight: 700;
}

.provider-radio-pill:has(input[type="radio"]:checked) {
  background: #ede9fe;
  border-color: #a78bfa;
  color: #4338ca;
}

.form-row-compact {
  margin-bottom: 12px;
}

.form-row-compact label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 4px;
}

.key-status-chip {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
}

.key-status-chip.configured {
  background: #dcfce7;
  color: #15803d;
}

.key-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.key-input-wrapper .form-control {
  padding-right: 36px;
  font-family: monospace;
  font-size: 0.78rem;
}

.btn-toggle-eye {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-size: 0.85rem;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.btn-toggle-eye:hover {
  opacity: 1;
}

.provider-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
}

.test-feedback {
  font-size: 0.72rem;
  font-weight: 600;
}

.test-feedback.success {
  color: #16a34a;
}

.test-feedback.error {
  color: #dc2626;
}

/* Responsive adjustments for Tablets & Mobile */
@media (max-width: 900px) {
  .ai-copilot-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    overflow-y: auto;
  }

  .ai-copilot-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    max-height: 280px;
  }

  .ai-providers-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .ai-copilot-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
  }

  .ai-header-right {
    width: 100%;
    justify-content: space-between;
  }

  .ai-chat-stream {
    padding: 12px;
  }

  .ai-message {
    max-width: 95%;
  }
}

/* ==========================================================================
   ADVANCED PRESCRIBING STRATEGY: TAPERING, TITRATION & PHASING
   ========================================================================== */

/* Pad Medicine Table Pills */
.btn-taper-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  cursor: pointer;
  margin-top: 4px;
  transition: all 0.2s ease;
}

.btn-taper-pill:hover {
  background: #ede9fe;
  color: #6d28d9;
  border-color: #c4b5fd;
}

.btn-taper-pill.active {
  background: #ede9fe;
  color: #6d28d9;
  border-color: #8b5cf6;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.15);
}

.taper-inline-badge {
  display: block;
  margin-top: 4px;
  padding: 3px 6px;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border: 1px solid #ddd6fe;
  border-radius: 6px;
  font-size: 0.68rem;
  color: #5b21b6;
  line-height: 1.3;
}

.taper-inline-badge strong {
  color: #4338ca;
}

/* Taper Modal Box */
.taper-modal-box {
  max-width: 780px;
  width: 92vw;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
}

.taper-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.taper-med-banner {
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border: 1.5px solid #c7d2fe;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.badge-h1-pill {
  font-size: 0.72rem;
  font-weight: 700;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 3px 8px;
  border-radius: 6px;
}

/* Presets Bar */
.taper-presets-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-taper-preset {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-taper-preset:hover {
  background: #f5f3ff;
  border-color: #c4b5fd;
  color: #6d28d9;
  transform: translateY(-1px);
}

/* Phases List */
.taper-phases-wrapper {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}

.taper-phases-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.taper-phase-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 80px 140px 170px 100px 1fr 34px;
  align-items: center;
  gap: 10px;
  transition: border-color 0.2s;
}

.taper-phase-card:hover {
  border-color: #a5b4fc;
}

.phase-pill-num {
  font-size: 0.72rem;
  font-weight: 700;
  background: #ede9fe;
  color: #6d28d9;
  padding: 4px 8px;
  border-radius: 6px;
  text-align: center;
}

.phase-qty-display {
  font-size: 0.74rem;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  padding: 6px 8px;
  border-radius: 6px;
  text-align: center;
  white-space: nowrap;
}

.btn-remove-phase {
  background: #fee2e2;
  color: #ef4444;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  transition: background 0.2s;
}

.btn-remove-phase:hover {
  background: #fca5a5;
  color: #991b1b;
}

.btn-remove-phase:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Closure Box */
.taper-closure-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.taper-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.taper-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #d97706;
}

/* Summary Card */
.taper-summary-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
}

.summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: #1e293b;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 12px;
}

.summary-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}

.summary-item.highlight-item {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.item-label {
  font-size: 0.7rem;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.item-value {
  font-size: 1.05rem;
  color: #0f172a;
}

.summary-item.highlight-item .item-value {
  color: #15803d;
  font-size: 1.15rem;
}

.item-sub {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 2px;
}

/* Timeline Preview */
.taper-preview-timeline {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 14px;
  background: #e2e8f0;
  gap: 2px;
}

.timeline-segment {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

/* Print View Tapering & Step-Up Box */
.rx-print-taper-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-left: 4px solid #4f46e5;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 6px 0 10px 14px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.rx-print-taper-header {
  font-weight: 700;
  color: #3730a3;
  margin-bottom: 6px;
  font-size: 0.82rem;
}

.rx-print-taper-phase {
  margin-bottom: 4px;
  line-height: 1.45;
}

.rx-print-taper-stop {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .taper-phase-card {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  
  .summary-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ */
/* ADVANCED PHARMACY BILLING, BREAK-EVEN, MULTI-FORM & CLINICAL NOTE */
/* ============================================================ */

/* Clinical Note Input in Prescription Pad Table */
.pad-clinical-note-input {
  width: 100%;
  font-size: 0.74rem;
  padding: 4px 8px;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 4px;
  background: #fafafa;
  color: var(--text-heading, #1e293b);
  transition: all 0.15s ease;
}
.pad-clinical-note-input:focus {
  background: #ffffff;
  border-color: #7c3aed;
  outline: none;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

/* Quantity and Need Badge in Prescription Pad */
.pad-qty-badge-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pad-qty-need-tag {
  font-size: 0.68rem;
  color: #4338ca;
  font-weight: 700;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  padding: 1px 5px;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
}
.pad-qty-dispense-tag {
  font-size: 0.68rem;
  color: #15803d;
  font-weight: 700;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 1px 5px;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
}

/* Prescription Print Clinical Note Callout */
.rx-print-clinical-note-badge {
  background: #faf5ff;
  border: 1px dashed #c084fc;
  border-radius: 5px;
  padding: 4px 10px;
  margin: 3px 0 6px 14px;
  font-size: 0.75rem;
  color: #581c87;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Pharmacy POS Table Enhancements */
.badge-buy-rate {
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
}

.badge-breakeven {
  font-size: 0.7rem;
  font-weight: 700;
  color: #0369a1;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
}

.dispense-mode-select {
  font-size: 0.74rem;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-light, #cbd5e1);
  background: #ffffff;
  color: var(--text-heading, #1e293b);
  font-weight: 600;
}

/* Break-Even Real-Time Margin & Safety Banner */
.pos-breakeven-banner {
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: all 0.2s ease;
}

.pos-breakeven-banner.safe {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #14532d;
}

.pos-breakeven-banner.loss {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  animation: pulse-loss 1.5s infinite alternate ease-in-out;
}

@keyframes pulse-loss {
  from { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.2); }
  to { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.1); }
}

.breakeven-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.breakeven-text strong {
  font-size: 0.84rem;
  display: block;
}

/* Interactive Pharmacist Discount Controls */
.pos-discount-row {
  align-items: flex-start !important;
}

.pos-discount-control {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.pos-disc-inputs {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pos-disc-input,
.pos-disc-input-amt {
  width: 58px;
  padding: 3px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  text-align: right;
  background: #ffffff;
}

.disc-unit,
.disc-sep {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}

.pos-quick-disc-pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn-quick-disc {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-quick-disc:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.btn-quick-disc.active {
  background: #4338ca;
  color: #ffffff;
  border-color: #3730a3;
}

.btn-quick-disc.btn-breakeven-pill {
  background: #f0fdf4;
  color: #166534;
  border-color: #86efac;
  font-weight: 700;
}

.btn-quick-disc.btn-breakeven-pill:hover {
  background: #dcfce7;
}

.pos-margin-row {
  background: #f8fafc;
  border-top: 1px dashed #cbd5e1;
  padding-top: 6px;
  margin-top: 4px;
}

/* ==========================================================================
   PHARMACY RETURNS & CREDIT / DEBIT NOTE SYSTEM
   ========================================================================== */
.return-modal-box {
  max-width: 940px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.return-banner-info {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.return-party-info strong {
  color: #1e293b;
  font-size: 0.95rem;
}

.return-builder-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 14px;
}

.return-builder-table th {
  background: #f1f5f9;
  color: #475569;
  font-weight: 700;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #cbd5e1;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.return-builder-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.return-unit-select {
  font-size: 0.78rem;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  font-weight: 600;
}

.return-qty-input {
  width: 70px;
  padding: 4px 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.badge-unit-strip {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}

.badge-unit-pills {
  background: #fdf2f8;
  color: #be185d;
  border: 1px solid #fbcfe8;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}

.badge-unit-sachet {
  background: #fefce8;
  color: #a16207;
  border: 1px solid #fef08a;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}

.badge-unit-liquid {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}

.liquid-hygiene-box {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #15803d;
  font-weight: 600;
}

.liquid-hygiene-box.invalid {
  color: #b91c1c;
}

.return-totals-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 10px;
}

.return-calc-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 0.82rem;
  color: #475569;
}

.return-calc-row.total {
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  border-top: 1px solid #cbd5e1;
  padding-top: 6px;
  margin-top: 6px;
}

/* Printable Credit Note & Debit Note Sheet */
.voucher-printable-area {
  background: #ffffff;
  padding: 28px 32px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #0f172a;
  border-radius: 6px;
}

.voucher-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.voucher-type-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.voucher-type-badge.credit-note {
  background: #fdf2f8;
  color: #9d174d;
  border: 1px solid #f472b6;
}

.voucher-type-badge.debit-note {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #60a5fa;
}

.voucher-party-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 14px;
  font-size: 0.82rem;
}

.voucher-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 16px;
}

.voucher-table th {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 7px 9px;
  text-align: left;
  font-weight: 700;
}

.voucher-table td {
  border: 1px solid #e2e8f0;
  padding: 7px 9px;
}

.voucher-footer-summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 20px;
  border-top: 1px solid #cbd5e1;
  padding-top: 14px;
}

.voucher-sign-line {
  border-top: 1px dashed #64748b;
  width: 180px;
  text-align: center;
  font-size: 0.72rem;
  color: #64748b;
  padding-top: 4px;
}

.rx-medico-legal-disclaimer {
  margin-top: 14px;
  padding: 6px 12px;
  background: #f8fafc;
  border: 1px dashed #94a3b8;
  border-radius: 4px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #334155;
  text-transform: uppercase;
}