/*
  Index
  ---------------------------------------------
  • Config
  • Base Styles
  • Style 1 (Pastel)
  • Style 2 (Dark Header)
  • Disabled State
  • Responsive
*/

/*
  • Config
---------------------------------------------
*/

:root {
  /* Style 1 */
  --s1-head-bg: #DCEFE3;
  --s1-cell-bg: #FFFFFF;

  /* Style 2 */
  --s2-head-bg: #5D7374;
  --s2-head-color: #DCEFE3;
  --s2-first-col-bg: #DCEFE3;
  --s2-first-col-color: #5D7374;
  --s2-cell-border: #5D7374;
  --s2-cell-color: #5D7374;
}

/*
  • Base Styles
---------------------------------------------
*/

.table-component {
  display: block;
  width: 100%;
}

.table-component__wrapper {
  width: 100%;
}

/* Header */
.table-component__header {
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .table-component__header {
    margin-bottom: 2rem;
  }
}

.table-component__above-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
  color: var(--s2-head-bg);
}

.table-component__title {
  margin-bottom: 0.5rem;
}

.table-component__title h1,
.table-component__title h2,
.table-component__title h3,
.table-component__title h4,
.table-component__title h5,
.table-component__title h6,
.table-component__title p {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
}

@media (min-width: 1024px) {
  .table-component__title h1,
  .table-component__title h2,
  .table-component__title h3,
  .table-component__title h4,
  .table-component__title h5,
  .table-component__title h6,
  .table-component__title p {
    font-size: 1.875rem;
  }
}

.table-component__subtitle {
  /*font-size: 1rem;*/
  /*color: #6b7280;*/
  /*margin-top: 0.5rem;*/
}

.table-component__subtitle p {
  margin: 0;
}

/* Responsive column grid
   --tc-cols and --tc-rows are set as inline custom properties from the blade.
   Each column uses subgrid to inherit the parent row tracks, so every cell at
   the same row index is automatically the same height — no JS measurement needed. */
.table-component__responsive-grid {
  display: grid;
  grid-template-columns: repeat(var(--tc-cols, 3), 1fr);
  grid-template-rows:    repeat(var(--tc-rows, 1), auto);
  width: 100%;
}

.table-component__column {
  display: grid;
  grid-row: 1 / -1;            /* span all explicit row tracks */
  grid-template-rows: subgrid; /* inherit row sizes from parent grid */
}

/* Head cell */
.table-component__th {
  padding: 1em;
  /*font-size: 0.875rem;*/
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

/* Body cell */
.table-component__td {
  padding: 1em;
  /*font-size: 0.875rem;*/
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
}

.table-component__td p {
  margin: 0;
}

/*
  • Style 1 (Pastel)
---------------------------------------------
*/

/* Gap lives on the parent grid only — subgrid columns inherit row-gap automatically */
.table-component--style_1 .table-component__responsive-grid {
  gap: 1em;
}

.table-component--style_1 .table-component__th,
.table-component--style_1 .table-component__td {
  border-radius: 5px;
}

.table-component--style_1 .table-component__th {
  background-color: var(--s1-head-bg);
}

.table-component--style_1 .table-component__td {
  background-color: var(--s1-cell-bg);
}

/*
  • Style 2 (Dark Header)
---------------------------------------------
*/

/* Gap lives on the parent grid only */
.table-component--style_2 .table-component__responsive-grid {
  gap: 1em;
}

.table-component--style_2 .table-component__th {
  font-size: 1.5em;
}

.table-component--style_2 .table-component__th {
  background-color: var(--s2-head-bg);
  color: var(--s2-head-color);
}

.table-component--style_2 .table-component__td {
  background-color: transparent;
  color: var(--s2-cell-color);
  border: 1px solid var(--s2-cell-border);
}

.table-component--style_2 .table-component__column:nth-child(1) .table-component__td {
  border: none;
}

/*
  • Disabled State
---------------------------------------------
*/

.table-component__td--disabled {
  opacity: 0.4;
  /*pointer-events: none;*/
  /*user-select: none;*/
}

.table-component__td--disabled p,
.table-component__td--disabled span,
.table-component__td--disabled a {
  color: #9ca3af;
}

/*
  • Responsive
---------------------------------------------
*/

@media (max-width: 479px) {
  /* Revert to flex so columns stack as self-contained cards on mobile,
     preserving the existing stacked layout behaviour exactly. */
  .table-component__responsive-grid {
    display: flex;
    flex-direction: column;
  }

  .table-component__column {
    display: flex;
    flex-direction: column;
    min-width: 100%;
    grid-row: auto; /* reset the desktop row-span */
  }

  /* Restore the per-column gap that subgrid was providing on desktop */
  .table-component--style_1 .table-component__column,
  .table-component--style_2 .table-component__column {
    gap: 1em;
  }
}