/* ============================================================
   Record page layout (show)
   ============================================================ */

.record-page {
  min-height: 100vh;
  background-color: var(--color-bg-subtle);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.record-container {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.record-section {
  margin-top: var(--space-8);
}

@media (min-width: 640px) {
  .record-container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .record-container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* ============================================================
   Record card
   ============================================================ */

.record-card {
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
  overflow: hidden;
}

.record-card__header {
  background-color: var(--color-surface-container);
  padding: var(--space-4) var(--space-6);
}

.record-card__header--between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.record-card__title {
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  color: var(--color-on-surface);
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-headline);
}

.record-card__subtitle {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-on-surface);
  margin: 0;
  font-family: var(--font-display);
}

.record-card__subtitle-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: var(--space-2);
  flex-shrink: 0;
}

.icon-success { color: var(--color-success); }
.icon-purple  { color: #7c3aed; }

.record-card__body {
  padding: var(--space-6);
}

.record-card__body > * + * {
  margin-top: var(--space-4);
}

.record-card__footer {
  background-color: var(--color-surface-container);
  padding: var(--space-4) var(--space-6);
}

.record-card__footer--actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .record-card__footer--actions {
    flex-direction: row;
    gap: var(--space-3);
  }
}

/* ============================================================
   Record index wrapper
   ============================================================ */

.record-index {
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
  padding: var(--space-6);
}

.record-index__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
}

.record-index__title {
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--color-on-surface);
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-headline);
}

/* ============================================================
   Record action link (e.g. "Adicionar Usuário")
   ============================================================ */

.record-action-link {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-on-primary);
  background: var(--gradient-primary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: filter 200ms ease-out;
}

.record-action-link:hover {
  filter: brightness(0.92);
  color: var(--color-on-primary);
}

.record-action-link i {
  margin-right: var(--space-2);
}

/* ============================================================
   Simple table (used by layouts/components/_simple_table partial)
   ============================================================ */

.simple-table {
  min-width: 100%;
  border-collapse: collapse;
}

.simple-table__header {
  background-color: var(--color-surface-container);
}

.simple-table__header th {
  padding: var(--space-3) var(--space-6);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.simple-table__body {
  background-color: var(--color-surface-container-lowest);
}

/* Zebra toning — no divider lines between rows */
.simple-table__body tr:nth-child(even) {
  background-color: var(--color-surface-container-low);
}

.simple-table__item {
  padding: var(--space-6) var(--space-6);
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--color-on-surface-variant);
}

.simple-table__action-links {
  padding: var(--space-4) var(--space-6);
  white-space: nowrap;
}

.simple-table__action-links a + a {
  margin-left: var(--space-2);
}

.simple-table__details-link {
  display: inline-block;
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-on-primary);
  background: var(--gradient-primary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: filter 200ms ease-out;
}

.simple-table__details-link:hover {
  filter: brightness(0.92);
  color: var(--color-on-primary);
}

.simple-table__edit-link {
  display: inline-block;
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-on-surface-variant);
  background-color: transparent;
  border: 1px solid var(--color-border-ghost);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color 200ms ease-out;
}

.simple-table__edit-link:hover {
  background-color: var(--color-surface-container-low);
  color: var(--color-on-surface);
}

/* ============================================================
   Record table
   ============================================================ */

.record-table-wrapper {
  overflow-x: auto;
}

.record-table {
  min-width: 100%;
  border-collapse: collapse;
}

.record-table__head {
  background-color: var(--color-surface-container);
}

.record-table__th {
  padding: var(--space-3) var(--space-6);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.record-table__body {
  background-color: var(--color-surface-container-lowest);
}

/* Zebra toning — no divider lines between rows */
.record-table__body tr:nth-child(even) {
  background-color: var(--color-surface-container-low);
}

.record-table__td {
  padding: var(--space-6) var(--space-6);
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--color-on-surface-variant);
}

.record-table__td--action {
  padding: var(--space-4) var(--space-6);
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 500;
}

.record-table__cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============================================================
   Token / readonly input (e.g. confirmation URL)
   ============================================================ */

.record-token-input {
  font-size: var(--text-xs);
  background-color: var(--color-surface-container-low);
  border: none;
  border-bottom: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: var(--space-1) var(--space-2);
  width: 16rem;
  color: var(--color-on-surface-variant);
}

/* ============================================================
   Batch list (index)
   ============================================================ */

.record-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.record-list-item {
  background-color: var(--color-surface-container-low);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}

.record-list-item:hover {
  background-color: var(--color-surface-container);
  box-shadow: var(--shadow-ambient);
}

.record-list-item__layout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .record-list-item__layout {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
}

.record-list-item__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.record-list-item__actions {
  display: flex;
  gap: var(--space-2);
}

/* ============================================================
   Metadata label / value
   ============================================================ */

.record-meta-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

.record-meta-label--block {
  display: block;
  margin-bottom: var(--space-3);
}

.record-meta-value {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  margin-left: var(--space-2);
}

.record-detail-value {
  font-size: var(--text-sm);
  color: var(--color-text-strong);
  margin-top: var(--space-1);
}

/* ============================================================
   Record detail grid (2-column responsive layout in show pages)
   ============================================================ */

.record-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .record-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.record-detail-col > * + * {
  margin-top: var(--space-4);
}

/* ============================================================
   Secondary action link (e.g. "Ver detalhes")
   ============================================================ */

.record-secondary-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-on-surface-variant);
  background-color: transparent;
  border: 1px solid var(--color-border-ghost);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color 200ms ease;
}

.record-secondary-link:hover {
  background-color: var(--color-surface-container-low);
  color: var(--color-on-surface);
}

/* ============================================================
   Empty state
   ============================================================ */

.record-empty {
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.record-empty > i {
  display: block;
  font-size: var(--text-4xl);
  color: var(--color-border-medium);
  margin-bottom: var(--space-4);
}

.record-empty > p {
  color: var(--color-text-muted);
}

/* ============================================================
   Batch detail partial (used in show + index items)
   ============================================================ */

.record-batch-detail > * + * {
  margin-top: var(--space-4);
}

/* ============================================================
   File grid + file cards (batch detail)
   ============================================================ */

.record-file-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .record-file-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .record-file-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.record-file-card {
  position: relative;
  background-color: var(--color-surface-container-low);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  transition: box-shadow 200ms ease, background-color 200ms ease;
}

.record-file-card:hover {
  box-shadow: var(--shadow-ambient);
  background-color: var(--color-surface-container);
}

.record-file-card__icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
}

.record-file-card__icon i {
  font-size: var(--text-xl);
}

.icon-pdf {
  color: var(--color-error);
}

.record-file-card__info {
  flex-grow: 1;
  overflow: hidden;
}

.record-file-card__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-file-card__size {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.record-file-card__download {
  flex-shrink: 0;
  color: var(--color-border-strong);
  transition: color 200ms ease;
}

.record-file-card:hover .record-file-card__download {
  color: var(--color-text-secondary);
}

/* ============================================================
   Fispq record listing partial (_fispq.html.erb)
   ============================================================ */

.record-field-list {
  width: 100%;
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

.record-field-list > * + * {
  margin-top: var(--space-5);
}

.record-field-list__label {
  display: block;
  font-weight: 500;
  margin-bottom: var(--space-1);
}

@media (min-width: 640px) {
  .record-field-list {
    width: auto;
  }
}

/* ============================================================
   Edit page heading
   ============================================================ */

.record-edit-page {
  width: 100%;
}

.record-edit-page__title {
  font-weight: 700;
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
}

/* ============================================================
   Pagination (Kaminari)
   ============================================================ */

.pagination-container {
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.pagination-element {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-on-surface-variant);
  background-color: transparent;
  border: 1px solid var(--color-border-ghost);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}

.pagination-element:hover {
  background-color: var(--color-surface-container-low);
  color: var(--color-on-surface);
}

.page.current .pagination-element,
.page.current > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-on-primary);
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--radius-sm);
}

.page.gap.pagination-element {
  border-color: transparent;
  background-color: transparent;
  color: var(--color-on-surface-variant);
}

/* dashboard classes moved to components/dashboard.css */
/* process-card classes moved to components/regularization-process-card.css */