/* ============================================================
   CAREER WORKSPACE (Dashboard) — page-specific styles.
   Reuses --navy/--card/--bright/--muted/--dim/--radius etc. from
   interview.css; does not redefine them. Loaded only on the
   dashboard-history.ejs page via extraStylesheets, so nothing
   here affects Interview Setup, Live Interview, or Reports.
   ============================================================ */

.workspace-content h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}
.subtitle { color: var(--muted); margin-bottom: 20px; font-size: 13px; }

.icon-sq {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.icon-sq.square { border-radius: 12px; width: 44px; height: 44px; font-size: 19px; }
.icon-sq.violet { background: #6D28D9; color: #FFFFFF; }
.icon-sq.green  { background: #059669; color: #FFFFFF; }
.icon-sq.blue   { background: #1D4ED8; color: #FFFFFF; }
.icon-sq.gold   { background: #A16207; color: #FFFFFF; }
.icon-sq.orange { background: #C2410C; color: #FFFFFF; }
.icon-sq.sm { width: 28px; height: 28px; font-size: 13px; }

.overview-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 24px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
}
.overview-stat {
  padding: 13px 24px;
  display: flex; gap: 14px; align-items: flex-start;
  border-right: 1px solid rgba(255,255,255,0.10);
}
.overview-stat:last-child { border-right: none; }
.overview-stat .num { font-size: 22px; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--white); }
.overview-stat .label { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.overview-stat .sublabel { font-size: 11px; color: var(--dim); margin-top: 6px; }

.overview-stat .num.resume-intel-status { display: flex; align-items: center; gap: 8px; font-size: 22px; }
.resume-intel-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.resume-intel-dot.is-active {
  background: #34D399;
  animation: resumeIntelPulse 2s infinite;
}
.resume-intel-dot.is-inactive { background: var(--dim); }
@keyframes resumeIntelPulse {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
.resume-intel-cta { color: var(--bright); text-decoration: none; font-weight: 700; font-size: 12px; display: inline-block; }
.resume-intel-cta:hover { color: var(--white); text-decoration: underline; }

.page-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 6px; }
.new-interview-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bright); color: var(--white);
  padding: 6px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  white-space: nowrap;
}
.new-interview-btn:hover { background: var(--royal); }

.page-header-actions { display: flex; align-items: center; gap: 14px; }
.db-bell-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted); cursor: pointer; flex-shrink: 0;
}
.db-bell-btn:hover { background: rgba(255,255,255,0.10); color: var(--white); }
.db-profile-wrap { position: relative; flex-shrink: 0; }
.db-profile-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 0;
}
.db-profile-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: #1E2A45; color: var(--white); font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.db-profile-menu {
  display: none; position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 200px; background: #12172a; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); overflow: hidden; z-index: 60;
}
.db-profile-menu-header { padding: 14px 14px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.db-profile-menu-name { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 8px; }

.readiness-row { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.readiness-summary-col { flex-shrink: 0; min-width: 130px; }
.readiness-score { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.readiness-score .num { font-size: 36px; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; color: #34D399; }
.readiness-score .of100 { font-size: 15px; color: var(--dim); }
.readiness-progress-label { font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.readiness-progress-label.good { color: #34D399; }
.readiness-progress-label.mid  { color: #FCD34D; }
.readiness-progress-label.low  { color: #FCA5A5; }
.readiness-caption { font-size: 11px; color: var(--dim); max-width: 150px; line-height: 1.5; }
.readiness-delta-inline { font-size: 12px; font-weight: 600; color: #34D399; white-space: nowrap; }
.readiness-chart-row { display: flex; align-items: stretch; gap: 8px; flex: 1; min-width: 220px; }
.trend-y-labels {
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 10px; color: var(--dim); text-align: right;
  height: 52px; padding-bottom: 14px;
}
.readiness-chart-col { flex: 1; min-width: 180px; }
.readiness-chart-col .score-trend-svg {
  height: 52px;
}
.readiness-chart-col .trend-line { stroke: #34D399; stroke-width: 2.5; }
.readiness-chart-col .trend-dot { fill: #34D399; }
.readiness-chart-col .trend-fill { fill: url(#trendGrad); }
.readiness-chart-col .trend-dot-latest { fill: #6EE7B7; stroke: rgba(110,231,183,0.35); stroke-width: 4; }
.trend-grid-line { stroke: rgba(255,255,255,0.07); stroke-width: 1; }
.trend-axis-line { stroke: rgba(255,255,255,0.14); stroke-width: 1; }
.trend-x-labels {
  display: flex; justify-content: space-between;
  font-size: 9.5px; color: var(--dim); margin-top: 2px;
}

.readiness-competency-row {
  display: flex; gap: 16px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.competency-stat { flex: 1; min-width: 0; }
.competency-stat-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--dim); margin-bottom: 3px;
}
.competency-stat-value { font-size: 13px; font-weight: 700; color: #ffffff; }
.competency-stat-value.good { color: #6EE7B7; }
.competency-stat-value.focus { color: #FCD34D; }

.minutes-panel h3 { display: flex; align-items: center; gap: 6px; }
.minutes-panel h3 svg { color: #FBBF24; flex-shrink: 0; }
.minutes-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.minutes-ring-wrap { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.minutes-ring-wrap svg { transform: rotate(-90deg); }
.minutes-ring-track { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 11; }
.minutes-ring-fill { fill: none; stroke: url(#minutesRingGrad); stroke-width: 11; stroke-linecap: round; }
.minutes-ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.minutes-ring-center .num { font-size: 24px; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; color: #ffffff; }
.minutes-ring-center .of100 { font-size: 10.5px; font-weight: 400; color: #ffffff; }
.minutes-stats-col { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 8px; }
.minutes-remaining-label { font-size: 13px; font-weight: 600; color: #ffffff; }
.minutes-progress-track {
  height: 8px; border-radius: 4px; background: rgba(255,255,255,0.09);
  overflow: hidden;
}
.minutes-progress-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #FBBF24, #F59E0B);
}
.minutes-progress-labels {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--dim);
}
.minutes-footer-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.minutes-renew-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.minutes-renew-icon { color: var(--dim); flex-shrink: 0; }
.minutes-renew-label { font-size: 10.5px; color: var(--dim); }
.minutes-renew-date { font-size: 13px; font-weight: 700; color: #ffffff; }
.minutes-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 600; color: #FBBF24;
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.4);
  border-radius: 8px; text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.minutes-cta:hover { background: rgba(245,158,11,0.2); }

.pair-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.pair-row--activity { grid-template-columns: 1fr 1fr; }

.panel {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 258px;
}
.panel h3 {
  font-size: 16px;
  color: var(--white);
  margin-bottom: 14px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.readiness-panel h3, .minutes-panel h3 { font-size: 15px; }
.panel-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-header-row h3 { margin-bottom: 0; }
.view-all-link { font-size: 13px; font-weight: 600; color: var(--bright); text-decoration: none; }
.view-all-link:hover { color: var(--white); }

.score-bar-row { display: flex; align-items: center; gap: 14px; }
.score-bar-label-wrap { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.score-bar-label { font-size: 13.5px; color: var(--white); font-weight: 600; }
.score-bar-track { flex: 1; height: 8px; background: var(--slate); border-radius: 4px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 4px; }
.score-bar-fill.high { background: var(--emerald); }
.score-bar-fill.mid  { background: var(--gold); }
.score-bar-fill.low  { background: var(--danger); }
.score-bar-val { font-size: 13px; font-weight: 700; min-width: 34px; text-align: right; }
.score-bar-val.high { color: #6EE7B7; }
.score-bar-val.mid  { color: #FCD34D; }
.score-bar-val.low  { color: #FCA5A5; }

.activity-feed { display: flex; flex-direction: column; }
.activity-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.activity-row:first-child { border-top: none; padding-top: 0; }
.activity-row.interrupted { background: rgba(59,130,246,0.05); border-radius: 10px; padding: 14px; border-top: none; margin-bottom: 4px; }
.activity-main { flex: 1; min-width: 0; }
.activity-main .title { font-size: 14px; font-weight: 600; color: #ffffff; }
.activity-main .meta { font-size: 12px; font-weight: 400; color: var(--dim); margin-top: 2px; }
.activity-cta {
  font-size: 13.5px; font-weight: 500; text-decoration: none;
  padding: 6px 14px; border-radius: 8px; white-space: nowrap;
}
.activity-cta.resume { background: var(--bright); color: var(--white); box-shadow: 0 0 0 3px rgba(59,130,246,0.18); }
.activity-cta.view { background: transparent; color: var(--bright); border: 1px solid var(--bright); }
.activity-score { font-size: 18px; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif; }
.activity-score.high { color: #6EE7B7; }
.activity-score.mid  { color: #FCD34D; }
.activity-score.low  { color: #FCA5A5; }
.activity-score .of100 { font-size: 12px; font-weight: 500; color: var(--dim); margin-left: 2px; }
.activity-status-text { font-size: 12.5px; font-weight: 700; text-transform: capitalize; }
.activity-status-text.in_progress { color: #FDBA74; }
.activity-status-text.abandoned { color: var(--dim); }

.qa-panel { display: flex; flex-direction: column; height: 100%; }
.quick-actions { display: flex; flex: 1; flex-direction: row; align-items: stretch; gap: 12px; margin-top: 14px; }
.qa-card { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.qa-card {
  display: flex;
  position: relative;
  border-radius: var(--radius);
  border: 1px solid;
  padding: 16px 18px;
  text-decoration: none;
  transition: background 0.15s;
}
.qa-card .qa-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  margin-bottom: 16px;
}
.qa-card .qa-title { font-size: 15px; font-weight: 600; color: #ffffff; margin-bottom: 6px; font-family: 'Plus Jakarta Sans', sans-serif; }
.qa-card .qa-desc { font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.5; max-width: 85%; }
.qa-card .qa-arrow {
  position: absolute; right: 18px; bottom: 18px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.qa-card.violet { border-color: rgba(139,124,246,0.35); background: rgba(124,58,237,0.06); }
.qa-card.violet .qa-icon { background: rgba(124,58,237,0.25); color: #A78BFA; }
.qa-card.violet .qa-arrow { border-color: rgba(139,124,246,0.4); color: #A78BFA; }
.qa-card.green { border-color: rgba(16,185,129,0.3); background: rgba(5,150,105,0.05); }
.qa-card.green .qa-icon { background: rgba(5,150,105,0.22); color: #34D399; }
.qa-card.green .qa-arrow { border-color: rgba(16,185,129,0.35); color: #34D399; }
.qa-card.blue { border-color: rgba(59,130,246,0.3); background: rgba(29,78,216,0.06); }
.qa-card.blue .qa-icon { background: rgba(29,78,216,0.25); color: #60A5FA; }
.qa-card.blue .qa-arrow { border-color: rgba(59,130,246,0.35); color: #60A5FA; }

@media (max-width: 1200px) {
  .workspace-content { max-width: 100%; padding: 32px 24px 60px; }
}

@media (max-width: 900px) {
  .overview-strip { grid-template-columns: repeat(2, 1fr); }
  .pair-row, .pair-row--activity { grid-template-columns: 1fr; }
}

/* Small phones — at 2 columns, labels like "Interviews completed" no
   longer have room to stay on one line and were clipping against the
   card edge/icon. Single column plus allowing wrap fixes it without
   touching the 2-column tablet layout above. (audit fix) */
@media (max-width: 480px) {
  .overview-strip { grid-template-columns: 1fr; }
  .overview-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.10); }
  .overview-stat:last-child { border-bottom: none; }
  .overview-stat .label { white-space: normal; }
}

/* ============================================================
   CAREER WORKSPACE — DARK PREMIUM REFINEMENT
   ------------------------------------------------------------
   Scoped under body.career-workspace only. Base rules above this
   block are untouched — Founder Dashboard, Resume, Settings, and
   purchase-success (all of which also load this file) keep their
   exact current styling, since none of them set that body class.

   interview.css is NOT touched. This block reuses its existing
   tokens (--card, --white, --muted, --dim, --radius) directly —
   no redefinition. Two values ARE defined locally below because
   they don't exist as tokens anywhere yet; both are scoped to
   body.career-workspace only, not introduced globally.

   MATERIAL DECISIONS — flagged per instruction, not silent:
   1. Border consolidation: this file currently mixes five
      different border opacities on plain container borders
      (0.05, 0.06, 0.08, 0.09, 0.10) with no evident reason for
      the variation. Consolidated the CONTAINER borders only
      (overview strip, panel, profile menu, bell button, activity
      row divider) to one local value, --cw-border: rgba(255,255,255,0.08)
      — the existing median, not an invented number. Chart/data-
      visualization strokes (.trend-grid-line, .trend-axis-line,
      .minutes-ring-track, .minutes-progress-track) are NOT touched
      by this consolidation — those opacities are part of the
      readiness/minutes visual language, left exactly as-is.
   2. .panel's existing box-shadow (0 1px 3px rgba(0,0,0,0.3)) is
      LEFT UNCHANGED. The audit's general "minimal shadow" direction
      was noted, but this specific shadow is already subtle (1px,
      low opacity) — removing it would be a discretionary call not
      explicitly mandated this round, so it was not touched.
   3. Radius: NOT changed anywhere in this block.
   4. Spacing/padding: NOT changed anywhere in this block.
   5. Interaction color: .new-interview-btn, .resume-intel-cta,
      .view-all-link, .activity-cta.resume/.view, and .db-profile-avatar
      move from the old --bright blue to purple (--cw-purple,
      matching the already-approved sidebar family #7C3AED /
      rgba(124,58,237,*) / #C4B5FD). This is a real color change,
      called out explicitly rather than bundled silently into the
      border consolidation above.

   NOT touched anywhere in this block (semantic colors, unchanged):
   - readiness green/amber/red (#34D399, #FCD34D, #FCA5A5, #6EE7B7)
   - minutes ring amber (#FBBF24, #F59E0B, url(#minutesRingGrad))
   - trend chart (url(#trendGrad), .trend-line/.trend-dot strokes)
   - score-bar-fill.high/mid/low (var(--emerald)/var(--gold)/var(--danger))
   - activity-status-text.in_progress (#FDBA74)
   - competency-stat-value.good/.focus
   - icon-sq.violet/green/blue/gold/orange (still flagged, not decided)
   - qa-card.violet/green/blue variants (still flagged, not decided)
   - activity-row.interrupted background tint (still flagged, not decided)
   - resume-intel-dot is-active/is-inactive + its pulse animation
   ============================================================ */

body.career-workspace {
  --cw-border: rgba(255, 255, 255, 0.08);
  --cw-purple: #7C3AED;
  --cw-purple-tint: rgba(124, 58, 237, 0.12);
  --cw-purple-text: #C4B5FD;
}

/* Border consolidation — container borders only, not chart strokes */
body.career-workspace .overview-strip { border: 1px solid var(--cw-border); }
body.career-workspace .overview-stat { border-right: 1px solid var(--cw-border); }
body.career-workspace .db-bell-btn { border: 1px solid var(--cw-border); }
body.career-workspace .db-profile-menu { border: 1px solid var(--cw-border); }
body.career-workspace .db-profile-menu-header { border-bottom: 1px solid var(--cw-border); }
body.career-workspace .readiness-competency-row { border-top: 1px solid var(--cw-border); }
body.career-workspace .minutes-footer-row { border-top: 1px solid var(--cw-border); }
body.career-workspace .panel { border: 1px solid var(--cw-border); }
body.career-workspace .activity-row { border-top: 1px solid var(--cw-border); }

/* Interaction color — old blue to purple, flagged item 5 above */
body.career-workspace .new-interview-btn { background: var(--cw-purple); }
body.career-workspace .new-interview-btn:hover { filter: brightness(1.12); }
body.career-workspace .resume-intel-cta { color: var(--cw-purple-text); }
body.career-workspace .resume-intel-cta:hover { color: var(--white); }
body.career-workspace .db-bell-btn:hover { background: var(--cw-purple-tint); color: var(--cw-purple-text); }
body.career-workspace .db-profile-avatar { background: var(--cw-purple-tint); color: var(--cw-purple-text); }
body.career-workspace .view-all-link { color: var(--cw-purple-text); }
body.career-workspace .view-all-link:hover { color: var(--white); }
body.career-workspace .activity-cta.resume {
  background: var(--cw-purple);
  box-shadow: 0 0 0 3px var(--cw-purple-tint);
}
body.career-workspace .activity-cta.view {
  color: var(--cw-purple-text);
  border: 1px solid var(--cw-purple);
}

/* ============================================================
   CAREER WORKSPACE — METADATA CONTRAST POLISH (Fix 1)
   ------------------------------------------------------------
   Scoped under body.career-workspace. Single accessibility pass:
   lifts var(--dim) (#475569) to a locally-scoped --cw-metadata
   (#5F6B7D) — roughly a 13% lift toward white — applied ONLY to
   genuinely low-priority informational text matching the approved
   examples: overview sublabels ("Last interview today" etc.),
   readiness caption, chart axis labels, competency eyebrow labels,
   minutes usage labels ("Used X mins"), renew label, activity
   timestamps.

   Explicitly NOT touched: primary headings, semantic status colors
   (.readiness-progress-label.*, .activity-status-text.abandoned,
   .resume-intel-dot.is-inactive), and primary-adjacent "/100"/"/30"
   suffixes next to score numbers (.readiness-score .of100,
   .activity-score .of100, .minutes-ring-center .of100) — left alone
   since they sit directly against a primary metric, not general
   metadata. No card background, spacing, radius, shadow, or layout
   property appears anywhere in this block.
   ============================================================ */

body.career-workspace {
  --cw-metadata: #5F6B7D;
}

body.career-workspace .overview-stat .sublabel { color: var(--cw-metadata); }
body.career-workspace .readiness-caption { color: var(--cw-metadata); }
body.career-workspace .trend-y-labels { color: var(--cw-metadata); }
body.career-workspace .trend-x-labels { color: var(--cw-metadata); }
body.career-workspace .competency-stat-label { color: var(--cw-metadata); }
body.career-workspace .minutes-progress-labels { color: var(--cw-metadata); }
body.career-workspace .minutes-renew-label { color: var(--cw-metadata); }
body.career-workspace .activity-main .meta { color: var(--cw-metadata); }