/* grid-filter.css — styling for the Excel-style column filters wired by
   mc-grid-filter.js. Loaded app-wide; everything is scoped under
   .mc-grid-filter or .mcf-* so it never touches unmarked tables.

   Header/freeze rules use a DIRECT-CHILD combinator (`.mc-grid-filter > thead`,
   `> tbody > tr`) so a plain table NESTED inside a marked grid (e.g. an expanded
   detail row) never inherits the combo look or sticky panes — a marker on the
   PARENT would otherwise reach descendant tables.

   The look is deliberately combo-box-like so it's obvious the header filters:
   a faint field frame around each header plus a shaded "dropdown button" on the
   right carrying the ▾ caret. Colours are neutral translucent greys (+ the
   Kayser-blue accent for the active state) so they read correctly on both light
   headers (.wms-table) and darker ones (Bootstrap .table, ai/tickets grids). */

/* Filterable header = a combo box. */
.mc-grid-filter > thead th:not(.no-filter) {
    cursor: pointer;
    position: relative;
    /* Reserve the dropdown-button zone on the right. !important so it wins over a
       host grid's own th padding (e.g. `.tab-content .wms-section .wms-table thead th`
       is more specific) — otherwise the button sits over the header text. The JS
       reads this same padding-right to know where the "open filter" click zone is:
       a click inside it opens the value filter, a click left of it sorts. */
    padding-right: 2.2em !important;
    -webkit-user-select: none;
    user-select: none;
    box-shadow: inset 0 0 0 1px rgba(120, 130, 145, 0.22);  /* faint field frame */
}

/* The dropdown button: a fixed 16px square box (::before) with the down arrow
   over it (::after). Fixed size — NOT a percentage of cell height — so a tall or
   wrapped header never grows the button past the reserved padding (no overlap).
   Two pseudos so the arrow can be distorted without skewing the square box. */
.mc-grid-filter > thead th:not(.no-filter)::before {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: rgba(120, 130, 145, 0.18);
    box-shadow: inset 0 0 0 1px rgba(120, 130, 145, 0.35);
    pointer-events: none;
}

.mc-grid-filter > thead th:not(.no-filter)::after {
    content: '▼';
    position: absolute;
    right: 4px;
    top: 50%;
    width: 16px;                /* same box as ::before so the glyph centres in the square */
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    opacity: 0.85;
    font-size: 13px;
    line-height: 1;
    /* wider + flatter glyph (≈ +2px wide / -2px tall), kept centred */
    transform: translateY(-50%) scaleX(1.2) scaleY(0.78);
    pointer-events: none;
}

/* Live "(shown/total)" row counter shown in each filterable header. Normal-case
   and tabular so it stays legible against the uppercased header label. */
.mc-grid-filter thead th .mcf-count {
    margin-left: 0.35em;
    font-weight: 600;
    opacity: 0.55;
    text-transform: none;
    letter-spacing: normal;
    font-variant-numeric: tabular-nums;
}

.mc-grid-filter thead th .mcf-count.mcf-count-on {
    color: #244890;
    opacity: 1;
}

/* Sort indicator (↑/↓) prepended to the label of the currently-sorted column.
   Clicking the header label area sorts (re-click inverts); clicking the ▼ box
   filters — so the two affordances read distinctly (↑/↓ vs ▼). */
.mc-grid-filter thead th .mcf-sort {
    margin-right: 0.35em;
    font-weight: 700;
    opacity: 0.9;
    color: #244890;
    -webkit-text-stroke: 0.05em currentColor;   /* double the arrow stroke weight */
}

.mc-grid-filter > thead th:not(.no-filter):hover {
    box-shadow: inset 0 0 0 1px rgba(120, 130, 145, 0.4);
}

.mc-grid-filter > thead th:not(.no-filter):hover::before {
    background: rgba(120, 130, 145, 0.32);
}

.mc-grid-filter > thead th:not(.no-filter):hover::after {
    opacity: 1;
}

/* Column resize: a col-resize cursor when hovering a header's right border, and a
   global cursor lock + no-select while a border is being dragged (mc-grid-filter.js). */
.mc-grid-filter thead th.mcf-col-edge { cursor: col-resize; }
body.mcf-resizing, body.mcf-resizing * { cursor: col-resize !important; }
body.mcf-resizing { -webkit-user-select: none; user-select: none; }

/* -- Excel-style freeze panes ---------------------------------------------------
   The header row stays visible while scrolling DOWN and the first column stays
   visible while scrolling RIGHT. The page itself is the scroller and the app top
   bar is sticky (3.5rem), so the header parks just beneath it (--mcf-freeze-top —
   a host/page with no such bar can set it to 0). Sticky cells MUST be opaque or
   scrolled content bleeds through them: a white fallback is set at LOW specificity
   (`.mc-grid-filter th` / `td:first-child`) so each grid's own header / zebra /
   hover backgrounds still win and only otherwise-transparent cells get filled.
   Stacking: header row (2) and first column (1) sit above the body cells; the
   top-left corner (3) above both. */
.mc-grid-filter { --mcf-freeze-top: 3.5rem; --mcf-freeze-bg: #fff; }

.mc-grid-filter > thead th { background-color: var(--mcf-freeze-bg); }
.mc-grid-filter > tbody > tr > td:first-child { background-color: var(--mcf-freeze-bg); }

/* The LAST header row (the real column headers) sticks under the top bar; a
   grouped top row above it just scrolls away, so two header rows never overlap. */
.mc-grid-filter > thead tr:last-child th {
    position: sticky;
    top: var(--mcf-freeze-top);
    z-index: 2;
}
.mc-grid-filter > thead tr > th:first-child,
.mc-grid-filter > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}
.mc-grid-filter > thead tr:last-child th:first-child { z-index: 3; }   /* the corner is in both bands */

/* A column with an active filter: blue frame + filled blue dropdown button. */
.mc-grid-filter thead th.mcf-active {
    box-shadow: inset 0 0 0 1px #244890;
}

.mc-grid-filter thead th.mcf-active::before {
    background: #244890;
    box-shadow: none;
}

.mc-grid-filter thead th.mcf-active::after {
    color: #fff;
    opacity: 1;
}

/* -- the floating value-picker popover (appended to <body>) ----------------- */
.mcf-pop {
    position: fixed;
    z-index: 11000;
    display: none;
    width: 16rem;
    max-width: calc(100vw - 16px);
    background: #fff;
    color: #212529;
    border: 1px solid #ccd0d4;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    font-size: 0.85rem;
    overflow: hidden;
}

.mcf-pop-search {
    padding: 0.4rem;
    border-bottom: 1px solid #eceef0;
}

.mcf-pop-q {
    width: 100%;
    box-sizing: border-box;
    padding: 0.3rem 0.5rem;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    font-size: 0.85rem;
}

.mcf-pop-list {
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.mcf-pop-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    /* headers are uppercased by some grids; the value list must not inherit that */
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    color: #212529;
}

.mcf-pop-item:hover {
    background: #f2f5f9;
}

.mcf-pop-item input {
    flex: 0 0 auto;
    margin: 0;
}

.mcf-pop-item span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcf-pop-master {
    border-bottom: 1px solid #eceef0;
    font-weight: 600;
}