/* ==========================================================================
   ifinsta Table — Authoritative Table Stylesheet
   Single source of truth for ALL table-related CSS across the system.
   Design: No shadows, flat headers, thin borders, dense padding.
   Border model: border-collapse: collapse, horizontal-only dividers.
   ========================================================================== */

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --ifinsta-table-bg:               var(--ifinsta-white, #ffffff);
  --ifinsta-table-bg-hover:         var(--ifinsta-primary-50, rgba(59,130,246,0.04));
  --ifinsta-table-bg-selected:      var(--ifinsta-primary-alpha-08, rgba(37,99,235,0.08));
  --ifinsta-table-bg-striped:       var(--ifinsta-bg-secondary, #f8fafc);
  --ifinsta-table-header-bg:        var(--ifinsta-surface-1, #f8fafc);
  /* Typography */
  --ifinsta-table-header-color:     var(--ifinsta-text-secondary, #475569);
  --ifinsta-table-header-weight:    var(--ifinsta-font-semibold, 600);
  --ifinsta-table-header-size:      var(--ifinsta-text-overline-size, 0.7857rem);
  --ifinsta-table-header-tracking:  0.06em;
  --ifinsta-table-header-transform: uppercase;
  --ifinsta-table-cell-color:       var(--ifinsta-text-primary, #0f172a);
  --ifinsta-table-cell-secondary:   var(--ifinsta-text-muted, #94a3b8);
  --ifinsta-table-cell-size:        var(--ifinsta-text-body-sm-size, 0.9286rem);
  --ifinsta-table-cell-weight:      var(--ifinsta-font-normal, 400);
  /* Borders */
  --ifinsta-table-border:           1px solid var(--ifinsta-border, #e2e8f0);
  --ifinsta-table-border-header:    2px solid var(--ifinsta-border, #e2e8f0);
  /* Dimensions */
  --ifinsta-table-row-height:       44px;
  --ifinsta-table-row-height-compact: 36px;
  --ifinsta-table-row-height-relaxed: 56px;
  --ifinsta-table-cell-pad-x:       var(--ifinsta-space-4, 16px);
  --ifinsta-table-cell-pad-y:       0;
  /* Radius */
  --ifinsta-table-radius:           var(--ifinsta-radius-md, 8px);
  /* Sort */
  --ifinsta-table-sort-color:       var(--ifinsta-text-muted, #94a3b8);
  --ifinsta-table-sort-active:      var(--ifinsta-primary, #2563eb);
  /* Empty state */
  --ifinsta-table-empty-icon-size:  var(--ifinsta-space-8, 32px);
  --ifinsta-table-empty-icon-color: var(--ifinsta-text-muted, #94a3b8);
  /* Grid variant */
  --ifinsta-table-grid:             var(--ifinsta-secondary-200, #e2e8f0);
  --ifinsta-table-grid-strong:      var(--ifinsta-secondary-300, #cbd5e1);
}

/* ==========================================================================
   CONTAINER
   ========================================================================== */
.ifinsta-table-container {
  width: 100%;
  border-radius: var(--ifinsta-table-radius);
  border: var(--ifinsta-table-border);
  overflow: hidden;
  background: var(--ifinsta-table-bg);
}

/* ─── Sticky table head — vertically centered ──────────────────────────── */
.ifinsta-table-head th {
  vertical-align: middle;
}

/* ==========================================================================
   TOOLBAR
   The toolbar sits above the column header row and holds the table title,
   search input, filter controls, and bulk/export actions. It uses the same
   surface tone as the header and footer to visually bookend the data.
   ========================================================================== */
.ifinsta-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ifinsta-space-2-5, 10px) var(--ifinsta-table-cell-pad-x);
  border-bottom: var(--ifinsta-table-border);
  gap: var(--ifinsta-space-3, 12px);
  background: var(--ifinsta-table-header-bg);
  min-height: var(--ifinsta-table-row-height);
  flex-wrap: wrap;
}

/* ── Title ────────────────────────────────────────────────────────────────── */
.ifinsta-table-title {
  margin: 0;
  font-size: var(--ifinsta-text-body, 14px);
  font-weight: var(--ifinsta-font-semibold, 600);
  color: var(--ifinsta-table-cell-color);
  white-space: nowrap;
  min-width: 0;
  line-height: 1.3;
}

.ifinsta-table-subtitle {
  margin: var(--ifinsta-space-0-5, 2px) 0 0;
  font-size: var(--ifinsta-text-caption, 12px);
  font-weight: var(--ifinsta-font-normal, 400);
  color: var(--ifinsta-table-cell-secondary);
}

/* ── Actions group (right side) ───────────────────────────────────────────── */
.ifinsta-table-toolbar-actions,
.ifinsta-table-actions {
  display: flex;
  align-items: center;
  gap: var(--ifinsta-space-2, 8px);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── Search input ─────────────────────────────────────────────────────────── */
.ifinsta-table-search {
  height: var(--ifinsta-input-height, 32px);
  padding: 0 var(--ifinsta-space-2-5, 10px) 0 var(--ifinsta-space-8, 32px);
  font-size: var(--ifinsta-text-body-sm, 13px);
  font-family: var(--ifinsta-font-sans, inherit);
  border: var(--ifinsta-table-border);
  border-radius: var(--ifinsta-radius-sm, 4px);
  background: var(--ifinsta-table-bg);
  color: var(--ifinsta-table-cell-color);
  outline: none;
  transition: border-color var(--ifinsta-duration-fast, 100ms) var(--ifinsta-ease-smooth, ease);
  min-width: 180px;
  max-width: 280px;
}

.ifinsta-table-search::placeholder {
  color: var(--ifinsta-table-cell-secondary);
}

.ifinsta-table-search:focus {
  border-color: var(--ifinsta-table-sort-active);
  outline: var(--ifinsta-focus-ring-width, 2px) solid color-mix(in srgb, var(--ifinsta-table-sort-active) 15%, transparent);

}

/* ── Filter chips (inside toolbar) ────────────────────────────────────────── */
.ifinsta-table-filters {
  display: flex;
  align-items: center;
  gap: var(--ifinsta-space-1-5, 6px);
  flex-wrap: wrap;
}

.ifinsta-table-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ifinsta-space-1, 4px);
  height: var(--ifinsta-btn-height, 32px);
  padding: 0 var(--ifinsta-space-2-5, 10px);
  font-size: var(--ifinsta-text-caption, 12px);
  font-family: var(--ifinsta-font-sans, inherit);
  font-weight: var(--ifinsta-font-medium, 500);
  color: var(--ifinsta-table-cell-secondary);
  background: var(--ifinsta-table-bg);
  border: var(--ifinsta-table-border);
  border-radius: var(--ifinsta-radius-full, 9999px);
  cursor: pointer;
  transition: background var(--ifinsta-duration-fast, 100ms) var(--ifinsta-ease-smooth, ease),
              border-color var(--ifinsta-duration-fast, 100ms) var(--ifinsta-ease-smooth, ease),
              color var(--ifinsta-duration-fast, 100ms) var(--ifinsta-ease-smooth, ease);
  white-space: nowrap;
}

.ifinsta-table-filter-chip:hover {
  background: var(--ifinsta-table-bg-hover);
  color: var(--ifinsta-table-cell-color);
}

.ifinsta-table-filter-chip:focus-visible {
  outline: var(--ifinsta-focus-ring-width, 2px) solid var(--ifinsta-table-sort-active);

}

.ifinsta-table-filter-chip.is-active {
  background: color-mix(in srgb, var(--ifinsta-table-sort-active) 8%, transparent);
  border-color: color-mix(in srgb, var(--ifinsta-table-sort-active) 30%, transparent);
  color: var(--ifinsta-table-sort-active);
  font-weight: var(--ifinsta-font-semibold, 600);
}

.ifinsta-table-filter-chip .ifinsta-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ifinsta-space-3-5, 14px);
  height: var(--ifinsta-space-3-5, 14px);
  border-radius: 50%;
  margin-left: var(--ifinsta-space-0-5, 2px);
  margin-right: calc(-1 * var(--ifinsta-space-1, 4px));
  color: inherit;
  opacity: 0.5;
  transition: opacity var(--ifinsta-duration-fast, 100ms) var(--ifinsta-ease-smooth, ease);
}

.ifinsta-table-filter-chip:hover .ifinsta-chip-remove {
  opacity: 1;
}

/* ── Bulk action bar ──────────────────────────────────────────────────────── */
.ifinsta-table-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ifinsta-space-2, 8px) var(--ifinsta-table-cell-pad-x);
  background: color-mix(in srgb, var(--ifinsta-table-sort-active) 6%, transparent);
  border-bottom: var(--ifinsta-table-border);
  gap: var(--ifinsta-space-3, 12px);
  min-height: 40px;
}

.ifinsta-table-bulk-bar .ifinsta-table-bulk-count {
  font-size: var(--ifinsta-text-body-sm, 13px);
  font-weight: var(--ifinsta-font-medium, 500);
  color: var(--ifinsta-table-sort-active);
  white-space: nowrap;
}

.ifinsta-table-bulk-bar .ifinsta-table-bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--ifinsta-space-2, 8px);
}

/* ── Divider between title and actions ────────────────────────────────────── */
.ifinsta-table-toolbar-divider {
  width: 1px;
  height: var(--ifinsta-space-5, 20px);
  background: var(--ifinsta-border);
  flex-shrink: 0;
}

/* ── Record count pill ────────────────────────────────────────────────────── */
.ifinsta-table-record-count {
  display: inline-flex;
  align-items: center;
  padding: var(--ifinsta-space-0-5, 2px) var(--ifinsta-space-2, 8px);
  font-size: var(--ifinsta-text-xs, 11px);
  font-weight: var(--ifinsta-font-medium, 500);
  color: var(--ifinsta-table-cell-secondary);
  background: var(--ifinsta-table-bg-striped);
  border-radius: var(--ifinsta-radius-full, 9999px);
  white-space: nowrap;
}

/* ==========================================================================
   SCROLL WRAPPER
   ========================================================================== */
.ifinsta-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   BASE TABLE
   ========================================================================== */
.ifinsta-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
  font-size: var(--ifinsta-table-cell-size);
  line-height: 1.4;
  color: var(--ifinsta-table-cell-color);
  background: var(--ifinsta-table-bg);
  font-family: var(--ifinsta-font-sans, inherit);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.ifinsta-table thead tr {
  background: var(--ifinsta-table-header-bg);
}

.ifinsta-table thead th {
  height: var(--ifinsta-table-row-height);
  padding: var(--ifinsta-table-cell-pad-y) var(--ifinsta-table-cell-pad-x);
  font-size: var(--ifinsta-table-header-size);
  font-weight: var(--ifinsta-table-header-weight);
  letter-spacing: var(--ifinsta-table-header-tracking);
  text-transform: var(--ifinsta-table-header-transform);
  color: var(--ifinsta-table-header-color);
  text-align: left;
  white-space: nowrap;
  border-bottom: var(--ifinsta-table-border-header);
  user-select: none;
}

.ifinsta-table thead th.col-num {
  text-align: right;
}

/* ─── Sort indicators ────────────────────────────────────────────────────── */
.ifinsta-table thead th.ifinsta-th-sortable {
  cursor: pointer;
  position: relative;
}

.ifinsta-table thead th.ifinsta-th-sortable::after {
  content: ' \2195';
  color: var(--ifinsta-table-sort-color);
  font-size: var(--ifinsta-text-xs, 11px);
  opacity: 0.5;
  transition: opacity var(--ifinsta-duration-fast, 100ms) var(--ifinsta-ease-smooth, ease);
}

.ifinsta-table thead th.ifinsta-th-sortable:hover::after {
  opacity: 1;
}

.ifinsta-table thead th.ifinsta-th-sortable:focus-visible {
  outline: var(--ifinsta-focus-ring-width, 2px) solid var(--ifinsta-table-sort-active);

}

.ifinsta-table thead th[aria-sort="ascending"]::after {
  content: ' \2191';
  color: var(--ifinsta-table-sort-active);
  opacity: 1;
}

.ifinsta-table thead th[aria-sort="descending"]::after {
  content: ' \2193';
  color: var(--ifinsta-table-sort-active);
  opacity: 1;
}

/* ==========================================================================
   DATA ROWS
   ========================================================================== */
.ifinsta-table tbody tr {
  height: var(--ifinsta-table-row-height);
  background: var(--ifinsta-table-bg);
  border-bottom: var(--ifinsta-table-border);
  transition: background var(--ifinsta-duration-fast, 100ms) var(--ifinsta-ease-smooth, ease);
}

@media (hover: hover) {
  .ifinsta-table tbody tr:hover {
    background: var(--ifinsta-table-bg-hover);
  }
}

.ifinsta-table tbody tr.is-selected,
.ifinsta-table tbody tr[aria-selected="true"] {
  background: var(--ifinsta-table-bg-selected);
}

.ifinsta-table tbody tr:last-child {
  border-bottom: none;
}

/* ==========================================================================
   CELLS
   ========================================================================== */
.ifinsta-table td {
  padding: var(--ifinsta-table-cell-pad-y) var(--ifinsta-table-cell-pad-x);
  font-size: var(--ifinsta-table-cell-size);
  font-weight: var(--ifinsta-table-cell-weight);
  color: var(--ifinsta-table-cell-color);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: var(--ifinsta-space-60, 240px);
}

/* Primary column */
.ifinsta-table td.col-primary,
.ifinsta-table td.ifinsta-col-primary {
  font-weight: var(--ifinsta-font-medium, 500);
  color: var(--ifinsta-table-cell-color);
}

/* Secondary / metadata */
.ifinsta-table td.col-secondary,
.ifinsta-table td.ifinsta-col-secondary {
  color: var(--ifinsta-table-cell-secondary);
  font-size: var(--ifinsta-text-body-sm, 13px);
}

/* Numeric — always right-align */
.ifinsta-table td.col-num,
.ifinsta-table td.ifinsta-col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Checkbox column */
.ifinsta-table .col-check,
.ifinsta-table .ifinsta-col-check {
  width: var(--ifinsta-space-10, 40px);
  padding-left: var(--ifinsta-space-3, 12px);
  padding-right: var(--ifinsta-space-1, 4px);
}

/* Actions column */
.ifinsta-table .col-actions,
.ifinsta-table .ifinsta-col-actions {
  width: var(--ifinsta-space-12, 48px);
  text-align: right;
  padding-right: var(--ifinsta-space-3, 12px);
}

/* Hidden on mobile — only at 768px breakpoint */
@media (max-width: 768px) {
  .ifinsta-table .col-hide-mobile,
  .ifinsta-table .ifinsta-col-hide-mobile {
    display: none;
  }
}

/* ==========================================================================
   ROW ACTION BUTTON
   ========================================================================== */
.ifinsta-table .ifinsta-row-action {
  min-width: var(--ifinsta-btn-height, 32px);
  min-height: var(--ifinsta-btn-height, 32px);
  border: none;
  background: transparent;
  border-radius: var(--ifinsta-radius-sm, 4px);
  color: var(--ifinsta-table-cell-secondary);
  cursor: pointer;
  font-size: var(--ifinsta-text-body, 14px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--ifinsta-duration-fast, 100ms) var(--ifinsta-ease-smooth, ease),
              background var(--ifinsta-duration-fast, 100ms) var(--ifinsta-ease-smooth, ease);
}

@media (hover: hover) {
  .ifinsta-table tbody tr:hover .ifinsta-row-action {
    opacity: 1;
  }
}

.ifinsta-table .ifinsta-row-action:hover {
  background: var(--ifinsta-table-bg-hover);
}

.ifinsta-table .ifinsta-row-action:focus-visible {
  opacity: 1;
  outline: var(--ifinsta-focus-ring-width, 2px) solid var(--ifinsta-table-sort-active);

}

/* ==========================================================================
   DENSITY MODIFIERS
   ========================================================================== */
.ifinsta-table.is-compact { --ifinsta-table-row-height: var(--ifinsta-table-row-height-compact); }
.ifinsta-table.is-relaxed { --ifinsta-table-row-height: var(--ifinsta-table-row-height-relaxed); }

.ifinsta-table.is-compact td,
.ifinsta-table.is-compact th { padding-top: var(--ifinsta-space-0-5, 2px); padding-bottom: var(--ifinsta-space-0-5, 2px); }
.ifinsta-table.is-relaxed td,
.ifinsta-table.is-relaxed th { padding-top: var(--ifinsta-space-2, 8px); padding-bottom: var(--ifinsta-space-2, 8px); }

/* ==========================================================================
   STRIPED VARIANT
   ========================================================================== */
.ifinsta-table.is-striped tbody tr:nth-child(even) {
  background: var(--ifinsta-table-bg-striped);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.ifinsta-table .ifinsta-table-empty td {
  padding: var(--ifinsta-space-12, 48px) var(--ifinsta-space-6, 24px);
}

.ifinsta-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ifinsta-space-2, 8px);
  text-align: center;
}

.ifinsta-table-empty-icon {
  font-size: var(--ifinsta-table-empty-icon-size);
  color: var(--ifinsta-table-empty-icon-color);
  line-height: 1;
}

.ifinsta-table-empty-title {
  font-size: var(--ifinsta-table-cell-size);
  font-weight: 500;
  color: var(--ifinsta-table-cell-color);
  margin: 0;
}

.ifinsta-table-empty-body {
  font-size: var(--ifinsta-text-body-sm, 13px);
  color: var(--ifinsta-table-cell-secondary);
  margin: 0;
}

/* ==========================================================================
   FOOTER / PAGINATION
   ========================================================================== */
.ifinsta-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ifinsta-space-2-5, 10px) var(--ifinsta-table-cell-pad-x);
  border-top: var(--ifinsta-table-border);
  background: var(--ifinsta-table-header-bg);
}

.ifinsta-table-count {
  font-size: var(--ifinsta-text-body-sm, 13px);
  color: var(--ifinsta-table-cell-secondary);
}

.ifinsta-table-pagination {
  display: flex;
  align-items: center;
  gap: var(--ifinsta-space-1, 4px);
}

.ifinsta-table-page-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ifinsta-btn-height, 32px);
  min-height: var(--ifinsta-btn-height, 32px);
  border-radius: var(--ifinsta-radius-sm, 4px);
  background: var(--ifinsta-table-sort-active);
  color: var(--ifinsta-white, #ffffff);
  font-size: var(--ifinsta-text-body-sm, 13px);
  font-weight: var(--ifinsta-font-semibold, 600);
}

.ifinsta-table-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ifinsta-btn-height, 32px);
  min-height: var(--ifinsta-btn-height, 32px);
  padding: 0 var(--ifinsta-space-1-5, 6px);
  border-radius: var(--ifinsta-radius-sm, 4px);
  border: var(--ifinsta-table-border);
  background: var(--ifinsta-table-bg);
  color: var(--ifinsta-table-cell-secondary);
  text-decoration: none;
  font-size: var(--ifinsta-text-body-sm, 13px);
  cursor: pointer;
}

.ifinsta-table-page-btn:hover {
  background: var(--ifinsta-table-bg-hover);
  color: var(--ifinsta-table-cell-color);
}

.ifinsta-table-page-btn:focus-visible {
  outline: var(--ifinsta-focus-ring-width, 2px) solid var(--ifinsta-table-sort-active);

}

.ifinsta-table-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   BADGES (status indicators in tables)
   ========================================================================== */
.ifinsta-table .ifinsta-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ifinsta-space-1, 4px);
  padding: var(--ifinsta-space-0-5, 2px) var(--ifinsta-space-2, 8px);
  border-radius: var(--ifinsta-radius-full, 9999px);
  font-size: var(--ifinsta-text-xs, 11px);
  font-weight: var(--ifinsta-font-semibold, 600);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ifinsta-table .ifinsta-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.ifinsta-table .ifinsta-badge--success { background: color-mix(in srgb, var(--ifinsta-success-500) 12%, transparent); color: var(--ifinsta-success-600, #16a34a); }
.ifinsta-table .ifinsta-badge--error   { background: color-mix(in srgb, var(--ifinsta-danger-500) 12%, transparent); color: var(--ifinsta-danger-600, #dc2626); }
.ifinsta-table .ifinsta-badge--warning { background: color-mix(in srgb, var(--ifinsta-warning-500) 30%, transparent); color: var(--ifinsta-warning-600, #d97706); }
.ifinsta-table .ifinsta-badge--neutral { background: var(--ifinsta-surface-2, #f1f5f9); color: var(--ifinsta-text-muted, #94a3b8); }

/* ==========================================================================
   LOADING SKELETON
   ========================================================================== */
.ifinsta-table.is-loading tbody tr {
  pointer-events: none;
}

.ifinsta-table.is-loading td {
  color: transparent;
  position: relative;
  overflow: hidden;
}

.ifinsta-table.is-loading td::after {
  content: '';
  position: absolute;
  inset: var(--ifinsta-space-2-5, 10px) 0;
  border-radius: var(--ifinsta-radius-sm, 4px);
  background: linear-gradient(
    90deg,
    var(--ifinsta-table-bg-striped) 25%,
    var(--ifinsta-table-bg-hover) 50%,
    var(--ifinsta-table-bg-striped) 75%
  );
  background-size: 200% 100%;
  animation: ifinsta-table-shimmer 1.4s var(--ifinsta-ease-smooth, ease) infinite;
}

@keyframes ifinsta-table-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   GRID VARIANT (dense Excel-like with vertical borders)
   ========================================================================== */
.ifinsta-table.is-grid td,
.ifinsta-table.is-grid th {
  border-right: 1px solid var(--ifinsta-table-grid);
}

.ifinsta-table.is-grid td:last-child,
.ifinsta-table.is-grid th:last-child {
  border-right: none;
}

.ifinsta-table.is-grid thead th {
  border-bottom: 2px solid var(--ifinsta-table-grid-strong);
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
.ifinsta-table tbody tr:focus-within {
  outline: var(--ifinsta-focus-ring-width, 2px) solid var(--ifinsta-table-sort-active);

}

.ifinsta-table .ifinsta-checkbox:focus-visible ~ .ifinsta-checkbox-face {
  outline: var(--ifinsta-focus-ring-width, 2px) solid var(--ifinsta-table-sort-active);

}

.ifinsta-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   REDUCED MOTION — suppress ALL animations/transitions
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ifinsta-table tbody tr,
  .ifinsta-table .ifinsta-row-action,
  .ifinsta-table-filter-chip,
  .ifinsta-table-filter-chip .ifinsta-chip-remove,
  .ifinsta-table thead th.ifinsta-th-sortable::after,
  .ifinsta-admin-table__row-actions,
  .ifinsta-table-page-btn {
    transition: none !important;
  }
  .ifinsta-table.is-loading td::after { animation: none; }
  .ifinsta-loading-spinner { animation: none; }
}

/* ==========================================================================
   HIGH CONTRAST — thicker borders, deeper colors
   ========================================================================== */
@media (prefers-contrast: high) {
  .ifinsta-table { border: 2px solid var(--ifinsta-text-primary); }
  .ifinsta-table thead th { border-bottom-width: 3px; }
  .ifinsta-table tbody tr { border-bottom-width: 2px; }
  .ifinsta-table-container { border-width: 2px; }
  .ifinsta-table-toolbar { border-bottom-width: 2px; }
  .ifinsta-table-footer { border-top-width: 2px; }
  .ifinsta-table-page-btn { border-width: 2px; }
  .ifinsta-table-filter-chip { border-width: 2px; }
  .ifinsta-table .ifinsta-row-action:focus-visible,
  .ifinsta-table-page-btn:focus-visible,
  .ifinsta-table-filter-chip:focus-visible {
    outline-width: 3px;
  }
  .ifinsta-table .ifinsta-badge { border: 1px solid currentColor; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .ifinsta-table-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ifinsta-space-2, 8px);
  }

  .ifinsta-table-toolbar-actions,
  .ifinsta-table-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .ifinsta-table-search {
    max-width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }

  .ifinsta-table-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--ifinsta-space-0-5, 2px);
  }

  .ifinsta-table-bulk-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ifinsta-space-1-5, 6px);
  }

  .ifinsta-table td,
  .ifinsta-table th {
    font-size: var(--ifinsta-text-body-sm, 13px);
    padding-left: var(--ifinsta-space-3, 12px);
    padding-right: var(--ifinsta-space-3, 12px);
  }

  .ifinsta-table-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ifinsta-space-2, 8px);
  }

  .ifinsta-table-pagination {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .ifinsta-table-toolbar {
    padding: var(--ifinsta-space-2, 8px) var(--ifinsta-space-3, 12px);
  }

  .ifinsta-table-title {
    font-size: var(--ifinsta-text-body-sm, 13px);
  }

  .ifinsta-table td,
  .ifinsta-table th {
    padding-left: var(--ifinsta-space-2, 8px);
    padding-right: var(--ifinsta-space-2, 8px);
    font-size: var(--ifinsta-text-caption, 12px);
  }

  .ifinsta-table td { max-width: 160px; }

  .ifinsta-table-footer {
    padding: var(--ifinsta-space-2, 8px) var(--ifinsta-space-3, 12px);
  }
}

@media (max-width: 360px) {
  .ifinsta-table td,
  .ifinsta-table th {
    padding-left: var(--ifinsta-space-1-5, 6px);
    padding-right: var(--ifinsta-space-1-5, 6px);
    font-size: var(--ifinsta-text-caption, 12px);
  }

  .ifinsta-table td { max-width: 120px; }

  .ifinsta-table .col-check,
  .ifinsta-table .ifinsta-col-check { width: var(--ifinsta-space-8, 32px); }

  .ifinsta-table-page-btn,
  .ifinsta-table-page-current {
    min-width: var(--ifinsta-space-8, 32px);
    min-height: var(--ifinsta-space-8, 32px);
    font-size: var(--ifinsta-text-caption, 12px);
  }
}

/* ==========================================================================
   LEGACY ALIASES — maps existing class names to .ifinsta-table tokens
   Existing markup (.ifinsta-admin-table, .cust-table, .dc-table, etc.)
   continues to work. New code must use .ifinsta-table directly.
   ========================================================================== */

/* ─── .ifinsta-admin-table → .ifinsta-table ──────────────────────────────── */
.ifinsta-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ifinsta-table-cell-size);
  color: var(--ifinsta-table-cell-color);
  background: var(--ifinsta-table-bg);
}

.ifinsta-admin-table thead th {
  text-align: left;
  font-size: var(--ifinsta-table-header-size);
  font-weight: var(--ifinsta-table-header-weight);
  letter-spacing: var(--ifinsta-table-header-tracking);
  text-transform: var(--ifinsta-table-header-transform);
  color: var(--ifinsta-table-header-color);
  background: var(--ifinsta-table-header-bg);
  padding: var(--ifinsta-table-cell-pad-y) var(--ifinsta-table-cell-pad-x);
  border-bottom: var(--ifinsta-table-border-header);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.ifinsta-admin-table tbody td {
  padding: var(--ifinsta-table-cell-pad-y) var(--ifinsta-table-cell-pad-x);
  border-bottom: var(--ifinsta-table-border);
  vertical-align: middle;
  height: var(--ifinsta-table-row-height);
}

.ifinsta-admin-table tbody tr:last-child td { border-bottom: none; }
.ifinsta-admin-table tbody tr:hover { background: var(--ifinsta-table-bg-hover); }
.ifinsta-admin-table tbody tr:hover .ifinsta-admin-table__row-actions { opacity: 1; }

.ifinsta-admin-table__cell--num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ifinsta-admin-table__cell--center { text-align: center; }
.ifinsta-admin-table__cell--strong { font-weight: 600; color: var(--ifinsta-table-cell-color); }
.ifinsta-admin-table__cell--muted { color: var(--ifinsta-table-cell-secondary); }
.ifinsta-admin-table__cell--truncate { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ifinsta-admin-table__row-actions {
  display: inline-flex;
  gap: var(--ifinsta-space-1, 4px);
  opacity: 0;
  transition: opacity var(--ifinsta-duration-fast, 100ms) var(--ifinsta-ease-smooth, ease);
  justify-content: flex-end;
}
.ifinsta-admin-table__row-actions--always-visible { opacity: 1; }

.ifinsta-admin-table__sort {
  background: none; border: none; padding: 0; margin: 0; font: inherit;
  color: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.ifinsta-admin-table__sort:hover { color: var(--ifinsta-table-cell-color); }
.ifinsta-admin-table__sort--active { color: var(--ifinsta-table-cell-color); }
.ifinsta-admin-table__sort-icon { opacity: 0.4; }
.ifinsta-admin-table__sort--active .ifinsta-admin-table__sort-icon { opacity: 1; color: var(--ifinsta-table-sort-active); }

.ifinsta-admin-table__name { display: flex; align-items: center; gap: var(--ifinsta-space-3, 12px); min-width: 0; }
.ifinsta-admin-table__name-icon {
  width: var(--ifinsta-space-8, 32px); height: var(--ifinsta-space-8, 32px); border-radius: var(--ifinsta-radius-sm, 4px);
  background: var(--ifinsta-surface-2); color: var(--ifinsta-text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: var(--ifinsta-table-border);
}
.ifinsta-admin-table__name-text { display: flex; flex-direction: column; min-width: 0; }
.ifinsta-admin-table__name-primary { font-weight: var(--ifinsta-font-semibold, 600); color: var(--ifinsta-table-cell-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifinsta-admin-table__name-secondary { font-size: var(--ifinsta-text-caption, 12px); color: var(--ifinsta-table-cell-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Admin pagination */
.ifinsta-admin-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ifinsta-space-3, 12px); padding: var(--ifinsta-space-2-5, 10px) var(--ifinsta-table-cell-pad-x);
  border-top: var(--ifinsta-table-border); font-size: var(--ifinsta-table-cell-size);
  color: var(--ifinsta-table-cell-secondary); flex-wrap: wrap;
}
.ifinsta-admin-pagination__pages { display: inline-flex; gap: var(--ifinsta-space-0-5, 2px); }
.ifinsta-admin-pagination__btn {
  min-width: var(--ifinsta-btn-height, 32px); height: var(--ifinsta-btn-height, 32px); padding: 0 var(--ifinsta-space-2, 8px);
  border: var(--ifinsta-table-border); border-radius: var(--ifinsta-radius-sm, 4px);
  background: var(--ifinsta-table-bg); color: var(--ifinsta-table-cell-secondary);
  font-size: var(--ifinsta-table-cell-size); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ifinsta-admin-pagination__btn:hover { background: var(--ifinsta-table-bg-hover); color: var(--ifinsta-table-cell-color); }
.ifinsta-admin-pagination__btn:focus-visible { outline: var(--ifinsta-focus-ring-width, 2px) solid var(--ifinsta-table-sort-active);  }
.ifinsta-admin-pagination__btn--active,
.ifinsta-admin-pagination__btn--active:hover {
  background: var(--ifinsta-table-sort-active); color: var(--ifinsta-white);
  border-color: var(--ifinsta-table-sort-active); font-weight: var(--ifinsta-font-semibold, 600);
}
.ifinsta-admin-pagination__btn:disabled,
.ifinsta-admin-pagination__btn:disabled:hover {
  opacity: 0.4; cursor: not-allowed; background: var(--ifinsta-table-bg); color: var(--ifinsta-table-cell-secondary);
}

/* ─── .cust-table → .ifinsta-table ───────────────────────────────────────── */
.cust-table-container {
  overflow-x: auto;
  border-radius: var(--ifinsta-radius-lg, 12px);
  border: var(--ifinsta-table-border);
}
.cust-table-container--flush { border: none; border-radius: 0; }

.cust-table {
  width: 100%; border-collapse: collapse; font-size: var(--ifinsta-table-cell-size);
}
.cust-table thead { background: var(--ifinsta-table-header-bg); }
.cust-table th {
  padding: var(--ifinsta-table-cell-pad-y) var(--ifinsta-table-cell-pad-x);
  text-align: left; font-weight: var(--ifinsta-table-header-weight);
  font-size: var(--ifinsta-table-header-size); text-transform: var(--ifinsta-table-header-transform);
  letter-spacing: var(--ifinsta-table-header-tracking); color: var(--ifinsta-table-header-color);
  border-bottom: var(--ifinsta-table-border-header); white-space: nowrap;
}
.cust-table td {
  padding: var(--ifinsta-table-cell-pad-y) var(--ifinsta-table-cell-pad-x);
  border-bottom: var(--ifinsta-table-border); vertical-align: middle;
}
.cust-table tbody tr { transition: background var(--ifinsta-duration-fast, 100ms) var(--ifinsta-ease-smooth, ease); }
.cust-table tbody tr:hover { background: var(--ifinsta-table-bg-hover); }
.cust-table tbody tr:last-child td { border-bottom: none; }
.cust-cell-primary { font-weight: var(--ifinsta-font-semibold, 600); color: var(--ifinsta-table-cell-color); }
.cust-cell-secondary { font-size: var(--ifinsta-text-body-sm, 13px); color: var(--ifinsta-table-cell-secondary); }
.cust-text-right { text-align: right; }

/* ─── .dc-table / .dc-dept-table / .dc-stories-table → .ifinsta-table ────── */
.dc-table-wrap { overflow-x: auto; }
.dc-table { width: 100%; border-collapse: collapse; font-size: var(--ifinsta-table-cell-size); }
.dc-table thead tr { background: var(--ifinsta-table-header-bg); }
.dc-table th {
  padding: var(--ifinsta-space-2-5, 10px) var(--ifinsta-space-3-5, 14px); text-align: left; font-size: var(--ifinsta-text-xs, 11px); font-weight: var(--ifinsta-font-bold, 700);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ifinsta-table-cell-secondary);
  border-bottom: var(--ifinsta-table-border); white-space: nowrap;
}
.dc-table td {
  padding: 0 var(--ifinsta-space-3-5, 14px); height: var(--ifinsta-table-row-height);
  vertical-align: middle; border-bottom: 1px solid var(--ifinsta-border-light);
}
.dc-table tbody tr:last-child td { border-bottom: none; }
.dc-table tbody tr:hover { background: var(--ifinsta-table-bg-hover); }

.dc-dept-table { width: 100%; border-collapse: collapse; font-size: var(--ifinsta-table-cell-size); }
.dc-dept-table th {
  padding: var(--ifinsta-space-2-5, 10px) var(--ifinsta-space-3-5, 14px); text-align: left; font-size: var(--ifinsta-text-xs, 11px); font-weight: var(--ifinsta-font-semibold, 600);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ifinsta-text-muted);
  border-bottom: var(--ifinsta-table-border); white-space: nowrap;
}
.dc-dept-table td { padding: 0 var(--ifinsta-space-3-5, 14px); height: var(--ifinsta-table-row-height); vertical-align: middle; border-bottom: var(--ifinsta-table-border); }
.dc-dept-table tbody tr:nth-child(even) td { background: var(--ifinsta-table-bg-striped); }
.dc-dept-table tbody tr:last-child td { border-bottom: none; }

.dc-stories-table { width: 100%; border-collapse: collapse; font-size: var(--ifinsta-table-cell-size); }
.dc-stories-table th {
  padding: var(--ifinsta-space-2-5, 10px) var(--ifinsta-space-3-5, 14px); text-align: left; font-size: var(--ifinsta-text-xs, 11px); font-weight: var(--ifinsta-font-semibold, 600);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ifinsta-text-muted);
  border-bottom: var(--ifinsta-table-border); white-space: nowrap;
}
.dc-stories-table td { padding: 0 var(--ifinsta-space-3-5, 14px); height: var(--ifinsta-table-row-height-relaxed, 56px); vertical-align: middle; border-bottom: var(--ifinsta-table-border); }
.dc-stories-table tbody tr:last-child td { border-bottom: none; }
.dc-stories-table tbody tr:hover { background: var(--ifinsta-table-bg-hover); }
.dc-stories-table tbody tr:hover .dc-row-btn { opacity: 1; }

/* ─── .ifinsta-assistant__md-table — compact chat inline ─────────────────── */
.ifinsta-assistant__md-table {
  width: 100%; border-collapse: collapse; font-size: 0.8571rem; line-height: 1.4;
}
.ifinsta-assistant__md-table thead th {
  padding: 4px 10px; text-align: left; font-weight: 600;
  font-size: 0.7857rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--ast-text-secondary, var(--ifinsta-text-muted));
  background: none; border-bottom: 1px solid var(--ast-code-border, var(--ifinsta-border));
  white-space: nowrap;
}
.ifinsta-assistant__md-table tbody td {
  padding: 4px 10px;
  border-bottom: 1px solid var(--ifinsta-border); vertical-align: middle;
}
.ifinsta-assistant__md-table tbody tr:last-child td { border-bottom: none; }
.ifinsta-assistant__md-table tbody tr:hover { background: none; }

/* ─── .nd-table-container → .ifinsta-table ───────────────────────────────── */
.nd-table-container {
  overflow-x: auto;
  border-radius: var(--ifinsta-table-radius);
  border: var(--ifinsta-table-border);
}

/* ─── .ifinsta-data-table wrapper / toolbar / footer (kept for compatibility) ── */
.ifinsta-table-wrapper {
  background: var(--ifinsta-table-bg);
  border: var(--ifinsta-table-border);
  overflow: hidden;
}
.ifinsta-table-header,
.ifinsta-toolbar,
.ifinsta-info-bar,
.ifinsta-table-loading {
  padding: 10px var(--ifinsta-table-cell-pad-x);
}
.ifinsta-table-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; border-bottom: var(--ifinsta-table-border);
  background: var(--ifinsta-table-header-bg);
}
.ifinsta-header-left, .ifinsta-title-wrap { min-width: 0; }
.ifinsta-title-wrap { display: flex; align-items: center; gap: var(--ifinsta-space-1-5, 6px); flex-wrap: wrap; }
.ifinsta-record-count {
  display: inline-flex; align-items: center; padding: var(--ifinsta-space-0-5, 2px) var(--ifinsta-space-1-5, 6px);
  border-radius: var(--ifinsta-radius-full, 999px); background: var(--ifinsta-table-bg-striped);
  color: var(--ifinsta-table-cell-secondary); font-size: var(--ifinsta-text-xs, 11px); font-weight: var(--ifinsta-font-medium, 500);
}
.ifinsta-header-actions, .ifinsta-toolbar { display: flex; align-items: center; gap: var(--ifinsta-space-2, 8px); flex-wrap: wrap; }
.ifinsta-toolbar { background: var(--ifinsta-table-header-bg); border-bottom: var(--ifinsta-table-border); }
.ifinsta-search-box { position: relative; min-width: 180px; max-width: 280px; flex: 1 1 auto; }
.ifinsta-search-icon { position: absolute; left: var(--ifinsta-space-2, 8px); top: 50%; transform: translateY(-50%); width: var(--ifinsta-space-3-5, 14px); height: var(--ifinsta-space-3-5, 14px); color: var(--ifinsta-table-cell-secondary); pointer-events: none; }
.ifinsta-search-input, .ifinsta-select { min-height: var(--ifinsta-input-height, 32px); border-radius: var(--ifinsta-radius-sm, 4px); font: inherit; font-size: var(--ifinsta-text-body-sm, 13px); border: var(--ifinsta-table-border); background: var(--ifinsta-table-bg); color: var(--ifinsta-table-cell-color); }
.ifinsta-search-input { width: 100%; padding: var(--ifinsta-space-0-5, 2px) var(--ifinsta-space-2, 8px) var(--ifinsta-space-0-5, 2px) var(--ifinsta-space-7, 28px); }
.ifinsta-search-input:focus, .ifinsta-select:focus { outline: none; border-color: var(--ifinsta-table-sort-active); }
.ifinsta-select { padding: 0 var(--ifinsta-space-6, 24px) 0 var(--ifinsta-space-2, 8px); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; min-width: 80px; max-width: 140px; }
.ifinsta-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ifinsta-space-1, 4px); min-height: var(--ifinsta-btn-height, 32px); padding: 0 var(--ifinsta-space-2-5, 10px); cursor: pointer; border: 1px solid transparent; border-radius: var(--ifinsta-radius-sm, 4px); text-decoration: none; white-space: nowrap; font-size: var(--ifinsta-text-body-sm, 13px); }
.ifinsta-btn-ghost { background: var(--ifinsta-table-bg); border-color: var(--ifinsta-border); color: var(--ifinsta-table-cell-secondary); }
.ifinsta-btn-primary { background: var(--ifinsta-table-sort-active); border-color: var(--ifinsta-table-sort-active); color: var(--ifinsta-white); }

/* Info bar / loading / footer */
.ifinsta-info-bar, .ifinsta-table-loading, .ifinsta-table-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ifinsta-space-2, 8px); flex-wrap: wrap;
}
.ifinsta-info-bar, .ifinsta-table-loading {
  background: var(--ifinsta-table-bg-striped);
  border-bottom: var(--ifinsta-table-border);
}
.ifinsta-info-text, .ifinsta-page-info { color: var(--ifinsta-table-cell-secondary); font-size: var(--ifinsta-text-caption, 12px); }
.ifinsta-loading-spinner {
  width: var(--ifinsta-space-3, 12px); height: var(--ifinsta-space-3, 12px); border-radius: var(--ifinsta-radius-full, 9999px);
  border: 2px solid var(--ifinsta-table-grid); border-top-color: var(--ifinsta-table-sort-active);
  animation: ifinsta-dt-spin 0.8s linear infinite;
}
@keyframes ifinsta-dt-spin { to { transform: rotate(360deg); } }

/* Viewport */
.ifinsta-table-viewport { overflow: auto; max-height: 540px; width: 100%; background: var(--ifinsta-table-bg); }
.ifinsta-table-shell { position: relative; }

/* Column visibility */
.ifinsta-col-hidden { display: none !important; }
.ifinsta-col-nowrap { white-space: nowrap !important; }
.ifinsta-col-wrap { white-space: normal !important; }
.ifinsta-col-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1px; }
.ifinsta-col-mono { font-family: var(--ifinsta-font-mono, monospace); font-variant-numeric: tabular-nums; }

/* Value formats */
.ifinsta-value { display: inline-flex; align-items: baseline; gap: 1px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ifinsta-currency, .ifinsta-date, .ifinsta-phone { white-space: nowrap; }
.ifinsta-date, .ifinsta-phone { display: inline-block; font-variant-numeric: tabular-nums; }
.ifinsta-phone { font-family: var(--ifinsta-font-mono, monospace); }

/* Avatar cell */
.ifinsta-avatar-cell { display: flex; align-items: center; gap: var(--ifinsta-space-1-5, 6px); min-width: 0; }
.ifinsta-avatar { width: var(--ifinsta-space-6, 24px); height: var(--ifinsta-space-6, 24px); border-radius: var(--ifinsta-radius-full, 9999px); display: inline-flex; align-items: center; justify-content: center; font-size: var(--ifinsta-text-xs, 11px); font-weight: var(--ifinsta-font-bold, 700); flex-shrink: 0; }
.ifinsta-avatar-text { display: flex; flex-direction: column; min-width: 0; }
.ifinsta-avatar-name { font-weight: var(--ifinsta-font-semibold, 600); }
.ifinsta-avatar-subtext { color: var(--ifinsta-table-cell-secondary); font-size: var(--ifinsta-text-xs, 11px); }

/* Badge / tag (global, not table-scoped) */
.ifinsta-badge, .ifinsta-tag { display: inline-flex; align-items: center; gap: var(--ifinsta-space-1, 4px); white-space: nowrap; border-radius: var(--ifinsta-radius-full, 9999px); font-size: var(--ifinsta-text-xs, 11px); font-weight: var(--ifinsta-font-semibold, 600); }
.ifinsta-badge { padding: var(--ifinsta-space-0-5, 2px) var(--ifinsta-space-1-5, 6px); }
.ifinsta-badge .ifinsta-status-dot { width: 5px; height: 5px; border-radius: var(--ifinsta-radius-full, 9999px); background: currentColor; }
.ifinsta-badge-active, .ifinsta-badge-success { background: var(--ifinsta-success-50, #f0fdf4); color: var(--ifinsta-success-600, #16a34a); }
.ifinsta-badge-pending, .ifinsta-badge-warning { background: var(--ifinsta-warning-50, #fffbeb); color: var(--ifinsta-warning-600, #d97706); }
.ifinsta-badge-blocked, .ifinsta-badge-danger { background: var(--ifinsta-danger-50, #fef2f2); color: var(--ifinsta-danger-600, #dc2626); }
.ifinsta-badge-neutral, .ifinsta-badge-inactive, .ifinsta-badge-info, .ifinsta-badge-primary { background: var(--ifinsta-bg-tertiary, #e2e8f0); color: var(--ifinsta-text-secondary, #475569); }
.ifinsta-tags { display: flex; align-items: center; gap: var(--ifinsta-space-1, 4px); flex-wrap: wrap; }
.ifinsta-tag { padding: var(--ifinsta-space-0-5, 2px) var(--ifinsta-space-1-5, 5px); background: var(--ifinsta-bg-tertiary, #e2e8f0); color: var(--ifinsta-text-secondary, #475569); }

/* Priority */
.ifinsta-priority { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ifinsta-priority-pip { display: inline-flex; align-items: flex-end; gap: 1px; }
.ifinsta-pip { display: inline-block; width: 3px; border-radius: 999px; background: currentColor; }

/* Progress */
.ifinsta-progress-wrap { min-width: var(--ifinsta-space-20, 80px); }
.ifinsta-progress-row { display: flex; align-items: center; gap: var(--ifinsta-space-1, 4px); }
.ifinsta-progress-track { flex: 1 1 auto; height: 5px; border-radius: var(--ifinsta-radius-full, 9999px); background: var(--ifinsta-bg-tertiary, #e2e8f0); overflow: hidden; }
.ifinsta-progress-fill { height: 100%; border-radius: inherit; background: var(--ifinsta-table-sort-active); }
.ifinsta-fill-high { background: var(--ifinsta-success-600, #16a34a); }
.ifinsta-fill-mid { background: var(--ifinsta-warning-600, #d97706); }
.ifinsta-fill-low { background: var(--ifinsta-danger-600, #dc2626); }
.ifinsta-progress-pct { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Quantity colors */
.ifinsta-qty-positive { color: var(--ifinsta-success-600, #16a34a); }
.ifinsta-qty-negative { color: var(--ifinsta-danger-600, #dc2626); }

/* Checkbox */
.ifinsta-checkbox-cell { width: var(--ifinsta-space-8, 32px); text-align: center; padding: 0 !important; }
.ifinsta-checkbox-wrap { position: relative; width: var(--ifinsta-space-3-5, 14px); height: var(--ifinsta-space-3-5, 14px); margin: 0 auto; }
.ifinsta-checkbox { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ifinsta-checkbox-face { display: flex; align-items: center; justify-content: center; width: var(--ifinsta-space-3-5, 14px); height: var(--ifinsta-space-3-5, 14px); border: 1.5px solid var(--ifinsta-border); border-radius: var(--ifinsta-radius-sm, 4px); background: var(--ifinsta-white); }
.ifinsta-checkbox-face svg { display: none; color: var(--ifinsta-white); }
.ifinsta-checkbox:checked ~ .ifinsta-checkbox-face { background: var(--ifinsta-table-sort-active); border-color: var(--ifinsta-table-sort-active); }
.ifinsta-checkbox:checked ~ .ifinsta-checkbox-face svg { display: block; }

/* Actions column */
.ifinsta-actions-col { width: var(--ifinsta-space-18, 72px); text-align: center; white-space: nowrap; }
.ifinsta-row-actions { display: inline-flex; align-items: center; justify-content: center; gap: var(--ifinsta-space-0-5, 2px); }
.ifinsta-action-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ifinsta-btn-height, 32px); min-height: var(--ifinsta-btn-height, 32px); border-radius: var(--ifinsta-radius-sm, 4px); border: 1px solid transparent; color: var(--ifinsta-table-cell-secondary); background: transparent; text-decoration: none; cursor: pointer; }
.ifinsta-action-btn:hover { border-color: var(--ifinsta-table-grid); background: var(--ifinsta-bg-tertiary); color: var(--ifinsta-table-sort-active); }
.ifinsta-action-btn:focus-visible { outline: var(--ifinsta-focus-ring-width, 2px) solid var(--ifinsta-table-sort-active);  }
.ifinsta-action-btn.ifinsta-del:hover { color: var(--ifinsta-danger-600); }

/* Empty state */
.ifinsta-empty-state { padding: var(--ifinsta-space-6, 24px) var(--ifinsta-space-3, 12px); text-align: center; }
.ifinsta-table-body .ifinsta-empty-state { display: table-cell; vertical-align: middle; }
.ifinsta-empty-title { font-size: var(--ifinsta-text-body, 14px); font-weight: var(--ifinsta-font-semibold, 600); color: var(--ifinsta-table-cell-color); }
.ifinsta-empty-text { margin: var(--ifinsta-space-1, 4px) 0 0; color: var(--ifinsta-table-cell-secondary); }

/* Footer */
.ifinsta-table-footer { background: var(--ifinsta-table-bg-striped); border-top: var(--ifinsta-table-border); }
.ifinsta-footer-left, .ifinsta-pagination { display: flex; align-items: center; gap: var(--ifinsta-space-1, 4px); }
.ifinsta-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ifinsta-btn-height, 32px); min-height: var(--ifinsta-btn-height, 32px); padding: 0 var(--ifinsta-space-1-5, 6px); border-radius: var(--ifinsta-radius-sm, 4px); border: var(--ifinsta-table-border); background: var(--ifinsta-table-bg); color: var(--ifinsta-table-cell-secondary); text-decoration: none; font-size: var(--ifinsta-text-body-sm, 13px); }
.ifinsta-page-btn:hover { background: var(--ifinsta-table-bg-hover); color: var(--ifinsta-table-cell-color); }
.ifinsta-page-btn:focus-visible { outline: var(--ifinsta-focus-ring-width, 2px) solid var(--ifinsta-table-sort-active);  }
.ifinsta-page-btn-active { background: var(--ifinsta-table-sort-active); border-color: var(--ifinsta-table-sort-active); color: var(--ifinsta-white); }

/* Density toggle */
.ifinsta-density-toggle { display: inline-flex; align-items: center; gap: var(--ifinsta-space-0-5, 2px); padding: var(--ifinsta-space-0-5, 2px); border: var(--ifinsta-table-border); border-radius: var(--ifinsta-radius-sm, 4px); background: var(--ifinsta-table-bg); }
.ifinsta-density-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ifinsta-btn-height, 32px); min-height: var(--ifinsta-btn-height, 32px); border: 0; border-radius: var(--ifinsta-radius-sm, 4px); background: transparent; color: var(--ifinsta-table-cell-secondary); cursor: pointer; }
.ifinsta-density-btn:focus-visible { outline: var(--ifinsta-focus-ring-width, 2px) solid var(--ifinsta-table-sort-active);  }
.ifinsta-density-btn.ifinsta-active { background: var(--ifinsta-primary-alpha-08); color: var(--ifinsta-table-sort-active); }

/* Sheet variant */
.ifinsta-table-wrapper--sheet { border-color: var(--ifinsta-table-grid-strong); background: var(--ifinsta-table-bg); }
.ifinsta-table-wrapper--sheet .ifinsta-th,
.ifinsta-table-wrapper--sheet .ifinsta-td { border-right: 1px solid var(--ifinsta-table-grid); }

/* ─── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ifinsta-toolbar { gap: var(--ifinsta-space-2, 8px); }
  .ifinsta-search-box { flex: 1 1 200px; min-width: 160px; }
}
@media (max-width: 768px) {
  .ifinsta-table-header { flex-direction: column; align-items: stretch; }
  .ifinsta-toolbar { flex-wrap: wrap; overflow-x: auto; gap: 6px; padding: 8px 10px; }
  .ifinsta-search-box { flex: 1 1 100%; min-width: 0; max-width: none; order: -1; }
  .ifinsta-search-input { min-height: 32px; }
  .ifinsta-select { flex: 1 1 auto; max-width: none; min-width: 0; min-height: 32px; }
  .ifinsta-table-footer { flex-direction: column; align-items: stretch; }
  .ifinsta-footer-left, .ifinsta-pagination { justify-content: center; }
}
@media (max-width: 480px) {
  .ifinsta-toolbar { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; }
  .ifinsta-search-box { flex: 0 0 auto; width: 100%; }
  .ifinsta-search-input { min-height: 36px; font-size: 1rem; }
  .ifinsta-select { width: 100%; min-height: 36px; font-size: 1rem; }
  .ifinsta-table-viewport { max-height: none; }
  .ifinsta-table-wrapper { border-radius: 0; border-left: 0; border-right: 0; }
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
[data-theme="dark"] {
  --ifinsta-table-bg:               var(--ifinsta-bg, #0f172a);
  --ifinsta-table-bg-hover:         color-mix(in srgb, var(--ifinsta-primary) 6%, transparent);
  --ifinsta-table-bg-selected:      color-mix(in srgb, var(--ifinsta-primary) 12%, transparent);
  --ifinsta-table-bg-striped:       var(--ifinsta-bg-secondary, #1e293b);
  --ifinsta-table-header-bg:        var(--ifinsta-surface-1, #1e293b);
  --ifinsta-table-header-color:     var(--ifinsta-text-secondary, #94a3b8);
  --ifinsta-table-cell-color:       var(--ifinsta-text-primary, #f1f5f9);
  --ifinsta-table-cell-secondary:   var(--ifinsta-text-muted, #64748b);
  --ifinsta-table-sort-color:       var(--ifinsta-text-muted, #64748b);
  --ifinsta-table-empty-icon-color: var(--ifinsta-text-muted, #64748b);
}