/* 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). */

/* Center header labels vertically so single-line and wrapped (2-line) headers align
   on the same middle baseline across the row. */
.mc-grid-filter > thead th {
    vertical-align: middle;
}

/* 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: var(--accent, #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: var(--accent, #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; }

/* Freeze panes (sticky header / first column) sont volontairement DÉSACTIVÉS dans le
   portage CRM : les tables vivent dans un .table-responsive (scroll horizontal), ce qui
   piège un sticky top vertical, et un fond de gel opaque en dur créait une bande claire
   sur le fond de page configurable. On garde donc filtres + tri sans gel. */

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

.mc-grid-filter thead th.mcf-active::before {
    background: var(--accent, #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;
}

/* -- server-side sort button (CRM SortHeader component) --------------------------
   The header label is a bare button so mc-grid-filter.js lets the click through to
   Blazor (server sort) while the ▼ padding zone still opens the value filter. */
.mc-grid-filter thead th .grid-sort-btn {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
    text-align: left;
    cursor: pointer;
}

.mc-grid-filter thead th .grid-sort-arrow {
    margin-left: 0.35em;
    font-weight: 700;
    color: var(--accent, #244890);
}