/* =====================================================================
   ORADENTIQ AI — Design system
   White-first, medical-premium UI. Tailwind utilities handle layout;
   these component classes give buttons, inputs, cards, tables, modals
   and toasts a consistent, polished look independent of the CDN.
   ===================================================================== */

:root {
  --brand-50:  #eef4ff;
  --brand-100: #d9e6ff;
  --brand-200: #bcd3ff;
  --brand-300: #8eb5ff;
  --brand-400: #598cff;
  --brand-500: #2f6bff;
  --brand-600: #1a51e6;
  --brand-700: #1740b4;
  --brand-800: #183a91;
  --brand-900: #193575;

  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;

  --ring: rgba(47, 107, 255, 0.28);
  --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 12px rgba(16, 24, 40, 0.04);
  --soft-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
  --radius: 16px;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  background-image:
    radial-gradient(1200px 480px at 100% -10%, rgba(47,107,255,0.05), transparent 60%),
    radial-gradient(900px 420px at -10% 0%, rgba(47,107,255,0.045), transparent 55%);
  background-attachment: fixed;
}

::selection { background: var(--brand-200); color: var(--brand-900); }

/* Scrollbars ---------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.875rem; line-height: 1;
  padding: 0.65rem 1.1rem; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: all 0.18s ease;
  text-decoration: none;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  box-shadow: 0 6px 16px rgba(47, 107, 255, 0.28);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(47, 107, 255, 0.34); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  color: var(--ink-800); background: #fff; border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.btn-secondary:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }

.btn-ghost { color: var(--ink-600); background: transparent; }
.btn-ghost:hover { background: #f1f5f9; color: var(--ink-900); }

.btn-danger { color: #fff; background: linear-gradient(135deg, #f43f5e, #e11d48); box-shadow: 0 6px 16px rgba(225,29,72,0.24); }
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(225,29,72,0.3); }

.btn-sm { padding: 0.45rem 0.75rem; font-size: 0.8125rem; border-radius: 10px; }
.btn-icon { padding: 0.5rem; border-radius: 10px; }
.btn-block { width: 100%; }

/* =====================================================================
   Forms
   ===================================================================== */
.form-label {
  display: block; font-size: 0.78rem; font-weight: 600;
  color: var(--ink-800); margin-bottom: 0.3rem; letter-spacing: -0.005em;
}
.form-label .req { color: #f43f5e; margin-left: 2px; }
.form-hint { font-size: 0.72rem; color: var(--ink-400); margin-top: 0.3rem; line-height: 1.35; }

.input, .select, .textarea {
  width: 100%; font-size: 0.875rem; color: var(--ink-900); line-height: 1.35;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 0.5rem 0.7rem; transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: #aab4c5; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--ring);
}
.input:hover:not(:focus), .select:hover:not(:focus), .textarea:hover:not(:focus) { border-color: #cbd5e1; }
.textarea { resize: vertical; min-height: 68px; line-height: 1.5; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.6rem center; padding-right: 2.2rem;
}

.input-group { position: relative; }
.input-group .input { padding-left: 2.4rem; }
.input-group .input-icon {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-400); pointer-events: none; display: grid; place-items: center;
}

/* Checkbox chips (working days) */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  padding: 0.45rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 10px;
  font-size: 0.8125rem; font-weight: 500; color: var(--ink-600);
  background: #fff; transition: all 0.15s; user-select: none;
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:hover { border-color: var(--brand-300); }
.chip:has(input:checked) {
  background: var(--brand-50); border-color: var(--brand-400);
  color: var(--brand-700); box-shadow: inset 0 0 0 1px var(--brand-300);
}

/* Grouped form sections — each renders as a clearly separated card ---- */
.form-body { background: #f6f8fc; }
.form-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.form-section {
  background: #fff; border: 1px solid #eceff5; border-radius: 14px;
  padding: 0.9rem 1rem 1rem; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.form-section-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; }
.form-section-ico {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: var(--brand-600);
  background: var(--brand-50); border: 1px solid var(--brand-100);
}
.form-section-ico svg { width: 15px; height: 15px; }
.form-section-title { font-size: 0.82rem; font-weight: 700; color: var(--ink-900); letter-spacing: -0.01em; line-height: 1.2; }
.form-section-sub { font-size: 0.72rem; color: var(--ink-400); font-weight: 500; margin-top: 1px; }
/* Field grid inside a section — 2 columns on desktop, 1 on mobile ----- */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 0.85rem; }
.field-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid + .field-grid { margin-top: 0.7rem; }
.field-grid .col-2 { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .field-grid, .field-grid.g3 { grid-template-columns: 1fr; }
  .field-grid .col-2 { grid-column: auto; }
}

/* Framed opening/closing time range --------------------------------- */
.time-range {
  display: flex; align-items: center; gap: 0.35rem; width: 100%;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 0.15rem 0.5rem 0.15rem 0.7rem; transition: border-color 0.15s, box-shadow 0.15s;
}
.time-range:focus-within { border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--ring); }
.time-range .time-ico { color: var(--ink-400); flex: none; display: grid; place-items: center; }
.time-range .time-input {
  flex: 1; min-width: 0; border: none; background: transparent; text-align: center;
  font-size: 0.875rem; font-weight: 600; color: var(--ink-900);
  padding: 0.35rem 0.1rem; appearance: none;
}
.time-range .time-input:focus { outline: none; }
.time-range .time-input::-webkit-calendar-picker-indicator { opacity: 0.45; cursor: pointer; margin: 0; }
.time-range .time-input::-webkit-calendar-picker-indicator:hover { opacity: 0.85; }
.time-range .time-sep { color: #cbd5e1; font-weight: 500; flex: none; }

/* Working-days selector (7-day grid + presets) ---------------------- */
.day-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; }
.day-chip {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 0.45rem 0.25rem; border: 1px solid #e2e8f0; border-radius: 9px;
  font-size: 0.78rem; font-weight: 600; color: var(--ink-500); background: #fff;
  cursor: pointer; user-select: none; transition: all 0.15s;
}
.day-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.day-chip:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }
.day-chip:has(input:checked) {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(47, 107, 255, 0.26);
}
.day-chip:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--ring); }
.day-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.65rem; }
.day-preset {
  font-size: 0.75rem; font-weight: 600; color: var(--ink-500);
  background: #f8fafc; border: 1px solid #eef1f6; border-radius: 999px;
  padding: 0.32rem 0.7rem; cursor: pointer; transition: all 0.15s;
}
.day-preset:hover { color: var(--brand-700); border-color: var(--brand-200); background: var(--brand-50); }
@media (max-width: 460px) {
  .day-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Per-day availability editor (multiple time slots per day) ---------- */
.avail-editor { border: 1px solid #e6eaf1; border-radius: 12px; background: #fff; overflow: hidden; }
.avail-day { padding: 0.5rem 0.75rem; border-top: 1px solid #f0f2f7; }
.avail-day:first-child { border-top: 0; }
.avail-day.is-on { background: #fbfcfe; }
.avail-day-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.avail-day-name { font-size: 0.8rem; font-weight: 700; color: #334155; letter-spacing: 0.02em; }
.avail-add {
  display: inline-flex; align-items: center; gap: 0.25rem; flex: none;
  font-size: 0.72rem; font-weight: 600; color: var(--brand-600);
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 999px;
  padding: 0.25rem 0.6rem; cursor: pointer; transition: all 0.15s;
}
.avail-add:hover { background: var(--brand-100); border-color: var(--brand-200); }
.avail-slots { margin-top: 0.45rem; display: flex; flex-direction: column; gap: 0.4rem; }
.avail-empty { font-size: 0.75rem; color: var(--ink-400); font-style: italic; padding: 0.1rem 0; }
.avail-slot { display: flex; align-items: center; gap: 0.4rem; }
.avail-time {
  flex: 1 1 6rem; min-width: 0; max-width: 9rem;
  font-size: 0.82rem; font-weight: 600; color: var(--ink-900); background: #fff;
  border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.35rem 0.5rem;
  appearance: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.avail-time:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--ring); }
.avail-time::-webkit-calendar-picker-indicator { opacity: 0.4; cursor: pointer; }
.avail-time::-webkit-calendar-picker-indicator:hover { opacity: 0.8; }
.avail-dash { color: #cbd5e1; font-weight: 500; flex: none; }
.avail-del {
  flex: none; margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px;
  color: #94a3b8; background: transparent; border: 1px solid transparent; border-radius: 8px;
  cursor: pointer; transition: all 0.15s;
}
.avail-del:hover { color: #fb7185; background: #fff1f2; }
.avail-slot.is-bad .avail-time { border-color: #fb7185; box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.16); }
.avail-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.avail-tool {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; font-weight: 600;
  color: var(--ink-500); background: #f8fafc; border: 1px solid #eef1f6; border-radius: 999px;
  padding: 0.3rem 0.7rem; cursor: pointer; transition: all 0.15s;
}
.avail-tool:hover { color: var(--brand-700); border-color: var(--brand-200); background: var(--brand-50); }
.avail-error { margin-top: 0.5rem; font-size: 0.75rem; font-weight: 600; color: #e11d48; line-height: 1.4; }

/* =====================================================================
   Cards & surfaces
   ===================================================================== */
.card {
  background: #fff; border: 1px solid #eef1f6; border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
.card-pad { padding: 1.25rem 1.35rem; }
.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--soft-shadow); }

.section-title { font-size: 1rem; font-weight: 700; color: var(--ink-900); letter-spacing: -0.01em; }

/* Stat cards */
.stat-card {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid #eef1f6; border-radius: var(--radius);
  padding: 1.3rem 1.4rem; box-shadow: var(--card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--soft-shadow); }
.stat-card::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47,107,255,0.10), transparent 70%);
}
.stat-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  box-shadow: 0 4px 12px rgba(47,107,255,0.20);
}
.stat-icon.amber { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 12px rgba(217,119,6,0.20); }
.stat-icon.emerald { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 4px 12px rgba(5,150,105,0.20); }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--ink-900); letter-spacing: -0.02em; line-height: 1; }
.stat-label { font-size: 0.85rem; color: var(--ink-500); font-weight: 500; }

/* =====================================================================
   Badges
   ===================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.25rem 0.6rem; border-radius: 999px; text-transform: capitalize;
  border: 1px solid transparent; white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-brand   { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.badge-emerald { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.badge-amber   { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.badge-rose    { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.badge-slate   { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
.badge-violet  { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }

/* =====================================================================
   Tables
   ===================================================================== */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid #eef1f6; background: #fff; box-shadow: var(--card-shadow); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 640px; }
table.data thead th {
  text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-400); padding: 0.85rem 1.1rem;
  background: #fbfcfe; border-bottom: 1px solid #eef1f6; white-space: nowrap;
}
table.data tbody td { padding: 0.9rem 1.1rem; border-bottom: 1px solid #f1f5f9; color: var(--ink-700); vertical-align: middle; }
table.data tbody tr { transition: background 0.12s; }
table.data tbody tr:hover { background: #fafbff; }
table.data tbody tr:last-child td { border-bottom: none; }
.cell-strong { font-weight: 600; color: var(--ink-900); }
.cell-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; color: var(--ink-600); }

/* Avatar */
.avatar {
  display: grid; place-items: center; flex: none; border-radius: 50%;
  font-weight: 700; color: var(--brand-700); background: var(--brand-100);
  width: 40px; height: 40px; font-size: 0.85rem;
}
.avatar-sm { width: 32px; height: 32px; font-size: 0.72rem; }

/* =====================================================================
   Sidebar navigation
   ===================================================================== */
.nav-link {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem;
  border-radius: 12px; font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.55);
  transition: all 0.15s; position: relative; text-decoration: none;
}
.nav-link svg { width: 20px; height: 20px; flex: none; color: rgba(255, 255, 255, 0.35); transition: color 0.15s; }
.nav-link:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.nav-link:hover svg { color: #fff; }
.nav-link.active { background: rgba(255, 255, 255, 0.15); color: #fff; font-weight: 600; }
.nav-link.active svg { color: #fff; }
.nav-link.active::before {
  content: ""; position: absolute; left: -0.85rem; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 999px; background: #fff;
}
.nav-section { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; padding: 0 0.85rem; }

.nav-logout { color: #fb7185; }
.nav-logout svg { color: #fb7185; }
.nav-logout:hover { background: rgba(225, 29, 72, 0.15); color: #fff; }
.nav-logout:hover svg { color: #f43f5e; }

/* =====================================================================
   Auth hero panel
   ===================================================================== */
.auth-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(255,255,255,0.14), transparent 60%),
    linear-gradient(150deg, var(--brand-700) 0%, var(--brand-600) 40%, var(--brand-800) 100%);
}
.auth-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.10), transparent 40%),
    radial-gradient(circle at 90% 30%, rgba(255,255,255,0.08), transparent 35%);
}
.auth-hero::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.auth-hero > * { position: relative; z-index: 1; }
.auth-contact a { color: rgba(255,255,255,0.92); text-decoration: none; transition: color 0.15s; }
.auth-contact a:hover { color: #fff; }

.brand-mark {
  display: grid; place-items: center; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 8px 20px rgba(47,107,255,0.35);
}

/* =====================================================================
   Modal / drawer
   ===================================================================== */
.modal { position: fixed; inset: 0; z-index: 60; display: none; }
.modal.open { display: block; }
.modal-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px); animation: fade 0.2s ease; }
.modal-dialog {
  position: relative; z-index: 1; margin: auto; background: #fff;
  border-radius: 20px; box-shadow: 0 30px 70px rgba(15,23,42,0.35);
  width: 100%; max-width: 720px; max-height: 92vh; display: flex; flex-direction: column;
  animation: pop 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-scroll { display: flex; align-items: flex-start; justify-content: center; min-height: 100%; padding: 1.25rem; }
.modal-head { padding: 1rem 1.25rem; border-bottom: 1px solid #eef1f6; display: flex; align-items: center; gap: 0.75rem; }
.modal-body { padding: 1.1rem 1.25rem; overflow-y: auto; }
.modal-foot { padding: 0.85rem 1.25rem; border-top: 1px solid #eef1f6; display: flex; justify-content: flex-end; gap: 0.6rem; background: #fbfcfe; border-radius: 0 0 20px 20px; }

.modal-scroll-outer { position: absolute; inset: 0; overflow-y: auto; }

/* =====================================================================
   Toasts (flash messages)
   ===================================================================== */
.toast-stack { position: fixed; top: 1.1rem; right: 1.1rem; z-index: 80; display: flex; flex-direction: column; gap: 0.6rem; width: min(400px, calc(100vw - 2rem)); }
.toast {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1rem;
  background: #fff; border: 1px solid #eef1f6; border-radius: 14px;
  box-shadow: var(--soft-shadow); animation: slidein 0.3s cubic-bezier(0.16,1,0.3,1);
}
.toast.hide { animation: slideout 0.3s ease forwards; }
.toast-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; }
.toast-success .toast-icon { background: linear-gradient(135deg, #10b981, #059669); }
.toast-error .toast-icon   { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.toast-info .toast-icon    { background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); }
.toast-body { flex: 1; min-width: 0; font-size: 0.85rem; color: var(--ink-700); line-height: 1.4; word-break: break-word; }
.toast-close { color: var(--ink-400); cursor: pointer; background: none; border: none; padding: 2px; border-radius: 6px; flex: none; }
.toast-close:hover { color: var(--ink-700); background: #f1f5f9; }

/* =====================================================================
   Misc helpers & animations
   ===================================================================== */
.empty-state { text-align: center; padding: 3rem 1.5rem; }
.empty-ico { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto 1rem; color: var(--brand-500); background: var(--brand-50); }

.detail-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px dashed #eef1f6; }
.detail-row:last-child { border-bottom: none; }
.detail-key { color: var(--ink-500); font-size: 0.82rem; font-weight: 500; flex: none; }
.detail-val { color: var(--ink-900); font-size: 0.85rem; font-weight: 600; text-align: right; }

.pwd-cell { display: inline-flex; align-items: center; gap: 0.5rem; }
.pwd-mask { font-family: ui-monospace, monospace; letter-spacing: 0.15em; color: var(--ink-500); }
.icon-btn { color: var(--ink-400); cursor: pointer; padding: 4px; border-radius: 8px; border: none; background: none; transition: all 0.15s; }
.icon-btn:hover { color: var(--brand-600); background: var(--brand-50); }

.reveal { animation: rise 0.5s cubic-bezier(0.16,1,0.3,1) both; }
.reveal-1 { animation-delay: 0.04s; }
.reveal-2 { animation-delay: 0.08s; }
.reveal-3 { animation-delay: 0.12s; }
.reveal-4 { animation-delay: 0.16s; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slidein { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideout { to { opacity: 0; transform: translateX(40px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Body scroll lock when a modal is open */
body.modal-open { overflow: hidden; }

/* =====================================================================
   Sidebar off-canvas positioning (mobile) / fixed (desktop)
   ===================================================================== */
#sidebar { transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@media (min-width: 1024px) { #sidebar { transform: translateX(0); } }

/* Role filter pills (credentials page) */
.role-pill {
  padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  color: var(--ink-600); background: #fff; border: 1px solid #e2e8f0; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.role-pill:hover { border-color: var(--brand-300); color: var(--brand-700); }
.role-pill.is-active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; box-shadow: 0 6px 14px rgba(47,107,255,0.28); }

/* =====================================================================
   AI Receptionist — Clinic Panel
   ===================================================================== */

/* "Premium Feature" chip on the premium nav items (WhatsApp Automation,
   Reviews). `.nav-soon` is kept as the base class name for backward
   compatibility; `.nav-premium` is the current alias. */
.nav-soon {
  flex: none; font-size: 0.55rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: #b45309; background: rgba(255, 251, 235, 0.85);
  border: 1px solid rgba(253, 230, 138, 0.5); border-radius: 999px; padding: 0.1rem 0.4rem;
  opacity: 0.85;
}
.nav-premium { font-size: 0.52rem; letter-spacing: 0.03em; white-space: nowrap; }
/* Premium rows lay out as a 2-column grid instead of a single flex line:
   icon + full module name on the first row, chip on a row of its own directly
   beneath the name. The name therefore always gets the whole width of the link
   and is never shortened by the chip. */
.nav-link.has-premium {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75rem; row-gap: 0.3rem; align-items: center;
}
/* Column 2 for both rows keeps the chip left-aligned with the module name. */
.nav-link.has-premium .nav-label { grid-column: 2; }
.nav-link.has-premium .nav-premium { grid-column: 2; justify-self: start; }
.nav-link.active .nav-soon { display: none; }

/* Tabs (Upload File | Paste Text) */
.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem;
  background: #f1f5f9; border-radius: 12px; padding: 0.25rem;
}
.tab-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.55rem 0.75rem; border-radius: 9px; border: none; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; color: var(--ink-500);
  background: transparent; transition: all 0.18s ease;
}
.tab-btn:hover { color: var(--ink-800); }
.tab-btn.is-active {
  background: #fff; color: var(--brand-700);
  box-shadow: 0 1px 2px rgba(16,24,40,0.08), 0 2px 8px rgba(16,24,40,0.06);
}

/* Dropzone */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.6rem 1rem; cursor: pointer;
  border: 2px dashed #d7deea; border-radius: 14px; background: #fbfcff;
  transition: all 0.18s ease;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--brand-300); background: var(--brand-50); outline: none; }
.dropzone.is-drag { border-color: var(--brand-500); background: var(--brand-50); transform: scale(1.01); }

/* Selected-file chip */
.file-chip {
  display: flex; align-items: center; gap: 0.75rem; margin-top: 0.85rem;
  padding: 0.65rem 0.8rem; border: 1px solid #e2e8f0; border-radius: 12px;
  background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

/* Processing progress */
.proc-box {
  margin-top: 1rem; padding: 0.85rem 0.95rem;
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 12px;
}
.progress { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.progress-bar {
  height: 100%; border-radius: 999px; width: 0%;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Inline alerts (success / error) */
.alert {
  display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1rem;
  padding: 0.7rem 0.85rem; border-radius: 12px; font-size: 0.8rem;
  font-weight: 500; line-height: 1.45; border: 1px solid transparent;
}
.alert-success { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.alert-error   { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.alert-info    { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }

/* Knowledge-base source list */
.kb-list { max-height: 264px; overflow-y: auto; }
.kb-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1.25rem; border-bottom: 1px solid #f1f5f9;
}
.kb-item:last-child { border-bottom: none; }
.kb-ico {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: var(--brand-600);
  background: var(--brand-50); border: 1px solid var(--brand-100);
}
.kb-ico.is-failed { color: #e11d48; background: #fff1f2; border-color: #fecdd3; }
.kb-title { font-size: 0.82rem; font-weight: 600; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-meta { font-size: 0.72rem; color: var(--ink-400); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-meta.is-error { color: #be123c; white-space: normal; }
.kb-prog { width: 100%; margin-top: 0.35rem; }
.kb-del {
  color: var(--ink-400); border: none; background: none; cursor: pointer;
  padding: 6px; border-radius: 8px; flex: none; transition: all 0.15s;
  font-size: 0.72rem; font-weight: 700; display: grid; place-items: center;
}
.kb-del:hover { color: #e11d48; background: #fff1f2; }
.kb-del.is-arming { color: #fff; background: #e11d48; padding: 6px 9px; }

/* Chat shell */
.chat-shell { display: flex; flex-direction: column; height: 560px; }
@media (min-width: 1024px) {
  .chat-shell { height: calc(100vh - 12.5rem); min-height: 540px; max-height: 780px; }
}
.chat-bot-avatar {
  position: relative; width: 40px; height: 40px; border-radius: 13px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 6px 14px rgba(47,107,255,0.3);
}
.chat-dot {
  position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px;
  border-radius: 50%; background: #10b981; border: 2px solid #fff;
}
.chat-scroll {
  flex: 1; overflow-y: auto; padding: 1.1rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.85rem;
  background:
    radial-gradient(700px 260px at 100% 0%, rgba(47,107,255,0.04), transparent 60%),
    #fbfcfe;
}

/* Messages */
.msg { display: flex; gap: 0.6rem; max-width: 88%; }
.msg.bot { align-self: flex-start; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar {
  width: 28px; height: 28px; border-radius: 9px; flex: none; margin-top: 2px;
  display: grid; place-items: center; color: var(--brand-600);
  background: var(--brand-50); border: 1px solid var(--brand-100);
}
.msg-body { min-width: 0; display: flex; flex-direction: column; }
.msg.user .msg-body { align-items: flex-end; }
.msg-bubble {
  padding: 0.6rem 0.85rem; font-size: 0.85rem; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
  animation: rise 0.3s cubic-bezier(0.16,1,0.3,1) both;
}
.msg.bot .msg-bubble {
  color: var(--ink-800); background: #fff; border: 1px solid #eef1f6;
  border-radius: 4px 14px 14px 14px; box-shadow: 0 1px 2px rgba(16,24,40,0.05);
}
.msg.user .msg-bubble {
  color: #fff; background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  border-radius: 14px 4px 14px 14px; box-shadow: 0 4px 12px rgba(47,107,255,0.24);
}
.msg-bubble.is-error { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
.msg-meta { font-size: 0.66rem; color: var(--ink-400); margin-top: 0.25rem; padding: 0 0.2rem; }

/* Typing indicator */
.typing { display: inline-flex; align-items: center; gap: 4px; padding: 0.75rem 0.9rem; }
.tdot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-400);
  animation: tblink 1.1s infinite ease-in-out;
}
.tdot:nth-child(2) { animation-delay: 0.15s; }
.tdot:nth-child(3) { animation-delay: 0.3s; }
@keyframes tblink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Quick replies — the tappable answers the Patient Panel receptionist offers
   (Yes / No). They belong to the message that asked, so they render inside its
   .msg-body: aligned with the bubble, directly beneath it, and scrolling away
   with the conversation. Sized for touch (44px tall) so a phone needs no zoom;
   they wrap onto a second line rather than stretching the bubble column. */
.msg-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.45rem;
  animation: rise 0.3s cubic-bezier(0.16,1,0.3,1) both;
}
.msg.user .msg-actions { justify-content: flex-end; }
.qa-btn {
  flex: none; min-height: 44px; min-width: 5.5rem;
  font-size: 0.82rem; font-weight: 700; color: var(--brand-700);
  background: #fff; border: 1.5px solid var(--brand-200); border-radius: 12px;
  padding: 0.5rem 1.15rem; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,40,0.05);
  transition: all 0.16s ease;
}
.qa-btn:hover:not(:disabled) {
  color: #fff; border-color: transparent; transform: translateY(-1px);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  box-shadow: 0 8px 16px rgba(47,107,255,0.28);
}
.qa-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.qa-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Suggested-question chips */
.chat-chips {
  display: flex; align-items: center; gap: 0.45rem; overflow-x: auto;
  padding: 0.6rem 1.25rem; border-top: 1px solid #f1f5f9; background: #fff;
  scrollbar-width: none;
}
.chat-chips::-webkit-scrollbar { display: none; }
.chip-q {
  flex: none; font-size: 0.72rem; font-weight: 600; color: var(--brand-700);
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: 999px; padding: 0.32rem 0.7rem; cursor: pointer; transition: all 0.15s;
}
.chip-q:hover { background: var(--brand-100); border-color: var(--brand-200); }

/* Composer */
.chat-composer {
  display: flex; align-items: flex-end; gap: 0.6rem;
  padding: 0.75rem 1.25rem 0.5rem; border-top: 1px solid #eef1f6; background: #fff;
}
.chat-input {
  flex: 1; resize: none; max-height: 108px; font-size: 0.875rem; line-height: 1.45;
  color: var(--ink-900); background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 0.6rem 0.85rem; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.chat-input:focus { outline: none; background: #fff; border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--ring); }
.chat-send {
  flex: none; width: 42px; height: 42px; border-radius: 12px; border: none; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  box-shadow: 0 6px 14px rgba(47,107,255,0.28); transition: all 0.18s ease;
}
.chat-send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 9px 18px rgba(47,107,255,0.34); }
.chat-send:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* =====================================================================
   Leads — Clinic Panel
   ===================================================================== */

/* Status dropdown — a tinted pill per status, saved on change */
.lead-status {
  appearance: none; cursor: pointer;
  font-size: 0.75rem; font-weight: 600; line-height: 1.2;
  color: var(--ink-600); background-color: #fff;
  border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 0.38rem 1.85rem 0.38rem 0.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.55rem center; background-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s, color 0.15s;
}
.lead-status:focus { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.lead-status:disabled { opacity: 0.55; cursor: wait; }
.lead-status.s-new                { background-color: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.lead-status.s-contacted          { background-color: #fffbeb; color: #b45309; border-color: #fde68a; }
.lead-status.s-appointment-booked { background-color: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.lead-status.s-converted          { background-color: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.lead-status.s-closed             { background-color: #f8fafc; color: #475569; border-color: #e2e8f0; }

/* Pagination */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; }
.page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 0.55rem; border-radius: 10px;
  border: 1px solid #e2e8f0; background: #fff; text-decoration: none;
  font-size: 0.82rem; font-weight: 600; color: var(--ink-600);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); transition: all 0.15s;
}
a.page-btn:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }
.page-btn.is-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  box-shadow: 0 6px 14px rgba(47, 107, 255, 0.28);
}
.page-btn.is-disabled { opacity: 0.4; pointer-events: none; }
.page-btn.is-prev svg { transform: rotate(180deg); }
.page-ellipsis { padding: 0 0.15rem; font-weight: 600; color: var(--ink-400); }

/* =====================================================================
   Appointments — Clinic Panel
   ===================================================================== */

/* Extra stat-card tone */
.stat-icon.violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 8px 18px rgba(109,40,217,0.28); }

/* Month calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.cal-title { font-size: 1.05rem; font-weight: 800; color: var(--ink-900); letter-spacing: -0.01em; }
.cal-nav { display: flex; align-items: center; gap: 0.35rem; }
.cal-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 10px;
  border: 1px solid #e2e8f0; background: #fff; color: var(--ink-500);
  font-size: 0.78rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04); transition: all 0.15s;
}
.cal-nav-btn:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }
.cal-nav-btn.is-prev svg { transform: rotate(180deg); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow {
  text-align: center; font-size: 0.64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-400); padding: 0.3rem 0;
}
.cal-day {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; min-height: 52px; border-radius: 12px;
  border: 1.5px solid transparent; font-size: 0.84rem; font-weight: 600;
  color: var(--ink-600); text-decoration: none; transition: all 0.15s; background: #fbfcfe;
}
.cal-day:hover { background: var(--brand-50); color: var(--brand-700); }
.cal-day.is-out { color: #cbd5e1; font-weight: 500; background: transparent; }
.cal-day.is-closed {
  color: #b6c0cf;
  background: repeating-linear-gradient(135deg, #fafbfd 0 5px, #f2f5f9 5px 10px);
}
/* Closed days stay visibly disabled even on hover — they can be viewed but
   never read as bookable. */
.cal-day.is-closed:hover {
  color: #a4afc0;
  background: repeating-linear-gradient(135deg, #f6f8fb 0 5px, #edf1f7 5px 10px);
}
.cal-day.is-closed.is-selected {
  background: linear-gradient(135deg, #64748b, #475569);
  color: #fff; box-shadow: 0 8px 18px rgba(71, 85, 105, 0.28);
}
.cal-day.is-today { border-color: var(--brand-400); }
.cal-day.is-selected {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px rgba(47,107,255,0.32);
}
.cal-day.is-selected:hover { color: #fff; }
.cal-count {
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  display: grid; place-items: center; font-size: 0.6rem; font-weight: 800;
  background: var(--brand-100); color: var(--brand-700);
}
.cal-day.is-selected .cal-count { background: rgba(255,255,255,0.92); color: var(--brand-700); }
.cal-legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: 0.85rem;
  font-size: 0.68rem; font-weight: 500; color: var(--ink-400);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.cal-legend .dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.cal-legend .dot-brand { background: var(--brand-100); }
.cal-legend .dot-striped { background: repeating-linear-gradient(135deg, #fafbfd 0 3px, #e8edf4 3px 6px); }
.cal-legend .dot-outline { border: 1.5px solid var(--brand-400); background: #fff; }

/* Day timeline */
.slot-list { display: flex; flex-direction: column; }
.slot-row { display: flex; gap: 0.85rem; padding: 0.6rem 0; border-bottom: 1px dashed #eef1f6; }
.slot-row:last-child { border-bottom: none; }
.slot-row.is-past { opacity: 0.55; }
.slot-time { flex: none; width: 72px; text-align: right; padding-top: 0.2rem; }
.slot-time b { display: block; font-size: 0.8rem; font-weight: 700; color: var(--ink-800); line-height: 1.2; }
.slot-time span { font-size: 0.66rem; color: var(--ink-400); }
.slot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.slot-free {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-size: 0.78rem; color: var(--ink-400); padding: 0.3rem 0.1rem; min-height: 30px;
}
.slot-book-btn {
  display: inline-flex; align-items: center; gap: 0.3rem; flex: none;
  font-size: 0.72rem; font-weight: 700; color: var(--brand-600);
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: 999px; padding: 0.28rem 0.7rem; cursor: pointer; transition: all 0.15s;
}
.slot-book-btn:hover { background: var(--brand-100); border-color: var(--brand-200); }

/* Appointment cards inside the day timeline */
.appt-card {
  border: 1px solid #e6ebf3; border-radius: 12px; padding: 0.6rem 0.7rem;
  background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,0.04);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.appt-card.is-cancelled { opacity: 0.65; background: #fdfbfb; }
.appt-card-top { display: flex; align-items: center; gap: 0.6rem; }
.appt-actions { display: flex; align-items: center; gap: 0.15rem; flex: none; }
.appt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.35rem; }
.appt-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  background: #f6f8fc; border: 1px solid #eceff5;
  font-size: 0.67rem; font-weight: 600; color: var(--ink-600); white-space: nowrap;
}
.appt-notes {
  font-size: 0.74rem; color: var(--ink-500); line-height: 1.4;
  border-top: 1px dashed #eef1f6; padding-top: 0.45rem;
}
.icon-btn-danger:hover { color: #e11d48; background: #fff1f2; }

/* Status dropdown — a tinted pill per status, saved on change */
.appt-status {
  appearance: none; cursor: pointer;
  font-size: 0.72rem; font-weight: 600; line-height: 1.2;
  color: var(--ink-600); background-color: #fff;
  border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 0.34rem 1.75rem 0.34rem 0.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 12px;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s, color 0.15s;
}
.appt-status:focus { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.appt-status:disabled { opacity: 0.55; cursor: wait; }
.appt-status.s-scheduled { background-color: #fffbeb; color: #b45309; border-color: #fde68a; }
.appt-status.s-confirmed { background-color: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.appt-status.s-completed { background-color: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.appt-status.s-cancelled { background-color: #fff1f2; color: #be123c; border-color: #fecdd3; }
.appt-status.s-no-show   { background-color: #f8fafc; color: #475569; border-color: #e2e8f0; }

@media (max-width: 640px) {
  .cal-day { min-height: 42px; border-radius: 10px; font-size: 0.78rem; }
  .slot-time { width: 58px; }
  .slot-time b { font-size: 0.74rem; }
}

/* =====================================================================
   Patients — treatment history (date-wise timeline)
   ===================================================================== */
.trt-timeline { padding: 1rem 1.25rem 1.15rem; }
.trt-day { position: relative; padding-left: 1.35rem; padding-bottom: 1rem; }
.trt-day::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: -2px;
  width: 2px; border-radius: 999px; background: #e8edf4;
}
.trt-day:last-child { padding-bottom: 0.25rem; }
.trt-day:last-child::before { bottom: auto; height: calc(100% - 14px); }
.trt-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; }
.trt-dot {
  position: absolute; left: 0; top: 5px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.trt-date-label { font-size: 0.86rem; font-weight: 700; color: var(--ink-900); }
.trt-date-sub { font-size: 0.7rem; font-weight: 500; color: var(--ink-400); }
.trt-records { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.45rem; }
.trt-item {
  display: flex; align-items: center; gap: 0.35rem;
  border: 1px solid #e6ebf3; border-radius: 12px; background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04); padding: 0.15rem 0.45rem 0.15rem 0.15rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.trt-item:hover { border-color: var(--brand-300); box-shadow: 0 4px 12px rgba(47,107,255,0.10); }
.trt-open {
  display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0;
  padding: 0.5rem 0.45rem; border: none; background: none; cursor: pointer;
  text-align: left; border-radius: 10px;
}
.trt-open:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.trt-ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; color: var(--brand-600);
  background: var(--brand-50); border: 1px solid var(--brand-100);
}
.trt-title {
  display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trt-sub {
  display: block; font-size: 0.72rem; color: var(--ink-400); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trt-actions { display: flex; align-items: center; gap: 0.1rem; flex: none; }

/* =====================================================================
   Patient Panel — Appointments & History
   Compact appointment cards with a date rail (mobile/tablet; a table takes
   over from lg up) and the tap-friendly slot picker in the booking modal.
   Reuses the shared primitives above — .card, .badge-*, .appt-chip, .trt-*,
   .detail-row — so both panels stay one design system.
   ===================================================================== */

/* --- Appointment card (one visit) ---------------------------------- */
.pa-appt {
  display: flex; gap: 0.85rem; align-items: stretch;
  border: 1px solid #e6ebf3; border-radius: var(--radius); background: #fff;
  box-shadow: var(--card-shadow); padding: 0.8rem 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pa-appt:hover { border-color: var(--brand-300); box-shadow: 0 4px 14px rgba(47,107,255,0.10); }
.pa-appt.is-past { background: #fcfdfe; }
.pa-appt.is-past .pa-appt-rail { background: #f4f6fa; border-color: #eaeef4; color: var(--ink-500); }

.pa-appt-rail, .pa-next-rail {
  flex: none; width: 58px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  border-radius: 12px; padding: 0.45rem 0;
  background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-700);
}
.pa-appt-day, .pa-appt-mon {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  line-height: 1.1;
}
.pa-appt-dnum { font-size: 1.15rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }

.pa-appt-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.pa-appt-title {
  font-size: 0.9rem; font-weight: 700; color: var(--ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pa-appt-sub {
  font-size: 0.76rem; color: var(--ink-500); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pa-appt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.35rem; }
.pa-appt-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  border-top: 1px dashed #eef1f6; padding-top: 0.6rem;
}
/* Comfortable touch targets on phones — the buttons stretch to share the row.
   The shared .btn-sm stays 31px everywhere else (the Clinic Panel's tables rely
   on it); here it is raised to 40px because these are thumb targets. */
.pa-appt-actions > .btn, .pa-appt-actions > form { flex: 1 1 auto; }
.pa-appt-actions form > .btn { width: 100%; }
.pa-appt-actions .btn, .pa-next-actions .btn { min-height: 40px; }

/* --- Upcoming row inside History ----------------------------------- */
.pa-next-list { display: flex; flex-direction: column; gap: 0.6rem; }
.pa-next {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  border: 1px solid #e6ebf3; border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04); padding: 0.65rem 0.8rem;
}
.pa-next:hover { border-color: var(--brand-300); }
.pa-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; flex: none; }

/* --- Slot picker (booking / reschedule modal) ---------------------- */
.pa-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 0.45rem; margin-top: 0.15rem;
}
.pa-slots-msg {
  grid-column: 1 / -1; margin: 0; padding: 0.75rem 0.15rem;
  font-size: 0.78rem; color: var(--ink-400); line-height: 1.45;
}
.pa-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: 52px; padding: 0.4rem 0.35rem; cursor: pointer;
  border: 1.5px solid #e2e8f0; border-radius: 12px; background: #fff;
  transition: all 0.15s;
}
.pa-slot:hover:not(:disabled) { border-color: var(--brand-400); background: var(--brand-50); }
.pa-slot:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.pa-slot-time { font-size: 0.8rem; font-weight: 700; color: var(--ink-800); line-height: 1.2; }
.pa-slot-tag {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #059669;
}
.pa-slot.is-selected {
  border-color: transparent; background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  box-shadow: 0 8px 18px rgba(47,107,255,0.30);
}
.pa-slot.is-selected .pa-slot-time { color: #fff; }
.pa-slot.is-selected .pa-slot-tag { color: rgba(255,255,255,0.9); }
.pa-slot.is-taken {
  cursor: not-allowed; border-color: #eceff5;
  background: repeating-linear-gradient(135deg, #fafbfd 0 5px, #f2f5f9 5px 10px);
}
.pa-slot.is-taken .pa-slot-time { color: #a4afc0; text-decoration: line-through; }
.pa-slot.is-taken .pa-slot-tag { color: #b6c0cf; }

.pa-slot-legend {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.7rem;
  font-size: 0.68rem; font-weight: 500; color: var(--ink-400);
}
.pa-slot-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.pa-key { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.pa-key-free { border: 1.5px solid var(--brand-300); background: #fff; }
.pa-key-taken { background: repeating-linear-gradient(135deg, #fafbfd 0 3px, #e8edf4 3px 6px); }

/* --- Empty filter result (history search) -------------------------- */
.pa-empty-filter {
  margin: 0; padding: 1.25rem 0.25rem; text-align: center;
  font-size: 0.82rem; color: var(--ink-400);
}

/* Tablet: the rail keeps its shape, actions stop stretching edge-to-edge. */
@media (min-width: 640px) {
  .pa-appt-actions > .btn, .pa-appt-actions > form { flex: 0 0 auto; }
  .pa-slots { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}

@media (max-width: 420px) {
  .pa-appt { padding: 0.7rem 0.75rem; gap: 0.65rem; }
  .pa-appt-rail, .pa-next-rail { width: 50px; }
  .pa-appt-dnum { font-size: 1.05rem; }
  .pa-slots { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .pa-next-actions { width: 100%; }
  .pa-next-actions > .btn { flex: 1 1 auto; }
}

/* =====================================================================
   Treatment notes — privacy at a glance (Clinic Panel · treatment form)
   The record has two note columns with two audiences: `notes` stays inside
   the clinic, `patient_notes` is projected into the Patient Panel's History.
   The form puts them in separate sections; these tinted frames make the
   difference impossible to miss while typing.
   ===================================================================== */
.note-block {
  border-radius: 12px; padding: 0.7rem 0.75rem; border: 1px solid transparent;
}
.note-private { background: #fff5f6; border-color: #fecdd3; }
.note-shared  { background: #f0fdf7; border-color: #a7f3d0; }
.note-private .form-hint { color: #9f1239; }
.note-shared  .form-hint { color: #047857; }
/* The two note detail rows in the view popup carry their audience chip on
   the key side, so it wraps under the label rather than squeezing it. */
.detail-key .badge { margin-left: 0.35rem; vertical-align: middle; }

/* =====================================================================
   Post-Treatment Experience — Patient Panel
   The two action cards shown for 24 hours after a visit is completed
   (View Treatment Details · Review Your Treatment), the visit strip they
   sit under and the countdown chip. Built from the same primitives as the
   rest of the panel (.card radius, brand ramp, .pa-appt-* date rail), and
   sized for thumbs: every tappable surface is at least 56px tall, the two
   cards stack on phones and sit side by side from tablet up, and nothing
   ever exceeds its container's width.
   ===================================================================== */
.pt-wrap {
  border: 1px solid #dbe7ff; border-radius: var(--radius);
  background:
    radial-gradient(680px 220px at 100% 0%, rgba(47,107,255,0.07), transparent 62%),
    linear-gradient(180deg, #f7faff 0%, #ffffff 62%);
  box-shadow: var(--card-shadow);
  padding: 0.95rem 1rem 1.05rem;
  margin-bottom: 1.5rem;
}
.pt-head { display: flex; align-items: flex-start; gap: 0.65rem; }
.pt-head-ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 5px 13px rgba(47,107,255,0.28);
}
.pt-head-title { font-size: 0.95rem; font-weight: 800; color: var(--ink-900); letter-spacing: -0.01em; line-height: 1.25; }
.pt-head-sub { font-size: 0.73rem; color: var(--ink-500); line-height: 1.4; margin-top: 2px; }

.pt-visits { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.85rem; }
.pt-visit {
  border: 1px solid #e6ebf3; border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04); padding: 0.7rem 0.75rem 0.75rem;
}
.pt-visit-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.pt-visit-rail {
  flex: none; width: 52px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  border-radius: 11px; padding: 0.4rem 0;
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857;
}
.pt-visit-title {
  font-size: 0.86rem; font-weight: 700; color: var(--ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-visit-sub {
  font-size: 0.73rem; color: var(--ink-500); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-timer {
  display: inline-flex; align-items: center; gap: 0.3rem; flex: none;
  font-size: 0.67rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--brand-700); background: var(--brand-50);
  border: 1px solid var(--brand-100); border-radius: 999px;
  padding: 0.25rem 0.6rem; white-space: nowrap;
}
/* The last hour reads as a gentle nudge, never an alarm. */
.pt-timer.is-urgent { color: #b45309; background: #fffbeb; border-color: #fde68a; }

/* --- The two action cards ------------------------------------------ */
.pt-cards { display: grid; grid-template-columns: 1fr; gap: 0.55rem; margin-top: 0.7rem; }
.pt-card {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; min-height: 62px;
  text-align: left; padding: 0.65rem 0.75rem; cursor: pointer;
  border: 1px solid #e2e8f0; border-radius: 13px; background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, background 0.15s;
}
.pt-card:hover { border-color: var(--brand-300); background: var(--brand-50); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(47,107,255,0.12); }
.pt-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.pt-card-accent { border-color: #fde68a; background: #fffdf5; }
.pt-card-accent:hover { border-color: #f59e0b; background: #fffbeb; box-shadow: 0 8px 18px rgba(217,119,6,0.14); }
/* Already reviewed — the same shape, but plainly not a button any more. */
.pt-card.is-done { cursor: default; background: #f7fdfa; border-color: #a7f3d0; box-shadow: none; }
.pt-card.is-done:hover { transform: none; background: #f7fdfa; border-color: #a7f3d0; box-shadow: none; }

.pt-card-ico {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center; color: #fff;
}
.pt-ico-teal    { background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); box-shadow: 0 5px 13px rgba(47,107,255,0.26); }
.pt-ico-amber   { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 5px 13px rgba(217,119,6,0.26); }
.pt-ico-emerald { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 5px 13px rgba(5,150,105,0.26); }

.pt-card-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pt-card-title { font-size: 0.85rem; font-weight: 700; color: var(--ink-900); line-height: 1.3; }
.pt-card-sub { font-size: 0.72rem; color: var(--ink-500); line-height: 1.35; margin-top: 2px; }
.pt-card-go { flex: none; color: var(--ink-400); display: grid; place-items: center; }
.pt-card:hover .pt-card-go { color: var(--brand-600); }

/* Privacy footnote (both popups) */
.pt-privacy {
  display: flex; align-items: flex-start; gap: 0.4rem;
  margin: 0.85rem 0 0; padding-top: 0.7rem; border-top: 1px dashed #eef1f6;
  font-size: 0.7rem; line-height: 1.45; color: var(--ink-400);
}
.pt-privacy svg { flex: none; margin-top: 2px; }

/* Tablet and up: the two actions sit side by side. */
@media (min-width: 640px) {
  .pt-wrap { padding: 1.05rem 1.15rem 1.15rem; }
  .pt-cards { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
}
@media (max-width: 420px) {
  .pt-visit-rail { width: 46px; }
  .pt-timer { width: 100%; justify-content: center; }
  .pt-card { min-height: 58px; padding: 0.6rem 0.65rem; }
}

/* =====================================================================
   Review form (Patient Panel) + review feed (Clinic Panel)
   One rating vocabulary shared by the form a patient fills in and the
   cards a clinic reads, so a 4-star review looks the same on both sides.
   ===================================================================== */

/* --- Star rating ---------------------------------------------------- */
/* Radios are laid out in reverse DOM order (5→1) and flipped visually, so a
   plain "~" sibling rule can light every star up to the hovered / selected
   one. No JavaScript required for the rating itself. */
.rv-stars {
  display: flex; flex-direction: row-reverse; justify-content: flex-end;
  gap: 0.15rem; margin-top: 0.1rem;
}
.rv-star {
  display: grid; place-items: center; cursor: pointer; color: #dbe2ec;
  padding: 0.35rem 0.2rem; border-radius: 10px; transition: color 0.13s, transform 0.13s;
  min-width: 44px; min-height: 44px;      /* comfortable on a phone */
}
.rv-star input { position: absolute; opacity: 0; width: 0; height: 0; }
.rv-star .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rv-stars:hover .rv-star { color: #dbe2ec; }
.rv-star:hover, .rv-star:hover ~ .rv-star { color: #fbbf24; transform: scale(1.06); }
.rv-star:has(input:checked), .rv-star:has(input:checked) ~ .rv-star { color: #f59e0b; }
.rv-star:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
.rv-stars-label {
  margin: 0.3rem 0 0; font-size: 0.75rem; font-weight: 600; color: var(--ink-400);
  transition: color 0.15s;
}
.rv-stars-label.is-set { color: #b45309; }
.rv-stars-label.is-error { color: #e11d48; }

/* --- Single-choice answers ------------------------------------------ */
.rv-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(102px, 1fr)); gap: 0.4rem; }
.rv-opt {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.5rem 0.6rem; cursor: pointer; user-select: none;
  border: 1.5px solid #e2e8f0; border-radius: 11px; background: #fff;
  font-size: 0.78rem; font-weight: 600; color: var(--ink-600);
  text-align: center; line-height: 1.25; transition: all 0.15s;
}
.rv-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.rv-opt:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }
.rv-opt:has(input:checked) {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  box-shadow: 0 6px 14px rgba(47,107,255,0.26);
}
.rv-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
.rv-q + .rv-q { margin-top: 0; }
.btn.is-busy { opacity: 0.7; pointer-events: none; }

/* --- Read-only star row (Clinic Panel feed) ------------------------- */
.rv-score { display: inline-flex; align-items: center; gap: 1px; color: #f59e0b; flex: none; }
.rv-score .off { color: #dbe2ec; }

/* --- Clinic Panel review feed --------------------------------------- */
.rv-summary { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; }
.rv-avg { display: flex; align-items: center; gap: 0.9rem; }
.rv-avg-num { font-size: 2.4rem; font-weight: 800; color: var(--ink-900); letter-spacing: -0.03em; line-height: 1; }
.rv-bars { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.rv-bar-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; color: var(--ink-400); font-weight: 600; }
.rv-bar { flex: 1; min-width: 0; height: 7px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.rv-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.rv-bar-count { flex: none; width: 2.1rem; text-align: right; }

.rv-list { display: flex; flex-direction: column; }
.rv-item { display: flex; gap: 0.8rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid #f1f5f9; }
.rv-item:last-child { border-bottom: none; }
.rv-item-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.rv-item-name { font-size: 0.85rem; font-weight: 700; color: var(--ink-900); }
.rv-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.35rem; margin-top: 0.4rem; }
.rv-item-note {
  margin-top: 0.5rem; padding: 0.55rem 0.7rem; border-radius: 10px;
  background: #fbfcfe; border: 1px solid #eef1f6;
  font-size: 0.78rem; line-height: 1.5; color: var(--ink-600);
  overflow-wrap: break-word; word-break: break-word;
}
@media (min-width: 768px) {
  .rv-summary { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 1.75rem; }
}