/* ══════════════════════════════════════════════════════════════════════
   zmove.ai portal — token pass (drop-in replacement for
   zmove-portal/public/css/app.css)

   SCOPE: values only. Every class name, selector, and structural rule
   from the original file is preserved, so no .ejs view needs editing.
   Nothing here changes nav links, routes, tables, forms, or copy.

   WHAT CHANGED
   1. Space Grotesk -> IBM Plex Sans (+ Plex Mono for labels/figures).
   2. Nav: dark navy gradient + SVG noise -> light neutral, navy ink,
      brand-gradient hairline. (Set $nav-dark below to keep it dark.)
   3. Metric cards: four rainbow nth-child gradients -> one neutral
      white card. Attention is carried by Z Gold only.
   4. Blue is reserved for actions. Gold is reserved for attention.
      Teal/purple/coral decorative uses are retired.
   5. Warm sandstone surfaces + warm hairlines, matching the workspace.
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand (zmove.ai style guide) ── */
  --navy:    #0B1D3A;  /* Deep Navy — text, headings */
  --navy-lt: #1E325A;
  --sky:     #1473E6;  /* Enterprise Blue — ACTIONS ONLY */
  --sky-dk:  #0F5BB8;
  --gold:    #FFB32E;  /* Z Gold — ATTENTION ONLY */
  --gold-lt: #FFF3DC;
  --gold-ink:#8A5A0B;

  /* Legacy aliases kept so existing views don't break.
     Deliberately converged onto the brand palette. */
  --teal:    #1473E6;
  --teal-lt: #E7F1FD;
  --emerald: #1F9A6D;
  --emerald-lt: #E3F5EE;
  --green:   #1F9A6D;
  --amber:   #FFB32E;
  --amber-lt:#FFF3DC;
  --coral:   #D14343;
  --coral-lt:#FCE9E9;
  --purple:  #4A586B;   /* retired -> neutral ink */
  --purple-lt:#F1EDE5;  /* retired -> neutral surface */
  --red:     #D14343;
  --red-lt:  #FCE9E9;

  /* ── Warm neutral ramp (matches the agent workspace) ── */
  --paper:    #F9F5EE;
  --paper-2:  #FBF8F3;
  --gray-50:  #F9F5EE;
  --gray-100: #F1EDE5;
  --gray-200: #DDD5C8;
  --gray-400: #5A6675;   /* 6.1:1 on white — .metric-label, .card-subtitle,
                            .form-hint, .empty-state */
  --gray-700: #4A586B;   /* 7.4:1 on white */
  --gray-900: #0B1D3A;
  --white:    #ffffff;
  --line:     #E9E3DA;
  --line-2:   #F4F0EA;

  /* Gradients: retired as decoration, kept as tokens for the two
     places they still earn their keep (brand hairline, login). */
  --grad-brand:    linear-gradient(90deg, #0B1D3A, #1473E6 52%, #FFB32E);
  --grad-progress: #1473E6;
  --grad-complete: #1F9A6D;
  --grad-nav:      #FFFFFF;

  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-sm: 0 1px 2px rgba(11,29,58,.05);
  --shadow:    0 3px 12px rgba(11,29,58,.09);
  --shadow-md: 0 8px 28px rgba(11,29,58,.12);

  --surface:   #ffffff;
  --surface-2: #FBF8F3;
  --border:    #E9E3DA;
  --text-primary:   #0B1D3A;
  --text-secondary: #4A586B;
  --text-muted:     #5A6675;

  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'IBM Plex Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 14px; line-height: 1.6;
  color: var(--navy); background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sky); text-decoration: none; }
a:hover { color: var(--sky-dk); text-decoration: none; }

/* ── NAV ───────────────────────────────────────────────────────────────
   Light treatment. The 3px brand hairline is the one piece of colour,
   and it's the same hairline the agent workspace rail uses — that's
   what ties the two shells together without a dark bar fighting the
   light rail. To revert to dark, swap the four marked values.        */
.nav {
  background: #FFFFFF;                       /* dark: #0B1D3A            */
  border-bottom: 1px solid var(--line);      /* dark: rgba(255,255,255,.14) */
  padding: 0 28px; display: flex; align-items: center;
  height: 54px; gap: 4px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 2px rgba(11,29,58,.04);
}
/* The brand hairline replaces the old radial-gradient wash + SVG squiggles. */
.nav::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad-brand); pointer-events: none;
}
.nav::after { content: none; }

.nav-brand { color: var(--navy); font-weight: 600; font-size: 16px; letter-spacing: -.3px; display: inline-flex; align-items: center; }
.nav-brand img { height: 40px; width: auto; display: block; }   /* dark: + filter: brightness(0) invert(1) */

.nav-links { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav-links a {
  color: var(--gray-700);                    /* dark: rgba(255,255,255,.72) */
  font-size: 13px; font-weight: 500;
  padding: 6px 11px; border-radius: 6px;
  transition: background .15s, color .15s;
}
.nav-links a:hover { color: var(--navy); background: var(--paper-2); text-decoration: none; }
/* Active state: the views set inline font-weight:700, so we style on that. */
.nav-links a[style*="700"] { color: var(--navy); background: var(--gray-100); }

.nav-badge {
  background: var(--sky); color: #fff;
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
}

/* ── INTEGRATION DOTS ── */
/* Three real connection states, not two -- own (personally connected
   everywhere, green), shared (working via a client-level/service
   credential, blue -- a legitimate state, not a warning), none (something
   genuinely not configured, grey). amber/red are health overlays
   (approaching expiry / broken) that take priority over own/shared when
   present -- see src/lib/integrations/connection-state.js. */
.cxn-dot    { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.cxn-own    { background: var(--emerald); }
.cxn-shared { background: #3b82f6; }
.cxn-amber  { background: var(--gold); }
.cxn-red    { background: var(--red); }
.cxn-none   { background: var(--gray-200); }

/* ── LAYOUT ── */
.page        { max-width: 1080px; margin: 0 auto; padding: 30px 28px 56px; }
.page-wide   { max-width: 1320px; margin: 0 auto; padding: 30px 28px 56px; }
.page-narrow { max-width: 640px;  margin: 0 auto; padding: 30px 28px 56px; }

/* ── CARDS ── */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px 24px;
  margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.card-title { font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 12px; letter-spacing: -.2px; }
.card-subtitle { font-size: 12px; color: var(--gray-400); margin-top: 2px; }

/* ── METRICS ──────────────────────────────────────────────────────────
   The rainbow nth-child variants are gone. One card treatment; figures
   carry the weight. Add .metric.attention for a gold top rule.       */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 24px; }
.metric {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 15px 17px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.metric::after { content: none; }
.metric.attention::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gold);
}
.metric-label {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  color: var(--gray-400); letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 8px;
}
.metric-value {
  font-size: 27px; font-weight: 600; color: var(--navy);
  line-height: 1; letter-spacing: -.7px; font-variant-numeric: tabular-nums;
}
.metric-sub { font-size: 11.5px; color: var(--gray-400); margin-top: 5px; }

/* Neutralise the old per-position colour overrides. */
.metrics .metric:nth-child(1),
.metrics .metric:nth-child(2),
.metrics .metric:nth-child(3),
.metrics .metric:nth-child(4) { background: var(--white); border-color: var(--line); }
.metrics .metric:nth-child(1) .metric-value, .metrics .metric:nth-child(1) .metric-label,
.metrics .metric:nth-child(2) .metric-value, .metrics .metric:nth-child(2) .metric-label,
.metrics .metric:nth-child(3) .metric-value, .metrics .metric:nth-child(3) .metric-label,
.metrics .metric:nth-child(4) .metric-value, .metrics .metric:nth-child(4) .metric-label { color: inherit; }
.metrics .metric .metric-value { color: var(--navy); }
.metrics .metric .metric-label { color: var(--gray-400); }
.metrics .metric:nth-child(4) .metric-sub { color: var(--gray-400); }

/* ── PROGRESS BARS ── */
.progress-wrap { background: var(--gray-100); border-radius: 6px; height: 6px; overflow: hidden; margin: 6px 0; }
.progress-fill { height: 100%; background: var(--sky); border-radius: 6px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.progress-fill.complete { background: var(--emerald); }
.progress-fill.warn     { background: var(--gold); }
.progress-fill.over     { background: var(--red); }

/* ── STAGE BADGES ─────────────────────────────────────────────────────
   Collapsed from nine colours to four semantic ones: neutral for
   in-flight stages, gold for waiting, green for settled, red for lost. */
.stage {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent;
}
.stage-questionnaire { background: var(--gold-lt); color: var(--gold-ink); border-color: #F5DCAE; }
.stage-day1_prep     { background: var(--gray-100); color: var(--gray-700); border-color: var(--line); }
.stage-week1_install { background: var(--gray-100); color: var(--gray-700); border-color: var(--line); }
.stage-week2_run     { background: var(--gray-100); color: var(--gray-700); border-color: var(--line); }
.stage-day14_tune    { background: var(--gray-100); color: var(--gray-700); border-color: var(--line); }
.stage-subscribed    { background: var(--emerald-lt); color: #0F6B4A; border-color: #BFE7D7; }
.stage-churned       { background: var(--red-lt); color: #9B2C2C; border-color: #F3C9C9; }
.stage-admin         { background: var(--teal-lt); color: var(--sky-dk); border-color: #C3DBF8; }
.stage-consultant    { background: var(--gray-100); color: var(--gray-700); border-color: var(--line); }

/* ── CHECKLIST ── */
.checklist { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.checklist li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.check-box {
  width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid var(--gray-200); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.check-box.done { background: var(--emerald); border-color: var(--emerald); box-shadow: none; }
.check-box.done::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; }
.check-label.done { text-decoration: line-through; color: var(--gray-400); }

/* ── TABLES ── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  background: var(--paper-2); color: var(--gray-700);
  font-family: var(--mono); font-weight: 500; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--line);
}
td { padding: 11px 16px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--paper-2); }

/* ── FORMS ── */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-700); margin-bottom: 5px; }
.form-hint  { font-size: 11px; color: var(--gray-400); margin-bottom: 4px; display: block; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 9px 13px;
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  font-size: 13px; color: var(--navy); background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s; font-family: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--sky); box-shadow: 0 0 0 3px var(--teal-lt); }
textarea { min-height: 80px; resize: vertical; }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; cursor: pointer; }
.form-check input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--sky); }

/* ── BUTTONS ──────────────────────────────────────────────────────────
   Enterprise Blue is now the primary action (it was navy, which read
   as another neutral). Gradients removed.                            */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 17px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all .15s; font-family: inherit;
}
.btn-primary { background: var(--sky); color: #fff; border-color: var(--sky); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--sky-dk); border-color: var(--sky-dk); }
.btn-sky { background: var(--sky); color: #fff; border-color: var(--sky); }
.btn-sky:hover { background: var(--sky-dk); border-color: var(--sky-dk); }
.btn-teal { background: var(--sky); color: #fff; border-color: var(--sky); }
.btn-teal:hover { background: var(--sky-dk); }
.btn-outline { background: #fff; color: var(--navy); border-color: var(--gray-200); }
.btn-outline:hover { background: var(--paper-2); border-color: #C9BFAE; }
.btn-success { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.btn-success:hover { background: #178257; }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover { background: #B93636; }
.btn-sm { padding: 6px 13px; font-size: 12px; }

/* ── ALERTS ── */
.alert { padding: 11px 15px; border-radius: var(--radius); font-size: 13px; margin-bottom: 14px; font-weight: 500; }
.alert-success { background: var(--emerald-lt); color: #0F6B4A; border: 1px solid #BFE7D7; }
.alert-error   { background: var(--red-lt); color: #9B2C2C; border: 1px solid #F3C9C9; }
.alert-info    { background: var(--teal-lt); color: var(--sky-dk); border: 1px solid #C3DBF8; }
.alert-warn    { background: var(--gold-lt); color: var(--gold-ink); border: 1px solid #F5DCAE; }

/* ── TIMELINE ── */
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 16px; }
.tl-dot  { position: absolute; left: -16px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--gray-200); border: 2px solid #fff; }
.tl-dot.done   { background: var(--emerald); box-shadow: none; }
.tl-dot.active { background: var(--sky); box-shadow: 0 0 0 3px var(--teal-lt); }
.tl-label { font-size: 12.5px; font-weight: 600; color: var(--navy); }
.tl-sub   { font-size: 11.5px; color: var(--gray-400); }

/* ── SECTION HEADER ── */
.section-hdr {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400);
  padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 14px;
}

/* ── EMPTY STATE ── */
.empty-state {
  background: var(--white); border: 1px dashed var(--gray-200);
  border-radius: var(--radius-lg); padding: 40px 28px;
  text-align: center; color: var(--gray-400); font-size: 13px;
}

/* ── LOGIN ──
   The one place a rich background still earns its keep. Flattened from
   a three-stop rainbow to a deep navy field. */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 90% 70% at 50% 0%, #16305C 0%, #0B1D3A 62%, #061224 100%);
}
.login-card {
  background: #fff; border-radius: var(--radius-xl);
  padding: 40px 44px; width: 380px; box-shadow: 0 24px 56px rgba(6,18,36,.42);
}
.login-logo-img { width: 220px; height: auto; display: block; margin: 0 auto 14px; }
.login-sub { font-size: 13px; color: var(--gray-400); margin-bottom: 26px; }

/* ── MODAL ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(11,29,58,.42);
  backdrop-filter: blur(3px); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: #fff; border-radius: var(--radius-xl); padding: 28px 32px;
  width: 100%; max-width: 500px; box-shadow: var(--shadow-md);
  position: relative; transform: translateY(14px); transition: transform .2s;
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal-title { font-size: 17px; font-weight: 600; color: var(--navy); margin-bottom: 20px; letter-spacing: -.3px; }
.modal-close {
  position: absolute; top: 18px; right: 20px;
  background: var(--gray-100); border: none; width: 27px; height: 27px;
  border-radius: 50%; font-size: 13px; cursor: pointer; color: var(--gray-700);
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.modal-close:hover { background: var(--gray-200); }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pass-hint { font-size: 11px; color: var(--gray-400); margin-top: 4px; }

/* ── JOURNEY / RINGS ── */
.journey-node.done   { background: var(--emerald) !important; }
.journey-node.active { background: var(--sky) !important; box-shadow: 0 0 0 4px var(--teal-lt) !important; }
.journey-node.todo   { background: #fff !important; border: 1.5px solid var(--gray-200) !important; color: var(--gray-400) !important; }
.journey-progress-fill { background: var(--sky) !important; }

/* ── FADE-IN ── */
.fade-in { animation: fadeIn .4s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .page, .page-wide, .page-narrow { padding: 20px 16px; }
  .nav { padding: 0 16px; gap: 0; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 6px 8px; font-size: 12px; }
  .metrics { grid-template-columns: 1fr 1fr; }
}

/* Questionnaire progress bar — was a gold/blue gradient. */
td .progress-fill { background: var(--sky); }

/* ── STAGING BANNER ── */
.env-banner {
  position: sticky; top: 0; z-index: 200;
  background: var(--gold); color: #1A1200;
  text-align: center; font-family: var(--mono);
  font-size: 10px; font-weight: 500; letter-spacing: .16em;
  padding: 5px 0;
}