/* sp_historical_table_html — the Historical Picklists table.
 *
 * Kept here because the Anvil server strips a <style> block out of an HTML
 * template.
 *
 * SCOPE. The form has exactly one top-level node, so .sp-history-section IS
 * the form root and its own rule stays bare, above the scoped ones. This form
 * is a dashboard section inside the stock-pick-list shell, not a screen in the
 * nav port, so the root rule gains no position/flex and loses nothing: the
 * shell's .px-section-reveal mount div owns the margin, opacity and fade-in.
 * Every other rule is scoped :where(.sp-history-section), which adds zero
 * specificity and so cannot change which rule wins.
 *
 * WHAT IS NOT SCOPED, AND WHY.
 *  - The #sp-history-search rules and #sp-history-container stay bare and
 *    id-led: an id already outranks every .px-* class from any position.
 *  - Every .sp-history-table rule stays private-class-led and unscoped.
 *    Their counterparts .px-table td and
 *    .px-table tbody tr live in theme/assets/theme.css, which Anvil emits with
 *    no line in native_deps.head_html, so its position relative to this sheet
 *    is unaudited. .sp-history-table leading keeps each of them one class
 *    heavier than the .px-table equivalent, and the whole family is written
 *    the same way rather than splitting it rule by rule.
 *
 * NO DESIGNER GATE. The one opacity: 0 in this sheet is on .sp-history-row, a
 * node the module creates at render time, so the designer canvas has nothing
 * to hide. pxRowReveal is declared once in theme/assets/theme.css and is
 * shared estate-wide, so the guide's per-screen keyframe prefixing does not
 * apply and the ident is not renamed.
 */

/* ========================================
   HISTORICAL TABLE - Section Layout
   Uses shared px-table classes
   ======================================== */
.sp-history-section {
  width: 100%;
}

:where(.sp-history-section) .sp-history-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* line-height: 0 is the one added declaration: the designer cannot set a class
   on an <svg> (it assigns element.className, read-only on SVGElement), so the
   icon is wrapped in a <span> carrying the class and the span's box is made
   equal to the svg's. */
:where(.sp-history-section) .sp-history-filter-icon {
  width: 16px;
  height: 16px;
  color: var(--px-text-muted);
  flex-shrink: 0;
  line-height: 0;
}

#sp-history-search {
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  padding: 8px 12px;
  font-family: var(--px-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--px-text-primary);
  background: var(--px-bg-elevated);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#sp-history-search::placeholder {
  color: var(--px-text-muted);
  font-weight: 400;
}

#sp-history-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

:where(.sp-history-section) .sp-history-result-count {
  font-family: var(--px-mono);
  font-size: 11px;
  color: var(--px-text-muted);
  white-space: nowrap;
}

:where(.sp-history-section) .sp-history-title {
  font-family: var(--px-font);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--px-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 20px 0;
  padding: 0;
}

:where(.sp-history-section) .sp-history-title::before {
  content: '';
  width: 4px;
  height: 24px;
  background: var(--accent);
  border-radius: 2px;
}

:where(.sp-history-section) .sp-history-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#sp-history-container {
  border-radius: var(--px-radius);
  overflow: hidden;
  box-shadow: var(--px-shadow-md);
}

/* ========================================
   TABLE STRIPED ROWS (form-specific)
   ======================================== */
.sp-history-table tbody tr:nth-child(even) {
  background: var(--px-bg-elevated);
}

.sp-history-table tbody tr:hover {
  transform: translateY(-1px);
  box-shadow: var(--px-shadow);
  z-index: 1;
  position: relative;
}

:where(.sp-history-section) .sp-history-num {
  text-align: center;
  font-family: var(--px-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--px-text-secondary);
}

/* ========================================
   STAGGERED ROW REVEAL ANIMATION
   ======================================== */
:where(.sp-history-section) .sp-history-row {
  opacity: 0;
  animation: pxRowReveal 0.3s ease forwards;
}

/* ========================================
   DOWNLOAD AGAIN BUTTON (tonal style)
   ======================================== */
:where(.sp-history-section) .sp-history-redownload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-family: var(--px-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--sp-accent-surface, #ecebff);
  border: none;
  border-radius: var(--px-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

:where(.sp-history-section) .sp-history-redownload-btn:hover {
  background: var(--accent);
  color: #ffffff;
  transform: translateY(-1px);
}

:where(.sp-history-section) .sp-history-redownload-btn:active {
  transform: translateY(0);
}

:where(.sp-history-section) .sp-history-redownload-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ========================================
   EMPTY STATE - uses px-empty-state
   ======================================== */
:where(.sp-history-section) .sp-history-empty {
  text-align: center;
  padding: 48px 24px;
  font-family: var(--px-font);
  font-size: 15px;
  font-style: italic;
  color: var(--px-text-muted);
  background: var(--px-bg-card);
  border-radius: var(--px-radius);
}

/* ========================================
   RESPONSIVE - CARD LAYOUT ON MOBILE
   ======================================== */
@media (max-width: 768px) {
  :where(.sp-history-section) .sp-history-title {
    font-size: 1.1rem;
  }

  .sp-history-table thead {
    display: none;
  }

  .sp-history-table,
  .sp-history-table tbody {
    display: block;
  }

  .sp-history-table tbody tr {
    display: block;
    background: var(--px-bg-card);
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: var(--px-shadow);
  }

  .sp-history-table tbody tr:nth-child(even) {
    background: var(--px-bg-card);
  }

  .sp-history-table tbody tr:hover {
    transform: none;
    box-shadow: var(--px-shadow-md);
  }

  .sp-history-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 13px;
    border-bottom: none;
  }

  .sp-history-table td::before {
    content: attr(data-label);
    font-family: var(--px-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--px-text-muted);
    flex-shrink: 0;
    margin-right: 12px;
  }

  .sp-history-table td:last-child {
    justify-content: flex-end;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--px-border-subtle);
  }

  .sp-history-table td:last-child::before {
    display: none;
  }

  :where(.sp-history-section) .sp-history-num {
    text-align: right;
  }

  :where(.sp-history-section) .sp-history-redownload-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  #sp-history-container {
    box-shadow: none;
    border-radius: 0;
  }
}