/*
 * _data_grid.css — One stylesheet for every analytics grid.
 *
 * Imported once in the base layout. Every grid uses these classes;
 * page-specific styling should NOT override these (use a wrapping
 * .lp-grid-section + your own selectors if you need section-level
 * variants).
 *
 * Class taxonomy (BEM-ish, lp- prefix to avoid collision):
 *
 *   .lp-grid-section   — outer container including title + grid
 *   .lp-grid-header    — title block above the table
 *   .lp-grid           — container <div> the JS module mounts into
 *   .lp-grid-table     — the rendered <table>
 *   .lp-grid-status    — slot for loading/empty/error messages
 *   .lp-grid-loading   — loading state row
 *   .lp-grid-spinner   — small inline spinner
 *   .lp-grid-empty     — empty-state row
 *   .lp-grid-error     — error-state row
 *   .lp-grid-gate      — capability-unavailable placeholder
 *   .lp-grid-sort-arrow — header sort indicator
 */

.lp-grid-section {
  margin: 16px 0;
}

.lp-grid-header {
  margin-bottom: 10px;
}

.lp-grid {
  background: #14141a;
  border: 1px solid var(--border, #2a2a30);
  border-radius: 8px;
  overflow: hidden;
}

.lp-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.lp-grid-table thead {
  background: #1a1a22;
  border-bottom: 1px solid var(--border, #2a2a30);
}

.lp-grid-table th {
  padding: 10px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--text-muted, #888);
  white-space: nowrap;
}

.lp-grid-table th[data-sort-key]:hover {
  color: var(--text-primary, #eee);
  background: #1f1f28;
}

.lp-grid-table th[aria-sort] {
  color: var(--text-primary, #eee);
}

.lp-grid-table tbody tr {
  border-bottom: 1px solid var(--border, #2a2a30);
}

.lp-grid-table tbody tr:last-child {
  border-bottom: none;
}

.lp-grid-table tbody tr:hover {
  background: #181820;
}

.lp-grid-table td {
  padding: 10px 14px;
  color: var(--text-primary, #eee);
  font-variant-numeric: tabular-nums;
}

.lp-grid-status {
  /* status messages slot; only renders content when non-empty */
}

.lp-grid-status:empty {
  display: none;
}

.lp-grid-loading,
.lp-grid-empty,
.lp-grid-error {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted, #888);
}

.lp-grid-error {
  color: #ff8080;
}

.lp-grid-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid #3a3a3a;
  border-top-color: #80b4ff;
  border-radius: 50%;
  animation: lp-grid-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

@keyframes lp-grid-spin {
  to { transform: rotate(360deg); }
}

.lp-grid-sort-arrow {
  font-size: 9px;
  color: var(--text-muted, #888);
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}

/* Multi-sort priority badges. The number after the arrow shows sort priority
   when more than one column is contributing to the order. Slightly emphasised
   so the user can see the order at a glance. */
.lp-grid-multisort .lp-grid-sort-arrow {
  font-weight: 600;
  color: var(--accent-blue, #80b4ff);
}

/* Keyboard-nav focus: the user-selected row (↑/↓ navigation). Distinct from
   the :hover state so mouse and keyboard can coexist. */
.lp-grid-kbnav .lp-grid-table:focus { outline: none; }
.lp-grid-kbnav .lp-grid-table { outline: none; }
.lp-grid-table tbody tr.lp-grid-row-focused {
  background: #1f2940;
  box-shadow: inset 3px 0 0 var(--accent-blue, #80b4ff);
}
.lp-grid-table tbody tr.lp-grid-row-focused:hover {
  background: #1f2940;
}

/* Capability-gated placeholder (separate from .lp-grid; rendered when the
   user shouldn't see a grid at all because the data isn't there yet). */
.lp-grid-gate {
  /* All visual styles live inline in the macro for now (single component). */
}