/* ============================================================================
   MrepUI — DevExtreme-free component styles
   Grid (Tabulator skin), popup, tabs, form editors, toolbar, loader.
   Depends on the enterprise-theme.css variables.
   ========================================================================== */

/* ============================ GRID (Tabulator) ============================ */
.mrep-grid-wrap { position: relative; }

.tabulator {
    background: #fff;
    border: 1px solid #d5d9de;
    border-radius: 4px;
    font-family: var(--mrep-font);
    font-size: 13px;
    color: #333;
    overflow: hidden;
    box-shadow: none;
}

/* Header/cell hover tooltips (full text for truncated captions & cells).
   Base tabulator.min.css leaves .tabulator-tooltip essentially unstyled (it only
   borrows the generic white popup box), which reads as "no tooltip". Give it an
   explicit dark chip that's clearly visible over both light and dark grids, and a
   z-index above any popup/modal so it's never hidden. The element carries the
   .tabulator-popup-container class too, so override that white box here. */
.tabulator-tooltip,
.tabulator-tooltip.tabulator-popup-container {
    background: #1f2733 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 5px 9px !important;
    font-family: var(--mrep-font);
    font-size: 12px !important;
    line-height: 1.35;
    max-width: 340px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22) !important;
    z-index: 12000 !important;
    pointer-events: none;
    white-space: normal;
}

/* Header — neutral light gray, DevExtreme dxDataGrid look */
.tabulator .tabulator-header {
    background: #f5f6f8;
    border-bottom: 1px solid #cfd4da;
    color: #454b54;
    font-weight: 700;
}
.tabulator .tabulator-header .tabulator-col {
    background: transparent;
    border-right: 1px solid #e4e7eb;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    font-weight: 700;
    font-size: 12.5px;
    color: #454b54;
    padding: 4px 2px;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background: #eceef1;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow {
    border-bottom-color: var(--mrep-brand-600);
}

/* Header filter row — subtle inputs, search icon on text filters (DevExtreme) */
.tabulator .tabulator-header .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-header-filter select {
    border: 1px solid #d5d9de;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
    width: 100%;
    background-color: #fff;
    color: #333;
    height: 28px;
}
.tabulator .tabulator-header .tabulator-header-filter input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4b0' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    background-position: 7px center;
    background-size: 13px;
    padding-left: 26px;
}
.tabulator .tabulator-header .tabulator-header-filter input:focus,
.tabulator .tabulator-header .tabulator-header-filter select:focus {
    border-color: var(--mrep-brand);
    outline: none;
    box-shadow: 0 0 0 2px rgba(42, 171, 160, .15);
}

/* Rows — white, compact, neutral hover */
.tabulator .tabulator-row {
    border-bottom: 1px solid #ebedf0;
    min-height: 32px;
    background: #fff;
}
.tabulator .tabulator-row.tabulator-row-even { background: #fff; }
.tabulator .tabulator-row:hover { background: #f4f6f8 !important; }
.tabulator .tabulator-row.tabulator-selected { background: #e7f3f2 !important; }
.tabulator .tabulator-row .tabulator-cell {
    padding: 5px 10px;
    border-right: 1px solid #eef0f2;
    color: #333;
    /* NOTE: never set display:flex here — it breaks Tabulator's inline-block
       cell layout and stacks all cells into the first column. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Vertically CENTER cell content while keeping the ellipsis. Tabulator forces each
   cell to the row height and top-aligns its content, so in a row made tall by one
   rich cell (an approval stepper, a chart, a wrapped note) everything else floats at
   the top. We can't flex the cell (kills text-overflow:ellipsis) or change its
   display (breaks the inline-block column layout) — so every cell gets a full-height
   zero-width strut and its content is middle-aligned against it.

   This was previously scoped with :has() to .mrep-cell-inner / .mrep-cell-tpl, i.e.
   only cells produced by OUR formatters. Cells whose content comes straight from
   Tabulator — above all the row-selection checkbox column — had no strut and sat ~20px
   above every other column in a tall row. The strut is unconditional now, and the
   companion `> *` rule middle-aligns the children (a bare <input> defaults to
   baseline alignment, which would drop it BELOW centre instead). */
.tabulator .tabulator-row .tabulator-cell::before {
    content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle;
}
.tabulator .tabulator-row .tabulator-cell > * { vertical-align: middle; }
.mrep-cell-inner {
    display: inline-block; vertical-align: middle; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- very large grids/trees: defer off-screen rows ----------------------
   Opt-in per page (add .mrep-defer-rows to the grid host). For a grid with no fixed
   height the engine has no virtual renderer, so it lays out and paints EVERY row on
   first render — thousands of rows block the main thread long enough for Chrome to
   offer "Page Unresponsive".

   content-visibility:auto is not virtual scrolling: the rows stay in the DOM, so
   find-in-page, expand-all and the export still see all of them. The browser just
   skips layout and paint for the ones off-screen, and does that work as they scroll
   into view. contain-intrinsic-size supplies an assumed row height meanwhile, so the
   scrollbar does not jump as rows are realised. */
.mrep-defer-rows .tabulator-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 34px;
}

/* Group rows */
.tabulator .tabulator-row.tabulator-group {
    background: #eceff2;
    font-weight: 700;
    color: #3a4048;
    border-bottom: 1px solid #cfd4da;
}

/* Footer / calcs / pager */
.tabulator .tabulator-footer {
    background: #f5f6f8;
    border-top: 1px solid #cfd4da;
    color: #5a626c;
    font-size: 12.5px;
}
.tabulator .tabulator-footer .tabulator-page {
    border-radius: 4px;
    border: 1px solid #d5d9de;
    background: #fff;
    color: #5a626c;
    margin: 0 2px;
}
.tabulator .tabulator-footer .tabulator-page.active {
    background: var(--mrep-brand);
    border-color: var(--mrep-brand);
    color: #fff;
}
.tabulator .tabulator-col-calcs .tabulator-cell,
.tabulator .tabulator-calcs {
    background: #f5f6f8 !important;
    font-weight: 700;
    color: #3a4048;
}

/* Action buttons inside cells */
.mrep-cell-actions { display: inline-flex; gap: 6px; align-items: center; }
.mrep-cell-btn {
    border: 1px solid transparent;
    background: var(--mrep-brand-050);
    color: var(--mrep-brand-700);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.mrep-cell-btn:hover { filter: brightness(0.96); }
/* colour variants to mirror DevExtreme action buttons */
.mrep-cell-btn.success { background: var(--mrep-brand); color: #fff; }
.mrep-cell-btn.warning { background: #f0932b; color: #fff; }
.mrep-cell-btn.danger  { background: #fdecec; color: var(--mrep-danger); }
.mrep-cell-btn.danger:hover { background: #fbdada; }

/* ---- icon toolbar buttons (top-right, DevExtreme-style) ------------------ */
.mrep-icon-btn {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--mrep-line);
    background: #fff;
    color: var(--mrep-ink-soft);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: all .15s ease;
}
.mrep-icon-btn:hover { border-color: var(--mrep-brand); color: var(--mrep-brand-700); background: var(--mrep-brand-050); }
.mrep-icon-btn.primary { background: var(--mrep-brand); border-color: var(--mrep-brand); color: #fff; }
.mrep-icon-btn.primary:hover { background: var(--mrep-brand-600); }

/* ---- group panel --------------------------------------------------------- */
.mrep-grouppanel {
    min-height: 36px;
    /* inline in the toolbar's left slot: fill it so the Add/Export/Columns
       actions stay pinned to the right */
    width: 100%; box-sizing: border-box;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 6px 12px;
    margin: 0;
    background: #f5f6f8;
    border: 1px solid #dfe3e8;
    border-radius: 4px;
    transition: background .15s ease, border-color .15s ease;
}
.mrep-grouppanel.drag-over { background: var(--mrep-brand-050); border-color: var(--mrep-brand); border-style: dashed; }
.mrep-grouppanel-hint { color: #8a929c; font-size: 12.5px; font-style: italic; }
.mrep-group-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--mrep-brand); color: #fff;
    padding: 4px 6px 4px 12px; border-radius: 16px;
    font-size: 12px; font-weight: 600;
}
.mrep-chip-x {
    border: none; background: rgba(255,255,255,.25); color: #fff;
    width: 18px; height: 18px; border-radius: 50%; cursor: pointer; line-height: 1;
}
.mrep-chip-x:hover { background: rgba(255,255,255,.45); }

/* draggable column headers show a move cursor */
.tabulator .tabulator-header .tabulator-col[draggable="true"] { cursor: grab; }

/* master-detail expand control + detail panel */
.mrep-expand-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 5px; cursor: pointer;
    color: var(--mrep-brand-700); font-size: 17px; line-height: 1; user-select: none;
}
.mrep-expand-btn:hover { background: var(--mrep-brand-050); }
/* Expand/collapse column: snug to the icon (tight cell padding). */
.tabulator .tabulator-cell.mrep-expandcol,
.tabulator .tabulator-col.mrep-expandcol { padding-left: 3px !important; padding-right: 3px !important; }
.tabulator .tabulator-row .mrep-detail-row {
    display: block; width: 100%; clear: both;
    background: var(--mrep-canvas); border-top: 1px solid var(--mrep-line);
    padding: 10px 12px; box-sizing: border-box;
}
.mrep-detail-inner { width: 100%; }
/* Detail grids laid out side-by-side in a flex row: the grid's own
   overflow:hidden lets a `width:50%` flex item collapse toward its content
   width. Force the row to be a full-width flex container and each grid host
   (tagged .mrep-detail-grid) to split it evenly and FILL — the inline
   `width:50%` is neutralised so flex-grow governs the size. */
.mrep-detail-inner *:has(> .mrep-detail-slot) { display: flex !important; width: 100% !important; gap: 10px; }
.mrep-detail-slot { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
/* When the slot is the toolbar+grid wrap, stack them (toolbar row on top so the
   download button stays top-right) and let the grid STRETCH to the wrap width
   (align-self:stretch fills the cross-axis without a percentage width, which
   resolves against the wrong ancestor here). */
.mrep-grid-wrap.mrep-detail-slot { display: flex; flex-direction: column; align-items: stretch; }
.mrep-grid-wrap.mrep-detail-slot > .mrep-detail-grid { align-self: stretch; width: auto; min-width: 0; }
.mrep-grid-wrap.mrep-detail-slot > .mrep-toolbar { align-self: stretch; }

/* ============================ TOOLBAR ==================================== */
.mrep-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.mrep-toolbar .mrep-toolbar-before { flex: 1 1 auto; min-width: 0; }
.mrep-toolbar .mrep-toolbar-after {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.mrep-toolbar .mrep-toolbar-spacer { flex: 1 1 auto; }
.mrep-search {
    position: relative;
    min-width: 220px;
}
.mrep-search input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    border: 1px solid var(--mrep-line);
    border-radius: var(--mrep-radius-sm);
    font-size: 13px;
    background: #fff;
}
.mrep-search input:focus {
    border-color: var(--mrep-brand);
    outline: none;
    box-shadow: 0 0 0 3px rgba(42, 171, 160, .18);
}
.mrep-search::before {
    content: "\1F50D";
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: .5;
}

/* ============================ BUTTONS (MrepUI) =========================== */
.mrep-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--mrep-line);
    background: var(--mrep-surface);
    color: var(--mrep-ink-soft);
    border-radius: var(--mrep-radius-sm);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
/* Glyph in front of a button's label. The button is already a flex row with a gap,
   so this only has to keep the glyph on the text's optical line. */
.mrep-btn-ico {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
}
/* Form Save/submit buttons align to input height */
.mrep-field-button .mrep-btn { min-height: 38px; }
.mrep-btn:hover { border-color: var(--mrep-brand); background: var(--mrep-brand-050); color: var(--mrep-brand-700); }
.mrep-btn.primary {
    background: var(--mrep-brand);
    border-color: var(--mrep-brand);
    color: #fff;
}
.mrep-btn.primary:hover { background: var(--mrep-brand-600); border-color: var(--mrep-brand-600); }
.mrep-btn.ghost { background: transparent; border-color: transparent; }
.mrep-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ============================ FORM EDITORS ============================== */
/* Self-contained box model so controls stay inside their column regardless of
   the host page's reset (width:100% + padding must not overflow). */
.mrep-input, .mrep-btn, .mrep-select, .mrep-ddb-field, .mrep-tagbox-chips,
.mrep-field, .mrep-field-editor, .mrep-field-label,
.mrep-radio, .mrep-check-wrap { box-sizing: border-box; }
.mrep-field-editor > div, .mrep-ddb, .mrep-tagbox, .mrep-datebox { min-width: 0; }
.mrep-form-lleft .mrep-field-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrep-field { margin-bottom: 10px; }
.mrep-field > label,
.mrep-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--mrep-ink);
    margin-bottom: 4px;
}
.mrep-field > label .req,
.mrep-req { color: var(--mrep-danger); margin-left: 2px; }
.mrep-field-editor { position: relative; min-width: 0; }
.mrep-field-msg { display: none; color: var(--mrep-danger); font-size: 11px; margin-top: 3px; line-height: 1.2; }
.mrep-field.mrep-invalid .mrep-field-msg { display: block; }
.mrep-field.mrep-invalid .mrep-input,
.mrep-field.mrep-invalid .mrep-select,
.mrep-field.mrep-invalid .mrep-selectbox,
.mrep-field.mrep-invalid .mrep-ddb-field,
.mrep-field.mrep-invalid .mrep-date-field {
    border-color: var(--mrep-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 75, 79, .12);
}

/* LEFT-LABEL layout (DevExtreme labelLocation:"left") — label beside the editor,
   compact rows to match the reference form (no tall line spacing). */
.mrep-form-lleft .mrep-field {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    margin-bottom: 8px;
}
.mrep-form-lleft .mrep-field-label { margin-bottom: 0; align-self: center; }
.mrep-form-lleft .mrep-field-msg { grid-column: 2; }
/* Fields with no label (template grids, full-width editors) and button rows
   must span the whole row — otherwise the single child lands in the 128px
   label column and gets squished. */
.mrep-form-lleft .mrep-field.mrep-field-nolabel { display: block; }
.mrep-field-button { margin-top: 6px; }
.mrep-field-button[style*="right"] { text-align: right; }

.mrep-input,
.mrep-select {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--mrep-line);
    border-radius: var(--mrep-radius-sm);
    font-size: 13px;
    color: var(--mrep-ink);
    background: var(--mrep-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mrep-input::placeholder { color: var(--mrep-muted); }
.mrep-input:focus,
.mrep-select:focus {
    border-color: var(--mrep-brand);
    outline: none;
    box-shadow: 0 0 0 3px rgba(42, 171, 160, .18);
}
.mrep-input.invalid,
.mrep-select.invalid { border-color: var(--mrep-danger); }

/* Keep the whole input family on ONE surface background + border so date boxes,
   dropdowns, tagboxes and selects always read as the same enabled control. These
   fields must stay fully opaque — never fade them with opacity, or the page shows
   through and they look disabled/greyer than the inputs beside them. */
.mrep-input,
.mrep-ddb-field,
.mrep-date-field,
.mrep-tagbox-chips {
    background: var(--mrep-surface);
    border-color: var(--mrep-line);
    opacity: 1;
}
.mrep-field .mrep-error {
    color: var(--mrep-danger);
    font-size: 11px;
    margin-top: 4px;
    display: none;
}
.mrep-field .mrep-error.show { display: block; }

.mrep-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 26px;
}
.mrep-field.col-span-2 { grid-column: 1 / -1; }

/* ============================ POPUP / MODAL ============================= */
.mrep-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    z-index: 1080;
    opacity: 0;
    transition: opacity .18s ease;
    overflow: auto;
}
.mrep-overlay.open { opacity: 1; }

.mrep-popup {
    background: var(--mrep-surface);
    border-radius: var(--mrep-radius);
    box-shadow: var(--mrep-shadow-lg);
    width: 60%;
    max-width: 1100px;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    transform: translateY(-8px);
    transition: transform .18s ease;
    margin: auto;
}
/* when the popup is given an explicit height (managed/large popups), let the body
   flex-scroll inside it instead of pushing past the viewport */
.mrep-popup[style*="height"] .mrep-popup-body { flex: 1 1 auto; min-height: 0; }
/* full-screen popup (DevExtreme fullScreen) — fills the viewport edge-to-edge */
.mrep-popup-full { width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: 100vh !important; border-radius: 0; }
.mrep-popup-full .mrep-popup-body { flex: 1 1 auto; min-height: 0; }
.mrep-overlay.open .mrep-popup { transform: translateY(0); }

.mrep-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--mrep-brand-050);
    border-bottom: 1px solid var(--mrep-line);
    border-radius: var(--mrep-radius) var(--mrep-radius) 0 0;
}
.mrep-popup-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--mrep-brand-800);
}
.mrep-popup-close {
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: var(--mrep-muted);
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mrep-popup-close:hover { background: rgba(0,0,0,.06); color: var(--mrep-ink); }
.mrep-popup-body { padding: 20px; overflow: auto; }
.mrep-popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--mrep-line);
    background: #fbfcfe;
    border-radius: 0 0 var(--mrep-radius) var(--mrep-radius);
}

/* ============================ TABS ===================================== */
.mrep-tabs { border-bottom: 1px solid var(--mrep-line); display: flex; gap: 2px; }
.mrep-tab {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mrep-muted);
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.mrep-tab:hover { color: var(--mrep-ink); }
.mrep-tab.active { color: var(--mrep-brand-700); border-bottom-color: var(--mrep-brand); }
.mrep-tab-panel { padding: 16px 2px; }
.mrep-tab-panel[hidden] { display: none; }

/* ============================ LOADER =================================== */
.mrep-loader {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    z-index: 20;
    backdrop-filter: blur(1px);
}
.mrep-loader .mrep-spinner {
    width: 34px; height: 34px;
    border: 3px solid var(--mrep-brand-100);
    border-top-color: var(--mrep-brand);
    border-radius: 50%;
    animation: mrep-spin .7s linear infinite;
}
.mrep-loader .mrep-loader-text { font-size: 12px; color: var(--mrep-muted); font-weight: 600; }
/* full-page overlay (global preloader) — same spinner, fixed to the viewport */
    .mrep-loader.mrep-loader--full {
        position: fixed;
        inset: 0;
        z-index: 4000;
        background: rgba(255, 255, 255, .55);
        display: none;
    }
html.theme-dark .mrep-loader.mrep-loader--full { background: rgba(14, 21, 36, .55); }
@keyframes mrep-spin { to { transform: rotate(360deg); } }

/* ===================== EXPORT PROGRESS (0-100%) ========================
   Its own overlay rather than .mrep-loader--full, which is display:none. */
.mrep-exportp {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(2px);
}
.mrep-exportp-card {
    width: 360px;
    max-width: 90vw;
    background: var(--mrep-surface, #fff);
    border: 1px solid var(--mrep-line-soft, #e2e8f0);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 18px 48px rgba(2, 8, 23, .22);
    text-align: center;
}
.mrep-exportp-title { font-size: 14px; font-weight: 700; color: var(--mrep-ink, #0f172a); margin-bottom: 4px; }
.mrep-exportp-sub { font-size: 12px; color: var(--mrep-muted, #64748b); margin-bottom: 14px; min-height: 16px; }
.mrep-exportp-track {
    height: 8px;
    border-radius: 999px;
    background: var(--mrep-line-soft, #e2e8f0);
    overflow: hidden;
}
.mrep-exportp-bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--mrep-brand, #2AABA0);
    transition: width .18s ease;
}
.mrep-exportp-pct { margin-top: 9px; font-size: 12px; font-weight: 700; color: var(--mrep-brand, #2AABA0); }

/* Column chooser popover */
.mrep-colchooser {
    position: absolute;
    background: #fff;
    border: 1px solid var(--mrep-line);
    border-radius: var(--mrep-radius-sm);
    box-shadow: var(--mrep-shadow-md);
    padding: 8px;
    max-height: 320px;
    overflow: auto;
    z-index: 1090;
    min-width: 200px;
}
.mrep-colchooser label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
}
.mrep-colchooser label:hover { background: var(--mrep-brand-050); }

/* ============================ dx-compat widgets ======================== */
/* Checkbox — custom brand-tinted control, consistent across the whole project */
.mrep-check-wrap { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mrep-ink); cursor: pointer; user-select: none; }
.mrep-check-wrap input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; margin: 0; flex: 0 0 auto;
    width: 18px; height: 18px; border: 1.5px solid var(--mrep-line);
    border-radius: 5px; background: var(--mrep-surface); cursor: pointer;
    display: inline-grid; place-content: center; transition: all .15s ease;
}
.mrep-check-wrap input[type="checkbox"]::before {
    content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .12s ease;
    background: #fff; clip-path: polygon(14% 44%, 0 65%, 43% 100%, 100% 16%, 82% 0, 39% 68%);
}
.mrep-check-wrap input[type="checkbox"]:checked {
    background: var(--mrep-brand); border-color: var(--mrep-brand);
}
.mrep-check-wrap input[type="checkbox"]:checked::before { transform: scale(1); }
.mrep-check-wrap input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(42, 171, 160, .25); }
.mrep-check-wrap input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* TagBox */
.mrep-tagbox { position: relative; }
.mrep-tagbox-chips {
    min-height: 38px; border: 1px solid var(--mrep-line); border-radius: var(--mrep-radius-sm);
    padding: 4px 8px; display: flex; flex-wrap: nowrap; overflow: hidden; gap: 5px; align-items: center; cursor: pointer; background: var(--mrep-surface);
}
.mrep-tagbox-ph { color: var(--mrep-muted); font-size: 13px; }
.mrep-tagbox-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--mrep-brand); color: #fff; border-radius: 14px; padding: 2px 6px 2px 10px; font-size: 12px; flex: 0 0 auto; max-width: 100%; white-space: nowrap; }
.mrep-tagbox-chip { min-width: 0; }
.mrep-tagbox-chip b { cursor: pointer; opacity: .85; flex: 0 0 auto; }
/* "+N" overflow counter — neutral pill, distinct from selected chips */
.mrep-tagbox-count { display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap;
    background: var(--mrep-brand-050, #E8F8F7); color: var(--mrep-brand); border: 1px solid var(--mrep-line);
    border-radius: 14px; padding: 2px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.mrep-tagbox-menu {
    position: absolute; z-index: 1090; left: 0; right: 0; top: calc(100% + 4px);
    background: var(--mrep-surface); border: 1px solid var(--mrep-line); border-radius: var(--mrep-radius-sm);
    box-shadow: var(--mrep-shadow-md); max-height: 240px; overflow: auto; padding: 4px;
}
.mrep-tagbox-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; border-radius: 6px; cursor: pointer; }
.mrep-tagbox-opt:hover { background: var(--mrep-brand-050); }
.mrep-tagbox-selectall { font-weight: 600; border-bottom: 1px solid var(--mrep-line); border-radius: 0; margin-bottom: 2px; position: sticky; top: 0; background: var(--mrep-surface); z-index: 1; }

/* RadioGroup — segmented chip look; selected chip highlights in brand */
.mrep-radiogroup { display: flex; flex-direction: column; gap: 8px; }
.mrep-radiogroup.horizontal { flex-direction: row; gap: 10px; flex-wrap: wrap; }
.mrep-radio {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mrep-ink);
    cursor: pointer; user-select: none; padding: 7px 14px; border: 1px solid var(--mrep-line);
    border-radius: 8px; background: var(--mrep-surface); transition: all .15s ease;
}
.mrep-radio:hover { border-color: var(--mrep-brand); }
.mrep-radio input[type="radio"] {
    -webkit-appearance: none; appearance: none; margin: 0; flex: 0 0 auto;
    width: 16px; height: 16px; border: 1.5px solid var(--mrep-line); border-radius: 50%;
    background: var(--mrep-surface); cursor: pointer; display: inline-grid; place-content: center;
    transition: all .15s ease;
}
.mrep-radio input[type="radio"]::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff;
    transform: scale(0); transition: transform .12s ease;
}
.mrep-radio input[type="radio"]:checked { background: var(--mrep-brand); border-color: var(--mrep-brand); }
.mrep-radio input[type="radio"]:checked::before { transform: scale(1); }
.mrep-radio input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(42, 171, 160, .25); }
.mrep-radio:has(input[type="radio"]:checked) {
    border-color: var(--mrep-brand); background: var(--mrep-brand-050);
    color: var(--mrep-brand-700); font-weight: 600;
}

/* List */
.mrep-list { border: 1px solid var(--mrep-line); border-radius: var(--mrep-radius-sm); overflow: auto; background: var(--mrep-surface); }
.mrep-list-search { margin-bottom: 6px; }
.mrep-list-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 13px; border-bottom: 1px solid var(--mrep-line-soft); cursor: pointer; }
.mrep-list-item:hover { background: var(--mrep-brand-050); }
.mrep-list-item.selected { background: var(--mrep-brand-050); color: var(--mrep-brand-700); font-weight: 600; }

/* DropDownBox */
.mrep-ddb { position: relative; }
.mrep-ddb-field { display: block; min-height: 38px; line-height: 22px; cursor: pointer; padding-right: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrep-ddb-field.placeholder { color: var(--mrep-muted); }
.mrep-ddb-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--mrep-muted); pointer-events: none; }
.mrep-ddb-pop {
    position: absolute; z-index: 1090; left: 0; top: calc(100% + 4px); min-width: 100%;
    background: var(--mrep-surface); border: 1px solid var(--mrep-line); border-radius: var(--mrep-radius-sm);
    box-shadow: var(--mrep-shadow-md); padding: 8px; max-height: 420px; overflow: auto;
}

/* Tooltip */
.mrep-tooltip {
    position: absolute; z-index: 2000; background: #2d3748; color: #fff; border-radius: 6px;
    padding: 5px 9px; font-size: 12px; box-shadow: var(--mrep-shadow-md); max-width: 280px;
}

/* This used to be `display: none`, from when the shim rendered the span EMPTY and an
   invisible box was better than a stray gap. The span now carries a real glyph, so
   hiding it here would silently override the rule above and every button icon in the
   app would go missing again. */

/* ===================== Date picker (dxDateBox) ========================= */
.mrep-datebox { position: relative; }
.mrep-date-field {
    cursor: pointer;
    padding-left: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232AABA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
    background-repeat: no-repeat; background-position: 11px center; background-size: 16px;
}
.mrep-date-field.placeholder { color: var(--mrep-muted); }
.mrep-cal {
    position: absolute; z-index: 1200; top: calc(100% + 6px); left: 0;
    width: 268px; background: var(--mrep-surface); border: 1px solid var(--mrep-line);
    border-radius: 12px; box-shadow: var(--mrep-shadow-lg); padding: 12px; user-select: none;
}
.mrep-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mrep-cal-title { font-weight: 700; font-size: 14px; color: var(--mrep-ink); background: transparent; border: none; cursor: pointer; padding: 5px 12px; border-radius: 8px; }
.mrep-cal-title:hover { background: var(--mrep-brand-050); color: var(--mrep-brand-700); }
.mrep-cal-nav { width: 30px; height: 30px; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: var(--mrep-muted); display: grid; place-items: center; font-size: 18px; line-height: 1; }
.mrep-cal-nav:hover { background: var(--mrep-brand-050); color: var(--mrep-brand-700); }
.mrep-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mrep-cal-wd { text-align: center; font-size: 11px; font-weight: 700; color: var(--mrep-muted); padding: 4px 0; }
.mrep-cal-day { text-align: center; font-size: 13px; padding: 7px 0; border-radius: 8px; cursor: pointer; color: var(--mrep-ink); }
.mrep-cal-day:hover { background: var(--mrep-brand-050); }
.mrep-cal-day.other { color: var(--mrep-muted); opacity: .5; }
.mrep-cal-day.today { box-shadow: inset 0 0 0 1.5px var(--mrep-brand); font-weight: 700; }
.mrep-cal-day.sel { background: var(--mrep-brand); color: #fff; font-weight: 700; }
.mrep-cal-day.sel:hover { background: var(--mrep-brand-600); }
/* month / year grids (zoom levels) */
.mrep-cal-mgrid { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2px 0; }
.mrep-cal-cell { text-align: center; padding: 13px 0; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--mrep-ink); }
.mrep-cal-cell:hover { background: var(--mrep-brand-050); }
.mrep-cal-cell.other { color: var(--mrep-muted); opacity: .5; }
.mrep-cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--mrep-brand); }
.mrep-cal-cell.sel { background: var(--mrep-brand); color: #fff; }
.mrep-cal-cell.sel:hover { background: var(--mrep-brand-600); }
.mrep-cal-foot { display: flex; justify-content: space-between; margin-top: 8px; border-top: 1px solid var(--mrep-line-soft); padding-top: 8px; }
.mrep-cal-btn { border: none; background: transparent; color: var(--mrep-brand-700); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 10px; border-radius: 6px; }
.mrep-cal-btn:hover { background: var(--mrep-brand-050); }

/* "Select All" header row in a multi-select dxList */
.mrep-list-selectall { font-weight: 600; background: var(--mrep-canvas-2); border-bottom: 1px solid var(--mrep-line) !important; }

/* ============= Searchable dropdowns (dxSelectBox / dxTagBox) ============= */
.mrep-select-search { width: 100%; margin-bottom: 6px; }
.mrep-select-list { max-height: 240px; overflow-y: auto; }
.mrep-select-item {
    padding: 7px 10px; font-size: 13px; border-radius: 6px; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mrep-ink);
}
.mrep-select-item:hover { background: var(--mrep-brand-050); }
.mrep-select-item.selected { background: var(--mrep-brand-050); font-weight: 600; color: var(--mrep-brand-700); }
.mrep-select-clear { color: var(--mrep-muted); font-style: italic; }
.mrep-select-empty { padding: 10px; font-size: 12px; color: var(--mrep-muted); text-align: center; }
.mrep-selectbox .mrep-ddb-pop { padding: 8px; }
/* tagbox: keep the search fixed, scroll only the option list */
.mrep-tagbox-menu { max-height: none; }
.mrep-tagbox-list { max-height: 220px; overflow-y: auto; }

/* Dropdown panels portaled to <body> (MrepUI.floatPanel) so they float ABOVE a
   modal instead of being clipped by `.mrep-popup-body{overflow:auto}` / forcing it
   to scroll. Neutralize `.mrep-ddb-pop{min-width:100%}` (=viewport-wide in <body>);
   the exact width/position is set inline from the field rect. Placed last so it
   wins on source order over the equal-specificity `.mrep-ddb-pop` rule. */
.mrep-floating { min-width: 0; max-width: calc(100vw - 16px); }

/* ---- Dark-mode: keep brand text/selection legible on the dark brand tint ---- */
html.theme-dark .mrep-btn:hover,
html.theme-dark .mrep-select-item.selected,
html.theme-dark .mrep-list-item.selected,
html.theme-dark .mrep-radio:has(input[type="radio"]:checked) { color: var(--mrep-brand); }
html.theme-dark .mrep-check-wrap input[type="checkbox"]::before,
html.theme-dark .mrep-radio input[type="radio"]::before { background: #0E1524; }
html.theme-dark .mrep-tagbox-chip { color: #fff; }
html.theme-dark .mrep-tagbox-count { background: var(--mrep-brand-050, #1E2B44); color: var(--mrep-brand); border-color: var(--mrep-line); }

/* Toasts (DevExpress.ui.notify) */
.mrep-toast-host { position: fixed; top: 16px; right: 16px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; }
.mrep-toast {
    min-width: 220px; max-width: 360px; padding: 11px 16px; border-radius: 8px;
    color: #fff; font-size: 13px; font-weight: 600; box-shadow: var(--mrep-shadow-md);
    opacity: 0; transform: translateX(20px); transition: opacity .2s ease, transform .2s ease;
    background: var(--mrep-ink-soft);
}
.mrep-toast.show { opacity: 1; transform: translateX(0); }
.mrep-toast.success { background: var(--mrep-success); }
.mrep-toast.error { background: var(--mrep-danger); }
.mrep-toast.warning { background: var(--mrep-warning); }
.mrep-toast.info { background: var(--mrep-info); }

/* ===================== DevExtreme-style borders + filters ================= */
/* stronger full grid borders (config borders:true) */
.tabulator .tabulator-header .tabulator-col { border-right: 1px solid #cfd4da; }
.tabulator .tabulator-row { border-bottom: 1px solid #dbe0e6; }
.tabulator .tabulator-row .tabulator-cell { border-right: 1px solid #dbe0e6; }
.tabulator .tabulator-header { border-bottom: 2px solid #cfd4da; }

/* filter row cell */
.tabulator .tabulator-header .tabulator-header-filter { padding: 3px; }

/* operator filter (magnifier + input) */
/* fill the header-filter cell exactly (no overflow past the column) */
.tabulator .tabulator-header .tabulator-header-filter { width: 100%; }
.mrep-hf { display: flex; align-items: center; gap: 1px; box-sizing: border-box; width: 100%; max-width: 100%;
    border: 1px solid var(--mrep-line); border-radius: 6px; background: var(--mrep-surface); overflow: hidden; height: 28px; padding-left: 3px; }
.mrep-hf:focus-within { border-color: var(--mrep-brand); box-shadow: 0 0 0 2px rgba(42, 171, 160, .18); }
/* magnifier = seamless inline operator toggle (no gray box / divider) */
.mrep-hf-op { flex: 0 0 auto; border: none; background: transparent; color: var(--mrep-muted); cursor: pointer; padding: 0 3px; height: 100%; display: flex; align-items: center; border-radius: 5px; }
.mrep-hf-op:hover { background: var(--mrep-brand-050); color: var(--mrep-brand-700); }
.tabulator .tabulator-header .tabulator-header-filter .mrep-hf-input {
    flex: 1 1 auto; border: none; border-radius: 0; outline: none; padding: 4px 8px 4px 2px; font-size: 12px;
    width: 100%; min-width: 0; box-sizing: border-box; background: transparent; background-image: none; height: auto; color: var(--mrep-ink);
}
.mrep-hf-input::placeholder { color: var(--mrep-muted); opacity: .8; }

/* Lookup (list/autocomplete) header-filter input: Tabulator inline-styles the
   editor input's padding, which lets the "Search…" placeholder slide under the
   magnifier icon (they overlap). Force the text to clear the icon. Operator
   inputs (.mrep-hf-input) keep their own flex layout and are excluded. */
.tabulator .tabulator-header .tabulator-header-filter input:not(.mrep-hf-input) {
    padding-left: 26px !important;
    text-indent: 0 !important;
}

/* operator menu popup */
.mrep-hf-menu { position: absolute; z-index: 1100; background: #fff; border: 1px solid var(--mrep-line); border-radius: 6px; box-shadow: var(--mrep-shadow-md); padding: 4px; min-width: 180px; }
.mrep-hf-menu-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 13px; border-radius: 5px; cursor: pointer; color: var(--mrep-ink); }
.mrep-hf-menu-item:hover { background: var(--mrep-brand-050); }
.mrep-hf-menu-item.active { background: var(--mrep-brand-050); font-weight: 600; color: var(--mrep-brand-800); }
.mrep-hf-op-ico { display: inline-flex; opacity: .6; }

/* header funnel (headerFilter) */
.mrep-th { display: flex; align-items: center; gap: 6px; width: 100%; }
.mrep-th-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.mrep-funnel { border: none; background: transparent; color: var(--mrep-muted); cursor: pointer; padding: 2px 4px; border-radius: 4px; display: inline-flex; align-items: center; }
.mrep-funnel:hover { background: var(--mrep-brand-050); color: var(--mrep-brand-700); }
.mrep-funnel.active { color: var(--mrep-brand); }
.mrep-funnel-pop { position: absolute; z-index: 1100; background: #fff; border: 1px solid var(--mrep-line); border-radius: 6px; box-shadow: var(--mrep-shadow-md); padding: 6px; min-width: 210px; }
.mrep-funnel-search { width: 100%; box-sizing: border-box; margin: 2px 0 6px; padding: 5px 8px; font-size: 12px; border: 1px solid var(--mrep-line); border-radius: 5px; outline: none; }
.mrep-funnel-search:focus { border-color: var(--mrep-brand); }
.mrep-funnel-list { max-height: 220px; overflow: auto; }
.mrep-funnel-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 13px; border-radius: 5px; cursor: pointer; }
.mrep-funnel-item:hover { background: var(--mrep-brand-050); }
.mrep-funnel-bar { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--mrep-line-soft); }
.mrep-funnel-bar .mrep-btn { padding: 5px 12px; font-size: 12px; }

/* ----- boolean cell checkboxes (DevExtreme boolean columns) --------------- */
/* inline-flex, NOT flex: a block-level box would sit BELOW the cell's centering strut
   (see .tabulator-cell::before) instead of aligning against it. Horizontal centering
   comes from the column's hozAlign:"center", so nothing is lost by shrink-wrapping. */
.mrep-cell-check-wrap { display: inline-flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; }
.mrep-cell-check-wrap.is-readonly { cursor: default; }
.mrep-cell-check { width: 17px; height: 17px; accent-color: var(--mrep-brand); cursor: pointer; margin: 0; }
.mrep-cell-check-wrap.is-readonly .mrep-cell-check { cursor: default; opacity: .85; }

/* ----- selection checkboxes (left of tree/grid rows) — make them clear ----- */
.tabulator .tabulator-cell input[type="checkbox"],
.tabulator .tabulator-col input[type="checkbox"],
.mrep-selcol input[type="checkbox"] {
    width: 17px; height: 17px; accent-color: var(--mrep-brand); cursor: pointer; vertical-align: middle;
}
.tabulator .tabulator-col.mrep-selcol, .tabulator .tabulator-cell.mrep-selcol { background: var(--mrep-canvas-2, transparent); }

/* ----- Frozen (sticky) columns: pinned action/command column + selection/expand.
   Tabulator sticks them (position:sticky) and gives frozen cells background:inherit.
   Body cells inherit the row's opaque background — but the header .tabulator-col is
   `background:transparent` (so the header BAR shows for normal cols), which leaves a
   frozen HEADER cell see-through: the scrolling column headers (MRP, Active/InActive…)
   bleed through it. So force frozen header/body/calc cells to a SOLID background, and
   soften Tabulator's harsh #aaa divider to the theme line + a soft shadow. --------- */
.tabulator .tabulator-header .tabulator-col.tabulator-frozen { background: #f5f6f8; }
.tabulator .tabulator-row .tabulator-cell.tabulator-frozen,
.tabulator .tabulator-calcs .tabulator-cell.tabulator-frozen { background: inherit; }
html.theme-dark .tabulator .tabulator-header .tabulator-col.tabulator-frozen { background: var(--mrep-canvas-2); }
.tabulator .tabulator-frozen.tabulator-frozen-right {
    border-left: 1px solid var(--mrep-line) !important;
    box-shadow: -5px 0 7px -5px rgba(0, 0, 0, .16);
}
.tabulator .tabulator-frozen.tabulator-frozen-left {
    border-right: 1px solid var(--mrep-line) !important;
    box-shadow: 5px 0 7px -5px rgba(0, 0, 0, .16);
}
html.theme-dark .tabulator .tabulator-frozen.tabulator-frozen-right,
html.theme-dark .tabulator .tabulator-frozen.tabulator-frozen-left {
    box-shadow: none;
}

/* ----- Column tint classes (DevExtreme cssClass on Sale/Report grids) ------
   Applied via a column's `cssClass` (e.g. DistributorCss). Tabulator puts the
   class on both the header cell and the body cells, so the whole column group
   gets a soft tint — light + dark variants. */
.tabulator-cell.DistributorCss, .tabulator-col.DistributorCss { background-color: #EAF4FF; }
.tabulator-cell.DiscontinueCss, .tabulator-col.DiscontinueCss { background-color: #FBF3DE; }
.tabulator-cell.TerritoryCss,   .tabulator-col.TerritoryCss   { background-color: #FCEBDD; }
html.theme-dark .tabulator-cell.DistributorCss, html.theme-dark .tabulator-col.DistributorCss { background-color: #172a3f; color: var(--mrep-ink); }
html.theme-dark .tabulator-cell.DiscontinueCss, html.theme-dark .tabulator-col.DiscontinueCss { background-color: #2c2917; color: var(--mrep-ink); }
html.theme-dark .tabulator-cell.TerritoryCss,   html.theme-dark .tabulator-col.TerritoryCss   { background-color: #2e2016; color: var(--mrep-ink); }
/* Dark: the footer/header CALC (grand-total) rows keep Tabulator's hard-coded
   light `#f3f3f3 !important` (4-class selector) — override the row bg with a
   MORE specific selector so non-tinted total cells aren't left light. */
html.theme-dark .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row,
html.theme-dark .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row { background: var(--mrep-canvas-2) !important; }

/* ----- DevExtreme display toggles (CMS Display settings) — additive ------- */
.mrep-grid--rowlines .tabulator-row { border-bottom: 1px solid var(--mrep-line); }
.mrep-grid--borders .tabulator-cell { border-right: 1px solid var(--mrep-line); }
.mrep-grid--borders .tabulator-header .tabulator-col { border-right: 1px solid var(--mrep-line); }
.mrep-grid--alt .tabulator-row.tabulator-row-even { background: var(--mrep-canvas-2, #f6f8fa); }
.mrep-grid--hover .tabulator-row:hover { background: var(--mrep-brand-050); }
.mrep-grid--wrap .tabulator-cell,
.mrep-grid--wrap .tabulator-cell .mrep-cell-inner { white-space: normal; text-overflow: clip; }
/* Row lines / cell borders / hover are baked ON in the base theme (above). These
   "off" classes let the CMS Display toggles actually REMOVE them when turned off. */
.mrep-grid--norowlines .tabulator-row { border-bottom: none !important; }
.mrep-grid--noborders .tabulator-row .tabulator-cell { border-right: none !important; }
.mrep-grid--nohover .tabulator-row:hover { background: #fff !important; }
.mrep-grid--nohover .tabulator-row.tabulator-row-even:hover { background: #fff !important; }
/* Pager Visible = off -> hide the pager, NOT the whole footer: Tabulator renders the
   bottom summary/totals row (.tabulator-calcs-holder) INSIDE .tabulator-footer, so
   display:none on the footer took every grid's footer totals down with the pager. */
.mrep-grid--nopager .tabulator-footer > .tabulator-footer-contents,
.mrep-grid--nopager .tabulator-footer > .tabulator-paginator,
.mrep-grid--nopager .tabulator-footer > .tabulator-page-counter,
.mrep-grid--nopager .tabulator-footer > .tabulator-pages { display: none !important; }
/* ...and when there are no totals either, drop the empty grey strip entirely. */
.mrep-grid--nopager.mrep-grid--nocalcs .tabulator-footer { display: none !important; }
/* Pager Navigation Buttons off -> hide first/prev/next/last, keep page numbers */
.mrep-grid--nonav .tabulator-footer .tabulator-page[data-page="first"],
.mrep-grid--nonav .tabulator-footer .tabulator-page[data-page="prev"],
.mrep-grid--nonav .tabulator-footer .tabulator-page[data-page="next"],
.mrep-grid--nonav .tabulator-footer .tabulator-page[data-page="last"] { display: none !important; }

/* ----- row action icons (edit/delete/save/cancel) — used project-wide -----
   INLINE-flex, never flex. Every body cell carries a full-height inline strut
   (.tabulator-cell::before) to centre its content; a block-level flex box cannot share
   that strut's line, so it dropped onto the line BELOW it. The consequences were both
   halves of the same bug, on every grid with an Edit/Delete column:
     • the icons sat past the bottom of the cell and were clipped away by the cell's
       overflow:hidden — "the edit icon is not showing even though Edit is allowed";
     • the command cell became strut-height + icon-height tall (~55px), and Tabulator
       sizes every row to its tallest cell — "too much cell spacing/padding".
   Inline-flex sits ON the strut's line, so the icons are visible, centred, and rows
   return to their natural height. */
.mrep-rowcmd { display: inline-flex; gap: 4px; justify-content: center; align-items: center; vertical-align: middle; }
.mrep-cmd-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: none; border-radius: 6px;
    background: transparent; cursor: pointer; color: var(--mrep-muted);
    transition: background .12s ease, color .12s ease;
}
.mrep-cmd-icon:hover { background: var(--mrep-canvas-2, #eef2f6); }
.mrep-cmd-edit { color: var(--mrep-brand-700); }
.mrep-cmd-edit:hover { background: var(--mrep-brand-050); color: var(--mrep-brand-700); }
.mrep-cmd-delete { color: var(--mrep-danger); }
.mrep-cmd-delete:hover { background: rgba(220, 75, 79, .12); color: var(--mrep-danger); }
.mrep-cmd-save { color: var(--mrep-pos, #2e9e5b); }
.mrep-cmd-save:hover { background: rgba(46, 158, 91, .14); }
.mrep-cmd-cancel { color: var(--mrep-muted); }
.tabulator .tabulator-cell .mrep-row-edit { width: 100%; box-sizing: border-box; padding: 3px 7px; font-size: 12px; height: 30px; border: 1px solid var(--mrep-line); border-radius: 5px; background: #fff; color: var(--mrep-ink); }
.tabulator .tabulator-cell .mrep-row-edit:focus { border-color: var(--mrep-brand); outline: none; box-shadow: 0 0 0 2px rgba(42,171,160,.18); }
.tabulator .tabulator-row.mrep-row-editing { background: var(--mrep-brand-050); }

/* keep cellTemplate output inline so the tree toggle sits BESIDE the label,
   not on a line above it (a block wrapper pushed the menu name down)

   overflow/text-overflow match .mrep-cell-inner so a cellTemplate column truncates
   with a "…" like every other column. Without them the box was overflow:visible /
   text-overflow:clip: the CELL clipped the text but the ellipsis never rendered
   (text-overflow cannot apply to an atomic inline-block child), so long template
   text was cut mid-character with no indication it had been cut.

   Safe for templates that deliberately wrap (e.g. the Incentive report's
   Calculation note, which sets white-space:normal on its own inner span): this box
   is inline-block with auto height, so a wrapping child makes it TALLER rather than
   overflowing sideways — nothing to clip horizontally, and the row height is still
   governed by the cell as before. */
.tabulator .tabulator-cell .mrep-cell-tpl {
    display: inline-block; vertical-align: middle; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
}

/* Opt-in modifier for a cell whose value IS markup — a coloured bar, a meter, a
   progress strip (e.g. the Logged Events location bar). Those span the whole cell,
   the way the old grid drew them; the boxes above are sized to their text so
   ordinary cells can ellipsis-truncate, which left such a bar only as wide as its
   label.

   Stays INLINE-block on purpose. The cells here carry a full-height inline strut
   (the ::before above) to centre their content: a display:block box lands on the
   line BELOW that strut, which drops the bar to the bottom of a double-height row.
   Inline-block at width:100% sits on the strut's line — the strut is zero-width, so
   it still fills the cell — and vertical-align keeps it centred. */
.tabulator .tabulator-cell .mrep-cell-tpl.mrep-cell-html,
.tabulator .tabulator-cell .mrep-cell-inner.mrep-cell-html {
    display: inline-block; width: 100%; max-width: 100%;
    vertical-align: middle; overflow: hidden; white-space: normal;
}

/* ----- hierarchy level tints (theme-aware) — add class mrep-tree-lvl-N to a
   row (via onRowPrepared) and the colour follows light/dark automatically ---- */
.tabulator-row.mrep-tree-lvl-1 { background: #ffffff; }
.tabulator-row.mrep-tree-lvl-2 { background: #e3e5e8; }
.tabulator-row.mrep-tree-lvl-3 { background: #e0ffff; }
.tabulator-row.mrep-tree-lvl-4 { background: #f7f6e1; }
.tabulator-row.mrep-tree-lvl-5 { background: #efddff; }
html.theme-dark .tabulator-row.mrep-tree-lvl-1 { background: #182236; }
html.theme-dark .tabulator-row.mrep-tree-lvl-2 { background: #242f47; }
html.theme-dark .tabulator-row.mrep-tree-lvl-3 { background: #123a3d; }
html.theme-dark .tabulator-row.mrep-tree-lvl-4 { background: #3a3519; }
html.theme-dark .tabulator-row.mrep-tree-lvl-5 { background: #2d1f40; }
/* cells transparent so the row tint shows; text uses theme ink for contrast */
.tabulator-row[class*="mrep-tree-lvl-"] .tabulator-cell { background: transparent; color: var(--mrep-ink); }

/* Kendo TreeList gets the same tints — see mrepui-kendo.css, which is where every
   Kendo rule lives (it has to load AFTER Kendo's own stylesheet to win). */

/* ----- tree hierarchy: clean expand/collapse toggle + clear indentation --- */
.tabulator .tabulator-data-tree-control {
    border: none; background: transparent; width: 18px; height: 18px; margin-right: 6px;
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
}
.tabulator .tabulator-data-tree-control:hover { background: transparent; }
.mrep-tree-tog { position: relative; width: 15px; height: 15px; border: 1px solid var(--mrep-line); border-radius: 4px;
    background: var(--mrep-canvas-2, #f2f5f8); display: inline-block; }
.mrep-tree-tog::before, .mrep-tree-tog::after { content: ""; position: absolute; background: var(--mrep-brand-700); }
/* horizontal bar (both states) */
.mrep-tree-tog::before { left: 3px; right: 3px; top: 6px; height: 2px; }
/* vertical bar (only the "expand/+" state) */
.mrep-tree-exp::after { top: 3px; bottom: 3px; left: 6px; width: 2px; }
.tabulator .tabulator-data-tree-control:hover .mrep-tree-tog { border-color: var(--mrep-brand); background: var(--mrep-brand-050); }
/* indentation guide so nested levels read clearly against the row lines */
.tabulator .tabulator-data-tree-branch-empty { display: inline-block; }

/* ----- clickable menu-name link (DevExtreme dx-link) --------------------- */
.tabulator .tabulator-cell .dx-link,
.mrep-cell-tpl .dx-link {
    color: var(--mrep-brand-700); font-weight: 600; cursor: pointer; text-decoration: none;
    border-bottom: 1px dashed var(--mrep-brand); padding-bottom: 1px;
}
.tabulator .tabulator-cell .dx-link:hover,
.mrep-cell-tpl .dx-link:hover { color: var(--mrep-brand); border-bottom-style: solid; }

@media (max-width: 768px) {
    .mrep-popup { width: 96%; }
    .mrep-form-grid { grid-template-columns: 1fr !important; }
}