/*
 * Clinic Flat Design System
 *
 * Tokens lifted from the reception-heatmap page (`reception-heatmap.htm`) so the
 * whole admin/registration UI shares one visual language: warm off-white bg,
 * 0.5 px hairline borders, no gradients, monochrome `#1a1a1a` accents, dental-blue
 * `#378ADD` for highlights.
 *
 * Strategy: override the legacy "premium" classes already used across the theme
 * (`.navbar-premium`, `.shadow-premium`, `.btn-primary-premium`, `.bg-primary-premium`,
 * `.text-primary-gradient`, `.card-premium`, `.nav-pills .nav-link.active`) so that
 * every existing page picks up the flat look without markup changes. New pages can
 * use the `.cf-*` utilities for fresh layouts.
 */

/* ─────────────────────────── 1. Design tokens ─────────────────────────── */
:root {
  /* Surfaces */
  --cf-bg:             #faf9f7;
  --cf-bg-secondary:   #f3f1ec;
  --cf-bg-card:        #ffffff;
  --cf-bg-success:     #e1f5ee;
  --cf-bg-info:        #e3effc;
  --cf-bg-warning:     #fef3c7;
  --cf-bg-danger:      #fee2e2;

  /* Text */
  --cf-text:           #1a1a1a;
  --cf-text-muted:     #6b6b6b;
  --cf-text-faint:     #9a9a9a;
  --cf-text-success:   #0c7a4d;
  --cf-text-info:      #185fa5;
  --cf-text-warning:   #92400e;
  --cf-text-danger:    #b3261e;

  /* Accents */
  --cf-accent:         #378ADD;        /* dental blue — used for "booked"/links */
  --cf-accent-strong:  #1a1a1a;        /* dark — used for active toggles */
  --cf-success:        #10b981;
  --cf-warning:        #f59e0b;
  --cf-danger:         #ef4444;

  /* Lines & shapes */
  --cf-border:         #e5e3dc;
  --cf-border-strong:  #cfcdc6;
  --cf-radius-sm:      6px;
  --cf-radius:         8px;
  --cf-radius-lg:      12px;

  /* Elevation (very restrained — heatmap uses almost no shadows) */
  --cf-shadow-sm:      0 1px 2px rgba(0,0,0,0.04);
  --cf-shadow:         0 2px 8px rgba(0,0,0,0.05);
  --cf-shadow-lg:      -8px 0 24px rgba(0,0,0,0.08);
}

/* ─────────────────────────── 2. Body / typography ─────────────────────────── */
body {
  background: var(--cf-bg);
  color: var(--cf-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}

a { color: var(--cf-accent); }
a:hover { color: var(--cf-text-info); }

/* ─────────────────────────── 3. Top nav (legacy `.navbar-premium`) ─────────────────────────── */
.navbar-premium {
  background: #fff !important;
  backdrop-filter: none;
  border-bottom: 0.5px solid var(--cf-border);
  box-shadow: none;
  padding-top: 8px;
  padding-bottom: 8px;
}

.navbar-premium .navbar-brand {
  font-size: 15px;
  font-weight: 600;
  color: var(--cf-text) !important;
  letter-spacing: -0.01em;
}

.navbar-premium .navbar-brand .fs-6 {
  font-size: 12px !important;
  color: var(--cf-text-faint) !important;
  font-weight: 400 !important;
  margin-left: 6px;
}

.navbar-premium .navbar-brand i {
  color: var(--cf-accent);
}

.navbar-premium .btn-light {
  background: transparent;
  border: 0.5px solid var(--cf-border);
  border-radius: var(--cf-radius);
  padding: 5px 10px;
  color: var(--cf-text);
  font-size: 13px;
}
.navbar-premium .btn-light:hover {
  background: var(--cf-bg-secondary);
  border-color: var(--cf-border-strong);
}

/* Avatar circle inside top nav */
.navbar-premium .avatar-circle {
  width: 30px !important;
  height: 30px !important;
  font-size: 11px;
  font-weight: 600;
  background: var(--cf-bg-secondary) !important;
  color: var(--cf-text) !important;
  border-radius: 50%;
}

.navbar-premium .form-select {
  border: 0.5px solid var(--cf-border);
  border-radius: var(--cf-radius);
  font-size: 13px;
  padding: 4px 28px 4px 10px;
  background-color: #fff;
}
.navbar-premium .form-select:focus {
  border-color: var(--cf-accent);
  box-shadow: 0 0 0 3px rgba(55,138,221,0.12);
}

/* ─────────────────────────── 4. Tab bar — `.nav-pills` row under top nav ─────────────────────────── */
/* The pages use `<div class="bg-white border-bottom shadow-sm"><ul class="nav nav-pills">…</ul></div>`
   We flatten it to a hairline tab bar with dark active pill (matches heatmap `.hm-seg`). */
.bg-white.border-bottom.shadow-sm {
  background: #fff !important;
  box-shadow: none !important;
  border-bottom: 0.5px solid var(--cf-border) !important;
  margin-bottom: 16px !important;
}

.nav-pills .nav-link {
  color: var(--cf-text-muted);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--cf-radius-sm);
  font-weight: 500;
  background: transparent;
  transition: background .12s, color .12s;
}
.nav-pills .nav-link:hover {
  background: var(--cf-bg-secondary);
  color: var(--cf-text);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-pills .nav-link.active.bg-primary-premium {
  background: var(--cf-accent-strong) !important;
  color: #fff !important;
  background-image: none !important;
}
.nav-pills .nav-link i { margin-right: 4px; opacity: 0.85; }

/* ─────────────────────────── 5. Buttons — flatten "premium" gradients ─────────────────────────── */
.btn {
  border-radius: var(--cf-radius);
  font-weight: 500;
  font-size: 13px;
  padding: 6px 14px;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-sm { font-size: 12px; padding: 4px 10px; }
.btn-lg { font-size: 14px; padding: 9px 18px; }

.btn-primary,
.btn-primary-premium {
  background: var(--cf-accent) !important;
  background-image: none !important;
  border: 0.5px solid var(--cf-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn-primary:hover,
.btn-primary-premium:hover {
  background: var(--cf-text-info) !important;
  border-color: var(--cf-text-info) !important;
  transform: none !important;
}

.btn-outline-primary {
  border: 0.5px solid var(--cf-accent);
  color: var(--cf-accent);
  background: transparent;
}
.btn-outline-primary:hover { background: var(--cf-bg-info); color: var(--cf-text-info); border-color: var(--cf-accent); }

.btn-light {
  background: var(--cf-bg-secondary);
  border: 0.5px solid var(--cf-border);
  color: var(--cf-text);
}
.btn-light:hover {
  background: var(--cf-bg);
  border-color: var(--cf-border-strong);
}

.btn-success { background: var(--cf-success); border-color: var(--cf-success); }
.btn-danger  { background: var(--cf-danger);  border-color: var(--cf-danger); }
.btn-warning { background: var(--cf-warning); border-color: var(--cf-warning); color: #fff; }

/* Soft "ghost" variant for secondary actions */
.btn-ghost {
  background: transparent;
  border: 0.5px solid var(--cf-border);
  color: var(--cf-text-muted);
}
.btn-ghost:hover { background: var(--cf-bg-secondary); color: var(--cf-text); }

/* ─────────────────────────── 6. Cards / panels ─────────────────────────── */
.card,
.card-premium {
  background: var(--cf-bg-card);
  border: 0.5px solid var(--cf-border) !important;
  border-radius: var(--cf-radius-lg);
  box-shadow: none;
  transition: none;
}
.card-premium:hover { transform: none; box-shadow: none; }
.card-header {
  background: var(--cf-bg);
  border-bottom: 0.5px solid var(--cf-border);
  padding: 12px 16px;
  font-weight: 600;
  font-size: 13px;
}
.card-body { padding: 14px 16px; }
.card-footer {
  background: var(--cf-bg);
  border-top: 0.5px solid var(--cf-border);
}

.shadow-premium { box-shadow: var(--cf-shadow) !important; }

/* New flat panel (preferred for fresh markup) */
.cf-panel {
  background: var(--cf-bg-card);
  border: 0.5px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
  overflow: hidden;
}
.cf-panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--cf-border);
  font-weight: 600;
  font-size: 13px;
}
.cf-panel-body { padding: 14px 16px; }

/* ─────────────────────────── 7. Forms ─────────────────────────── */
.form-control,
.form-select {
  border: 0.5px solid var(--cf-border);
  border-radius: var(--cf-radius);
  padding: 6px 10px;
  font-size: 13px;
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--cf-accent);
  box-shadow: 0 0 0 3px rgba(55,138,221,0.12);
}
.form-control-sm, .form-select-sm { font-size: 12px; padding: 4px 8px; }

.form-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--cf-text-muted);
  margin-bottom: 4px;
}

.form-check-input:checked {
  background-color: var(--cf-accent);
  border-color: var(--cf-accent);
}

/* Search input matching heatmap */
.cf-search-input {
  border: 0.5px solid var(--cf-border);
  border-radius: var(--cf-radius);
  padding: 6px 10px;
  font-size: 13px;
  background: #fff;
  width: 100%;
}

/* ─────────────────────────── 8. Segmented controls (heatmap `.hm-seg` ported) ─────────────────────────── */
.cf-seg {
  display: inline-flex;
  background: #fff;
  border-radius: var(--cf-radius);
  padding: 3px;
  gap: 2px;
  border: 0.5px solid var(--cf-border);
}
.cf-seg button,
.cf-seg .btn {
  background: transparent;
  border: 0;
  padding: 5px 12px;
  font-size: 12px;
  border-radius: var(--cf-radius-sm);
  cursor: pointer;
  color: var(--cf-text-muted);
  transition: background .12s, color .12s;
  font-weight: 500;
}
.cf-seg button.active,
.cf-seg .btn.active {
  background: var(--cf-accent-strong);
  color: #fff;
}
.cf-seg button:hover:not(.active),
.cf-seg .btn:hover:not(.active) {
  background: var(--cf-bg-secondary);
  color: var(--cf-text);
}

/* ─────────────────────────── 9. Tables ─────────────────────────── */
.table {
  font-size: 13px;
  color: var(--cf-text);
  margin-bottom: 0;
}
.table > :not(caption) > * > * {
  padding: 8px 12px;
  border-bottom-color: var(--cf-border);
}
.table thead th {
  background: var(--cf-bg);
  border-bottom: 0.5px solid var(--cf-border);
  font-weight: 500;
  color: var(--cf-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px;
}
.table-hover > tbody > tr:hover > * {
  background: var(--cf-bg-secondary);
  --bs-table-hover-bg: var(--cf-bg-secondary);
}
.table-bordered, .table-bordered > * > * { border-color: var(--cf-border); }
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: var(--cf-bg);
  --bs-table-striped-bg: var(--cf-bg);
}

/* ─────────────────────────── 10. Badges & status pills ─────────────────────────── */
.badge {
  font-weight: 500;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.badge.bg-primary { background: var(--cf-accent) !important; }
.badge.bg-secondary { background: var(--cf-bg-secondary) !important; color: var(--cf-text) !important; }
.badge.bg-success { background: var(--cf-success) !important; }
.badge.bg-warning { background: var(--cf-warning) !important; color: #fff !important; }
.badge.bg-danger  { background: var(--cf-danger) !important; }

.badge-soft-success { background: var(--cf-bg-success); color: var(--cf-text-success); }
.badge-soft-warning { background: var(--cf-bg-warning); color: var(--cf-text-warning); }
.badge-soft-danger  { background: var(--cf-bg-danger);  color: var(--cf-text-danger); }
.badge-soft-info    { background: var(--cf-bg-info);    color: var(--cf-text-info); }

/* ─────────────────────────── 11. Stats card (heatmap port) ─────────────────────────── */
.cf-stat {
  background: #fff;
  padding: 12px 14px;
  border-radius: var(--cf-radius-lg);
  border: 0.5px solid var(--cf-border);
}
.cf-stat-label {
  font-size: 10px;
  color: var(--cf-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.cf-stat-value {
  font-size: 22px;
  font-weight: 600;
  margin-top: 3px;
  line-height: 1;
}
.cf-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

/* ─────────────────────────── 12. Filter bar (heatmap port) ─────────────────────────── */
.cf-filter-bar {
  background: var(--cf-bg-secondary);
  padding: 12px 14px;
  border-radius: var(--cf-radius-lg);
}
.cf-filter-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--cf-text-faint);
  letter-spacing: 0.5px;
  margin-bottom: 5px;
  font-weight: 600;
}

/* ─────────────────────────── 13. Info card (panel sub-block) ─────────────────────────── */
.cf-info-card {
  background: var(--cf-bg);
  padding: 10px 12px;
  border-radius: var(--cf-radius);
  margin-bottom: 10px;
  border: 0.5px solid var(--cf-border);
}
.cf-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--cf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 14px 0 8px;
}

/* ─────────────────────────── 14. Toast (heatmap port) ─────────────────────────── */
.cf-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cf-text);
  color: #fff;
  padding: 10px 18px;
  border-radius: 24px;
  z-index: 10000;
  font-size: 13px;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.cf-toast.show { opacity: 1; }

/* ─────────────────────────── 15. Dropdown ─────────────────────────── */
.dropdown-menu {
  border: 0.5px solid var(--cf-border) !important;
  border-radius: var(--cf-radius);
  box-shadow: var(--cf-shadow);
  font-size: 13px;
  padding: 4px;
}
.dropdown-item {
  border-radius: var(--cf-radius-sm);
  padding: 6px 10px;
  font-size: 13px;
}
.dropdown-item:hover { background: var(--cf-bg-secondary); }
.dropdown-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--cf-text-faint);
  padding: 6px 10px;
}

/* ─────────────────────────── 16. Modal / Offcanvas ─────────────────────────── */
.modal-content {
  border: 0.5px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow);
}
.modal-header {
  border-bottom: 0.5px solid var(--cf-border);
  background: var(--cf-bg-secondary);
  padding: 12px 16px;
}
.modal-footer {
  border-top: 0.5px solid var(--cf-border);
  background: var(--cf-bg);
  padding: 12px 16px;
}

.offcanvas {
  border: 0;
  box-shadow: var(--cf-shadow-lg);
}
.offcanvas-header {
  background: var(--cf-bg-secondary);
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--cf-border);
}

/* ─────────────────────────── 17. Alerts ─────────────────────────── */
.alert {
  border: 0.5px solid var(--cf-border);
  border-radius: var(--cf-radius);
  padding: 10px 12px;
  font-size: 13px;
}
.alert-info    { background: var(--cf-bg-info);    color: var(--cf-text-info);    border-color: rgba(24,95,165,0.18); }
.alert-success { background: var(--cf-bg-success); color: var(--cf-text-success); border-color: rgba(12,122,77,0.18); }
.alert-warning { background: var(--cf-bg-warning); color: var(--cf-text-warning); border-color: rgba(146,64,14,0.18); }
.alert-danger  { background: var(--cf-bg-danger);  color: var(--cf-text-danger);  border-color: rgba(179,38,30,0.18); }

/* ─────────────────────────── 18. Compatibility shims ─────────────────────────── */
/* Old gradient text → flat dark; no functional change in markup. */
.text-primary-gradient {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--cf-text) !important;
}

/* `.bg-primary-soft`/`.bg-success-soft`/`.bg-danger-soft` — flat soft chip colors */
.bg-primary-soft  { background: var(--cf-bg-info)    !important; color: var(--cf-text-info); }
.bg-success-soft  { background: var(--cf-bg-success) !important; color: var(--cf-text-success); }
.bg-danger-soft   { background: var(--cf-bg-danger)  !important; color: var(--cf-text-danger); }
.bg-warning-soft  { background: var(--cf-bg-warning) !important; color: var(--cf-text-warning); }

.text-primary { color: var(--cf-accent) !important; }
.text-success { color: var(--cf-text-success) !important; }
.text-danger  { color: var(--cf-text-danger) !important; }
.text-warning { color: var(--cf-text-warning) !important; }
.text-muted   { color: var(--cf-text-muted) !important; }

/* ─────────────────────────── 19. Scrollbars ─────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--cf-bg); }
::-webkit-scrollbar-thumb { background: var(--cf-border-strong); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--cf-text-faint); }