/* ============================================================================
   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 plain-text cells while keeping the ellipsis. Tabulator forces
   each cell to the row height and top-aligns raw text, so the space above vs below
   the text looks uneven. We can't flex the cell (kills text-overflow:ellipsis) or
   change its display (breaks the inline-block column layout) — so the text is
   wrapped in .mrep-cell-inner and centered against a full-height strut. Scoped via
   :has() to text cells only, so button/checkbox/template cells are untouched. */
.tabulator .tabulator-row .tabulator-cell:has(> .mrep-cell-inner)::before {
    content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle;
}
.mrep-cell-inner {
    display: inline-block; vertical-align: middle; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 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;
}
/* 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); }
.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); }
html.theme-dark .mrep-loader.mrep-loader--full { background: rgba(14, 21, 36, .55); }
@keyframes mrep-spin { to { transform: rotate(360deg); } }

/* 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: wrap; 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; }
.mrep-tagbox-chip b { cursor: pointer; opacity: .85; }
.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); }

/* 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;
}

.mrep-btn-ico { display: none; }

/* ===================== 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; }

/* 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-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) --------------- */
.mrep-cell-check-wrap { display: flex; align-items: center; justify-content: center; height: 100%; 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 { white-space: normal; }

/* ----- row action icons (edit/delete/save/cancel) — used project-wide ----- */
.mrep-rowcmd { display: flex; gap: 4px; justify-content: center; align-items: center; }
.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) */
.tabulator .tabulator-cell .mrep-cell-tpl { display: inline-block; vertical-align: middle; max-width: 100%; }

/* ----- 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); }

/* ----- 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; }
}