/* Shared data-table chrome -- the canonical sortable table every migrated
   tab/list table shares (project Invoices now; Payment Requests, Adjustments,
   Documents next). Source: ledgerwise-app organisms/gc/gc-invoice-table.tsx +
   organisms/invoice-table-shared.tsx (compiled Tailwind values, 2026-07-12):
   header row bg-table-header-bg border-b, th px-4 py-3 text-sm font-medium
   with hover-revealed 14px sort chevrons; rows border-b hover accent/50;
   cells px-4 py-3 text-sm; 18px navy-accent checkboxes; footer pager on
   table-header-bg (rows-per-page select h-8, 32px nav arrows, 18px icons).
   Display-agnostic: these classes carry chrome only -- column layout
   (widths / flex) stays with the page that owns the table. */

/* Wrapper inside a Card: rows fill edge-to-edge. */
.lw-table {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    font-size: 14px;
}

/* ---- Header ---- */

.lw-table-head {
    display: flex;
    align-items: stretch;
    background: var(--lw-bg-table-header);
    border-bottom: 1px solid var(--lw-border);
}

.lw-table-th {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    font-family: var(--lw-font-family);
    font-size: 14px;
    font-weight: var(--lw-font-medium);
    color: var(--lw-gray-graphite);
    text-align: left;
}

/* Sortable header: label + chevron move to foreground on hover; the chevron
   is invisible until hover (opacity 60%) and locks on while active. */
.lw-table-th--sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.lw-table-th--sortable:hover {
    color: var(--lw-text-primary);
}

.lw-table-th .lw-table-sort-icon {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.lw-table-th--sortable:hover .lw-table-sort-icon {
    opacity: 0.6;
}

.lw-table-th--active {
    color: var(--lw-text-primary);
}

.lw-table-th--active .lw-table-sort-icon {
    opacity: 1;
}

/* Sort icon = reference size-3.5 (14px). MudIcon needs out-specifying. */
.lw-table-th .lw-table-sort-icon.mud-icon-root {
    font-size: 14px;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ---- Rows / cells ---- */

.lw-table-tr {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--lw-border);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

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

/* Reference row hover: bg-accent/50. Encoded as the relationship. */
.lw-table-tr:hover {
    background: color-mix(in srgb, var(--lw-accent) 50%, transparent);
}

.lw-table-td {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--lw-text-primary);
}

/* Secondary cells (dates etc.): content-secondary. */
.lw-table-td--muted {
    color: var(--lw-gray-graphite);
}

/* ---- Select checkbox (native, 18px, navy accent) ---- */

.lw-table-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--lw-primary-dark);
}

/* ---- Row kebab trigger (invoice-table-shared.tsx RowActionMenu):
   p-1, 18px icon, content-secondary to foreground. ---- */

.lw-table-kebab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 0;
    background: none;
    color: var(--lw-gray-graphite);
    cursor: pointer;
    transition: color 0.15s ease;
}

.lw-table-kebab:hover {
    color: var(--lw-text-primary);
}

.lw-table-kebab .mud-icon-root {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* ---- Pagination footer (inside the table card) ---- */

.lw-table-pager {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    padding: 10px 16px;
    background: var(--lw-bg-table-header);
    border-top: 1px solid var(--lw-border);
}

.lw-table-pager-rows {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lw-table-pager-label {
    font-size: 14px;
    line-height: 22px;
    color: var(--lw-gray-graphite);
}

.lw-table-pager-select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-control);
    background: var(--lw-white);
    font-family: var(--lw-font-family);
    font-size: 14px;
    line-height: 22px;
    color: var(--lw-text-primary);
    outline: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lw-table-pager-select:hover {
    background: var(--lw-accent);
}

.lw-table-pager-select:focus-visible {
    border-color: var(--lw-primary-blue);
}

.lw-table-pager-range {
    font-size: 14px;
    line-height: 22px;
    color: var(--lw-text-primary);
}

.lw-table-pager-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lw-table-pager-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--lw-gray-graphite);
    cursor: pointer;
    transition: color 0.15s ease;
}

.lw-table-pager-btn:hover:not(:disabled) {
    color: var(--lw-text-primary);
}

.lw-table-pager-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.lw-table-pager-btn .mud-icon-root {
    font-size: 18px;
    width: 18px;
    height: 18px;
}