/* ==========================================================================
   jp-clinic-portal-app.css — Blank-canvas + setup wizard for ClinicPortal_v2
   Loaded alongside the portal's inline CSS. Only active under body.cp-mode-auth.
   ========================================================================== */

/* Scoped visibility: in auth mode, the portal page containers are fully
   replaced by jp-clinic-portal-app.js. Panels render via the app; there is no
   need to hide separate chunks. The portal-side login gate (#loginWall) is
   suppressed so jp-auth session takes precedence. */
body.cp-mode-auth #loginWall,
body.cp-mode-auth #login-wall,
body.cp-mode-auth #clinic-login-gate,
body.cp-mode-auth .login-wall { display: none !important; }

body.cp-mode-auth #sidebar .sb-user-role { color: rgba(255,255,255,.55); }

/* ── Shared tokens / tokens mirror the navy/teal system ──────────────── */
body.cp-mode-auth {
  --cpa-navy:#0A2D6E;
  --cpa-navy-dk:#061d4a;
  --cpa-teal:#00C9C0;
  --cpa-teal-dk:#00A89F;
  --cpa-border:#D4DCF0;
  --cpa-bg:#F7F9FD;
  --cpa-muted:#6B7A9F;
  --cpa-surface:#ffffff;
  --cpa-radius:14px;
  --cpa-radius-sm:10px;
}

/* ── Page-level spacing in auth mode ─────────────────────────────────── */
body.cp-mode-auth #content { padding: 24px 28px 40px; }
body.cp-mode-auth .page { display:none; }
body.cp-mode-auth .page.active { display:block; }

/* ── Dashboard hero ──────────────────────────────────────────────────── */
.cpa-dash-hero{
  background:linear-gradient(180deg,#071f4d 0%,#0A2D6E 100%);
  color:#fff;border-radius:var(--cpa-radius);
  padding:24px 28px 22px;margin-bottom:18px;position:relative;overflow:hidden;
  box-shadow:0 4px 24px rgba(10,45,110,.12);
}
.cpa-dash-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,#00C9C0,#00A89F);
}
.cpa-dash-hero-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.cpa-dash-hero-title{
  font-size:26px;font-weight:800;letter-spacing:-.02em;
  margin:4px 0 6px;line-height:1.2;
}
.cpa-dash-hero-sub{
  font-size:14px;color:rgba(255,255,255,.85);max-width:680px;line-height:1.55;
}

/* ── Setup progress card ─────────────────────────────────────────────── */
.cpa-setup-card{
  background:#fff;border:1px solid var(--cpa-border);border-radius:var(--cpa-radius);
  padding:20px 22px;margin-bottom:20px;box-shadow:0 2px 12px rgba(10,45,110,.06);
}
.cpa-setup-hd{ display:flex;gap:18px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap; }
.cpa-setup-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cpa-teal-dk);
}
.cpa-setup-title{ font-size:18px;font-weight:800;color:var(--cpa-navy);margin:2px 0 6px;letter-spacing:-.01em; }
.cpa-setup-sub{ font-size:13.5px;color:var(--cpa-muted);line-height:1.55;max-width:620px; }

.cpa-setup-pct{ min-width:180px;text-align:right; }
.cpa-setup-pct-val{ font-size:22px;font-weight:800;color:var(--cpa-navy);letter-spacing:-.01em; }
.cpa-setup-pct-bar{ margin-top:4px;background:#E9EEF8;height:6px;border-radius:100px;overflow:hidden; }
.cpa-setup-pct-fill{ background:linear-gradient(90deg,#00C9C0,#00A89F);height:100%;border-radius:100px;transition:width .3s; }

.cpa-setup-list{ list-style:none;padding:14px 0 0;margin:14px 0 0;border-top:1px solid var(--cpa-border); }
.cpa-check{
  display:flex;align-items:center;gap:12px;padding:9px 0;
  font-size:13.5px;color:var(--cpa-navy);font-weight:600;
}
.cpa-check + .cpa-check{ border-top:1px dashed rgba(10,45,110,.08); }
.cpa-check-mark{
  width:22px;height:22px;border-radius:50%;background:#EEF2FB;color:var(--cpa-muted);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;
}
.cpa-check-done .cpa-check-mark{ background:#DCFCE7;color:#16A34A; }
.cpa-check-label{ flex:1; }
.cpa-optional-tag{ font-style:italic;font-weight:600;color:var(--cpa-muted);font-size:12px; }
.cpa-check-btn{
  background:transparent;border:none;color:var(--cpa-teal-dk);
  font-size:13px;font-weight:700;cursor:pointer;padding:4px 6px;border-radius:6px;
}
.cpa-check-btn:hover{ background:rgba(0,201,192,.08); }

.cpa-setup-actions{ margin-top:14px;display:flex;gap:10px;justify-content:flex-end; }
.cpa-setup-cta{
  background:var(--cpa-teal);color:#fff;border:none;font-weight:800;
  padding:10px 20px;border-radius:100px;font-size:13px;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,201,192,.32);letter-spacing:-.01em;
  transition:background .15s,box-shadow .15s;
}
.cpa-setup-cta:hover{ background:var(--cpa-teal-dk); }
.cpa-setup-cta-ghost{
  background:transparent;color:var(--cpa-navy);border:1px solid var(--cpa-border);
  box-shadow:none;
}
.cpa-setup-cta-ghost:hover{ background:#EEF2FB; }

/* ── Dash grid (2-column) ────────────────────────────────────────────── */
.cpa-dash-grid{ display:grid;grid-template-columns:1fr 1fr;gap:18px; }
@media (max-width:900px){ .cpa-dash-grid{ grid-template-columns:1fr; } }

/* ── Generic panel card ──────────────────────────────────────────────── */
.cpa-panel{
  background:#fff;border:1px solid var(--cpa-border);border-radius:var(--cpa-radius);
  padding:18px 20px;box-shadow:0 2px 12px rgba(10,45,110,.06);
}
.cpa-panel-hd{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--cpa-border);margin-bottom:14px;
}
.cpa-panel-title{ font-size:14px;font-weight:800;color:var(--cpa-navy);letter-spacing:-.01em; }

/* ── Empty state ─────────────────────────────────────────────────────── */
.cpa-empty{
  text-align:center;padding:26px 20px;
}
.cpa-empty-ico{
  width:52px;height:52px;border-radius:14px;background:#EEF2FB;
  margin:0 auto 10px;display:flex;align-items:center;justify-content:center;
  font-size:24px;color:var(--cpa-navy);
}
.cpa-empty-title{
  font-size:15px;font-weight:800;color:var(--cpa-navy);letter-spacing:-.01em;margin-bottom:4px;
}
.cpa-empty-body{
  font-size:13px;color:var(--cpa-muted);line-height:1.55;max-width:460px;margin:0 auto 14px;
}
.cpa-empty-cta{
  background:var(--cpa-teal);color:#fff;border:none;font-weight:800;
  padding:8px 16px;border-radius:100px;font-size:12.5px;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,201,192,.28);letter-spacing:-.01em;
}
.cpa-empty-cta:hover{ background:var(--cpa-teal-dk); }

/* ── Profile panel ───────────────────────────────────────────────────── */
.cpa-profile{
  background:#fff;border:1px solid var(--cpa-border);border-radius:var(--cpa-radius);
  padding:22px 24px;box-shadow:0 2px 12px rgba(10,45,110,.06);
}
.cpa-profile-hd{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--cpa-border);
}
.cpa-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cpa-teal-dk);
}
.cpa-profile-title{
  font-size:22px;font-weight:800;color:var(--cpa-navy);letter-spacing:-.02em;margin-top:2px;
}
.cpa-profile-grid{ display:grid;grid-template-columns:1fr 1fr;gap:18px 26px; }
@media (max-width:900px){ .cpa-profile-grid{ grid-template-columns:1fr; } }
.cpa-profile-sec-title{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cpa-muted);margin-bottom:6px;
}
.cpa-profile-val{ font-size:14px;font-weight:600;color:var(--cpa-navy); }
.cpa-def{ font-size:13.5px;color:var(--cpa-navy); }
.cpa-def dt{ font-weight:700;color:var(--cpa-muted);font-size:12px;letter-spacing:.02em;text-transform:uppercase;margin-top:8px; }
.cpa-def dd{ margin:2px 0 0;font-weight:600; }

/* ── Chips (read-only) ───────────────────────────────────────────────── */
.cpa-chip-row{ display:flex;flex-wrap:wrap;gap:6px; }
.cpa-chip{
  background:#EEF2FB;color:var(--cpa-navy);border:1px solid var(--cpa-border);
  padding:4px 10px;border-radius:100px;font-size:12px;font-weight:700;letter-spacing:-.01em;
}
.cpa-chip-empty{ background:transparent;color:var(--cpa-muted);border-style:dashed;font-style:italic;font-weight:500; }

/* ── Staff table ─────────────────────────────────────────────────────── */
.cpa-table{ width:100%;border-collapse:collapse;font-size:13.5px; }
.cpa-table thead th{
  text-align:left;padding:10px 12px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cpa-muted);background:#F7F9FD;border-bottom:1px solid var(--cpa-border);
}
.cpa-table tbody td{ padding:12px;border-bottom:1px solid var(--cpa-border);color:var(--cpa-navy);font-weight:600; }
.cpa-status{
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 10px;border-radius:100px;display:inline-block;
}
.cpa-status-active{ background:#DCFCE7;color:#15803D;border:1px solid #BBF7D0; }
.cpa-status-pending{ background:#FEF3C7;color:#B45309;border:1px solid #FDE68A; }

/* ── Settings rows ───────────────────────────────────────────────────── */
.cpa-settings{ display:flex;flex-direction:column; }
.cpa-settings-row{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--cpa-border);
}
.cpa-settings-row:last-child{ border-bottom:none; }
.cpa-settings-title{ font-size:14px;font-weight:800;color:var(--cpa-navy);letter-spacing:-.01em; }
.cpa-settings-sub{ font-size:12.5px;color:var(--cpa-muted);margin-top:2px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.cpa-btn{
  background:var(--cpa-teal);color:#fff;border:none;font-weight:800;
  padding:9px 18px;border-radius:100px;font-size:13px;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,201,192,.28);letter-spacing:-.01em;
  transition:background .15s;
}
.cpa-btn:hover{ background:var(--cpa-teal-dk); }
.cpa-btn-sm{ padding:6px 14px;font-size:12px; }
.cpa-btn-ghost{
  background:transparent;color:var(--cpa-navy);border:1px solid var(--cpa-border);box-shadow:none;
}
.cpa-btn-ghost:hover{ background:#EEF2FB; }
.cpa-icon-btn{
  background:transparent;border:1px solid var(--cpa-border);color:var(--cpa-muted);
  width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:14px;
}
.cpa-icon-btn:hover{ background:#FEE2E2;border-color:#FCA5A5;color:#DC2626; }

/* ── Wizard overlay ──────────────────────────────────────────────────── */
.cpa-wiz-overlay{
  position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  padding:32px 16px;overflow-y:auto;
}
.cpa-wiz-overlay.cpa-wiz-open{ display:flex; }
.cpa-wiz-backdrop{
  position:absolute;inset:0;background:rgba(6,29,74,.62);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.cpa-wiz-card{
  position:relative;background:#fff;border-radius:18px;
  width:min(720px, 100%);max-height:calc(100vh - 64px);
  box-shadow:0 20px 60px rgba(6,29,74,.45);
  padding:28px 32px 24px;display:flex;flex-direction:column;overflow:hidden;
}
.cpa-wiz-x{
  position:absolute;top:12px;right:12px;background:transparent;border:none;
  width:32px;height:32px;border-radius:8px;color:var(--cpa-muted);font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.cpa-wiz-x:hover{ background:#EEF2FB;color:var(--cpa-navy); }

.cpa-wiz-stepper{ display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap; }
.cpa-wiz-step{
  display:flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:100px;background:#EEF2FB;color:var(--cpa-muted);
  font-size:11px;font-weight:800;letter-spacing:.04em;
}
.cpa-wiz-step-num{
  width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid var(--cpa-border);
  display:flex;align-items:center;justify-content:center;font-size:10px;
}
.cpa-wiz-step-done{ background:#DCFCE7;color:#15803D; }
.cpa-wiz-step-done .cpa-wiz-step-num{ background:#15803D;color:#fff;border-color:#15803D; }
.cpa-wiz-step-current{ background:var(--cpa-navy);color:#fff; }
.cpa-wiz-step-current .cpa-wiz-step-num{ background:var(--cpa-teal);color:var(--cpa-navy);border-color:var(--cpa-teal); }

.cpa-wiz-progress{ height:4px;background:#E9EEF8;border-radius:100px;overflow:hidden;margin-bottom:18px; }
.cpa-wiz-progress-fill{ height:100%;background:linear-gradient(90deg,#00C9C0,#00A89F);transition:width .3s; }

.cpa-wiz-body{ overflow-y:auto;padding-right:4px; }
.cpa-wiz-title{ font-size:22px;font-weight:800;color:var(--cpa-navy);letter-spacing:-.02em;margin:0 0 4px; }
.cpa-wiz-opt{ font-style:normal;font-weight:600;color:var(--cpa-muted);font-size:13px;letter-spacing:0; }
.cpa-wiz-lede{ font-size:13.5px;color:var(--cpa-muted);line-height:1.55;margin:0 0 16px;max-width:600px; }
.cpa-wiz-req{ font-style:normal;color:#DC2626;font-weight:800; }
.cpa-wiz-grid{ display:grid;grid-template-columns:1fr 1fr;gap:12px 14px; }
.cpa-wiz-field{ display:flex;flex-direction:column;gap:4px;min-width:0; }
.cpa-wiz-field-wide{ grid-column:1 / -1; }
.cpa-wiz-label{
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cpa-muted);
}
.cpa-wiz-input{
  width:100%;padding:10px 12px;border:1px solid var(--cpa-border);border-radius:10px;
  font-size:14px;color:var(--cpa-navy);background:#fff;font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
.cpa-wiz-input:focus{ outline:none;border-color:var(--cpa-teal);box-shadow:0 0 0 3px rgba(0,201,192,.18); }

.cpa-wiz-subfield{ margin:14px 0; }
.cpa-wiz-chip-row{ display:flex;flex-wrap:wrap;gap:8px;margin-top:6px; }
.cpa-wiz-chip{
  background:#fff;border:1px solid var(--cpa-border);color:var(--cpa-navy);
  padding:7px 14px;border-radius:100px;font-size:12.5px;font-weight:700;cursor:pointer;
  transition:all .15s;letter-spacing:-.01em;
}
.cpa-wiz-chip:hover{ background:#EEF2FB; }
.cpa-wiz-chip.cpa-chip-on{
  background:var(--cpa-navy);border-color:var(--cpa-navy);color:#fff;
  box-shadow:0 2px 8px rgba(10,45,110,.22);
}

.cpa-wiz-card-row{ display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:6px; }
@media (max-width:560px){ .cpa-wiz-card-row{ grid-template-columns:1fr; } }
.cpa-wiz-card-pill{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  background:#fff;border:1px solid var(--cpa-border);border-radius:12px;
  padding:10px 14px;cursor:pointer;transition:all .15s;
}
.cpa-wiz-card-pill strong{ font-size:14px;font-weight:800;color:var(--cpa-navy);letter-spacing:-.01em; }
.cpa-wiz-card-pill small{ font-size:12px;color:var(--cpa-muted); }
.cpa-wiz-card-pill:hover{ background:#EEF2FB; }
.cpa-wiz-card-pill.cpa-chip-on{
  background:rgba(0,201,192,.08);border-color:var(--cpa-teal);
  box-shadow:0 2px 8px rgba(0,201,192,.18);
}

.cpa-wiz-pill-row{ display:flex;flex-direction:column;gap:10px;margin-top:6px; }
.cpa-wiz-pill{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  background:#fff;border:1px solid var(--cpa-border);border-radius:12px;padding:10px 14px;cursor:pointer;
  transition:all .15s;
}
.cpa-wiz-pill strong{ font-size:14px;font-weight:800;color:var(--cpa-navy);letter-spacing:-.01em; }
.cpa-wiz-pill small{ font-size:12px;color:var(--cpa-muted); }
.cpa-wiz-pill:hover{ background:#EEF2FB; }
.cpa-wiz-pill.cpa-pill-on{
  background:rgba(0,201,192,.08);border-color:var(--cpa-teal);
  box-shadow:0 2px 8px rgba(0,201,192,.18);
}

.cpa-wiz-err{
  color:#DC2626;font-size:12.5px;font-weight:600;padding-top:8px;min-height:16px;
}
.cpa-wiz-actions{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding-top:14px;border-top:1px solid var(--cpa-border);margin-top:14px;
}
.cpa-wiz-actions-right{ display:flex;gap:10px;align-items:center; }

/* ── Team list ───────────────────────────────────────────────────────── */
.cpa-team-list{ list-style:none;padding:0;margin:10px 0; }
.cpa-team-row{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:10px 12px;border:1px solid var(--cpa-border);border-radius:10px;margin-bottom:8px;
}
.cpa-team-row-main{ flex:1;min-width:0; }
.cpa-team-email{ font-size:13.5px;font-weight:700;color:var(--cpa-navy);letter-spacing:-.01em; }
.cpa-team-role{ font-size:12px;color:var(--cpa-muted); }
.cpa-team-empty{
  font-size:13px;color:var(--cpa-muted);padding:12px;border:1px dashed var(--cpa-border);
  border-radius:10px;text-align:center;margin:10px 0;background:#F7F9FD;
}
.cpa-team-add{ display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-top:10px; }
.cpa-team-role-sel{ max-width:180px; }

/* ── Body scroll lock while wizard is open ───────────────────────────── */
body.cpa-wiz-lock{ overflow:hidden; }

/* ── Mode guards: belt-and-suspenders hide of the legacy demo login ─── */
body.cp-mode-auth #login-wall,
body.cp-mode-auth #loginWall,
body.cp-mode-auth #clinic-login-gate { display:none !important; }