/* ============================================================
   CFA DATA TABLE
   Phase: Components > Tables
   Requires: cfa-tokens.css loaded first

   COMPONENTS IN THIS FILE:
   1. .cfa-table-wrap   — scrollable outer container
   2. .cfa-table        — the <table> element
   3. .cfa-table-th     — header cell
   4. .cfa-table-td     — body cell
   5. .cfa-table-row    — <tr> (hover / selected / flagged states)
   6. .cfa-row-actions  — inline action buttons per row
   7. .cfa-table-empty  — empty / loading state

   PHP ALIASES (CSS-only coexistence — no template changes required):
   - .portfolio-new          → .cfa-table
   - .portfolio-new-header   → thead / .cfa-table-th header row
   - .portfolio-new-row      → .cfa-table-row
   - .portfolio-new-cell     → .cfa-table-td
   - .admin-portfolio-header → .cfa-table-th
   - .admin-portfolio        → .cfa-table-td
   - .myaccount_table        → .cfa-table
   - .transaction-table      → .cfa-table
   - .dirnteam-table         → .cfa-table

   Spacer rows (.portfolio-new-spacer, .tblblankspc) are hidden
   via CSS — no markup removal required.
   ============================================================ */


/* ================================================================
   TABLE TOKENS (local, tables-only)
   ================================================================ */

:root {
  --cfa-table-header-bg:      var(--cfa-bg-soft);
  --cfa-table-header-color:   var(--cfa-text-muted);
  --cfa-table-border:         var(--cfa-border);
  --cfa-table-row-hover:      var(--cfa-cobalt-pale);
  --cfa-table-row-selected:   var(--cfa-cobalt-pale);
  --cfa-table-row-flagged-bg: var(--cfa-red-pale);
  --cfa-table-row-flagged-bd: var(--cfa-red);
  --cfa-table-cell-pad-v:     14px;
  --cfa-table-cell-pad-h:     16px;
}


/* ================================================================
   1. TABLE WRAP  (.cfa-table-wrap)
   Horizontal-scroll container for overflow safety.
   ================================================================ */

.cfa-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--cfa-radius-lg);
  border: 1px solid var(--cfa-table-border);
  background: var(--cfa-bg);
  box-shadow: var(--cfa-shadow-sm);
}


/* ================================================================
   2. TABLE  (.cfa-table)
   PHP aliases: .portfolio-new, .myaccount_table,
                .transaction-table, .dirnteam-table
   ================================================================ */

.cfa-table,
table.portfolio-new,
table.myaccount_table,
table.transaction-table,
table.dirnteam-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-sm);
  color: var(--cfa-text);
}


/* ================================================================
   3. HEADER CELL  (.cfa-table-th)
   PHP aliases: .portfolio-new-header td/th, .admin-portfolio-header
   ================================================================ */

.cfa-table-th,
.cfa-table thead th,
.cfa-table thead td,
table.portfolio-new .portfolio-new-header td,
table.portfolio-new .portfolio-new-header th,
table.portfolio-new thead td,
table.portfolio-new thead th,
.admin-portfolio-header {
  padding: var(--cfa-table-cell-pad-v) var(--cfa-table-cell-pad-h);
  background: var(--cfa-table-header-bg) !important;
  color: var(--cfa-table-header-color) !important;
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-xs) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  letter-spacing: var(--cfa-tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1.5px solid var(--cfa-table-border);
  text-align: left;
  vertical-align: middle;
}

/* Numeric / right-aligned header */
.cfa-table-th--num {
  text-align: right;
}


/* ── Sortable header ── */
.cfa-table-th--sortable {
  cursor: pointer;
  user-select: none;
}

.cfa-table-th--sortable::after {
  content: ' ↕';
  font-size: 10px;
  opacity: 0.5;
}

.cfa-table-th--sortable.is-sorted-asc::after  { content: ' ↑'; opacity: 1; }
.cfa-table-th--sortable.is-sorted-desc::after { content: ' ↓'; opacity: 1; }

.cfa-table-th--sortable:hover {
  color: var(--cfa-cobalt) !important;
}


/* ================================================================
   4. BODY CELL  (.cfa-table-td)
   PHP aliases: .portfolio-new-cell, .admin-portfolio
   ================================================================ */

.cfa-table-td,
.cfa-table tbody td,
.cfa-table tbody th,
table.portfolio-new .portfolio-new-row td,
table.portfolio-new .portfolio-new-row th,
table.portfolio-new .portfolio-new-cell,
table.portfolio-new tbody td,
table.portfolio-new tbody th,
.admin-portfolio,
table.myaccount_table td,
table.myaccount_table th,
table.transaction-table td,
table.transaction-table th,
table.dirnteam-table td,
table.dirnteam-table th {
  padding: var(--cfa-table-cell-pad-v) var(--cfa-table-cell-pad-h);
  border-bottom: 1px solid var(--cfa-table-border);
  color: var(--cfa-text);
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-sm);
  vertical-align: middle;
  background: transparent;
}

/* Numeric / right-aligned cell */
.cfa-table-td--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Muted / secondary data */
.cfa-table-td--muted {
  color: var(--cfa-text-muted);
}


/* ================================================================
   5. TABLE ROW  (.cfa-table-row)
   PHP alias: .portfolio-new-row
   Row states: hover, selected, flagged/error
   ================================================================ */

.cfa-table-row,
table.portfolio-new .portfolio-new-row,
table.portfolio-new tbody tr,
table.myaccount_table tbody tr,
table.transaction-table tbody tr,
table.dirnteam-table tbody tr {
  transition: background var(--cfa-transition-fast);
}

/* ── Hover — target cells for reliable cross-browser rendering ── */
.cfa-table-row:hover td,
.cfa-table-row:hover th,
table.portfolio-new .portfolio-new-row:hover td,
table.portfolio-new .portfolio-new-row:hover th,
table.portfolio-new tbody tr:hover td,
table.portfolio-new tbody tr:hover th,
table.myaccount_table tbody tr:hover td,
table.myaccount_table tbody tr:hover th,
table.transaction-table tbody tr:hover td,
table.transaction-table tbody tr:hover th,
table.dirnteam-table tbody tr:hover td,
table.dirnteam-table tbody tr:hover th {
  background: var(--cfa-table-row-hover) !important;
}

/* Remove the old alternating row colors */
table.portfolio-new .portfolio-new-odd-comm,
table.portfolio-new .portfolio-new-even-comm {
  background: transparent !important;
}

/* ── Selected ── */
.cfa-table-row.is-selected td,
.cfa-table-row.is-selected th,
.cfa-table-row.selected td,
.cfa-table-row.selected th,
table.portfolio-new .portfolio-new-row.is-selected td,
table.portfolio-new .portfolio-new-row.selected td {
  background: var(--cfa-table-row-selected) !important;
  border-bottom-color: var(--cfa-cobalt-border);
}

/* ── Flagged / error ── */
.cfa-table-row.is-flagged td,
.cfa-table-row.is-flagged th,
.cfa-table-row.is-error td,
.cfa-table-row.is-error th,
.cfa-table-row.flagged td,
.cfa-table-row.flagged th,
.cfa-table-row.error td,
.cfa-table-row.error th {
  background: var(--cfa-table-row-flagged-bg) !important;
  border-bottom-color: var(--cfa-red-border);
}

/* Left border on first cell only */
.cfa-table-row.is-flagged td:first-child,
.cfa-table-row.is-error td:first-child,
.cfa-table-row.flagged td:first-child,
.cfa-table-row.error td:first-child {
  border-left: 3px solid var(--cfa-table-row-flagged-bd);
}

/* ── Last row — no bottom border ── */
.cfa-table tbody tr:last-child td,
.cfa-table tbody tr:last-child th,
table.portfolio-new tbody tr:last-child td,
table.myaccount_table tbody tr:last-child td,
table.transaction-table tbody tr:last-child td,
table.dirnteam-table tbody tr:last-child td {
  border-bottom: none;
}


/* ── Spacer row suppression ── */
.portfolio-new-spacer,
.tblblankspc,
table.portfolio-new tr.blank_row,
table.portfolio-new tr.spacer {
  display: none !important;
}


/* ================================================================
   6. CHECKBOX COLUMN  (.cfa-table-checkbox)
   ================================================================ */

.cfa-table-checkbox {
  width: 40px;
  padding-left: var(--cfa-table-cell-pad-h) !important;
  padding-right: 0 !important;
  text-align: center;
}

.cfa-table-checkbox input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--cfa-cobalt);
}


/* ================================================================
   7. ROW ACTIONS  (.cfa-row-actions)
   ================================================================ */

.cfa-row-actions {
  display: flex;
  align-items: center;
  gap: var(--cfa-space-2);
  justify-content: flex-end;
}

.cfa-row-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--cfa-radius-sm);
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-xs);
  font-weight: var(--cfa-weight-medium);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cfa-cobalt);
  transition: background var(--cfa-transition-fast), color var(--cfa-transition-fast);
  white-space: nowrap;
}

.cfa-row-action:hover {
  background: var(--cfa-cobalt-pale);
  color: var(--cfa-cobalt);
  text-decoration: none;
}

.cfa-row-action--danger {
  color: var(--cfa-red);
}

.cfa-row-action--danger:hover {
  background: var(--cfa-red-pale);
  color: var(--cfa-red);
}


/* ================================================================
   8. EMPTY / LOADING STATE  (.cfa-table-empty)
   ================================================================ */

.cfa-table-empty {
  padding: var(--cfa-space-12) var(--cfa-space-6);
  text-align: center;
  color: var(--cfa-text-muted);
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-sm);
}

.cfa-table-empty p {
  margin: 0;
}


/* ================================================================
   9. ADMIN PANEL SIDEBAR TABLES  (.admin-panel-l)
   Narrower cells, tighter padding for sidebar data displays.
   ================================================================ */

.admin-panel-l table td,
.admin-panel-l table th {
  padding: 10px 12px;
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-sm);
  border-bottom: 1px solid var(--cfa-table-border);
  vertical-align: middle;
  color: var(--cfa-text);
}

.admin-panel-l table th {
  background: var(--cfa-table-header-bg) !important;
  color: var(--cfa-table-header-color) !important;
  font-size: var(--cfa-text-xs) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  text-transform: uppercase;
  letter-spacing: var(--cfa-tracking-wider);
}

.admin-panel-l table tbody tr:hover {
  background: var(--cfa-table-row-hover) !important;
}


/* ================================================================
   10. BOOTSTRAP TABLE INTEGRATION (.table)
   Applies CFA token styling to Bootstrap 3 .table class,
   preserving Bootstrap striped/bordered/hover modifiers.
   ================================================================ */

.table {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-sm);
  color: var(--cfa-text);
}

.table > thead > tr > th,
.table > thead > tr > td {
  background: var(--cfa-table-header-bg) !important;
  color: var(--cfa-table-header-color) !important;
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-xs) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  letter-spacing: var(--cfa-tracking-wider);
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--cfa-table-border) !important;
  padding: var(--cfa-table-cell-pad-v) var(--cfa-table-cell-pad-h);
  vertical-align: middle;
  white-space: nowrap;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-sm);
  color: var(--cfa-text);
  border-top: 1px solid var(--cfa-table-border) !important;
  padding: var(--cfa-table-cell-pad-v) var(--cfa-table-cell-pad-h);
  vertical-align: middle;
}

/* Hover rows via Bootstrap .table-hover */
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background: var(--cfa-table-row-hover) !important;
}

/* Striped rows via Bootstrap .table-striped */
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
  background: var(--cfa-bg-soft) !important;
}

/* Bordered table */
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th {
  border-color: var(--cfa-table-border) !important;
}


/* ================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================ */

@media (max-width: 920px) {
  .cfa-table-th,
  .cfa-table-td,
  .cfa-table thead th,
  .cfa-table thead td,
  .cfa-table tbody td,
  .cfa-table tbody th,
  table.portfolio-new .portfolio-new-header td,
  table.portfolio-new .portfolio-new-header th,
  table.portfolio-new .portfolio-new-row td,
  table.portfolio-new .portfolio-new-cell,
  .admin-portfolio-header,
  .admin-portfolio {
    padding: 10px 12px;
  }
}

@media (max-width: 600px) {
  .cfa-table-wrap {
    border-radius: var(--cfa-radius-sm);
  }

  .cfa-row-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cfa-space-1);
  }
}