/* ============================================================================
   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
   the previous product'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 brand header and
   the chip palette below.

   Every colour is derived from the brand brand #164F4F 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 brand.
   ========================================================================= */

:root {
    --rf-line: #d7e5e2; /* cell divider */
    --rf-line-outer: #b9d0cc; /* grid outline */
    --rf-head-bg: #e8f2f0; /* header fill (brand at ~6%) */
    --rf-head-fg: #164F4F; /* header text = brand */
    --rf-zebra: #f7fbfa; /* even row */
    --rf-hover: #dcece9; /* row hover */
    --rf-group-bg: #d2e5e1; /* module / group row */
    --rf-cell-fg: #333a4d;
}

/* ------------------------------------------------- 0. the sticky-head trap

   app.min.css carries `.table { border-radius: 8px; overflow: hidden }`. The
   clip is there to round the table's own corners, but `overflow` on an element
   makes THAT element the nearest scrollport, and a `position: sticky` cell
   measures itself against its nearest scrollport. So a sticky header inside a
   .table never engages against the box that is actually scrolling: it rides
   away with the rows.

   It fails silently. No error, no warning, no visual clue — the header simply
   scrolls off, which reads as "nobody asked for sticky" rather than "sticky
   was overruled". Seven screens had asked for it and none of them got it.

   Undone here for every table, not only .rf-grid, because the next screen to
   want a sticky head will not know this rule exists. Nothing is lost: every
   grid in this product sits inside a .card, which already rounds and clips
   the corners the theme was reaching for.                                   */

.table { overflow: visible; }

/* ---------------------------------------------------------------- 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);
    /* belt and braces over the shared `.table { overflow: visible }` above, so
       a grid keeps its sticky head even if the theme is upgraded and puts the
       clip back with more weight. */
    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(--kkct-primary, #164F4F) !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 brand, 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(--kkct-primary, #164F4F);
    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 brand 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: #e7efef; border-color: #bdd2d2; color: #164F4F; }

/*  A customer or supplier CODE, wherever a grid leads with one.

    Tabular figures so a column of codes lines up on its digits — GJ29 above
    GJ343 reads as a list rather than a jumble. It lives here rather than in
    each screen because six grids now name a customer the same way, and six
    copies of one rule is five chances for them to drift apart. */
.rf-code { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/*  Which factory. Only the SHAPE is here — the three colours are put on
    inline by rfUnit, because the layout's !important on .form-select outranks
    anything a stylesheet can say. The chip always carries the unit's name, so
    the colour is a second channel and never the only one. */
.rf-unit-chip {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .05rem .45rem;
    border-radius: 20px;
    border: 1px solid transparent;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: 1px;
}

/* 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 brand family as everything else. */
table.rf-grid code,
.alert code {
    color: var(--rf-head-fg);
    background: #e8f2f0;
    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;
}

/* ============================================================================
   6. COLUMN DIVIDERS, ON EVERY GRID IN THE PRODUCT

   .rf-grid has always drawn them. Nothing else did — the dashboards, the item
   picker, the report screens and every plain Bootstrap .table drew rows with
   no vertical rule at all, so a wide table asked the eye to hold a column
   position across eight cells of unrelated text. On a stock or rate grid,
   where the whole point is comparing one column down the page, that is the
   line that does the work.

   Applied to .table rather than to each screen, because the next grid somebody
   adds should not have to remember. Direct children only, so a table nested
   inside a cell keeps its own rules.

   Two weights, not one: the header rule is brand at low alpha so it reads
   against a filled header, the body rule is the quieter cell line. Both are
   overridable per screen through --rf-head-line and --rf-line.
   ========================================================================= */

.table > thead > tr > th:not(:last-child),
.table > thead > tr > td:not(:last-child) {
    border-right: 1px solid var(--rf-head-line, rgba(16, 42, 131, .16));
}

.table > tbody > tr > td:not(:last-child),
.table > tbody > tr > th:not(:last-child),
.table > tfoot > tr > td:not(:last-child),
.table > tfoot > tr > th:not(:last-child) {
    border-right: 1px solid var(--rf-line);
}

/* A message spanning the whole width ("Nothing matches that") is one cell
   pretending to be a row — a divider down its right edge would be a line to
   nowhere. */
.table > tbody > tr > td[colspan]:not(:last-child) { border-right: 0; }