/* ============================================================
   UNIFIED ALLOYS — DATA TABLES
   ua-data-tables.css | WordPress/Bricks build
   Upload to: wp-content/themes/bricks/assets/css/ua-data-tables.css
   ============================================================ */

/* ----------------------------------------------------------
   TABLE WRAPPER — overflow scroll on mobile
   ---------------------------------------------------------- */
.ua-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 8px;
}

/* ----------------------------------------------------------
   TABLE BASE
   ---------------------------------------------------------- */
.ua-data-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--base);
  white-space: nowrap;
}

/* ----------------------------------------------------------
   HEADER — hardcoded hex to prevent Bricks override
   ---------------------------------------------------------- */
.ua-data-table thead tr:first-child th {
  background: #0c486b;
  color: var(--light) !important;
  font-size: 11px;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  vertical-align: middle;
}

.ua-data-table thead tr:first-child th:first-child {
  text-align: left;
}

.ua-data-table thead tr.sub-header th {
  background: var(--primary) !important;
  color: var(--light) !important;
  font-size: 10px;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* ----------------------------------------------------------
   CLASS GROUP DIVIDERS
   ---------------------------------------------------------- */
.ua-data-table thead th.ua-th--divider {
  border-left: 2px solid rgba(255, 255, 255, 0.25) !important;
}

.ua-data-table tbody td.ua-td--divider {
  border-left: 2px solid var(--border-primary) !important;
}

/* ----------------------------------------------------------
   BODY
   ---------------------------------------------------------- */
.ua-data-table tbody td {
  padding: 9px 14px;
  border-top: 1px solid var(--border-primary);
  border-right: 1px solid var(--border-primary);
  text-align: center;
  vertical-align: middle;
}

.ua-data-table tbody td:last-child {
  border-right: none;
}

.ua-data-table tbody td:first-child {
  font-weight: 600;
  text-align: left;
}

.ua-data-table tbody tr:nth-child(even) td {
  background: var(--base-l-3);
}

.ua-data-table tbody tr:hover td {
  background: #edf3f8;
}

/* ----------------------------------------------------------
   CELL VARIANTS
   ---------------------------------------------------------- */
.ua-td--nps {
  font-weight: 700;
}

.ua-td--muted {
  color: var(--base-l-1);
  font-size: 12px;
}

.ua-td--na {
  color: var(--light);
  text-align: center;
}

/* ----------------------------------------------------------
   STICKY FIRST COLUMN (opt-in with .ua-table-sticky)
   ---------------------------------------------------------- */
.ua-table-sticky .ua-data-table th:first-child,
.ua-table-sticky .ua-data-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 72px;
}

.ua-table-sticky .ua-data-table thead th:first-child {
  z-index: 3;
  background: #0c486b;
}

.ua-table-sticky .ua-data-table tbody tr:nth-child(odd) td:first-child {
  background: var(--ua-white);
}
.ua-table-sticky .ua-data-table tbody tr:nth-child(even) td:first-child {
  background: var(--base-l-3);
}
.ua-table-sticky .ua-data-table tbody tr:hover td:first-child {
  background: #edf3f8;
}

/* ----------------------------------------------------------
   TABLE NOTES
   ---------------------------------------------------------- */
.ua-table-note {
  font-size: 12px;
  color: var(--base-l-1);
  margin: 8px 0 24px;
  line-height: 1.6;
}

.ua-table-notes {
  margin: 12px 0 24px;
  padding: 14px 18px;
  background: var(--base-l-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  font-size: 12px;
  color: var(--base-l-1);
  line-height: 1.65;
  list-style: none;
}

.ua-table-notes li {
  padding-left: 14px;
  position: relative;
  margin-bottom: 4px;
}

.ua-table-notes li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--light);
}

/* ----------------------------------------------------------
   WIDE BLEED — desktop only
   ---------------------------------------------------------- */
@media (min-width: 1024px) {
  .ua-table-bleed {
    /* margin-left: -120px;
    margin-right: -120px; */
  }

  .ua-table-bleed > .ua-table-note,
  .ua-table-bleed > .ua-table-notes {
    margin-left: 120px;
    margin-right: 120px;
  }
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .ua-data-table th,
  .ua-data-table td {
    padding: 8px 10px;
    font-size: 12px;
  }

  .ua-data-table thead tr.sub-header th {
    font-size: 9px;
    padding: 5px 10px;
  }
}