/* ============================================================
   Top 25 Prospect Worksheet — page styles
   Mastermind Marketing, Inc.

   This stylesheet layers on top of the shared site stylesheet
   (../css/styles.css). It styles only the worksheet itself:
   the scoring table, the rotated profile headers, the clickable
   score circles, the tier badge, and the Add Contact control.

   Scoring note: each prospect is scored 0-9 against the profile
   criteria. That score drives the tier badge today and will
   drive the automated marketing tier once the MySQL/PHP layer
   is added.
   ============================================================ */

/* ---------- Worksheet banner (mirrors .phase-banner) ---------- */
.ws-banner {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 6px solid var(--green);
  border-radius: var(--radius);
  padding: 22px 28px;
  margin: 24px 0 20px;
  box-shadow: var(--shadow);
}
.ws-banner h1 {
  margin: 0 0 4px;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.ws-banner .sub {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

/* ---------- Associate / Trainer meta fields ---------- */
.ws-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  margin-top: 16px;
}
.ws-meta .field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ws-meta label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.ws-meta input {
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  min-width: 220px;
  color: var(--ink);
}
.ws-meta input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(26, 157, 107, 0.14);
}

/* ---------- Toolbar above the table ---------- */
.ws-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 14px;
}
.ws-toolbar .count {
  font-size: 13.5px;
  color: var(--ink-soft);
}
.ws-toolbar .count b { color: var(--green-dark); }

/* Left-hand cluster: count, live indicator, show-inactive toggle. */
.ws-toolbar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* "Live" pill with a gently pulsing dot. */
.ws-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green-dark);
}
.ws-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(26, 157, 107, 0.5);
  animation: wsPulse 2s infinite;
}
@keyframes wsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(26, 157, 107, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(26, 157, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 157, 107, 0); }
}

.ws-show-inactive {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.ws-show-inactive input { accent-color: var(--green); width: 15px; height: 15px; }

/* Inactive rows: dimmed and struck through; hidden unless toggled on. */
tbody tr.ws-inactive { display: none; }
tbody.show-inactive tr.ws-inactive { display: table-row; }
tbody tr.ws-inactive { opacity: 0.55; background: #fbfbfb; }
tbody tr.ws-inactive .js-name { text-decoration: line-through; }

/* Brief green flash when a new contact arrives via auto-refresh. */
@keyframes wsFlash {
  0%   { background: #d8f3e6; }
  100% { background: transparent; }
}
tbody tr.ws-new { animation: wsFlash 2.2s ease-out 1; }

.btn-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: var(--green);
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn-add:hover { background: var(--green-dark); box-shadow: var(--shadow-hover); }
.btn-add:active { transform: translateY(1px); }
.btn-add .plus {
  width: 20px; height: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

/* ---------- Table shell ---------- */
.ws-table-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  overflow-x: auto;            /* horizontal scroll on small screens */
  margin-bottom: 18px;
}
table.worksheet {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 1040px;           /* keeps columns readable; card scrolls */
}
table.worksheet th,
table.worksheet td {
  border-bottom: 1px solid var(--line);
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

/* Header row */
table.worksheet thead th {
  background: #f5faf7;
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
  border-bottom: 2px solid #d7ece1;
  padding: 10px 6px;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.worksheet thead th.col-name { text-align: left; padding-left: 14px; }
table.worksheet thead th.col-comments { text-align: left; padding-left: 14px; }

/* Vertical (sideways) profile headers so all 9 criteria fit above the
   circles. Vertical writing-mode reserves real layout space, so the
   header row simply grows to fit the longest label and nothing is ever
   clipped by the card. The number sits centered below each label,
   lined up over its circle in the rows below. */
th.rot {
  width: 34px;
  padding: 12px 0 6px;
  vertical-align: bottom;
}
th.rot .rot-txt {
  writing-mode: vertical-rl;
  white-space: nowrap;
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1;
  margin-bottom: 7px;
}
th.rot .rot-num {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--green-dark);
}

/* Body cells */
tbody tr:nth-child(even) { background: #fafcfb; }
tbody tr:hover { background: #f5faf7; }

td.cell-pad { padding: 6px; }
td.col-num {
  font-weight: 700;
  color: var(--ink-soft);
  width: 36px;
  font-variant-numeric: tabular-nums;
}

/* Text inputs inside the grid */
.ws-input {
  font: inherit;
  font-size: 13px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
}
.ws-input:hover { border-color: var(--line); background: #fff; }
.ws-input:focus {
  outline: none;
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26, 157, 107, 0.12);
}
td.col-name { min-width: 180px; text-align: left; }
td.col-name .ws-input { text-align: left; }
td.col-comments { min-width: 200px; text-align: left; }
td.col-comments .ws-input { text-align: left; }
td.col-small { width: 64px; }
td.col-small .ws-input { text-align: center; }

/* ---------- Clickable score circles (the 1-9 profile marks) ---------- */
td.col-score { width: 34px; }
.score-dot {
  width: 26px; height: 26px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1.5px solid #cdd5da;
  background: #fff;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .1s ease;
}
.score-dot:hover { border-color: var(--green); color: var(--green-dark); }
.score-dot.on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(26, 157, 107, 0.16);
}
.score-dot:active { transform: scale(0.92); }

/* ---------- Score total + tier badge ---------- */
td.col-total { width: 54px; }
.score-total {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.score-total small { color: var(--ink-faint); font-weight: 600; font-size: 11px; }

td.col-tier { width: 92px; }
.tier-badge {
  display: inline-block;
  min-width: 66px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.tier-a { background: #e6f6ee; color: #0f5e3f; border-color: #bfe6d3; }   /* Hot */
.tier-b { background: #fff4e0; color: #9a6212; border-color: #f3dcae; }   /* Warm */
.tier-c { background: #eef1f4; color: #5a6573; border-color: #dde2e8; }   /* Develop */

/* ---------- Remove-row control ---------- */
td.col-remove { width: 34px; }
.btn-remove {
  width: 24px; height: 24px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-faint);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.btn-remove:hover { background: #fdecec; color: #c0392b; border-color: #f3c6c2; }

/* ---------- Profile legend ---------- */
.ws-legend {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  margin-bottom: 40px;
}
.ws-legend h4 {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ws-legend ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 22px;
}
.ws-legend li {
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ws-legend .ln {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ws-legend .tiers {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 12.5px;
  color: var(--ink-soft);
  align-items: center;
}

@media (max-width: 760px) {
  .ws-legend ol { grid-template-columns: repeat(2, 1fr); }
  .ws-meta input { min-width: 0; flex: 1; }
}

/* ---------- Imported rows (auto-loaded from QR form submissions) ----------
   A subtle green left accent distinguishes rows that came from the
   database from blank rows the associate types in manually. */
tbody tr.ws-imported {
  box-shadow: inset 4px 0 0 var(--green);
}
tbody tr.ws-imported .js-name {
  font-weight: 600;
}