/* ============================================================================
   HCMevolve — Global stylesheet additions for PRD-0019 (Zoho Recruit)
   Drop into the app's GLOBAL stylesheet (e.g. wwwroot/css/app.css or a linked
   hcm-integration.css). Loads AFTER tokens.css + components.css. Tokens only —
   no raw hex. Backs HcmScopeChipGroup, HcmTokenRow, HcmConnectionTestRow and
   the ZohoRecruitIntegration page.
   ============================================================================ */

/* ── Workspace canvas (fluid, centred, with a readable ceiling) ──────────────
   Fills the available workspace width and contracts smoothly on smaller
   windows; only on very wide monitors does it stop growing and centre, so
   form fields never stretch to a fatiguing line length. */
.ws-canvas {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

/* ── Workspace page header ───────────────────────────────────────────────── */
.ws-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.ws-heading { display: flex; align-items: center; gap: var(--s-3); margin-bottom: 2px; }
.ws-sub { font-size: var(--fs-b9); color: var(--regent-gray); }
.ws-actions { display: flex; gap: var(--s-2); flex-shrink: 0; }

/* ── Connection status pill ──────────────────────────────────────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-b10);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-pill .status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill--connected    { background: var(--hcm-mantis-lt);    color: #2E7C36; }
.status-pill--disconnected { background: var(--hcm-surface-alt);  color: var(--hcm-text-ter); border: 1px solid var(--hcm-link-water); }
.status-pill--error        { background: var(--hcm-carnation-lt); color: #993737; }
.status-pill--live .status-dot { box-shadow: 0 0 0 0 rgba(115,208,113,0.55); animation: hcm-pulse 2s var(--ease-out) infinite; }
@keyframes hcm-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(115,208,113,0.5); }
  70%  { box-shadow: 0 0 0 5px rgba(115,208,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(115,208,113,0); }
}

/* ── Progress stepper ────────────────────────────────────────────────────── */
.stepper {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--water-blue);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-card);
  padding: var(--s-3) var(--s-5);
  margin-bottom: var(--s-5);
}
.step { display: flex; align-items: center; gap: var(--s-2); }
.step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-b9);
  font-weight: var(--fw-medium);
  flex-shrink: 0;
  border: 1.5px solid var(--water-blue);
  color: var(--regent-gray);
  background: var(--bg-card);
  /* No transition on state-driven colour: a class swap must apply the new
     colour immediately (transitions can leave a stale from-value if the
     animation clock stalls). */
}
.step-num.done   { background: var(--green-bg); border-color: var(--hcm-mantis); color: #2E7C36; }
.step-num.active { background: var(--cerulean);  border-color: var(--cerulean);  color: var(--paper); }
.step-label {
  font-size: var(--fs-b9);
  font-weight: var(--fw-medium);
  color: var(--regent-gray);
  white-space: nowrap;
}
.step-label.active { color: var(--black); }
.step-label.done   { color: #2E7C36; }
.step-line {
  flex: 1;
  height: 2px;
  background: var(--water-blue);
  border-radius: 2px;
  margin: 0 var(--s-3);
}
.step-line.done { background: var(--hcm-mantis); }

/* ── Info / warn / success banners ───────────────────────────────────────── */
.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-6);
  margin-bottom: var(--s-4);
  font-size: var(--fs-b9);
  line-height: var(--lh-body);
}
.banner i { font-size: 13px; margin-top: 2px; flex-shrink: 0; }
.banner--info    { background: var(--cerulean-light); color: var(--blumine); }
.banner--info i  { color: var(--cerulean); }
.banner--warn    { background: var(--amber-bg); color: #8A5C09; }
.banner--warn i  { color: var(--amber); }
.banner--success { background: var(--green-bg); color: #2E7C36; }
.banner--success i { color: var(--hcm-mantis); }

/* ── Scope chips  (HcmScopeChipGroup) ────────────────────────────────────── */
.scope-grid { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: 6px; }
.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-b10);
  font-weight: var(--fw-medium);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  border: 1px solid var(--water-blue);
  background: var(--hcm-surface-alt);
  color: var(--regent-gray);
  cursor: pointer;
}
.scope-chip:hover:not(.locked) { border-color: var(--cerulean); color: var(--blumine); }
.scope-chip.on {
  background: var(--cerulean-light);
  border-color: var(--cerulean);
  color: var(--blumine);
}
.scope-chip.on.locked {
  background: var(--green-bg);
  border-color: var(--hcm-mantis);
  color: #2E7C36;
  cursor: default;
}
.scope-chip i { font-size: 9px; }

/* ── Divider ─────────────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border-subtle); margin: var(--s-4) 0; }

/* ── Sub-label (uppercase micro section header inside a card) ─────────────── */
.sub-label {
  font-size: var(--fs-b10);
  font-weight: var(--fw-medium);
  color: var(--hippie-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--s-2);
}

/* ── Token rows  (HcmTokenRow) ───────────────────────────────────────────── */
.token-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--foam);
  border: 1px solid var(--water-blue);
  border-radius: var(--r-6);
  padding: 9px 14px;
  margin-bottom: 6px;
}
.token-key {
  font-size: var(--fs-b10);
  font-weight: var(--fw-medium);
  color: var(--hippie-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 100px;
  flex-shrink: 0;
}
.token-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--black);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.token-meta { font-size: var(--fs-b10); color: var(--regent-gray); flex-shrink: 0; }
.expiry-track {
  height: 3px;
  background: var(--water-blue);
  border-radius: 2px;
  overflow: hidden;
  margin: 3px 0 10px 112px;
}
.expiry-fill { height: 100%; background: var(--cerulean); border-radius: 2px; transition: width var(--dur) var(--ease-out); }

/* ── Connection test rows  (HcmConnectionTestRow) ────────────────────────── */
.test-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 0;
  font-size: var(--fs-b9);
  color: var(--trout);
  border-bottom: 1px solid var(--border-subtle);
}
.test-row:last-child { border-bottom: none; }
.test-row i { font-size: 12px; flex-shrink: 0; }
.test-endpoint { flex: 1; font-family: var(--font-mono); font-size: 11px; color: var(--black); }
.test-result { font-size: var(--fs-b9); font-weight: var(--fw-medium); }
.test-ok   { color: #2E7C36; }
.test-fail { color: var(--hcm-carnation); }
.test-running { opacity: 0.35; transition: opacity var(--dur) var(--ease-out); }

/* ── Live connection callout (Step 4) ────────────────────────────────────── */
.live-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--green-bg);
  border: 1px solid var(--hcm-mantis);
  border-radius: var(--r-6);
  margin-bottom: var(--s-4);
  font-size: var(--fs-b9);
  color: #2E7C36;
}
.live-callout i { color: var(--hcm-mantis); font-size: 14px; }

/* ── Integration summary grid ────────────────────────────────────────────── */
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.summary-tile {
  background: var(--foam);
  border: 1px solid var(--water-blue);
  border-radius: var(--r-6);
  padding: 10px 14px;
}
.summary-label {
  font-size: var(--fs-b10);
  color: var(--hippie-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.summary-value { font-size: var(--fs-b6); font-weight: var(--fw-medium); color: var(--black); }

/* ── Card action footer (when not using .card-footer) ────────────────────── */
.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-subtle);
}
.card-actions--split { justify-content: space-between; }
.card-actions .group { display: flex; gap: var(--s-2); }

/* ── Field hint + readonly + row ─────────────────────────────────────────── */
.field-hint { font-size: var(--fs-b10); color: var(--regent-gray); margin-top: 4px; }
.input[readonly] { color: var(--regent-gray); background: var(--hcm-surface-alt); cursor: default; }
.input[readonly]:hover { border-bottom-color: var(--water-blue); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

/* ── Confirm modal overlay ───────────────────────────────────────────────── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,41,59,0.42);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.confirm-overlay.show { display: flex; }
.confirm-dialog {
  background: var(--bg-card);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-lg);
  padding: var(--s-5);
  width: 360px;
  animation: hcm-pop var(--dur) var(--ease-out);
}
/* Resting state is always visible — animations only add a subtle slide, never
   gate visibility (an entry keyframe starting at opacity:0 can leave content
   hidden if the animation clock stalls). */
.confirm-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--red-bg);
  color: var(--hcm-carnation);
  font-size: 16px;
  margin-bottom: var(--s-3);
}
.confirm-title { font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--black); margin-bottom: 6px; }
.confirm-body { font-size: var(--fs-b9); color: var(--trout); line-height: var(--lh-body); margin-bottom: var(--s-4); }
.confirm-btns { display: flex; gap: var(--s-2); justify-content: flex-end; }
@keyframes hcm-pop { from { transform: translateY(8px) scale(0.98); } to { transform: none; } }

/* ── Wizard step section visibility + transition ─────────────────────────── */
.step-section { display: none; }
.step-section.active { display: block; animation: hcm-step-in var(--dur) var(--ease-out); }
@keyframes hcm-step-in { from { transform: translateY(6px); } to { transform: none; } }

/* ── Top-menu breadcrumb (kept from source, restyled to DS) ──────────────── */
.tm-crumbs {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.72);
  min-width: 0;
}
.tm-crumbs .crumb-sep { font-size: 10px; opacity: 0.6; }
.tm-crumbs .crumb-current { color: var(--paper); }


/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-b9);
  font-weight: var(--fw-medium);
  background: var(--foam); color: var(--trout);
  border: 1px solid var(--water-blue);
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--ok      { background: var(--green-bg);      color: #2E7C36;            border-color: transparent; }
.badge--warn    { background: var(--amber-bg);       color: #8A5C09;            border-color: transparent; }
.badge--danger  { background: var(--red-bg);         color: #993737;            border-color: transparent; }
.badge--info    { background: var(--cerulean-pale);  color: var(--blumine);     border-color: transparent; }
.badge--neutral { background: var(--foam);           color: var(--trout); }

/* ── Integration buttons (btn / btn--primary / btn--ghost / btn--danger) ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--ctl-h-md);
  padding: 0 16px;
  font-family: var(--font-family);
  font-size: var(--fs-b6);
  font-weight: var(--fw-medium);
  line-height: 1;
  border-radius: var(--r-8);
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.btn:focus-visible { outline: 2px solid var(--cerulean); outline-offset: 2px; }
.btn[disabled], .btn.is-disabled {
  background: var(--hcm-surface-alt) !important;
  color: var(--hcm-text-ter) !important;
  border-color: var(--hcm-link-water) !important;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--sm { height: var(--ctl-h-sm); padding: 0 12px; font-size: var(--fs-b9); gap: 6px; border-radius: var(--r-6); }
.btn--primary { background: var(--cerulean);       color: var(--paper);   border-color: var(--cerulean); }
.btn--primary:hover { background: var(--cerulean-dark); border-color: var(--cerulean-dark); }
.btn--ghost   { background: var(--cerulean-light); color: var(--cerulean); border-color: var(--cerulean); }
.btn--ghost:hover { background: var(--cerulean-pale); }
.btn--danger  { background: var(--red-inactive);   color: var(--paper);   border-color: var(--red-inactive); }
.btn--danger:hover { background: #E55050; border-color: #E55050; }

/* ── Blazor markup helpers (used by ZohoRecruitIntegration + gallery demos) ── */
.label-opt { font-weight: var(--fw-regular); text-transform: none; color: var(--regent-gray); }

/* Component gallery demo pages */
.gallery-demo { padding: var(--s-8); max-width: 1000px; }
.gallery-demo .demo-lede { color: var(--trout); max-width: 70ch; margin: 6px 0 var(--s-6); }
.gallery-demo code {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--foam); border: 1px solid var(--border-subtle);
  padding: 1px 6px; border-radius: var(--r-4); color: var(--blumine);
}
.demo-block {
  background: var(--bg-card);
  border: 1px solid var(--water-blue);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-card);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}