/* ==========================================================================
   Table standard

   One anatomy for every table in the system. ifinsta-data-table.css owns the behaviour
   (sorting, column menu, paging); this sheet, loaded right after it, owns how every table LOOKS,
   including the older variants that still ship their own rules.

   Anatomy
   - A hairline-bordered shell with an 8px corner. Rows are divided by hairlines, never zebra.
   - Header: a quiet neutral tint, 12px semibold, sentence case. Sort controls appear on hover or
     once a column is sorted, so a resting table is not covered in arrows.
   - Rows: 36px compact (the default), 44px standard, 52px comfortable. 13px text.
   - Numbers sit right aligned in tabular figures. main.js marks a column numeric when every value in it reads as one.
   - Totals live in a tinted footer row.
   - On a phone the table scrolls inside its shell and its first column stays in view.
   See docs/table-standard.md.
   ========================================================================== */

:root {
  --ifinsta-dt-row-height: 36px;
  --ifinsta-dt-font-size: 13px;
  --ifinsta-dt-cell-x: 12px;
  --ifinsta-dt-cell-y: 6px;
  --ifinsta-dt-head-bg: color-mix(in srgb, var(--ifinsta-text-primary, #171717) 4%, var(--ifinsta-dt-surface, #ffffff));
  --ifinsta-dt-hover: color-mix(in srgb, var(--ifinsta-text-primary, #171717) 3%, var(--ifinsta-dt-surface, #ffffff));
  --ifinsta-dt-divider-strong: var(--ifinsta-border, #d9d9d9);
}

.ifinsta-density-compact { --ifinsta-dt-row-height: 36px; --ifinsta-dt-cell-y: 6px; }
.ifinsta-density-standard { --ifinsta-dt-row-height: 44px; --ifinsta-dt-cell-y: 10px; }
.ifinsta-density-comfortable { --ifinsta-dt-row-height: 52px; --ifinsta-dt-cell-y: 14px; }

/* ---- Shell -------------------------------------------------------------------------------------------- */
.ifinsta-table-shell {
  border: 1px solid var(--ifinsta-dt-divider-strong);
  border-radius: 8px;
  overflow: hidden;
}
.ifinsta-table-viewport, .ifinsta-table-wrap, .ifinsta-table-responsive { border-radius: inherit; }

/* ---- Header --------------------------------------------------------------------------------------------- */
.ifinsta-table th, .ifinsta-th {
  background: var(--ifinsta-dt-head-bg);
  color: var(--ifinsta-text-secondary, #404040);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  border-bottom: 1px solid var(--ifinsta-dt-divider-strong);
}
.ifinsta-table th { height: 38px; }

/* Sort affordances stay out of the way until they are useful. */
.ifinsta-th .ifinsta-sort-icon, .ifinsta-th .ifinsta-sort-menu-trigger, .ifinsta-th .ifinsta-reorder-grip { opacity: 0; transition: opacity 0.12s ease; }
.ifinsta-th:hover .ifinsta-sort-icon, .ifinsta-th:hover .ifinsta-sort-menu-trigger, .ifinsta-th:hover .ifinsta-reorder-grip,
.ifinsta-th:focus-within .ifinsta-sort-icon, .ifinsta-th:focus-within .ifinsta-sort-menu-trigger,
.ifinsta-th[aria-sort="ascending"] .ifinsta-sort-icon, .ifinsta-th[aria-sort="descending"] .ifinsta-sort-icon,
.ifinsta-th .ifinsta-sort-icon[data-sort="asc"], .ifinsta-th .ifinsta-sort-icon[data-sort="desc"] { opacity: 1; }
@media (hover: none) { .ifinsta-th .ifinsta-sort-icon { opacity: 1; } .ifinsta-th .ifinsta-sort-menu-trigger { display: none; } }

/* ---- Rows ---------------------------------------------------------------------------------------------------- */
.ifinsta-table td, .ifinsta-td { border-bottom: 1px solid var(--ifinsta-dt-divider); }
.ifinsta-table tbody tr:last-child td { border-bottom: 0; }
.ifinsta-table.is-striped tbody tr:nth-child(even of :not(.ifinsta-hidden):not(.ifinsta-empty-row):not(.ifinsta-filter-empty-row)),
.ifinsta-table.ifinsta-table--striped tbody tr:nth-child(even of :not(.ifinsta-hidden):not(.ifinsta-empty-row):not(.ifinsta-filter-empty-row)) { background: transparent; }
.ifinsta-table tbody tr:hover { background: var(--ifinsta-dt-hover); }

/* ---- Numbers and totals ------------------------------------------------------------------------------------------ */
.ifinsta-th.ifinsta-text-right, .ifinsta-td.ifinsta-text-right { text-align: right; font-variant-numeric: tabular-nums; }
.ifinsta-table tfoot td, .ifinsta-table tfoot th {
  height: 40px;
  background: var(--ifinsta-dt-head-bg);
  border-top: 1px solid var(--ifinsta-dt-divider-strong);
  border-bottom: 0;
  font-weight: 600;
  color: var(--ifinsta-dt-text);
}

/* ---- A phone keeps the table whole and keeps the first column in view ---------------------------------------------- */
@media (max-width: 760px) {
  .ifinsta-table-wrapper { padding-inline: 0; }
  .ifinsta-table-shell { border-inline: 0; border-radius: 0; }
  .ifinsta-table th:first-child:not(.ifinsta-table__checkbox):not(.ifinsta-table__actions),
  .ifinsta-table td:first-child:not(.ifinsta-table__checkbox):not(.ifinsta-table__actions) {
    position: sticky; left: 0; z-index: 2;
    background: var(--ifinsta-dt-surface);
    border-right: 1px solid var(--ifinsta-dt-divider);
  }
  .ifinsta-table th:first-child:not(.ifinsta-table__checkbox):not(.ifinsta-table__actions) { z-index: 4; background: var(--ifinsta-dt-head-bg); }
  .ifinsta-table tbody tr:hover td:first-child { background: var(--ifinsta-dt-hover); }
}

/* ---- Older variants speak the same language ------------------------------------------------------------------------ */
body .ifinsta-capybara-table, body .ifinsta-admin-table, body .ifinsta-ticket-table, body .mydoc-fields-table,
body .ifinsta-mk-legal__body table, body .ifinsta-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.4;
}
body .ifinsta-capybara-table thead, body .ifinsta-admin-table thead { border-bottom: 0; }
body .ifinsta-capybara-table th, body .ifinsta-admin-table th, body .ifinsta-ticket-table th, body .mydoc-fields-table th,
body .ifinsta-mk-legal__body th, body .ifinsta-prose th {
  height: 38px;
  padding: 6px 12px;
  background: var(--ifinsta-dt-head-bg);
  border-bottom: 1px solid var(--ifinsta-dt-divider-strong);
  color: var(--ifinsta-text-secondary, #404040);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}
body .ifinsta-capybara-table td, body .ifinsta-admin-table td, body .ifinsta-ticket-table td, body .mydoc-fields-table td,
body .ifinsta-mk-legal__body td, body .ifinsta-prose td {
  height: 36px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--ifinsta-dt-divider);
  color: var(--ifinsta-dt-text);
  vertical-align: middle;
}
body .ifinsta-capybara-table tbody tr:last-child td, body .ifinsta-admin-table tbody tr:last-child td,
body .ifinsta-ticket-table tbody tr:last-child td { border-bottom: 0; }
body .ifinsta-capybara-table tbody tr:hover, body .ifinsta-admin-table tbody tr:hover { background: var(--ifinsta-dt-hover); }