/* Derma Clean Design System (Admin + Public)
   Primary: Calm Purple | Accent: Soft Pink | Gradient: CTA only
*/

:root{
  --derma-primary:#6d28d9;
  --derma-primary-2:#7c3aed;
  --derma-accent:#ec4899;
  --derma-accent-2:#f472b6;
  --derma-bg:#f6f7fb;
  --derma-card:#ffffff;
  --derma-text:#111827;
  --derma-muted:#6b7280;
  --derma-border:#e5e7eb;
  --derma-soft: rgba(109,40,217,.10);
  --derma-soft-border: rgba(109,40,217,.18);
  --derma-gradient: linear-gradient(135deg, var(--derma-primary), var(--derma-accent));
}

/* Override Bootstrap primary to remove blue utilities */
:root{
  --bs-primary: var(--derma-primary);
  --bs-primary-rgb: 109,40,217;
  --bs-link-color: var(--derma-primary);
  --bs-link-hover-color: var(--derma-primary-2);
}

body.clinic-body{ background: var(--derma-bg); color: var(--derma-text); }

/* Links */
a{ color: var(--derma-primary); }
a:hover{ color: var(--derma-primary-2); }

/* Buttons: primary is SOLID (not gradient) */
.btn-primary, .btn.btn-primary{ background: var(--derma-primary) !important; border-color: var(--derma-primary) !important; }
.btn-primary:hover, .btn.btn-primary:hover{ background: var(--derma-primary-2) !important; border-color: var(--derma-primary-2) !important; }
.btn-outline-primary{ color: var(--derma-primary) !important; border-color: var(--derma-primary) !important; }
.btn-outline-primary:hover{ background: var(--derma-soft) !important; border-color: var(--derma-primary-2) !important; color: var(--derma-primary) !important; }

/* CTA Gradient helper */
.btn-derma-cta{ background: var(--derma-gradient) !important; border-color: transparent !important; }
.btn-derma-cta:hover{ filter: brightness(1.03); }

/* Utilities: bg-primary should be solid, not gradient */
.bg-primary, .badge.bg-primary{ background: var(--derma-primary) !important; }
.text-primary{ color: var(--derma-primary) !important; }
.border-primary{ border-color: var(--derma-primary) !important; }

/* Focus */
.form-control:focus, .form-select:focus{ border-color: var(--derma-primary) !important; box-shadow: 0 0 0 .2rem rgba(109,40,217,.15) !important; }
.form-check-input:checked{ background-color: var(--derma-primary) !important; border-color: var(--derma-primary) !important; }

/* Pagination */
.page-item.active .page-link{ background: var(--derma-primary) !important; border-color: var(--derma-primary) !important; }
.page-link{ color: var(--derma-primary) !important; }

/* Premium components that had blue */
.mf-pill{ background: var(--derma-soft) !important; border:1px solid var(--derma-soft-border) !important; color: #4c1d95 !important; }
.mf-badge-neutral{ background: var(--derma-soft) !important; border:1px solid var(--derma-soft-border) !important; color: #4c1d95 !important; }
.bg-soft-primary{ background: var(--derma-soft) !important; color:#4c1d95 !important; }

/* Sidebar (dark) - calm active state (no gradient) */
body.derma-theme .sidebar{ background:#0f172a; }
body.derma-theme .sidebar-link{ border-radius: 12px; }
body.derma-theme .sidebar-link.active{ background: rgba(109,40,217,.22) !important; color:#fff !important; border:1px solid rgba(255,255,255,0.12) !important; position: relative; }
body.derma-theme .sidebar-link.active:before{ content:''; position:absolute; right:-1px; top:10px; bottom:10px; width:4px; background: var(--derma-accent); border-radius: 8px; }
body.derma-theme .sidebar-link:hover{ background: rgba(236,72,153,.10); }

/* Dashboard stat cards polish */
.stat-card{ border:1px solid var(--derma-border) !important; background: var(--derma-card) !important; }
.stat-card .stat-link{ color: var(--derma-primary) !important; }
.stat-card .stat-link:hover{ color: var(--derma-primary-2) !important; }

/* Public booking: gradient only for main submit */
.public-booking-page .submit-btn, .public-booking-page .btn-submit, .public-booking-page .btn-derma-cta{ background: var(--derma-gradient) !important; border-color: transparent !important; }

/* Booking header strip */
.public-booking-page .card-header, .public-booking-page .booking-header{ background: var(--derma-gradient) !important; color:#fff !important; }