/*
 * Data tables (CECE-24): the reusable Grid.js table driven by the generic
 * `data-table` Stimulus controller, its Yes/No status pills, row links, and the
 * server-side pager. Namespaced under a single `data-table` BEM block so the
 * prefix always signals ownership. Loaded on the authenticated layouts (portal
 * and application) so any page can host a data table, on top of base.css
 * (tokens). Plain CSS (Propshaft, no build step).
 *
 * Library-emitted classes can't be renamed (Grid.js `gridjs-*`, Pagy `pagy*`),
 * so their override rules are scoped under our block instead of matched
 * globally, keeping even those within the data-table namespace.
 */

.data-table {
  margin-top: 8px;
}

/* Results + Grid.js table brand overrides (mermaid theme is the base). */
.data-table .gridjs-wrapper {
  border-radius: var(--radius);
  border: 1px solid #c2cfd8;
  box-shadow: 0 1px 3px rgba(50, 58, 65, 0.08);
}

table.data-table__table {
  font-family: inherit;
}

table.data-table__table th.gridjs-th {
  background-color: var(--color-field);
  border-color: var(--color-border);
  color: var(--color-muted);
  font-size: 13px;
}

table.data-table__table td.gridjs-td {
  border-color: var(--color-border);
  font-size: 15px;
}

.data-table__sort {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.data-table__sort:hover {
  color: var(--color-primary);
}

/* Row links: agent/agency/principal names. */
.data-table__link {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}

.data-table__link:hover {
  text-decoration: underline;
}

/* A leading cell icon (e.g. the agency principal marker next to a name).
   Rendered by the data-table link/text formatter when a row's iconField is set. */
.data-table__cell-icon {
  color: var(--color-primary);
}

/* A modal-trigger cell renders a <button> with .data-table__link; strip the
   native button chrome so it reads as an inline link. */
button.data-table__link {
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.data-table__checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Center only the body-cell checkboxes; the header "select all" checkbox lives
   in Grid.js's floated th-content wrapper, where margin auto misrenders. */
table.data-table__table td.gridjs-td:first-child .data-table__checkbox {
  display: block;
  margin: 0 auto;
}

/* Yes/No status pills. Uses the semantic success/error tokens, not the brand
   secondary palette (which the brand reserves for non-status moments). */
.data-table__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.data-table__pill--yes {
  background-color: rgba(31, 138, 91, 0.12);
  color: var(--color-success);
}

.data-table__pill--no {
  background-color: rgba(192, 57, 43, 0.12);
  color: var(--color-error);
}

/* Policy status badges (CECE-52). Same pill geometry as the Yes/No pills, with
   one color variant per status: info (submitted), success (effectuated),
   warning (past due), neutral (termed / unknown fallback). */
.data-table__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.data-table__badge--success {
  background-color: rgba(31, 138, 91, 0.12);
  color: var(--color-success);
}

.data-table__badge--info {
  background-color: rgba(9, 112, 197, 0.12);
  color: var(--color-primary);
}

.data-table__badge--warning {
  background-color: rgba(191, 122, 0, 0.14);
  color: #9a6200;
}

.data-table__badge--neutral {
  background-color: rgba(50, 58, 65, 0.1);
  color: var(--color-muted);
}

/* Chargeback / error status badge (CECE-62). */
.data-table__badge--danger {
  background-color: rgba(192, 57, 43, 0.12);
  color: var(--color-error);
}

/* Payment history Statement cell (CECE-62): the muted "PDF" stub / "Not available
   yet" placeholder sits next to the working CSV link. */
.data-table__muted {
  color: var(--color-muted);
}

.data-table__statement {
  white-space: nowrap;
}

/* Server-side pager: Pagy's info_tag (left) and series_nav (right). */
.data-table__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.data-table__pager .pagy.info {
  color: var(--color-muted);
  font-size: 14px;
}

/* Pagy default series-nav: a row of anchor "buttons". The current page is an
   <a aria-current="page">, gaps are <a role="separator">, disabled prev/next
   carry aria-disabled. */
.data-table__pager nav.pagy.series-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.data-table__pager nav.pagy.series-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.data-table__pager nav.pagy.series-nav a:hover {
  background-color: var(--color-field);
}

.data-table__pager nav.pagy.series-nav a[aria-current="page"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
  cursor: default;
}

/* Pagy tags the current page with BOTH aria-current and aria-disabled; exclude
   it here so its white-on-blue active style isn't overridden by the muted gray
   used for the inert prev/next/gap controls (which would fail contrast on blue). */
.data-table__pager nav.pagy.series-nav a[aria-disabled="true"]:not([aria-current="page"]) {
  color: var(--color-muted);
  border-color: var(--color-border);
  pointer-events: none;
}

.data-table__pager nav.pagy.series-nav a[role="separator"] {
  border: none;
  pointer-events: none;
}