/* GENERATED FILE — DO NOT EDIT DIRECTLY.
 * Canonical source: frontend/src/styles/css/04-semantic-classes/row-details.css
 * Edit the canonical React stylesheet source, then regenerate mirrors with:
 *   node scripts/sync-public-stylesheets.cjs
 */
/**
 * Row Details Section - BEM classes for expanded table rows
 * Used by DataTableRowDetails and cardsView components
 */

/* Section Container */
.row-details-section {
  padding: var(--space-1-5px) var(--space-9px);
  background: var(--white-glass-visible-15);
  border-top: var(--input-border-width-thin) solid var(--soft-slate);
}

/* Section Header */
.row-details-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-9px);
  margin-bottom: var(--space-1-5px);
}

.row-details-section__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1px);
}

.row-details-section__title {
  font-size: var(--font-size-12);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.row-details-section__description {
  font-size: var(--font-size-12);
  color: var(--text-muted);
  margin: 0;
}

/* Section Content */
.row-details-section__content {
  display: block;
}

/* Form-style row details layout using Field primitive */
.row-details-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-9px) var(--space-12px);
  margin-top: var(--space-9px);
}

.row-details-form__field {
  min-width: 0;
}

.row-details-form--empty {
  margin-top: var(--space-9px);
}

.row-details-form__empty {
  font-size: var(--font-size-12);
  color: var(--text-muted);
  padding: var(--space-9px);
  text-align: center;
}

/* Individual Field */

.row-details-field__label {
  font-size: var(--font-size-12);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.row-details-field__value {
  font-size: var(--font-size-12);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  min-width: 0;
}

@media (max-width: 767px) {
  .row-details-section {
    padding: var(--space-9px);
  }

  .row-details-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3px);
  }

  .row-details-form {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6px);
  }
}