/* public/assets/ui/framework/07_tables.css
   KomodUI Tables v0.1
   Universal responsive table wrapper and table defaults.
*/

/* Universal wrapper for any wide content (tables, code, etc.) */
.scroll-x {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Table wrapper (semantic alias) */
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Optional visual hint on mobile */
@media (max-width: 576px) {
  .table-scroll {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
  }
}

/* Base table */
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Wider-than-screen tables should opt-in */
.table--wide { min-width: 720px; }
.table--xwide { min-width: 960px; }
.table--xxwide { min-width: 1200px; }

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.table th {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-black);
  color: var(--color-text-heading);
  background: #F8FAFC;
  white-space: nowrap;
}

.table td {
  color: var(--color-text-main);
}

/* Prevent long values from exploding width */
.table td,
.table th {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Last row */
.table tr:last-child td { border-bottom: none; }

/* Hover on desktop */
@media (hover: hover) {
  .table tbody tr:hover td {
    background: rgba(79,70,229,0.04);
  }
}

/* “Compact” variation */
.table--compact th,
.table--compact td {
  padding: var(--space-2) var(--space-3);
}

/* Nice: sticky header when inside scroll wrapper (optional) */
.table--sticky thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}