/* ── Table View ── */
.table-container {
  flex: 1;
  overflow: auto;
  padding: 0;
}
.data-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}
.data-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}
.data-table th {
  position: relative;
  background: var(--bg-tertiary);
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.data-table th:hover { color: var(--accent); }
.data-table th .sort-arrow { font-size: 10px; margin-left: 4px; opacity: 0.4; }
.data-table th.sorted .sort-arrow { opacity: 1; color: var(--accent); }
.data-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-resize-handle {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 5px;
  cursor: col-resize;
  background: transparent;
  z-index: 1;
}
.col-resize-handle:hover,
.col-resize-handle.dragging {
  background: var(--accent);
  opacity: 0.4;
}
.data-table tr { cursor: pointer; transition: background 0.1s; }
.data-table tbody tr:hover { background: var(--accent-light) !important; }
.data-table tbody tr.selected { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Row colors */
.data-table tbody tr.row-red { background: var(--row-red); }
.data-table tbody tr.row-yellow { background: var(--row-yellow); }
.data-table tbody tr.row-green { background: var(--row-green); }
.data-table tbody tr.row-orange { background: var(--row-orange); }
.data-table tbody tr.row-blue { background: var(--row-blue); }
.data-table tbody tr.row-purple { background: rgba(103,58,183,0.08); }
.data-table tbody tr.row-teal { background: rgba(0,137,123,0.08); }
.data-table tbody tr.row-gray { background: var(--row-gray); }
.data-table tbody tr.row-muted { background: rgba(108,117,125,0.06); opacity: 0.7; }

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}
.status-completed { background: rgba(40,167,69,0.15); color: #1a8a3f; }
.status-in-qa { background: rgba(74,108,247,0.12); color: #4a6cf7; }
.status-back-to-qsa { background: rgba(255,152,0,0.15); color: #e68900; }
.status-not-yet { background: rgba(140,145,157,0.12); color: var(--text-secondary); }
[data-theme="dark"] .status-completed { color: #4cd964; }
[data-theme="dark"] .status-in-qa { color: #7da1ff; }
[data-theme="dark"] .status-back-to-qsa { color: #ffb74d; }
[data-theme="c128"] .status-completed { color: #66ff66; }
[data-theme="c128"] .status-in-qa { color: #33ff33; }
[data-theme="c128"] .status-back-to-qsa { color: #88ff44; }
[data-theme="ur6000"] .status-completed { color: #ffcc44; }
[data-theme="ur6000"] .status-in-qa { color: #ffb000; }
[data-theme="ur6000"] .status-back-to-qsa { color: #ffcc44; }
[data-theme="haven3019"] .status-completed { color: #7eb8d4; }
[data-theme="haven3019"] .status-in-qa { color: #a8d4e8; }
[data-theme="haven3019"] .status-back-to-qsa { color: #d4a060; }
[data-theme="high-contrast"] .status-completed { color: #00ff00; }
[data-theme="high-contrast"] .status-in-qa { color: #00ccff; }
[data-theme="high-contrast"] .status-back-to-qsa { color: #ffaa00; }
/* Active Review overlay — italic In QA variant on the table view, mirroring
   the .qa-status-reviewing rule in detail.css and .qa-badge-reviewing in
   qa-queue.css. Color tokens come from .status-in-qa above (composite class). */
.status-reviewing { font-style: italic; }

/* Data warning flags */
.data-flag {
  display: inline-block;
  font-size: 10px;
  margin-left: 4px;
  vertical-align: middle;
  cursor: help;
}
.flag-no-budget { color: #dc3545; }
.flag-no-compliance { color: #e68900; }
[data-theme="dark"] .flag-no-budget { color: #ff6b7a; }
[data-theme="dark"] .flag-no-compliance { color: #ffb74d; }
[data-theme="c128"] .flag-no-budget { color: #ff6b7a; }
[data-theme="c128"] .flag-no-compliance { color: #88ff44; }
[data-theme="ur6000"] .flag-no-budget { color: #ff6b7a; }
[data-theme="ur6000"] .flag-no-compliance { color: #ffcc44; }
[data-theme="haven3019"] .flag-no-budget { color: #ff6b7a; }
[data-theme="haven3019"] .flag-no-compliance { color: #d4a060; }
[data-theme="high-contrast"] .flag-no-budget { color: #ff4444; }
[data-theme="high-contrast"] .flag-no-compliance { color: #ffaa00; }
.flag-source-changed { color: #e68900; cursor: pointer; }
[data-theme="dark"] .flag-source-changed { color: #ffb74d; }
[data-theme="c128"] .flag-source-changed { color: #88ff44; }
[data-theme="ur6000"] .flag-source-changed { color: #ffcc44; }
[data-theme="haven3019"] .flag-source-changed { color: #d4a060; }
[data-theme="high-contrast"] .flag-source-changed { color: #ffaa00; }
.data-flags-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
  font-size: 11px;
  color: var(--text-secondary);
}
.data-flags-legend span { display: flex; align-items: center; gap: 3px; }
.healed-date-flag {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  cursor: help;
  margin-left: 2px;
}
.healed-date-label {
  font-weight: 400;
  text-transform: none;
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}
.manual-hours-flag {
  font-size: 11px;
  color: var(--text-muted);
  cursor: help;
  margin-left: 4px;
}

/* ── Source Badges ── */
.source-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  vertical-align: middle;
  margin-left: 6px;
}
.source-badge-qa { background: rgba(74,108,247,0.15); color: #4a6cf7; }
.source-badge-both { background: rgba(40,167,69,0.15); color: #1a8a3f; }
.source-badge-proj { background: rgba(255,152,0,0.15); color: #e68900; }
[data-theme="dark"] .source-badge-qa { color: #7da1ff; }
[data-theme="dark"] .source-badge-both { color: #4cd964; }
[data-theme="dark"] .source-badge-proj { color: #ffb74d; }
[data-theme="c128"] .source-badge-qa { color: #33ff33; }
[data-theme="c128"] .source-badge-both { color: #66ff66; }
[data-theme="c128"] .source-badge-proj { color: #88ff44; }
[data-theme="ur6000"] .source-badge-qa { color: #ffb000; }
[data-theme="ur6000"] .source-badge-both { color: #ffcc44; }
[data-theme="ur6000"] .source-badge-proj { color: #ffcc44; }
[data-theme="haven3019"] .source-badge-qa { color: #7eb8d4; }
[data-theme="haven3019"] .source-badge-both { color: #a8d4e8; }
[data-theme="haven3019"] .source-badge-proj { color: #d4a060; }
[data-theme="high-contrast"] .source-badge-qa { color: #00ccff; }
[data-theme="high-contrast"] .source-badge-both { color: #00ff00; }
[data-theme="high-contrast"] .source-badge-proj { color: #ffaa00; }

/* Projector-only row styling */
.data-table tbody tr.row-projector-only {
  font-style: italic;
  opacity: 0.85;
}

/* ── Group Header Rows ── */
.group-header-row td {
  background: var(--bg-secondary);
  padding: 6px 12px !important;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--accent);
  letter-spacing: 0.3px;
}
.group-header-count {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 11px;
}

/* ── Columns visibility dropdown (Phase 3 of column-visibility, v1.3.0) ──
 *
 * "Columns" button in the .filter-bar-right opens a checkbox-list dropdown
 * for toggling column visibility per the user's preference (persisted in
 * localStorage key freya_cols_foresight). Click-outside-to-close is wired
 * in table.js wireColumnsControl(). Anchored to the right edge of its
 * wrapper so it lands under the button without overflowing the page edge.
 *
 * Class set duplicated from qa-queue.css (Phase 1) because index.html
 * does not load qa-queue.css. Per the matrix-review architectural guidance:
 * don't harmonize across pages unless implementations naturally converge.
 * If a future cycle extracts a shared dropdown CSS module, this is one
 * of the surfaces it would consolidate.
 */

.columns-wrapper {
  position: relative;
  display: inline-block;
}

.columns-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.columns-btn:hover {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
}

.columns-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  padding: 6px 0;
  z-index: 250;
  display: none;
}
.columns-dropdown.open { display: block; }

.columns-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  cursor: pointer;
  user-select: none;
}
.columns-row:hover { background: var(--bg-tertiary); }

/* Disabled state for the last-visible column's checkbox. Greyed out and
 * non-interactive so the user cannot uncheck the only remaining column —
 * the affordance itself signals the constraint, no error toast needed. */
.columns-row.disabled { cursor: not-allowed; opacity: 0.5; }
.columns-row.disabled:hover { background: transparent; }
.columns-row.disabled input[type="checkbox"] { cursor: not-allowed; }

.columns-row input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
}

.columns-row span {
  font-size: 13px;
  color: var(--text-primary);
  flex: 1;
}

.columns-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

.columns-reset {
  display: block;
  width: 100%;
  padding: 6px 16px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
}
.columns-reset:hover { color: var(--accent); background: var(--bg-tertiary); }
