/* ============================================================================
   rf-grid.css — the one grid look for the whole product.

   The theme's "Excel-like table" block is bound to the id #TableGrid, which is
   SEPL's one-grid-per-page convention. A screen here can carry several grids,
   so the same look is a class instead. Add .rf-grid to any <table> — plain
   Bootstrap or DataTables — and it gets the bordered grid, the navy header and
   the chip palette below.

   Every colour is derived from the brand navy #102a83 so nothing on a grid can
   drift off-theme. Semantic states (ok / warn / danger) are held at low
   saturation with a real border and dark text, rather than Bootstrap's pale
   *-subtle fills, which wash out next to navy.
   ========================================================================= */

:root {
    --rf-line: #dbe1f2; /* cell divider */
    --rf-line-outer: #c2cbe6; /* grid outline */
    --rf-head-bg: #eaeffb; /* header fill (navy at ~6%) */
    --rf-head-fg: #102a83; /* header text = brand navy */
    --rf-zebra: #f8fafe; /* even row */
    --rf-hover: #e4ebfb; /* row hover */
    --rf-group-bg: #dfe6f7; /* module / group row */
    --rf-cell-fg: #333a4d;
}

/* ---------------------------------------------------------------- 1. grid */

table.rf-grid {
    width: 100%;
    margin-bottom: 0;
    /* separate + spacing 0 keeps cell borders visible under a sticky header;
       collapse drops them as soon as the header detaches. */
    border-collapse: separate !important;
    border-spacing: 0;
    border-top: 1px solid var(--rf-line-outer);
    border-left: 1px solid var(--rf-line-outer);
    font-size: .8125rem;
    color: var(--rf-cell-fg);
    /* app.min.css sets `.table { overflow: hidden }`. That makes the table
       itself the nearest scrollport, so a sticky cell inside it never engages
       against .table-responsive — it silently scrolls away instead. */
    overflow: visible;
}

table.rf-grid > thead > tr > th {
    background: var(--rf-head-bg) !important;
    color: var(--rf-head-fg) !important;
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: .6rem .75rem;
    border-right: 1px solid var(--rf-line-outer);
    /* the theme's .table thead th sets a pale-accent underline with !important */
    border-bottom: 2px solid var(--sepl-navy, #102a83) !important;
    vertical-align: middle;
}

table.rf-grid > tbody > tr > td {
    padding: .5rem .75rem;
    border-right: 1px solid var(--rf-line);
    border-bottom: 1px solid var(--rf-line);
    vertical-align: middle;
    /* app.min.css carries `.table td:nth-child(2) { color: #E76F51 }`, which
       paints the second column of every table terracotta. Nothing in this
       product wants that, and it out-specifies a plain descendant rule. */
    color: var(--rf-cell-fg) !important;
}

/* emphasis inside a cell comes from weight and the brand navy, never a hue
   that exists nowhere else in the theme */
table.rf-grid > tbody > tr > td .fw-medium { color: var(--rf-head-fg); }
table.rf-grid > tbody > tr > td .text-muted { color: #7b8296 !important; }

table.rf-grid > tbody > tr:nth-child(even) > td { background-color: var(--rf-zebra); }

/* Beat .table-hover's --bs-table-hover-bg, which is a grey wash. */
table.rf-grid > tbody > tr:hover > td { background-color: var(--rf-hover) !important; }

/* group / sub-total rows (permission matrix module rows) */
table.rf-grid > tbody > tr.rf-group > td {
    background-color: var(--rf-group-bg) !important;
    color: var(--rf-head-fg);
    font-weight: 600;
    border-bottom: 1px solid var(--rf-line-outer);
}

table.rf-grid.rf-grid-sm > thead > tr > th { padding: .45rem .6rem; }
table.rf-grid.rf-grid-sm > tbody > tr > td { padding: .35rem .6rem; }

/* A sticky header needs an opaque fill and a z-index above the cells; the
   shadow redraws the underline the sticky element leaves behind. */
table.rf-grid > thead.rf-stick > tr > th {
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: 0 1px 0 var(--rf-line-outer);
}

/* Cells holding a row of chips: auto table layout will otherwise squeeze the
   column until the chips wrap onto separate lines. */
table.rf-grid > tbody > tr > td.rf-nowrap,
table.rf-grid > thead > tr > th.rf-nowrap { white-space: nowrap; }

/* A wide grid scrolls sideways inside .table-responsive, which would carry the
   row actions off-screen. Pin that column to the right edge instead. The
   background has to be restated per row state or the scrolling cells show
   through it. */
table.rf-grid > thead > tr > th.rf-pin-end,
table.rf-grid > tbody > tr > td.rf-pin-end {
    position: sticky;
    right: 0;
    background: #fff;
    border-left: 1px solid var(--rf-line-outer);
    z-index: 2;
}

table.rf-grid > thead > tr > th.rf-pin-end { background: var(--rf-head-bg) !important; z-index: 4; }
table.rf-grid > tbody > tr:nth-child(even) > td.rf-pin-end { background: var(--rf-zebra); }
table.rf-grid > tbody > tr:hover > td.rf-pin-end { background: var(--rf-hover) !important; }

/* the empty-state row should not get zebra or hover treatment */
table.rf-grid > tbody > tr.rf-empty > td,
table.rf-grid > tbody > tr.rf-empty:hover > td {
    background-color: #fff !important;
    color: #8a90a2;
}

/* ------------------------------------------------- 2. DataTables dressing */

table.dataTable.rf-grid { border-collapse: separate !important; }

/* DataTables paints its own sort arrows on a grey header; keep ours. */
table.dataTable.rf-grid > thead > tr > th.sorting,
table.dataTable.rf-grid > thead > tr > th.sorting_asc,
table.dataTable.rf-grid > thead > tr > th.sorting_desc {
    background-color: var(--rf-head-bg) !important;
    outline: none;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--rf-line-outer);
    border-radius: .25rem;
    padding: .25rem .5rem;
    outline: none;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--sepl-navy, #102a83);
    box-shadow: 0 0 0 .15rem rgba(16, 42, 131, .12);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { font-size: .8125rem; color: #5b6478; }

/* ---------------------------------------------------------------- 3. chips

   One chip set for every status, count and tag on a grid. Bordered rather than
   pastel-filled: a pale fill with same-hue text (Bootstrap's bg-*-subtle) goes
   muddy against the navy header, which is what made the legacy-password badge
   look washed out.                                                          */

.rf-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .45rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
    vertical-align: middle;
}

.rf-chip > i { font-size: .8125rem; line-height: 1; }

/* brand — roles, tags, anything neutral-but-notable */
.rf-chip-brand { background: #e7edfb; border-color: #c1cdee; color: #102a83; }

/* muted — metadata that must be readable but must not shout.
   The legacy-password marker lives here: it is a transient data note, not a
   fault, and it clears itself the first time the user signs in. */
.rf-chip-muted { background: #eff1f7; border-color: #d5dae9; color: #4d5772; }

/* counts — the little location / process tallies */
.rf-chip-count {
    background: #fff;
    border-color: #c9d3ec;
    color: #2a3a6d;
    font-variant-numeric: tabular-nums;
}

.rf-chip-ok { background: #e6f4ed; border-color: #aed8c4; color: #0d6b45; }
.rf-chip-off { background: #eef0f6; border-color: #d2d8e7; color: #5f6880; }
.rf-chip-warn { background: #fcf3e4; border-color: #e7d0a4; color: #855610; }
.rf-chip-danger { background: #fceceb; border-color: #eebebc; color: #9e2420; }

/* Inline <code> — Bootstrap ships it magenta (#d63384), which is the loudest
   colour on any screen that uses it. Same navy family as everything else. */
table.rf-grid code,
.alert code {
    color: var(--rf-head-fg);
    background: #eaeffb;
    border: 1px solid #d3dcf3;
    border-radius: .2rem;
    padding: 0 .3rem;
    font-size: .95em;
}

/* --------------------------------------------------------- 4. row actions */

.rf-actions { display: inline-flex; gap: .25rem; }

.rf-actions .btn {
    --bs-btn-padding-y: .15rem;
    --bs-btn-padding-x: .4rem;
    --bs-btn-font-size: .8125rem;
    line-height: 1.2;
}

/* --------------------------------------------------- 5. sortable headings

   Any <th data-sort="Column"> becomes clickable. rf-sort.js adds the arrow and
   the class; the header keeps its own alignment, so a right-aligned number
   column still reads right-aligned with the arrow tucked beside the caption. */

table.rf-grid th.rf-sortable,
table th.rf-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

table th.rf-sortable:hover { text-decoration: underline; }

table th.rf-sort-on { font-weight: 700; }

.rf-sort-arrow {
    font-size: .58rem;
    margin-left: .18rem;
    opacity: .9;
    vertical-align: 1px;
}