/* GENERATED FILE — DO NOT EDIT DIRECTLY.
 * Canonical source: frontend/src/styles/css/04-semantic-classes/table-gridlines.css
 * Edit the canonical React stylesheet source, then regenerate mirrors with:
 *   node scripts/sync-public-stylesheets.cjs
 */
/* Intensity variables (toggleable via AppHeader) */
.ut-gridlines-level-1 { /* Hairline - subtle structure */
  --ut-gridline-width: var(--input-border-thin);
  --ut-gridline-color: var(--teal-glass-soft-12);
  --ut-gridline-side-border: var(--ut-gridline-width) solid var(--ut-gridline-color);
  --ut-gridline-bottom-border: var(--ut-gridline-width) solid var(--ut-gridline-color);
  --ut-gridline-top-border: var(--ut-gridline-width) solid var(--ut-gridline-color);
}

.ut-gridlines-level-2 { /* Medium */
  --ut-gridline-width: var(--input-border-thin);
  --ut-gridline-color: var(--teal-glass-medium-30);
  --ut-gridline-side-border: var(--ut-gridline-width) solid var(--ut-gridline-color);
  --ut-gridline-bottom-border: var(--ut-gridline-width) solid var(--ut-gridline-color);
  --ut-gridline-top-border: var(--ut-gridline-width) solid var(--ut-gridline-color);
}

.ut-gridlines-level-3 { /* Strong */
  --ut-gridline-width: var(--input-border-std);
  --ut-gridline-color: var(--input-border);
  --ut-gridline-side-border: var(--ut-gridline-width) solid var(--ut-gridline-color);
  --ut-gridline-bottom-border: var(--ut-gridline-width) solid var(--ut-gridline-color);
  --ut-gridline-top-border: var(--ut-gridline-width) solid var(--ut-gridline-color);
}

/* Ensure gridlines work with split <path> tables.
 * The root level class is the global AppHeader switch. DataTable owns
 * .table-gridlines on every canonical table surface. */
.table-gridlines {
  border-collapse: collapse;
  /* Activate side borders for all cells */
  --gl-side: var(--ut-gridline-side-border, var(--input-border-thin) solid var(--input-border));
  --gl-right: var(--ut-gridline-side-border, none);
  /* Activate bottom border for data cells */
  --gl-bottom: var(--ut-gridline-bottom-border, none);
  /* Activate top border for header cells */
  --gl-top: var(--ut-gridline-top-border, none);
}

.table__header {
  border-top: var(--gl-top);
  border-bottom: var(--gl-bottom);
  border-right: var(--gl-right);
}

.table__cell {
  border-bottom: var(--gl-bottom);
  border-right: var(--gl-right);
}