/* =========================================================
   TechGeeks Platform — Tables (Shared)
   File: static/css/components/tables.css

   Goals:
   - One reusable table system across modules
   - Opt-in modifiers (striped/hover/sticky/dense)
   - Utility column/cell classes to avoid nth-child styling

   This is the single shared table system — all modules use
   .tg-table / .tg-table-wrap (the old .table classes are retired).
   ========================================================= */

/* =========================
   WRAPPER (horizontal scroll)
========================= */
.tg-table-wrap{
  width:100%;
  max-width:100%;

  overflow-x:auto;
  overflow-y:hidden;

  -webkit-overflow-scrolling:touch;
  scrollbar-gutter: stable;

  min-width:0;
}

.tg-table-wrap::-webkit-scrollbar{ height:6px; }
.tg-table-wrap::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.22);
  border-radius: 4px;
}
.tg-table-wrap::-webkit-scrollbar-track{ background: transparent; }

/* =========================
   BASE TABLE
========================= */
:where(.tg-table){
  width:100%;
  min-width:900px; /* default desktop min-width before horizontal scroll */

  border-collapse:collapse;
}

:where(.tg-table) th,
:where(.tg-table) td{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  text-align:left;

  /* Cards set `overflow-wrap:anywhere` (pwa.css) which is inherited; left
     unchecked it breaks short words like names mid-character when a column
     is squeezed. Reset here so cells wrap at word boundaries by default;
     .cell-wrap / .col-rfr opt back into break-anywhere where wanted. */
  overflow-wrap:normal;
}

:where(.tg-table) thead th{
  background:var(--bg-soft);

  font-size:12px;
  font-weight:900;
  color:var(--muted);

  text-transform:uppercase;
  letter-spacing:.02em;

  white-space:nowrap;
}

/* =========================
   MODIFIERS
========================= */

/* zebra striping */
:where(.tg-table--striped) tbody tr:nth-child(even){
  background: var(--bg-soft);
}

/* hover highlight */
:where(.tg-table--hover) tbody tr:hover{
  background: var(--bg-hover);
}

/* compact density */
:where(.tg-table--dense) th,
:where(.tg-table--dense) td{
  padding:9px 12px;
}

/* sticky header (opt-in) */
:where(.tg-table--sticky) thead th{
  position: sticky;
  top: 0;
  z-index: 10;
}

/* =========================
   COLUMN / CELL UTILITIES
========================= */

/* alignment */
:where(.tg-table) .is-right{ text-align:right; }
:where(.tg-table) .is-center{ text-align:center; }

/* numeric readability */
:where(.tg-table) .col-num,
:where(.tg-table) .col-money,
:where(.tg-table) .is-num{
  text-align:right;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}

/* actions column */
:where(.tg-table) .col-actions,
:where(.tg-table) .is-actions{
  width:1%;
  white-space:nowrap;
}

/* actions layout (opt-in)
   Usage:
   - <td class="col-actions tg-actions-cell">
       <div class="tg-actions-row">...</div>
     </td>
*/
:where(.tg-table) .tg-actions-cell{
  text-align:right;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}

/* allow centered actions when explicitly requested */
:where(.tg-table) .tg-actions-cell.is-center{
  text-align:center;
}

:where(.tg-table) .tg-actions-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

:where(.tg-table) .tg-actions-cell.is-center .tg-actions-row{
  justify-content:center;
}

:where(.tg-table) .tg-actions-row > *{
  min-width:0;
}

/* cell text behavior */
:where(.tg-table) .cell-nowrap{ white-space:nowrap; }
:where(.tg-table) .cell-wrap{ white-space:normal; overflow-wrap:anywhere; }
:where(.tg-table) .cell-truncate{
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   RESPONSIVE HELPERS
========================= */

@media (max-width:920px), (orientation:landscape) and (max-height:520px){
  :where(.tg-table){ min-width: 760px; }
  :where(.tg-table) .hide-md{ display:none; }
}

@media (max-width:640px){
  :where(.tg-table){ min-width: 620px; }
  :where(.tg-table) .hide-sm{ display:none; }
}