/* ══════════════════════════════════════════════════════════════════════
   BOOT SPLASH — shown before the Blazor circuit renders (App.razor uses
   prerender:false, so the first response has no page content). Removed once
   the circuit starts. Solid fallback colour so it's never a black void.
   ══════════════════════════════════════════════════════════════════════ */
/* Wrapper around the interactive root — used only so the boot script can detect
   the app's first render. display:contents = no box, so it can't affect layout. */
#app-root { display: contents; }
#app-splash {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px;
    background: var(--erp-bg, #f7f9fc);
    color: var(--erp-text-soft, #64748b);
    font-family: "Inter", "IBM Plex Sans", system-ui, sans-serif;
    transition: opacity .3s ease;
}
#app-splash.app-splash--hide { opacity: 0; pointer-events: none; }
.app-splash-spinner {
    width: 42px; height: 42px; border-radius: 50%;
    border: 4px solid var(--erp-primary-tint, #dbeafe);
    border-top-color: var(--erp-primary, #2563eb);
    animation: app-splash-spin .8s linear infinite;
}
.app-splash-text { font-size: 14px; font-weight: 500; }
.app-splash-text a { color: var(--erp-primary, #2563eb); font-weight: 600; }
@keyframes app-splash-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════
   ERP DESIGN TOKENS — single source of truth for the entire application.
   Reference these via var(--erp-*) everywhere. Do not hard-code colors,
   radii, or spacing outside this block.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand ──────────────────────────────────────────────── */
  --erp-primary:        #2563eb;
  --erp-primary-hover:  #1d4ed8;
  --erp-primary-active: #1e40af;
  --erp-primary-tint:   #dbeafe;
  --erp-primary-band:   #1e3a5f;

  /* ── Status ─────────────────────────────────────────────── */
  --erp-success: #22c55e;
  --erp-warning: #f59e0b;
  --erp-danger:  #ef4444;
  --erp-info:    #3b82f6;

  /* ── Neutrals (light) ───────────────────────────────────── */
  --erp-bg:            #f7f9fc;
  --erp-surface:       #ffffff;
  --erp-surface-alt:   #f8fafc;
  --erp-surface-soft:  #fafbfd;
  --erp-border:        #eef2f7;        /* lighter — borders should feel like hints */
  --erp-border-strong: #d8e1ec;
  --erp-text:          #0f172a;
  --erp-text-muted:    #64748b;
  --erp-text-soft:     #94a3b8;
  --erp-label:         #475569;        /* labels darker neutral, not blue */

  /* ── Geometry ───────────────────────────────────────────── */
  --erp-radius-sm: 6px;
  --erp-radius:    10px;
  --erp-radius-lg: 14px;
  --erp-radius-pill: 999px;

  --erp-row-h:  30px;   /* form input height  */
  --erp-tab-h:  36px;
  --erp-cell-h: 36px;   /* grid row height — bigger for breathing room */
  --erp-nav-h:  60px;   /* taller navbar */
  --erp-side-w: 324px;   /* module rail (56) + panel (~268) — room for long object names */
  --erp-side-w-rail: 64px;

  /* ── Input-specific (form fields) ──────────────────────── */
  --erp-input-bg:           #f4f8fd;
  --erp-input-bg-readonly:  #f1f5f9;
  --erp-input-bg-mandatory: #eefaf1;   /* subtle GREEN tint (mandatory) */
  --erp-input-bg-optional:  #fefae6;   /* subtle YELLOW tint (optional) */
  --erp-input-bg-disabled:  #eceff4;   /* slightly darker gray */
  --erp-input-border:       #d8e3f0;   /* softer */
  --erp-input-border-focus: var(--erp-primary);
  --erp-input-radius:       8px;

  --erp-gap-xs: 4px;
  --erp-gap-sm: 8px;
  --erp-gap:    12px;
  --erp-gap-lg: 16px;
  --erp-gap-xl: 24px;

  /* ── Elevation — soft modern shadows, not hard borders ─ */
  --erp-shadow-sm:   0 1px 2px rgba(15,23,42,.04);
  --erp-shadow:      0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.04);
  --erp-shadow-md:   0 4px 12px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --erp-shadow-lg:   0 12px 32px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.06);
  --erp-shadow-xl:   0 24px 48px rgba(15,23,42,.14), 0 8px 16px rgba(15,23,42,.08);
  --erp-shadow-hover:0 8px 20px rgba(37,99,235,.12), 0 2px 6px rgba(15,23,42,.06);

  /* Soft gradients */
  --erp-gradient-primary: linear-gradient(135deg, #2563eb 0%, #4f7ef5 100%);
  --erp-gradient-surface: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);

  /* ── Typography ─────────────────────────────────────────── */
  /* Inter/IBM Plex Sans for Latin, Noto Sans Arabic for Arabic glyphs,
     Segoe UI as the offline fallback. */
  --erp-font: 'Inter', 'IBM Plex Sans', 'Noto Sans Arabic', 'Segoe UI', -apple-system, system-ui, sans-serif;
  --erp-font-arabic: 'Noto Sans Arabic', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --erp-fs-label:   12px;
  --erp-fs-input:   12px;
  --erp-fs-tab:     13px;
  --erp-fs-grid:    12.5px;
  --erp-fs-toolbar: 13px;
}

[data-bs-theme="dark"] {
  --erp-bg:            #0b1220;
  --erp-surface:       #1e293b;
  --erp-surface-alt:   #273449;
  --erp-border:        #334155;
  --erp-border-strong: #475569;
  --erp-text:          #f1f5f9;
  --erp-text-muted:    #94a3b8;
  --erp-label:         #6ea8fe;
  --erp-primary-tint:  rgba(96,165,250,.15);
  --erp-primary-band:  #0b1f3a;

  --erp-input-bg:           #1a2538;
  --erp-input-bg-readonly:  #131b29;
  --erp-input-bg-mandatory: #16271d;   /* subtle GREEN tint (mandatory) */
  --erp-input-bg-optional:  #2a2614;   /* subtle YELLOW tint (optional) */
  --erp-input-bg-disabled:  #131b29;
  --erp-input-border:       #3a5a8c;
  --erp-input-border-focus: #6ea8fe;
}

/* ── Blazor framework ──────────────────────────────────────────────── */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmsiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* ── Form validation ───────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--bs-success); }
.invalid                             { outline: 1px solid var(--bs-danger); }
.validation-message                  { color: var(--bs-danger); }

/* ── Navigation tree (used by NavTreeNode child component) ────────── */
.zoom-tree {
    font-family: var(--erp-font);
    font-size: 11.5px;
    letter-spacing: -0.01em;
    padding: 2px 4px;
}

.zoom-node-wrapper { margin-left: 8px; }

.zoom-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: var(--erp-radius);
    cursor: pointer;
    transition: background .15s, color .15s;
    color: var(--erp-text);
    min-height: 28px;
    position: relative;   /* anchor for the absolutely-positioned favorite star */
}
.zoom-node:hover { background: var(--erp-primary-tint); }
.zoom-node:hover span,
.zoom-node:hover * { color: var(--erp-primary) !important; }

.zoom-node-module > .zoom-node {
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 7px 12px 4px !important;
    margin-top: 6px;
    color: var(--erp-text-soft) !important;
    cursor: pointer;
    min-height: auto;
}
.zoom-node-module > .zoom-node:hover { background: transparent; color: var(--erp-primary) !important; }

.zoom-node-module > .zoom-node > .zoom-icon {
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 7px;
    font-size: 13px;
    flex-shrink: 0;
    text-align: center;
}

.zi-white { color: #ffffff !important; }

.zoom-icon {
    flex-shrink: 0;
    display: inline-block !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-style: normal;
}

/* ── Favorite star on tree object rows ───────────────────────────── */
.zoom-node-label {
    flex: 1; min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;          /* wrap to at most two lines, then ellipsize */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
    word-break: break-word;
}
.zoom-fav-star {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--erp-radius-sm);
    font-size: 11px; color: var(--erp-text-soft);
    background: var(--erp-primary-tint);   /* small chip so it stays legible over text */
    opacity: 0;
    transition: opacity .15s, color .15s;
}
.zoom-obj-node:hover .zoom-fav-star { opacity: .85; }
.zoom-fav-star:hover     { opacity: 1 !important; color: #f59e0b !important; background: rgba(245,158,11,.16); }
.zoom-fav-star.is-fav    { opacity: 1; color: #f59e0b !important; background: rgba(245,158,11,.14); }
/* Favorited rows show the star permanently, so reserve room for it. */
.zoom-node.is-fav-row .zoom-node-label { padding-right: 22px; }

/* ── Sidebar Favorites / Recent quick-access sections ────────────── */
.nav-quick { margin: 2px 0; }
.nav-quick-head {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 12px 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--erp-text-soft);
    cursor: pointer; user-select: none;
}
.nav-quick-head:hover { color: var(--erp-primary); }
.nav-quick-caret { font-size: 9px; width: 10px; flex-shrink: 0; }
.nav-quick-ico { font-size: 11px; }
.nav-quick-ico--fav { color: #f59e0b; }
.nav-quick-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; margin: 0 0 1px;
    border-radius: var(--erp-radius);
    cursor: pointer; color: var(--erp-text);
    transition: background .15s, color .15s;
    min-height: 32px;
}
.nav-quick-item:hover { background: var(--erp-primary-tint); color: var(--erp-primary); }
.nav-quick-item-ico { font-size: 12px; color: var(--erp-text-soft); flex-shrink: 0; }
.nav-quick-item:hover .nav-quick-item-ico { color: var(--erp-primary); }
.nav-quick-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.nav-quick-star {
    flex-shrink: 0; width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--erp-radius-sm);
    font-size: 11px; color: var(--erp-text-soft);
    opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
.nav-quick-item:hover .nav-quick-star { opacity: .55; }
.nav-quick-star:hover  { opacity: 1 !important; color: #f59e0b !important; background: rgba(245,158,11,.14); }
.nav-quick-star.is-fav { opacity: 1; color: #f59e0b !important; }
.nav-quick-divider { height: 1px; background: var(--erp-border); margin: 8px 10px; }

.zoom-expand-arrow {
    font-size: 9px;
    color: var(--erp-text-muted);
    margin-left: auto;
    padding-right: 2px;
    flex-shrink: 0;
    transition: transform .2s, color .15s;
    display: inline-block !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-style: normal;
}
.zoom-expanded > .zoom-node .zoom-expand-arrow {
    transform: rotate(90deg);
    color: var(--erp-primary);
}

.zoom-children {
    max-height: 0;
    overflow: hidden;
    margin-left: 18px;
    transition: max-height 0.25s ease;
}
.zoom-expanded > .zoom-children { max-height: 2000px; }

.zoom-highlight {
    background: yellow;
    color: black !important;
    padding: 0 2px;
    border-radius: 2px;
}

.tree-loading { display: flex; align-items: center; padding: 16px 12px; }

/* ── DynamicField (shared, rendered inside DynamicObject) ─────────── */
.required-label::after { content: " *"; color: var(--bs-danger, #dc2626); }
.dyn-separator   { border-color: var(--bs-border-color, #e2e8f0); margin: 8px 0 4px; }
.dyn-label-field { padding: 6px 0 2px; border-bottom: 1px solid var(--bs-border-color, #e2e8f0); }

/* ────────────────────────────────────────────────────────────────────
   Office-style ERP theme
   Inspired by the legacy ZoomERPWeb look — blue labels, solid-blue
   active tabs, grouped flat icon toolbar.
   ──────────────────────────────────────────────────────────────────── */

/* ── Office-style horizontal field rows ─────────────────────────── */
.dyn-field-wrap {
    padding: 4px 10px;
    min-height: 36px;
}

.dyn-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
}

.dyn-label {
    flex: 0 0 38%;
    color: var(--bs-primary);
    font-size: 12.5px;
    font-weight: 600;
    margin: 0;
    padding-right: 4px;
    line-height: 1.25;
    word-break: break-word;
    letter-spacing: .1px;
}
[data-bs-theme="dark"] .dyn-label { color: #6ea8fe; }

.dyn-field-input {
    flex: 1 1 auto;
    min-width: 0;
}

.dyn-field-checkbox .dyn-field-input { display: flex; align-items: center; }

.required-label::after { content: " *"; color: var(--bs-danger); margin-left: 1px; }

/* Compact DX inputs — match the legacy ERP density (~30px tall) */
.dyn-field-input .dxbl-edit,
.dyn-field-input .dxbl-textbox,
.dyn-field-input .dxbl-combobox,
.dyn-field-input .dxbl-spin-edit,
.dyn-field-input .dxbl-date-edit { font-size: 13px; }

.dyn-field-input .dxbl-edit input,
.dyn-field-input .dxbl-edit .dxbl-edit-input {
    min-height: 28px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* ── Action List dropdown (matches dark-blue button in target) ──── */
.dyn-actionlist-btn {
    width: 100%;
    background: var(--bs-primary);
    color: #fff !important;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    transition: filter .12s;
}
.dyn-actionlist-btn:hover { filter: brightness(.92); }
.dyn-actionlist-btn.dropdown-toggle::after { margin-left: auto; }

.dyn-actionlist-backdrop {
    position: fixed; inset: 0; z-index: 1040;
}

/* ── Tabs: solid-blue active state (compact legacy look) ──────── */
.dyn-tabs {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0 4px;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}
.dyn-tabs::-webkit-scrollbar { height: 4px; }
.dyn-tabs::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 2px; }

.dyn-tabs .nav-link {
    border: 0;
    border-radius: 5px 5px 0 0;
    color: var(--bs-body-color);
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 500;
    margin: 0 1px -1px 1px;
    background: transparent;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.dyn-tabs .nav-link:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-primary);
}
.dyn-tabs .nav-link.active {
    background: var(--bs-primary) !important;
    color: #fff !important;
    font-weight: 600;
}

/* ── Office-style toolbar ──────────────────────────────────────── */
.dyn-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bs-body-tertiary);
    border-bottom: 1px solid var(--bs-border-color);
    min-height: 52px;
    flex-wrap: wrap;
}

.dyn-toolbar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}
.dyn-toolbar-meta { line-height: 1.15; }
.dyn-toolbar-name { font-weight: 600; font-size: 14px; color: var(--bs-body-color); }
.dyn-toolbar-sub {
    font-size: 11px;
    color: var(--bs-secondary-color);
    margin-top: 1px;
}

.dyn-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
}

.dyn-toolbar-extras {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Toolbar button groups (separated by vertical rule) */
.dyn-tb-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    border-right: 1px solid var(--bs-border-color);
}
.dyn-tb-group:last-of-type { border-right: 1px solid var(--bs-border-color); }

/* Flat icon-only toolbar button */
.dyn-tb-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--bs-body-color);
    padding: 6px 9px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    font-size: 14px;
    line-height: 1;
}
.dyn-tb-btn:hover:not(:disabled) {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}
.dyn-tb-btn:disabled { opacity: .4; cursor: not-allowed; }

.dyn-tb-success { color: #198754; }
.dyn-tb-warning { color: #fd7e14; }
.dyn-tb-danger  { color: #dc3545; }

/* Prominent "Print" button (matches Action List style in screenshot) */
.dyn-tb-print {
    background: var(--bs-primary);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background .15s;
}
.dyn-tb-print:hover {
    filter: brightness(0.92);
}

/* Inline badges (no longer using btn-classes that change height) */
.dyn-tb-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid;
}
.dyn-tb-badge-danger {
    background: rgba(220, 53, 69, .1);
    border-color: rgba(220, 53, 69, .25);
    color: #dc3545;
}
.dyn-tb-badge-warning {
    background: rgba(253, 126, 20, .1);
    border-color: rgba(253, 126, 20, .25);
    color: #fd7e14;
}

/* Notification dot for approvals icon */
.dyn-tb-dot {
    position: absolute;
    top: 3px; right: 3px;
    width: 8px; height: 8px;
    background: #dc3545;
    border-radius: 50%;
    border: 1.5px solid var(--bs-body-tertiary);
}

/* ── ChildGrid (shared, rendered inside DynamicObject) ────────────── */
.child-grid { border-radius: 0; font-size: 11.5px; letter-spacing: -0.01em; }
/* Child grids reuse the .dd-grid skin — pin them a touch smaller than the main grid. */
.dd-grid.erp-grid--child { font-size: 11.5px; }

/* ══════════════════════════════════════════════════════════════════
   DrillDown — custom infinite-scroll grid (mirrors legacy DrillDown.aspx)
   ══════════════════════════════════════════════════════════════════ */
.dd-card {
    overflow: hidden;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-lg);
    background: var(--erp-surface);
    box-shadow: var(--erp-shadow-md);
    display: flex;
    flex-direction: column;
}

/* Keep the drilldown inside the viewport: bound the OUTER card (`.card.dd-card`,
   not the mobile row cards) to the space below the navbar + tab bar, and let the
   grid flex-fill and scroll INTERNALLY. This avoids the whole page scrolling.
   Desktop only — mobile uses a card list and may scroll the page normally. */
@media (min-width: 768px) {
    .card.dd-card {
        /* navbar(var) + tab bar(42) + breadcrumb(33) + p-3 top/bottom(16+16)
           + main padding-bottom(40) = var + 147 (round to 150 for a tiny buffer) */
        max-height: calc(100vh - var(--erp-nav-h) - 150px);
    }
    .card.dd-card .dd-grid {
        flex: 1 1 auto;
        min-height: 0;     /* allow the grid to shrink so its own scroller engages */
    }
    .card.dd-card .erp-pager { flex-shrink: 0; }
}

/* Toolbar */
.dd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 64px;
    background: var(--erp-surface);
    border-bottom: 1px solid var(--erp-border);
    gap: 12px;
    flex-shrink: 0;
}
.dd-toolbar-left  { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dd-toolbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dd-toolbar-icon  { color: var(--erp-primary); font-size: 16px; flex-shrink: 0; }

/* Mobile: let the toolbar wrap (fixed 64px height clipped the New button). */
@media (max-width: 767px) {
    .dd-toolbar { height: auto; min-height: 52px; flex-wrap: wrap; padding: 8px 12px; row-gap: 8px; }
    .dd-toolbar-right { flex-wrap: wrap; }
}
.dd-title {
    font-size: 18px; font-weight: 700;
    letter-spacing: -.2px;
    color: var(--erp-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 320px;
}
.dd-badge {
    background: var(--erp-surface-alt);
    color: var(--erp-text-muted);
    font-size: 11.5px; font-weight: 600;
    padding: 3px 10px; border-radius: var(--erp-radius-pill);
    border: 1px solid var(--erp-border-strong);
    white-space: nowrap; flex-shrink: 0;
}

/* Search box in toolbar */
.dd-search-wrap {
    display: flex; align-items: center;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius);
    padding: 0 10px; gap: 6px;
    height: 32px; min-width: 220px;
    transition: border-color .15s, box-shadow .15s;
}
.dd-search-wrap:focus-within {
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.dd-search-wrap i { color: var(--erp-text-muted); font-size: 13px; }
.dd-search-inp {
    border: none; outline: none; flex: 1; font-size: 13px;
    color: var(--erp-text); background: transparent;
    font-family: inherit;
}
.dd-search-clear {
    background: none; border: none; cursor: pointer;
    color: var(--erp-text-muted); padding: 0; font-size: 12px;
}
.dd-search-clear:hover { color: var(--erp-danger); }

/* Export button */
.dd-tb-action {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--erp-surface);
    color: var(--erp-text);
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius);
    padding: 6px 14px;
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
/* Hint shown when the grid is column-capped (export still includes all) */
.dd-col-hint {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 600;
    color: var(--erp-text-muted);
    background: var(--erp-surface-alt);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-pill);
    padding: 3px 10px;
    white-space: nowrap; cursor: help;
}
/* Extra-condition hint (a card's raw DrillFilter pre-filtering this list) */
.dd-cardfilter {
    display: flex; align-items: center; gap: 8px;
    margin: 8px 12px 0;
    font-size: 12px; color: var(--erp-text-soft, #475569);
    background: var(--erp-primary-tint, #e0ecff);
    border: 1px solid var(--erp-primary, #2563eb);
    border-radius: 8px; padding: 6px 10px;
}
.dd-cardfilter > i { color: var(--erp-primary, #2563eb); font-size: 11px; flex-shrink: 0; }
.dd-cardfilter-lbl { font-weight: 700; flex-shrink: 0; }
.dd-cardfilter-sql {
    font-family: ui-monospace, Consolas, monospace; font-size: 11.5px;
    color: var(--erp-text, #111827);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.dd-cardfilter-clear {
    margin-inline-start: auto; flex-shrink: 0;
    border: 0; background: none; cursor: pointer; padding: 0 4px;
    color: var(--erp-primary, #2563eb); font-size: 13px;
}
.dd-cardfilter-clear:hover { color: var(--erp-danger, #dc2626); }
.dd-tb-action:hover:not(:disabled) {
    background: var(--erp-primary-tint);
    border-color: var(--erp-primary);
    color: var(--erp-primary);
}
.dd-tb-action:disabled { opacity: .55; cursor: wait; }

/* New record CTA — solid primary, no glow */
.dd-add-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--erp-primary);
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--erp-radius-sm);
    padding: 7px 14px;
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.dd-add-btn:hover {
    background: var(--erp-primary-hover);
    color: #fff;
}

/* Mobile floating Add button (FAB) — the toolbar "New" wraps out of sight on phones,
   so surface a fixed, always-reachable button above the bottom bar (~76px reserved). */
.dd-fab {
    position: fixed;
    inset-inline-end: 18px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--erp-primary); color: #fff;
    border: none; cursor: pointer; font-size: 20px;
    box-shadow: 0 6px 18px rgba(37,99,235,.45);
    z-index: 1080;
    transition: transform .12s ease, background .15s ease;
}
.dd-fab:hover  { background: var(--erp-primary-hover); color: #fff; }
.dd-fab:active { transform: scale(.94); }

/* Filter chip in toolbar */
.dd-clear-filters-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(239,68,68,.1);
    color: var(--erp-danger);
    border: 1px solid rgba(239,68,68,.25);
    border-radius: var(--erp-radius-sm);
    padding: 4px 10px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.dd-clear-filters-btn:hover { background: rgba(239,68,68,.18); }
.dd-filter-count-badge {
    background: var(--erp-danger);
    color: #fff;
    border-radius: 999px;
    padding: 0 6px;
    font-size: 10.5px; font-weight: 700;
}

/* ── DxGrid skin — light, premium enterprise header (Fiori/Stripe feel) ─ */
.dd-grid {
    border: 0 !important;
    font-family: var(--erp-font) !important;
    font-size: 11.5px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;   /* number columns line up */
    color: var(--erp-text);
}
/* Header row — match the slimmer body, a hair smaller for a clean "label" feel. */
.dd-grid thead tr:first-child th,
.dd-grid thead tr:first-child td,
.dd-grid thead tr:first-child th *,
.dd-grid thead tr:first-child td * {
    font-size: 11px !important;
    letter-spacing: -0.005em !important;
}

/* Aggressive header selector — covers all DX v25 thead/header variants.
   Light neutral band, dark slate labels, soft column separators. */
.dd-grid thead tr:first-child th,
.dd-grid thead tr:first-child td {
    background: var(--erp-surface-alt) !important;
    color: var(--erp-label) !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    letter-spacing: .2px !important;
    padding: 0 12px !important;
    border-right: 1px solid var(--erp-border-strong) !important;  /* soft gray vertical gridline */
    border-bottom: 1px solid var(--erp-border-strong) !important;
    /* NOTE: do not add position:sticky here — DevExpress already pins the
       whole <thead> (position:sticky;top:0). A second per-cell sticky context
       fights the frozen-column cells and drops the filter cells out of row. */
    height: 42px;
}
.dd-grid thead tr:first-child th:last-child,
.dd-grid thead tr:first-child td:last-child { border-right: none !important; }

/* Force the HeaderCaptionTemplate content to render in the slate label color */
.dd-grid thead tr:first-child th,
.dd-grid thead tr:first-child td,
.dd-grid thead tr:first-child th *,
.dd-grid thead tr:first-child td *,
.dd-grid .dxbl-grid-header-cell,
.dd-grid .dxbl-grid-header-cell *,
.dd-grid .dxbs-grid-header-cell,
.dd-grid .dxbs-grid-header-cell * {
    color: var(--erp-label) !important;
    white-space: nowrap !important;
}
[data-bs-theme="dark"] .dd-grid thead tr:first-child th,
[data-bs-theme="dark"] .dd-grid thead tr:first-child td {
    background: var(--erp-surface-alt) !important;
    border-bottom-color: var(--erp-border-strong) !important;
}

/* Custom header click area (HeaderCaptionTemplate content) */
.dd-h-click {
    display: flex !important;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    color: var(--erp-label) !important;
    overflow: hidden;
    width: 100%;
    transition: color .12s;
}
.dd-h-click:hover { color: var(--erp-primary) !important; }
.dd-h-click:hover * { color: var(--erp-primary) !important; }
.dd-h-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dd-sort-icon { font-size: 11px; opacity: .95; flex-shrink: 0; color: var(--erp-primary) !important; }

/* Keep the DevExpress column-resize handle (a thin strip at each header's right
   edge) above the custom clickable header caption, so dragging it resizes the
   column instead of triggering the caption's sort click. */
.dd-grid .dxbl-grid-column-resize-anchor {
    z-index: 5 !important;
    pointer-events: auto !important;
}

/* Filter row — second header row */
.dd-grid thead tr:nth-child(2) th,
.dd-grid thead tr:nth-child(2) td,
.dd-grid .dxbl-grid-filter-row td,
.dd-grid .dxbs-grid-filter-row td {
    background: var(--erp-surface) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--erp-border-strong) !important;
    padding: 5px 8px !important;
    vertical-align: middle !important;
    /* No per-cell sticky — the parent <thead> is already sticky (see above). */
}
/* Filter-row cell content fills the cell so the button/inputs stay centred
   and aligned with the column above (no baseline drift, no extra space). */
.dd-grid thead tr:nth-child(2) td > *,
.dd-grid .dxbl-grid-filter-row td > *,
.dd-grid .dxbs-grid-filter-row td > * {
    display: block;
    width: 100%;
}
[data-bs-theme="dark"] .dd-grid thead tr:nth-child(2) th,
[data-bs-theme="dark"] .dd-grid thead tr:nth-child(2) td,
[data-bs-theme="dark"] .dd-grid .dxbl-grid-filter-row td,
[data-bs-theme="dark"] .dd-grid .dxbs-grid-filter-row td {
    background: var(--bs-tertiary-bg) !important;
    border-bottom-color: var(--bs-border-color) !important;
}

.dd-filter-inp {
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    border: 1px solid var(--erp-border-strong) !important;
    border-radius: 7px;
    padding: 1px 8px !important;
    font-size: 11.5px !important;
    color: var(--erp-text);
    background: var(--erp-surface) !important;
    font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    line-height: 1.2 !important;
}
.dd-filter-inp:focus {
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}
.dd-filter-inp.has-value {
    border-color: var(--erp-primary);
    background: var(--erp-primary-tint);
}
/* Date filter: two date inputs side-by-side (was stacked → doubled row height) */
.dd-filter-date {
    padding: 2px 4px;
    font-size: 10.5px;
    min-width: 0;
    flex: 1;
}
.dd-filter-date-wrap {
    display: flex;
    flex-direction: row;
    gap: 3px;
    align-items: center;
    width: 100%;
}

/* Multi-select filter button + dropdown */
.dd-ms-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    height: 28px;
    padding: 0 9px;
    font-size: 12px;
    line-height: 1;
    color: var(--erp-text-muted);
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-radius: 7px;
    cursor: pointer;
    text-align: start;
    overflow: hidden;
    white-space: nowrap;
    transition: border-color .15s, box-shadow .15s, color .15s;
}
.dd-ms-btn > i:first-child { font-size: 10px; opacity: .65; }
.dd-ms-btn > i:last-child  { font-size: 10px; opacity: .6; margin-inline-start: auto; }
.dd-ms-btn:hover { border-color: var(--erp-primary); color: var(--erp-text); }
.dd-ms-btn:focus-visible {
    outline: none;
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.dd-ms-btn.has-value {
    border-color: var(--erp-primary);
    background: var(--erp-primary-tint);
    color: var(--erp-primary);
}
.dd-ms-btn .dd-ms-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.dd-ms-btn .dd-ms-count {
    background: var(--erp-primary);
    color: #fff;
    border-radius: 8px;
    padding: 0 6px;
    font-size: 10px;
    line-height: 14px;
}
.dd-ms-backdrop {
    position: fixed; inset: 0;
    z-index: 1040;
    background: transparent;
}
.dd-ms-drop {
    position: absolute;
    z-index: 1041;
    width: 260px;
    max-width: 90vw;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}
.dd-ms-search {
    position: relative;
}
.dd-ms-search i {
    position: absolute;
    inset-inline-start: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--erp-muted);
    font-size: 11px;
}
.dd-ms-search input {
    width: 100%;
    height: 26px;
    padding-inline-start: 24px;
    padding-inline-end: 8px;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    font-size: 12px;
    background: var(--erp-surface);
    color: var(--erp-text);
    outline: none;
}
.dd-ms-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    padding: 4px;
}
.dd-ms-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    border-radius: var(--erp-radius-sm);
}
.dd-ms-item:hover { background: var(--erp-primary-tint); }
.dd-ms-item input { margin: 0; }
.dd-ms-empty {
    text-align: center;
    color: var(--erp-muted);
    font-size: 11px;
    padding: 8px;
}
.dd-ms-footer {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

/* Fixed table layout — columns honor their explicit widths so drag-resize
   (ColumnResizeMode) actually sticks. Each column starts at WidthFor(type) and
   the user can resize from there. The container scrolls horizontally when the
   total column width exceeds the viewport. */
.dd-grid table {
    table-layout: fixed !important;
    /* width = exact sum of column widths (ColumnsContainer resize mode). No
       min-width:100% — that would force the table to fill the viewport, and a
       fixed-layout table wider than its columns redistributes the slack back
       INTO the columns, so shrinking one would visibly fatten the others. */
    width: max-content !important;
}
/* DevExpress ships `.dxbl-grid .dxbl-grid-table.dxbl-grid-table-content-fit-calc
   { table-layout:auto!important }` (core.min.css). DX adds that `content-fit-calc`
   class whenever it (re)measures column widths — on load AND every time you grab a
   resize handle. In auto layout, a cell's `white-space:nowrap` text sets the
   column's min-content, so the column snaps to its LONGEST visible text and can't
   be dragged narrower than that. Forcing fixed layout here makes DX measure the
   already-fixed (clipped) widths instead, so columns keep their WidthFor() size,
   never balloon to content, and can be resized down to MinWidth (≈ one char).

   The DX rule is specificity (0,3,0); the leading `html` makes ours (0,3,1) so it
   wins unconditionally — no reliance on source order or on `.dd-grid` landing on
   the same element as `.dxbl-grid`. */
html .dd-grid .dxbl-grid-table.dxbl-grid-table-content-fit-calc {
    table-layout: fixed !important;
}

/* Data rows — single-line + ellipsis. Column width comes from each column's
   explicit Width + table-layout:fixed, and overflow:hidden/ellipsis keeps long
   text from blowing the column up — so NO max-width cap here: a !important cap
   would override the inline width DevExpress sets while drag-resizing, making
   columns un-widenable past the cap. */
.dd-grid tbody tr td {
    padding: 4px 12px !important;
    border-right: 1px solid var(--erp-border-strong) !important;   /* soft gray vertical gridline */
    border-bottom: 1px solid var(--erp-border-strong) !important;
    font-size: 11.5px;
    color: var(--erp-text);
    vertical-align: middle !important;
    height: 40px;
    max-height: 40px;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: keep-all !important;
    word-wrap: normal !important;
}
/* No trailing vertical line on the last column. */
.dd-grid tbody tr td:last-child { border-right: 0 !important; }
[data-bs-theme="dark"] .dd-grid tbody tr td {
    border-bottom-color: var(--bs-border-color) !important;
}

/* DX wraps cell text in inner spans/divs — force them to inherit single-line */
.dd-grid tbody tr td > *,
.dd-grid tbody tr td > * > * {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

/* Zebra striping — barely-there contrast for scanability without clutter */
.dd-grid tbody tr:nth-child(even) > td { background: var(--erp-surface-soft); }
[data-bs-theme="dark"] .dd-grid tbody tr:nth-child(even) > td {
    background: rgba(255,255,255,.02);
}
/* Hover — soft brand tint with a left accent for the active row */
.dd-grid tbody tr:hover > td {
    background: #eef4ff !important;
    cursor: pointer;
    box-shadow: inset 2px 0 0 var(--erp-primary);
}
[data-bs-theme="dark"] .dd-grid tbody tr:hover > td {
    background: rgba(110,168,254,.12) !important;
    box-shadow: inset 2px 0 0 var(--erp-primary);
}
/* Selected row — reflects the bound checkbox state via :has(), no JS needed */
.dd-grid tbody tr:has(.dd-chk:checked) > td {
    background: var(--erp-primary-tint) !important;
    box-shadow: inset 3px 0 0 var(--erp-primary);
}
[data-bs-theme="dark"] .dd-grid tbody tr:has(.dd-chk:checked) > td {
    background: rgba(96,165,250,.18) !important;
}

/* ── Status chips (presentational only — value text preserved inside) ─── */
.erp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 2px 10px;
    border-radius: var(--erp-radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid transparent;
}
/* Keep the chip flex (and its gap) even inside the grid cell's
   inline-block cell-content normalisation. */
.dd-grid tbody tr td > .erp-chip { display: inline-flex !important; }
.erp-chip::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: .85;
}
.erp-chip--success { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.erp-chip--warning { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.erp-chip--danger  { background: #fef3f2; color: #b42318; border-color: #fecdca; }
.erp-chip--info    { background: #eff8ff; color: #175cd3; border-color: #b2ddff; }
.erp-chip--neutral { background: #f2f4f7; color: #475467; border-color: #e4e7ec; }
[data-bs-theme="dark"] .erp-chip--success { background: rgba(34,197,94,.15);  color: #6ee7b7; border-color: rgba(34,197,94,.3); }
[data-bs-theme="dark"] .erp-chip--warning { background: rgba(245,158,11,.15); color: #fcd34d; border-color: rgba(245,158,11,.3); }
[data-bs-theme="dark"] .erp-chip--danger  { background: rgba(239,68,68,.15);  color: #fca5a5; border-color: rgba(239,68,68,.3); }
[data-bs-theme="dark"] .erp-chip--info    { background: rgba(59,130,246,.15); color: #93c5fd; border-color: rgba(59,130,246,.3); }
[data-bs-theme="dark"] .erp-chip--neutral { background: rgba(148,163,184,.15);color: #cbd5e1; border-color: rgba(148,163,184,.3); }

/* Row delete button */
.dd-row-del {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 4px;
    transition: background .15s;
}
.dd-row-del:hover { background: rgba(239,68,68,.12); }

/* ── Custom pager ─────────────────────────────────────────────── */
.dd-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    background: var(--bs-body-tertiary);
    border-top: 1px solid var(--bs-border-color);
    font-size: 12.5px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.dd-pager-info, .dd-pager-size {
    color: var(--bs-secondary-color);
    white-space: nowrap;
}
.dd-pager-nav {
    display: flex; align-items: center; gap: 4px;
}
.dd-pg-btn {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    width: 30px; height: 28px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: background .15s, border-color .15s, color .15s;
}
.dd-pg-btn:not(:disabled):hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.dd-pg-btn:disabled { opacity: .35; cursor: not-allowed; }
.dd-pg-num {
    padding: 0 8px;
    color: var(--bs-body-color);
}
.dd-pg-num strong { color: #2563eb; font-weight: 700; }
.dd-pg-select {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 12.5px;
    font-family: inherit;
}

/* Busy spinner next to title */
.dd-busy { color: var(--erp-primary); display: inline-flex; align-items: center; }

/* ── Group panel — "Drag a column header here to group" bar ── */
.dd-grid .dxbl-grid-group-panel,
.dd-grid .dxbs-grid-group-panel {
    background: var(--erp-surface-alt) !important;
    border-bottom: 1px solid var(--erp-border) !important;
    color: var(--erp-text-muted);
    font-size: 12px;
    padding: 6px 12px !important;
    font-style: italic;
}
.dd-grid .dxbl-grid-group-panel .dxbl-grid-group-panel-item,
.dd-grid .dxbs-grid-group-panel .dxbs-grid-group-panel-item {
    background: var(--erp-primary-tint);
    color: var(--erp-primary);
    border: 1px solid var(--erp-primary);
    border-radius: var(--erp-radius-sm);
    padding: 3px 10px;
    font-style: normal;
    font-weight: 600;
    margin-right: 6px;
}

/* ── Group rows ─────────────────────────────────────────── */
.dd-grid .dxbl-grid-group-row td,
.dd-grid .dxbs-grid-group-row td,
.dd-grid tbody tr.dxbl-grid-group-row > td,
.dd-grid tbody tr.dxbs-grid-group-row > td {
    background: var(--erp-primary-tint) !important;
    color: var(--erp-primary) !important;
    font-weight: 600;
    border-bottom: 1px solid var(--erp-primary) !important;
}
.dd-grid .dxbl-grid-group-row td *,
.dd-grid .dxbs-grid-group-row td *,
.dd-grid tbody tr.dxbl-grid-group-row > td *,
.dd-grid tbody tr.dxbs-grid-group-row > td * {
    color: var(--erp-primary) !important;
}

/* ── Group footer (per-group totals) ────────────────────── */
.dd-grid .dxbl-grid-group-footer td,
.dd-grid .dxbs-grid-group-footer td,
.dd-grid tbody tr.dxbl-grid-group-footer > td,
.dd-grid tbody tr.dxbs-grid-group-footer > td {
    background: rgba(37,99,235,.06) !important;
    border-top: 1px solid var(--erp-primary) !important;
    border-bottom: 2px solid var(--erp-primary) !important;
    font-weight: 600;
    color: var(--erp-text);
    font-style: italic;
}

/* ── Grand-total footer (entire grid) ───────────────────── */
.dd-grid .dxbl-grid-footer,
.dd-grid .dxbs-grid-footer,
.dd-grid tfoot td,
.dd-grid tfoot th {
    background: var(--erp-surface-alt) !important;
    color: var(--erp-text) !important;
    font-weight: 700 !important;
    border-top: 2px solid var(--erp-border-strong) !important;
    padding: 8px 12px !important;
    font-size: 12.5px;
}
.dd-grid tfoot td *,
.dd-grid tfoot th * { color: var(--erp-primary) !important; }
[data-bs-theme="dark"] .dd-grid tfoot td,
[data-bs-theme="dark"] .dd-grid tfoot th {
    background: var(--erp-surface-alt) !important;
    color: var(--erp-text) !important;
    border-top-color: var(--erp-border-strong) !important;
}

/* Keep the grand-total row a single compact line even when DX nests
   summary items inside extra wrapper divs */
.dd-grid tfoot tr { height: 38px !important; }
.dd-grid tfoot td,
.dd-grid tfoot th { height: 38px !important; line-height: 20px !important; vertical-align: middle !important; }

/* Pin every grid row so nothing stretches vertically when only a few
   records are returned — the header / filter / data row heights stay
   consistent whether there's 1 row or 1000 rows. */
.dd-grid thead tr:first-child            { height: 32px !important; }
.dd-grid thead tr:nth-child(2)           { height: 32px !important; }
.dd-grid .dxbl-grid-filter-row,
.dd-grid .dxbs-grid-filter-row           { height: 32px !important; }
.dd-grid tbody tr                        { height: 32px !important; }
.dd-grid tbody td {
    height: 32px !important;
    line-height: 17px !important;
    vertical-align: middle !important;
}

/* ── DrillDown loading skeleton (initial fetch) ──────────────── */
.dd-skeleton {
    padding: 0;
    min-height: 320px;
}
.dd-skeleton-head {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    background: var(--erp-surface-alt);
    border-bottom: 1.5px solid var(--erp-border-strong);
    padding: 14px 16px;
}
.dd-skeleton-h-cell {
    height: 14px;
    background: var(--erp-border-strong);
    border-radius: 4px;
}
.dd-skeleton-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.dd-skeleton-row:nth-child(even) { background: #fafbfd; }
.dd-skeleton-cell {
    height: 12px;
    background: linear-gradient(90deg, #eef2f7 0%, #f7f9fc 50%, #eef2f7 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: ddSkelShimmer 1.4s ease-in-out infinite;
}
.dd-skeleton-row:nth-child(odd)  .dd-skeleton-cell { animation-delay: .1s; }
.dd-skeleton-row:nth-child(even) .dd-skeleton-cell { animation-delay: .25s; }
@keyframes ddSkelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
[data-bs-theme="dark"] .dd-skeleton-row:nth-child(even) { background: rgba(255,255,255,.02); }
[data-bs-theme="dark"] .dd-skeleton-cell {
    background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 100%);
    background-size: 200% 100%;
}

/* ── DrillDown modern empty state ───────────────────────────── */
.dd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 32px 72px;
    min-height: 360px;
    color: var(--erp-text);
}
.dd-empty-illustration {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: var(--erp-primary-tint);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
}
.dd-empty-illustration i {
    font-size: 34px;
    color: var(--erp-primary);
}
.dd-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--erp-text);
    margin: 0 0 6px;
}
.dd-empty-sub {
    font-size: 13.5px;
    color: var(--erp-text-muted);
    margin: 0 0 22px;
    max-width: 420px;
}
.dd-empty-actions {
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
[data-bs-theme="dark"] .dd-empty-illustration {
    background: rgba(96,165,250,.12);
}

/* ── Empty data state ───────────────────────────────────────
   DX renders an empty-data placeholder row when the grid has no rows.
   Center the "No data" message and prevent column borders from
   stretching down vertically as separators in the empty area. */
.dd-grid .dxbl-grid-empty-data-row td,
.dd-grid .dxbs-grid-empty-data-row td,
.dd-grid tbody tr.dxbl-grid-empty-data-row > td,
.dd-grid tbody tr.dxbs-grid-empty-data-row > td,
.dd-grid tbody tr[class*="empty-data"] > td,
.dd-grid tbody tr[class*="no-data"] > td {
    text-align: center !important;
    vertical-align: middle !important;
    color: var(--erp-text-muted) !important;
    font-style: italic;
    background: #fff !important;
    border: 0 !important;
    padding: 48px 12px !important;
    font-size: 13px;
}
[data-bs-theme="dark"] .dd-grid tbody tr[class*="empty-data"] > td,
[data-bs-theme="dark"] .dd-grid tbody tr[class*="no-data"] > td {
    background: var(--bs-body-bg) !important;
    color: var(--bs-secondary-color) !important;
}
/* Hide the column-cell borders inside the empty row so we don't see
   vertical separator lines extending down the empty area */
.dd-grid tbody tr[class*="empty-data"] > td,
.dd-grid tbody tr[class*="no-data"] > td { border-right: 0 !important; }

/* ── Approval avatar (DynamicObject approvals panel) ──────────── */
.appr-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bs-secondary-bg);
    border: 1.5px solid var(--bs-border-color);
}

/* Old dyn-grid styles — kept for any other grids in the app */
.dyn-grid-card {
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-body-bg);
}
.dyn-grid { border: 0 !important; font-size: 13px; }

/* DevExpress group panel — subtle theme-aware background, sticky on scroll */
.dyn-grid .dxbs-grid-group-panel,
.dyn-grid .dxbl-grid-group-panel {
    background: var(--bs-body-tertiary, var(--bs-secondary-bg)) !important;
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 12px;
    padding: 6px 12px;
}

/* Header row — Microsoft-blue accent, bold, sticky */
.dyn-grid .dxbs-grid thead th,
.dyn-grid .dxbl-grid thead th {
    background: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color);
    font-weight: 600;
    font-size: 12.5px;
    text-transform: none;
    letter-spacing: .1px;
    border-bottom: 2px solid var(--bs-primary) !important;
    padding: 8px 10px;
    position: sticky;
    top: 0;
    z-index: 2;
}
.dyn-grid .dxbs-grid thead th:hover,
.dyn-grid .dxbl-grid thead th:hover {
    background: var(--bs-secondary-bg) !important;
}

/* Filter row — distinct subtle band */
.dyn-grid .dxbl-grid-filter-row td,
.dyn-grid .dxbs-grid-filter-row td {
    background: var(--bs-body-bg) !important;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 4px 6px;
}

/* ── Single-line data rows (no wrap, ellipsis on overflow) ────── */
.dyn-grid tbody td,
.dyn-grid .dxbs-grid tbody td,
.dyn-grid .dxbl-grid tbody td {
    padding: 5px 10px;
    line-height: 1.4;
    border-bottom: 1px solid var(--bs-border-color) !important;
    vertical-align: middle;
}

/* Force single line + ellipsis on the inner cell-content wrapper DX renders.
   We avoid 'max-width:0' on the <td> itself because DxGrid does not use
   table-layout:fixed, so that trick collapses columns. Instead we target
   the inner text container. */
.dyn-grid tbody td > *,
.dyn-grid .dxbl-grid-edit-cell-content,
.dyn-grid .dxbl-grid-cell-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

/* Zebra stripes — very subtle, both themes */
.dyn-grid tbody tr:nth-child(even) > td {
    background: var(--bs-body-tertiary, rgba(0,0,0,.015));
}

/* Hover — primary-tint */
.dyn-grid tbody tr:hover > td {
    background: rgba(13, 110, 253, .07) !important;
    cursor: pointer;
}
[data-bs-theme="dark"] .dyn-grid tbody tr:hover > td {
    background: rgba(110, 168, 254, .12) !important;
}

/* Focused / selected row */
.dyn-grid tbody tr.dxbl-grid-focused-row > td,
.dyn-grid tbody tr.dxbl-grid-selected-row > td {
    background: rgba(13, 110, 253, .12) !important;
    border-top-color: var(--bs-primary) !important;
}

/* Compact pager/footer */
.dyn-grid .dxbl-grid-pager,
.dyn-grid .dxbs-grid-pager {
    background: var(--bs-body-tertiary);
    border-top: 1px solid var(--bs-border-color);
    padding: 6px 10px;
    font-size: 12px;
}

/* ── Dark-mode DX corrections ─────────────────────────────────────── */
/* Some DX surfaces hardcode white; nudge them to use Bootstrap tokens
   so the page stays consistent when data-bs-theme="dark" is on <html>. */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .card-header { border-bottom-color: var(--bs-border-color); }
[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, .15);
    border-color: rgba(220, 53, 69, .35);
    color: #f1aeb5;
}
[data-bs-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, .15);
    border-color: rgba(25, 135, 84, .35);
    color: #a3cfbb;
}
[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, .15);
    border-color: rgba(255, 193, 7, .35);
    color: #ffe69c;
}

/* ── Saved views dropdown ────────────────────────────────────────── */
.dd-views-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--erp-surface);
    color: var(--erp-text-muted);
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius-sm);
    padding: 4px 10px;
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.dd-views-btn:hover { background: var(--erp-surface-alt); color: var(--erp-text); }
.dd-views-btn.has-value {
    background: var(--erp-primary-tint);
    border-color: var(--erp-primary);
    color: var(--erp-primary);
}
.dd-views-btn > i:first-child { font-size: 11px; }
.dd-views-btn > i:last-child  { font-size: 10px; opacity: .7; }
.dd-views-backdrop { position: fixed; inset: 0; z-index: 1060; }
.dd-views-drop {
    position: absolute; top: calc(100% + 4px); left: 0;
    min-width: 240px; max-width: 320px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-lg);
    z-index: 1061;
    padding: 4px;
    animation: erpFadeIn .12s ease;
}
.dd-views-empty { padding: 12px; font-size: 12px; color: var(--erp-text-soft); text-align: center; }
.dd-views-item {
    display: flex; align-items: center;
    border-radius: var(--erp-radius-sm);
}
.dd-views-item:hover { background: var(--erp-surface-alt); }
.dd-views-item.active { background: var(--erp-primary-tint); }
.dd-views-item-main {
    flex: 1; display: flex; align-items: center; gap: 8px;
    background: transparent; border: 0;
    padding: 7px 10px; cursor: pointer;
    font-size: 12.5px; color: var(--erp-text);
    text-align: left; font-family: inherit;
    min-width: 0;
}
.dd-views-item-main > i { color: var(--erp-primary); font-size: 11px; flex-shrink: 0; }
.dd-views-item-main > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-views-item-del {
    background: transparent; border: 0;
    color: var(--erp-text-soft); cursor: pointer;
    padding: 6px 8px; opacity: 0;
    transition: opacity .12s, color .12s;
}
.dd-views-item:hover .dd-views-item-del { opacity: .7; }
.dd-views-item-del:hover { color: var(--erp-danger); opacity: 1; }
.dd-views-divider { height: 1px; background: var(--erp-border); margin: 4px 0; }
.dd-views-action {
    width: 100%; display: flex; align-items: center; gap: 8px;
    background: transparent; border: 0;
    padding: 7px 10px; cursor: pointer;
    font-size: 12.5px; color: var(--erp-text); font-family: inherit;
    border-radius: var(--erp-radius-sm);
}
.dd-views-action:hover { background: var(--erp-primary-tint); color: var(--erp-primary); }
.dd-views-action > i { width: 14px; text-align: center; font-size: 11px; }
.dd-views-default-check {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--erp-text); cursor: pointer;
}

/* ── Bulk action bar ─────────────────────────────────────────────── */
.dd-bulkbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background: var(--erp-primary);
    color: #fff;
    flex-shrink: 0;
    animation: erpFadeIn .14s ease;
}
.dd-bulkbar-left { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dd-bulkbar-count {
    background: rgba(255,255,255,.22);
    border-radius: var(--erp-radius-pill);
    padding: 1px 9px; font-weight: 700; font-size: 12px;
}
.dd-bulkbar-clear {
    background: transparent; border: 0; color: rgba(255,255,255,.85);
    cursor: pointer; font-size: 12px; margin-left: 6px;
    display: inline-flex; align-items: center; gap: 4px;
}
.dd-bulkbar-clear:hover { color: #fff; }
.dd-bulkbar-actions { display: flex; align-items: center; gap: 8px; }
.dd-bulkbar-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.16);
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--erp-radius-sm);
    padding: 5px 12px;
    font-size: 12.5px; font-weight: 500; cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.dd-bulkbar-btn:hover:not(:disabled) { background: rgba(255,255,255,.28); }
.dd-bulkbar-btn:disabled { opacity: .55; cursor: not-allowed; }
.dd-bulkbar-btn--danger {
    background: var(--erp-danger);
    border-color: transparent;
}
.dd-bulkbar-btn--danger:hover:not(:disabled) { background: #dc2626; }

/* Batch print modal — report format picker */
.dd-print-opt {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 6px; cursor: pointer;
    font-size: 14px; color: var(--bs-body-color);
    transition: background .12s;
}
.dd-print-opt:hover { background: var(--bs-tertiary-bg); }
.dd-print-opt input[type=radio] { accent-color: var(--erp-accent, #2563eb); flex-shrink: 0; }

/* Selection checkbox in the grid */
.dd-chk {
    width: 15px; height: 15px;
    cursor: pointer;
    accent-color: var(--erp-primary);
    vertical-align: middle;
}

/* ── Ask-AI filter preview list ──────────────────────────────────── */
.ask-filter-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    background: var(--erp-surface-alt);
    font-size: 12.5px;
}
.ask-filter-list li {
    padding: 6px 12px;
    border-bottom: 1px solid var(--erp-border);
    color: var(--erp-text);
}
.ask-filter-list li:last-child { border-bottom: 0; }
.ask-filter-list strong { color: var(--erp-primary); margin-right: 4px; }

/* ── Live presence avatars on a record ──────────────────────────── */
.presence-stack {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}
.presence-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--erp-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--erp-surface);
    margin-left: -8px;
    cursor: default;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.presence-avatar:first-child { margin-left: 0; }
.presence-avatar::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--erp-success);
    border: 2px solid var(--erp-surface);
}
.presence-avatar--more {
    background: var(--erp-surface-alt);
    color: var(--erp-text-muted);
    font-size: 10px;
}
.presence-avatar--more::after { display: none; }

/* ── Command palette (Ctrl/⌘+K) ──────────────────────────────────── */
.cmdk-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.42);
    backdrop-filter: blur(3px);
    z-index: 1500;
    animation: erpFadeIn .12s ease;
}
.cmdk-modal {
    position: fixed; left: 50%; top: 14vh;
    transform: translateX(-50%);
    width: 640px; max-width: 92vw;
    max-height: 72vh;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-xl);
    z-index: 1510;
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: cmdkIn .14s ease;
}
@keyframes cmdkIn {
    from { opacity: 0; transform: translate(-50%, -4px); }
    to   { opacity: 1; transform: translateX(-50%); }
}
.cmdk-input-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--erp-border);
    flex-shrink: 0;
}
.cmdk-input-row > i { color: var(--erp-text-muted); font-size: 15px; }
.cmdk-input {
    flex: 1;
    border: 0; outline: 0;
    background: transparent;
    color: var(--erp-text);
    font-size: 15px;
    font-family: inherit;
    line-height: 1.2;
    padding: 0;
}
.cmdk-input::placeholder { color: var(--erp-text-soft); }

.cmdk-list {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 6px 0;
}
.cmdk-group {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--erp-text-soft);
    padding: 10px 18px 4px;
}
.cmdk-item {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 8px 18px;
    background: transparent;
    border: 0;
    color: var(--erp-text);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background .1s;
}
.cmdk-item:hover,
.cmdk-item--active {
    background: var(--erp-primary-tint);
}
.cmdk-item--active .cmdk-item-title { color: var(--erp-primary); }
.cmdk-item-ico {
    width: 30px; height: 30px;
    border-radius: var(--erp-radius-sm);
    background: var(--erp-surface-alt);
    color: var(--erp-text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.cmdk-item--active .cmdk-item-ico {
    background: var(--erp-primary);
    color: #fff;
}
.cmdk-item-text { flex: 1; min-width: 0; }
.cmdk-item-title {
    font-size: 13.5px; font-weight: 500;
    color: var(--erp-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-item-sub {
    font-size: 11.5px;
    color: var(--erp-text-muted);
    margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-item-kind {
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px;
    color: var(--erp-text-soft);
    flex-shrink: 0;
}

.cmdk-empty {
    text-align: center;
    padding: 40px 24px;
    color: var(--erp-text-muted);
    font-size: 13px;
}
.cmdk-empty i {
    font-size: 28px;
    display: block;
    margin-bottom: 12px;
    color: var(--erp-text-soft);
}
.cmdk-empty .cmdk-kbd { background: var(--erp-surface-alt); }

.cmdk-footer {
    display: flex; align-items: center; gap: 18px;
    padding: 8px 18px;
    border-top: 1px solid var(--erp-border);
    background: var(--erp-surface-alt);
    font-size: 11px;
    color: var(--erp-text-muted);
    flex-shrink: 0;
}
.cmdk-footer-right { margin-left: auto; }
.cmdk-kbd {
    display: inline-block;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10.5px;
    font-family: ui-monospace, monospace;
    color: var(--erp-text-muted);
    margin-right: 4px;
}

/* ── Approval cycle simulator (DynamicObject + ApprovalSetup) ───── */
.sim-loading {
    display:flex; align-items:center; gap:10px;
    padding:30px; justify-content:center;
    color:var(--erp-text-muted);
}
.sim-info { font-size:12px; color:var(--erp-text-muted); margin-bottom:16px; }
.sim-info i { color:var(--erp-primary); }
.sim-step { display:flex; gap:14px; margin-bottom:20px; }
.sim-step-badge {
    flex-shrink:0; width:32px; height:32px; border-radius:50%;
    background:var(--erp-primary); color:#fff; font-size:13px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
}
.sim-step-body { flex:1; }
.sim-step-type {
    font-size:11px; font-weight:700; color:var(--erp-primary);
    text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px;
}
.sim-approver {
    display:flex; align-items:center; gap:10px;
    background:var(--erp-surface-alt); border:1px solid var(--erp-border);
    border-radius:var(--erp-radius); padding:8px 12px; margin-bottom:6px;
}
.sim-approver-avatar {
    width:36px; height:36px; border-radius:50%;
    background:var(--erp-primary-tint); color:var(--erp-primary);
    font-size:11px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; overflow:hidden;
    border:1px solid var(--erp-border);
}
.sim-approver-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.sim-approver-name { font-size:13px; font-weight:600; color:var(--erp-text); }
.sim-approver-user { font-size:11px; color:var(--erp-text-soft); }
.sim-connector { width:2px; height:14px; background:var(--erp-border-strong); margin:0 15px 4px; }
.sim-empty { text-align:center; padding:32px 0; color:var(--erp-text-soft); font-size:14px; }
.sim-empty i { font-size:36px; display:block; margin-bottom:10px; }
.sim-error-row {
    color:var(--erp-danger); font-size:12px;
    padding:6px 10px; background:rgba(239,68,68,.08);
    border-radius:var(--erp-radius-sm); margin-bottom:6px;
}
/* Clean accent header used by both preview modals. No gradient — a single
   surface stripe with a primary-color icon, matches the rest of the app. */
.erp-modal-header--accent {
    background: var(--erp-surface) !important;
    color: var(--erp-text) !important;
    border-bottom: 1px solid var(--erp-border) !important;
}
.erp-modal-header--accent > i { color: var(--erp-primary) !important; }
/* Legacy alias — kept so older usages still render cleanly */
.erp-modal-header--gradient {
    background: var(--erp-surface) !important;
    color: var(--erp-text) !important;
    border-bottom: 1px solid var(--erp-border) !important;
}
.erp-modal-header--gradient > i { color: var(--erp-primary) !important; }

/* ── Shared modal — backdrop / box / size tiers all live in erp.css.
   The header / body / footer styles below remain here. ─────────── */

.erp-modal-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--erp-border);
    font-weight: 600; font-size: 14px;
    color: var(--erp-text);
    flex-shrink: 0;
}
.erp-modal-header > i { color: var(--erp-primary); font-size: 14px; }
.erp-modal-header > span { flex: 1; min-width: 0; }
.erp-modal-header .erp-tb-btn { margin-left: 4px; }

.erp-modal-body {
    padding: 18px 20px;
    overflow-y: auto;
    flex: 1; min-height: 0;
    color: var(--erp-text);
}
.erp-modal-footer {
    display: flex; gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--erp-border);
    background: var(--erp-surface-alt);
    justify-content: flex-end;
    flex-shrink: 0;
}

@keyframes erpFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes erpModalIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

[data-bs-theme="dark"] .erp-modal-backdrop {
    background: rgba(0,0,0,.55);
}

/* ── DrillDown prerequisite modal ──────────────────────────────────── */
/* Defensive sizing: explicit width/height + viewport-anchored centering so
   the popup ignores any ancestor that's accidentally a containing block
   for fixed positioning (transform/filter/contain on a parent). */
.dd-prereq-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    /* Above all app chrome, modals, combo popups and the field picker. */
    z-index: 2147483000;
    background: rgba(15, 23, 42, .55);
    padding: 20px;
}
/* Content-fit, centred. Width stays >= the form's md breakpoint (768px) so the
   2-column layout is preserved; height wraps the iframe (sized to content by JS). */
.dd-prereq-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(880px, calc(100vw - 40px));
    height: auto;
    max-height: calc(100vh - 40px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 56px rgba(0,0,0,.28);
    display: flex; flex-direction: column;
    overflow: hidden;
    z-index: 2147483001;
}
.dd-prereq-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; flex-shrink: 0;
    background: var(--erp-surface);
    color: var(--erp-text);
    border-bottom: 1px solid var(--erp-border);
    border-radius: 14px 14px 0 0;
}
.dd-prereq-title {
    font-size: 15px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
}
.dd-prereq-title i { color: var(--erp-primary); }
.dd-prereq-close {
    background: transparent; color: var(--erp-text-muted);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm); padding: 6px 12px;
    font-size: 12.5px; font-weight: 500; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s, color .15s, border-color .15s;
}
.dd-prereq-close:hover {
    background: var(--erp-surface-alt);
    color: var(--erp-danger);
    border-color: var(--erp-border-strong);
}
.dd-prereq-frame {
    border: 0; width: 100%; background: #fff;
    /* Height is set by prereqHost.autoSize (content-fit). Fallback before JS runs. */
    height: 60vh;
    max-height: calc(100vh - 96px);
}
@media (max-width: 768px) {
    .dd-prereq-overlay { padding: 0; align-items: flex-end; }
    .dd-prereq-modal {
        width: 100%; max-width: 100%; height: auto; max-height: 92vh;
        top: auto; bottom: 0; left: 0; transform: none;
        border-radius: 18px 18px 0 0;
    }
    .dd-prereq-frame { height: 70vh; }
    .dd-prereq-header { border-radius: 18px 18px 0 0; }
}

/* ── Notification bell (top bar) ─────────────────────────────────── */
.notif-bell { position: relative; display: inline-flex; }

.notif-backdrop { position: fixed; inset: 0; z-index: 1090; background: transparent; }

.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: 340px; max-width: 92vw;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-lg);
    z-index: 1091;
    overflow: hidden;
    display: flex; flex-direction: column;
    animation: erpFadeIn .12s ease;
}

.notif-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px;
    font-size: 13.5px; font-weight: 700; color: var(--erp-text);
    border-bottom: 1px solid var(--erp-border);
}
.notif-count {
    background: var(--erp-primary); color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: var(--erp-radius-pill);
    padding: 1px 8px;
}

.notif-body { max-height: 380px; overflow-y: auto; }

.notif-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 30px 16px; color: var(--erp-text-soft); font-size: 13px;
}
.notif-empty i { font-size: 26px; color: var(--erp-success); }

.notif-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: start;
    padding: 10px 14px;
    background: transparent; border: 0;
    border-bottom: 1px solid var(--erp-border);
    cursor: pointer; font-family: inherit;
    transition: background .12s;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--erp-surface-alt); }
.notif-item-ico {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: var(--erp-radius-sm);
    background: var(--erp-primary-tint); color: var(--erp-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.notif-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.notif-item-title {
    font-size: 13px; font-weight: 600; color: var(--erp-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-item-sub {
    font-size: 11.5px; color: var(--erp-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-item-time { font-size: 11px; color: var(--erp-text-soft); flex-shrink: 0; }

.notif-footer {
    padding: 9px 14px; border-top: 1px solid var(--erp-border);
    text-align: center; background: var(--erp-surface-alt);
}
.notif-footer a {
    font-size: 12.5px; font-weight: 600; color: var(--erp-primary);
    text-decoration: none;
}
.notif-footer a:hover { text-decoration: underline; }

/* ── Breadcrumb (top of main content) ────────────────────────────── */
.erp-crumbs {
    display: flex; align-items: center; flex-wrap: nowrap; gap: 1px;
    padding: 7px 18px;
    background: var(--erp-surface);
    border-bottom: 1px solid var(--erp-border);
    font-size: 12.5px;
    line-height: 1.4;
    overflow: hidden;   /* stay one line so its height is predictable (page-fit calc) */
}
.erp-crumb {
    color: var(--erp-text-muted);
    text-decoration: none;
    padding: 2px 7px;
    border-radius: var(--erp-radius-sm);
    white-space: nowrap;
    max-width: 280px; overflow: hidden; text-overflow: ellipsis;
}
a.erp-crumb:hover { color: var(--erp-primary); background: var(--erp-primary-tint); }
.erp-crumb-home { display: inline-flex; align-items: center; color: var(--erp-text-soft); }
.erp-crumb-home:hover { color: var(--erp-primary); }
.erp-crumb--current { color: var(--erp-text); font-weight: 600; }
.erp-crumb-sep { font-size: 10px; color: var(--erp-text-soft); margin: 0 1px; flex-shrink: 0; }

/* ── Push-notification toggle (Preferences + portal profile) ───────────────── */
.erp-push-toggle {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.erp-push-toggle-text { display: flex; align-items: center; gap: 10px; }
.erp-push-toggle-text > i { font-size: 18px; color: var(--erp-primary); }
.erp-push-toggle-title { font-weight: 600; font-size: 13.5px; }
.erp-push-toggle-sub { font-size: 12px; color: var(--erp-text-muted); }
.erp-push-toggle-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }