/* ============================================================
   styles.css — Global styles for KYC Dashboard
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');
/* Inter / Inter Tight back the DriveWealth skin. Loaded for every brand because
   the skin is chosen at runtime, after the stylesheet has already been fetched. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&display=swap');
/* Switzer backs the Genius Technologies skin. It is a Fontshare face, not a
   Google one, hence the separate origin. Loaded for every brand for the same
   reason as Inter: the skin is chosen at runtime, after CSS has been fetched. */
@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* These names are unchanged so every existing var(--primary) etc. keeps
   working. They now resolve through brand.css, which is the one place to
   change the identity. The rendered values are identical to before. */
:root {
  --primary: var(--brand-product-accent);
  --primary-light: var(--brand-product-accent-tint);
  --primary-dark: var(--brand-product-accent-deep);
  --text: var(--brand-text);
  --text-secondary: var(--brand-text-secondary);
  --text-muted: var(--brand-text-muted);
  --border: var(--brand-line);
  --border-light: var(--brand-line-soft);
  --bg: var(--brand-surface-sunken);
  --white: var(--brand-surface);
  --success: var(--brand-success);
  --warning: var(--brand-warning);
  --danger: var(--brand-danger);
  --radius-sm: var(--brand-radius-sm);
  --radius: var(--brand-radius);
  --radius-lg: var(--brand-radius-lg);
  --radius-xl: var(--brand-radius-xl);
  --shadow-sm: var(--brand-shadow-sm);
  --shadow: var(--brand-shadow);
  --shadow-lg: var(--brand-shadow-lg);
}

html, body { width: 100%; height: 100%; overflow: hidden; font-family: var(--brand-font); background: var(--bg); color: var(--text); font-size: 14px; font-weight: 500;  line-height: 1.5; }

/* Headings take the display face. Reglio maps --brand-font-display back to
   --brand-font, so this is a no-op there and only separates the two for a brand
   that pairs different families. */
h1, h2, h3, h4, h5, h6 { font-family: var(--brand-font-display); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 14px; }
a { text-decoration: none; color: inherit; }

/* ── Authentication ─────────────────────────────────────── */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}
.auth-shell-branded {
  background:
    radial-gradient(circle at 22% 18%, rgba(59,130,246,0.12), transparent 28%),
    radial-gradient(circle at 78% 76%, rgba(16,185,129,0.12), transparent 26%),
    linear-gradient(135deg, #F8FAFC, #FFFFFF);
}
.auth-panel {
  width: min(420px, 100%);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 34px;
  text-align: center;
}
.auth-panel-wide {
  width: min(520px, 100%);
  padding: 42px;
}
.auth-logo {
  height: 84px;
  width: auto;
  /* Wide wordmarks (DriveWealth) overflow the card at a fixed height; contain
     keeps the aspect ratio and the cap keeps it inside the panel. */
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 10px;
}
.auth-logo-large {
  height: 104px;
  margin-bottom: 4px;
}
/* Holds a logo's place while a brand is still unknown.

   Occupies the same box .auth-logo does, so a real mark appears without
   shifting the panel under it. Deliberately unbranded: before /me answers, a
   TENANT mark shown here would be a guess about whose workspace this is. The
   pre-identity shells now show the product's own mark instead — see
   pendingBrandLogo — so this is the placeholder for surfaces that cannot show
   even that, and the shared source of the pulse below. */
.auth-logo-pending {
  height: 84px;
  width: 168px;
  max-width: 60%;
  margin-bottom: 10px;
  border-radius: 10px;
  background: var(--border);
  opacity: 0.3;
}

/* The auth panel's own shape while it waits, instead of a sentence.

   The card keeps the height it has when filled, so nothing jumps when the
   dashboard replaces it. role="presentation" on each line keeps them out of
   the accessibility tree — the panel itself carries the status label. */
.auth-skeleton-line {
  border-radius: 6px;
  background: var(--border);
  opacity: 0.3;
  margin-inline: auto;
}
.auth-skeleton-title {
  height: 20px;
  width: 180px;
  max-width: 70%;
  margin-bottom: 12px;
}
.auth-skeleton-subtitle {
  height: 13px;
  width: 260px;
  max-width: 88%;
  margin-bottom: 22px;
}

@media (prefers-reduced-motion: no-preference) {
  .auth-logo-pending,
  .auth-skeleton-line { animation: auth-logo-pulse 1.5s ease-in-out infinite; }
}
@keyframes auth-logo-pulse { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.4; } }
.auth-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.auth-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 22px;
}
.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* ── Executive dashboard band ───────────────────────────── */
.reglio-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 18px;
  margin-bottom: 22px;
  padding: 24px;
  border: 1px solid #D7E3F5;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(239,246,255,0.95), rgba(255,255,255,0.98) 46%, rgba(236,253,245,0.92));
  box-shadow: var(--shadow-sm);
}
.reglio-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.reglio-hero-title {
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.05;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 9px;
}
.reglio-hero-copy {
  max-width: 680px;
  color: var(--text-secondary);
  font-size: 14px;
}
.reglio-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.reglio-hero-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.reglio-hero-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(209,213,219,0.9);
  border-radius: var(--radius);
}
.reglio-hero-metric span {
  font-size: 12px;
  color: var(--text-secondary);
}
.reglio-hero-metric strong {
  font-size: 15px;
  color: var(--text);
}
.reglio-hero-metric strong.success { color: var(--success); }
.reglio-hero-metric strong.warning { color: var(--warning); }
.reglio-hero-metric strong.danger { color: var(--danger); }

/* ── Verification experience ────────────────────────────── */
.verification-shell {
  width: min(100%, 840px);
  margin-inline: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.verification-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.verification-intro h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  margin-bottom: 10px;
}
.verification-intro p {
  max-width: 720px;
  color: var(--text-secondary);
}
.verification-guidance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.verification-guidance div {
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--bg);
}
.verification-guidance strong,
.verification-guidance span {
  display: block;
}
.verification-guidance strong {
  font-size: 13px;
  margin-bottom: 2px;
}
.verification-guidance span {
  font-size: 12px;
  color: var(--text-secondary);
}
.verification-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.verification-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.verification-widget-card {
  display: flex;
  width: 100%;
  min-width: 0;
  height: min(720px, calc(100vh - 220px));
  height: min(720px, calc(100dvh - 220px));
  min-height: 520px;
  max-height: 720px;
  padding: 14px;
  overflow: visible;
}
.verification-side {
  padding: 20px;
  position: static;
}

/* ── Document selection — shown in place of the capture card until answered ── */
.verification-capture-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.doc-selection-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.doc-selection-head h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}
.doc-selection-head p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 60ch;
}
.doc-selection-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.doc-selection-field > label,
.doc-selection-legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.doc-selection-select {
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 13px;
  width: 100%;
  max-width: 420px;
}
.doc-selection-select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.doc-selection-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
}
.doc-selection-option {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.doc-selection-option:hover {
  border-color: var(--primary);
}
.doc-selection-option input {
  margin: 2px 0 0;
  accent-color: var(--primary);
  flex-shrink: 0;
}
.doc-selection-option span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.doc-selection-option strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.doc-selection-option em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--text-muted);
}
.doc-selection-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-light, rgba(59, 130, 246, 0.06));
}
.doc-selection-continue {
  align-self: flex-start;
  min-width: 180px;
}
.doc-selection-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-secondary);
}
.doc-selection-sep {
  color: var(--text-muted);
  margin-inline: 5px;
}
.doc-selection-change {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
}
.doc-selection-change:hover {
  text-decoration: underline;
}

.verification-widget-card facephi-sdk-provider,
.verification-widget-card facephi-selphi-widget,
.verification-widget-card facephi-selphid-widget {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.verification-widget-card facephi-sdk-provider {
  height: 100%;
  min-height: 0;
}

.verification-widget-card facephi-selphi-widget,
.verification-widget-card facephi-selphid-widget {
  height: 100%;
  min-height: 0;
}

/* ── FacePhi capture surface, branded ──────────────────────────────
   SelphID and Selphi register with Stencil's *scoped* encapsulation, not shadow
   DOM, so their markup is in the light DOM and inherits from here. Setting the
   font on the host is enough to carry the brand face into their captions and
   buttons — deliberately no selectors against their internal class names, which
   are undocumented and would break on an SDK bump.

   facephi-sdk-provider and facephi-logo ARE shadow DOM. Nothing below reaches
   inside them; rebranding those needs a themed asset bundle from FacePhi. */
.verification-widget-card facephi-selphi-widget,
.verification-widget-card facephi-selphid-widget,
.handoff-provider-host facephi-selphi-widget,
.handoff-provider-host facephi-selphid-widget {
  font-family: var(--brand-font);
  color: var(--text);
}
.verification-side-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
}
.verification-status {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  margin-bottom: 16px;
}
.verification-status strong,
.verification-status span {
  display: block;
}
.verification-status strong {
  font-size: 13px;
  margin-bottom: 2px;
}
.verification-status span {
  font-size: 12px;
  color: var(--text-secondary);
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-top: 4px;
  background: var(--text-muted);
}
/* The halo is derived from the dot's own colour rather than a fixed rgba, so it
   follows the active brand instead of staying Reglio blue/green/red. */
.verification-status.processing .status-dot { background: var(--primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 12%, transparent); }
.verification-status.success .status-dot { background: var(--success); box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 12%, transparent); }
.verification-status.error .status-dot { background: var(--danger); box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 12%, transparent); }
.verification-steps {
  display: grid;
  gap: 8px;
}
.verification-step {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-secondary);
  font-size: 12px;
}
.verification-step::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
}
.verification-step.done {
  color: var(--text);
  font-weight: 600;
}
.verification-step.done::before {
  border-color: var(--success);
  background: var(--success);
  box-shadow: inset 0 0 0 5px var(--white);
}

@media (max-width: 900px) {
  .reglio-hero,
  .verification-intro,
  .verification-grid {
    grid-template-columns: 1fr;
  }
  .verification-side {
    position: static;
  }
}

@media (max-width: 720px) {
  .verification-guidance {
    grid-template-columns: 1fr;
  }

  .verification-widget-card {
    height: min(680px, calc(100vh - 180px - env(safe-area-inset-bottom, 0px)));
    height: min(680px, calc(100dvh - 180px - env(safe-area-inset-bottom, 0px)));
    min-height: 460px;
    padding: 12px;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .verification-widget-card {
    height: min(520px, calc(100vh - 120px));
    height: min(520px, calc(100dvh - 120px));
    min-height: min(300px, calc(100vh - 120px));
    min-height: min(300px, calc(100dvh - 120px));
  }
}

@media (max-width: 560px) {
  .reglio-hero,
  .verification-intro,
  .verification-widget-card,
  .verification-side {
    padding: 16px;
  }
  .reglio-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .auth-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .verification-widget-card {
    height: min(620px, calc(100vh - 160px - env(safe-area-inset-bottom, 0px)));
    height: min(620px, calc(100dvh - 160px - env(safe-area-inset-bottom, 0px)));
    min-height: 440px;
    padding: 10px;
  }
}

/* ── Layout ─────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100vh; }

.header {
  position: fixed; top: 0; left: 0; right: 0; height: 64px;
  background: var(--white); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; z-index: 1000;
}

.main-content {
  margin-top: 64px; height: calc(100vh - 64px);
  overflow-y: auto; overflow-x: hidden;
  padding: 36px 48px;
}

/* ── Header ─────────────────────────────────────────────── */
.header-logo img { height: 80px; max-width: 300px; width: auto; object-fit: contain; }
/* DriveWealth is a wide wordmark. The shared height above is sized for the
   square Reglio mark, which leaves the DriveWealth box overflowing a 64px
   header and running into the nav. Brand-scoped so Reglio is unaffected. */
[data-brand="drivewealth"] .header-logo img { height: 34px; max-width: 200px; }
/* Genius Technologies stacks an icon beside two lines of text, so it is nearer
   16:9 than DriveWealth's long wordmark. It needs more height to stay legible
   and far less width to fit. */
[data-brand="geniustrader"] .header-logo img { height: 46px; max-width: 190px; }
/* A workspace-supplied logo has no hand-tuned rule of its own. It arrives from
   the database and may be a wide wordmark or a square mark, while the shared
   default above is sized for the square Reglio artwork — it forces an 80px
   height into a 64px header, which a wide logo then fills edge to edge.

   Capping both axes and forcing neither lets the artwork's own ratio decide
   which bound binds first, so nothing is stretched and nothing outgrows the
   header. Scoped to the attribute, so every registry brand keeps its own rule
   and a tenant that supplies no logo is untouched. */
:root[data-tenant-logo] .header-logo img {
  height: auto;
  max-height: 40px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
}

.header-nav { display: flex; gap: 4px; }
.nav-btn {
  padding: 8px 16px; border-radius: var(--radius-sm); font-size: 14px;
  font-weight: 500; color: var(--text-secondary); transition: all 0.15s;
  border-bottom: 2px solid transparent;
}
.nav-btn:hover { color: var(--text); background: var(--bg); }
.nav-btn.active { color: var(--primary); border-bottom-color: var(--primary); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

.header-right { display: flex; align-items: center; gap: 12px; }

.workspace-switcher select {
  height: 36px;
  max-width: 180px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  padding: 0 28px 0 10px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); transition: all 0.15s;
}
.icon-btn:hover { background: var(--bg); color: var(--text); }

.profile-btn {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg); transition: all 0.15s;
}
.profile-btn:hover { border-color: #D1D5DB; }
.profile-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 11px; font-weight: 700;
}
.profile-name { font-size: 13px; font-weight: 500; }
.profile-org  { font-size: 11px; color: var(--text-secondary); }

.dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); min-width: 180px; z-index: 1001; overflow: hidden;
}
.dropdown-item {
  width: 100%; padding: 10px 16px; text-align: left; font-size: 13px;
  color: var(--text); display: block; transition: background 0.1s;
}
.dropdown-item:hover { background: var(--bg); }
.dropdown-item.active { font-weight: 600; background: var(--bg); }

/* ── Page headers ───────────────────────────────────────── */
.page-title { font-size: 25px; font-weight: 500; color: var(--text); margin-bottom: 4px; letter-spacing: -0.03em; }
.page-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 36px; }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 24px; }
.card-pad-lg { padding: 32px; }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; transition: all 0.15s; white-space: nowrap;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn-outline:hover { background: var(--primary-light); }
.btn-ghost  { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.btn-ghost:hover  { background: var(--bg); }
.btn-success { background: var(--success); color: white; }
.btn-danger  { background: var(--danger); color: white; }

/* ── Form controls ──────────────────────────────────────── */
.input, .select-input {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--white); color: var(--text); font-size: 13px; outline: none; transition: border 0.15s;
}
.input:focus, .select-input:focus { border-color: var(--primary); }
.select-input {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* ── Tabs ───────────────────────────────────────────────── */
.tabs { display: flex; border-bottom: 2px solid var(--border-light); gap: 24px; margin-bottom: 28px; }
.tab-btn {
  padding: 12px 4px; font-size: 14px; font-weight: 500; color: var(--text-secondary);
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* ── Table ──────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
thead tr { background: var(--bg); border-bottom: 1px solid var(--border); }
th { padding: 14px 20px; font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; text-align: left; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
td { padding: 16px 20px; border-bottom: 1px solid var(--border-light); font-size: 13px; }
tr.clickable { cursor: pointer; transition: background 0.1s; }
tr.clickable:hover td { background: var(--bg); }

/* ── KPI cards row ──────────────────────────────────────── */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.kpi-card { padding: 20px 24px; }
.kpi-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-value { font-size: 28px; font-weight: 700; color: var(--text); }

/* ── Filter bar ─────────────────────────────────────────── */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 18px 22px; margin-bottom: 20px; justify-content: space-between;
}
.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.filter-left  { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }

/* ── Modal ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center; z-index: 2000;
}
.modal {
  background: var(--white); border-radius: var(--radius-xl);
  padding: 36px; width: 680px; max-width: 90vw; max-height: 85vh;
  overflow-y: auto; box-shadow: 0 24px 80px rgba(0,0,0,0.2);
}
.modal-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.modal-subtitle { font-size: 13px; color: var(--text-secondary); margin-bottom: 26px; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal-card {
  padding: 18px 20px; background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius); cursor: pointer; text-align: left; transition: all 0.15s;
}
.modal-card:hover { background: #EFF6FF; border-color: var(--primary); box-shadow: 0 4px 12px rgba(59,130,246,0.12); }
.modal-card-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.modal-card-desc  { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

/* ── Session detail ─────────────────────────────────────── */
.detail-layout { display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: start; }
.detail-sidebar { position: sticky; top: 0; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 28px; }
.breadcrumb-link { color: var(--text-secondary); cursor: pointer; }
.breadcrumb-link:hover { color: var(--text); }
.breadcrumb-sep { color: var(--text-muted); }
.breadcrumb-current { color: var(--primary); font-weight: 500; }
/* The explicit back control on session detail. Its arrow reuses
   .breadcrumb-arrow, so the RTL flip in Directional glyphs covers it too. */
.session-back-btn { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 12px; font-size: 13px; }

/* Sessions: the stat strip above the filter bar.
   One low row rather than four cards — the table is what the page is for. */
.sessions-stat-strip {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 16px;
  padding: 4px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sessions-stat {
  flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; background: var(--white); border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px); text-align: start;
}
.sessions-stat-value { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--text); }
.sessions-stat-label {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
/* Only the pending-review stat is a control, so only it looks like one. */
.sessions-stat-action { cursor: pointer; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; }
.sessions-stat-action:hover { border-color: var(--primary); }
.sessions-stat-action.is-active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
@media (max-width: 720px) {
  .sessions-stat { flex-basis: calc(50% - 8px); }
  .sessions-stat-value { font-size: 18px; }
}

/* Risk & Compliance: the capability strip and the setup state.
   A compliance screen has to look answerable even when the answer is none. */
.compliance-strip {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px;
  padding: 4px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.compliance-stat {
  flex: 1 1 130px; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; background: var(--white);
  border-radius: calc(var(--radius) - 2px); text-align: start;
}
.compliance-stat-value { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--text); }
.compliance-stat-label {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.compliance-notice {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 16px; margin-bottom: 18px;
  border-inline-start: 3px solid var(--warning);
  background: var(--bg); border-radius: var(--radius);
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.55;
}
.compliance-notice strong { color: var(--text); font-size: 13px; font-weight: 600; }
.compliance-empty { padding: 32px 8px 26px; text-align: center; }
.compliance-empty-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.compliance-empty-body {
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.6;
  max-width: 560px; margin: 0 auto;
}
.compliance-planned { border-top: 1px solid var(--border-light); padding-top: 18px; }
.compliance-planned-title {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px;
}
.compliance-planned-row {
  display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--border-light);
}
.compliance-planned-row:last-child { border-bottom: 0; }
.compliance-planned-name { font-size: 13px; font-weight: 600; color: var(--text); }
.compliance-planned-detail { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
@media (max-width: 720px) {
  .compliance-stat { flex-basis: calc(50% - 8px); }
  .compliance-planned-row { grid-template-columns: 1fr; gap: 2px; }
}

.session-avatar {
  width: 72px; height: 72px; border-radius: 50%; background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 24px; font-weight: 700; flex-shrink: 0;
}
.risk-circle {
  width: 160px; height: 160px; border-radius: 50%; border-width: 4px; border-style: solid;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.risk-circle-score { font-size: 42px; font-weight: 700; line-height: 1; }
.risk-circle-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin-top: 4px; }

.detail-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; }
.detail-row:last-child { border-bottom: none; }
.detail-key { color: var(--text-secondary); font-weight: 500; }
.detail-val { font-weight: 500; text-align: right; }

.signal-card { padding: 16px 18px; border-radius: var(--radius); margin-bottom: 12px; }
.signal-card.high   { background: #FEE2E2; border: 1px solid #FCA5A5; }
.signal-card.medium { background: #FEF3C7; border: 1px solid #FCD34D; }
.signal-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.signal-desc  { font-size: 12px; opacity: 0.8; }

.audit-line { position: absolute; left: 18px; top: 20px; bottom: 0; width: 2px; background: var(--border); }
.audit-dot  { width: 36px; height: 36px; border-radius: 50%; background: var(--success); display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; border: 3px solid white; box-shadow: 0 0 0 1px var(--border); position: relative; z-index: 1; }

/* ── Flow canvas ─────────────────────────────────────────── */
#flow-canvas {
  background: #EAECF0;
  overflow: hidden;
  cursor: grab;
}
#flow-canvas:active { cursor: grabbing; }
#canvas-inner {
  position: absolute;
  width: 8000px;
  height: 8000px;
  transform-origin: 0 0;
}
.flow-node {
  position: absolute; width: 300px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); cursor: grab; user-select: none;
}
.flow-node:active { cursor: grabbing; }
.flow-node.selected { border: 2px solid var(--primary); }
.flow-node-header { padding: 16px 18px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; }
.flow-node-body   { padding: 14px 18px; }
.flow-node-icon   { width: 30px; height: 30px; border-radius: 6px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.flow-node-name   { font-size: 14px; font-weight: 600; color: var(--text); }
.flow-node-port   { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--text); border: 2px solid white; box-shadow: 0 0 0 1px var(--border); }
.flow-node-port.left  { left: -5px; top: 50%; transform: translateY(-50%); }
.flow-node-port.right { right: -5px; top: 50%; transform: translateY(-50%); }

.node-field { margin-bottom: 12px; }
.node-field:last-child { margin-bottom: 0; }
.node-field-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.node-field-value { font-size: 12px; color: var(--text-secondary); }

.canvas-add-btn {
  position: absolute; bottom: 24px; right: 24px; width: 48px; height: 48px;
  border-radius: 50%; background: var(--primary); color: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(59,130,246,0.4); transition: all 0.15s; z-index: 10;
}
.canvas-add-btn:hover { transform: scale(1.08); box-shadow: 0 6px 18px rgba(59,130,246,0.5); }

.config-panel {
  position: fixed; right: 0; top: 64px; bottom: 0; width: 360px;
  background: var(--white); border-left: 1px solid var(--border);
  box-shadow: -4px 0 20px rgba(0,0,0,0.06); padding: 28px; overflow-y: auto; z-index: 100;
}
.config-panel-title { font-size: 17px; font-weight: 700; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; }
.close-btn { width: 28px; height: 28px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text-secondary); transition: all 0.15s; }
.close-btn:hover { background: var(--border); }

.field-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; display: block; }
.toggle-group { display: flex; gap: 8px; }
.toggle-btn { flex: 1; padding: 8px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); transition: all 0.15s; }
.toggle-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

/* ── Wizard ─────────────────────────────────────────────── */
.wizard-wrap { max-width: 520px; margin: 0 auto; padding: 40px 0; }
.wizard-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; }
.wizard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background 0.2s; }
.wizard-dot.active { background: var(--primary); }
.wizard-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.wizard-subtitle { font-size: 13px; color: var(--text-secondary); margin-bottom: 28px; }
.wizard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.wizard-option {
  padding: 18px; border: 2px solid var(--border); border-radius: var(--radius);
  cursor: pointer; text-align: center; transition: all 0.15s; background: transparent;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.wizard-option:hover { border-color: var(--primary); background: var(--primary-light); }
.wizard-option.selected { border-color: var(--primary); background: var(--primary-light); }
.wizard-option-emoji { font-size: 24px; }
.wizard-option-label { font-size: 13px; font-weight: 600; }
.wizard-option-full { width: 100%; text-align: left; padding: 18px 20px; }
.wizard-option-full-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.wizard-option-full-sub { font-size: 12px; color: var(--text-secondary); }
.chip {
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); background: transparent; cursor: pointer; transition: all 0.15s;
}
.chip.selected { background: var(--primary); color: white; border-color: var(--primary); }
.chip:hover:not(.selected) { border-color: var(--primary); color: var(--primary); }

/* ── Flows list ─────────────────────────────────────────── */
.flow-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px; cursor: pointer; transition: all 0.15s; position: relative;
}
.flow-card:hover { box-shadow: var(--shadow); }
.flow-card-arrow { color: #CBD5E1; transition: color 0.15s; font-size: 18px; }
.flow-card:hover .flow-card-arrow { color: var(--primary); }
.status-dot { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.status-dot::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-active { color: #059669; background: #D1FAE5; }
.status-draft  { color: #6B7280; background: #F1F5F9; }

/* ── Notifications / System ─────────────────────────────── */
.notif-item { padding: 20px 26px; border-bottom: 1px solid var(--border-light); display: flex; align-items: flex-start; gap: 14px; }
.notif-item.unread { background: var(--bg); }
.notif-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.notif-unread-badge { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 6px; }

.section-title { font-size: 25px; font-weight: 500; margin-bottom: 20px; letter-spacing: -0.03em; }
.api-key-row { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 10px; }
.integration-card { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); display: flex; justify-content: space-between; align-items: center; }
.toggle-switch { width: 42px; height: 22px; border-radius: 11px; position: relative; cursor: pointer; transition: background 0.2s; }
.toggle-switch-knob { width: 18px; height: 18px; border-radius: 50%; background: white; position: absolute; top: 2px; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }

/* ── Utilities ──────────────────────────────────────────── */
.flex { display: flex; } .flex-col { flex-direction: column; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; }
.text-sm { font-size: 12px; } .text-muted { color: var(--text-secondary); } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; }
.w-full { width: 100%; } .relative { position: relative; }
.hidden { display: none !important; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

/* ── Animations ─────────────────────────────────────────── */
/* fadeIn animation removed — Router.render() handles page transitions via opacity */

/* ── Responsive ─────────────────────────────────────────── */
html, body { overflow-x: hidden; }
* { min-width: 0; }

/* ── Mobile nav drawer ──────────────────────────────────── */
.mobile-nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); }
.mobile-nav-toggle:hover { background: var(--bg); }

.mobile-nav-drawer {
  position: fixed; left: 0; right: 0; top: 64px; bottom: 0;
  background: var(--white); z-index: 999;
  padding: 8px 12px 32px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
  transform: translateY(-108%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.mobile-nav-drawer.open { transform: translateY(0); }
.mobile-nav-item {
  padding: 14px 16px; border-radius: var(--radius);
  font-size: 16px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer; min-height: 52px; display: flex; align-items: center;
  transition: background 0.1s, color 0.1s; border-left: 3px solid transparent;
}
.mobile-nav-item:hover  { background: var(--bg); color: var(--text); }
.mobile-nav-item.active { background: var(--primary-light); color: var(--primary); font-weight: 600; border-left-color: var(--primary); }
.mobile-nav-item:active { opacity: 0.8; }

/* ── Dashboard grids ────────────────────────────────────── */
.dash-kpi-grid  { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 22px; align-items: start; }
.dash-main-grid { display: grid; grid-template-columns: clamp(220px,28%,280px) 1fr; gap: 18px; align-items: start; max-width: 1600px; }

/* ── Profile avatar-only (≤ 1083px) ────────────────────── */
@media (max-width: 1083px) {
  .profile-name, .profile-org { display: none; }
  .profile-btn { gap: 0; }
  .profile-btn > svg { display: none; }
}

/* ── Tablet (≤ 980px) ───────────────────────────────────── */
@media (max-width: 980px) {
  .header { padding: 0 20px; }
  .header-nav { display: none; }
  .mobile-nav-toggle { display: flex !important; }
  .main-content { padding: 28px 24px; }

  .dash-kpi-grid  { grid-template-columns: repeat(3, 1fr); }
  .dash-main-grid { grid-template-columns: 1fr; }

  .detail-layout { grid-template-columns: 1fr; gap: 24px; }
  .detail-sidebar { position: static; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
}

/* ── Phone (≤ 475px) ────────────────────────────────────── */
@media (max-width: 475px) {
  .header { padding: 0 14px; height: 56px; }
  .header-logo img { height: 60px; }
  /* A 200px wordmark plus the language switch, bell, profile and hamburger does
     not fit a 360px phone: the row overflows and pushes the menu button off the
     edge. Cap the mark on phones so the controls stay reachable. */
  [data-brand="drivewealth"] .header-logo img { max-width: min(140px, 42vw); }
  [data-brand="geniustrader"] .header-logo img { height: 38px; max-width: min(130px, 40vw); }
  /* The header is 56px here, and the same controls still have to fit beside
     the mark, so both bounds tighten together. */
  :root[data-tenant-logo] .header-logo img { max-height: 32px; max-width: min(150px, 40vw); }
  .header-logo { min-width: 0; }
  .header-right { flex: none; }
  .main-content { margin-top: 56px; height: calc(100vh - 56px); padding: 14px 12px; }
  .mobile-nav-drawer { top: 56px; }

  #org-dropdown-wrap { display: none; }
  .profile-name, .profile-org { display: none; }
  .profile-btn { padding: 4px 6px; gap: 0; border: none; background: none; box-shadow: none; }
  .profile-btn > svg { display: none; }

  .page-title  { font-size: 20px; }
  .page-subtitle { font-size: 13px; margin-bottom: 14px; }

  /* Dashboard grids */
  .dash-kpi-grid  { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .dash-main-grid { grid-template-columns: 1fr; gap: 12px; }

  /* KPI cards */
  .dash-kpi-card  { padding: 14px 16px !important; }
  .dash-kpi-label { font-size: 10px !important; }
  .dash-kpi-value { font-size: 22px !important; }
  .dash-kpi-btn   { width: 100% !important; height: 32px !important; padding: 0 10px !important;
                    align-self: stretch !important; font-size: 11px !important; justify-content: center !important; }

  .card-pad   { padding: 14px; }
  .card-pad-lg { padding: 16px; }

  .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-value { font-size: 22px; }

  .grid-2 { grid-template-columns: 1fr; gap: 12px; }
  .grid-3 { grid-template-columns: 1fr; gap: 12px; }

  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; gap: 0; padding-bottom: 2px; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; padding: 10px 14px; }

  .btn { padding: 8px 14px; font-size: 13px; }

  .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .filter-left { flex-wrap: wrap; gap: 8px; }
  .filter-group { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .select-input, .input { width: 100%; }

  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }
  th, td { padding: 10px 12px; }

  .modal { padding: 20px 16px; border-radius: var(--radius-lg); max-height: 92vh; }
  .modal-grid { grid-template-columns: 1fr; }

  .detail-layout { gap: 14px; }
  .breadcrumb { font-size: 12px; margin-bottom: 14px; }
  .session-avatar { width: 48px; height: 48px; font-size: 16px; }

  .wizard-wrap { padding: 20px 0; }

  .section-title { font-size: 20px; }
}

/* ── Small phone (≤ 390px) ──────────────────────────────── */
@media (max-width: 390px) {
  .main-content { padding: 12px 10px; }
  .header { padding: 0 10px; }
  .page-title { font-size: 18px; }

  .dash-kpi-grid  { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dash-kpi-value { font-size: 20px !important; }
  .dash-kpi-label { font-size: 9px !important; letter-spacing: 0.03em !important; }
  .dash-kpi-card  { padding: 12px !important; }

  .kpi-value { font-size: 20px; }
  .badge { font-size: 11px; padding: 3px 7px; }
  .btn { font-size: 12px; padding: 7px 12px; }
  .card-pad { padding: 12px; }
  .card-pad-lg { padding: 14px; }
  .section-title { font-size: 18px; }
}

/* ── Touch targets ──────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .nav-btn, .tab-btn, .dropdown-item, .mobile-nav-item { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  input, select, textarea { font-size: 16px; }
}

/* ── Sessions filter — mobile icon vs desktop selects ───── */
.filter-mobile-wrap { display: none; }
/* Sessions filter */
@media (max-width: 521px) {
  .filter-desktop { display: none !important; }
  .filter-mobile-wrap { display: block; }
  .filter-bar { flex-wrap: nowrap; padding: 10px 12px; gap: 8px; }
}

/* ── Dashboard chart responsive ─────────────────────────── */
.chart-desktop-header { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; padding:18px 20px 0; }
.chart-desktop-controls { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.chart-mobile-header { display:none; }
.chart-series-label { display:inline; }
.chart-mobile-row { display:flex; align-items:center; gap:8px; width:100%; }

@media (max-width: 520px) {
  .chart-desktop-header { display:none !important; }
  .chart-mobile-header  { display:flex !important; flex-direction:column; gap:10px; padding:14px 14px 0; }
  .chart-series-label   { display:none !important; }
  .chart-pad { padding: 8px 0 8px !important; }
}

/* ── Very narrow (≤ 240px) ──────────────────────────────── */
@media (max-width: 240px) {
  /* Hide bell and profile from header — they appear in the drawer */
  .header-bell-wrap, #profile-dropdown-wrap { display: none !important; }
  .header-logo img { height: 48px; max-width: 120px; }
  [data-brand="drivewealth"] .header-logo img { max-width: 120px; }
  [data-brand="geniustrader"] .header-logo img { height: 34px; max-width: 110px; }
  :root[data-tenant-logo] .header-logo img { max-height: 28px; max-width: 110px; }
  .header { padding: 0 10px; }
  /* Show the bell + profile rows inside the mobile drawer */
  .drawer-narrow-only { display: block !important; }
}

/* ── Sessions mobile padding + title spacing ─────────────── */
@media (max-width: 630px) {
  .sessions-page-title { padding-top: 15px !important; }
}

/* ── Dark mode: high risk card — left border only, no full surround ── */
[data-theme="dark"] .dash-kpi-grid .card[style*="7F1D1D"] {
  border-color: var(--border) !important;
  border-left-color: #F87171 !important;
  color: #F87171;
}
[data-theme="dark"] .dash-kpi-grid .card[style*="7F1D1D"] .dash-kpi-value {
  color: #F87171 !important;
}



/* ── Chart max height on large screens ───────────────────── */
#dash-chart-svg { max-height: 340px; }
.dash-kpi-grid  { max-width: 1600px; }

/* ============================================================
   Arabic / RTL
   ------------------------------------------------------------
   i18n.js puts lang="ar" dir="rtl" class="lang-ar" on <html>.
   Flex/grid layouts mirror on their own; the rules below only
   fix the places where the stylesheet names a physical side.
   ============================================================ */

/* IBM Plex Sans Arabic carries the Arabic glyphs DM Sans lacks.
   DM Sans stays in the stack so Latin runs (IDs, emails, codes)
   keep the same shapes they have in English. */
html.lang-ar body {
  font-family: var(--brand-font-arabic);
  line-height: 1.6;
}
/* Arabic ascenders/descenders need a little more room than Latin. */
html.lang-ar .kpi-value,
html.lang-ar .dash-kpi-value,
html.lang-ar .page-title,
html.lang-ar .section-title,
html.lang-ar .modal-title,
html.lang-ar .auth-title { line-height: 1.35; }

/* Session IDs, emails, API keys and other machine values stay LTR
   even inside an RTL paragraph. */
[dir="rtl"] .force-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* ── Form controls ──────────────────────────────────────── */
[dir="rtl"] .workspace-switcher select { padding: 0 10px 0 28px; }
[dir="rtl"] .select-input {
  background-position: left 10px center;
  padding-left: 28px;
  padding-right: 12px;
}

/* ── Menus, tables, detail rows ─────────────────────────── */
[dir="rtl"] .dropdown { right: auto; left: 0; }
[dir="rtl"] .dropdown-item { text-align: right; }
[dir="rtl"] th { text-align: right; }
[dir="rtl"] .detail-val { text-align: left; }
[dir="rtl"] .modal-card,
[dir="rtl"] .wizard-option-full { text-align: right; }

/* ── Session detail audit rail ──────────────────────────── */
[dir="rtl"] .audit-line { left: auto; right: 18px; }

/* ── Mobile drawer active marker ────────────────────────── */
[dir="rtl"] .mobile-nav-item {
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}
[dir="rtl"] .mobile-nav-item.active {
  border-left-color: transparent;
  border-right-color: var(--primary);
}

/* ── Flow config panel docks to the other edge ──────────── */
[dir="rtl"] .config-panel {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 20px rgba(0,0,0,0.06);
}

/* ── Flow canvas stays LTR ───────────────────────────────
   Node coordinates, connector paths and drag math are all
   absolute pixels measured from the left edge. Mirroring the
   canvas would desync the wiring, so it keeps its own
   direction; Arabic labels inside nodes still shape RTL. */
[dir="rtl"] #flow-canvas,
[dir="rtl"] #canvas-inner { direction: ltr; }
[dir="rtl"] #canvas-inner .flow-node-name,
[dir="rtl"] #canvas-inner .node-field-label,
[dir="rtl"] #canvas-inner .node-field-value { direction: rtl; text-align: right; }

/* ── Directional glyphs ─────────────────────────────────── */
[dir="rtl"] .flow-card-arrow,
[dir="rtl"] .breadcrumb-arrow { transform: scaleX(-1); }
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* ── Language toggle (header) ───────────────────────────── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  isolation: isolate;
}
.lang-switch-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  inset-inline-start: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--primary);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
/* Default thumb position covers EN (the first option). */
.lang-switch[data-lang="ar"] .lang-switch-thumb { transform: translateX(100%); }
[dir="rtl"] .lang-switch[data-lang="ar"] .lang-switch-thumb { transform: translateX(-100%); }
.lang-switch-option {
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.22s ease;
  /* Latin labels either way, so they never reorder with the page. */
  direction: ltr;
}
.lang-switch-option.active { color: #fff; }
.lang-switch-option:not(.active):hover { color: var(--text); }

@media (max-width: 475px) {
  .lang-switch-option { min-width: 30px; padding: 4px 6px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch-thumb { transition: none; }
}

/* ── Phone handoff ──────────────────────────────────────── */
/* Desktop: the "continue on phone" offer inside the verification sidebar. */
/* The slot sits at the top of the sidebar, above the status, so the divider
   goes underneath it — a rule above the first element would look detached. */
.handoff-slot:not(:empty) {
  margin-block-end: 16px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--border);
}
/* Accented rather than ghost: this is an offer people should notice, not a
   footnote. Reads as an outlined primary so it does not compete with the
   solid primary CTA above it in the sidebar. */
.handoff-trigger {
  width: 100%;
  justify-content: center;
  gap: 8px;
  padding-block: 11px;
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--primary-light);
  border: 1px solid var(--primary);
}
.handoff-trigger:hover {
  background: var(--primary);
  color: #fff;
}
.handoff-trigger svg { width: 16px; height: 16px; flex: none; }
.handoff-panel {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}
.handoff-panel-title {
  font-weight: 700;
  font-size: 13px;
}
.handoff-qr {
  width: min(190px, 100%);
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.handoff-qr .qr-svg {
  display: block;
  width: 100%;
  height: auto;
}
.handoff-qr-error,
.handoff-hint {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.handoff-expiry {
  font-size: 11px;
  color: var(--text-muted);
}
.handoff-error { color: var(--danger); }
.handoff-success { color: var(--success); }
.handoff-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.handoff-waiting {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.handoff-spinner {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border: 2px solid var(--border);
  border-block-start-color: var(--primary);
  border-radius: 50%;
  animation: handoff-spin 0.9s linear infinite;
}
@keyframes handoff-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .handoff-spinner { animation: none; }
}

/* In-button spinner for an action that has been sent and not yet answered.

   Shares one rotation definition with .handoff-spinner rather than declaring a
   second identical keyframe, but draws itself from currentColor instead of the
   --border/--primary pair: this sits on a filled button, where those two tokens
   are the button's own background and would be invisible. currentColor also
   means it follows whatever brand is active without knowing which. */
.btn-spinner {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  display: inline-block;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  opacity: 0.9;
  animation: handoff-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation: none; }
}

/* Phone: the standalone capture page. No header, no navigation. */
.handoff-mobile {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
}
.handoff-mobile-card {
  width: min(460px, 100%);
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  padding: 26px 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.handoff-mobile-logo { height: 30px; width: auto; }
[data-brand="drivewealth"] .handoff-mobile-logo {
  height: 34px;
  max-width: min(220px, 80vw);
  object-fit: contain;
}
/* The phone handoff card is white, so this resolves to the transparent
   dark-ink mark, never the inverted one. */
[data-brand="geniustrader"] .handoff-mobile-logo {
  height: 52px;
  max-width: min(200px, 70vw);
  object-fit: contain;
}
.handoff-mobile-title { font-size: 19px; font-weight: 700; }
.handoff-mobile-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.handoff-mobile-note { font-size: 11px; color: var(--text-muted); }
.handoff-mobile-cta { width: 100%; }
.handoff-mobile-status {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.handoff-mobile-status strong { font-size: 14px; }
.handoff-mobile-status span { font-size: 12px; color: var(--text-secondary); }
/* The capture widget needs a real box to render into on a phone screen. */
.handoff-provider-host {
  width: 100%;
  height: min(560px, 68vh);
  display: flex;
}
.handoff-provider-host facephi-sdk-provider,
.handoff-provider-host facephi-selphi-widget,
.handoff-provider-host facephi-selphid-widget {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
}