/* ============================================================
   TRANSITIONAL: restyle the remaining FluentUI components
   (FluentDataGrid, FluentPaginator, FluentProgressRing) to the
   Just.UI design tokens. Dies together with the FluentUI package
   once a Just.UI data table with server pagination exists.
   ============================================================ */

/* FluentUI's FAST design tokens live as CSS custom properties on the
   components; per-element assignment outranks the token defaults.
   Without this the web components fall back to Segoe UI. */
fluent-button, fluent-data-grid, fluent-paginator, fluent-select,
fluent-checkbox, fluent-number-field, fluent-search, fluent-text-field,
fluent-menu, fluent-tooltip {
    --body-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --accent-fill-rest: #5e6ad2;
    --accent-fill-hover: #4f5abf;
    --accent-fill-active: #4f5abf;
    --accent-foreground-rest: #5e6ad2;
    --accent-foreground-hover: #4f5abf;
    --neutral-foreground-rest: #1c1d21;
    --control-corner-radius: 7;
}

/* DataGrid (renders as table.fluent-data-grid) — align with .table */
table.fluent-data-grid {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-family: var(--font);
    font-size: 13.5px;
    color: var(--text);
}
table.fluent-data-grid th.column-header {
    text-align: left;
    border-bottom: 1px solid var(--border);
    /* !important: the grid writes inline height/min-height on th */
    height: auto !important;
    min-height: 0 !important;
    padding: 9px 14px !important;
    background: var(--surface);
}
/* sortable column headers render a stealth fluent-button — make it look
   like a plain .table th label */
th.column-header fluent-button::part(control),
th.column-header fluent-button {
    background: transparent;
    font: 600 11px var(--font);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    justify-content: flex-start;
    padding: 0;
}
/* non-sortable header cells (plain text) */
table.fluent-data-grid th.column-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
table.fluent-data-grid td {
    font-family: var(--font);
    font-size: 13.5px;
    border-bottom: 1px solid var(--border-soft);
    padding: 10px 14px !important;
    height: auto !important;
    vertical-align: middle;
}
table.fluent-data-grid tbody tr:last-child td { border-bottom: 0; }
table.fluent-data-grid tbody tr:hover td { background: #fafafb; }
table.fluent-data-grid .empty-content-cell {
    color: var(--text-muted);
    font-size: 13px;
    padding: 28px 0;
    text-align: center;
}

/* Paginator */
.fluent-paginator, fluent-paginator {
    font-family: var(--font);
    font-size: 12.5px;
    color: var(--text-secondary);
}
.fluent-paginator .pagination-text { color: var(--text-secondary); }

/* Progress ring accent */
fluent-progress-ring::part(determinate),
fluent-progress-ring::part(indeterminate-indicator-1) {
    stroke: #5e6ad2;
}