/*
 * Audit-trail UI styles.
 *
 * `.audit-container-link` keeps the breadcrumb crumbs visually neutral at
 * rest — same color and weight as the surrounding row — but reveals their
 * linkness on hover (Traqx-blue + underline + pointer cursor) so the
 * drill-down behavior is discoverable without cluttering the chain.
 */

.audit-container-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s ease-in-out;
}

.audit-container-link:hover,
.audit-container-link:focus {
  color: var(--traqx-blue-600, var(--tblr-primary));
  text-decoration: underline;
}

.audit-container-link:hover .text-secondary,
.audit-container-link:focus .text-secondary {
  color: var(--traqx-blue-500, var(--tblr-primary));
}

/* Family-counter cards on the audit-event index act as toggle filters.
 * The active state shows a primary-colored ring so it's obvious which
 * family is currently constraining the timeline below. */
.audit-family-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.12s ease-in-out, border-color 0.12s ease-in-out;
}

.audit-family-card:hover,
.audit-family-card:focus {
  box-shadow: 0 0 0 2px var(--traqx-blue-100, rgba(2, 108, 255, 0.15));
  text-decoration: none;
  color: inherit;
}

.audit-family-card--active {
  border-color: var(--traqx-blue-500, var(--tblr-primary));
  box-shadow: 0 0 0 2px var(--traqx-blue-200, rgba(2, 108, 255, 0.25));
}

/* Per-row filter buttons in the timeline. The funnel icon sits next
 * to each filterable value (family / event / subject / actor /
 * outcome). Default state is muted so it doesn't fight with the row
 * content; on hover it lights up Traqx-blue to invite the click. */
.audit-cell {
  vertical-align: top;
}

.audit-cell-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.audit-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  border-radius: 4px;
  color: var(--tblr-text-secondary, #6c7a91);
  opacity: 0.45;
  vertical-align: middle;
  transition: opacity 0.12s ease-in-out, color 0.12s ease-in-out, background-color 0.12s ease-in-out;
}

.audit-filter-pill:hover,
.audit-filter-pill:focus {
  opacity: 1;
  color: var(--traqx-blue-600, var(--tblr-primary));
  background-color: var(--traqx-blue-100, rgba(2, 108, 255, 0.10));
  text-decoration: none;
}

/* When the row is hovered, all filter pills in it become a bit more
 * visible — discoverability without being noisy by default. */
tbody tr:hover .audit-filter-pill {
  opacity: 0.7;
}

/* Markdown-rendered change_set cells. Constrains the rendered HTML
 * so headings / lists / code blocks stay inside the cell width and
 * don't dwarf the rest of the table. */
.audit-markdown-cell {
  font-size: 13px;
  line-height: 1.45;
}
.audit-markdown-cell p:last-child,
.audit-markdown-cell ul:last-child,
.audit-markdown-cell ol:last-child,
.audit-markdown-cell pre:last-child {
  margin-bottom: 0;
}
.audit-markdown-cell pre {
  padding: 6px 8px;
  font-size: 12px;
  background: var(--tblr-bg-surface-secondary, #f6f8fa);
  border-radius: 4px;
  overflow-x: auto;
}
.audit-markdown-cell--after {
  font-weight: 500;
}

/* Tabler's `.form-switch` adds `padding-left: 2.5em` to leave
 * room for the switch handle on the left. Our [Formatted | switch
 * | Raw] layout already places the input between two labels, so
 * that reserved space just shifts the whole control to the right.
 * Reset it and let flex handle the spacing. */
.audit-format-switch.form-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0;
  min-height: 0;
}
.audit-format-switch .form-check-input {
  margin-left: 0;
  margin-right: 0;
  flex-shrink: 0;
}

.audit-json-cell {
  padding: 6px 8px;
  font-size: 12px;
  background: var(--tblr-bg-surface-secondary, #f6f8fa);
  border-radius: 4px;
  overflow-x: auto;
  max-width: 100%;
}

.audit-raw-cell {
  padding: 6px 8px;
  font-size: 12px;
  background: var(--tblr-bg-surface-secondary, #f6f8fa);
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Force a dark text colour on rendered code blocks inside audit
 * cells. Tabler's default <code> styling assumes a dark background
 * which makes the text near-invisible on our light cell surface. */
.audit-json-cell,
.audit-json-cell code,
.audit-raw-cell,
.audit-raw-cell code,
.audit-markdown-cell pre,
.audit-markdown-cell pre code,
.audit-markdown-cell code {
  color: var(--tblr-body-color, #232e3c);
  background: transparent;
}
.audit-json-cell,
.audit-raw-cell,
.audit-markdown-cell pre {
  background: var(--tblr-bg-surface-secondary, #f6f8fa);
}

/* The default Tabler card-table separator is too subtle once a row
 * grows to a multi-line markdown / JSON cell — auditors lose track
 * of which cells belong together. Bump the divider on the change-set
 * table only. */
.audit-change-set tbody tr {
  border-bottom: 1.5px solid var(--tblr-border-color, #d1d5db);
}
.audit-change-set tbody tr:last-child {
  border-bottom: 0;
}
.audit-change-set tbody td {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Long JSON / markdown values must scroll inside their cell, not
 * blow the table width and force a horizontal scroll on the whole
 * card. `table-layout: fixed` clamps each column to its declared
 * width so `<pre>`'s `overflow-x: auto` actually kicks in. */
.audit-change-set {
  table-layout: fixed;
  width: 100%;
}
.audit-change-set thead th:first-child,
.audit-change-set tbody td:first-child {
  width: 22%;
  min-width: 180px;
}
.audit-change-set tbody td {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.audit-change-set tbody td .audit-json-cell,
.audit-change-set tbody td .audit-raw-cell,
.audit-change-set tbody td .audit-markdown-cell pre {
  max-width: 100%;
  white-space: pre;       /* keep code formatting */
  overflow-x: auto;       /* scroll inside the cell */
  overflow-y: hidden;
}
.audit-change-set tbody td .audit-raw-cell {
  /* Raw view of plain text wraps; only the JSON branch needs
     horizontal scroll. */
  white-space: pre-wrap;
  overflow-x: auto;
}