/* ============================================================
   FLUX TABLE v0.2.0
   CSS layer for flux-table.js — DataTables replacement
   Pure CSS for visual styling. JS for interactivity.
   Free forever. Zero dependencies.
   ============================================================ */

/* ── TABLE WRAPPER ─────────────────────────────────────────── */
.ftable-wrap{
  background:var(--surface-1,#1a1a2e);
  border:1px solid var(--border-subtle,#2a2a3e);
  border-radius:var(--r-card,14px);
  overflow:hidden;
  font-size:var(--t-sm,.875rem);
}

/* ── TOOLBAR (search, filters, controls) ───────────────────── */
.ftable-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--g3,.75rem);padding:var(--g4,1rem) var(--g5,1.5rem);
  border-bottom:1px solid var(--border-subtle,#2a2a3e);
  flex-wrap:wrap;
}
.ftable-search{
  position:relative;flex:0 1 280px;
}
.ftable-search input{
  width:100%;padding:.5em 1em .5em 2.2em;
  border:1.5px solid var(--border,#333);border-radius:var(--r-md,8px);
  background:var(--input-bg,var(--surface-0,#111));color:var(--text-primary,#eee);
  font-size:var(--t-sm,.875rem);
  transition:border-color calc(var(--anim-speed,1)*180ms) var(--ease,ease);
}
.ftable-search input:focus{outline:none;border-color:var(--accent,#2dd4bf)}
.ftable-search input::placeholder{color:var(--text-muted,#666)}
.ftable-search::before{
  content:'⌕';position:absolute;left:.75em;top:50%;transform:translateY(-50%);
  color:var(--text-muted,#666);font-size:1em;pointer-events:none;
}
.ftable-info{
  font-size:var(--t-xs,.75rem);color:var(--text-muted,#666);
  white-space:nowrap;
}
.ftable-controls{
  display:flex;align-items:center;gap:var(--g2,.5rem);
}
.ftable-per-page{
  display:flex;align-items:center;gap:var(--g2,.5rem);
  font-size:var(--t-xs,.75rem);color:var(--text-muted,#666);
}
.ftable-per-page select{
  padding:.3em .5em;border:1px solid var(--border,#333);
  border-radius:var(--r-sm,4px);background:var(--input-bg,var(--surface-0,#111));
  color:var(--text-primary,#eee);font-size:var(--t-xs,.75rem);
}

/* ── TABLE ─────────────────────────────────────────────────── */
.ftable{
  width:100%;border-collapse:collapse;
}
.ftable-scroll{overflow-x:auto}

/* ── HEADER ────────────────────────────────────────────────── */
.ftable thead th{
  padding:var(--g3,.75rem) var(--g4,1rem);
  text-align:left;font-weight:600;
  font-size:var(--t-xs,.75rem);text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-secondary,#aaa);
  background:var(--surface-2,#1e1e2e);
  border-bottom:2px solid var(--border-subtle,#2a2a3e);
  white-space:nowrap;user-select:none;
  position:relative;
}

/* Sortable header */
.ftable thead th[data-sort]{cursor:pointer;padding-right:2em}
.ftable thead th[data-sort]:hover{color:var(--text-primary,#eee)}
.ftable thead th[data-sort]::after{
  content:'⇅';position:absolute;right:.75em;top:50%;transform:translateY(-50%);
  font-size:.85em;color:var(--text-muted,#555);
  transition:color calc(var(--anim-speed,1)*150ms) var(--ease,ease);
}
.ftable thead th.sort-asc::after{content:'↑';color:var(--accent,#2dd4bf)}
.ftable thead th.sort-desc::after{content:'↓';color:var(--accent,#2dd4bf)}
.ftable thead th.sort-asc,
.ftable thead th.sort-desc{color:var(--accent,#2dd4bf)}

/* Sticky header */
.ftable-sticky thead th{
  position:sticky;top:0;z-index:10;
  box-shadow:0 1px 0 var(--border-subtle,#2a2a3e);
}

/* ── BODY ROWS ─────────────────────────────────────────────── */
.ftable tbody td{
  padding:var(--g3,.75rem) var(--g4,1rem);
  border-bottom:1px solid var(--border-subtle,#2a2a3e);
  color:var(--text-primary,#eee);
  vertical-align:middle;
  transition:background calc(var(--anim-speed,1)*100ms) var(--ease,ease);
}
.ftable tbody tr:last-child td{border-bottom:none}

/* Hover */
.ftable-hover tbody tr:hover td{background:var(--surface-2,#1e1e2e)}

/* Striped */
.ftable-striped tbody tr:nth-child(even) td{background:oklch(from var(--surface-1,#1a1a2e) calc(l + .02) c h)}

/* Dense */
.ftable-dense thead th,.ftable-dense tbody td{padding:var(--g2,.5rem) var(--g3,.75rem)}
.ftable-dense{font-size:var(--t-xs,.75rem)}

/* Comfortable */
.ftable-comfortable thead th,.ftable-comfortable tbody td{padding:var(--g4,1rem) var(--g5,1.5rem)}

/* ── ROW STATES ────────────────────────────────────────────── */
.ftable tbody tr.selected td{
  background:var(--accent-subtle,oklch(22% 0.06 195));
  color:var(--accent,#2dd4bf);
}
.ftable tbody tr.row-success td{border-left:3px solid oklch(65% 0.16 150)}
.ftable tbody tr.row-error td{border-left:3px solid oklch(65% 0.16 25)}
.ftable tbody tr.row-warning td{border-left:3px solid oklch(65% 0.16 80)}

/* ── ROW CHECKBOX ──────────────────────────────────────────── */
.ftable .row-check{width:40px;text-align:center}
.ftable .row-check input[type="checkbox"]{
  width:16px;height:16px;cursor:pointer;accent-color:var(--accent,#2dd4bf);
}

/* ── CELL TYPES ────────────────────────────────────────────── */
.cell-mono{font-family:var(--ff-mono,'JetBrains Mono',monospace)}
.cell-num{text-align:right;font-variant-numeric:tabular-nums}
.cell-center{text-align:center}
.cell-truncate{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell-wrap{white-space:normal;word-break:break-word}
.cell-accent{color:var(--accent,#2dd4bf)}
.cell-muted{color:var(--text-muted,#666)}
.cell-success{color:oklch(72% 0.16 150)}
.cell-error{color:oklch(72% 0.16 25)}
.cell-warning{color:oklch(72% 0.16 80)}

/* ── COLUMN RESIZE HANDLE ──────────────────────────────────── */
.ftable thead th.resizable{position:relative}
.ftable thead th.resizable::before{
  content:'';position:absolute;right:0;top:25%;height:50%;width:3px;
  cursor:col-resize;background:transparent;
  transition:background calc(var(--anim-speed,1)*150ms) var(--ease,ease);
}
.ftable thead th.resizable:hover::before{background:var(--border,#333)}

/* ── EXPANDABLE ROW ────────────────────────────────────────── */
.ftable .row-expand-toggle{
  cursor:pointer;width:32px;text-align:center;
  color:var(--text-muted,#666);user-select:none;
}
.ftable .row-expand-toggle::after{
  content:'▸';display:inline-block;
  transition:transform calc(var(--anim-speed,1)*200ms) var(--ease,ease);
}
.ftable tr.expanded .row-expand-toggle::after{transform:rotate(90deg)}
.ftable .row-detail{display:none}
.ftable tr.expanded+.row-detail{display:table-row}
.ftable .row-detail td{
  background:var(--surface-2,#1e1e2e);
  padding:var(--g4,1rem) var(--g5,1.5rem);
  border-bottom:1px solid var(--border-subtle,#2a2a3e);
}

/* ── FOOTER / PAGINATION ───────────────────────────────────── */
.ftable-footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--g3,.75rem);padding:var(--g3,.75rem) var(--g5,1.5rem);
  border-top:1px solid var(--border-subtle,#2a2a3e);
  flex-wrap:wrap;
}
.ftable-page-info{
  font-size:var(--t-xs,.75rem);color:var(--text-muted,#666);
}
.ftable-pagination{
  display:flex;align-items:center;gap:var(--g1,.25rem);
}
.ftable-page-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 var(--g2,.5rem);
  border:none;border-radius:var(--r-md,8px);
  background:transparent;color:var(--text-secondary,#aaa);
  font-size:var(--t-xs,.75rem);font-weight:500;cursor:pointer;
  transition:all calc(var(--anim-speed,1)*150ms) var(--ease,ease);
}
.ftable-page-btn:hover{background:var(--surface-2,#1e1e2e);color:var(--text-primary,#eee)}
.ftable-page-btn.active{background:var(--accent,#2dd4bf);color:var(--accent-text,#111);font-weight:600}
.ftable-page-btn:disabled{opacity:.35;cursor:not-allowed}

/* ── EMPTY STATE ───────────────────────────────────────────── */
.ftable-empty{
  text-align:center;padding:var(--g8,4rem) var(--g4,1rem);
  color:var(--text-muted,#666);
}
.ftable-empty-icon{font-size:2rem;margin-bottom:var(--g3,.75rem);opacity:.4}
.ftable-empty-text{font-size:var(--t-sm,.875rem)}

/* ── LOADING ───────────────────────────────────────────────── */
.ftable-loading{position:relative;pointer-events:none}
.ftable-loading::after{
  content:'';position:absolute;inset:0;z-index:20;
  background:oklch(from var(--surface-1,#1a1a2e) l c h/.7);
  backdrop-filter:blur(2px);
}
.ftable-loading::before{
  content:'';position:absolute;top:50%;left:50%;z-index:21;
  width:28px;height:28px;margin:-14px 0 0 -14px;
  border:3px solid var(--border,#333);border-top-color:var(--accent,#2dd4bf);
  border-radius:50%;
  animation:ftable-spin calc(var(--anim-speed,1)*.6s) linear infinite;
}
@keyframes ftable-spin{to{transform:rotate(360deg)}}

/* ── RESPONSIVE: STACKED ON MOBILE ─────────────────────────── */
@media(max-width:640px){
  .ftable-responsive thead{display:none}
  .ftable-responsive tbody tr{
    display:block;margin-bottom:var(--g3,.75rem);
    border:1px solid var(--border-subtle,#2a2a3e);
    border-radius:var(--r-md,8px);
  }
  .ftable-responsive tbody td{
    display:flex;justify-content:space-between;align-items:center;
    padding:var(--g2,.5rem) var(--g4,1rem);border-bottom:1px solid var(--border-subtle,#2a2a3e);
    text-align:right;
  }
  .ftable-responsive tbody td::before{
    content:attr(data-label);font-weight:600;
    color:var(--text-secondary,#aaa);text-align:left;
    font-size:var(--t-xs,.75rem);text-transform:uppercase;letter-spacing:.04em;
    margin-right:var(--g4,1rem);
  }
  .ftable-responsive tbody td:last-child{border-bottom:none}
  .ftable-responsive .row-check,
  .ftable-responsive .row-expand-toggle{display:none}
}

/* ── COLUMN VISIBILITY ─────────────────────────────────────── */
.col-hidden{display:none}

/* ── PRINT ─────────────────────────────────────────────────── */
@media print{
  .ftable-toolbar,.ftable-footer,.ftable-controls,.ftable-search{display:none}
  .ftable-wrap{border:1px solid #ccc;box-shadow:none}
  .ftable thead th{background:#f0f0f0;color:#333}
  .ftable tbody td{color:#111}
}