@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('./icons.css');

/* =========================================================
   SAB THEME BRIDGE
   Three base colours come from the active DevExpress theme and
   are written onto <html> by js/sabtheme.js after every theme
   change (so Fluent light/dark AND Classic themes all work):
     --sab-bg       page background  (computed body background)
     --sab-text     page text colour (computed body color)
     --sab-primary  theme accent     (DevExpress primary colour)
   Everything below is derived with color-mix(). Surfaces are
   tinted with the theme's primary colour, so every theme gets
   its own look (blue Fluent, pink Berry, purple Purple ...).
   Never hardcode #eef3f8 / #333 etc. in component CSS - use
   these variables.
   ========================================================= */
:root {
    /* ---- base (CSS fallback chain; overridden by sabtheme.js) ---- */
    --sab-bg: var(--dxds-color-surface-neutral-default-rest, var(--bs-body-bg, #ffffff));
    --sab-text: var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #333333));
    --sab-primary: var(--dxds-color-surface-primary-default-rest, var(--bs-primary, #1976d2));

    /* ---- neutral helpers ---- */
    --sab-neutral-6: color-mix(in srgb, var(--sab-text) 6%, var(--sab-bg));
    --sab-neutral-12: color-mix(in srgb, var(--sab-text) 12%, var(--sab-bg));
    --sab-neutral-20: color-mix(in srgb, var(--sab-text) 20%, var(--sab-bg));

    /* ---- surfaces: header, drawer, panels, grid headers, cards ----
       tinted with the theme primary so each theme looks different  */
    --sab-surface: color-mix(in srgb, var(--sab-primary) 10%, var(--sab-neutral-6));
    --sab-surface-hover: color-mix(in srgb, var(--sab-primary) 20%, var(--sab-neutral-6));
    --sab-surface-active: color-mix(in srgb, var(--sab-primary) 30%, var(--sab-neutral-6));

    /* ---- borders ---- */
    --sab-border: color-mix(in srgb, var(--sab-primary) 25%, var(--sab-neutral-20));
    --sab-border-strong: color-mix(in srgb, var(--sab-text) 45%, var(--sab-bg));

    /* ---- text ---- */
    --sab-text-muted: color-mix(in srgb, var(--sab-text) 65%, var(--sab-bg));
    --sab-primary-text: color-mix(in srgb, var(--sab-primary) 85%, var(--sab-text));

    /* ---- accent surfaces (ribbon buttons, active menu, selection) ---- */
    --sab-primary-soft: color-mix(in srgb, var(--sab-primary) 16%, var(--sab-bg));
    --sab-primary-soft-hover: color-mix(in srgb, var(--sab-primary) 28%, var(--sab-bg));
    --sab-primary-border: color-mix(in srgb, var(--sab-primary) 45%, var(--sab-bg));
    --sab-on-primary: #ffffff;
    --sab-danger: #d32f2f;

    /* ---- misc ---- */
    --sab-overlay: color-mix(in srgb, var(--sab-bg) 80%, transparent);
    --sab-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    --sab-shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* =========================================================
   WHITE THEME  (key "White")
   Pure white background, black text, neutral grey surfaces.
   The Fluent light stylesheet is still loaded for the
   DevExpress widgets; these overrides win on top of it.
   ========================================================= */
html[data-sab-theme="White"] , html[data-sab-tone="light"] {
    --sab-bg: #ffffff !important;
    --sab-text: #000000 !important;
    --sab-surface: #ffffff;
    --sab-surface-hover: #f2f2f2;
    --sab-surface-active: #e6e6e6;
    --sab-border: #d9d9d9;
    --sab-border-strong: #9e9e9e;
    --sab-text-muted: #444444;
    --sab-primary-text: #0b57d0;
    --sab-primary-soft: #eef4ff;
    --sab-primary-soft-hover: #dce8ff;
    --sab-primary-border: #b7ccf5;
    --sab-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    --sab-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.16);
    /* DevExpress + bootstrap base tokens */
    --dxds-color-surface-neutral-default-rest: #ffffff;
    --dxds-color-surface-neutral-subdued-rest: #ffffff;
    --dxds-color-content-neutral-default-rest: #000000;
    --dxds-color-content-neutral-subdued-rest: #333333;
    --bs-body-bg: #ffffff;
    --bs-body-color: #000000;
    --bs-tertiary-bg: #ffffff;
    --bs-secondary-bg: #f5f5f5;
}

html[data-sab-theme="White"] body, html[data-sab-tone="light"] body,
html[data-sab-theme="White"] .page, html[data-sab-tone="light"] .page,
html[data-sab-theme="White"] .dxbl-popup, html[data-sab-tone="light"] .dxbl-popup,
html[data-sab-theme="White"] .dxbl-grid, html[data-sab-tone="light"] .dxbl-grid,
html[data-sab-theme="White"] .dxbl-text-editor, html[data-sab-tone="light"] .dxbl-text-editor,
html[data-sab-theme="White"] .dxbl-memo, html[data-sab-tone="light"] .dxbl-memo,
html[data-sab-theme="White"] .dxbl-combobox, html[data-sab-tone="light"] .dxbl-combobox,
html[data-sab-theme="White"] .dxbl-date-edit , html[data-sab-tone="light"] .dxbl-date-edit {
    background-color: #ffffff;
    color: #000000;
}

html[data-sab-theme="White"] .dxbl-grid-header, html[data-sab-tone="light"] .dxbl-grid-header,
html[data-sab-theme="White"] .dxbl-grid-header-content , html[data-sab-tone="light"] .dxbl-grid-header-content {
    background-color: #f5f5f5;
    color: #000000;
}


/* =========================================================
   GREEN THEME  (key "Green")
   Body = White theme jaisi (safed background, kaala text, safed card / textbox).
   Sirf LEFT MENU (drawer panel) dark green + safed akshar, hara accent.
   Light theme hai (sab-light) : sabdark.css yahan nahi lagta.
   ========================================================= */
html[data-sab-theme="Green"] {
    --sab-bg: #ffffff !important;
    --sab-text: #000000 !important;
    --sab-surface: #f1f7f3;
    --sab-surface-hover: #e3f1e8;
    --sab-surface-active: #cfe6d9;
    --sab-border: #d3e3d9;
    --sab-border-strong: #8fb9a0;
    --sab-text-muted: #444444;
    --sab-primary-text: #0f6b42;
    --sab-primary-soft: #e9f6ee;
    --sab-primary-soft-hover: #d2ecdc;
    --sab-primary-border: #a6d6bb;
    --sab-on-primary: #ffffff;
    --sab-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    --sab-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.16);
    /* DevExpress + bootstrap base tokens */
    --dxds-color-surface-neutral-default-rest: #ffffff;
    --dxds-color-surface-neutral-subdued-rest: #ffffff;
    --dxds-color-content-neutral-default-rest: #000000;
    --dxds-color-content-neutral-subdued-rest: #333333;
    --dxds-color-surface-primary-default-rest: #1e9e5a;
    --dxds-color-surface-primary-default-hover: #188a4d;
    --dxds-color-surface-primary-default-active: #137a43;
    --dxds-color-border-primary-default-rest: #1e9e5a;
    --dxds-color-content-primary-default-rest: #0f6b42;
    --bs-primary: #1e9e5a;
    --bs-body-bg: #ffffff;
    --bs-body-color: #000000;
    --bs-tertiary-bg: #ffffff;
    --bs-secondary-bg: #f5f5f5;
}

html[data-sab-theme="Green"] body,
html[data-sab-theme="Green"] .page,
html[data-sab-theme="Green"] .dxbl-popup,
html[data-sab-theme="Green"] .dxbl-grid,
html[data-sab-theme="Green"] .dxbl-text-editor,
html[data-sab-theme="Green"] .dxbl-memo,
html[data-sab-theme="Green"] .dxbl-combobox,
html[data-sab-theme="Green"] .dxbl-date-edit {
    background-color: #ffffff;
    color: #000000;
}

html[data-sab-theme="Green"] .dxbl-grid-header,
html[data-sab-theme="Green"] .dxbl-grid-header-content {
    background-color: #e3f1e8;
    color: #000000;
}

/* >>> BREAKPOINT - SabEntryGrid / child grid ka header bhi report grid jaisa (scoped css ka
   .sab-grid .dxbl-grid-header { background: var(--sab-surface) !important } halka tha) */
html[data-sab-theme="Green"] .sab-grid .dxbl-grid-header,
html[data-sab-theme="Green"] .sab-grid .dxbl-grid-header-content,
html[data-sab-theme="Green"] .sab-entry-grid .dxbl-grid-header,
html[data-sab-theme="Green"] .sab-entry-grid .dxbl-grid-header-content,
html[data-sab-theme="Green"] .sab-childgrid .dxbl-grid-header,
html[data-sab-theme="Green"] .sab-childgrid .dxbl-grid-header-content {
    background-color: #e3f1e8 !important;
    color: #000000 !important;
}

/* =========================================================
   ORANGE THEME  (key "Orange")
   Body = White theme jaisi (safed background, kaala text, safed card / textbox).
   Sirf LEFT MENU (drawer panel) dark orange + safed akshar, narangi accent.
   Light theme hai (sab-light) : sabdark.css yahan nahi lagta.
   ========================================================= */
html[data-sab-theme="Orange"] {
    --sab-bg: #ffffff !important;
    --sab-text: #000000 !important;
    --sab-surface: #fff6ee;
    --sab-surface-hover: #ffe8d2;
    --sab-surface-active: #ffd9b3;
    --sab-border: #f3d6b8;
    --sab-border-strong: #e8a566;
    --sab-text-muted: #444444;
    --sab-primary-text: #c2640f;
    --sab-primary-soft: #fff0e0;
    --sab-primary-soft-hover: #ffe1c2;
    --sab-primary-border: #f5c28f;
    --sab-on-primary: #ffffff;
    --sab-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    --sab-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.16);
    /* DevExpress + bootstrap base tokens */
    --dxds-color-surface-neutral-default-rest: #ffffff;
    --dxds-color-surface-neutral-subdued-rest: #ffffff;
    --dxds-color-content-neutral-default-rest: #000000;
    --dxds-color-content-neutral-subdued-rest: #333333;
    --dxds-color-surface-primary-default-rest: #f9953f;
    --dxds-color-surface-primary-default-hover: #ec8630;
    --dxds-color-surface-primary-default-active: #d97a28;
    --dxds-color-border-primary-default-rest: #f9953f;
    --dxds-color-content-primary-default-rest: #c2640f;
    --bs-primary: #f9953f;
    --bs-body-bg: #ffffff;
    --bs-body-color: #000000;
    --bs-tertiary-bg: #ffffff;
    --bs-secondary-bg: #f5f5f5;
}

html[data-sab-theme="Orange"] body,
html[data-sab-theme="Orange"] .page,
html[data-sab-theme="Orange"] .dxbl-popup,
html[data-sab-theme="Orange"] .dxbl-grid,
html[data-sab-theme="Orange"] .dxbl-text-editor,
html[data-sab-theme="Orange"] .dxbl-memo,
html[data-sab-theme="Orange"] .dxbl-combobox,
html[data-sab-theme="Orange"] .dxbl-date-edit {
    background-color: #ffffff;
    color: #000000;
}

html[data-sab-theme="Orange"] .dxbl-grid-header,
html[data-sab-theme="Orange"] .dxbl-grid-header-content {
    background-color: #ffe8d2;
    color: #000000;
}

/* >>> BREAKPOINT - SabEntryGrid / child grid ka header bhi report grid jaisa (scoped css ka
   .sab-grid .dxbl-grid-header { background: var(--sab-surface) !important } halka tha) */
html[data-sab-theme="Orange"] .sab-grid .dxbl-grid-header,
html[data-sab-theme="Orange"] .sab-grid .dxbl-grid-header-content,
html[data-sab-theme="Orange"] .sab-entry-grid .dxbl-grid-header,
html[data-sab-theme="Orange"] .sab-entry-grid .dxbl-grid-header-content,
html[data-sab-theme="Orange"] .sab-childgrid .dxbl-grid-header,
html[data-sab-theme="Orange"] .sab-childgrid .dxbl-grid-header-content {
    background-color: #ffe8d2 !important;
    color: #000000 !important;
}

/* >>> BREAKPOINT - LEFT MENU RANG (per theme). Ek hi jagah : yahan badlo to us theme ka menu badal jayega. */
:root {
    --sab-menu-bg: #4a5d79;        /* default (koi theme na mile) */
    --sab-menu-hover: #526e91;
    --sab-menu-sel: #597da7;
    --sab-menu-border: #6385ab;
}
html[data-sab-theme="White"]        { --sab-menu-bg: #ffffff; --sab-menu-hover: #eef1f5; --sab-menu-sel: #dde3ea; --sab-menu-border: #c9d0d9; }
/* >>> BREAKPOINT - LIGHT THEMES : Dark Themes ke rang 60% halke (menu / top bar) */
html[data-sab-theme="LightGreen"] { --sab-menu-bg: #b6cfc7; --sab-menu-hover: #b9d6cc; --sab-menu-sel: #b9e3cf; --sab-menu-border: #bdd8ce; }
html[data-sab-theme="LightFluentDark"] { --sab-menu-bg: #b5b6b7; --sab-menu-hover: #b9bbbe; --sab-menu-sel: #bdbfc3; --sab-menu-border: #c0c2c6; }
html[data-sab-theme="LightBlazingBerry"] { --sab-menu-bg: #d0b7c0; --sab-menu-hover: #d8bac5; --sab-menu-sel: #e1becc; --sab-menu-border: #d9bec8; }
html[data-sab-theme="LightPurple"] { --sab-menu-bg: #c5bbd5; --sab-menu-hover: #cbc0dd; --sab-menu-sel: #d3c4e6; --sab-menu-border: #cfc5df; }
html[data-sab-theme="LightOfficeWhite"] { --sab-menu-bg: #bdc9de; --sab-menu-hover: #c0cfe7; --sab-menu-sel: #c5d5ee; --sab-menu-border: #c7d4e8; }
html[data-sab-theme="LightFluentLight"] { --sab-menu-bg: #b2c6d7; --sab-menu-hover: #b4cee3; --sab-menu-sel: #b7d4eb; --sab-menu-border: #c0d8ed; }
html[data-sab-theme="FluentLight"]  { --sab-menu-bg: #3f709a; --sab-menu-hover: #4484b9; --sab-menu-sel: #4b93ce; --sab-menu-border: #619ed3; }
html[data-sab-theme="FluentDark"]   { --sab-menu-bg: #45484c; --sab-menu-hover: #50555c; --sab-menu-sel: #595f68; --sab-menu-border: #616770; }
html[data-sab-theme="BlazingBerry"] { --sab-menu-bg: #894b61; --sab-menu-hover: #9e536d; --sab-menu-sel: #b45c80; --sab-menu-border: #a15c76; }
html[data-sab-theme="Purple"]       { --sab-menu-bg: #6f5595; --sab-menu-hover: #7e61ab; --sab-menu-sel: #906cc0; --sab-menu-border: #886eb0; }
html[data-sab-theme="OfficeWhite"]  { --sab-menu-bg: #5977ac; --sab-menu-hover: #6286c4; --sab-menu-sel: #6e96d4; --sab-menu-border: #7394c6; }
html[data-sab-theme="Green"]        { --sab-menu-bg: #498872; --sab-menu-hover: #4f9980; --sab-menu-sel: #51ba88; --sab-menu-border: #599d85; }
html[data-sab-theme="Orange"]       { --sab-menu-bg: #eb964f; --sab-menu-hover: #eea264; --sab-menu-sel: #f1ae78; --sab-menu-border: #f0a86c; }

/* >>> BREAKPOINT - LEFT MENU = DARK GREEN (var(--sab-menu-bg)) - AB SAB THEME ME EK JAISA (pehle sirf Green theme me tha).
   Ye selector kisi theme par nirbhar nahi : light (White / Fluent / Purple / Office / Blazing) aur dark theme me bhi
   yahi. Poora drawer panel ek hi rang, safed akshar :
     logo box, company / AcYear / user name, Chat, Support, Dealer Setup, Support Solutions, ERP Setup,
     Task/Reminder aur menu tree (node / hover / selected).
   !important isliye ki theme ke purane rules (MainLayout.razor.css, dark ka sabdark.css) inhe na badal saken. */
.navigation-drawer > .dxbl-drawer-panel {
    --sab-bg: var(--sab-menu-bg);
    --sab-text: #ffffff;
    --sab-surface: var(--sab-menu-bg);
    --sab-surface-hover: var(--sab-menu-hover);
    --sab-surface-active: var(--sab-menu-hover);
    --sab-border: var(--sab-menu-border);
    --sab-border-strong: var(--sab-menu-border);
    --sab-text-muted: #cfe8da;
    --sab-primary-text: #ffffff;
    --sab-primary-soft: var(--sab-menu-hover);
    --sab-primary-soft-hover: var(--sab-menu-hover);
    --sab-primary-border: var(--sab-menu-border);
    --dxds-color-surface-neutral-default-rest: var(--sab-menu-bg);
    --dxds-color-surface-neutral-subdued-rest: var(--sab-menu-bg);
    --dxds-color-content-neutral-default-rest: #ffffff;
    --dxds-color-content-neutral-subdued-rest: #cfe8da;
    --dxbl-drawer-panel-footer-bg: var(--sab-menu-bg);
    --dxbl-drawer-panel-header-bg: var(--sab-menu-bg);
    background: var(--sab-menu-bg) !important;
    color: #ffffff !important;
    border-right: 1px solid var(--sab-menu-border) !important;
}

.navigation-drawer > .dxbl-drawer-panel .drawer-body,
.navigation-drawer > .dxbl-drawer-panel .navigation-drawer-header,
.navigation-drawer > .dxbl-drawer-panel .right-panel,
.navigation-drawer > .dxbl-drawer-panel .tree-container,
.navigation-drawer > .dxbl-drawer-panel .sab-tree {
    background: var(--sab-menu-bg) !important;
    color: #ffffff !important;
}

/* menu ka text : har state me safed */
.navigation-drawer > .dxbl-drawer-panel .sab-tree,
.navigation-drawer > .dxbl-drawer-panel .sab-tree *,
.navigation-drawer > .dxbl-drawer-panel .sab-tree *:hover,
.navigation-drawer > .dxbl-drawer-panel .sab-tree a,
.navigation-drawer > .dxbl-drawer-panel .sab-tree a:hover,
.navigation-drawer > .dxbl-drawer-panel .sab-tree a:focus,
.navigation-drawer > .dxbl-drawer-panel .sab-tree a:active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* neeche company / AcYear / user name + Chat / Support ... ke akshar : safed (icon ke apne rang chhod kar) */
.navigation-drawer > .dxbl-drawer-panel :is(span, div, p, label, b, strong):not(.reminder-badge):not(.reminder-badge *) {
    color: #ffffff !important;
}

/* neeche ki rows (Chat, Support, Dealer Setup, Support Solutions, ERP Setup, Task/Reminder) : sab ka ek hi bg, panel se alag nahi */
.navigation-drawer > .dxbl-drawer-panel .reminder-row {
    background: var(--sab-menu-bg) !important;
    color: #ffffff !important;
    border: 1px solid var(--sab-menu-border);
}

.navigation-drawer > .dxbl-drawer-panel .reminder-row:hover {
    background: var(--sab-menu-hover) !important;
}

/* row ka icon navy (#123372) panel par dikhta nahi - halka kar do (baaki icon ke rang waise hi) */
.navigation-drawer > .dxbl-drawer-panel .reminder-row i[style*="#123372"] {
    color: #cfe8da !important;
}

.navigation-drawer > .dxbl-drawer-panel .sab-tree .dxbl-tv-node:hover,
.navigation-drawer > .dxbl-drawer-panel .sab-tree .dxbl-tv-node:hover > * {
    background: var(--sab-menu-hover) !important;
    color: #ffffff !important;
}

.navigation-drawer > .dxbl-drawer-panel .sab-tree .dxbl-tv-node-selected,
.navigation-drawer > .dxbl-drawer-panel .sab-tree .dxbl-tv-node-selected > * {
    background: var(--sab-menu-sel) !important;
    color: #ffffff !important;
}

/* =========================================================================
   >>> BREAKPOINT - INSTALL APP button (MainLayout, Logout ke paas)
   Chrome installable kahe tabhi dikhta hai: App.razor ka beforeinstallprompt
   <html> par class "sab-can-install" laga deta hai. Install ho jane par
   class hat jati hai -> button apne aap gayab.
   ========================================================================= */
.sab-install-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 0 !important;
    padding: 2px 6px !important;
    cursor: pointer;
    line-height: 0;
    box-shadow: none !important;
}

.sab-install-btn img {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: contain;
}

.sab-install-btn:hover img {
    filter: brightness(1.1);
}

/* native controls / scrollbars follow the theme */
html.sab-dark { color-scheme: dark; }
html.sab-light { color-scheme: light; }

/* =========================================================================
   >>> BREAKPOINT - DARK THEME me GRID KI HEADING
   Problem: --sab-surface sirf White theme ke block me define tha, isliye
   dark theme me grid ka header maroon/dark par dark text = kuch dikhta hi
   nahi tha. Ab dark ke liye apne token + heading ka text SAFED.
   (sabtheme.js --sab-text ko inline set karta hai, isliye header par
    colour !important se lagana padta hai.)
   ========================================================================= */
html.sab-dark {
    --sab-surface: #2a2f38;
    --sab-border: #3a414c;
    --sab-neutral-6: #333a44;
}

html.sab-dark .dxbl-grid-header,
html.sab-dark .dxbl-grid-header-content,
html.sab-dark .dxbl-grid-header-caption,
html.sab-dark .dxbl-grid-header a,
html.sab-dark .dxbl-grid-header span,
html.sab-dark .dxbl-grid thead th,
html.sab-dark .dxbl-grid thead th * {
    color: #ffffff !important;
}

html.sab-dark .dxbl-grid-header,
html.sab-dark .dxbl-grid thead th {
    background-color: #2a2f38 !important;
    border-color: #3a414c !important;
}

/* sort / filter ke chhote icon bhi safed */
html.sab-dark .dxbl-grid-header i,
html.sab-dark .dxbl-grid-header svg,
html.sab-dark .dxbl-grid-header .dxbl-image {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* group panel aur filter row bhi header ke saath match karein */
html.sab-dark .dxbl-grid-group-panel,
html.sab-dark .dxbl-grid-filter-row,
html.sab-dark .dxbl-grid-filter-row * {
    color: #ffffff !important;
}

html, body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.text-danger {
    color: var(--dxds-color-content-danger-default-rest);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--dxds-color-border-success-default-rest);
}

.invalid {
    outline: 1px solid var(--dxds-color-border-danger-default-rest);
}

.validation-message {
    color: var(--dxds-color-content-danger-default-rest);
}

.button-link {
    text-decoration: unset;
}

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

.title.title-secondary {
    padding: 0.313rem 0 0;
    color: var(--dxds-color-content-secondary-default-rest);
}

.title-header-text {
    font-size: var(--dxds-font-size-headline-lg);
    font-weight: var(--dxds-font-weight-headline-default);
    letter-spacing: var(--dxds-letter-spacing-headline-lg);
    line-height: var(--dxds-line-height-headline-lg);
}

.title-content-text {
    font-size: var(--dxds-font-size-base-lg);
    font-weight: var(--dxds-font-weight-base-default);
    letter-spacing: var(--dxds-letter-spacing-base-lg);
    line-height: var(--dxds-line-height-base-lg);
}

.main-content {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

/* ---------------- report grid drill-down links / popups ---------------- */
.sab-drill-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--sab-primary-border);
    cursor: pointer;
}

    .sab-drill-link:hover {
        color: var(--sab-primary-text);
        border-bottom: 1px solid var(--sab-primary);
    }

.sab-drill-sabid {
    color: var(--sab-primary-text);
    font-weight: 600;
}

.sab-drill-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 6px;
}

.sab-drill-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    padding: 2px 4px;
}

.sab-drill-crumb {
    background: var(--sab-primary-soft);
    border: 1px solid var(--sab-primary-border);
    border-radius: 12px;
    padding: 2px 10px;
}

.sab-drill-sep { color: var(--sab-text-muted); }

.sab-drill-count {
    margin-left: auto;
    color: var(--sab-text-muted);
}

.sab-back-report {
    margin-right: 10px;
}

/* ---------------- footer summary chooser ---------------- */
.sab-sum-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    overflow-y: auto;
    padding: 4px 2px;
}

.sab-sum-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
}

    .sab-sum-item:hover {
        background: var(--sab-surface-hover);
    }

/* ---------------- report popup: grid + bottom send bar ---------------- */
.sab-report-grid {
    flex: 1;
    min-height: 0;
}

.sab-report-bottombar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 2px 4px 0;               /* >>> BREAKPOINT - bottom padding 0 */
    margin-top: auto;                 /* >>> BREAKPOINT - bar popup ke bilkul neeche chipki */
    border-top: 1px solid var(--sab-border);
    background: var(--sab-surface);
    border-radius: 0 0 8px 8px;
}

/* >>> BREAKPOINT - report popup (Sabgridreport) ki body ka neeche ka padding 0 - bottom bar (Xlsx / Pdf / WhatsApp / Query / Share / Count)
   popup ke kinare se chipki. */
.sab-rep-popup .dxbl-popup-body,
.sab-rep-popup .dxbl-modal-body {
    padding-bottom: 0 !important;
}

.sab-gridai-lang {
    min-width: 150px;
}

/* =========================================================
   POPUP OPEN ANIMATION  -  like a page turning in a diary
   Applies to every DevExpress popup / modal in the app.
   ========================================================= */
@keyframes sabPageTurn {
    0% {
        opacity: 0;
        transform: perspective(1800px) rotateY(-72deg) translateX(-22px) scale(.985);
    }

    55% {
        opacity: 1;
        transform: perspective(1800px) rotateY(-14deg) translateX(-4px) scale(.997);
    }

    100% {
        opacity: 1;
        transform: perspective(1800px) rotateY(0deg) translateX(0) scale(1);
    }
}

@keyframes sabPageTurnShadow {
    0% { box-shadow: -26px 0 34px -18px rgba(0, 0, 0, .55); }
    100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
}

@keyframes sabBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dxbl-popup {
    transform-origin: left center;
    backface-visibility: hidden;
    animation: sabPageTurn .38s cubic-bezier(.22, .78, .3, 1), sabPageTurnShadow .38s ease-out;
}

.dxbl-modal-backdrop,
.dxbl-popup-backdrop {
    animation: sabBackdropIn .28s ease-out;
}

/* >>> BREAKPOINT - DRILL POPUP : "carpet" roll-in / roll-out.
   Upar se neeche ki taraf khulta hai jaise darri (carpet) bichh rahi ho,
   aur band hone par wapas lipat jata hai (SabDrillGrid me close ko .32s
   rokte hain taaki ye animation dikh sake). */
@keyframes sabCarpetIn {
    0%   { clip-path: inset(0 0 100% 0 round 10px); }
    100% { clip-path: inset(0 0 0% 0 round 10px); }
}

@keyframes sabCarpetOut {
    0%   { clip-path: inset(0 0 0% 0 round 10px); }
    100% { clip-path: inset(0 0 100% 0 round 10px); }
}

/* aage-aage chalta hua "roll" (darri ka lipta hua hissa) */
@keyframes sabCarpetRollIn {
    0%   { top: -14px; opacity: 1; }
    92%  { opacity: 1; }
    100% { top: calc(100% - 4px); opacity: 0; }
}

@keyframes sabCarpetRollOut {
    0%   { top: calc(100% - 4px); opacity: 1; }
    100% { top: -14px; opacity: 0; }
}

.sab-drill-popup.dxbl-popup {
    position: relative;
    overflow: visible;
    animation: sabCarpetIn .62s cubic-bezier(.3, .7, .3, 1) both;
}

.sab-drill-popup.dxbl-popup::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    height: 18px;
    top: -14px;
    border-radius: 9px;
    background: linear-gradient(180deg, #ffffff 0%, #c9cdd3 45%, #6e737a 100%);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    animation: sabCarpetRollIn .62s cubic-bezier(.3, .7, .3, 1) both;
}

.sab-drill-popup.sab-drill-closing.dxbl-popup {
    animation: sabCarpetOut .36s ease-in both;
    pointer-events: none;
}

.sab-drill-popup.sab-drill-closing.dxbl-popup::after {
    animation: sabCarpetRollOut .36s ease-in both;
}

@media (prefers-reduced-motion: reduce) {
    .dxbl-popup,
    .dxbl-modal-backdrop,
    .dxbl-popup-backdrop,
    .sab-drill-popup.dxbl-popup,
    .sab-drill-popup.dxbl-popup::after,
    .sab-drill-popup.sab-drill-closing.dxbl-popup,
    .sab-drill-popup.sab-drill-closing.dxbl-popup::after {
        animation: none;
    }
}

/* =========================================================================
   SAB CHILD GRID  ("grid ke andar grid")
   - the clickable field in SabGridPopup that opens the child grid
   - the child grid popup itself
   ========================================================================= */

.sab-childgrid-trigger {
    position: relative;
    cursor: pointer;
}

    /* the textbox is read-only here; the whole box is the button */
    .sab-childgrid-trigger .dxbl-text-edit,
    .sab-childgrid-trigger input {
        cursor: pointer !important;
    }

.sab-childgrid-trigger-icon {
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--sab-primary-text);
    opacity: .65;
    pointer-events: none;
    transition: opacity .18s ease;
}

.sab-childgrid-trigger:hover .sab-childgrid-trigger-icon {
    opacity: 1;
}

.sab-childgrid-msg {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--sab-text-muted);
}

.sab-childgrid-popup .dxbl-popup-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;        /* body khud scroll na kare - scroll sirf grid ke andar */
}

.sab-childgrid {
    flex: 1 1 auto;
    min-height: 0;
}


/* child grid popup: the small bar above the grid (table name + edit-mode switch) */

.sab-childgrid-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 2px 10px 2px;
}

.sab-childgrid-table {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--sab-text-muted);
}

.sab-childgrid-spacer {
    flex: 1 1 auto;
}

.sab-childgrid-err {
    color: var(--sab-danger);
    font-weight: 600;
    white-space: pre-wrap;
    text-align: left;
    padding: 8px 10px;
}


/* child grid popup: parent values under the title + fixed-height grid area */

.sab-childgrid-head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 8px 12px;
    margin: 0 0 8px 0;
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    background: var(--sab-surface);
}

.sab-childgrid-head-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
}

.sab-childgrid-head-label {
    color: var(--sab-text-muted);
    font-weight: 600;
    text-transform: capitalize;
}

.sab-childgrid-head-label::after {
    content: ":";
}

.sab-childgrid-head-value {
    color: var(--sab-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* the grid needs a DEFINITE height, otherwise DxGrid never shows its own
   scrollbars (horizontal one included) and just grows into the popup */
.sab-childgrid-wrap {
    flex: 1 1 auto;          /* popup body (flex column) ki bachi hui poori height */
    min-height: 260px;
    position: relative;      /* grid absolute se isko poora bharta hai -> definite height */
    overflow: hidden;
}

.sab-childgrid-wrap .sab-childgrid {
    position: absolute;
    inset: 0;                /* top/right/bottom/left = 0 -> grid wrap jitna hi bada */
    height: 100%;
}


/* child grid - CELL edit mode: koi row highlight nahi, sirf active cell blue */

.sab-childgrid .dxbl-grid-focused-row > td,
.sab-childgrid tr.dxbl-grid-focused-row,
.sab-childgrid tr.dxbl-grid-selected-row > td {
    background: transparent !important;
    color: inherit !important;
}

.sab-childgrid td.dxbl-grid-edit-cell,
.sab-childgrid td.dxbl-grid-focused-cell,
.sab-childgrid td:has(> .dxbl-grid-edit-cell),
.sab-childgrid td:focus-within {
    box-shadow: inset 0 0 0 2px var(--sab-primary) !important;
    background: var(--sab-primary-soft) !important;
}

.sab-childgrid td:focus-within input {
    font-weight: 600;
}


/* SabGridPopup: cannotempty wale field - baayi taraf laal patti */
.sab-required.dxbl-text-edit,
.sab-required.dxbl-date-edit,
.sab-required.dxbl-spin-edit,
.dxbl-fl-item-content > .sab-required {
    border-left: 3px solid #d9534f !important;
}

/* SabGridPopup: number fields right aligned */
.sab-num input {
    text-align: right;
}

/* ================= SabUserChat : internal user to user chat ================= */
/* Popup ki body ki height DevExpress ke andar se nahi lete (usse kabhi layout
   bigad jata tha) - wrap ki apni fix height rakhi hai: popup 500px, header/padding
   nikal kar body ~390px. */
.sab-chat-popup .sab-chat-wrap,
.sab-chat-wrap {
    display: flex;              /* left : user list, right : conversation */
    gap: 10px;
    height: 390px;
    max-height: 390px;
    min-height: 390px;
    overflow: hidden;
}

.sab-chat-users {
    width: 190px;
    flex: 0 0 190px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    border-right: 1px solid var(--sab-border, #e0e0e0);
    padding-right: 8px;
}

/* user list : baaki jagah le kar scroll */
.sab-chat-userlist {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sab-chat-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.sab-chat-user:hover {
    background: var(--sab-primary-soft, #eef3ff);
}

.sab-chat-user.active {
    background: var(--sab-primary-soft, #dce8ff);
    font-weight: 600;
}

.sab-chat-uname {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sab-chat-badge {
    background: #d9534f;
    color: #fff;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 16px;
}

.sab-chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sab-chat-head {
    font-weight: 600;
    font-size: 13px;
    padding: 2px 2px 4px 2px;
    border-bottom: 1px solid var(--sab-border, #e0e0e0);
}

.sab-chat-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sab-chat-msg {
    max-width: 78%;
    padding: 4px 9px;
    border-radius: 10px;
    font-size: 13px;
    word-wrap: break-word;
}

.sab-chat-msg.mine {
    align-self: flex-end;
    background: var(--sab-primary-soft, #dcf8c6);
}

.sab-chat-msg.other {
    align-self: flex-start;
    background: #f1f1f1;
}

.sab-chat-time {
    font-size: 10px;
    color: gray;
    text-align: right;
    margin-top: 1px;
}

.sab-chat-send {
    display: flex;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--sab-border, #e0e0e0);
}

.sab-chat-send .sab-chat-input {
    flex: 1;
}

.sab-chat-empty {
    color: gray;
    font-size: 12px;
    padding: 8px;
    text-align: center;
}

/* chat icon ka unread badge (page heading me) */
.sab-chat-icon {
    position: relative;
}

.sab-chat-count {
    background: #d9534f;
    color: #fff;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 16px;
    margin-left: 4px;
}

/* login page : refresh ke baad session restore hone ka message */
.login-restoring {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    text-align: center;
    font-weight: 600;
    background: var(--sab-primary-soft, #dce8ff);
    color: var(--sab-primary-text, #1c3faa);
    z-index: 3000;
}

/* NavMenu : voice search status line */
.nav-mic-status {
    font-size: 11px;
    color: var(--sab-primary-text, #3b5bdb);
    padding: 2px 4px;
}

/* login : remember me */
.sab-remember {
    display: flex;
    justify-content: flex-start;
    font-size: 13px;
    margin: 2px 0 6px 0;
}

/* MstEntryV2 : is menu par koi right nahi */
.mst-v2-norights {
    color: #d9534f;
    font-weight: 600;
    font-size: 13px;
    margin-right: 10px;
}

/* MstEntryV2 : mask = password wala control (textbox + eye button) */
.sab-psw-box {
    flex: 1;
    min-width: 0;
}

.sab-psw-eye {
    flex: 0 0 auto;
    padding: 2px 8px;
}

/* =========================================================================
   sabBusy - global wait overlay (MainLayout #sabBusyOverlay, js/site.js sabBusy)
   ========================================================================= */
html.sab-busy, html.sab-busy * { cursor: wait !important; }

.sab-busy-overlay {
    pointer-events: none;   /* overlay kabhi click nahi roke - popup ka X / Close hamesha chale */
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .45);
    backdrop-filter: blur(1px);
}

.sab-busy-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 26px;
    border-radius: 14px;
    background: var(--sab-bg, #fff);
    border: 1px solid var(--sab-border, #ddd);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}

.sab-busy-ring {
    position: relative;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* DxWaitIndicator ka spinner poora ring bhar de */
.sab-busy-ring .sab-busy-indicator,
.sab-busy-ring .dxbl-wait-indicator {
    position: absolute;
    inset: 0;
    width: 84px !important;
    height: 84px !important;
}

.sab-busy-ring .dxbl-wait-indicator svg,
.sab-busy-ring .dxbl-wait-indicator > * {
    width: 84px !important;
    height: 84px !important;
}

/* company icon beech me, halka pulse */
.sab-busy-logo {
    position: relative;
    width: 46px;
    height: 46px;
    object-fit: contain;
    animation: sab-busy-pulse 1.2s ease-in-out infinite;
}

@keyframes sab-busy-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.88); opacity: .75; }
}

.sab-busy-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--sab-text-muted, #666);
}

/* =========================================================================
   Sab popups: close (X) button LEFT side, title uske baad. Mobile par right side
   ke buttons screen se bahar chale jaate the - ab X hamesha dikhta hai.
   (DevExpress header ke classes + site.js sabPopupX jo close button ko pehle rakh deta hai)
   ========================================================================= */
.dxbl-modal-header,
.dxbl-popup-header {
    display: flex !important;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dxbl-modal-header > *,
.dxbl-popup-header > * {
    min-width: 0;
}

/* title: bachi jagah le, lamba ho to ... */
.dxbl-modal-header .dxbl-modal-title,
.dxbl-popup-header .dxbl-popup-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* X / close button sabse pehle */
.sab-x-left,
.sab-pdf-close {
    order: -1;
    margin-left: 0 !important;
    margin-right: 4px !important;
    flex: 0 0 auto;
}

/* custom header (HeaderContentTemplate) bhi phone par tootey nahi */
.sab-pdf-header,
.sab-popup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

/* >>> BREAKPOINT - POPUP HEADING : theme ke rang ka band + shadow (sirf heading alag dikhe, body waisi hi).
   Rang = --sab-primary (har theme ka apna). Akshar safed. Close (X) bhi safed. */
.dxbl-modal-header,
.dxbl-popup-header {
    background: linear-gradient(135deg, var(--sab-primary), color-mix(in srgb, var(--sab-primary) 78%, #000)) !important;
    color: #fff !important;
    border-bottom: 0 !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .28);
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.dxbl-modal-header .dxbl-modal-title,
.dxbl-popup-header .dxbl-popup-title,
.dxbl-modal-header *,
.dxbl-popup-header * {
    color: #fff !important;
    font-weight: 600;
    letter-spacing: .2px;
}
.dxbl-modal-header .dxbl-btn,
.dxbl-popup-header .dxbl-btn {
    background: transparent !important;
    border-color: transparent !important;
}
.dxbl-modal-header .dxbl-btn:hover,
.dxbl-popup-header .dxbl-btn:hover {
    background: rgba(255, 255, 255, .22) !important;
}

/* >>> BREAKPOINT - pivot ke header wala (x) Field List ke andar nahi chahiye
   (wahan field sirf list me hai, kisi area me nahi). DevExpress ke class ka
   naam version ke saath badal sakta hai, isliye tukda match. */
[class*="field-list"] .sab-pivot-hdr-x,
[class*="fieldlist"] .sab-pivot-hdr-x,
[class*="FieldList"] .sab-pivot-hdr-x {
    display: none !important;
}

/* >>> BREAKPOINT - chat list : online (hara) / offline (laal) dot */
.sab-chat-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .6);
}

.sab-chat-dot.on  { background: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, .25); }
.sab-chat-dot.off { background: #ef4444; opacity: .75; }

/* >>> BREAKPOINT - Help/lookup popup (SabText): page size 10 -> 30/50 karne par popup
   lamba nahi hoga. Grid ka dabba fixed height ka hai, rows us ke andar scroll hoti hain,
   pager neeche hi rehta hai. Height = page size 10 wali size. */
.sab-lookup-popup .sablookup-popup-grid {
    height: min(480px, calc(100vh - 190px));
    overflow: hidden;
}

    .sab-lookup-popup .sablookup-popup-grid > .dxbl-grid,
    .sab-lookup-popup .sablookup-popup-grid .sab-grid {
        height: 100% !important;
        max-height: 100% !important;
    }

/* >>> BREAKPOINT - QUERY ANALYZER OVERLAY (MainLayout) : niche ka page nahi chhedta, sirf upar chhupta / dikhta hai */
.sab-qa-overlay { display: none; position: fixed; inset: 0; z-index: 1200; background: #eef0f3; }
.sab-qa-overlay.open { display: block; }
.sab-qa-overlay .qa { height: 100vh; min-height: 0; border: 0; }

/* >>> BREAKPOINT - help popup : keyboard se chuni row (wwwroot/js/sablookupkeys.js) */
.sab-lookup-popup tr.sab-kbrow > td {
    background: var(--sab-primary-soft-hover, #dce8ff) !important;
    box-shadow: inset 0 1px 0 var(--sab-primary), inset 0 -1px 0 var(--sab-primary);
}
.sab-lookup-popup tr.sab-kbrow > td:first-child {
    box-shadow: inset 3px 0 0 var(--sab-primary), inset 0 1px 0 var(--sab-primary), inset 0 -1px 0 var(--sab-primary);
}

.sab-lookup-popup .dxbl-modal-body,
.sab-lookup-popup .dxbl-popup-body {
    overflow: hidden !important;
}

/* >>> BREAKPOINT - KISI BHI POPUP ME GRID: page size 10 -> 50 karne par popup lamba nahi,
   grid ke andar right side scroll. (report, drill, help/lookup, find, barcode help ...) */
.dxbl-modal-body .dxbl-grid,
.dxbl-popup .dxbl-grid {
    max-height: calc(100vh - 200px);
}

.dxbl-grid > .dxbl-scroll-viewer {
    min-height: 0;
}

/* drill popup: body ki poori height grid ko mile, grid ke andar scroll */
.sab-drill-popup .dxbl-modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.sab-drill-popup .sab-drill-body {
    flex: 1 1 auto;
    min-height: 0;
}

/* >>> BREAKPOINT - GRID FONT : poori ERP ke HAR DxGrid ka font.
   Size [sab section] gridfont se (MainLayout <style> me --sab-grid-font), na ho to 12px.
   Rows, header, footer, group, filter row ke box - sab isi se. */
.dxbl-grid,
.dxbl-grid.dxbl-sm,
.dxbl-grid.dxbl-lg {
    --dxbl-grid-font-size: var(--sab-grid-font, 12px);
}

/* =========================================================
   >>> BREAKPOINT - LABEL TEXTBOX KE PEHLE (har DxFormLayout : entry, grid edit popup, report filter ...)
   Mobile (992px se kam) : DevExpress label upar le jata tha -> ab ek line : label 35% | control.
   Badi screen : jo item label upar dikhata ho (vertical) wo bhi ek line me.
   Label lamba ho to do line me tootega. Jis item ka label nahi (grid) wo poori chaurai me.
   ========================================================= */
@media (max-width: 991.98px) {
    .dxbl-fl .dxbl-fl-item:has(> .dxbl-fl-cpt:not(.dxbl-fl-empty-caption)) {
        flex-flow: row nowrap !important;
        align-items: center;
    }
}

@media (min-width: 992px) {
    .dxbl-fl .dxbl-fl-item:not(.dxbl-fl-item-horizontal):has(> .dxbl-fl-cpt:not(.dxbl-fl-empty-caption)) {
        flex-flow: row nowrap !important;
        align-items: center;
    }
}

@media (max-width: 991.98px) {
    .dxbl-fl .dxbl-fl-item > .dxbl-fl-cpt:not(.dxbl-fl-empty-caption) {
        flex: 0 0 35% !important;
        width: 35% !important;
        max-width: 35%;
        padding: 0 8px 0 0 !important;
        align-self: center !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
}

@media (min-width: 992px) {
    .dxbl-fl .dxbl-fl-item:not(.dxbl-fl-item-horizontal) > .dxbl-fl-cpt:not(.dxbl-fl-empty-caption) {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30%;
        padding: 0 8px 0 0 !important;
        align-self: center !important;
        text-align: left !important;
        white-space: normal !important;
    }
}

.dxbl-fl .dxbl-fl-item:has(> .dxbl-fl-cpt:not(.dxbl-fl-empty-caption)) > .dxbl-fl-ctrl,
.dxbl-fl .dxbl-fl-item:has(> .dxbl-fl-cpt:not(.dxbl-fl-empty-caption)) > .dxbl-fl-ctrl-nc {
    flex: 1 1 auto;
    min-width: 0;
}

/* >>> BREAKPOINT - TOP HEADER (Home / Catalog / Logout ...), MENU HEADING (entry + report) = LEFT MENU KA RANG.
   Har theme ka apna rang : --sab-menu-bg / --sab-menu-hover / --sab-menu-border (upar theme wise). Akshar safed.
   html[data-sab-theme] prefix isliye ki scoped (.razor.css) rules se specificity jeet sake. */
html[data-sab-theme] .top-header {
    background: var(--sab-menu-bg) !important;
    border-bottom: 1px solid var(--sab-menu-border) !important;
    color: #ffffff !important;
}
html[data-sab-theme] .top-header .dxbl-btn,
html[data-sab-theme] .top-header .dxbl-btn .dxbl-text,
html[data-sab-theme] .top-header span,
html[data-sab-theme] .top-header i {
    color: #ffffff !important;
}
html[data-sab-theme] .top-header .dxbl-btn:hover {
    background: var(--sab-menu-hover) !important;
}

html[data-sab-theme] .menu-title {
    background: var(--sab-menu-bg) !important;
    background-color: var(--sab-menu-bg) !important;
    border-color: var(--sab-menu-border) !important;
    color: #ffffff !important;
}
html[data-sab-theme] .menu-title h2,
html[data-sab-theme] .menu-title h3,
html[data-sab-theme] .menu-title span {
    color: #ffffff !important;
}

html[data-sab-theme] .mst-v2-header {
    background: var(--sab-menu-bg) !important;
    color: #ffffff !important;
}

/* >>> BREAKPOINT - REPORT heading ke buttons (Show / Refresh / Google Sheet) + ENTRY RIBBON : theme ka rang.
   Pehle heading (theme rang) par Light button safed ho jata tha -> text dikhta nahi tha. Ab theme ke menu rang par, safed akshar. */
html[data-sab-theme] .menu-title .dxbl-btn,
html[data-sab-theme] .menu-title .dxbl-button {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
}
html[data-sab-theme] .menu-title .dxbl-btn:hover,
html[data-sab-theme] .menu-title .dxbl-btn:focus {
    background: rgba(255, 255, 255, 0.28) !important;
}
html[data-sab-theme] .menu-title .dxbl-btn .dxbl-text,
html[data-sab-theme] .menu-title .dxbl-btn i {
    color: #ffffff !important;
}
html[data-sab-theme] .menu-title .dxbl-checkbox-text,
html[data-sab-theme] .menu-title .dxbl-checkbox .dxbl-text {
    color: #ffffff !important;
}

html[data-sab-theme] .sab-ribbon .dxbl-toolbar,
html[data-sab-theme] .sab-ribbon .dxbl-toolbar-item-content,
html[data-sab-theme] .sab-ribbon .dxbl-toolbar-item {
    background: var(--sab-menu-bg) !important;
}
html[data-sab-theme] .sab-ribbon .dxbl-btn {
    background: var(--sab-menu-bg) !important;
    color: #ffffff !important;
    border: 1px solid var(--sab-menu-border) !important;
}
html[data-sab-theme] .sab-ribbon .dxbl-btn:hover {
    background: var(--sab-menu-hover) !important;
}
html[data-sab-theme] .sab-ribbon .dxbl-btn i,
html[data-sab-theme] .sab-ribbon .dxbl-btn .dxbl-text {
    color: #ffffff !important;
}

/* >>> BREAKPOINT - QUERY ANALYZER full screen popup (MainLayout DxPopup) : padding hata ke puri screen */
.sab-qa-popup .dxbl-popup-body,
.sab-qa-popup .dxbl-modal-body {
    padding: 0 !important;
    overflow: hidden !important;
}
.sab-qa-popup .qa {
    height: calc(92vh - 52px) !important;
    min-height: 0 !important;
    border: 0 !important;
}

/* >>> BREAKPOINT - WHITE THEME : left menu + top header + heading/ribbon SAFED bg, KALE akshar (user ki maang) */
html[data-sab-theme="White"] .navigation-drawer > .dxbl-drawer-panel, html[data-sab-tone="light"] .navigation-drawer > .dxbl-drawer-panel,
html[data-sab-theme="White"] .navigation-drawer > .dxbl-drawer-panel * , html[data-sab-tone="light"] .navigation-drawer > .dxbl-drawer-panel * {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}
html[data-sab-theme="White"] .navigation-drawer > .dxbl-drawer-panel .reminder-row i, html[data-sab-tone="light"] .navigation-drawer > .dxbl-drawer-panel .reminder-row i,
html[data-sab-theme="White"] .navigation-drawer > .dxbl-drawer-panel .reminder-badge , html[data-sab-tone="light"] .navigation-drawer > .dxbl-drawer-panel .reminder-badge {
    color: #111111 !important;
}
html[data-sab-theme="White"] .top-header, html[data-sab-tone="light"] .top-header,
html[data-sab-theme="White"] .top-header *, html[data-sab-tone="light"] .top-header *,
html[data-sab-theme="White"] .menu-title, html[data-sab-tone="light"] .menu-title,
html[data-sab-theme="White"] .menu-title h2, html[data-sab-tone="light"] .menu-title h2,
html[data-sab-theme="White"] .menu-title h3, html[data-sab-tone="light"] .menu-title h3,
html[data-sab-theme="White"] .menu-title span, html[data-sab-tone="light"] .menu-title span,
html[data-sab-theme="White"] .mst-v2-header, html[data-sab-tone="light"] .mst-v2-header,
html[data-sab-theme="White"] .sab-ribbon .dxbl-btn, html[data-sab-tone="light"] .sab-ribbon .dxbl-btn,
html[data-sab-theme="White"] .sab-ribbon .dxbl-btn * , html[data-sab-tone="light"] .sab-ribbon .dxbl-btn * {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}
html[data-sab-theme="White"] .menu-title .dxbl-btn , html[data-sab-tone="light"] .menu-title .dxbl-btn {
    background: rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.35) !important;
}


/* >>> BREAKPOINT - MstEntry tab strip aur controls ke bich gap */
.mst-v2-tabgap { height: 12px; }

/* >>> BREAKPOINT - MstEntry header : SabId + tooltip (Menu Id / Code / Table) theme ke rang me, akshar safed.
   Tooltip ka background pehle safed tha aur text bhi safed -> dikhta nahi tha. */
html[data-sab-theme] .mst-v2-info,
html[data-sab-theme] .mst-v2-info * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html[data-sab-theme] .mst-v2-title .menu-tooltip {
    background: var(--sab-menu-bg) !important;
    border: 1px solid var(--sab-menu-border) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* White theme : menu ka rang safed hai, isliye header / tooltip ka akshar kala */
html[data-sab-theme="White"] .mst-v2-info, html[data-sab-tone="light"] .mst-v2-info,
html[data-sab-theme="White"] .mst-v2-info *, html[data-sab-tone="light"] .mst-v2-info *,
html[data-sab-theme="White"] .mst-v2-title .menu-tooltip, html[data-sab-tone="light"] .mst-v2-title .menu-tooltip,
html[data-sab-theme="White"] .mst-v2-title .menu-tooltip * , html[data-sab-tone="light"] .mst-v2-title .menu-tooltip * {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

/* >>> BREAKPOINT - THEME PICKER GRID : 3 cards ek row me, group title ke saath */
.sab-theme-group-title { font-weight: 600; margin: 12px 0 6px; opacity: .85; }
.sab-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* =========================================================
   >>> BREAKPOINT - USER FONT (User Profile : Font name / Font size -> cookie SabFontName / SabFontSize, SabFont.cs).
   Sirf MstEntry (mst-v2-card : label / textbox), SabEntryGrid (sab-entry-grid), Sabgridreport (report-filter-container, sab-report-grid).
   html[data-sab-font-size] / [data-sab-font-name] tabhi hota hai jab user ne value di (App.razor / js/sabtheme.js sabFont.apply).
   Icons (Font Awesome / svg) nahi badalte.
   ========================================================= */
html[data-sab-font-size] :is(.mst-v2-card, .sab-entry-grid, .report-filter-container) .dxbl-grid,
html[data-sab-font-size] .dxbl-grid.sab-report-grid {
    --dxbl-grid-font-size: var(--sab-font-size) !important;
}

html[data-sab-font-size] :is(.mst-v2-card, .sab-entry-grid, .report-filter-container, .sab-report-grid),
html[data-sab-font-size] :is(.mst-v2-card, .sab-entry-grid, .report-filter-container, .sab-report-grid) *:not(i):not(svg):not(svg *):not([class*="fa-"]) {
    font-size: var(--sab-font-size) !important;
}

html[data-sab-font-name] :is(.mst-v2-card, .sab-entry-grid, .report-filter-container, .sab-report-grid),
html[data-sab-font-name] :is(.mst-v2-card, .sab-entry-grid, .report-filter-container, .sab-report-grid) *:not(i):not(svg):not(svg *):not([class*="fa-"]) {
    font-family: var(--sab-font-family) !important;
}

/* >>> BREAKPOINT - MSTENTRY PANEL LOOK (Dashboard2 jaisa, stronger) : header = heading + ribbon panel, card = dynamic controls panel.
   Sirf CSS (markup same). Dark rules sabdark.css me. Wapas karna ho to yeh block hata do (backup: scratchpad site.css.bak). */
html[data-sab-theme] .mst-v2-header {
    background-image: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(0,0,0,.10) 100%) !important;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
    margin-bottom: 14px;
}
html:not(.sab-dark) .mst-v2-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
    padding: 12px 14px;
    margin-bottom: 14px;
}

/* >>> BREAKPOINT - DXGRID FILTER ROW : numeric filter ke spin (+/-) buttons sabhi dxGrid me hide. */
.dxbl-grid .dxbl-grid-filter-row .dxbl-spin-btn-inc,
.dxbl-grid .dxbl-grid-filter-row .dxbl-spin-btn-dec,
.dxbl-grid .dxbl-grid-filter-row .dxbl-btn-group-vertical:has(> .dxbl-spin-btn-inc) {
    display: none !important;
}

/* >>> BREAKPOINT - MSTENTRY HEADER RIBBON : header ke andar ribbon ka strip (menu-bg toolbar) transparent.
   html[data-sab-theme] prefix isliye ki upar wala "html[data-sab-theme] .sab-ribbon .dxbl-toolbar !important" rule jeet na jaye. */
html[data-sab-theme] .mst-v2-header .sab-ribbon-container,
html[data-sab-theme] .mst-v2-header .sab-ribbon,
html[data-sab-theme] .mst-v2-header .sab-ribbon .dxbl-toolbar,
html[data-sab-theme] .mst-v2-header .sab-ribbon .dxbl-toolbar-item,
html[data-sab-theme] .mst-v2-header .sab-ribbon .dxbl-toolbar-item-content {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* >>> BREAKPOINT - MSTENTRY HEADER v2 : title/info ka bg transparent; ribbon buttons (New/Edit/Delete...) button jaise dikhein; selected left-menu ka text white. */
html[data-sab-theme] .mst-v2-header .mst-v2-title,
html[data-sab-theme] .mst-v2-header .menu-title,
html[data-sab-theme] .mst-v2-header .mst-v2-info {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
html[data-sab-theme] .mst-v2-header .sab-ribbon .dxbl-btn {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(0, 0, 0, 0.28) !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    margin: 0 2px;
}
html[data-sab-theme] .mst-v2-header .sab-ribbon .dxbl-btn:hover {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.45) !important;
}
html[data-sab-theme] .sab-tree .sab-node-active,
html[data-sab-theme] .sab-tree .sab-node-active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* >>> BREAKPOINT - REPORT HEADER v2 (MstEntry jaisa) : report ka heading panel + details (filter) panel transparent; report ke buttons button jaise. */
html[data-sab-theme] .report-filter-container .report-filter-box,
html[data-sab-theme] .report-filter-container .report-filter {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
html[data-sab-theme] .report-filter-container .sab-rep-titlebar .dxbl-btn {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(0, 0, 0, 0.28) !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}
html[data-sab-theme] .report-filter-container .sab-rep-titlebar .dxbl-btn:hover {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.45) !important;
}

/* >>> BREAKPOINT - REPORT HEADING PANEL (MstEntry ke heading jaisa) : menu-title alag panel, theme ka rang,
   rounded + shadow; text theme rule se (safed / White theme me kala). Buttons button jaise (upar REPORT HEADER v2). */
html[data-sab-theme] .report-filter-container .menu-title {
    background-image: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(0,0,0,.10) 100%) !important;
    border: 1px solid var(--sab-menu-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .18) !important;
    margin-bottom: 14px !important;
}
html[data-sab-theme] .report-filter-container .sab-rep-titlebar .dxbl-btn,
html[data-sab-theme] .report-filter-container .sab-rep-titlebar .dxbl-btn * {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

/* >>> BREAKPOINT - LEFT SIDE LISTBOX (company / AcYear / user / Chat / Dealer / ERP Setup / Task / Support) : ek hi list,
   rang theme ke menu se (--sab-menu-bg / -border / -hover). White / light theme me kale akshar upar ke rule se. */
.navigation-drawer > .dxbl-drawer-panel .sab-sidelist {
    width: 100%;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--sab-menu-border);
    border-radius: 10px;
    background: var(--sab-menu-bg);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .10);
}
.navigation-drawer > .dxbl-drawer-panel .sab-sidelist .reminder-row {
    border: 0 !important;
    border-bottom: 1px solid var(--sab-menu-border) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 3px 10px !important;     /* >>> gap kam : pehle 7px + min-height 34px */
    min-height: 0 !important;
    line-height: 1.25;
    font-size: 13px;
    gap: 7px !important;
}
.navigation-drawer > .dxbl-drawer-panel .sab-sidelist .reminder-row:last-child {
    border-bottom: 0 !important;
}
.navigation-drawer > .dxbl-drawer-panel .sab-sidelist .reminder-row i {
    width: 18px;
    text-align: center;
}
.navigation-drawer > .dxbl-drawer-panel .sab-sidelist .sab-sl-txt {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* >>> BREAKPOINT - REPORT 2 PANEL : (1) heading panel (theme rang - upar wala rule), (2) filter panel = alag card.
   Light : safed card + shadow. Dark : surface rang. */
html[data-sab-theme]:not(.sab-dark) .report-filter-container .report-filter {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12) !important;
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
}
html[data-sab-theme].sab-dark .report-filter-container .report-filter {
    background: var(--sab-surface) !important;
    border: 1px solid var(--sab-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45) !important;
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
}

/* >>> BREAKPOINT - REPORT heading ka TOOLTIP (menu id / code) : theme ke rang me chhup jata tha -> hamesha gehra bg, safed akshar */
html[data-sab-theme] .report-filter-container .menu-title .tooltip {
    background: #1f2937 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .30) !important;
    font-weight: 600;
}

/* =========================================================================
   >>> BREAKPOINT - MOBILE POPUP (sirf mobile, 768px se chhoti screen)
   Kai popup ki Width fix thi (430px / 820px / 95vw ...) aur body ki padding badi - mobile par popup
   thoda screen ke bahar (left / right) chala jata tha. Ab har DevExpress popup screen ke andar :
   chaudai max (screen - 12px), body ki left / right padding kam.
   ========================================================================= */
@media (max-width: 768px) {
    .dxbl-popup,
    .dxbl-modal-dialog {
        max-width: calc(100vw - 12px) !important;
        box-sizing: border-box;
    }

    .dxbl-popup .dxbl-popup-body,
    .dxbl-popup .dxbl-modal-body,
    .dxbl-modal-dialog .dxbl-modal-body {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .dxbl-popup .dxbl-popup-header,
    .dxbl-popup .dxbl-modal-header,
    .dxbl-popup .dxbl-popup-footer,
    .dxbl-popup .dxbl-modal-footer {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* >>> BREAKPOINT - LEFT DRAWER HEIGHT FIX (login ke baad menu expand karne par footer neeche nahi jaana chahiye).
   Pehle height 100% ki chain par nirbhar tha, jo SPA login ke baad (PanelWidth 0 -> 300) toot jati thi aur Ctrl+F5 par theek ho jati thi.
   Ab drawer seedha viewport ki height par baandha hai : menu (tree-container) apne andar scroll hota hai, footer (logo/company/user) hamesha dikhta hai. */
.navigation-drawer > .dxbl-drawer-panel {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}
.navigation-drawer > .dxbl-drawer-panel > :has(.drawer-body) {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.navigation-drawer > .dxbl-drawer-panel .drawer-body,
.navigation-drawer > .dxbl-drawer-panel .right-panel {
    height: 100%;
    min-height: 0;
}
.navigation-drawer > .dxbl-drawer-panel .tree-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.navigation-drawer > .dxbl-drawer-panel .sab-tree {
    height: auto !important;
    box-shadow: none;
}
.navigation-drawer > .dxbl-drawer-panel > :has(.navigation-drawer-footer),
.navigation-drawer > .dxbl-drawer-panel .navigation-drawer-footer {
    flex: 0 0 auto;
}

/* >>> BREAKPOINT - ORANGE THEME : left menu ke safed akshar - GLOW / BLUR / FILTER nahi (usse akshar dhundhle ho gaye the).
   Ab saaf (crisp) patla gehra-narangi kinara + semi-bold, taaki halke orange par bhi safed akshar tez aur saaf padhe. */
html[data-sab-theme="Orange"] .navigation-drawer > .dxbl-drawer-panel,
html[data-sab-theme="Orange"] .navigation-drawer > .dxbl-drawer-panel .sab-tree *,
html[data-sab-theme="Orange"] .navigation-drawer > .dxbl-drawer-panel :is(span, div, p, label, b, strong, a):not(.reminder-badge):not(.reminder-badge *) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(120, 50, 0, 0.75), 1px 0 1px rgba(120, 50, 0, 0.45), -1px 0 1px rgba(120, 50, 0, 0.45);
}