/* ============================================================
   Cheat Codes — minimal table-first UI
   ============================================================ */

:root {
  --app-header-h: 56px;
  --active-bg: #c8e6c9;
  --active-bg-hover: #b6dcb6;
}

html, body { background: #fff; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #212529;
  /* JS sets actual padding-top from header height */
  padding-top: var(--app-header-h);
}

/* ----- Header (truly fixed) ----- */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: #fff;
}
.app-title { font-weight: 600; letter-spacing: -0.01em; }

#btnFocus.btn-warning { color: #fff; }
#focusCounts:not(:empty) { margin-left: 4px; }

.dropdown-item .check { width: 14px; display: inline-block; color: transparent; }
.dropdown-item.checked .check { color: #198754; }

/* ----- Section headings ----- */
.section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6c757d;
  font-weight: 700;
  margin: 4px 0 8px;
  display: block;
}
.section-count {
  font-weight: 400;
  color: #adb5bd;
  margin-left: 6px;
}

/* ----- Problems section ----- */
.problems-section { margin-bottom: 18px; }
.problems-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.problems-list .problem-chip {
  padding: 5px 11px;
  font-size: 0.78rem;
}

/* ----- Solutions / Table ----- */
.cheat-table {
  font-size: 0.85rem;
  margin-bottom: 0;
  width: 100%;
}
.cheat-table thead th {
  position: sticky;
  top: var(--app-header-h);
  background: #f8f9fa;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
  border-bottom: 2px solid #dee2e6;
  padding: 8px;
  white-space: nowrap;
  z-index: 10;
}
.cheat-table th.sortable { cursor: pointer; user-select: none; }
.cheat-table th.sortable:hover { color: #212529; background: #eef0f2; }
.cheat-table .sort-ind { font-size: 0.7rem; opacity: 0.35; margin-left: 4px; }
.cheat-table .sort-ind.active { opacity: 1; color: #0d6efd; }

.cheat-table td { vertical-align: middle; padding: 6px 8px; border-color: #f1f3f5; }
.cheat-table tbody tr { cursor: pointer; }

/* Bootstrap 5 paints `background-color: var(--bs-table-bg)` on every <td>,
   which sits ON TOP of the <tr> background. So we drive row coloring by
   overriding --bs-table-bg on the row — the variable inherits down to all
   cells. Heatmap rating cells override with explicit `background:` so they
   keep their per-value colors. */
.cheat-table tbody tr:hover         { --bs-table-bg: #f8f9fa; }
.cheat-table tbody tr.active        { --bs-table-bg: var(--active-bg); }
.cheat-table tbody tr.active:hover  { --bs-table-bg: var(--active-bg-hover); }

/* ----- Name cell ----- */
.name-cell { min-width: 200px; max-width: 320px; }
.name-cell .name { font-weight: 500; color: #212529; }
.name-cell .notes { font-size: 0.72rem; color: #868e96; display: block; margin-top: 1px; }

/* ----- Status chips (only shown for non-proven) ----- */
.status-chip {
  display: inline-block;
  font-size: 0.62rem;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  font-weight: 600;
}
.status-chip.testing      { background: #cfe2ff; color: #084298; }
.status-chip.untested     { background: #f8f9fa; color: #6c757d; border: 1px solid #dee2e6; }
.status-chip.questionable { background: #fff3cd; color: #856404; }

/* ----- Problem chips (clickable for daily mark) ----- */
.problems-cell { min-width: 200px; max-width: 360px; }
.problem-chip {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 7px;
  background: #f1f3f5;
  color: #6c757d;
  border-radius: 10px;
  margin: 1px 3px 1px 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  user-select: none;
}
.problem-chip:hover { background: #e9ecef; color: #495057; }
.problem-chip.active {
  background: #1c4587;
  color: #fff;
  font-weight: 500;
}
.problem-chip.active:hover { background: #163666; }

/* ----- Heatmap rating cells ----- */
.r-col { width: 64px; }
.r-cell {
  width: 64px;
  padding: 0 !important;
  text-align: center;
  border-left: 1px solid #f1f3f5;
}
.rating-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  width: 100%;
  height: 100%;
  font: inherit;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 4px;
  text-align: center;
  color: inherit;
}
.rating-select:focus {
  outline: 2px solid rgba(13, 110, 253, 0.4);
  outline-offset: -2px;
}

/* Heatmap shading per dimension */
.r-reliability[data-val="0"] { background: #ffffff; }
.r-reliability[data-val="1"] { background: #e8f3ee; }
.r-reliability[data-val="2"] { background: #d1e7dd; }
.r-reliability[data-val="3"] { background: #a3cfbb; }
.r-reliability[data-val="4"] { background: #75b798; color: #fff; }
.r-reliability[data-val="5"] { background: #198754; color: #fff; }

.r-potency[data-val="0"] { background: #ffffff; }
.r-potency[data-val="1"] { background: #eaf2fc; }
.r-potency[data-val="2"] { background: #cfe2ff; }
.r-potency[data-val="3"] { background: #9ec5fe; }
.r-potency[data-val="4"] { background: #6ea8fe; color: #fff; }
.r-potency[data-val="5"] { background: #0d6efd; color: #fff; }

.r-frequency[data-val="0"] { background: #ffffff; }
.r-frequency[data-val="1"] { background: #efe9f6; }
.r-frequency[data-val="2"] { background: #ded2ed; }
.r-frequency[data-val="3"] { background: #b9a4d8; color: #fff; }
.r-frequency[data-val="4"] { background: #9275c1; color: #fff; }
.r-frequency[data-val="5"] { background: #6f42c1; color: #fff; }

.r-effort[data-val="0"] { background: #ffffff; }
.r-effort[data-val="1"] { background: #fff3e6; }
.r-effort[data-val="2"] { background: #ffe5cc; }
.r-effort[data-val="3"] { background: #fdc996; color: #fff; }
.r-effort[data-val="4"] { background: #fda561; color: #fff; }
.r-effort[data-val="5"] { background: #fd7e14; color: #fff; }

.r-cell[data-val="0"] .rating-select { color: #ced4da; }

/* ----- Edit button at end of row ----- */
.actions-col { width: 32px; padding: 0 !important; text-align: center; }
.edit-btn {
  background: transparent;
  border: none;
  color: #ced4da;
  cursor: pointer;
  padding: 6px 0;
  width: 100%;
  font-size: 0.95rem;
  line-height: 1;
}
.edit-btn:hover { color: #495057; }
.cheat-table tbody tr:hover .edit-btn { color: #adb5bd; }
.cheat-table tbody tr:hover .edit-btn:hover { color: #0d6efd; }

/* ----- Active filter strip ----- */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  background: #212529;
  color: #fff;
  padding: 3px 9px;
  border-radius: 10px;
  margin-right: 4px;
  margin-bottom: 4px;
  cursor: pointer;
}
.filter-chip:hover { background: #495057; }

/* ----- Filter modal pickers ----- */
.fmod-chip {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 10px;
  border: 1px solid #dee2e6;
  background: #fff;
  color: #495057;
  cursor: pointer;
  margin: 2px;
}
.fmod-chip:hover { background: #f1f3f5; }
.fmod-chip.active {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

/* ----- Edit modal: rating selects ----- */
.rating-modal-row label { font-size: 0.78rem; font-weight: 600; }
.rating-modal-row .help { font-size: 0.7rem; color: #868e96; }

/* ----- Responsive ----- */
@media (max-width: 768px) {
  .cheat-table { font-size: 0.78rem; }
  .r-col, .r-cell { width: 48px; }
  .name-cell .notes { display: none; }
  .cheat-table thead th { font-size: 0.6rem; padding: 6px 4px; }
}

/* ============================================================
   Dark mode — follows system preference
   Bootstrap 5.3 components are themed via data-bs-theme="dark"
   on <html> (set inline in index.html). The rules below cover
   our custom surfaces.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  html, body { background: #1a1d20; }
  body { color: #e9ecef; }

  .app-header { background: #1a1d20; }

  .section-title { color: #adb5bd; }
  .section-count { color: #6c757d; }

  .cheat-table thead th {
    background: #212529;
    color: #adb5bd;
    border-bottom-color: #343a40;
  }
  .cheat-table th.sortable:hover { color: #f8f9fa; background: #2b3035; }
  .cheat-table .sort-ind.active { color: #4d8eff; }

  .cheat-table td { border-color: #2b2f33; }
  .cheat-table tbody tr:hover         { --bs-table-bg: #25292d; }
  .cheat-table tbody tr.active        { --bs-table-bg: #1f4d2a; }
  .cheat-table tbody tr.active:hover  { --bs-table-bg: #28602f; }

  .name-cell .name  { color: #e9ecef; }
  .name-cell .notes { color: #868e96; }

  .status-chip.testing      { background: #1a3a5c; color: #9ec5fe; }
  .status-chip.untested     { background: #212529; color: #adb5bd; border-color: #343a40; }
  .status-chip.questionable { background: #3d3110; color: #ffe69c; }

  .problem-chip              { background: #2b2f33; color: #adb5bd; }
  .problem-chip:hover        { background: #343a40; color: #e9ecef; }
  .problem-chip.active       { background: #4f7dc5; color: #fff; }
  .problem-chip.active:hover { background: #6691da; }

  .r-cell { border-left-color: #2b2f33; }

  /* Empty heatmap cells: blend with the page so the row reads as a row */
  .r-reliability[data-val="0"],
  .r-potency[data-val="0"],
  .r-frequency[data-val="0"],
  .r-effort[data-val="0"] { background: transparent; }
  .r-cell[data-val="0"] .rating-select { color: #495057; }

  /* Re-shade the near-white low end of each heatmap so it stays visible */
  .r-reliability[data-val="1"] { background: #163828; }
  .r-reliability[data-val="2"] { background: #1d4f37; }

  .r-potency[data-val="1"]     { background: #14253d; }
  .r-potency[data-val="2"]     { background: #1c3559; }

  .r-frequency[data-val="1"]   { background: #261b35; }
  .r-frequency[data-val="2"]   { background: #36254a; }

  .r-effort[data-val="1"]      { background: #3a2510; }
  .r-effort[data-val="2"]      { background: #4e3017; }

  .edit-btn                                  { color: #495057; }
  .edit-btn:hover                            { color: #adb5bd; }
  .cheat-table tbody tr:hover .edit-btn      { color: #6c757d; }
  .cheat-table tbody tr:hover .edit-btn:hover { color: #4d8eff; }

  .filter-chip        { background: #f1f3f5; color: #212529; }
  .filter-chip:hover  { background: #ced4da; }

  .fmod-chip {
    background: #212529;
    color: #adb5bd;
    border-color: #343a40;
  }
  .fmod-chip:hover  { background: #2b2f33; }
  .fmod-chip.active { background: #0d6efd; border-color: #0d6efd; color: #fff; }

  .rating-modal-row .help { color: #868e96; }

  .dropdown-item.checked .check { color: #75b798; }
}