/* Styles for [invictus_fact_table] */
.ivt-fact {
  --ivt-fact-border: #e5e7eb;
  --ivt-fact-text: #111827;
  --ivt-fact-muted: #4b5563;
  --ivt-fact-label-col: 25%; /* overridable via inline style */
}

/* Table layout (div-based table) */
.ivt-fact--table .ivt-fact__table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.ivt-fact--table .ivt-fact__row {
  display: table-row;
  border-bottom: 1px solid var(--ivt-fact-border);
}

.ivt-fact--table .ivt-fact__row:last-child {
  border-bottom: 0;
}

.ivt-fact--table .ivt-fact__cell {
  display: table-cell;
  padding: 8px 12px;
  vertical-align: top;
}

.ivt-fact--table .ivt-fact__row:first-child .ivt-fact__cell {
  padding-top: 0;
}

.ivt-fact--table .ivt-fact__cell--label {
  color: var(--ivt-fact-muted);
  font-weight: 600;
}

.ivt-fact--table .ivt-fact__cell--value {
  color: var(--ivt-fact-text);
}

/* Grid layout */
.ivt-fact--grid .ivt-fact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.ivt-fact--grid .ivt-fact__card {
  border: 1px solid var(--ivt-fact-border);
  border-radius: 6px;
  padding: 12px;
}

.ivt-fact--grid .ivt-fact__card-label {
  color: var(--ivt-fact-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.ivt-fact--grid .ivt-fact__card-value {
  color: var(--ivt-fact-text);
}

/* Responsive stacking for table layout */
.ivt-fact--responsive.ivt-fact--table .ivt-fact__table {
  display: block;
}

.ivt-fact--responsive.ivt-fact--table .ivt-fact__row {
  display: grid;
  grid-template-columns: minmax(120px, var(--ivt-fact-label-col)) 1fr;
  gap: 8px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ivt-fact-border);
}

.ivt-fact--responsive.ivt-fact--table .ivt-fact__row:first-child {
  padding-top: 0;
}

.ivt-fact--responsive.ivt-fact--table .ivt-fact__row:last-child {
  border-bottom: 0;
}

.ivt-fact--responsive.ivt-fact--table .ivt-fact__cell {
  display: block;
  padding: 0;
}

.ivt-fact--responsive.ivt-fact--table .ivt-fact__cell--label {
  font-weight: 600;
  color: var(--ivt-fact-muted);
}

.ivt-fact--responsive.ivt-fact--table .ivt-fact__cell--value {
  color: var(--ivt-fact-text);
}