/* =====================================================
   UNIFIED TABLE SYSTEM
   Usage: <table class="app-table"> or wrap .app-table-wrap
   ===================================================== */

:root {
  --tbl-border:       #e2e8f0;
  --tbl-border-head:  #c7d2fe;
  --tbl-bg-head:      #eef2ff;
  --tbl-color-head:   #4f46e5;
  --tbl-bg-row:       #fff;
  --tbl-bg-row-alt:   #fafbff;
  --tbl-bg-hover:     #f1f5f9;
  --tbl-color-row:    #0f172a;
  --tbl-color-muted:  #475569;
  --tbl-radius:       12px;
  --tbl-shadow:       0 4px 16px rgba(99,102,241,.07);
  --tbl-font:         .84rem;
  --tbl-font-head:    .72rem;
  --tbl-pad:          11px 16px;
  --tbl-pad-head:     12px 16px;
}

.app-table-wrap {
  overflow-x: auto;
  border-radius: var(--tbl-radius);
  border: 2px solid var(--tbl-border-head);
  box-shadow: var(--tbl-shadow);
}

.app-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tbl-font);
  font-family: inherit;
}

.app-table th {
  padding: var(--tbl-pad-head);
  text-align: left;
  font-size: var(--tbl-font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tbl-color-head);
  background: var(--tbl-bg-head);
  border-bottom: 2px solid var(--tbl-border-head);
  white-space: nowrap;
}

.app-table td {
  padding: var(--tbl-pad);
  border-bottom: 1px solid var(--tbl-border);
  vertical-align: middle;
  color: var(--tbl-color-row);
  font-weight: 500;
  background: var(--tbl-bg-row);
}

.app-table tr:last-child td { border-bottom: none; }
.app-table tr:hover td { background: var(--tbl-bg-hover); }
.app-table tbody tr:nth-child(even) td { background: var(--tbl-bg-row-alt); }
.app-table tbody tr:nth-child(even):hover td { background: var(--tbl-bg-hover); }

/* Muted cell (e.g. IDs, dates) */
.app-table .cell-muted { color: var(--tbl-color-muted); font-weight: 500; }

/* Loading state */
.app-table .cell-loading { text-align: center; padding: 32px; color: var(--tbl-color-muted); }