/* ==========================================================================
   Engineer Scorecard — app layout.
   Built on brand.css tokens. Anything visual here should use a --color-wh-*
   token rather than a literal, so a brand change propagates.
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.5rem 4rem;
}

/* ---- shell ---------------------------------------------------------------- */
.sheet {
  max-width: 1450px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   APP-LEVEL BRAND DEVIATION — decorative accent is SKY BLUE, not solar.
   brand.css stays a faithful mirror of the shared Tailwind file (where the
   primary accent is solar #fcc000); this tool overrides it to sky #84bcdb.
   Solar/yellow is reserved here for RAG *status* only, so decoration never
   competes with an amber score. Statuses below are deliberately untouched.
   --------------------------------------------------------------------------- */
.wh-btn-primary {
  background: var(--color-wh-sky);
  color: var(--color-wh-ink);
}

/* Accent bar — sky→blue gradient */
.ticket-strip {
  height: 4px;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--color-wh-sky), var(--color-wh-blue));
  margin: 1.5rem 0 1.25rem;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* brand + product lockup: Woodhouse mark, rule, then the tool name */
.brand-lockup { display: flex; align-items: center; gap: 1.15rem; }
.brand-logo {
  display: block;
  color: var(--color-wh-blue);
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo svg { display: block; width: 148px; height: auto; }
.lockup-rule {
  width: 1px;
  align-self: stretch;
  min-height: 2.6rem;
  background: var(--slate-200);
  flex-shrink: 0;
}
.title-block .eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin-top: 0.15rem;
}
.app-header h1 {
  font-size: 1.5rem;
  line-height: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-wh-ink);
  margin: 0;
}

/* ---- nav ------------------------------------------------------------------ */
.app-nav { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.app-nav a {
  border-radius: var(--radius-lg);
  padding: 0.5rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate-500);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.app-nav a:hover { background: var(--slate-100); color: var(--color-wh-ink); }
.app-nav a.active {
  background: var(--color-wh-navy);
  color: #fff;
  font-weight: 600;
}

/* ---- view scaffolding ----------------------------------------------------- */
.view-loading, .view-error {
  border-radius: var(--radius-xl);
  border: 1px solid var(--slate-200);
  background: #fff;
  padding: 2rem 1.5rem;
  font-size: 0.875rem;
  color: var(--slate-500);
  box-shadow: var(--shadow-sm);
}
.view-error { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }

/* every section is a card */
.view-section {
  border-radius: var(--radius-xl);
  border: 1px solid var(--slate-200);
  background: #fff;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
}
.view-section.tinted { background: var(--color-wh-ice); border-color: #dbe7fb; }
.view-section.cool   { background: var(--color-wh-surface); }

.section-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.crumb { font-size: 0.8125rem; font-weight: 500; color: var(--slate-500); }
.crumb a { color: var(--color-wh-blue); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

.profile-name {
  font-size: 1.6rem; line-height: 2rem; font-weight: 700;
  letter-spacing: -0.025em; color: var(--color-wh-ink); margin: 0.25rem 0 0;
}

.footer-title {
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--color-wh-ink); margin-bottom: 0.25rem;
}
.esc-subheading {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--slate-400); margin: 1.5rem 0 0.6rem;
}
.settings-note, .pulled-note {
  font-size: 0.8125rem; line-height: 1.6; color: var(--slate-500);
  max-width: 68ch; margin: 0 0 0.9rem;
}
.settings-note strong, .pulled-note strong { color: var(--color-wh-ink); font-weight: 600; }
.pulled-note a { color: var(--color-wh-blue); }

/* ---- pills (RAG statuses keep the brand's soft amber/green/red tints) ---- */
.pill {
  display: inline-flex; align-items: center; border-radius: 9999px;
  padding: 0.125rem 0.625rem; font-size: 0.75rem; line-height: 1rem;
  font-weight: 500; white-space: nowrap;
}
.pill-green    { background: #dcfce7; color: #15803d; }
.pill-amber    { background: #fef3c7; color: #b45309; }
.pill-red      { background: #fee2e2; color: #b91c1c; }
.pill-draft    { background: var(--slate-200); color: var(--slate-500); }
.pill-complete { background: var(--color-wh-ice); color: var(--color-wh-blue); }
.pill-override { background: #fee2e2; color: #b91c1c; }

/* ---- tables --------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table td:first-child, .data-table th:first-child { white-space: nowrap; }
/* wide tables (the 9-column leaderboard) stay legible and scroll rather than cram */
.table-scroll .data-table { min-width: 44rem; }
.data-table th {
  text-align: left; padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--slate-200);
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--slate-400);
}
.data-table td {
  padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--slate-100);
  color: var(--color-wh-ink);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover td { background: var(--color-wh-ice); }
.empty-cell { color: var(--slate-400); }

/* ---- stat tiles ----------------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.25rem;
}
.stat-card {
  border-radius: var(--radius-xl); border: 1px solid var(--slate-200);
  background: #fff; padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.stat-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--slate-400);
}
.stat-value {
  font-size: 1.5rem; line-height: 2rem; font-weight: 600;
  letter-spacing: -0.025em; color: var(--color-wh-ink); margin-top: 0.25rem;
}
.stat-value.green { color: #15803d; }
.stat-value.amber { color: #b45309; }
.stat-value.red   { color: #b91c1c; }

/* ---- dark dashboard panel (brand navy) ------------------------------------ */
.director-dashboard {
  border-radius: var(--radius-xl);
  background: var(--color-wh-navy);
  color: #fff;
  padding: 1.75rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 1.25rem;
}
.dd-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.5rem;
}
.dd-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-wh-sky);
}
.dd-title {
  font-size: 1.6rem; font-weight: 700; letter-spacing: -0.025em;
  color: #fff; margin: 0.25rem 0 0;
}
.dd-subheading {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-wh-sky); margin: 1.75rem 0 0.75rem;
}
.dd-refresh-btn {
  border-radius: var(--radius-lg); border: 1px solid rgb(255 255 255 / 0.25);
  background: rgb(255 255 255 / 0.08); color: #fff;
  padding: 0.5rem 1rem; font-family: var(--font-sans);
  font-size: 0.8125rem; font-weight: 500; cursor: pointer;
  transition: background-color .15s ease;
}
.dd-refresh-btn:hover { background: rgb(255 255 255 / 0.16); }

.director-dashboard .stat-card {
  background: rgb(255 255 255 / 0.07);
  border-color: rgb(255 255 255 / 0.14);
  box-shadow: none;
}
.director-dashboard .stat-label { color: var(--color-wh-sky); }
.director-dashboard .stat-value { color: #fff; }
.director-dashboard .stat-value.green { color: #4ade80; }
.director-dashboard .stat-value.amber { color: var(--color-wh-solar); }
.director-dashboard .stat-value.red   { color: #fca5a5; }
.director-dashboard .data-table td { color: #fff; border-bottom-color: rgb(255 255 255 / 0.1); }
.director-dashboard .data-table th { color: var(--color-wh-sky); border-bottom-color: rgb(255 255 255 / 0.2); }
.director-dashboard .data-table tr.clickable:hover td { background: rgb(255 255 255 / 0.06); }
.director-dashboard .empty-cell { color: var(--color-wh-sky); }

/* ---- log filters + row actions --------------------------------------------- */
.log-filters {
  display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: flex-end;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--slate-200);
}
.log-count { font-size: 0.75rem; color: var(--slate-400); margin-top: 0.6rem; }
.row-actions { display: flex; gap: 0.35rem; justify-content: flex-end; white-space: nowrap; }
.edit-banner {
  border-radius: var(--radius-lg); border-left: 3px solid var(--color-wh-blue);
  background: var(--color-wh-ice); color: var(--color-wh-navy);
  padding: 0.7rem 0.9rem; font-size: 0.8125rem; margin-bottom: 1rem;
}

/* ---- save status ---------------------------------------------------------- */
.save-status { display: inline-flex; align-items: center; gap: 0.4rem; }
.save-status-err { color: #b91c1c; font-weight: 500; }
.save-dot { width: 7px; height: 7px; border-radius: 9999px; display: inline-block; flex-shrink: 0; }
.save-dot-ok { background: var(--color-wh-green); }
.save-dot-pending { background: var(--color-wh-sky); }
.save-dot-err { background: #b91c1c; }

/* ---- reviews-due chips ---------------------------------------------------- */
.due-group-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--color-wh-sky); opacity: .85; margin: 0 0 0.45rem;
}
.due-group-label:empty { margin: 0; }
.due-list { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.due-list:last-child { margin-bottom: 0; }
/* A half-finished review reads as active work, not an untouched task.
   Two classes so this wins over the .due-chip base rule regardless of order. */
.due-chip.due-chip-progress {
  background: var(--color-wh-sky);
  color: var(--color-wh-ink);
  font-weight: 600;
}
.due-chip.due-chip-progress:hover { background: #fff; }
.due-chip {
  border-radius: 9999px; border: 1px solid var(--color-wh-sky);
  background: rgb(132 188 219 / 0.14); color: var(--color-wh-sky);
  padding: 0.35rem 0.85rem; font-family: var(--font-sans);
  font-size: 0.8125rem; font-weight: 500; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.due-chip:hover { background: var(--color-wh-sky); color: var(--color-wh-ink); }
.due-none { font-size: 0.875rem; font-weight: 500; color: #4ade80; }

/* ---- wizard --------------------------------------------------------------- */
.wizard-steps { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.wizard-step {
  flex: 1; min-width: 9rem;
  border-radius: var(--radius-lg); border: 1px solid var(--slate-200);
  background: #fff; padding: 0.7rem 0.9rem;
  font-size: 0.8125rem; font-weight: 500; color: var(--slate-500);
  text-align: center;
}
.wizard-step.active {
  background: var(--color-wh-navy); border-color: var(--color-wh-navy);
  color: #fff; font-weight: 600;
}
.wizard-step.done { background: #dcfce7; border-color: #bbf7d0; color: #15803d; }
.wizard-body { min-height: 11rem; }
.wizard-nav {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--slate-200);
}
.wizard-nav .spacer { flex: 1; }

.score-preview {
  display: flex; gap: 2rem; flex-wrap: wrap; align-items: center;
  border-radius: var(--radius-xl); border: 1px solid var(--slate-200);
  background: var(--color-wh-ice); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
}
.score-preview .big {
  font-size: 2.25rem; line-height: 1; font-weight: 700;
  letter-spacing: -0.025em; color: var(--color-wh-ink);
}
.readonly-note {
  border-radius: var(--radius-lg); border-left: 3px solid var(--color-wh-blue);
  background: var(--color-wh-ice); color: var(--color-wh-navy);
  padding: 0.75rem 1rem; font-size: 0.8125rem; line-height: 1.55;
  margin-bottom: 1.25rem;
}
.readonly-note.frozen-note { border-left-color: var(--color-wh-sky); background: #f2f8fc; color: var(--color-wh-navy); }

/* ---- forms ---------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 0.25rem; }
.field label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--slate-400);
}
.field input, .field select {
  border-radius: var(--radius-lg); border: 1px solid var(--slate-300);
  background: #fff; padding: 0.5rem 0.75rem;
  font-family: var(--font-sans); font-size: 0.875rem; color: var(--color-wh-ink);
  outline: none; min-width: 11rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus {
  border-color: var(--color-wh-blue);
  box-shadow: 0 0 0 2px rgb(20 87 152 / 0.2);
}
.field-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.field-grid .field input, .field-grid .field select { width: 11rem; min-width: 11rem; }

.esc-add-row {
  display: flex; gap: 1rem; flex-wrap: wrap;
  align-items: flex-end; margin-bottom: 1rem;
}
.settings-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.settings-group-label {
  font-size: 0.875rem; font-weight: 600;
  color: var(--color-wh-ink); margin-bottom: 0.6rem;
}
.inline-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; }

/* ---- buttons (default = navy secondary; sky = primary CTA, see override) --- */
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: var(--radius-lg); border: none;
  background: var(--color-wh-navy); color: #fff;
  padding: 0.5rem 1rem;
  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500;
  cursor: pointer; transition: background-color .15s ease;
}
button:hover { background: var(--color-wh-ink); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondary { background: transparent; color: var(--slate-500); }
button.secondary:hover { background: var(--slate-100); color: var(--color-wh-ink); }
button.small-btn { padding: 0.3rem 0.65rem; font-size: 0.75rem; }
button.danger { background: #b91c1c; }
button.danger:hover { background: #991b1b; }

.status-msg { font-size: 0.8125rem; color: var(--slate-500); }

/* ---- RAG toggle ----------------------------------------------------------- */
.row {
  display: grid; grid-template-columns: 1.7fr 1.6fr 4rem;
  gap: 1rem; align-items: center; padding: 0.6rem 0;
}
.row label { font-size: 0.875rem; font-weight: 500; }
.rag-toggle { display: flex; gap: 0.4rem; }
.rag-btn {
  flex: 1; border-radius: var(--radius-lg); border: 1px solid var(--slate-300);
  background: #fff; color: var(--slate-500);
  padding: 0.5rem 0; font-size: 0.8125rem; font-weight: 500;
  cursor: pointer; text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.rag-btn:hover { border-color: var(--color-wh-blue); }
.rag-btn.r.active { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; font-weight: 600; }
.rag-btn.a.active { background: #fef3c7; color: #b45309; border-color: #fcd34d; font-weight: 600; }
.rag-btn.g.active { background: #dcfce7; color: #15803d; border-color: #86efac; font-weight: 600; }

/* ---- bonus ---------------------------------------------------------------- */
.bonus-totals {
  display: flex; gap: 2rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--slate-200);
}
.bonus-readout-item { display: flex; flex-direction: column; gap: 0.15rem; }
.bonus-readout-item span:not(.bonus-readout-label) {
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em;
  color: var(--color-wh-ink);
}
.bonus-readout-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--slate-400);
}

/* ---- trend legend --------------------------------------------------------- */
.trend-legend { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 0.6rem; }
.trend-legend-item {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.8125rem; color: var(--slate-500);
}
.trend-legend-swatch { width: 0.75rem; height: 0.75rem; border-radius: 3px; display: inline-block; }

/* ---- auth bar ------------------------------------------------------------- */
#authBar {
  display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem;
  max-width: 1450px; margin: 0 auto; padding: 0.75rem 0 0;
  font-size: 0.8125rem; color: var(--slate-500);
}

@media (max-width: 640px) {
  body { padding: 0 0.75rem 3rem; }
  .view-section, .director-dashboard { padding: 1.15rem; }
  .view-section { margin-bottom: 0.9rem; }

  /* header: smaller mark, no rule, drop the descriptor — the logo + title say it */
  .brand-lockup { gap: 0.8rem; }
  .brand-logo svg { width: 112px; }
  .lockup-rule { display: none; }
  .app-header { gap: 0.9rem; margin-bottom: 1.1rem; }
  .app-header h1 { font-size: 1.15rem; line-height: 1.45rem; }
  .title-block .eyebrow { display: none; }
  .ticket-strip { margin: 1rem 0 0.9rem; }

  /* stat tiles two-up rather than one huge column */
  .stat-row { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.6rem; }
  .stat-card { padding: 0.8rem 0.9rem; }
  .stat-value { font-size: 1.25rem; line-height: 1.6rem; }
  .dd-title { font-size: 1.35rem; }
  .profile-name { font-size: 1.35rem; }

  /* forms and wizard stack cleanly */
  .row { grid-template-columns: 1fr; gap: 0.5rem; }
  .field input, .field select { min-width: 0; width: 100%; }
  .field { flex: 1 1 100%; }
  .field-grid .field { flex: 1 1 8rem; }
  .field-grid .field input, .field-grid .field select { width: 100%; min-width: 0; }
  .esc-add-row { gap: 0.75rem; }
  .wizard-step { min-width: 0; flex: 1 1 calc(50% - 0.25rem); font-size: 0.75rem; padding: 0.6rem 0.5rem; }
  .wizard-nav { gap: 0.5rem; }
  .wizard-nav button { flex: 1 1 auto; }
  .score-preview { gap: 1.15rem; padding: 1rem 1.15rem; }
  .score-preview .big { font-size: 1.75rem; }
  .section-head { margin-bottom: 1rem; }
  .inline-actions { width: 100%; }

  /* tables scroll inside their own container — hint that they do */
  .table-scroll { margin-right: -0.35rem; padding-right: 0.35rem; }
}