/* Shared data-table + collapsible-help styling.
 *
 * Extracted verbatim from main.css (the "Tạo audio" history table) so a
 * second page can reuse the exact look instead of re-inventing a table.
 * Loaded globally from base.html, before any page stylesheet, so a page
 * keeps its own overrides. TTS-specific bits (#history-table-wrap card
 * swap, the SRT badge, the .btn-link--spinning/--warn SRT states) stay in
 * main.css -- only what a second page genuinely needs moved here. */

/* Help button + collapsible help panel, mirroring the video page's
 * vid-help-btn / vid-help-panel pattern. Long explanations stay
 * collapsed until the user actually wants them — keeps the modal
 * compact so the action buttons stay visible without scroll. */
.param-help-btn {
  background: #e5e7eb;
  color: #4b5563;
  border: 0;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-left: 4px;
  flex: 0 0 auto;
}
.param-help-btn:hover { background: #d1d5db; color: #1f2937; }
.param-help-btn[aria-expanded="true"] { background: #2563eb; color: #fff; }
.param-help-panel {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 8px 12px;
  background: #eff6ff;
  border-left: 3px solid #2563eb;
  border-radius: 4px;
  font-size: 12px;
  color: #1e3a8a;
  line-height: 1.45;
}
.param-help-panel[hidden] { display: none; }

/* --- History section (below text input) ------------------------------ */

.history-section {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.history-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  min-height: 32px;
}

.history-section__heading {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #374151;
  margin: 0;
}

.history-section__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.history-section__hint {
  font-size: 12px;
  color: #9ca3af;
}

.history-search {
  width: 260px;
  max-width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fcfcfd;
}

.history-search:focus { outline: 2px solid #bfdbfe; border-color: #1e40af; }

.history-table-wrap {
  /* Plain visible overflow — anything else (auto / clip / hidden)
   * traps `position: sticky` on the table header. The cards layout
   * takes over below 768px so horizontal column overflow at narrow
   * desktop widths is the only edge case, and even there the table
   * columns size down before they spill. */
  overflow: visible;
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(49, 46, 129, 0.06);
}

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

.history-table thead th {
  background: rgba(240, 242, 255, 0.90);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(99, 102, 241, 0.12);
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  font-weight: 600;
  white-space: nowrap;
  /* Stick the header to the top of the page viewport once the user
   * scrolls past the table top — keeps column labels in view while
   * skimming long history. Anchored at --topbar-h (0 on desktop, the
   * mobile bar's height below 900px) so the labels sit flush under
   * whatever global chrome exists instead of sliding behind it. */
  position: sticky;
  top: var(--topbar-h, 0px);
  z-index: 35;
}

/* The HEADER too, not only the cell. `.history-table thead th` sets
   text-align:left and is more specific than a bare class, so a numeric column
   right-aligned its numbers while its heading stayed left -- the count ended
   up sitting under the NEXT column's heading, which reads as a misaligned
   table rather than as a right-aligned one. */
.history-table__num,
.history-table thead th.history-table__num { text-align: right; }
.history-table__actions-col { width: 1%; white-space: nowrap; }
.history-table__text-col { min-width: 280px; }
.history-table__select-col { width: 32px; text-align: center; }
.history-table__select-col input { cursor: pointer; }
.history-table__seq-col { width: 42px; text-align: right; }
.history-table__seq-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #9ca3af;
  white-space: nowrap;
}


/* One compact toolbar — rendered above AND below the grid.
   Left side: bulk-delete (hidden when 0 selected).
   Right side: pager (hidden when ≤ page size).
   Stays a single row; wraps on narrow viewports. */
.history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 28px;
  margin: 6px 0;
  font-size: 12px;
  color: #6b7280;
}
.history-toolbar[data-position="bottom"] { margin-top: 8px; margin-bottom: 0; }
.history-toolbar:empty,
.history-toolbar[data-active="false"] { display: none; }
.history-toolbar__delete { margin-right: auto; }
.history-toolbar__pager {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.history-pager__btn {
  padding: 3px 9px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  color: #4b5563;
  cursor: pointer;
  line-height: 1.5;
}
.history-pager__btn:hover:not(:disabled) {
  background: #f3f4f6;
  color: #1f2937;
}
.history-pager__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.history-pager__info { font-variant-numeric: tabular-nums; }

.history-table tbody tr[data-selected="true"] { background: #eff6ff !important; }

.history-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background 80ms ease;
}

.history-table tbody tr:hover { background: #f9fafb; }

/* A row that went wrong -- a failed job, a backup that cannot be restored.
   Available to every page that reuses this table rather than reinvented per
   page, which is how the class came to be set by JS and defined by no
   stylesheet at all: the rows were marked and looked exactly like the healthy
   ones.

   The left bar carries the meaning as well as the tint, because a background
   colour alone is not information a colour-blind operator can use. */
.history-table tbody tr.history-row--failed { background: #fef2f2; }
.history-table tbody tr.history-row--failed:hover { background: #fee2e2; }
.history-table tbody tr.history-row--failed td:first-child {
  box-shadow: inset 3px 0 0 #dc2626;
}
.history-table tbody tr:last-child { border-bottom: none; }

.history-table tbody td {
  padding: 10px 12px;
  vertical-align: middle;
  color: #1f2937;
}

.history-table__text {
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.history-table__voice {
  font-weight: 600;
  color: #1e3a8a;
  white-space: nowrap;
}

.history-table__time {
  color: #6b7280;
  white-space: nowrap;
}

.history-table__num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #6b7280;
  white-space: nowrap;
}

.history-table__actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.history-table__actions button,
.history-table__actions .btn-link {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  color: #4b5563;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
}

.history-table__actions button:hover,
.history-table__actions .btn-link:hover { background: #f3f4f6; color: #1f2937; }

.history-table__actions .btn-link[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.history-table__actions .duplicate {
  border-color: #bfdbfe;
  color: #1e3a8a;
  font-weight: 600;
}

.history-table__actions .duplicate:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

.history-table__actions .detail {
  color: #4b5563;
}
.history-table__actions .detail:hover {
  background: #f3f4f6;
  color: #1f2937;
}

.history-table__actions .delete:hover {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

.history-table__actions .retry {
  border-color: #fca5a5;
  color: #b91c1c;
  background: #fff1f1;
  font-weight: 600;
}

.history-table__actions .retry:hover {
  background: #fee2e2;
  color: #991b1b;
  border-color: #f87171;
}

/* 3-dot menu trigger inside the Thao tác cell. Borderless and square so
 * it visually reads as a menu chevron rather than another action. */
.history-table__more {
  width: 28px;
  padding: 4px 6px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #6b7280 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  justify-content: center;
}
.history-table__more:hover {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
  border-color: #e5e7eb !important;
}

.history-empty td {
  padding: 24px !important;
  text-align: center;
  color: #9ca3af;
}

.history-table__actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.history-table tr[data-status="processing"] { background: #fffbeb; }
.history-table tr[data-status="queued"] { background: #eff6ff; }
.history-table tr[data-status="error"] { background: #fef2f2; }

/* Batch-test run tints, same vocabulary as the TTS history's
 * processing/queued/error rows. Scoped to #at-runs-table: this sheet loads on
 * every page, and main.js sets data-status on the TTS history rows too, so an
 * unscoped "failed" rule would tint rows on Tạo audio that were never tinted. */
#at-runs-table tr[data-status="running"] { background: #fffbeb; }
#at-runs-table tr[data-status="completed"] { background: transparent; }
#at-runs-table tr[data-status="failed"] { background: #fef2f2; }

/* No sticky column labels on a phone.
 *
 * Sticky headers are an aid for a long table on a tall viewport. On a narrow
 * one they are the opposite: cells wrap to six or eight lines, so two rows
 * fill the screen and there is nothing to keep labels in view FOR -- and the
 * header actively breaks. `.history-section` carries `overflow: auto` so
 * columns can scroll sideways, which makes it a scroll container, and a
 * scroll container traps `position: sticky`: the header stops tracking the
 * page and parks in the middle of its own table, painted over row content.
 *
 * Measured at 390px on #mon-open-table and #mon-muted-table -- the
 * "CHECKS TARGET REASON" band rendered BELOW the first row's text. The same
 * overlap was already recorded against the capacity table (a comment in
 * admin-monitor.css) and worked around locally there; this is the shared
 * rule that caused it, so it is fixed here instead. `.history-table-wrap`
 * carries a comment on the same trap for the same reason.
 *
 * 900px, not 768px: that is where the shell turns the sidebar into a drawer
 * and starts exporting a non-zero --topbar-h, which is the offset the sticky
 * rule anchors to. */
@media (max-width: 900px) {
  .history-table thead th { position: static; top: auto; z-index: auto; }
}

@media (max-width: 768px) {
  .history-section { margin-top: 4px; padding-top: 12px; }
  .history-section__header { flex-direction: column; align-items: stretch; gap: 10px; }
  .history-search { width: 100%; }
}

@media (max-width: 640px) {
  .history-table__seq-col,
  .history-table__num,
  .history-table__select-col { display: none; }
  .history-table thead th,
  .history-table tbody td { padding: 6px; }
  .history-table__voice { font-size: 11px; }
  .history-table__time { font-size: 11px; }
}

@media (max-width: 480px) {
  .history-section__heading { font-size: 12px; }
  .history-table__actions-col { width: auto; }
  .history-table__actions { gap: 3px; }
  .history-table__actions button,
  .history-table__actions .btn-link { padding: 3px 6px; font-size: 10px; border-radius: 4px; }
  .history-toolbar { flex-direction: column; align-items: stretch; gap: 6px; }
  .history-toolbar__pager { margin-left: 0; justify-content: center; }
}