@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Tajawal:wght@400;500;700&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  --cp-font: "Cairo", "Tajawal", "Noto Kufi Arabic", "Segoe UI", sans-serif;
  --cp-bg: #eef2f8;
  --cp-ink: #101a2b;
  --cp-ink-soft: #4b5768;
  --cp-blue: #109ea3;
  --cp-blue-strong: #055b7c;
  --cp-blue-rgb: 16, 158, 163;
  --cp-teal: #0f9e8f;
  --cp-teal-strong: #0b6f64;
  --cp-teal-rgb: 15, 158, 143;
  --cp-amber: #cb9632;
  --cp-amber-strong: #987126;
  --cp-amber-rgb: 203, 150, 50;
  --cp-danger: #dc2626;
  --cp-danger-rgb: 220, 38, 38;
  --cp-success: #16a34a;
  --cp-success-rgb: 22, 163, 74;
  --cp-panel: #f5f7fb;
  --cp-card: #ffffff;
  --cp-border: #e1e6f0;
  --cp-shadow: 0 20px 48px rgba(16, 26, 43, 0.14);
  --cp-shadow-soft: 0 10px 26px rgba(16, 26, 43, 0.07);
  --cp-shadow-xs: 0 2px 10px rgba(16, 26, 43, 0.06);
  --cp-radius: 18px;
  /* Brand-consistent chart series palette — read via getComputedStyle so
     Chart.js configs stay in sync with the design system instead of using
     ad-hoc hex literals per page. */
  --cp-chart-1: #109ea3;
  --cp-chart-2: #0f9e8f;
  --cp-chart-3: #cb9632;
  --cp-chart-4: #7c5cff;
  --cp-chart-5: #dc2626;
  --cp-chart-6: #64748b;
}

@keyframes cp-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cp-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: radial-gradient(circle at top left, rgba(16, 158, 163, 0.08), transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(15, 158, 143, 0.1), transparent 40%),
    var(--cp-bg);
  color: var(--cp-ink);
  font-family: var(--cp-font);
  line-height: 1.6;
}

body[data-lang="en"] {
  --cp-font: "Manrope", "Segoe UI", sans-serif;
}

a {
  color: var(--cp-blue);
  text-decoration: none;
}

a:hover {
  color: var(--cp-blue-strong);
}

.cp-container {
  width: min(1120px, 92%);
  width: 92%;
  margin-inline: auto;
}

.cp-card {
  background: var(--cp-card);
  border-radius: var(--cp-radius);
  padding: 24px;
  border: 1px solid var(--cp-border);
  box-shadow: var(--cp-shadow-soft);
}

.cp-card--soft {
  background: linear-gradient(135deg, rgba(16, 158, 163, 0.08), rgba(15, 158, 143, 0.08));
  border: 1px solid rgba(16, 158, 163, 0.15);
}

.cp-public-header {
  padding: 18px 0;
  background: #fff;
  border-bottom: 1px solid var(--cp-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.cp-public-main {
  padding: 24px 0 40px;
}

.cp-public-hero {
  background: linear-gradient(135deg, rgba(16, 158, 163, 0.18), rgba(15, 158, 143, 0.12));
  border-bottom: 1px solid rgba(16, 158, 163, 0.2);
  padding: 32px 0;
  margin-bottom: 24px;
}

.cp-explore-hero {
  position: relative;
  overflow: hidden;
  padding: 48px 0 40px;
}

.cp-explore-hero::before,
.cp-explore-hero::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  filter: blur(0);
  opacity: 0.35;
  z-index: 0;
}

.cp-explore-hero::before {
  background: radial-gradient(circle, rgba(16, 158, 163, 0.5), transparent 70%);
  top: -120px;
  left: -80px;
}

.cp-explore-hero::after {
  background: radial-gradient(circle, rgba(15, 158, 143, 0.5), transparent 70%);
  bottom: -140px;
  right: -120px;
}

.cp-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 24px;
  align-items: center;
}

.cp-hero-copy h1 {
  margin: 10px 0 6px;
  font-size: 2rem;
}

.cp-hero-copy {
  animation: cp-fade-up 0.7s ease both;
}

.cp-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.cp-hero-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.cp-feature-card {
  background: #fff;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid var(--cp-border);
  box-shadow: var(--cp-shadow-soft);
  display: grid;
  gap: 4px;
}

.cp-feature-card span {
  color: var(--cp-ink-soft);
  font-size: 0.9rem;
}

.cp-hero-summary {
  display: grid;
  gap: 16px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--cp-shadow);
  animation: cp-fade-up 0.8s ease 0.1s both;
}

.cp-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.cp-hero-stats div {
  text-align: center;
}

.cp-hero-stats strong {
  font-size: 1.4rem;
  display: block;
}

.cp-hero-stats span {
  color: var(--cp-ink-soft);
  font-size: 0.85rem;
}

.cp-hero-steps {
  display: grid;
  gap: 10px;
}

.cp-hero-step {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--cp-panel);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.cp-hero-step span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: rgba(16, 158, 163, 0.15);
  color: var(--cp-blue-strong);
}

.cp-hero-step p {
  margin: 2px 0 0;
  color: var(--cp-ink-soft);
  font-size: 0.88rem;
}

.cp-badge-ghost {
  background: rgba(16, 158, 163, 0.12);
  color: var(--cp-blue-strong);
  border: 1px solid rgba(16, 158, 163, 0.2);
}

.cp-featured {
  display: grid;
  gap: 28px;
  margin-bottom: 24px;
}

.cp-featured-section {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--cp-border);
  box-shadow: var(--cp-shadow-soft);
  animation: cp-fade-up 0.6s ease both;
}

.cp-featured-section:nth-child(2) {
  animation-delay: 0.05s;
}

.cp-featured-section:nth-child(3) {
  animation-delay: 0.1s;
}

.cp-featured-section:nth-child(4) {
  animation-delay: 0.15s;
}

.cp-search-strip {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--cp-border);
  padding: 10px 16px 16px;
  box-shadow: var(--cp-shadow-soft);
  animation: cp-fade-up 0.6s ease 0.05s both;
}

.cp-public-hero h1 {
  margin: 8px 0 4px;
  font-size: 1.8rem;
}

.cp-slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.cp-slot-pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(16, 158, 163, 0.12);
  color: var(--cp-blue-strong);
  font-size: 0.8rem;
  font-weight: 600;
}

.cp-info-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.cp-info-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--cp-panel);
}

.cp-info-list span {
  color: var(--cp-ink-soft);
}

.cp-clinic-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--cp-border);
  background: #fff;
  box-shadow: var(--cp-shadow-soft);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cp-clinic-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cp-shadow);
}

.cp-clinic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cp-clinic-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cp-clinic-logo {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid var(--cp-border);
  background: var(--cp-panel);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.cp-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp-dept-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline: 10px;
}

.cp-chip-logo {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--cp-border);
  background: #fff;
  object-fit: cover;
}

.cp-table-logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--cp-border);
  background: var(--cp-panel);
  object-fit: cover;
}

.cp-logo-uploader {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cp-logo-preview {
  width: 92px;
  height: 92px;
  border-radius: 20px;
  border: 1px solid var(--cp-border);
  background: var(--cp-panel);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cp-clinic-card h4 {
  margin: 0;
}

.cp-hero-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-top: 16px;
}

.cp-explore-shell {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(280px, 360px);
  gap: 20px;
  align-items: start;
}

.cp-filter-panel {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--cp-border);
  background: #fff;
  box-shadow: var(--cp-shadow-soft);
}

.cp-filter-header {
  align-items: center;
}

.cp-mobile-only {
  display: none;
}

.cp-filter-backdrop {
  display: none;
}

.cp-filter-summary {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: var(--cp-panel);
}

.cp-filter-summary div {
  display: flex;
  justify-content: space-between;
}

.cp-results-panel {
  display: grid;
  gap: 18px;
}

.cp-results-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.cp-results-header h2 {
  margin: 0;
}

.cp-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-pill {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--cp-border);
  background: #fff;
  cursor: pointer;
  font-family: var(--cp-font);
  font-weight: 600;
  color: var(--cp-ink);
}

.cp-pill.is-active {
  background: rgba(16, 158, 163, 0.12);
  border-color: rgba(16, 158, 163, 0.3);
  color: var(--cp-blue-strong);
}

.cp-booking-panel {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 18px;
}

.cp-favorites-panel {
  display: grid;
  gap: 12px;
}

.cp-favorites-section {
  display: grid;
  gap: 8px;
}

.cp-clinic-highlight {
  display: grid;
  gap: 8px;
}

.cp-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cp-rating-meta {
  color: var(--cp-ink-soft);
  font-size: 0.85rem;
}

.cp-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-clinic-highlight strong {
  font-size: 1.1rem;
}

.cp-fav-btn {
  border: 1px solid var(--cp-border);
  background: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--cp-ink-soft);
  font-size: 0.95rem;
}

.cp-fav-btn.is-fav {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.1);
}

.cp-clinic-card.is-selected {
  border-color: rgba(16, 158, 163, 0.4);
  box-shadow: 0 16px 30px rgba(16, 158, 163, 0.18);
}

.cp-doctor-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--cp-border);
  background: #fff;
  box-shadow: var(--cp-shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cp-doctor-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cp-shadow);
}

.cp-doctor-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cp-avatar-stack {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cp-facility-avatar {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--cp-border);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cp-facility-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.cp-doctor-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cp-blue), var(--cp-teal));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  overflow: hidden;
}

.cp-doctor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.cp-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.cp-step {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  border: 1px dashed var(--cp-border);
  color: var(--cp-ink-soft);
  font-size: 0.8rem;
}

.cp-step span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cp-panel);
  display: grid;
  place-items: center;
  font-weight: 700;
}

.cp-step.is-active {
  border-color: rgba(16, 158, 163, 0.4);
  color: var(--cp-blue-strong);
}

.cp-step.is-complete span {
  background: rgba(15, 158, 143, 0.2);
  color: #0b6f64;
}

.cp-summary {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: var(--cp-panel);
  display: grid;
  gap: 8px;
}

.cp-summary h4 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.cp-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

@media (max-width: 1200px) {
  .cp-explore-shell {
    grid-template-columns: 1fr;
  }

  .cp-hero-grid {
    grid-template-columns: 1fr;
  }

  .cp-filter-panel,
  .cp-booking-panel {
    position: relative;
    top: auto;
  }

  .cp-stepper {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }
}

@media (max-width: 900px) {
  .cp-mobile-only {
    display: inline-flex;
  }

  .cp-filter-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(340px, 88vw);
    max-width: 100%;
    overflow-y: auto;
    transform: translateX(110%);
    transition: transform 0.2s ease;
    z-index: 60;
  }

  .cp-filter-panel.is-open {
    transform: translateX(0);
  }

  .cp-filter-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 50;
  }

  .cp-filter-backdrop.is-show {
    display: block;
  }
}

@media (max-width: 720px) {
  .cp-hero-search {
    grid-template-columns: 1fr;
  }

  .cp-hero-stats {
    grid-template-columns: 1fr;
  }
}

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.cp-btn:focus-visible {
  outline: 2px solid var(--cp-blue);
  outline-offset: 2px;
}

.cp-btn-primary {
  background: var(--cp-blue);
  color: #fff;
  box-shadow: 0 1px 2px rgba(var(--cp-blue-rgb), 0.06), 0 8px 16px rgba(var(--cp-blue-rgb), 0.2);
}

.cp-btn-primary:hover,
.cp-btn-primary:focus {
  background: var(--cp-blue-strong);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(var(--cp-blue-rgb), 0.3);
}

.cp-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(var(--cp-blue-rgb), 0.24);
}

/* Reserved for marketing/hero CTAs — the two-tone gradient the whole app used
   to use for every primary button. Kept as an opt-in so hero sections can
   still feel celebratory while everyday buttons stay calm and consistent. */
.cp-btn-hero {
  background: linear-gradient(135deg, var(--cp-blue), var(--cp-teal));
  color: #fff;
  box-shadow: 0 10px 24px rgba(var(--cp-blue-rgb), 0.28);
}

.cp-btn-hero:hover,
.cp-btn-hero:focus {
  filter: brightness(1.06);
  color: #fff;
  transform: translateY(-1px);
}

.cp-btn-danger {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: #fff;
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.22);
  border-color: transparent;
}

.cp-btn-danger:hover,
.cp-btn-danger:focus {
  background: linear-gradient(135deg, #b91c1c, #7f1d1d);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(153, 27, 27, 0.35);
}

.cp-btn-danger:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(153, 27, 27, 0.28);
}

/* Success / teal action buttons — for positive-outcome actions (mark paid,
   complete visit) and secondary-brand actions (start visit) that used to be
   hardcoded inline per-page instead of going through the shared button system. */
.cp-btn-success {
  background: var(--cp-success);
  color: #fff;
  box-shadow: 0 8px 18px rgba(var(--cp-success-rgb), 0.22);
  border-color: transparent;
}

.cp-btn-success:hover,
.cp-btn-success:focus {
  background: #15803d;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(var(--cp-success-rgb), 0.32);
}

.cp-btn-teal {
  background: var(--cp-teal);
  color: #fff;
  box-shadow: 0 8px 18px rgba(var(--cp-teal-rgb), 0.22);
  border-color: transparent;
}

.cp-btn-teal:hover,
.cp-btn-teal:focus {
  background: var(--cp-teal-strong);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(var(--cp-teal-rgb), 0.32);
}

/* Amber/warning style — used for the Save button when editing an existing
   record so the action visibly differs from "create new". */
.cp-btn-warning {
  background: linear-gradient(135deg, #f59e0b, #b45309);
  color: #fff;
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.25);
  border-color: transparent;
}

.cp-btn-warning:hover,
.cp-btn-warning:focus {
  background: linear-gradient(135deg, #d97706, #92400e);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(180, 83, 9, 0.35);
}

.cp-btn-warning:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(180, 83, 9, 0.28);
}

/* ── Edit-mode banner inside admin forms ───────────────────────────────── */
.cp-edit-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin: 0 0 16px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 12px;
}

.cp-edit-banner[hidden] {
  display: none;
}

.cp-edit-banner-icon {
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.cp-edit-banner-text {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.cp-edit-banner-text strong {
  color: #92400e;
}

[data-theme="dark"] .cp-edit-banner-text strong {
  color: #fde68a;
}

[data-theme="dark"] .cp-edit-banner {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.06));
}

.cp-btn-sm:hover {
  transform: translateY(-1px);
}

.cp-btn-outline {
  background: #fff;
  border-color: var(--cp-border);
  color: var(--cp-ink);
}

.cp-btn-outline:hover {
  border-color: var(--cp-blue);
  color: var(--cp-blue);
}

.cp-btn-light {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.cp-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--cp-border);
  background: #fff;
  font-family: var(--cp-font);
}

.cp-input:focus {
  outline: none;
  border-color: var(--cp-blue);
  box-shadow: 0 0 0 4px rgba(16, 158, 163, 0.12);
}

.cp-textarea {
  resize: vertical;
  min-height: 96px;
}

.cp-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  padding: 0 10px;
  background: #fff;
}

.cp-input-group input {
  border: none;
  padding: 12px 6px;
  background: transparent;
  width: 100%;
}

.cp-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--cp-ink-soft);
}

.cp-profile {
  display: grid;
}

.cp-profile-side {
  display: grid;
  gap: 12px;
  align-content: start;
  justify-items: center;
  text-align: center;
}

.cp-profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--cp-blue), var(--cp-teal));
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  font-size: 1.4rem;
  overflow: hidden;
}

.cp-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp-profile-form {
  display: grid;
  gap: 16px;
}

/* The full `.cp-icon-btn` definition lives in dashboard.css (used by the
   topbar lang / theme / notification icon buttons). This stub was an older
   bare-button style that conflicted with the redesigned version and was a
   pure-override hazard (any future stylesheet ordering change would have
   flipped the result). Removed intentionally — see dashboard.css for the
   canonical rule, hover, and focus-visible behavior. */

.cp-grid {
  display: grid;
  gap: 16px;
}

.cp-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.cp-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.cp-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.cp-grid-5 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.cp-queue-group-row td {
  background: #f1f5f9 !important;
  font-weight: 700;
  color: #0e3c4c;
}
[data-theme="dark"] .cp-queue-group-row td { background: #1e293b !important; color: #e2e8f0; }

.cp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(16, 158, 163, 0.12);
  color: var(--cp-blue-strong);
  font-weight: 600;
  font-size: 0.85rem;
}

.cp-badge-outline {
  background: transparent;
  border: 1px solid rgba(16, 158, 163, 0.3);
  color: var(--cp-blue-strong);
}

.cp-muted {
  color: var(--cp-ink-soft);
  font-size: 0.95rem;
}

.cp-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.cp-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(var(--cp-blue-rgb), 0.12);
  color: var(--cp-blue-strong);
}

.cp-chip--logo {
  gap: 6px;
}

.cp-chip-neutral {
  background: rgba(148, 163, 184, 0.18);
  color: #475569;
}

.cp-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--cp-shadow-soft);
}

.cp-table th,
.cp-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--cp-border);
  text-align: right;
}

.cp-table th {
  background: var(--cp-panel);
  font-weight: 700;
  color: var(--cp-ink-soft);
  font-size: 0.95rem;
}

.cp-table tr:last-child td {
  border-bottom: none;
}

.cp-fade-up {
  animation: fadeUp 0.6s ease both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .cp-row {
    justify-content: center;
  }

  .cp-table {
    display: block;
    overflow-x: auto;
  }

  .cp-row-tight {
    flex-wrap: wrap;
  }

  .cp-admin-departments-form-card {
    width: 100%;
  }

  .cp-admin-departments-table-card .cp-section-title {
    padding: 18px 16px 0;
  }

  .cp-admin-departments-table-wrap {
    padding: 12px 16px 16px;
  }

  .cp-toast-container {
    right: 12px;
    left: 12px;
    width: auto;
  }
}

.cp-page {
  display: grid;
  gap: 24px;
}

.cp-field {
  display: grid;
  gap: 6px;
}

/* Auto-mark required fields with a red asterisk on their label.
   Works for any form using `.cp-field` whose input/select/textarea has the
   `required` attribute — no per-form changes needed. */
.cp-field:has(input[required], select[required], textarea[required]) > label::after,
.cp-field:has(input[required], select[required], textarea[required]) > .cp-label::after,
.cp-form .cp-label:has(+ input[required]):after,
.cp-form .cp-label:has(+ select[required]):after,
.cp-form .cp-label:has(+ textarea[required]):after,
.cp-form .cp-label:has(+ .cp-input-group input[required]):after,
.cp-form .cp-label:has(+ .cp-input-group select[required]):after,
label:has(+ input[required]):after,
label:has(+ select[required]):after,
label:has(+ textarea[required]):after,
label:has(+ .cp-input-group input[required]):after {
  content: " *";
  color: #dc2626;
  font-weight: 700;
  margin-inline-start: 2px;
}

.cp-link {
  font-weight: 600;
}

.cp-tip {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--cp-border);
}


.cp-alert {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(15, 158, 143, 0.12);
  border: 1px solid rgba(15, 158, 143, 0.3);
  color: #0b6f64;
  font-weight: 600;
}

.cp-alert--error {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.35);
  color: #be123c;
}

.cp-input.is-invalid {
  border-color: #f43f5e;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15);
}

.cp-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: grid;
  gap: 12px;
  z-index: 9999;
  width: min(360px, 92vw);
}

.cp-toast {
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--cp-shadow-soft);
  display: grid;
  gap: 6px;
  animation: toastIn 0.35s ease both;
}

.cp-toast__title {
  font-weight: 700;
  font-size: 0.95rem;
}

.cp-toast__message {
  color: var(--cp-ink-soft);
  font-size: 0.9rem;
}

.cp-toast--success {
  border-color: rgba(15, 158, 143, 0.5);
}

.cp-toast--error {
  border-color: rgba(244, 63, 94, 0.5);
}

.cp-toast--warning {
  border-color: rgba(203, 150, 50, 0.5);
}

.cp-toast--info {
  border-color: rgba(16, 158, 163, 0.4);
}

.cp-toast__close {
  justify-self: end;
  border: none;
  background: transparent;
  color: var(--cp-ink-soft);
  cursor: pointer;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cp-btn-sm {
  padding: 8px 12px;
  font-size: 0.85rem;
  border-radius: 10px;
}

.cp-input-sm {
  padding: 8px 10px;
  font-size: 0.85rem;
  border-radius: 10px;
}

.cp-row-tight {
  gap: 8px;
  flex-wrap: nowrap;
}

.dataTables_wrapper {
  font-family: var(--cp-font);
  width: 100%;
  overflow-x: auto;
}

.dataTables_wrapper .dataTables_scroll {
  min-width: 100%;
}

.dataTables_wrapper table.dataTable {
  width: 100% !important;
}

.dataTables_wrapper .dataTables_filter {
  text-align: left;
}

.dataTables_wrapper .dataTables_length {
  text-align: right;
}

body[data-lang="en"] .dataTables_wrapper .dataTables_filter {
  text-align: right;
}

body[data-lang="en"] .dataTables_wrapper .dataTables_length {
  text-align: left;
}

.dataTables_wrapper .dataTables_paginate {
  text-align: center;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  padding: 6px 10px;
  font-family: var(--cp-font);
  margin-inline-start: 8px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 10px;
  margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(16, 158, 163, 0.12) !important;
  border-color: rgba(16, 158, 163, 0.3) !important;
  color: var(--cp-blue-strong) !important;
}

.cp-dt-header,
.cp-dt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.cp-dt-footer {
  margin-top: 12px;
}

.dataTables_wrapper .dt-buttons .dt-button {
  border: 1px solid var(--cp-border);
  background: #fff;
  color: var(--cp-ink);
  border-radius: 10px;
  padding: 6px 12px;
  margin-inline-end: 6px;
  font-family: var(--cp-font);
}

.dataTables_wrapper .dt-buttons .dt-button:hover {
  border-color: rgba(16, 158, 163, 0.4);
  background: rgba(16, 158, 163, 0.08);
  color: var(--cp-blue-strong);
}

.dataTables_wrapper .dt-buttons .dt-button:disabled {
  opacity: 0.6;
}

.select2-container--default .select2-selection--single {
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--cp-border);
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--cp-ink);
  line-height: 1;
  padding-right: 14px;
  padding-left: 36px;
  text-align: right;
}

body[data-lang="en"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-right: 36px;
  padding-left: 14px;
  text-align: left;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  left: 10px;
  right: auto;
}

body[data-lang="en"] .select2-container--default .select2-selection--single .select2-selection__arrow {
  left: auto;
  right: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--cp-ink-soft);
}

.select2-dropdown {
  border-radius: 12px;
  border-color: var(--cp-border);
  font-family: var(--cp-font);
}

.cp-input-sm + .select2 .select2-selection--single {
  height: 36px;
}

.cp-input-sm + .select2 .select2-selection--single .select2-selection__rendered {
  font-size: 0.85rem;
  padding-right: 10px;
}

.cp-doctor-hero {
  background: linear-gradient(135deg, rgba(16, 158, 163, 0.16), rgba(15, 158, 143, 0.12));
  border-bottom: 1px solid rgba(16, 158, 163, 0.2);
}

.cp-doctor-hero-card {
  display: grid;
  gap: 16px;
}

.cp-doctor-hero-main {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cp-doctor-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--cp-blue), var(--cp-teal));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.3rem;
}

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

.cp-doctor-hero-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--cp-panel);
}

.cp-doctor-hero-info div {
  display: grid;
  gap: 4px;
}

.cp-doctor-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 20px;
  align-items: start;
}

.cp-doctor-main {
  display: grid;
  gap: 18px;
}

.cp-doctor-panel {
  display: grid;
  gap: 12px;
}

.cp-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.cp-admin-clinics-layout {
  grid-template-columns: minmax(0, 1fr);
}

.cp-admin-departments-layout {
  gap: 20px;
}

.cp-admin-departments-form-card {
  width: min(100%, 760px);
}

.cp-admin-departments-table-card {
  padding: 0;
  overflow: hidden;
}

.cp-admin-departments-table-card .cp-section-title {
  padding: 22px 24px 0;
  margin-bottom: 0;
}

.cp-admin-departments-table-wrap {
  padding: 16px 24px 24px;
}

.cp-admin-departments-table-wrap .dataTables_wrapper {
  overflow-x: auto;
}

.cp-admin-departments-table-wrap .cp-table {
  min-width: 1100px;
  box-shadow: none;
  border: 1px solid var(--cp-border);
}

.cp-admin-departments-table-wrap .cp-table th:nth-child(5),
.cp-admin-departments-table-wrap .cp-table td:nth-child(5) {
  min-width: 260px;
  white-space: normal;
}

.cp-admin-departments-table-wrap .cp-table th:nth-child(6),
.cp-admin-departments-table-wrap .cp-table td:nth-child(6),
.cp-admin-departments-table-wrap .cp-table th:nth-child(7),
.cp-admin-departments-table-wrap .cp-table td:nth-child(7) {
  white-space: nowrap;
}

.cp-week-table td {
  vertical-align: middle;
}

.cp-date-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(120px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.cp-date-card {
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--cp-border);
  background: #fff;
  cursor: pointer;
  display: grid;
  gap: 4px;
  text-align: center;
  font-weight: 600;
  min-width: 120px;
}

.cp-date-card.is-active {
  border-color: rgba(16, 158, 163, 0.4);
  background: rgba(16, 158, 163, 0.08);
  color: var(--cp-blue-strong);
}

.cp-date-card.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cp-slot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.cp-slot-btn {
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  padding: 6px 12px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  color: var(--cp-ink);
}

.cp-slot-btn.is-selected {
  background: rgba(15, 158, 143, 0.16);
  border-color: rgba(15, 158, 143, 0.4);
  color: #0b6f64;
}

.cp-stars {
  display: inline-flex;
  gap: 2px;
  color: #fbbf24;
  font-size: 0.95rem;
}

.cp-review-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  background: var(--cp-panel);
}

.cp-rating-box {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--cp-border);
  min-width: 120px;
}

.cp-rating-box strong {
  font-size: 1.6rem;
}

.cp-review-meta {
  display: grid;
  gap: 6px;
  color: var(--cp-ink-soft);
}

.cp-review-list {
  display: grid;
  gap: 12px;
}

.cp-review-form {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--cp-border);
  display: grid;
  gap: 12px;
}

.cp-review-card {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--cp-border);
  background: #fff;
  display: grid;
  gap: 10px;
}

.cp-review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.cp-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(16, 158, 163, 0.12);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--cp-blue-strong);
}

.cp-review-body {
  color: var(--cp-ink-soft);
}

.cp-booking-panel--doctor {
  top: 110px;
}

.cp-clinic-hero {
  background: linear-gradient(135deg, rgba(16, 158, 163, 0.14), rgba(15, 158, 143, 0.12));
  border-bottom: 1px solid rgba(16, 158, 163, 0.2);
}

.cp-clinic-hero-card {
  display: grid;
  gap: 16px;
}

.cp-clinic-hero-main {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cp-clinic-hero-logo {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  border: 1px solid var(--cp-border);
  background: var(--cp-panel);
  display: grid;
  place-items: center;
  overflow: hidden;
}

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

.cp-clinic-rating {
  margin-top: 6px;
}

.cp-clinic-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  background: var(--cp-panel);
  padding: 12px;
  border-radius: 16px;
}

.cp-clinic-stats div {
  display: grid;
  gap: 4px;
}

.cp-clinic-shell {
  display: grid;
  gap: 18px;
}

.cp-clinic-panel {
  display: grid;
  gap: 12px;
}

.cp-clinic-overview {
  background: linear-gradient(135deg, rgba(16, 158, 163, 0.08), rgba(15, 158, 143, 0.06));
}

.cp-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--cp-border);
}

.cp-overview-grid div {
  display: grid;
  gap: 4px;
}

.cp-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: 160px;
  gap: 12px;
}

.cp-gallery-item {
  background: linear-gradient(135deg, rgba(16, 158, 163, 0.18), rgba(15, 158, 143, 0.16));
  border-radius: 18px;
  border: 1px solid var(--cp-border);
  background-size: cover;
  background-position: center;
}

.cp-doctor-media-section { margin-top: 12px; }
.cp-doctor-media-block + .cp-doctor-media-block { margin-top: 16px; }

.cp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.cp-gallery-grid .cp-gallery-item {
  display: block;
  height: 140px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cp-gallery-grid .cp-gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.cp-gallery-item--pdf {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(248, 113, 113, 0.08));
}

.cp-gallery-pdf-icon {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 1px;
  color: #b91c1c;
  background: #fff;
  border-radius: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(185, 28, 28, 0.3);
}

.cp-gallery-pdf-label {
  font-size: 0.8rem;
  color: #334155;
  text-align: center;
  word-break: break-word;
}

.cp-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .cp-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
  .cp-gallery-grid .cp-gallery-item { height: 110px; }
}

.cp-gallery-item--main {
  grid-row: span 2;
}

@media (max-width: 900px) {
  .cp-gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: 180px;
  }

  .cp-gallery-item--main {
    grid-row: auto;
  }
}

@media (max-width: 1100px) {
  .cp-doctor-shell {
    grid-template-columns: 1fr;
  }

  .cp-booking-panel--doctor {
    position: relative;
    top: auto;
  }

  .cp-review-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .cp-doctor-hero-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .cp-date-scroll {
    grid-auto-columns: minmax(110px, 1fr);
  }
}

.cp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.cp-modal-backdrop[hidden] {
  display: none;
}

.cp-modal {
  width: min(980px, 95vw);
  max-height: 90vh;
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--cp-border);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cp-application-decision-modal {
  width: min(720px, 94vw);
}

/* ── Grid toolbar (search input + page-size selector) ──────────────────── */
.cp-grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cp-grid-toolbar-search {
  position: relative;
  flex: 1 1 280px;
  max-width: 360px;
}

.cp-grid-toolbar-search .cp-input {
  width: 100%;
  padding-inline-start: 36px;
}

.cp-grid-toolbar-icon {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.55;
  font-size: 0.95rem;
  pointer-events: none;
}

.cp-grid-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cp-grid-toolbar-pagesize {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}

.cp-grid-toolbar-pagesize select {
  width: auto;
  min-width: 70px;
}

.cp-grid-toolbar-count {
  font-size: 0.85rem;
}

/* ── Pagination footer ─────────────────────────────────────────────────── */
.cp-grid-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.cp-grid-pagination[hidden] {
  display: none;
}

.cp-grid-pagination-info {
  font-size: 0.88rem;
  color: var(--cp-muted);
  min-width: 180px;
  text-align: center;
}

.cp-grid-pagination .cp-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Applications table polish ─────────────────────────────────────────── */

/* Hide the "Rejection reason" column on tabs other than "rejected".
   We toggle `.cp-show-reject-col` on the table from JS instead of using the
   `hidden` attribute on a single <th>, because that left the data row out
   of sync (header hidden but no matching td hidden → misaligned columns). */
.cp-applications-table:not(.cp-show-reject-col) .cp-col-reject-reason {
  display: none;
}

.cp-applications-table tbody tr {
  transition: background-color 0.15s;
}

.cp-applications-table tbody tr:hover {
  background: rgba(10, 143, 124, 0.04);
}

.cp-applications-table th,
.cp-applications-table td {
  vertical-align: middle;
}

.cp-app-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cp-app-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.cp-app-name-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cp-app-name-primary {
  font-weight: 600;
  color: var(--cp-ink);
  line-height: 1.2;
}

.cp-app-name-secondary {
  font-size: 0.78rem;
  color: var(--cp-muted);
  line-height: 1.2;
  margin-top: 2px;
}

.cp-mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--cp-muted);
  letter-spacing: 0.02em;
}

.cp-app-details {
  background: var(--cp-bg-soft, #f8fafc);
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 12px 0 16px;
  display: grid;
  gap: 8px;
}

.cp-app-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 16px;
}

.cp-app-details-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
}

.cp-app-details-row > .cp-app-details-label {
  color: var(--cp-muted);
  font-size: 0.75rem;
}

.cp-app-details-row > .cp-app-details-value {
  font-weight: 600;
  word-break: break-word;
}

.cp-app-details-files {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px dashed var(--cp-border);
  margin-top: 4px;
}

.cp-app-details-files .cp-btn {
  font-size: 0.78rem;
}

.cp-app-success {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 12px;
}

.cp-app-success-title {
  font-weight: 600;
  color: #047857;
}

[data-theme="dark"] .cp-app-details {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .cp-app-success {
  background: rgba(16, 185, 129, 0.15);
}

.cp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--cp-border);
}

.cp-modal-kicker {
  font-size: 0.85rem;
  color: var(--cp-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

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

.cp-modal-close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--cp-muted);
}

.cp-modal-body {
  padding: 20px 22px;
  overflow: auto;
}

.cp-import-step {
  display: none;
}

.cp-import-step.is-active {
  display: block;
}

.cp-import-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.cp-import-preview,
.cp-import-mapping,
.cp-import-validation,
.cp-import-result {
  margin-top: 14px;
}

.cp-import-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.cp-table-compact th,
.cp-table-compact td {
  padding: 8px 10px;
  font-size: 0.9rem;
}

.cp-list {
  margin: 0;
  padding-inline-start: 16px;
}

/* ========== Dark Mode ========== */
[data-theme="dark"] {
  --cp-bg: #0f172a;
  --cp-ink: #e2e8f0;
  --cp-ink-soft: #94a3b8;
  --cp-blue: #36c4c9;
  --cp-blue-strong: #66d2d6;
  --cp-blue-rgb: 54, 196, 201;
  --cp-teal: #2dd4bf;
  --cp-teal-strong: #5eead4;
  --cp-teal-rgb: 45, 212, 191;
  --cp-amber: #d5ab5b;
  --cp-amber-strong: #e0c084;
  --cp-amber-rgb: 213, 171, 91;
  --cp-danger: #f87171;
  --cp-danger-rgb: 248, 113, 113;
  --cp-success: #4ade80;
  --cp-success-rgb: 74, 222, 128;
  --cp-panel: #1e293b;
  --cp-card: #1e293b;
  --cp-border: #334155;
  --cp-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  --cp-shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.25);
  --cp-shadow-xs: 0 2px 10px rgba(0, 0, 0, 0.3);
  --cp-chart-1: #36c4c9;
  --cp-chart-2: #2dd4bf;
  --cp-chart-3: #d5ab5b;
  --cp-chart-4: #a78bfa;
  --cp-chart-5: #f87171;
  --cp-chart-6: #94a3b8;
}

[data-theme="dark"] body {
  background: var(--cp-bg);
}

[data-theme="dark"] .cp-public-header,
[data-theme="dark"] .cp-topbar {
  background: #1e293b;
  border-color: var(--cp-border);
}

[data-theme="dark"] .cp-feature-card,
[data-theme="dark"] .cp-clinic-card,
[data-theme="dark"] .cp-doctor-card,
[data-theme="dark"] .cp-review-card,
[data-theme="dark"] .cp-toast,
[data-theme="dark"] .cp-modal,
[data-theme="dark"] .cp-filter-panel,
[data-theme="dark"] .cp-hero-summary,
[data-theme="dark"] .cp-featured-section,
[data-theme="dark"] .cp-search-strip,
[data-theme="dark"] .cp-date-card,
[data-theme="dark"] .cp-table {
  background: #1e293b;
  border-color: var(--cp-border);
  color: var(--cp-ink);
}

[data-theme="dark"] .cp-btn-outline {
  background: #1e293b;
  border-color: var(--cp-border);
  color: var(--cp-ink);
}

[data-theme="dark"] .cp-btn-outline:hover {
  border-color: var(--cp-blue);
  color: var(--cp-blue);
}

[data-theme="dark"] .cp-input,
[data-theme="dark"] .cp-input-group {
  background: #0f172a;
  border-color: var(--cp-border);
  color: var(--cp-ink);
}

[data-theme="dark"] .cp-table th {
  background: #0f172a;
  color: var(--cp-ink-soft);
}

[data-theme="dark"] .cp-table td {
  border-color: var(--cp-border);
}

[data-theme="dark"] .cp-pill {
  background: #1e293b;
  border-color: var(--cp-border);
  color: var(--cp-ink);
}

[data-theme="dark"] .cp-pill.is-active {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--cp-blue-strong);
}

[data-theme="dark"] .cp-hero-step {
  background: #0f172a;
  border-color: var(--cp-border);
}

[data-theme="dark"] .cp-slot-btn {
  background: #0f172a;
  border-color: var(--cp-border);
  color: var(--cp-ink);
}

[data-theme="dark"] .cp-fav-btn {
  background: #1e293b;
  border-color: var(--cp-border);
  color: var(--cp-ink-soft);
}

[data-theme="dark"] .cp-overview-grid,
[data-theme="dark"] .cp-rating-box {
  background: #0f172a;
  border-color: var(--cp-border);
}

[data-theme="dark"] .cp-tip {
  background: rgba(30, 41, 59, 0.8);
  border-color: var(--cp-border);
}

[data-theme="dark"] .cp-modal-backdrop {
  background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .cp-modal-header {
  border-color: var(--cp-border);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background: #0f172a;
  border-color: var(--cp-border);
  color: var(--cp-ink);
}

[data-theme="dark"] .dataTables_wrapper .dt-buttons .dt-button {
  background: #1e293b;
  border-color: var(--cp-border);
  color: var(--cp-ink);
}

[data-theme="dark"] .select2-container--default .select2-selection--single {
  background: #0f172a;
  border-color: var(--cp-border);
  color: var(--cp-ink);
}

[data-theme="dark"] .select2-dropdown {
  background: #1e293b;
  border-color: var(--cp-border);
  color: var(--cp-ink);
}

[data-theme="dark"] .cp-explore-hero::before {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent 70%);
}

[data-theme="dark"] .cp-explore-hero::after {
  background: radial-gradient(circle, rgba(45, 212, 191, 0.3), transparent 70%);
}

[data-theme="dark"] .cp-gallery-item {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(45, 212, 191, 0.12));
}

/* ── Share menu (doctor + clinic) ── */
.cp-share-group { position: relative; display: inline-block; }
.cp-share-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  min-width: 180px;
  padding: 6px;
  z-index: 30;
  display: flex;
  flex-direction: column;
}
.cp-share-item {
  background: transparent;
  border: 0;
  text-align: start;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #0e3c4c;
  text-decoration: none;
  cursor: pointer;
}
.cp-share-item:hover { background: #f1f5f9; }
[data-theme="dark"] .cp-share-menu { background: #0f172a; border-color: #1e293b; }
[data-theme="dark"] .cp-share-item { color: #e2e8f0; }
[data-theme="dark"] .cp-share-item:hover { background: #1e293b; }

/* ── Sticky ad rail (home / booking / queue) ── */
/* Back to the original flat card (image thumbnail + text + CTA on a solid
   brand gradient), now cycling through every active ad as a small carousel:
   .cp-ad-rail-slide is swapped + fades in on each rotation, dots below show
   position and are clickable to jump directly to a slide. See loadAdRail /
   _coreRenderAdRail in cp-core.js. */
.cp-ad-rail {
  position: sticky;
  top: 80px;
  background: linear-gradient(135deg, var(--cp-teal), var(--cp-teal-strong));
  color: #fff;
  border-radius: 14px;
  margin-bottom: 16px;
  z-index: 5;
  min-height: 112px;
  overflow: hidden;
}
.cp-ad-rail-slide {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: 112px;
  color: #fff;
  text-decoration: none;
  animation: cpAdRailFade 0.35s ease both;
}
@keyframes cpAdRailFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.cp-ad-rail-slide img { max-height: 84px; border-radius: 8px; flex: 0 0 auto; }
.cp-ad-rail-slide-body { flex: 1; min-width: 0; }
.cp-ad-rail-title { display: block; font-size: 1rem; font-weight: 700; }
.cp-ad-rail-text { font-size: 0.85rem; opacity: 0.9; }
.cp-ad-rail-cta {
  flex: 0 0 auto;
  background: #fff;
  color: var(--cp-teal-strong);
  border-color: transparent;
}
.cp-ad-rail-slide:hover .cp-ad-rail-cta,
.cp-ad-rail-cta:hover {
  background: var(--cp-amber);
  color: #fff;
}
.cp-ad-rail-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-bottom: 10px;
}
.cp-ad-rail-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}
.cp-ad-rail-dot.is-active { background: #fff; width: 16px; }
.cp-ad-rail .cp-ad-empty { font-size: 0.85rem; opacity: 0.85; padding: 14px 16px; display: block; }
@media (max-width: 720px) {
  .cp-ad-rail { position: relative; top: auto; border-radius: 10px; }
  .cp-ad-rail-slide { padding: 10px 12px; }
}

/* ── Availability dot for doctor cards ── */
.cp-avail-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-inline-end: 6px;
  vertical-align: middle;
}
.cp-avail-now { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.cp-avail-today { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.cp-avail-tomorrow { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.18); }
.cp-avail-soon { background: #94a3b8; }

.cp-chip-success { background: #dcfce7; color: #166534; border-color: #86efac; }
[data-theme="dark"] .cp-chip-success { background: #14532d; color: #bbf7d0; border-color: #166534; }
.cp-chip-danger,
.cp-chip--danger { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
[data-theme="dark"] .cp-chip-danger,
[data-theme="dark"] .cp-chip--danger { background: #7f1d1d; color: #fecaca; border-color: #991b1b; }
.cp-chip-info { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }
[data-theme="dark"] .cp-chip-info { background: #1e3a5f; color: #bfdbfe; border-color: #1e40af; }
.cp-chip-warning { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
[data-theme="dark"] .cp-chip-warning { background: #78350f; color: #fde68a; border-color: #92400e; }
[data-theme="dark"] .cp-chip-neutral { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; border-color: transparent; }

/* ── Category pills (Explore + booking step 0) ── */
.cp-category-pill {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  color: #475569;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.cp-category-pill:hover { border-color: #0f9e8f; color: #0b6f64; }
.cp-category-pill.is-active {
  background: linear-gradient(135deg, #0f9e8f, #0b6f64);
  color: #fff;
  border-color: #0b6f64;
  box-shadow: 0 4px 12px rgba(15,194,192,0.25);
}
[data-theme="dark"] .cp-category-pill { background: #0f172a; border-color: #1e293b; color: #cbd5e1; }
[data-theme="dark"] .cp-category-pill:hover { border-color: #2dd4bf; color: #99f6e4; }

/* ── Clinic policies list ── */
.cp-policies-list { padding-inline-start: 18px; margin: 8px 0; color: #334155; line-height: 1.85; }
.cp-policies-list li { margin-bottom: 6px; }
[data-theme="dark"] .cp-policies-list { color: #cbd5e1; }

/* ── Favorites section at the top of the sidebar ── */
.cp-nav-favorites {
  padding: 8px 4px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.cp-nav-favorites-header {
  font-size: 0.72rem; font-weight: 700; color: #fbbf24;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 12px; margin-bottom: 4px;
}
.cp-nav-favorites-list { display: flex; flex-direction: column; gap: 2px; }
.cp-nav-favorites-list .cp-nav-link { font-size: 0.82rem; padding: 7px 12px; }
.cp-fav-remove {
  background: none; border: none; color: rgba(255, 255, 255, 0.5);
  cursor: pointer; font-size: 0.85rem; padding: 0 4px;
  transition: color 0.15s;
}
.cp-fav-remove:hover { color: #ef4444; }

/* Favorites star in the topbar */
.cp-fav-toggle.is-active { color: #fbbf24 !important; }
.cp-fav-toggle:hover { color: #fbbf24 !important; }

/* User menu dropdown (topbar) */
.cp-user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  z-index: 1500;
  padding: 6px;
  animation: cp-menu-in 0.15s ease-out;
}
@keyframes cp-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.cp-user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cp-ink);
  text-decoration: none;
  text-align: start;
  font-size: 0.88rem;
  font-family: inherit;
  transition: background 0.12s;
}
.cp-user-menu-item:hover { background: rgba(15, 158, 143, 0.1); }
.cp-user-menu-item--danger { color: #ef4444; }
.cp-user-menu-item--danger:hover { background: rgba(239, 68, 68, 0.1); }
.cp-user-menu-sep { height: 1px; background: var(--cp-border); margin: 4px 6px; }

[data-theme="dark"] .cp-user-menu-panel {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .cp-user-menu-item { color: #e2e8f0; }
[data-theme="dark"] .cp-user-menu-item--danger { color: #f87171; }
[data-theme="dark"] .cp-user-menu-sep { background: rgba(255, 255, 255, 0.1); }

/* ── Sidebar nav group (collapsible + hover fly-out) ── */
.cp-nav-group { margin: 2px 0; position: relative; }
.cp-nav-group-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 10px 16px;
  background: rgba(255, 255, 255, 0.06); border: none; cursor: pointer;
  font-size: 0.82rem; font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-align: start; letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 10px;
  transition: background 0.15s;
}
.cp-nav-group-toggle:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.cp-nav-group.is-open > .cp-nav-group-toggle { background: rgba(15, 158, 143, 0.15); color: #fff; }
.cp-nav-group-toggle::after {
  content: "▾"; font-size: 0.7rem; opacity: 0.6; transition: transform 0.2s;
}
.cp-nav-group.is-open > .cp-nav-group-toggle::after { transform: rotate(180deg); }
.cp-nav-group-items {
  display: none; padding-inline-start: 12px;
  border-inline-start: 2px solid rgba(15, 158, 143, 0.3);
  margin-inline-start: 16px; margin-top: 4px;
}
.cp-nav-group.is-open > .cp-nav-group-items { display: block; }
.cp-nav-group-items .cp-nav-link { font-size: 0.8rem; padding: 7px 12px; color: rgba(255, 255, 255, 0.9); }
.cp-nav-group-items .cp-nav-link:hover { color: #fff; }
.cp-nav-group-items .cp-nav-link.is-active { color: #fff; }

/* ── Hover fly-out: JS-driven. The .cp-nav uses overflow-y:auto which forces
      overflow-x:auto too in most browsers, clipping any CSS-only side panel.
      So cp-favorites.js clones the items into a fixed-positioned wrapper. ── */
.cp-nav-flyout {
  position: fixed;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 240px;
  max-width: 300px;
  padding: 8px;
  background: linear-gradient(180deg, #055b7c 0%, #0c8b9e 55%, #109ea3 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  z-index: 2000;
}
.cp-nav-flyout.is-open { display: flex; }
.cp-nav-flyout .cp-nav-link {
  padding: 10px 14px;
  font-size: 0.85rem;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  display: block;
  transition: background 0.15s;
}
.cp-nav-flyout .cp-nav-link:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.cp-nav-flyout .cp-nav-link.is-active {
  background: rgba(15, 158, 143, 0.2);
  color: #fff;
  font-weight: 600;
}

/* ── Lightweight overlay (renamed from cp-modal to avoid clashing with the
       legacy .cp-modal-backdrop/.cp-modal pair used by import + applications). ── */
.cp-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 16px;
}
.cp-overlay[hidden] { display: none !important; }
.cp-overlay-card {
  background: #fff; border-radius: 14px;
  width: 100%; max-width: 520px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  max-height: 90vh; overflow-y: auto;
}
.cp-overlay-large { max-width: 760px; }
[data-theme="dark"] .cp-overlay-card { background: #0f172a; color: #e2e8f0; }
.cp-text-danger { color: #dc2626 !important; font-weight: 700; }
.cp-text-warning { color: #d97706 !important; font-weight: 700; }

/* Themed confirm dialog — matches the booking-card visual language so the
   cancel/payment popups on /Patient/Bookings feel native to the page. */
.cp-overlay-card--booking {
  background: var(--cp-card);
  border: 1px solid var(--cp-border);
  border-radius: 22px;
  box-shadow: var(--cp-shadow);
  padding: 1.5rem;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.cp-confirm__header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.cp-confirm__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 158, 163, 0.12);
  color: var(--cp-blue-strong);
}
.cp-confirm__icon svg { width: 22px; height: 22px; }
.cp-confirm__icon--danger {
  background: rgba(239, 68, 68, 0.14);
  color: #dc2626;
}
.cp-confirm__icon--success {
  background: rgba(15, 158, 143, 0.16);
  color: var(--cp-teal);
}
.cp-confirm__title-group { min-width: 0; flex: 1; }
.cp-confirm__title {
  margin: 0;
  color: var(--cp-ink);
  font-weight: 800;
  font-size: 1.08rem;
  line-height: 1.35;
}
.cp-confirm__subtitle {
  margin: 0.25rem 0 0;
  color: var(--cp-ink-soft);
  font-size: 0.93rem;
  line-height: 1.55;
}
.cp-confirm__info {
  background: var(--cp-panel);
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.5rem;
  color: var(--cp-ink-soft);
  font-size: 0.92rem;
}
.cp-confirm__info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.cp-confirm__info-icon { flex: 0 0 auto; opacity: 0.85; }
.cp-confirm__info-row strong { color: var(--cp-ink); font-weight: 700; }
.cp-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}
[data-theme="dark"] .cp-overlay-card--booking {
  background: var(--cp-card);
  border-color: var(--cp-border);
  color: var(--cp-ink);
}
[data-theme="dark"] .cp-confirm__info { background: var(--cp-panel); }
@media (max-width: 640px) {
  .cp-overlay-card--booking { padding: 1.15rem; border-radius: 18px; }
  .cp-confirm__icon { width: 40px; height: 40px; border-radius: 12px; }
  .cp-confirm__actions { flex-direction: column-reverse; }
  .cp-confirm__actions > .cp-btn { width: 100%; justify-content: center; }
}

/* Auto horizontal-scroll for any <table class="cp-table"> sitting inside a
   .cp-card — keeps wide tables (hospital dashboard, doctor accounts,
   schedule grid, pharmacy products...) usable on small screens without
   having to wrap each table manually.

   The card itself is the scroll container (scoped with :has() so only cards
   that actually contain a table become scrollable — form/content cards are
   left untouched). The table stays a REAL <table> (display:table), so the
   browser keeps a single shared column model for <thead>/<tbody>/<tfoot> and
   the header columns always line up with the body cells, including in RTL.
   A min-width lets wide tables scroll instead of compressing their columns;
   on full-width cards the table's width:100% wins and no scrollbar appears. */
.cp-card:has(> .cp-table),
.cp-card:has(> .cp-table-responsive) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cp-card > .cp-table {
  width: 100%;
  min-width: 640px;
}

/* Page-specific polish: the Provider › Accounts daily statement is a 10-column
   financial table that lives inside a half-width .cp-grid-2 card. The shared
   min-width keeps columns aligned, but 640px is tight for 10 columns, so give
   this one table a larger floor — it scrolls cleanly inside its card instead of
   crushing the numbers. Scoped to the page section id; markup is left unchanged. */
#provider-accounts .cp-table {
  min-width: 880px;
}

/* Sticky page header so filter chips and date inputs don't scroll off. */
.cp-page-header {
  position: sticky;
  top: 0;
  background: var(--cp-bg, #fff);
  z-index: 5;
  padding-block: 8px;
}
[data-theme="dark"] .cp-page-header { background: #0b1220; }

/* Mobile tweaks for grids / stats so they wrap nicely instead of overflowing. */
@media (max-width: 720px) {
  .cp-grid-2, .cp-grid-3, .cp-grid-4, .cp-grid-5 {
    grid-template-columns: 1fr !important;
  }
  .cp-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cp-page-header .cp-row { flex-wrap: wrap; }
  .cp-stat-card .cp-stat-value { font-size: 1.4rem; }
  .cp-overlay-card { padding: 16px; border-radius: 10px; }
}

/* Busy state for submit buttons (aria-busy=true set by global submit guard) */
button[aria-busy="true"],
input[type="submit"][aria-busy="true"] {
  position: relative;
  opacity: 0.7;
  cursor: progress;
}
button[aria-busy="true"]::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline-start: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cpSpin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes cpSpin {
  to { transform: rotate(360deg); }
}

/* Loading skeleton fallback for async tables */
.cp-skeleton {
  display: inline-block;
  height: 0.8em;
  width: 60%;
  background: linear-gradient(90deg, #e5e7eb, #f3f4f6, #e5e7eb);
  background-size: 200% 100%;
  animation: cpSkeleton 1.2s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes cpSkeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
[data-theme="dark"] .cp-skeleton {
  background: linear-gradient(90deg, #1e293b, #334155, #1e293b);
  background-size: 200% 100%;
}

/* ── Clinic live view (mirrors the mobile dashboard layout) ────────────── */
.cp-clinic-view .cv-doctor-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  border: 1px solid #bae6fd;
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cv-doctor-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cv-doctor-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e0f2fe;
  display: grid;
  place-items: center;
  font-size: 28px;
  flex-shrink: 0;
}
.cv-doctor-card__info h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #0c2340;
}
.cv-doctor-card__info .cp-muted {
  font-size: 0.9rem;
}
.cv-doctor-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cv-doctor-card__actions .cv-btn-start {
  background: var(--cp-teal-strong);
  color: #fff;
  border: 0;
}
.cv-doctor-card__actions .cv-btn-start:hover { background: var(--cp-teal); }
.cv-doctor-card__actions .cv-btn-pause {
  border-color: rgba(var(--cp-amber-rgb), 0.5);
  color: var(--cp-amber-strong);
}

/* 12-cell colored stat grid — matches the mobile mock palette */
.cv-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 1100px) {
  .cv-stat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .cv-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.cv-stat {
  border-radius: 14px;
  padding: 14px 14px 12px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.cv-stat .cp-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
}
.cv-stat--paidCount     { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.cv-stat--currentQueue  { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.cv-stat--paidTotal     { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.cv-stat--present       { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.cv-stat--waitTime      { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.cv-stat--waiting       { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.cv-stat--postponed     { background: #fef9c3; border-color: #fde047; color: #854d0e; }
.cv-stat--total         { background: #e0f2fe; border-color: #7dd3fc; color: #075985; }
.cv-stat--cancelled     { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.cv-stat--checkup       { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; }
.cv-stat--completed     { background: #dcfce7; border-color: #86efac; color: #166534; }
.cv-stat--consult       { background: #fce7f3; border-color: #f9a8d4; color: #9d174d; }

/* Bookings table — mirrors the mobile chips style */
.cv-bookings-table thead tr {
  background: linear-gradient(135deg, #0c2340, #0f2f55);
  color: #fff;
}
.cv-bookings-table thead th {
  padding: 10px;
  font-weight: 700;
}
.cv-bookings-table tbody tr.is-current  { background: #fef3c7; }
.cv-bookings-table tbody tr.is-next     { background: #dcfce7; }
.cv-bookings-table tbody tr.is-done     { background: #f1f5f9; color: #94a3b8; }
.cv-bookings-table tbody tr.is-postponed { background: #fff7ed; }

.cv-type-chip {
  font-weight: 700;
  padding: 4px 10px;
}
.cv-type-checkup     { background: #cffafe; color: #155e75; }
.cv-type-consultation { background: #fce7f3; color: #9d174d; }
.cv-type-followup    { background: #fef3c7; color: #92400e; }
.cv-type-session     { background: #ede9fe; color: #5b21b6; }
.cv-type-operation   { background: #fee2e2; color: #b91c1c; }
.cv-type-emergency   { background: #fecaca; color: #7f1d1d; font-weight: 800; }

.cv-q-chip { font-weight: 700; padding: 4px 10px; }
.cv-q-current   { background: #fed7aa; color: #c2410c; }
.cv-q-next      { background: #bbf7d0; color: #166534; }
.cv-q-done      { background: #e2e8f0; color: #475569; }
.cv-q-upcoming  { background: #e0e7ff; color: #3730a3; }
.cv-q-postponed { background: #fef3c7; color: #92400e; }
.cv-q-cancel    { background: #fee2e2; color: #991b1b; }
.cv-q-noshow    { background: #fecaca; color: #7f1d1d; }

.cv-attend-check {
  width: 18px;
  height: 18px;
  accent-color: #0b6f64;
}

/* Bottom CTAs — green "Add" + orange "Emergency" */
.cv-cta-row {
  display: flex;
  gap: 12px;
  justify-content: stretch;
  margin-top: 14px;
}
.cv-cta-row .cv-btn-add {
  flex: 2;
  background: var(--cp-blue);
  color: #fff;
  border: 0;
  padding: 14px;
  font-size: 1rem;
  font-weight: 800;
  border-radius: 12px;
}
.cv-cta-row .cv-btn-add:hover { background: var(--cp-blue-strong); }
.cv-cta-row .cv-btn-emergency {
  flex: 1;
  background: rgba(var(--cp-danger-rgb), 0.08);
  color: var(--cp-danger);
  border: 2px solid rgba(var(--cp-danger-rgb), 0.35);
  padding: 14px;
  font-size: 1rem;
  font-weight: 800;
  border-radius: 12px;
}
.cv-cta-row .cv-btn-emergency:hover {
  background: rgba(var(--cp-danger-rgb), 0.14);
  border-color: rgba(var(--cp-danger-rgb), 0.5);
  color: #991b1b;
}

.cp-grid-bookings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.cp-booking-card {
  background: var(--cp-card);
  border: 1px solid var(--cp-border);
  border-radius: 22px;
  box-shadow: var(--cp-shadow-soft);
  padding: 1.25rem 1.35rem;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.cp-booking-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cp-booking-card__title {
  min-width: 0;
}

.cp-booking-card__doctor {
  margin: 0;
  color: var(--cp-ink);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.cp-booking-card__specialty {
  margin-top: 0.15rem;
  color: var(--cp-ink-soft);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.cp-booking-status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(15, 158, 143, 0.14);
  color: var(--cp-teal);
}

.cp-booking-status--warning {
  background: rgba(245, 158, 11, 0.14);
  color: #b7791f;
}

.cp-booking-status--danger {
  background: rgba(239, 68, 68, 0.14);
  color: #dc2626;
}

.cp-booking-status--muted {
  background: rgba(100, 116, 139, 0.14);
  color: var(--cp-ink-soft);
}

.cp-booking-card__info {
  display: grid;
  gap: 0.55rem;
  color: var(--cp-ink-soft);
}

.cp-booking-info-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.6;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cp-booking-info-icon {
  flex: 0 0 auto;
  opacity: 0.85;
}

.cp-booking-queue-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  background: rgba(148, 163, 184, 0.18);
  color: var(--cp-ink-soft);
  font-weight: 700;
  font-size: 0.85rem;
}

.cp-booking-card__actions {
  margin-top: auto;
  padding-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.cp-booking-action {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--cp-teal);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
}

.cp-booking-action:hover {
  text-decoration: underline;
}

.cp-booking-action--warning {
  color: #d97706;
}

.cp-booking-action--danger {
  color: #dc2626;
}

@media (max-width: 640px) {
  .cp-grid-bookings {
    grid-template-columns: 1fr;
  }

  .cp-booking-card {
    padding: 1rem;
    min-height: auto;
  }

  .cp-booking-card__head {
    gap: 0.75rem;
  }

  .cp-booking-card__actions {
    gap: 0.65rem;
  }
}

/* ── Provider Bookings: toolbar, status select, chips, pager, hidden export host ── */
/* Toolbar layout: filters arranged in a 2-column grid (RTL-aware via CSS grid +
   logical properties), then the action buttons drop onto their own row below. */
.cp-bookings-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  margin-block-end: 1rem;
}

.cp-bookings-toolbar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.cp-bookings-toolbar__group--grow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0.75rem 1rem;
  width: 100%;
}

.cp-bookings-toolbar__group--actions {
  /* Action buttons row sits under the filters; flex-start works for both LTR
     and RTL (browser handles the writing direction natively). */
  justify-content: flex-start;
}

.cp-bookings-toolbar__search,
.cp-bookings-toolbar__select {
  /* Inside the 2-col grid each input fills its cell. */
  width: 100%;
  min-width: 0;
}

.cp-bookings-toolbar__menu {
  position: relative;
  display: inline-block;
}

.cp-bookings-toolbar__menu-list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.35rem);
  z-index: 30;
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  min-width: 160px;
  background: var(--cp-card, #fff);
  border: 1px solid var(--cp-border, #e2e8f0);
  border-radius: 12px;
  box-shadow: var(--cp-shadow-soft, 0 8px 24px rgba(15, 23, 42, 0.12));
}

.cp-bookings-toolbar__menu-list[hidden] {
  display: none;
}

.cp-bookings-toolbar__menu-list li {
  list-style: none;
}

.cp-bookings-toolbar__menu-list button {
  display: block;
  width: 100%;
  text-align: start;
  padding: 0.45rem 0.65rem;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--cp-ink, #0f172a);
  font: inherit;
  cursor: pointer;
}

.cp-bookings-toolbar__menu-list button:hover,
.cp-bookings-toolbar__menu-list button:focus {
  background: rgba(15, 118, 110, 0.08);
  outline: none;
}

.cp-booking-card__chips {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cp-booking-card__status-row {
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  align-items: center;
}

.cp-booking-card__status-select {
  flex: 1 1 160px;
  min-width: 0;
}

.cp-bookings-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  padding-block: 0.85rem;
  margin-block-start: 0.5rem;
}

.cp-bookings-pager[hidden] {
  display: none;
}

.cp-bookings-pager__info {
  font-size: 0.9rem;
  color: var(--cp-ink-soft, #64748b);
}

/* Keep the hidden DataTable measurable for DataTables Buttons without exposing it. */
.cp-bookings-export-host {
  position: absolute;
  inset-inline-start: -10000px;
  top: 0;
  width: 1200px;
  pointer-events: none;
  opacity: 0;
}

@media (max-width: 640px) {
  /* Collapse the 2-col filter grid to a single column on narrow screens. */
  .cp-bookings-toolbar__group--grow {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp-bookings-toolbar__group {
    width: 100%;
  }

  .cp-booking-card__status-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cp-booking-card__status-select {
    width: 100%;
  }
}

/* Phase 5: emergency badge used in queue rows and booking cards. */
.cp-emergency-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
[data-theme="dark"] .cp-emergency-badge {
  background: #450a0a;
  color: #fecaca;
  border-color: #7f1d1d;
}

/* Phase 1.3: subtle disabled hint for pause-booking button when caller lacks
   CanStopBooking. UI hides via .is-disabled; backend still enforces the gate. */
.cp-btn.is-disabled,
.cp-btn[disabled].is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Phase 3: clearer banner copy for booking-stopped state on the queue page. */
.cp-banner-paused {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  margin: 8px 0;
}
[data-theme="dark"] .cp-banner-paused {
  background: #422006;
  color: #fde68a;
  border-color: #78350f;
}
.cp-banner-paused__title { font-weight: 800; margin-bottom: 4px; }

/* Phase 4: chart card layout. Without `maintainAspectRatio: false` Chart.js grows
   the canvas to fill its container indefinitely; pairing this rule with a fixed
   card height stops the overflow. On print we relax the height so each chart sits
   naturally on its page and page breaks land between cards. */
.cp-chart-card {
  position: relative;
  height: 320px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cp-chart-card > .cp-section-title,
.cp-chart-card > h3,
.cp-chart-card > h4 {
  flex-shrink: 0;
  margin: 0 0 10px 0;
}
.cp-chart-card > canvas {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  width: 100% !important;
}

@media (max-width: 768px) {
  .cp-chart-card { height: 260px; }
}

/* Visible only when printing — used by the shared Reports page to echo the
   active filter range/status into the PDF after the on-screen filter card is
   hidden. */
.cp-print-only { display: none; }

/* Named page used only by the shared Reports print. Body opts in via JS by
   adding `printing-report` before window.print(); other prints (prescriptions
   etc.) keep their browser-default orientation. */
@page reportLandscape {
  size: A4 landscape;
  margin: 10mm;
}

@media print {
  body { background: #fff; }
  /* Hide both the app sidebar AND the topbar (header bar with avatar/lang/
     theme/notifications) so the PDF only shows the report content. The
     topbar was leaking into the PDF previously. */
  .cp-page-header > .cp-row,
  #rep-period,
  #rep-refresh,
  #rep-pdf,
  #rep-build-custom,
  #provider-clinic-reports .cp-row > .cp-btn,
  .cp-ad-rail,
  .cp-sidebar,
  .cp-topbar,
  .js-print-hide { display: none !important; }

  /* After the sidebar/topbar are gone, the report content should use the
     full printable width. */
  .cp-shell, .cp-main, .cp-content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .cp-print-only { display: block !important; }

  .cp-card, .cp-chart-card {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #cbd5e1;
  }
  .cp-chart-card { height: 280px; }
  .cp-grid { display: block !important; }
  .cp-grid > * { margin-bottom: 12px; }

  /* Shared Reports page: hide the on-screen filter card entirely (the print
     summary at the top of the report replaces it) and keep table chrome from
     splitting awkwardly across pages. */
  #report-root .cp-card:has(#rep-apply) { display: none !important; }
  #report-root .cp-table thead { display: table-header-group; }
  #report-root .cp-table tr { page-break-inside: avoid; }
  #report-root #rep-print-summary {
    padding: 0.5rem 0;
    border-bottom: 1px solid #cbd5e1;
    margin-bottom: 0.75rem;
  }

  /* ── Print improvements scoped to body.printing-report (added by the
     /Provider/Reports PDF button before window.print()) so other prints
     (prescriptions etc.) are not affected. ── */

  /* Landscape A4 for the reports PDF — fits the wide detailed-bookings table. */
  body.printing-report { page: reportLandscape; }

  /* The on-screen detail table is wrapped in a scrolling viewport
     (max-height: 60vh, overflow: auto). In print, that crops the table to
     the visible chunk. Override so the whole table is rendered and lets
     the browser handle page breaks. */
  body.printing-report #report-root .cp-table-wrapper {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Detailed-bookings table fit: fixed layout + smaller font + wrapping so
     long Arabic patient/doctor names don't push columns off the page. */
  body.printing-report #report-root .cp-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    font-size: 10px !important;
  }
  body.printing-report #report-root .cp-table th,
  body.printing-report #report-root .cp-table td {
    padding: 4px 6px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    vertical-align: top !important;
  }

  /* Drop the two lowest-information columns (Code = col 1, Queue = col 8)
     from the detailed bookings table only — the bookings-by-status table has
     a different column set and must keep all its columns. */
  body.printing-report #report-root .cp-table:has(#report-detail-body) thead th:nth-child(1),
  body.printing-report #report-root .cp-table:has(#report-detail-body) thead th:nth-child(8),
  body.printing-report #report-root #report-detail-body tr td:nth-child(1),
  body.printing-report #report-root #report-detail-body tr td:nth-child(8) {
    display: none !important;
  }

  /* Status chip cell on detail rows — flatten the chip so it doesn't wrap
     into a tiny pill on a low-DPI PDF render. */
  body.printing-report #report-root .cp-chip {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
  }
}

/* Group 1 Part B — Hospital Reception TV display.
   • .cp-tv-mode hides the regular provider sidebar/topbar so the page can fill the
     entire viewport. Triggered by ViewData["TvMode"]=true when a ?token= is present.
   • .cp-display-grid is a 2-column layout (main + sticky side rail) that collapses
     to a single column under 1024px. Side rail hosts the carousel.
   • .cp-display-carousel uses a CSS opacity fade between absolutely-positioned
     slides — driven by the .is-active class toggled in JS every 8 seconds.
   • Font sizes use clamp() so the page is legible at 4K without a code change. */

.cp-body.cp-tv-mode .cp-sidebar,
.cp-body.cp-tv-mode .cp-topbar { display: none !important; }
.cp-body.cp-tv-mode .cp-shell { grid-template-columns: 1fr !important; }
.cp-body.cp-tv-mode .cp-main { padding: 16px; }
.cp-body.cp-tv-mode { font-size: clamp(0.95rem, 1.1vw, 1.25rem); }
.cp-body.cp-tv-mode h2 { font-size: clamp(1.4rem, 2.2vw, 2.4rem); }
.cp-body.cp-tv-mode h4 { font-size: clamp(1.1rem, 1.6vw, 1.6rem); }

.cp-display-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
  /* Hospital Reception (May 2026): pin the rail to the visual right edge regardless
     of the page's writing direction. Without this, CSS Grid would flip column order
     in RTL and the dark media rail would sit on the visual left. Children re-establish
     their own direction so Arabic text inside doctor cards / queue tables / slide
     captions continues to flow RTL. */
  direction: ltr;
}
.cp-display-main,
.cp-display-rail { direction: inherit; }
[dir="rtl"] .cp-display-main,
[dir="rtl"] .cp-display-rail { direction: rtl; }
.cp-display-main { min-width: 0; }
.cp-display-rail {
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}
@media (max-width: 1023px) {
  .cp-display-grid { grid-template-columns: 1fr; }
  .cp-display-rail { position: static; height: auto; min-height: 220px; }
}

.cp-display-doctor-card { padding: 12px; }
.cp-display-current {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #0b6f64;
  line-height: 1;
}
.cp-display-queue-table { font-size: 0.9rem; margin-top: 8px; }

/* Carousel: each slide is absolutely positioned and fades in/out on .is-active. */
.cp-display-carousel {
  position: relative;
  flex: 1 1 auto;
  min-height: 280px;
  border-radius: 12px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 4px 18px rgba(15,23,42,0.18);
}
.cp-display-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 12px;
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
  pointer-events: none;
  color: #e2e8f0;
  text-align: center;
}
.cp-display-slide.is-active { opacity: 1; pointer-events: auto; }
.cp-display-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.cp-display-slide-caption {
  position: absolute;
  bottom: 8px;
  inset-inline: 8px;
  background: rgba(15,23,42,0.65);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
}

/* Group 2 — Tasks kanban board. Three equal columns on desktop, stacking vertically
   under 960px. Each column is its own scrollable card so long task lists don't
   stretch the page indefinitely. */
.cp-tasks-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 960px) {
  .cp-tasks-board { grid-template-columns: 1fr; }
}
.cp-tasks-column {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 320px);
  min-height: 360px;
  padding: 12px;
}
.cp-tasks-column-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}
.cp-tasks-column-body {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}
.cp-tasks-card {
  display: block;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}
[data-theme="dark"] .cp-tasks-card {
  background: #1e293b;
  border-color: #334155;
}