/* _content/ZabWebErp_dev/Components/Controls/DashBoardDtls.razor.rz.scp.css */
.sab-group[b-nbwgo1s75p] {
    background: var(--sab-surface);
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

    .sab-group .dxbl-panel[b-nbwgo1s75p] {
        background: var(--sab-surface);
        border: 1px solid var(--sab-border);
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }
/* _content/ZabWebErp_dev/Components/Controls/SabChildGrid.razor.rz.scp.css */
/* SabChildGrid - grid ke andar grid (popup + bar + header + cell edit look).
   Global copy wwwroot/css/site.css me bhi hai (.sab-childgrid-*) - wahan se hata sakte ho. */

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

[b-4qu2wcjrsh] .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 */
}

/* bar upar: table name + I/P switch + Auto */
.sab-childgrid-bar[b-4qu2wcjrsh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 2px 10px 2px;
}

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

.sab-childgrid-spacer[b-4qu2wcjrsh] {
    flex: 1 1 auto;
}

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

/* parent values under the title */
.sab-childgrid-head[b-4qu2wcjrsh] {
    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[b-4qu2wcjrsh] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
}

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

.sab-childgrid-head-label[b-4qu2wcjrsh]::after {
    content: ":";
}

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

/* grid ko DEFINITE height chahiye, warna DxGrid apne scrollbars nahi dikhata */
.sab-childgrid-wrap[b-4qu2wcjrsh] {
    flex: 1 1 auto;
    min-height: 260px;
    position: relative;
    overflow: hidden;
}

[b-4qu2wcjrsh] .sab-childgrid-wrap .sab-childgrid {
    position: absolute;
    inset: 0;
    height: 100%;
}

/* CELL edit mode: koi row highlight nahi, sirf active cell blue */
[b-4qu2wcjrsh] .sab-childgrid .dxbl-grid-focused-row > td,
[b-4qu2wcjrsh] .sab-childgrid tr.dxbl-grid-focused-row,
[b-4qu2wcjrsh] .sab-childgrid tr.dxbl-grid-selected-row > td {
    background: transparent !important;
    color: inherit !important;
}

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

[b-4qu2wcjrsh] .sab-childgrid td:focus-within input {
    font-weight: 600;
}

/* inline cell editor */
input.sab-childgrid-editor[b-4qu2wcjrsh] {
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0 2px;
}

.sab-childgrid-ro[b-4qu2wcjrsh] {
    display: block;
    padding: 0 2px;
    opacity: .75;
}

[b-4qu2wcjrsh] .sab-button {
    border: 1px solid var(--sab-border);
    border-radius: 6px;
    padding: 5px 14px;
    background-color: var(--sab-bg);
    color: var(--sab-text);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    min-height: 32px;
}

/* row edit me hai - typed (abhi commit nahi hui) value */
.sab-childgrid-pending[b-4qu2wcjrsh] {
    font-style: italic;
}
/* _content/ZabWebErp_dev/Components/Controls/SabEntryGrid.razor.rz.scp.css */
.sab-entry-grid[b-ou0jboz9w5] {
    width: 100%;
    border: 1px solid var(--sab-border);
    border-radius: 6px;
    padding: 8px;
    background: var(--sab-bg);
}

.sab-entry-toolbar[b-ou0jboz9w5] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.sab-grid-search[b-ou0jboz9w5] {
    width: 250px;
}

.sab-grid-btn[b-ou0jboz9w5] {
    min-width: 90px;
}

.sab-grid-footer[b-ou0jboz9w5] {
    margin-top: 8px;
    font-weight: 600;
}

.sab-grid-header[b-ou0jboz9w5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sab-grid-title[b-ou0jboz9w5] {
    font-size: 18px;
    font-weight: 600;
}

.sab-grid-search[b-ou0jboz9w5] {
    width: 250px;
}

[b-ou0jboz9w5] .sab-grid .dxbl-grid-header {
    background-color: var(--sab-surface) !important;
    color: var(--sab-text);
    font-weight: 600;
}





/* edit-mode switch (popup / inline) */
.sab-grid-edit-mode[b-ou0jboz9w5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sab-grid-enter-hint[b-ou0jboz9w5] {
    font-size: 11px;
    opacity: .65;
}

/* inline cell editor */
input.sab-grid-inline-editor[b-ou0jboz9w5] {
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0 2px;
}

input.sab-grid-inline-editor.sab-num[b-ou0jboz9w5] {
    text-align: right;
}

input.sab-grid-inline-editor.sab-required[b-ou0jboz9w5] {
    border-left: 3px solid #d9534f;
}

.sab-grid-inline-ro[b-ou0jboz9w5] {
    display: block;
    padding: 0 2px;
    opacity: .75;
}

/* cell edit mode: poori row blue nahi, sirf active cell */
[b-ou0jboz9w5] .sab-grid td.dxbl-grid-edit-cell,
[b-ou0jboz9w5] .sab-grid td:focus-within {
    box-shadow: inset 0 0 0 2px var(--sab-primary);
}

/* row edit me hai - typed (abhi save nahi hui) value */
.sab-grid-inline-pending[b-ou0jboz9w5] {
    font-style: italic;
}

/* child grid column in the grid cell: text / input + button (sirf button se child grid khulti hai) */
.sab-childgrid-cell[b-ou0jboz9w5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
}

.sab-childgrid-cell-text[b-ou0jboz9w5] {
    flex: 1 1 auto;
    min-width: 0;
}

.sab-childgrid-cell-btn[b-ou0jboz9w5] {
    flex: 0 0 auto;
    border: 1px solid var(--sab-border);
    border-radius: 4px;
    background: var(--sab-surface);
    color: var(--sab-primary-text);
    font-size: 11px;
    line-height: 1;
    padding: 3px 6px;
    cursor: pointer;
    opacity: .75;
}

.sab-childgrid-cell-btn:hover[b-ou0jboz9w5] {
    opacity: 1;
    border-color: var(--sab-border-strong);
}

/* >>> BREAKPOINT - NUMBER FILTER : filter row ke number box (DxSpinEdit) me spin (up / down) button nahi.
   Sirf filter row - grid ke andar edit wale number box par asar nahi. */
.sab-entry-grid[b-ou0jboz9w5]  .dxbl-grid-filter-row .dxbl-spin-btn-inc,
.sab-entry-grid[b-ou0jboz9w5]  .dxbl-grid-filter-row .dxbl-spin-btn-dec,
.sab-entry-grid[b-ou0jboz9w5]  .dxbl-grid-filter-row .dxbl-btn-group-vertical:has(> .dxbl-spin-btn-inc) {
    display: none !important;
}
/* _content/ZabWebErp_dev/Components/Controls/SabGrid.razor.rz.scp.css */

.sab-toolbar[b-cw3ryzyj7r] {
    background: var(--sab-bg);
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    padding: 6px 10px;
    margin-bottom: 6px;
}

.sab-export-item[b-cw3ryzyj7r] {
    font-size: 16px !important;
    font-weight: 600;
    font-family: "Segoe UI";
}

    .sab-export-item *[b-cw3ryzyj7r] {
        font-size: 16px !important;
        font-weight: 600 !important;
        font-family: "Segoe UI" !important;
    }

.sab-grid .dxbl-grid-row.dxbl-selection td[b-cw3ryzyj7r] {
    background-color: var(--sab-surface-active) !important;
}


.sab-grid .dxbl-grid-header-content:hover[b-cw3ryzyj7r] {
    background-color: var(--sab-primary-soft); /* Same colour as row hover */
    cursor: pointer;
}

.sab-grid .dxbl-grid-header:hover[b-cw3ryzyj7r] {
    background-color: var(--sab-primary-soft-hover);
}

.sab-grid th:hover[b-cw3ryzyj7r] {
    background-color: var(--sab-primary-soft-hover);
}


.sab-grid .dxbl-grid-header-row:has(.dxbl-grid-header:hover)[b-cw3ryzyj7r] {
    background-color: var(--sab-surface-active)  !important;
}
.sab-toolbar .sab-export-grid[b-cw3ryzyj7r] {
    background-color: var(--sab-surface-active) !important;
}



.sab-grid-header[b-cw3ryzyj7r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sab-grid-title[b-cw3ryzyj7r] {
    font-size: 18px;
    font-weight: 600;
}

.sab-grid-search[b-cw3ryzyj7r] {
    width: 250px;
}

[b-cw3ryzyj7r] .sab-grid .dxbl-grid-header {
    background-color: var(--sab-surface) !important;
    color: var(--sab-text);
    font-weight: 600;
}

/* >>> BREAKPOINT - toolbar ka search box : chaudai aadhi (help popup / Find / MstEntry popup) */
[b-cw3ryzyj7r] .sab-grid-search { width: 120px !important; max-width: 120px; min-width: 0 !important; }
/* _content/ZabWebErp_dev/Components/Controls/SabGridPopup.razor.rz.scp.css */
[b-lm7wvx70l6] .sab-button {
    border: 1px solid var(--sab-border);
    border-radius: 6px;
    padding: 5px 14px;
    background-color: var(--sab-bg);
    color: var(--sab-text);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    min-height: 32px;
    transition: all 0.15s ease;
}

    [b-lm7wvx70l6] .sab-button:hover {
        background-color: var(--sab-surface-hover);
        border-color: var(--sab-border-strong);
        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.20);
    }

    [b-lm7wvx70l6] .sab-button:active {
        transform: translateY(1px);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }

/* child grid column: textbox (typing allowed when readonly=0) + button that opens the child grid */
.sab-childgrid-field[b-lm7wvx70l6] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sab-childgrid-field > :first-child[b-lm7wvx70l6] {
    flex: 1 1 auto;
    min-width: 0;
}

[b-lm7wvx70l6] .sab-childgrid-btn {
    flex: 0 0 auto;
    min-width: 34px;
    padding: 4px 8px;
}
/* _content/ZabWebErp_dev/Components/Controls/SabHtmlGrid.razor.rz.scp.css */
.sab-html-grid[b-yarzo3ibqd] {
    border-collapse: collapse;
    white-space: nowrap;
    width: max-content;
    min-width: 100%;
    font-family: Segoe UI;
    font-size: 13px;
}

    .sab-html-grid th[b-yarzo3ibqd] {
        background: var(--sab-surface);
        border: 1px solid var(--sab-border-strong);
        padding: 5px;
        position: sticky;
        top: 0;
    }

    .sab-html-grid td[b-yarzo3ibqd] {
        border: 1px solid var(--sab-border);
        padding: 4px 6px;
    }

    .sab-html-grid .num[b-yarzo3ibqd] {
        text-align: right;
    }
/* _content/ZabWebErp_dev/Components/Controls/SabLookup.razor.rz.scp.css */
.sablookup-box[b-sh5d9v7rrk] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 24px;
    background: var(--sab-bg);
    border: 1px solid var(--sab-border);
    border-radius: 4px;
    overflow: hidden;
}

.sablookup-text[b-sh5d9v7rrk] {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: var(--sab-bg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sablookup-button[b-sh5d9v7rrk] {
    width: 32px;
    min-width: 32px;
    height: 100%;
    background: var(--sab-bg);
    border: 0;
    border-left: 1px solid var(--sab-border);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    margin: 0;
}

    .sablookup-button:hover[b-sh5d9v7rrk] {
        background: var(--sab-surface-hover);
    }

.sab-grid .dxbl-grid-header-row > th[b-sh5d9v7rrk] {
    background: var(--sab-primary-soft);
    font-weight: bold;
}


.sablookup-grid .dxbl-grid-header[b-sh5d9v7rrk],
.sablookup-grid .dxbl-grid-header-content[b-sh5d9v7rrk],
.sablookup-grid th[b-sh5d9v7rrk] {
    background: var(--sab-surface) !important;
    color: var(--sab-text) !important;
    font-weight: 700 !important;
}

/* _content/ZabWebErp_dev/Components/Controls/SabText.razor.rz.scp.css */
.sabtext-box[b-m6nt2hb3i1] {
    position: relative;
    width: 100%;
    cursor: pointer;
}

.sabtext-dropdown[b-m6nt2hb3i1] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    pointer-events: none;
}

.sab-lookup-popup[b-m6nt2hb3i1] {
    transform-origin: top center !important;
}

    /* Popup ko viewport ke andar rakho */
    .sab-lookup-popup .dxbl-popup[b-m6nt2hb3i1] {
        top: 20px !important;
        bottom: auto !important;
        transform: none !important;
    }

/* >>> BREAKPOINT - report filter : clear (✕) dropdown ke aage */
.sabtext-clear[b-m6nt2hb3i1] {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #c62828;
    cursor: pointer;
    padding: 0 3px;
    z-index: 1;
}
/* _content/ZabWebErp_dev/Components/Controls/SabToolTip.razor.rz.scp.css */
.sab-control-tooltip[b-3atf911zo6] {
    position: relative;
    width: 100%;
}

    .sab-control-tooltip[b-3atf911zo6]::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 0;
        bottom: calc(100% + 6px);
        background: var(--sab-text);
        color: var(--sab-bg);
        padding: 5px 9px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 999999;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .sab-control-tooltip:hover[b-3atf911zo6]::after {
        opacity: 1;
        visibility: visible;
    }

.sab-has-tooltip[b-3atf911zo6] {
    width: 100%;
}
/* _content/ZabWebErp_dev/Components/Hr/HrPunch.razor.rz.scp.css */
/* >>> BREAKPOINT - MOBILE ATTENDANCE : phone ke liye (ek column, bada button) */
.hp[b-k6f8q24aek] { max-width: 480px; margin: 0 auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; font-family: "Segoe UI", Arial, sans-serif; }
.hp-card[b-k6f8q24aek] { background: #fff; border-radius: 14px; box-shadow: 0 1px 4px rgba(15, 23, 42, .08); padding: 14px; }
.hp-head[b-k6f8q24aek] { text-align: center; }
.hp-clock[b-k6f8q24aek] { font-size: 34px; font-weight: 800; color: #111827; }
.hp-date[b-k6f8q24aek] { font-size: 13px; color: #6b7280; margin-bottom: 6px; }
.hp-name[b-k6f8q24aek] { font-size: 18px; font-weight: 700; color: #1f2937; }
.hp-dim[b-k6f8q24aek] { font-size: 12px; color: #6b7280; }
.hp-err[b-k6f8q24aek] { background: #fdecea; color: #b91c1c; font-size: 13px; }
.hp-center[b-k6f8q24aek] { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hp-cam[b-k6f8q24aek] { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; background: #e5e7eb; transform: scaleX(-1); }
.hp-btn[b-k6f8q24aek] { width: 190px; height: 190px; border-radius: 50%; border: 0; color: #fff; font-size: 22px; font-weight: 800; cursor: pointer;
          display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
    .hp-btn i[b-k6f8q24aek] { font-size: 38px; }
    .hp-btn.in[b-k6f8q24aek] { background: linear-gradient(145deg, #22c55e, #15803d); }
    .hp-btn.out[b-k6f8q24aek] { background: linear-gradient(145deg, #f87171, #b91c1c); }
    .hp-btn:disabled[b-k6f8q24aek] { opacity: .7; cursor: default; }
.hp-status[b-k6f8q24aek] { min-height: 18px; font-size: 13px; color: #1f2937; text-align: center; }
.hp-link[b-k6f8q24aek] { border: 0; background: transparent; color: #2563eb; font-size: 13px; cursor: pointer; padding: 4px; }
.hp-title[b-k6f8q24aek] { font-weight: 700; font-size: 14px; margin-bottom: 6px; color: #111827; }
.hp-row[b-k6f8q24aek] { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f0f1f3; font-size: 14px; }
.hp-tag[b-k6f8q24aek] { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; color: #fff; }
    .hp-tag.in[b-k6f8q24aek] { background: #16a34a; }
    .hp-tag.out[b-k6f8q24aek] { background: #dc2626; }
.hp-warn[b-k6f8q24aek] { font-size: 11px; color: #b45309; background: #fef3c7; padding: 2px 6px; border-radius: 8px; }
.hp-adm[b-k6f8q24aek] { display: flex; gap: 8px; margin: 8px 0; }
[b-k6f8q24aek] .hp-grow { flex: 1; }

/* >>> lat / lng + address */
.hp-loc[b-k6f8q24aek] { width: 100%; font-size: 12px; color: #374151; background: #f6f7f9; border-radius: 10px; padding: 8px 10px; line-height: 1.5; word-break: break-word; }
.hp-addr[b-k6f8q24aek] { font-size: 11px; color: #6b7280; padding: 0 0 6px 4px; border-bottom: 1px solid #f0f1f3; word-break: break-word; }
/* _content/ZabWebErp_dev/Components/Layout/Drawer.razor.rz.scp.css */
.drawer-container[b-4y58d2se18] {
    height: 100%;
}

.navigation-drawer-shading[b-4y58d2se18] {
    height: 100%;
    position: absolute;
    transition: ease 300ms;
    transition-property: opacity, visibility;
    visibility: visible;
    width: 100%;
    z-index: 99;
    background-color: var(--dxds-color-surface-backdrop-default-rest);
}

.navigation-drawer.mobile.panel-closed .navigation-drawer-shading[b-4y58d2se18] {
    opacity: 0;
    visibility: hidden;
}

[b-4y58d2se18] .navigation-drawer > .dxbl-drawer-panel {
    display: flex;
}

[b-4y58d2se18] .navigation-drawer.mobile > .dxbl-drawer-panel {
    display: none;
}

.navigation-drawer-shading[b-4y58d2se18] {
    display: none;
}

[b-4y58d2se18] .panel-open:not(.mobile) .nav-buttons-container .menu-button {
    display: none;
}

@media (max-width: 768px) {
    [b-4y58d2se18] .navigation-drawer > .dxbl-drawer-panel {
        display: none;
    }

    [b-4y58d2se18] .navigation-drawer.mobile > .dxbl-drawer-panel {
        display: flex;
    }

    .navigation-drawer-shading[b-4y58d2se18] {
        display: block;
    }

    [b-4y58d2se18] .panel-open:not(.mobile) .nav-buttons-container .menu-button {
        display: flex;
    }
}
/* _content/ZabWebErp_dev/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-8lnbuzfxdq] {
    height: 100%;
    min-height: 0;
}


/* =========================================================
   NAVIGATION DRAWER
   ========================================================= */

[b-8lnbuzfxdq] .navigation-drawer {
    --dxbl-drawer-panel-body-padding-x: 0;
    --dxbl-drawer-panel-body-padding-y: 1rem;
    --dxbl-drawer-panel-footer-bg: var(--sab-surface);
    --dxbl-drawer-panel-header-bg: var(--sab-surface);
    --dxbl-drawer-separator-border-width: 0;
    overflow: visible !important;
}


    /* Left Drawer Background */
    [b-8lnbuzfxdq] .navigation-drawer > .dxbl-drawer-panel {
        background: var(--sab-surface);
        border-radius: 0 12px 12px 0;
        border-right: 1px solid var(--sab-border);
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.10);
        overflow: visible;
    }


.navigation-drawer-header[b-8lnbuzfxdq] {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 48px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 2px;
    padding-right: 4px;
    background: var(--sab-surface);
}


    .navigation-drawer-header .logo[b-8lnbuzfxdq] {
        height: 1.5rem;
        width: 5rem;
    }


/* =========================================================
   DRAWER BODY
   ========================================================= */

.drawer-body[b-8lnbuzfxdq] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-height: 0;
    background: var(--sab-surface);
}


/* =========================================================
   DRAWER CONTENT / MAIN CONTENT
   ========================================================= */

.drawer-content[b-8lnbuzfxdq] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
    background: var(--sab-bg);
}


.page-content-container[b-8lnbuzfxdq] {
    height: 90%;
    overflow-y: auto;
    padding-bottom: 130px;
    box-sizing: border-box;
    background: var(--sab-bg);
}


@media (max-width: 768px) {

    .drawer-content[b-8lnbuzfxdq] {
        padding: 0.5rem 0.5rem 0.5rem 5px;
    }
}


/* =========================================================
   NAVIGATION BUTTONS
   ========================================================= */

.nav-buttons-container[b-8lnbuzfxdq] {
    align-items: center;
    display: flex;
    gap: 0.625rem;
    min-height: 2rem;
}


[b-8lnbuzfxdq] .nav-buttons-container > a {
    color: inherit;
}


[b-8lnbuzfxdq] .nav-buttons-container .back-button {
    padding-left: 0;
    padding-right: 0.25rem;
}


/* =========================================================
   COMPANY NAME
   ========================================================= */

.company-name[b-8lnbuzfxdq] {
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--sab-text);
    font-weight: 600;
}


/* =========================================================
   DRAWER TOGGLE BUTTON
   ========================================================= */

[b-8lnbuzfxdq] .drawer-toggle-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 2px !important;
    margin-left: 0 !important;
}


    [b-8lnbuzfxdq] .drawer-toggle-btn .dxbl-image,
    [b-8lnbuzfxdq] .drawer-toggle-btn i {
        font-size: 16px !important;
    }


/* =========================================================
   TOP HEADER
   ========================================================= */

.top-header[b-8lnbuzfxdq] {
    display: flex;
    align-items: center;
    gap: 1px;
    height: 40px;
    padding: 0 12px;
    background: var(--sab-surface);
    border-bottom: 1px solid var(--sab-border);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
    font-family: sans-serif;
    white-space: nowrap;
    color: var(--sab-text);
}


    .top-header .logo[b-8lnbuzfxdq] {
        height: 34px;
    }


    .top-header .btn-icon-only[b-8lnbuzfxdq] {
        margin-right: 4px;
    }


/* =========================================================
   HEADER LEFT
   ========================================================= */

.header-left[b-8lnbuzfxdq] {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}


/* =========================================================
   HEADER SPACER
   ========================================================= */

.header-spacer[b-8lnbuzfxdq] {
    flex: 1;
}


/* =========================================================
   HEADER RIGHT
   ========================================================= */

.header-right[b-8lnbuzfxdq] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}


.top-icon[b-8lnbuzfxdq] {
    margin-left: 1px;
    margin-right: 1px;
}


    /* Header Icons */
    .top-icon[b-8lnbuzfxdq],
    .top-icon i[b-8lnbuzfxdq] {
        color: var(--sab-text) !important;
        background: transparent !important;
    }


        .top-icon .fa-circle-user[b-8lnbuzfxdq] {
            color: var(--sab-text) !important;
        }


        .top-icon .dxbl-btn[b-8lnbuzfxdq] {
            background: transparent !important;
            border: none !important;
        }


/* Top header buttons */
[b-8lnbuzfxdq] .top-header .dxbl-btn {
    color: var(--sab-text) !important;
    background: transparent !important;
    border-color: transparent !important;
}


    /* Top header button hover */
    [b-8lnbuzfxdq] .top-header .dxbl-btn:hover {
        background: var(--sab-surface-hover) !important;
    }


/* =========================================================
   TRIAL VERSION
   ========================================================= */

.trial-version[b-8lnbuzfxdq] {
    color: var(--sab-danger);
    margin-left: 5px;
    white-space: nowrap;
    font-weight: 600;
}


/* =========================================================
   HEADER REMINDER BADGE
   ========================================================= */

.header-reminder-badge[b-8lnbuzfxdq] {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--sab-danger);
    color: white;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 18px;
}


/* =========================================================
   DRAWER FOOTER
   ========================================================= */

.navigation-drawer-footer[b-8lnbuzfxdq] {
    display: flex;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--sab-border);
    background: var(--sab-surface);
    flex-shrink: 0;
    height: 52px;
    box-sizing: border-box;
}


.drawer-footer-btn[b-8lnbuzfxdq] {
    flex: 1;
}


[b-8lnbuzfxdq] .navigation-drawer-footer .dxbl-toolbar {
    min-height: 34px;
}


[b-8lnbuzfxdq] .navigation-drawer-footer .dxbl-toolbar-item {
    padding: 2px 8px;
    font-size: 12px;
}


/* =========================================================
   RIGHT PANEL
   ========================================================= */

.right-panel[b-8lnbuzfxdq] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}


.nav-search[b-8lnbuzfxdq] {
    flex-shrink: 0;
}


.sab-tree[b-8lnbuzfxdq] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}


/* =========================================================
   REMINDER ROW
   ========================================================= */

.reminder-row[b-8lnbuzfxdq] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding: 6px 4px;
    cursor: pointer;
    background: var(--sab-surface-hover);
    border-radius: 6px;
    box-sizing: border-box;
    color: var(--sab-text);
}


    .reminder-row:hover[b-8lnbuzfxdq] {
        background: var(--sab-surface-active);
    }


/* =========================================================
   REMINDER BADGE
   ========================================================= */

.reminder-badge[b-8lnbuzfxdq] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 50px;
    background: var(--sab-danger);
    color: white;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}


/* =========================================================
   SMALL TEXTBOX
   ========================================================= */

.sab-small-textbox .dxbl-text-editor-input[b-8lnbuzfxdq] {
    padding: 2px 6px !important;
    min-height: 15px !important;
    height: 15px !important;
    font-size: 8px;
}


.sab-small-textbox .dxbl-text-editor[b-8lnbuzfxdq] {
    min-height: 15px !important;
}


/* =========================================================
   NOTEPAD POPUP
   ========================================================= */

.sab-notepad-popup[b-8lnbuzfxdq] {
    border-radius: 12px !important;
    overflow: hidden !important;
}


    /* Popup Header */
    .sab-notepad-popup .sab-popup-header[b-8lnbuzfxdq] {
        justify-content: space-between;
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        gap: 10px;
        background: var(--sab-surface);
        color: var(--sab-primary-text);
        font-size: 18px;
        font-weight: 600;
        border-bottom: 1px solid var(--sab-border);
        box-shadow: 0 2px 8px rgba(0, 80, 160, 0.12);
    }


.sab-popup-header i[b-8lnbuzfxdq] {
    font-size: 17px;
}


/* =========================================================
   NOTEPAD BODY
   ========================================================= */

.sab-notepad-popup .sab-notepad-body[b-8lnbuzfxdq] {
    width: 100% !important;
    height: 100% !important;
    min-height: 450px;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box;
    display: flex;
}


    /* DxMemo */
    .sab-notepad-popup .sab-notepad-body .dxbl-memo[b-8lnbuzfxdq] {
        width: 100% !important;
        height: 100% !important;
        min-height: 450px !important;
        box-sizing: border-box;
    }


    /* Memo internal editor */
    .sab-notepad-popup .sab-notepad-body textarea[b-8lnbuzfxdq] {
        width: 100% !important;
        height: 100% !important;
        min-height: 430px !important;
        box-sizing: border-box;
        resize: none;
    }


/* =========================================================
   NOTEPAD FOOTER
   ========================================================= */

.sab-notepad-popup .sab-popup-footer[b-8lnbuzfxdq] {
    width: 100%;
    min-height: 48px;
    padding: 7px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    background: var(--sab-surface);
    color: var(--sab-text-muted);
    border-top: 1px solid var(--sab-border);
    box-shadow: 0 -2px 8px rgba(0, 80, 160, 0.10);
    font-size: 13px;
}


    /* Footer Button */
    .sab-notepad-popup .sab-popup-footer .dxbl-btn[b-8lnbuzfxdq] {
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    }


/* =========================================================
   POWERED BY
   ========================================================= */

/* >>> BREAKPOINT - install icon + text ek hi line me */
.powered-by[b-8lnbuzfxdq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 28px;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    width: fit-content;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 40px;
    color: var(--sab-primary-text);
    background: transparent;          /* koi background nahi */
    /* login page ke .company-title h1 jaisa font */
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: default;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.35);
    border-radius: 5px;
    box-shadow: none;
}


/* =========================================================
   THEME PICKER POPUP
   ========================================================= */

[b-8lnbuzfxdq] .sab-theme-popup .dxbl-popup-body {
    padding: 0;
}

.sab-theme-body[b-8lnbuzfxdq] {
    padding: 12px 16px 16px;
}

.sab-theme-group-title[b-8lnbuzfxdq] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.65;
    margin: 10px 0 6px;
}

.sab-theme-grid[b-8lnbuzfxdq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.sab-theme-card[b-8lnbuzfxdq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    user-select: none;
}

    .sab-theme-card:hover[b-8lnbuzfxdq] {
        border-color: var(--sab-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }

    .sab-theme-card.active[b-8lnbuzfxdq] {
        border-color: var(--sab-primary);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--sab-primary) 30%, transparent);
    }

.sab-theme-swatch[b-8lnbuzfxdq] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.sab-theme-name[b-8lnbuzfxdq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    font-size: 13px;
    font-weight: 600;
}

.sab-theme-mode-icon[b-8lnbuzfxdq] {
    font-size: 11px;
    opacity: 0.55;
    margin-left: 6px;
}

/* >>> BREAKPOINT - INSTALL APP icon (powered-by ke aage) */
.powered-by .sab-install-btn[b-8lnbuzfxdq] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: 0 !important;
    line-height: 0;
    cursor: pointer;
}

    .powered-by .sab-install-btn img[b-8lnbuzfxdq] {
        width: 100px;
        height: 100px;
        border-radius: 5px;
        object-fit: contain;
        display: block;
    }

.powered-by-text[b-8lnbuzfxdq] {
    cursor: pointer;
    position: relative;
}

/* >>> BREAKPOINT - Powered by ka apna tooltip (hover / tap par) */
.powered-by-text[b-8lnbuzfxdq]::after {
    content: attr(data-tip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: 280px;
    white-space: normal;
    background: #1f2937;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 9999;
    text-shadow: none;
    font-weight: 400;
    text-align: left;
}

.powered-by-text:hover[b-8lnbuzfxdq]::after,
.powered-by-text:focus[b-8lnbuzfxdq]::after {
    opacity: 1;
    visibility: visible;
}

/* >>> BREAKPOINT - SUPPORT button (powered-by ke aage, install icon ke saath) */
.powered-by .sab-support-btn[b-8lnbuzfxdq] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: 0 !important;
    line-height: 0;
    cursor: pointer;
}

    .powered-by .sab-support-btn i[b-8lnbuzfxdq] {
        font-size: 19px;
        color: #e53935;
    }

    .powered-by .sab-support-btn:disabled i[b-8lnbuzfxdq],
    .powered-by .sab-support-btn[aria-disabled="true"] i[b-8lnbuzfxdq] {
        color: #9e9e9e;
    }

/* >>> BREAKPOINT - Stock With Image icon (on = neela) */
.top-icon.swimg-btn.on[b-8lnbuzfxdq],
.top-icon.swimg-btn.on i[b-8lnbuzfxdq],
[b-8lnbuzfxdq] .top-icon.swimg-btn.on,
[b-8lnbuzfxdq] .top-icon.swimg-btn.on i {
    color: #2a78d6 !important;
}


/* =========================================================
   >>> BREAKPOINT - MOBILE HEADER : Task / AI / Enquiry / Theme / Logout screen se bahar
   ja rahe the (header ek hi line, nowrap, 40px). 768px se chhoti screen par header
   do line me : upar company naam, neeche saare button (jagah kam ho to agli line).
   ========================================================= */
@media (max-width: 768px) {
    .top-header[b-8lnbuzfxdq] {
        height: auto;
        min-height: 40px;
        flex-wrap: wrap;
        padding: 2px 6px;
        row-gap: 2px;
        white-space: normal;
    }

    .header-left[b-8lnbuzfxdq] {
        flex: 1 1 auto;
    }

    .header-spacer[b-8lnbuzfxdq] {
        display: none;
    }

    .header-right[b-8lnbuzfxdq] {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-left: 0;
        row-gap: 2px;
    }

        .header-right > div[b-8lnbuzfxdq] {
            display: flex !important;
            flex-wrap: wrap;
            align-items: center;
        }

    [b-8lnbuzfxdq] .top-header .dxbl-btn {
        padding: 4px 6px !important;
    }
}

/* >>> BREAKPOINT - ClientSettings panel (Theme popup ke neeche) */
.sab-cs[b-8lnbuzfxdq] {
    display: grid;
    grid-template-columns: 1fr 130px;
    align-items: center;
    gap: 6px 10px;
}
.sab-cs label[b-8lnbuzfxdq] { margin: 0; font-size: 13px; }
.sab-cs-msg[b-8lnbuzfxdq] { margin-top: 6px; font-size: 12px; opacity: .85; }
.sab-cs-btns[b-8lnbuzfxdq] { margin-top: 8px; display: flex; justify-content: flex-end; }
[b-8lnbuzfxdq] .sab-theme-popup .dxbl-popup-body { max-height: 80vh; overflow-y: auto; }
/* _content/ZabWebErp_dev/Components/Layout/NavMenu.razor.rz.scp.css */

[b-y7y4kh4uja] .menu {
    --dxbl-menu-item-color: var(--sab-text);
    --dxbl-menu-item-image-color: var(--sab-text);
    --dxbl-menu-item-hover-bg: var(--sab-surface-hover);
    --dxbl-menu-item-hover-color: var(--sab-primary-text);
    --dxbl-menu-item-hover-image-color: var(--sab-primary-text);
    background: var(--sab-bg);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
}
    [b-y7y4kh4uja] .menu.display-mobile {
        margin-bottom: 2rem;
    }

    [b-y7y4kh4uja] .menu .dxbl-menu-item {
        border-radius: 8px;
        margin: 2px 4px;
        transition: all .2s ease;
    }

/* Active menu */
[b-y7y4kh4uja] .menu-item-active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--sab-primary) 80%, var(--sab-bg)) 0%, var(--sab-primary) 100%);
    color: var(--sab-on-primary) !important;
    border-radius: 8px;
}
[b-y7y4kh4uja] .menu .dxbl-menu-item:hover {
    background: var(--sab-surface-hover);
}
.navigation-drawer[b-y7y4kh4uja] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--sab-primary) 80%, var(--sab-bg)) 0%, var(--sab-primary) 100%);
}

[b-y7y4kh4uja] .menu-item-active .dxbl-menu-item-text,
[b-y7y4kh4uja] .menu-item-active .dxbl-menu-item-image {
    color: var(--sab-on-primary) !important;
}

[b-y7y4kh4uja] .menu .dxbl-menu-item.dxbl-menu-item-level-0 {
    font-weight: 600;
}

[b-y7y4kh4uja] .menu .dxbl-menu-item.dxbl-menu-item-level-1 {
    padding-left: 20px;
}

[b-y7y4kh4uja] .menu .dxbl-menu-item.dxbl-menu-item-level-2 {
    padding-left: 40px;
}


.sab-tree[b-y7y4kh4uja] {
    background: var(--sab-bg);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    height: 50%;
}

[b-y7y4kh4uja] .sab-tree .dxbl-tv-node {
    border-radius: 6px;
}

    [b-y7y4kh4uja] .sab-tree .dxbl-tv-node:hover {
        background: var(--sab-surface-hover);
    }

[b-y7y4kh4uja] .sab-tree .dxbl-tv-node-selected {
    background: linear-gradient(180deg, color-mix(in srgb, var(--sab-primary) 80%, var(--sab-bg)) 0%, var(--sab-primary) 100%);
    color: var(--sab-on-primary);
}


.drawer-content[b-y7y4kh4uja] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.reminder-row[b-y7y4kh4uja] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 6px 4px;
    cursor: pointer;
    background: var(--sab-bg);
    border-radius: 6px;
    box-sizing: border-box;
}

    .reminder-row:hover[b-y7y4kh4uja] {
        background: var(--sab-surface-hover);
    }

/* >>> BREAKPOINT - LEFT MENU : jo menu khula hai wo highlight (sab-node-active) */
[b-y7y4kh4uja] .sab-tree .sab-node-active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--sab-primary) 80%, var(--sab-bg)) 0%, var(--sab-primary) 100%);
    color: var(--sab-on-primary) !important;
    font-weight: 600;
    border-radius: 6px;
}
[b-y7y4kh4uja] .sab-tree .sab-node-active .dxbl-tv-node-text,
[b-y7y4kh4uja] .sab-tree .sab-node-active .dxbl-tv-node-content {
    color: var(--sab-on-primary) !important;
}
/* _content/ZabWebErp_dev/Components/Pages/Counter.razor.rz.scp.css */
.counter-block[b-fcrg8nka1y] {
    align-items: center;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 17rem;
    justify-content: center;
    padding: 2.5rem 1.5rem 1.5rem;
    width: 16.875rem;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.counter-block .counter-content[b-fcrg8nka1y] {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.counter-block .counter-count[b-fcrg8nka1y] {
    font-size: 7.5rem;
    font-weight: 400;
    line-height: 7.75rem;
}
/* _content/ZabWebErp_dev/Components/Pages/Dashboard2.razor.rz.scp.css */
/* ============================================================================
   DASHBOARD 2 - ek query, 5 bar chart, click = filter
   Rang / patti DashboardNew jaise (light + dark theme dono)
   ========================================================================= */

.sab-dash2[b-zmvsorb924] {
    padding: 12px 14px 18px;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    --d2-shadow: 0 1px 2px rgba(16,24,40,.06), 0 3px 10px rgba(16,24,40,.08);
}

html.sab-dark .sab-dash2[b-zmvsorb924],
.sab-dark .sab-dash2[b-zmvsorb924] {
    --d2-shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.45);
}

/* ------------------------------------------------------------- toolbar */
.d2-bar[b-zmvsorb924] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.d2-title[b-zmvsorb924] {
    font-size: 15px;
    font-weight: 700;
    color: var(--sab-text);
}

.d2-measure[b-zmvsorb924] {
    margin-left: auto;
    display: inline-flex;
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    overflow: hidden;
}

.d2-mbtn[b-zmvsorb924] {
    border: none;
    background: var(--sab-bg);
    color: var(--sab-text);
    font-size: 12px;
    padding: 5px 10px;
    cursor: pointer;
}

    .d2-mbtn + .d2-mbtn[b-zmvsorb924] { border-left: 1px solid var(--sab-border); }
    .d2-mbtn.on[b-zmvsorb924] { background: #2a78d6; color: #fff; font-weight: 600; }

/* --------------------------------------------------------------- chips */
.d2-chips[b-zmvsorb924] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    align-items: center;
}

.d2-chip[b-zmvsorb924] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 14px;
    background: #fff1e9;
    border: 1px solid #f3b893;
    color: #8a3a12;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .d2-chip i[b-zmvsorb924] { cursor: pointer; opacity: .75; }
    .d2-chip i:hover[b-zmvsorb924] { opacity: 1; }

.d2-clear[b-zmvsorb924] {
    border: none;
    background: none;
    color: #2a78d6;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

/* -------------------------------------------------------------- totals */
.d2-kpis[b-zmvsorb924] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.d2-kpi[b-zmvsorb924] {
    background: var(--sab-bg);
    border: 1px solid var(--sab-border);
    border-radius: 10px;
    box-shadow: var(--d2-shadow);
    padding: 7px 10px;
    min-width: 0;
}

    .d2-kpi span[b-zmvsorb924] {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: var(--sab-text-muted, #6b7785);
    }

    .d2-kpi b[b-zmvsorb924] {
        display: block;
        font-size: 14px;
        color: var(--sab-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* -------------------------------------------------------------- charts */
.d2-grid[b-zmvsorb924] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

/* >>> BREAKPOINT - tooltip panel se bahar bhi dikhe (pehle overflow:hidden me kat jata tha),
   aur jis chart par mouse hai wo padosi chart ke upar aaye */
.d2-item[b-zmvsorb924] { min-width: 0; position: relative; }
.d2-item:hover[b-zmvsorb924] { z-index: 5; }
.d2-item.w12[b-zmvsorb924] { grid-column: span 12; }
.d2-item.w6[b-zmvsorb924] { grid-column: span 6; }
.d2-item.w3[b-zmvsorb924] { grid-column: span 3; }   /* >>> BREAKPOINT - 4 chart ek row me */

.d2-panel[b-zmvsorb924] {
    background: var(--sab-bg);
    border: 1px solid var(--sab-border);
    border-radius: 12px;
    box-shadow: var(--d2-shadow);
    overflow: visible;
    min-width: 0;
}

.d2-ph[b-zmvsorb924] { border-radius: 12px 12px 0 0; }
.d2-panel[b-zmvsorb924]  .dxbl-chart,
.d2-panel[b-zmvsorb924]  .dxbl-chart svg { overflow: visible !important; }

.d2-ph[b-zmvsorb924] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--sab-border);
    background: linear-gradient(to bottom, var(--sab-neutral-6), transparent);
}

.d2-pt[b-zmvsorb924] { font-size: 13px; font-weight: 700; color: var(--sab-text); }
.d2-ps[b-zmvsorb924] { font-size: 11px; color: var(--sab-text-muted, #8a95a3); margin-left: auto; }

.d2-empty[b-zmvsorb924], .d2-msg[b-zmvsorb924] {
    padding: 30px;
    text-align: center;
    color: var(--sab-text-muted, #8a95a3);
    font-size: 12px;
}

.d2-err[b-zmvsorb924] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fdecea;
    color: #c0392b;
    font-size: 12px;
}

/* bar par click hota hai - haath wala cursor */
.d2-panel[b-zmvsorb924]  .dxbl-chart path,
.d2-panel[b-zmvsorb924]  .dxbl-chart rect {
    cursor: pointer;
}

.d2-panel[b-zmvsorb924]  .dxbl-chart,
.d2-panel[b-zmvsorb924]  .dxbl-chart svg {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
}

/* -------------------------------------------------------------- detail */
.d2-detail[b-zmvsorb924] { margin-top: 12px; }

.d2-detail[b-zmvsorb924]  .d2-dgrid {
    border: none !important;
}

/* >>> BREAKPOINT - grid ki apni uchai, andar scroll */
.d2-detail[b-zmvsorb924]  .d2-dgrid > .dxbl-scroll-viewer {
    min-height: 0;
}

    .d2-detail[b-zmvsorb924]  .d2-dgrid td,
    .d2-detail[b-zmvsorb924]  .d2-dgrid th {
        font-size: 11.5px;
        white-space: nowrap;
    }

/* ---------------------------------------------------------- light theme */
html:not(.sab-dark) .sab-dash2[b-zmvsorb924] { background: #ffffff; }
html:not(.sab-dark) .d2-kpi[b-zmvsorb924],
html:not(.sab-dark) .d2-panel[b-zmvsorb924] { background: #ffffff; border-color: #dbe3ee; }
html:not(.sab-dark) .d2-kpi b[b-zmvsorb924],
html:not(.sab-dark) .d2-pt[b-zmvsorb924] { color: #0f172a; }

html.sab-dark .d2-chip[b-zmvsorb924],
.sab-dark .d2-chip[b-zmvsorb924] { background: #3a2a20; border-color: #7a4a2a; color: #f5c4a5; }

/* ----------------------------------------------------------- responsive */
/* beech ki screen (laptop chhota / tablet) : 2 chart ek row me */
@media (max-width: 1400px) {
    .d2-item.w3[b-zmvsorb924] { grid-column: span 6; }
}

@media (max-width: 1100px) {
    .d2-item.w3[b-zmvsorb924] { grid-column: span 12; }
    .d2-kpis[b-zmvsorb924] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .d2-item.w6[b-zmvsorb924] { grid-column: span 12; }
}

@media (max-width: 600px) {
    .sab-dash2[b-zmvsorb924] { padding: 10px; }
    .d2-kpis[b-zmvsorb924] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .d2-measure[b-zmvsorb924] { margin-left: 0; }

    .d2-panel[b-zmvsorb924]  .dxbl-chart text { font-size: 9px !important; }
}

/* >>> BREAKPOINT - BI TOOL : kai SECTION (Sales / Outstanding ...) - har section ka heading + totals ek patti me */
.d2-section[b-zmvsorb924] { margin-top: 14px; }
.d2-section + .d2-section[b-zmvsorb924] { margin-top: 26px; padding-top: 16px; border-top: 2px dashed var(--sab-border); }
.d2-shead[b-zmvsorb924] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.d2-stitle[b-zmvsorb924] { font-size: 16px; font-weight: 800; color: var(--sab-text); padding: 4px 12px; border-left: 4px solid #2a78d6; border-radius: 4px; background: var(--sab-surface, #f3f6fb); }
.d2-shead .d2-kpis[b-zmvsorb924] { display: flex; flex-wrap: wrap; gap: 8px; grid-template-columns: none; }
.d2-shead .d2-kpi[b-zmvsorb924] { display: inline-block; min-width: 120px; }
.d2-item.w4[b-zmvsorb924] { grid-column: span 4; }   /* >>> Row 1 : Month / Broker / Party */
.d2-detail[b-zmvsorb924] { margin-top: 12px; }

@media (max-width: 1100px) {
    .d2-item.w4[b-zmvsorb924] { grid-column: span 12; }
}
@media (max-width: 600px) {
    .d2-shead .d2-kpi[b-zmvsorb924] { min-width: 0; flex: 1 1 45%; }
}

/* >>> BREAKPOINT - grid ab chart jaisa panel (1 row me 3) : upar ka gap nahi, chart jitni height */
.d2-item .d2-detail[b-zmvsorb924] { margin-top: 0; }
.d2-tip[b-zmvsorb924] { padding: 6px; font-size: 12px; line-height: 1.35; max-width: 280px; white-space: normal; }

/* >>> BREAKPOINT - PAGE HEADING (SabWebErp BI Tool) : section heading (Sales) jaisa button, poori chaudai, text beech me */
.d2-bar .d2-title[b-zmvsorb924] {
    flex: 1 1 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--sab-text);
    padding: 6px 12px;
    border-left: 4px solid #2a78d6;
    border-right: 4px solid #2a78d6;
    border-radius: 6px;
    background: var(--sab-surface, #f3f6fb);
    box-shadow: var(--d2-shadow);
}

/* >>> BREAKPOINT - page ke upar ki padding 0 (heading bilkul upar se) */
.sab-dash2[b-zmvsorb924] { padding-top: 0 !important; }
.sab-dash2 .d2-bar[b-zmvsorb924] { margin-top: 0; }
/* _content/ZabWebErp_dev/Components/Pages/DashboardNew.razor.rz.scp.css */
/* ============================================================================
   DASHBOARD NEW - "Hero" layout
   10 card ek patti me -> bada CY vs LY chart + pie -> bar / trend / grid
   ========================================================================= */

.sab-dashnew[b-yejt690j6o] {
    padding: 12px 14px 18px;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    --dn-shadow: 0 1px 2px rgba(16,24,40,.06), 0 3px 10px rgba(16,24,40,.08);
    --dn-shadow-hi: 0 3px 8px rgba(16,24,40,.12), 0 14px 28px rgba(16,24,40,.16);
}

html.sab-dark .sab-dashnew[b-yejt690j6o],
.sab-dark .sab-dashnew[b-yejt690j6o] {
    --dn-shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.45);
    --dn-shadow-hi: 0 3px 8px rgba(0,0,0,.55), 0 16px 30px rgba(0,0,0,.55);
}

/* -------------------------------------------------------------- toolbar */
.dashnew-toolbar[b-yejt690j6o] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 2px 8px;
}

.dashnew-status[b-yejt690j6o] {
    font-size: 12px;
    color: var(--sab-text-muted, #6b7785);
}

/* ---------------------------------------------------------------- cards */
/* 10 card ek line me. Jagah kam padte hi 5 -> 3 ho jate hain. */
.dashnew-cards[b-yejt690j6o] {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.dn-card[b-yejt690j6o] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 8px;
    box-sizing: border-box;
    background: var(--sab-bg);
    border: 1px solid var(--sab-border);
    border-radius: 10px;
    box-shadow: var(--dn-shadow);
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s cubic-bezier(.22,.78,.3,1), border-color .2s ease;
}

    .dn-card:hover[b-yejt690j6o] {
        transform: translateY(-2px);
        box-shadow: var(--dn-shadow-hi);
        border-color: var(--sab-primary-border);
    }

    .dn-card:active[b-yejt690j6o] {
        transform: translateY(0);
    }

.dn-ic[b-yejt690j6o] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
}

.dn-tx[b-yejt690j6o] {
    min-width: 0;
    flex: 1;
}

.dn-t[b-yejt690j6o] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--sab-text-muted, #6b7785);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dn-v[b-yejt690j6o] {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sab-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dn-d[b-yejt690j6o] {
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
    margin-left: auto;
}

.up[b-yejt690j6o] { color: #1b7f3b; }
.dn[b-yejt690j6o] { color: #c0392b; }

/* --------------------------------------------------------------- panels */


/* >>> BREAKPOINT - panel ab table se aate hain, isliye 12 column ka grid.
   Har panel ki chaurai dashboardnew.width se (span 1..12).            */
.dashnew-grid12[b-yejt690j6o] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
    width: 100%;
    min-width: 0;
}

.dashnew-item[b-yejt690j6o] {
    min-width: 0;
    max-width: 100%;
    overflow: visible;      /* >>> BREAKPOINT - chart ka tooltip panel ke bahar bhi dikhe */
    cursor: pointer;
}

/* DxPanel apna root khud render karta hai -> ::deep */
.dashnew-item[b-yejt690j6o]  .dashnew-panel {
    background: var(--sab-bg);
    border: 1px solid var(--sab-border);
    border-radius: 12px;
    box-shadow: var(--dn-shadow);
    overflow: visible;      /* >>> BREAKPOINT - tooltip ke liye */
    min-width: 0;
    max-width: 100%;
    cursor: pointer;
    transition: box-shadow .22s ease;
}

    /* >>> BREAKPOINT - hover par transform HATA diya : transform se chart ka tooltip galat jagah / chhup jata tha */
    .dashnew-item[b-yejt690j6o]  .dashnew-panel:hover {
        box-shadow: var(--dn-shadow-hi);
    }

/* >>> BREAKPOINT - data aane tak panel me khali jagah */
.dn-wait[b-yejt690j6o] {
    height: 215px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--sab-text-muted, #8a95a3);
    font-size: 12px;
}

.dashnew-item[b-yejt690j6o]  .dashnew-panel .dxbl-panel-header {
    border-radius: 12px 12px 0 0;   /* panel overflow visible hai - kone gol rahe */
    border-bottom: 1px solid var(--sab-border);
    background: linear-gradient(to bottom, var(--sab-neutral-6), transparent);
}

/* panel ka header (hamara apna markup) */
.dn-ph[b-yejt690j6o] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.dn-pt[b-yejt690j6o] {
    font-size: 13px;
    font-weight: 700;
    color: var(--sab-text);
}

.dn-ps[b-yejt690j6o] {
    font-size: 11px;
    color: var(--sab-text-muted, #8a95a3);
    margin-left: auto;
}

/* chart / grid kabhi panel se bahar na jaye */
.dashnew-item[b-yejt690j6o]  .dxbl-chart,
.dashnew-item[b-yejt690j6o]  .dxbl-pie-chart,
.dashnew-item[b-yejt690j6o]  .dxbl-chart svg,
.dashnew-item[b-yejt690j6o]  .dxbl-pie-chart svg {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.dashnew-item[b-yejt690j6o]  .dashnew-grid,
.dashnew-item[b-yejt690j6o]  .dashnew-grid .dxbl-grid {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

    .dashnew-item[b-yejt690j6o]  .dashnew-grid .dxbl-grid-table,
    .dashnew-item[b-yejt690j6o]  .dashnew-grid table {
        table-layout: fixed !important;
        width: 100% !important;
    }

    .dashnew-item[b-yejt690j6o]  .dashnew-grid td,
    .dashnew-item[b-yejt690j6o]  .dashnew-grid th {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11.5px;
    }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1400px) {
    .dashnew-cards[b-yejt690j6o] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .rowA[b-yejt690j6o], .rowB[b-yejt690j6o] { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .sab-dashnew[b-yejt690j6o] { padding: 10px; }

    .dashnew-cards[b-yejt690j6o] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    /* mobile: icon upar, naam, amount - % badge ke liye jagah nahi */
    .dn-card[b-yejt690j6o] {
        display: block;
        text-align: center;
        padding: 5px 5px;
    }

    .dn-ic[b-yejt690j6o] {
        margin: 0 auto 3px;
        width: 22px;
        height: 22px;
        min-width: 22px;
        font-size: 10px;
    }

    .dn-t[b-yejt690j6o] { font-size: 9px; }
    .dn-v[b-yejt690j6o] { font-size: 11px; }
    .dn-d[b-yejt690j6o] { display: none; }

    .dashnew-grid12[b-yejt690j6o] { gap: 10px; margin-top: 10px; }

    .dashnew-item[b-yejt690j6o]  .dxbl-chart,
    .dashnew-item[b-yejt690j6o]  .dxbl-pie-chart {
        height: 230px !important;
    }

    /* chart ke text mobile par chhote - party ke naam fit ho jayein */
    .dashnew-item[b-yejt690j6o]  .dxbl-chart text,
    .dashnew-item[b-yejt690j6o]  .dxbl-pie-chart text {
        font-size: 9px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dn-card[b-yejt690j6o],
    .dashnew-item[b-yejt690j6o]  .dashnew-panel {
        transition: none !important;
    }
}

/* >>> BREAKPOINT - card ki aane wali animation ab JS me (wwwroot/js/sabdashfly.js):
   card menu / "Powered by" se nikal kar udta hua apni jagah aata hai.
   Yahan sirf position:relative - CSS me koi animation nahi. */
.dn-card[b-yejt690j6o] {
    position: relative;
    overflow: visible;      /* >>> BREAKPOINT - tooltip bahar dikhe (pehle fly animation ke liye hidden tha) */
}

/* >>> BREAKPOINT - CARD TOOLTIP (poora naam). Browser ka title yahan nahi dikhta tha - apna CSS tooltip */
/* hover wala card baaki cards ke upar (tooltip neeche wale card ke peeche na chhupe) */
.dn-card:hover[b-yejt690j6o] { z-index: 70; }

.dn-card[data-tip]:hover[b-yejt690j6o]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    top: calc(100% + 6px);          /* >>> BREAKPOINT - tooltip card ke NEECHE */
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 60;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* ---- load error ---- */
.dashnew-err[b-yejt690j6o] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fdecea;
    color: #c0392b;
    font-size: 12px;
}

/* ============================================================================
   >>> BREAKPOINT - CHART PANEL ANIMATION
   Panel sirf pehli baar aane par halka sa upar uthta hai (ek hi baar).
   ========================================================================= */

.dashnew-item[b-yejt690j6o]  .dashnew-panel {
    animation: dnPanelIn-b-yejt690j6o .5s cubic-bezier(.22,.78,.3,1) backwards;
}

@keyframes dnPanelIn-b-yejt690j6o {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* >>> BREAKPOINT - chart SVG ka 10 second pulse hata diya (poora chart repaint hota tha) */

@media (prefers-reduced-motion: reduce) {
    .dashnew-item[b-yejt690j6o]  .dashnew-panel {
        animation: none !important;
    }
}

/* mobile : har panel poori chaurai */
@media (max-width: 1100px) {
    .dashnew-item[b-yejt690j6o] { grid-column: span 12 !important; }
}

/* >>> BREAKPOINT - Brightness (light theme only; dark theme ko nahi chhuna).
   Tablet par dashboard dhundla lagta tha: page pure white, card/panel crisp border,
   text gehra, charts ke rang thode zyada chatak. */
html:not(.sab-dark) .sab-dashnew[b-yejt690j6o] {
    background: #ffffff;
    --sab-text-muted: #475569;
    --dn-shadow: 0 1px 2px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.10);
    --dn-shadow-hi: 0 4px 10px rgba(15,23,42,.14), 0 16px 30px rgba(15,23,42,.18);
}

html:not(.sab-dark) .dn-card[b-yejt690j6o] {
    background: #ffffff;
    border-color: #dbe3ee;
}

html:not(.sab-dark) .dn-t[b-yejt690j6o] { color: #334155; }
html:not(.sab-dark) .dn-v[b-yejt690j6o] { color: #0f172a; }
html:not(.sab-dark) .dn-pt[b-yejt690j6o] { color: #0f172a; }
html:not(.sab-dark) .up[b-yejt690j6o] { color: #15803d; }
html:not(.sab-dark) .dn[b-yejt690j6o] { color: #dc2626; }

html:not(.sab-dark) .dashnew-item[b-yejt690j6o]  .dashnew-panel {
    background: #ffffff;
    border-color: #dbe3ee;
}

html:not(.sab-dark) .dashnew-item[b-yejt690j6o]  .dashnew-panel .dxbl-panel-header {
    background: linear-gradient(to bottom, #f5f8fc, #ffffff);
    border-bottom-color: #e3e9f1;
}

/* tablet / touch screen: thoda aur bright */
@media (pointer: coarse), (max-width: 1280px) {
    html:not(.sab-dark) .dn-t[b-yejt690j6o] { font-size: 11px; color: #1e293b; }
    html:not(.sab-dark) .dn-v[b-yejt690j6o] { font-size: 14px; }
}


/* ---------------------------------------------------------------- >>> SWIMG : hero patti (auto slide) */
.dn-swtop[b-yejt690j6o] { margin-bottom: 12px; }

.dn-swhead[b-yejt690j6o] { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 6px; cursor: pointer; }

.dn-swing[b-yejt690j6o] {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 10px;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

    .dn-swing[b-yejt690j6o]::-webkit-scrollbar { height: 6px; }
    .dn-swing[b-yejt690j6o]::-webkit-scrollbar-thumb { background: #b9c7d8; border-radius: 3px; }

.dn-swcard[b-yejt690j6o] {
    flex: 0 0 150px;
    width: 150px;
    height: 176px;
    scroll-snap-align: start;
    background: var(--sab-bg);
    border: 1px solid var(--sab-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .dn-swcard:hover[b-yejt690j6o] { transform: translateY(-3px); border-color: #2a78d6; box-shadow: 0 6px 14px rgba(42, 120, 214, .25); }

.dn-swimg[b-yejt690j6o] {
    height: 104px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 28px;
}

    .dn-swimg img[b-yejt690j6o] { width: 100%; height: 100%; object-fit: cover; display: block; }

.dn-swt[b-yejt690j6o] { font-weight: 700; font-size: 13px; padding: 5px 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sab-text); }
.dn-sws[b-yejt690j6o] { font-size: 11px; color: var(--sab-text-muted, #6b7785); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.dn-swv[b-yejt690j6o] { font-size: 12px; font-weight: 700; color: #1b7f3b; padding: 1px 6px 4px; }

@media (max-width: 640px) {
    .dn-swcard[b-yejt690j6o] { flex-basis: 130px; width: 130px; }
}

/* >>> photo na ho : ZabWebERP.png poora dikhe (kate nahi) */
.dn-swimg img.nophoto[b-yejt690j6o] { object-fit: contain; background: #fff; padding: 6px; }

/* ---------------------------------------------------------------- >>> SWIMG : select + tools */
.dn-swhead[b-yejt690j6o] { flex-wrap: wrap; align-items: center; }
.dn-swin[b-yejt690j6o] { justify-content: flex-end; margin: 0 0 4px; }

/* >>> BREAKPOINT - quality combo (Stock With Image ke aage) */
.dn-swq[b-yejt690j6o] { display: inline-flex; align-items: center; }
.dn-swq[b-yejt690j6o]  .dn-swqcb { width: 170px; }

.dn-swtools[b-yejt690j6o] { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.dn-swcnt[b-yejt690j6o] { font-size: 12px; font-weight: 700; color: #2a78d6; }

.dn-swbtn[b-yejt690j6o] {
    width: 32px;
    height: 30px;
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    background: var(--sab-bg);
    color: var(--sab-text);
    cursor: pointer;
}

    .dn-swbtn:hover[b-yejt690j6o] { border-color: #2a78d6; color: #2a78d6; }
    .dn-swbtn.share[b-yejt690j6o] { color: #1b7f3b; }
    .dn-swbtn.enq[b-yejt690j6o] { color: #2a78d6; }
    .dn-swbtn:disabled[b-yejt690j6o] { opacity: .6; cursor: default; }

.dn-swcard[b-yejt690j6o] { position: relative; }
    .dn-swcard.sel[b-yejt690j6o] { border: 2px solid #2a78d6; box-shadow: 0 0 0 3px rgba(42, 120, 214, .18); }

.dn-swchk[b-yejt690j6o] {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 2px solid #fff;
    background: rgba(0, 0, 0, .25);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

    .dn-swchk.on[b-yejt690j6o] { background: #2a78d6; border-color: #2a78d6; color: #fff; }

/* ---------------------------------------------------------------- >>> PDF viewer (Swimg share) */
.dn-pdf[b-yejt690j6o] { display: flex; flex-direction: column; gap: 8px; height: calc(min(760px, 94vh) - 90px); }
.dn-pdfbtns[b-yejt690j6o] { display: flex; gap: 6px; flex-wrap: wrap; }
/* >>> BREAKPOINT - mobile par app ke andar PDF viewer */
[b-yejt690j6o] .dn-pdfview-dx { flex: 1; width: 100%; min-height: 360px; height: 100%; border: 1px solid var(--sab-border); border-radius: 6px; }
.dn-pdfhint[b-yejt690j6o] { font-size: 11px; opacity: .7; }
.dn-pdfview[b-yejt690j6o] { flex: 1; width: 100%; min-height: 300px; border: 1px solid var(--sab-border); border-radius: 6px; background: #fff; }

/* >>> BREAKPOINT - poora dashboard aane tak */
.dn-loading[b-yejt690j6o] {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--sab-text-muted, #8a95a3);
    font-size: 14px;
}

/* >>> BREAKPOINT - Select all ke paas "Selected" tick */
.dn-swonly[b-yejt690j6o] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #2a78d6;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    .dn-swonly input[b-yejt690j6o] { margin: 0; cursor: pointer; }
/* _content/ZabWebErp_dev/Components/Pages/Index/Index.razor.rz.scp.css */
[b-515i5yeqqg] .index-gridlayout {
    container-type: inline-size;
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
    padding-bottom: 9rem;
}

[b-515i5yeqqg] .title {
    padding-bottom: 3rem;
    text-align: center;
}

[b-515i5yeqqg] .tiles {
    --tile-column-count: 4;

    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(var(--tile-column-count), max-content);
    justify-content: center;

    @container (max-width: 60.5rem) {
        --tile-column-count: 3;
    }
    @container (max-width: 45.125rem) {
        --tile-column-count: 2;
    }
    @container (max-width: 29.75rem) {
        --tile-column-count: 1;
    }
}
/* _content/ZabWebErp_dev/Components/Pages/Index/IndexTile.razor.rz.scp.css */
.tile[b-ahnuuo4p0n] {
    border-radius: 0.75rem;
    height: 7.5rem;
    transition: box-shadow 0.2s;
    width: 14.375rem;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.tile:hover[b-ahnuuo4p0n] {
    box-shadow: 0 4px 8px 0 rgba(170, 170, 170, 0.24), 0 0 2px 0 rgba(170, 170, 170, 0.2);
}

.tile[b-ahnuuo4p0n]  > a {
    text-decoration: none;
}

[b-ahnuuo4p0n] .tile-content {
    padding: 1rem;
}

[b-ahnuuo4p0n] .tile-icon {
    border-radius: 0.375rem;
    height: 2.75rem;
    padding: 0.75rem;
    width: 2.75rem;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

[b-ahnuuo4p0n] .tile-title {
    align-self: center;
    color: var(--dxds-color-content-neutral-default-rest);
    font-size: var(--dxds-font-size-base-md);
    font-weight: var(--dxds-font-weight-base-strong);
    letter-spacing: var(--dxds-letter-spacing-base-md);
    line-height: var(--dxds-line-height-base-md);
}

[b-ahnuuo4p0n] .tile-description {
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: var(--dxds-font-size-base-sm);
    font-weight: var(--dxds-font-weight-base-default);
    letter-spacing: var(--dxds-letter-spacing-base-sm);
    line-height: var(--dxds-line-height-base-sm);
}
/* _content/ZabWebErp_dev/Components/Pages/MktOrder.razor.rz.scp.css */
.mo[b-26nekq6bkc] { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.mo-err[b-26nekq6bkc] { padding: 16px; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; }

.mo-head[b-26nekq6bkc] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mo-title[b-26nekq6bkc] { font-weight: 600; font-size: 16px; margin-right: 8px; }
.mo-sel[b-26nekq6bkc] { height: 32px; padding: 0 8px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; }
.mo-status[b-26nekq6bkc] { font-size: 12px; color: #6b7280; }

.mo-card[b-26nekq6bkc] { background: #fff; border: 1px solid #e3e9f1; border-radius: 10px; padding: 12px; box-shadow: 0 2px 10px rgba(15,23,42,.06); }
.mo-cardt[b-26nekq6bkc] { font-weight: 600; margin-bottom: 8px; }
.mo-small[b-26nekq6bkc] { font-weight: 400; font-size: 12px; color: #6b7280; margin-left: 8px; }

.mo-list[b-26nekq6bkc] { max-height: 320px; overflow: auto; border: 1px solid #e3e9f1; border-radius: 8px; }
.mo-tab[b-26nekq6bkc] { width: 100%; border-collapse: collapse; font-size: 13px; }
.mo-tab th[b-26nekq6bkc], .mo-tab td[b-26nekq6bkc] { padding: 6px 10px; border-bottom: 1px solid #eef2f7; text-align: left; white-space: nowrap; }
.mo-tab thead th[b-26nekq6bkc] { position: sticky; top: 0; background: #f8fafc; color: #6b7280; font-weight: 600; }
.mo-tab tbody tr[b-26nekq6bkc] { cursor: pointer; }
.mo-tab tbody tr:hover[b-26nekq6bkc] { background: #f5f8fc; }
.mo-tab tbody tr.sel[b-26nekq6bkc] { background: #e8f0fb; }
.mo-tab .num[b-26nekq6bkc] { text-align: right; }
.mo-empty[b-26nekq6bkc] { text-align: center; color: #6b7280; padding: 16px; cursor: default !important; }

.mo-badge[b-26nekq6bkc] { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid #d1d5db; }
.mo-pending[b-26nekq6bkc] { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.mo-approved[b-26nekq6bkc] { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.mo-rejected[b-26nekq6bkc] { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

.mo-act[b-26nekq6bkc] { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.mo-text[b-26nekq6bkc] { flex: 1; min-width: 220px; height: 32px; padding: 0 10px; border: 1px solid #d1d5db; border-radius: 6px; }
.mo-note[b-26nekq6bkc] { margin-top: 12px; font-size: 13px; color: #374151; }
/* _content/ZabWebErp_dev/Components/Pages/MorningBrief.razor.rz.scp.css */
/* ============================================================================
   MORNING BRIEF - toolbar + kagaz jaisa preview (brief ka HTML inline style me hai)
   ========================================================================= */

.mb-wrap[b-y1caxdi3v4] {
    padding: 12px 14px 18px;
    max-width: 100%;
    box-sizing: border-box;
}

.mb-bar[b-y1caxdi3v4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.mb-title[b-y1caxdi3v4] {
    font-size: 16px;
    font-weight: 700;
    color: var(--sab-text);
    margin-right: 6px;
}

    .mb-title i[b-y1caxdi3v4] { color: #eda100; }

/* >>> BREAKPOINT - Business AI ke din (BriefOptions.Heading) */
.mb-rules[b-y1caxdi3v4] { font-size: 12px; color: #5b6472; }

.mb-dl[b-y1caxdi3v4] {
    font-size: 13px;
    color: #c0392b;
    text-decoration: none;
    padding: 4px 8px;
    border: 1px solid var(--sab-border);
    border-radius: 6px;
}

.mb-status[b-y1caxdi3v4] {
    margin-left: auto;
    font-size: 12px;
    color: var(--sab-text-muted, #6b7785);
}

.mb-msg[b-y1caxdi3v4] {
    padding: 20px;
    text-align: center;
    color: var(--sab-text-muted, #6b7785);
}

.mb-send div[b-y1caxdi3v4] {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
}

.mb-send .ok[b-y1caxdi3v4] { background: #e8f6ee; color: #1b7f3b; }
.mb-send .bad[b-y1caxdi3v4] { background: #fdecea; color: #c0392b; }

.mb-err[b-y1caxdi3v4] {
    padding: 10px 12px;
    border-radius: 8px;
    background: #fdecea;
    color: #c0392b;
    font-size: 12px;
}

/* A4 kagaz jaisa - dark theme me bhi safed (PDF jaisa hi dikhe) */
.mb-page[b-y1caxdi3v4] {
    background: #ffffff;
    color: #1f2937;
    max-width: 860px;
    margin: 0 auto;
    padding: 18px 22px;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(15,23,42,.10);
    overflow-x: auto;
}

.mb-foot[b-y1caxdi3v4] {
    max-width: 860px;
    margin: 6px auto 0;
    font-size: 11px;
    color: var(--sab-text-muted, #6b7785);
}

.mb-warn[b-y1caxdi3v4] { color: #c0392b; }

@media (max-width: 600px) {
    .mb-wrap[b-y1caxdi3v4] { padding: 8px; }
    .mb-page[b-y1caxdi3v4] { padding: 10px; }
    .mb-status[b-y1caxdi3v4] { margin-left: 0; width: 100%; }
}

/* >>> BREAKPOINT - PDF viewer (Proforma jaisa) */
.mb-pdf[b-y1caxdi3v4] { display: flex; flex-direction: column; gap: 8px; height: calc(min(760px, 94vh) - 90px); }
.mb-pdfbtns[b-y1caxdi3v4] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mb-pdfview[b-y1caxdi3v4] { flex: 1; width: 100%; border: 1px solid var(--sab-border); border-radius: 6px; background: #fff; }
/* _content/ZabWebErp_dev/Components/Pages/MyTasksPanel.razor.rz.scp.css */
/* >>> BREAKPOINT - My Pending Tasks (DashboardNew ke neeche) */
.dn-tasks[b-2ueolwdc5x] {
    margin: 14px 8px 8px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    overflow: hidden;
}

.dn-tasks-head[b-2ueolwdc5x] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 14px;
    color: #1f3b63;
    border-bottom: 1px solid #e6ebf2;
}

.dn-tasks-cnt[b-2ueolwdc5x] {
    background: #2a78d6;
    color: #fff;
    border-radius: 10px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 18px;
}

.dn-tasks-sp[b-2ueolwdc5x] { flex: 1 1 auto; }

.dn-tasks-empty[b-2ueolwdc5x] { padding: 12px; color: #6b7a90; font-size: 13px; }

.dn-tasks-wrap[b-2ueolwdc5x] { max-height: 320px; overflow: auto; }

.dn-tasks-tbl[b-2ueolwdc5x] { width: 100%; border-collapse: collapse; font-size: 13px; }

    .dn-tasks-tbl th[b-2ueolwdc5x] {
        position: sticky;
        top: 0;
        background: #f3f6fa;
        text-align: left;
        padding: 6px 10px;
        font-weight: 700;
        color: #3a4a60;
        border-bottom: 1px solid #e1e7ef;
    }

    .dn-tasks-tbl td[b-2ueolwdc5x] { padding: 6px 10px; border-bottom: 1px solid #eef1f5; vertical-align: top; }

    .dn-tasks-tbl tr.late td[b-2ueolwdc5x] { color: #c0392b; }
    .dn-tasks-tbl tr.today td[b-2ueolwdc5x] { color: #b26a00; font-weight: 600; }

.dn-task-rem[b-2ueolwdc5x] { white-space: pre-wrap; word-break: break-word; }

.dn-task-done[b-2ueolwdc5x] {
    border: 1px solid #2e9b57;
    background: #fff;
    color: #2e9b57;
    border-radius: 6px;
    width: 30px;
    height: 26px;
    cursor: pointer;
}

    .dn-task-done:hover[b-2ueolwdc5x] { background: #2e9b57; color: #fff; }
    .dn-task-done:disabled[b-2ueolwdc5x] { opacity: .5; cursor: default; }

html.sab-dark .dn-tasks[b-2ueolwdc5x] { background: #1f2630; box-shadow: none; }
html.sab-dark .dn-tasks-head[b-2ueolwdc5x] { color: #dbe6f5; border-color: #2e3846; }
html.sab-dark .dn-tasks-tbl th[b-2ueolwdc5x] { background: #262f3b; color: #c9d4e3; border-color: #2e3846; }
html.sab-dark .dn-tasks-tbl td[b-2ueolwdc5x] { border-color: #2a3340; }

/* >>> BREAKPOINT - task grid : heading click = sort */
.dn-tasks-tbl th.dn-sort[b-2ueolwdc5x] { cursor: pointer; user-select: none; white-space: nowrap; }
.dn-tasks-tbl th.dn-sort:hover[b-2ueolwdc5x] { color: #2a78d6; }

.dn-tasks-btn[b-2ueolwdc5x] {
    width: 32px;
    height: 30px;
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    background: var(--sab-bg);
    color: var(--sab-text);
    cursor: pointer;
}

    .dn-tasks-btn:hover[b-2ueolwdc5x] { border-color: #2a78d6; color: #2a78d6; }
/* _content/ZabWebErp_dev/Components/Pages/QueryAnalyzer.razor.rz.scp.css */
/* >>> BREAKPOINT - QUERY ANALYZER : SQL Server Management Studio jaisa look */
.qa[b-2o5y9wk3je] { display: flex; flex-direction: column; height: calc(100vh - 70px); min-height: 480px; background: #eef0f3; border: 1px solid #c9ced6; font-family: "Segoe UI", Arial, sans-serif; }
.qa-denied[b-2o5y9wk3je] { padding: 20px; color: #b00020; font-weight: 600; }

/* toolbar */
.qa-bar[b-2o5y9wk3je] { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: #f5f6f7; border-bottom: 1px solid #c9ced6; flex-wrap: wrap; }
.qa-db[b-2o5y9wk3je] { font-size: 12px; padding: 3px 8px; background: #fff; border: 1px solid #b8bec7; min-width: 140px; }
.qa-btn[b-2o5y9wk3je] { font-size: 12px; padding: 3px 10px; background: transparent; border: 1px solid transparent; cursor: pointer; color: #1e1e1e; }
    .qa-btn:hover:not(:disabled)[b-2o5y9wk3je] { background: #c9def5; border-color: #99c1ec; }
    .qa-btn:disabled[b-2o5y9wk3je] { color: #9aa0a6; cursor: default; }
.qa-run i[b-2o5y9wk3je] { color: #2e7d32; }
.qa-btn i.fa-stop[b-2o5y9wk3je] { color: #c62828; }
.qa-hint[b-2o5y9wk3je] { font-size: 11px; color: #6b7280; margin-left: auto; }

.qa-body[b-2o5y9wk3je] { flex: 1; display: flex; min-height: 0; }

/* object explorer */
.qa-obj[b-2o5y9wk3je] { width: 250px; display: flex; flex-direction: column; background: #fff; border-right: 1px solid #c9ced6; }
.qa-objhead[b-2o5y9wk3je] { font-size: 12px; font-weight: 600; padding: 4px 8px; background: #dfe3e8; border-bottom: 1px solid #c9ced6; }
.qa-objsearch[b-2o5y9wk3je] { margin: 4px; padding: 3px 6px; font-size: 12px; border: 1px solid #b8bec7; }
.qa-objlist[b-2o5y9wk3je] { flex: 1; overflow: auto; font-size: 12px; padding: 2px 0; }
.qa-objitem[b-2o5y9wk3je] { display: flex; align-items: center; gap: 5px; padding: 1px 6px; white-space: nowrap; cursor: default; }
    .qa-objitem:hover[b-2o5y9wk3je] { background: #e5f1fb; }
    .qa-objitem i[b-2o5y9wk3je] { color: #6b7d93; width: 14px; }
.qa-caret[b-2o5y9wk3je] { width: 12px; cursor: pointer; color: #555; }
.qa-objname[b-2o5y9wk3je] { cursor: pointer; }
.qa-col[b-2o5y9wk3je] { padding: 1px 6px 1px 34px; white-space: nowrap; color: #333; cursor: default; }
    .qa-col:hover[b-2o5y9wk3je] { background: #e5f1fb; }
    .qa-col i[b-2o5y9wk3je] { color: #9aa4b2; }

/* editor */
.qa-main[b-2o5y9wk3je] { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.qa-editor[b-2o5y9wk3je] { flex: 0 0 42%; display: flex; background: #fff; min-height: 80px; }
/* >>> BREAKPOINT - SPLITTER (js/sabqa.js) */
.qa-vsplit[b-2o5y9wk3je] { flex: 0 0 6px; cursor: row-resize; background: #dfe3e8; touch-action: none; }
.qa-hsplit[b-2o5y9wk3je] { flex: 0 0 6px; cursor: col-resize; background: #dfe3e8; touch-action: none; }
.qa-vsplit:hover[b-2o5y9wk3je], .qa-hsplit:hover[b-2o5y9wk3je] { background: #b9c2cd; }
.qa-gutter[b-2o5y9wk3je] { margin: 0; width: 44px; padding: 6px 6px 6px 0; text-align: right; color: #2b91af; background: #fff; border-right: 1px solid #e3e6ea;
             font: 13px/1.45 Consolas, "Courier New", monospace; overflow: hidden; user-select: none; }
.qa-text[b-2o5y9wk3je] { flex: 1; resize: none; border: 0; outline: 0; padding: 6px 8px; font: 13px/1.45 Consolas, "Courier New", monospace; color: #00008b;
           white-space: pre; overflow: auto; background: #fff; }

/* tabs */
.qa-tabs[b-2o5y9wk3je] { display: flex; gap: 2px; background: #dfe3e8; padding: 2px 4px 0; }
    .qa-tabs span[b-2o5y9wk3je] { font-size: 12px; padding: 3px 12px; cursor: pointer; border: 1px solid transparent; border-bottom: 0; }
    .qa-tabs span.on[b-2o5y9wk3je] { background: #fff; border-color: #c9ced6; }

/* results */
.qa-res[b-2o5y9wk3je] { flex: 1; overflow: auto; background: #fff; min-height: 0; }
.qa-pad[b-2o5y9wk3je] { padding: 8px; }
.qa-grid[b-2o5y9wk3je] { margin: 0 0 8px; border-bottom: 2px solid #c9ced6; max-height: 100%; overflow: auto; }
    .qa-grid table[b-2o5y9wk3je] { border-collapse: collapse; font: 12px "Segoe UI", Arial, sans-serif; }
    .qa-grid th[b-2o5y9wk3je] { position: sticky; top: 0; background: #f0f0f0; border: 1px solid #c8c8c8; padding: 2px 6px; font-weight: 400; text-align: left; white-space: nowrap; }
    .qa-grid td[b-2o5y9wk3je] { border: 1px solid #e1e1e1; padding: 1px 6px; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
    .qa-grid tr:hover td[b-2o5y9wk3je] { background: #e5f1fb; }
.qa-no[b-2o5y9wk3je] { background: #f0f0f0 !important; color: #555; text-align: right; }
.qa-null[b-2o5y9wk3je] { background: #fffde7; color: #8a8a8a; }
.qa-msg[b-2o5y9wk3je] { padding: 6px 10px; font: 12px/1.6 Consolas, "Courier New", monospace; white-space: pre-wrap; }
.qa-err[b-2o5y9wk3je] { color: #c00; }
.qa-dim[b-2o5y9wk3je] { color: #8a8f98; }

/* status bar */
.qa-status[b-2o5y9wk3je] { display: flex; gap: 10px; font-size: 12px; padding: 3px 10px; background: #fff3c4; color: #333; }
    .qa-status.ok[b-2o5y9wk3je] { background: #fff3c4; }
    .qa-status.run[b-2o5y9wk3je] { background: #cfe3fa; }
    .qa-status.bad[b-2o5y9wk3je] { background: #f8d7da; color: #8b0000; }
.qa-status-r[b-2o5y9wk3je] { margin-left: auto; }

@media (max-width: 760px) {
    .qa-obj[b-2o5y9wk3je] { display: none; }
    .qa-hsplit[b-2o5y9wk3je] { display: none; }
    .qa-hint[b-2o5y9wk3je] { display: none; }
}

/* >>> BREAKPOINT - object explorer groups + modify + DxGrid result */
.qa-objgroup[b-2o5y9wk3je] { display: flex; align-items: center; gap: 5px; padding: 2px 6px; font-weight: 600; cursor: pointer; white-space: nowrap; }
    .qa-objgroup:hover[b-2o5y9wk3je] { background: #e5f1fb; }
    .qa-objgroup i[b-2o5y9wk3je] { color: #c99a2e; }
.qa-objitem[b-2o5y9wk3je] { padding-left: 18px; }
.qa-col[b-2o5y9wk3je] { padding-left: 52px; }
.qa-modify[b-2o5y9wk3je] { margin-left: auto; padding: 0 4px; color: #6b7d93; cursor: pointer; visibility: hidden; }
.qa-objitem:hover .qa-modify[b-2o5y9wk3je] { visibility: visible; }
    .qa-modify:hover[b-2o5y9wk3je] { color: #1f4e79; }
.qa-settitle[b-2o5y9wk3je] { font-size: 12px; font-weight: 600; padding: 4px 8px; background: #dfe3e8; border-top: 1px solid #c9ced6; }
[b-2o5y9wk3je] .qa-dxgrid { height: 260px; font-size: 12px; margin-bottom: 6px; }

/* >>> BREAKPOINT - QUERY TABS (SSMS jaisa) */
.qa-qtabs[b-2o5y9wk3je] { display: flex; gap: 2px; padding: 3px 4px 0; background: #dfe3e8; border-bottom: 1px solid #c9ced6; overflow-x: auto; flex: 0 0 auto; }
.qa-qtab[b-2o5y9wk3je] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; cursor: pointer; white-space: nowrap;
           background: #eef0f3; border: 1px solid #c9ced6; border-bottom: 0; color: #333; }
    .qa-qtab.on[b-2o5y9wk3je] { background: #fff8d6; font-weight: 600; }
    .qa-qtab .fa-spinner[b-2o5y9wk3je] { color: #1f6fd1; }
.qa-qx[b-2o5y9wk3je] { color: #8a8f98; padding: 0 2px; }
    .qa-qx:hover[b-2o5y9wk3je] { color: #c62828; }
.qa-qpage[b-2o5y9wk3je] { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.qa-hide[b-2o5y9wk3je] { display: none; }

/* >>> BREAKPOINT - SQL font spin box (toolbar, Close ke baad) */
.qa-fsize[b-2o5y9wk3je] { width: 56px; font-size: 12px; padding: 2px 4px; border: 1px solid #b8bec7; background: #fff; }
/* _content/ZabWebErp_dev/Components/Pages/SabAdmin.razor.rz.scp.css */
/* >>> BREAKPOINT - ADMIN PANEL (optional services) */
.adm[b-sr1j29i6rj] { padding: 12px 14px 24px; max-width: 1100px; box-sizing: border-box; }
.adm-head[b-sr1j29i6rj] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.adm-title[b-sr1j29i6rj] { font-size: 18px; font-weight: 800; color: var(--sab-text); }
    .adm-title i[b-sr1j29i6rj] { color: #2a78d6; }
.adm-client[b-sr1j29i6rj] { font-size: 13px; color: var(--sab-text); margin-right: auto; margin-left: 8px; }
    .adm-client small[b-sr1j29i6rj] { color: var(--sab-text-muted, #8a95a3); }
.adm-status[b-sr1j29i6rj] { font-size: 12px; color: var(--sab-text-muted, #8a95a3); }
.adm-err[b-sr1j29i6rj] { padding: 10px 12px; border-radius: 8px; background: #fdecea; color: #b91c1c; font-size: 13px; margin-bottom: 10px; }
.adm-note[b-sr1j29i6rj] { padding: 10px 12px; border-radius: 8px; background: #fff7e6; color: #8a5a00; font-size: 13px; margin-bottom: 10px; }
.adm-card[b-sr1j29i6rj] { background: #fff; border: 1px solid #e3e9f1; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
            box-shadow: 0 2px 10px rgba(15, 23, 42, .06); }
.adm-cardt[b-sr1j29i6rj] { font-size: 14px; font-weight: 700; color: #1f4e79; margin-bottom: 8px; display: flex; align-items: center; gap: 14px; }
.adm-small[b-sr1j29i6rj] { font-size: 12px; color: #6b7280; }
.adm-dim[b-sr1j29i6rj] { color: #9aa4b2; }

/* >>> BREAKPOINT - services : chhote card (note tooltip me) */
.adm-svc[b-sr1j29i6rj] { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.adm-svcitem[b-sr1j29i6rj] { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid #e3e9f1; border-radius: 6px; cursor: pointer; }
    .adm-svcitem.on[b-sr1j29i6rj] { border-color: #2a78d6; background: #eef5ff; }
    .adm-svcitem input[b-sr1j29i6rj] { width: 15px; height: 15px; margin: 0; }
.adm-svcname[b-sr1j29i6rj] { font-weight: 600; font-size: 12px; color: var(--sab-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.adm-users[b-sr1j29i6rj] { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.adm-ucol[b-sr1j29i6rj] { flex: 1; min-width: 260px; }
.adm-ulab[b-sr1j29i6rj] { font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--sab-text); }
    .adm-ulab small[b-sr1j29i6rj] { font-weight: 400; color: #6b7280; }
.adm-urow[b-sr1j29i6rj] { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.adm-num[b-sr1j29i6rj] { width: 90px; height: 30px; padding: 0 6px; border: 1px solid #cfd8e3; border-radius: 6px; }
.adm-text[b-sr1j29i6rj] { flex: 1; min-width: 180px; height: 30px; padding: 0 8px; border: 1px solid #cfd8e3; border-radius: 6px; }
.adm-live[b-sr1j29i6rj] { font-size: 12px; color: #1b7f3b; margin-top: 6px; }
.adm-total[b-sr1j29i6rj] { min-width: 200px; padding: 8px 12px; border-radius: 8px; background: #f5f8fc; font-size: 13px; }

.adm-tools[b-sr1j29i6rj] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
/* >>> BREAKPOINT - 4 grid : height 360 -> 180; width adm-two (ek row me 2) se aadhi */
.adm-list[b-sr1j29i6rj] { max-height: 180px; overflow: auto; border: 1px solid #e3e9f1; border-radius: 8px; }
.adm-tab[b-sr1j29i6rj] { width: 100%; border-collapse: collapse; font-size: 13px; }
    .adm-tab th[b-sr1j29i6rj] { position: sticky; top: 0; background: #1f4e79; color: #fff; text-align: left; padding: 6px 8px; font-weight: 600; }
    .adm-tab td[b-sr1j29i6rj] { padding: 5px 8px; border-bottom: 1px solid #eef2f7; }
    .adm-tab tr.on td[b-sr1j29i6rj] { background: #f2f8ff; }
    .adm-tab input[type=checkbox][b-sr1j29i6rj] { width: 16px; height: 16px; }
/* >>> BREAKPOINT - billing table : qty / rate / amount right side */
.adm-tab th.adm-r[b-sr1j29i6rj], .adm-tab td.adm-r[b-sr1j29i6rj] { text-align: right; }

/* >>> BREAKPOINT - ek row me 2 grid (mobile / chhoti screen par ek ke neeche ek) */
.adm-two[b-sr1j29i6rj] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
    .adm-two > .adm-card[b-sr1j29i6rj] { min-width: 0; }
    .adm-two > div[b-sr1j29i6rj] { min-width: 0; }
@media (max-width: 900px) { .adm-two[b-sr1j29i6rj] { grid-template-columns: 1fr; } }
/* _content/ZabWebErp_dev/Components/Pages/SabDashRights.razor.rz.scp.css */
/* >>> BREAKPOINT - DASHBOARD RIGHTS (SabAdmin jaisa look) */
.dr[b-50scpip30q] { padding: 12px 14px 24px; max-width: 1100px; box-sizing: border-box; }
.dr-head[b-50scpip30q] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.dr-title[b-50scpip30q] { font-size: 18px; font-weight: 800; color: var(--sab-text); margin-right: 8px; }
    .dr-title i[b-50scpip30q] { color: #2a78d6; }
.dr-user[b-50scpip30q] { min-width: 240px; height: 32px; padding: 0 8px; border: 1px solid #cfd8e3; border-radius: 6px; }
.dr-status[b-50scpip30q] { font-size: 12px; color: var(--sab-text-muted, #8a95a3); }
.dr-err[b-50scpip30q] { padding: 10px 12px; border-radius: 8px; background: #fdecea; color: #b91c1c; font-size: 13px; }
.dr-note[b-50scpip30q] { padding: 10px 12px; border-radius: 8px; background: #fff7e6; color: #8a5a00; font-size: 13px; }
.dr-two[b-50scpip30q] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
    .dr-two > div[b-50scpip30q] { min-width: 0; }
@media (max-width: 900px) { .dr-two[b-50scpip30q] { grid-template-columns: 1fr; } }
.dr-card[b-50scpip30q] { background: #fff; border: 1px solid #e3e9f1; border-radius: 12px; padding: 12px 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, .06); }
.dr-cardt[b-50scpip30q] { font-size: 14px; font-weight: 700; color: #1f4e79; display: flex; align-items: center; gap: 14px; }
.dr-small[b-50scpip30q] { font-size: 12px; font-weight: 400; color: #6b7280; }
.dr-dim[b-50scpip30q] { color: #9aa4b2; }
.dr-tools[b-50scpip30q] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.dr-text[b-50scpip30q] { flex: 1; min-width: 160px; height: 30px; padding: 0 8px; border: 1px solid #cfd8e3; border-radius: 6px; }
.dr-list[b-50scpip30q] { max-height: calc(100vh - 260px); min-height: 200px; overflow: auto; border: 1px solid #e3e9f1; border-radius: 8px; }
.dr-tab[b-50scpip30q] { width: 100%; border-collapse: collapse; font-size: 13px; }
    .dr-tab th[b-50scpip30q] { position: sticky; top: 0; background: #1f4e79; color: #fff; text-align: left; padding: 6px 8px; font-weight: 600; }
    .dr-tab td[b-50scpip30q] { padding: 5px 8px; border-bottom: 1px solid #eef2f7; }
    .dr-tab tr.on td[b-50scpip30q] { background: #f2f8ff; }
    .dr-tab input[type=checkbox][b-50scpip30q] { width: 16px; height: 16px; }
/* _content/ZabWebErp_dev/Components/Pages/SabDealerSetup.razor.rz.scp.css */
/* >>> BREAKPOINT - DEALER SETUP (SabAdmin jaisa look) */
.dl[b-5ypvwhjdym] { padding: 12px 14px 24px; max-width: 1100px; box-sizing: border-box; }
.dl-head[b-5ypvwhjdym] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.dl-title[b-5ypvwhjdym] { font-size: 18px; font-weight: 800; color: var(--sab-text); margin-right: 8px; }
    .dl-title i[b-5ypvwhjdym] { color: #2a78d6; }
.dl-user[b-5ypvwhjdym] { min-width: 240px; height: 32px; padding: 0 8px; border: 1px solid #cfd8e3; border-radius: 6px; }
.dl-status[b-5ypvwhjdym] { font-size: 12px; color: var(--sab-text-muted, #8a95a3); }
.dl-err[b-5ypvwhjdym] { padding: 10px 12px; border-radius: 8px; background: #fdecea; color: #b91c1c; font-size: 13px; }
.dl-note[b-5ypvwhjdym] { padding: 10px 12px; border-radius: 8px; background: #fff7e6; color: #8a5a00; font-size: 13px; }
.dl-two[b-5ypvwhjdym] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
    .dl-two > div[b-5ypvwhjdym] { min-width: 0; }
@media (max-width: 900px) { .dl-two[b-5ypvwhjdym] { grid-template-columns: 1fr; } }
.dl-col[b-5ypvwhjdym] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dl-dealer-hint[b-5ypvwhjdym] { font-size: 12px; color: #1f4e79; background: #eef5ff; border: 1px solid #cfe0f5; border-radius: 8px; padding: 6px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dl-chk[b-5ypvwhjdym] { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; cursor: pointer; }
    .dl-chk input[type=checkbox][b-5ypvwhjdym] { width: 14px; height: 14px; }
.dl-card[b-5ypvwhjdym] { background: #fff; border: 1px solid #e3e9f1; border-radius: 12px; padding: 12px 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, .06); }
.dl-cardt[b-5ypvwhjdym] { font-size: 14px; font-weight: 700; color: #1f4e79; display: flex; align-items: center; gap: 14px; }
.dl-small[b-5ypvwhjdym] { font-size: 12px; font-weight: 400; color: #6b7280; }
.dl-dim[b-5ypvwhjdym] { color: #9aa4b2; }
.dl-tools[b-5ypvwhjdym] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.dl-text[b-5ypvwhjdym] { flex: 1; min-width: 160px; height: 30px; padding: 0 8px; border: 1px solid #cfd8e3; border-radius: 6px; }
.dl-list[b-5ypvwhjdym] { height: 320px; max-height: 320px; min-height: 0; overflow: auto; border: 1px solid #e3e9f1; border-radius: 8px; }
.dl-tab[b-5ypvwhjdym] { width: 100%; border-collapse: collapse; font-size: 13px; }
    .dl-tab th[b-5ypvwhjdym] { position: sticky; top: 0; background: #1f4e79; color: #fff; text-align: left; padding: 6px 8px; font-weight: 600; }
    .dl-tab td[b-5ypvwhjdym] { padding: 5px 8px; border-bottom: 1px solid #eef2f7; }
    .dl-tab tr.on td[b-5ypvwhjdym] { background: #f2f8ff; }
    .dl-tab input[type=checkbox][b-5ypvwhjdym] { width: 16px; height: 16px; }
.dl-warn[b-5ypvwhjdym] { color: #b91c1c; font-weight: 600; }
/* _content/ZabWebErp_dev/Components/Pages/SabErpLogin.razor.rz.scp.css */

/* ================================
   LOGIN PAGE - GLASS EFFECT
   ================================ */

.login-top[b-h4pt29rkz4] {
    position: relative;
    width: 480px;               /* >>> BREAKPOINT - login box ki kul chaudai (pehle 420px) */
    margin: 5px auto 5px auto;
    padding: 5px 35px 0px 35px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 22px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    color: white;
}


/* Company / Logo */

.logo-area[b-h4pt29rkz4] {
    text-align: center;
    margin-bottom: 15px;
}

    .logo-area h2[b-h4pt29rkz4] {
        margin: 0 0 12px 0;
        font-size: 15px;
        color:white;
        font-weight: 600;
    }

    .logo-area h3[b-h4pt29rkz4] {
        margin: 5px 0;
        color: white;
        font-size: 20px;
        font-weight: 400;
        opacity: 0.85;
    }

/* >>> BREAKPOINT - LOGO STRETCH : pehle object-fit:contain tha - client ka logo (alag aspect ratio) box me
   chhota/bada dikhta tha. Ab fill (stretch) - box poora bharega, MainLayout ke left-side logo jaisa hi. */
/* >>> BREAKPOINT - LOGO HEIGHT : 100px -> 120px (20% zyada) */
.login-logo[b-h4pt29rkz4] {
    width: 350px;
    height: 120px;
    object-fit: fill;
    border-radius: 10px;
    padding: 8px;
    border: 1px solid rgba(200, 255, 255, 0.25);
    box-shadow: 0 5px 2px rgba(0, 0, 0, 0.18);
}

/* Fields */

.sab-field[b-h4pt29rkz4] {
    margin-bottom: 20px;
}


/* DevExpress TextBox */

.sab-login-textbox[b-h4pt29rkz4] {
    width: 100%;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 10px !important;
    color: white !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.08);
}


    /* Placeholder */

    .sab-login-textbox input[b-h4pt29rkz4]::placeholder {
        color: rgba(255,255,255,0.70) !important;
    }


/* Login Button */

.login-buttons[b-h4pt29rkz4] {
    margin-top: 20px;
}

.sab-login-button[b-h4pt29rkz4] {
    width: 100%;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    color: white !important;
    font-weight: 600;
    backdrop-filter: blur(10px);
    transition: all 0.25s ease;
}

    .sab-login-button:hover[b-h4pt29rkz4] {
        background: rgba(255,255,255,0.35) !important;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.20);
    }


/* Remember Me */

.sab-field .dxbl-checkbox[b-h4pt29rkz4] {
    color: white !important;
}


/* Message */

.Login_message[b-h4pt29rkz4] {
    width: 100%;                /* >>> BREAKPOINT - pehle 384px (login box 480px hone par baayein reh jata tha) */
    text-align: center;
    margin-top: 15px;
    min-height: 22px;
    /* light theme: black text, dark theme: white (see the override below) */
    color: #000000;
}


/* ================================
   SUPPORT GLASS CARD
   ================================ */

.login-support[b-h4pt29rkz4] {
    width: 750px;
    max-width: calc(100% - 30px);
    margin: 10px auto;          /* >>> BREAKPOINT - center (pehle 10px 0px) */
    padding: 5px;
    text-align: center;
    color: inherit;            /* follows .Login_message -> theme colour */
    border-radius: 20px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(50px);
    box-shadow: 0 8px 10px rgba(0.18, 0.18, 0.18, 0.18);
}


/* >>> BREAKPOINT - SabWebERP logo (support ke neeche) */
.sab-login-logo[b-h4pt29rkz4] {
    margin-top: 10px;
    text-align: center;
}

    .sab-login-logo img[b-h4pt29rkz4] {
        max-width: 140px;
        max-height: 140px;
        object-fit: contain;
    }

.support-logo[b-h4pt29rkz4] {
    width: 165px;
    height: 55px;
    object-fit: contain;
    border-radius: 12px;
}

.login-support h1[b-h4pt29rkz4] {
    margin: 1px 0;
    font-size: 12px;
}

.login-support h2[b-h4pt29rkz4] {
    margin: 1px 0;
    font-size: 10px;
}

.login-support h3[b-h4pt29rkz4] {
    margin: 5px 0;
    font-size: 8px;
}

.login-support p[b-h4pt29rkz4] {
    margin: 1px 0 1px 0;
    font-size: 8px;
}

.login-support ul[b-h4pt29rkz4] {
    list-style: none;
    padding: 0;
    margin: 5px 0;
}

.login-support li[b-h4pt29rkz4] {
    margin: 3px 0;
}


/* ================================
   FOOTER
   ================================ */

.login-footer[b-h4pt29rkz4] {
    text-align: center;
    color: rgba(255,255,255,0.70);
    background: radial-gradient(circle at 20% 20%, rgba(80,140,255,0.35), transparent 35%), radial-gradient(circle at 80% 30%, rgba(180,80,255,0.30), transparent 35%), radial-gradient(circle at 50% 90%, rgba(0,200,180,0.25), transparent 40%), linear-gradient(135deg, #101827, #17243a);
    font-size: 12px;
    margin: 15px 0 20px 0;
}



.login-page[b-h4pt29rkz4] {
    min-height: 80vh;
    overflow-y: auto;
}



.login-buttons[b-h4pt29rkz4] {
    width: 100%;
    display: flex;
    margin: 3px 0 0 0;
    padding: 0;
}

[b-h4pt29rkz4] .sab-login-button {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: flex !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-image: linear-gradient( 180deg, var(--dxds-primary-40) 0%, var(--dxds-primary-90) 100% ) !important;
    border: none !important;
}

@media (max-width: 768px) {
    .login-logo[b-9cgbb44bbz][b-h4pt29rkz4] {
        width: 330px;
        height: 66px;
    }

    .login-top[b-h4pt29rkz4] {
        padding: 10px;
        width: 350px;
    }

    .login-support[b-h4pt29rkz4] {
        width: 330px;
    }
    .drawer-content[b-h4pt29rkz4]{
        padding:5px;


    }
    .login-footer[b-h4pt29rkz4]{
        width:400px
    }
    .login-page[b-h4pt29rkz4]{
        min-height:70vh;
    }
}

.company-title[b-h4pt29rkz4] {
    text-align: center;
    padding: 5px 2px;

}

    .company-title h1[b-h4pt29rkz4] {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.35);
    }

/* ================================
   THEME: login message / support card text
   light theme -> black, dark theme -> white
   (html.sab-dark is set by js/sabtheme.js)
   ================================ */

.Login_message[b-h4pt29rkz4],
.Login_message .login-support[b-h4pt29rkz4],
.Login_message .login-support h1[b-h4pt29rkz4],
.Login_message .login-support h2[b-h4pt29rkz4],
.Login_message .login-support h3[b-h4pt29rkz4],
.Login_message .login-support p[b-h4pt29rkz4],
.Login_message .login-support li[b-h4pt29rkz4] {
    color: #000000;
}

html.sab-dark .Login_message[b-h4pt29rkz4],
html.sab-dark .Login_message .login-support[b-h4pt29rkz4],
html.sab-dark .Login_message .login-support h1[b-h4pt29rkz4],
html.sab-dark .Login_message .login-support h2[b-h4pt29rkz4],
html.sab-dark .Login_message .login-support h3[b-h4pt29rkz4],
html.sab-dark .Login_message .login-support p[b-h4pt29rkz4],
html.sab-dark .Login_message .login-support li[b-h4pt29rkz4] {
    color: #ffffff;
}



/* >>> BREAKPOINT - User ID ke aage Developer checkbox */
.sab-userrow[b-h4pt29rkz4] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .sab-userrow[b-h4pt29rkz4]  .sab-userbox {
        flex: 1 1 auto;
        min-width: 0;
    }

    .sab-userrow[b-h4pt29rkz4]  .sab-devcheck {
        flex: 0 0 auto;
        white-space: nowrap;
        color: white !important;
    }

/* >>> BREAKPOINT - box ke aage label (SabWebERP ID / User ID / Password) */
.sab-lbl[b-h4pt29rkz4] {
    flex: 0 0 100px;            /* >>> BREAKPOINT - label ki chaudai */
    color: #000;                /* light theme : kala */
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

/* >>> BREAKPOINT - dark theme me label / Developer tick safed, light me kala */
html.sab-dark .sab-lbl[b-h4pt29rkz4] { color: #fff; }
html:not(.sab-dark) .sab-userrow[b-h4pt29rkz4]  .sab-devcheck { color: #000 !important; }

/* >>> BREAKPOINT - teeno box ki chaudai same : har row me aakhir me barabar jagah (User ID me Developer tick, baaki khali) */
.sab-devslot[b-h4pt29rkz4] {
    flex: 0 0 55px;             /* >>> BREAKPOINT - aakhir ki jagah ("☐ Dev") */
    min-width: 0;               /* tick bada ho to bhi jagah 55px hi rahe - User ID box chhota na ho */
    overflow: visible;
    display: inline-flex;
    align-items: center;
}
/* _content/ZabWebErp_dev/Components/Pages/SabUsersRights.razor.rz.scp.css */
/* >>> BREAKPOINT - User Rights page */
.ur[b-rl1o4bpzvd] { display: flex; flex-direction: column; gap: 10px; padding: 10px; height: calc(100vh - 90px); }
.ur-denied[b-rl1o4bpzvd], .ur-empty[b-rl1o4bpzvd] { padding: 24px; color: #5b6472; }
.ur-bar[b-rl1o4bpzvd] { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 8px 10px; background: #f3f6fb; border: 1px solid #dfe5ef; border-radius: 8px; }
.ur-grp[b-rl1o4bpzvd] { display: flex; align-items: center; gap: 6px; }
.ur-grp label[b-rl1o4bpzvd] { font-weight: 600; color: #123372; font-size: 13px; }
.ur-grp select[b-rl1o4bpzvd] { min-width: 180px; height: 30px; border: 1px solid #c9d2e0; border-radius: 6px; padding: 0 6px; }
.ur-btn[b-rl1o4bpzvd] { height: 30px; padding: 0 14px; border: 1px solid #123372; background: #fff; color: #123372; border-radius: 6px; cursor: pointer; font-weight: 600; }
.ur-btn.ur-main[b-rl1o4bpzvd] { background: #123372; color: #fff; }
.ur-btn:disabled[b-rl1o4bpzvd] { opacity: .5; cursor: default; }
.ur-cur[b-rl1o4bpzvd] { margin-left: auto; font-size: 13px; }
.ur-wrap[b-rl1o4bpzvd] { flex: 1; overflow: auto; border: 1px solid #dfe5ef; border-radius: 8px; }
.ur-table[b-rl1o4bpzvd] { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.ur-table th[b-rl1o4bpzvd] { position: sticky; top: 0; background: #123372; color: #fff; padding: 8px 10px; text-transform: capitalize; white-space: nowrap; z-index: 1; }
.ur-table td[b-rl1o4bpzvd] { border-bottom: 1px solid #eef1f6; padding: 4px 10px; }
.ur-table tr:hover td[b-rl1o4bpzvd] { background: #f6f9ff; }
.ur-name[b-rl1o4bpzvd] { text-align: left; white-space: nowrap; min-width: 280px; position: sticky; left: 0; background: #fff; }
.ur-table th.ur-name[b-rl1o4bpzvd] { background: #123372; z-index: 2; }
.ur-parent .ur-name[b-rl1o4bpzvd] { font-weight: 600; }
.ur-chk[b-rl1o4bpzvd] { text-align: center; }
.ur-chk input[b-rl1o4bpzvd] { width: 16px; height: 16px; cursor: pointer; }
.ur-tog[b-rl1o4bpzvd] { display: inline-block; width: 16px; cursor: pointer; color: #123372; }
.ur-sub[b-rl1o4bpzvd] { display: flex; flex-direction: column; gap: 4px; }
.ur-subrow[b-rl1o4bpzvd] { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 1px solid #eef1f6; cursor: pointer; }
/* _content/ZabWebErp_dev/Components/Reports/MstEntryV2.Razor.rz.scp.css */

.mst-v2-card[b-u39xbzfd99] {
    background: var(--sab-bg);
    border-radius: 12px;
    padding: 15px;
    margin: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,.18);
}


.mst-v2-tab-content[b-u39xbzfd99] 
{
    padding: 15px;
}


.mst-v2-field-row[b-u39xbzfd99] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--sab-border);
}


    .mst-v2-field-row b[b-u39xbzfd99] {
        width: 120px;
    }


    .mst-v2-field-row small[b-u39xbzfd99] {
        color: var(--sab-text-muted);
    }

.mst-v2-header[b-u39xbzfd99] {
    background: var(--sab-surface);
    color: var(--sab-text);
    border-radius: 12px;
    padding: 3px;
    margin: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,.18);
    position: sticky;
    top: 0;
    z-index: 10;
}


.mst-v2-title[b-u39xbzfd99] {
    display: flex;
    align-items: center;
    gap: 20px;
}


    .mst-v2-title h3[b-u39xbzfd99] {
        margin: 0;
    }


.mst-v2-info[b-u39xbzfd99] {
    display: flex;
    gap: 25px;
    margin-top: 8px;
    color: var(--sab-text-muted);
}

.sab-compact[b-u39xbzfd99] {
    --dxbl-editor-height: 20px;
}


.menu-title[b-u39xbzfd99] {
    position: relative;
    display: inline-block;
    cursor: default;
    
}

.menu-tooltip[b-u39xbzfd99] {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    min-width: 220px;
    padding: 8px 10px;
    background: var(--sab-bg);
    color: var(--sab-text);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.menu-title:hover .menu-tooltip[b-u39xbzfd99] {
    display: block;
}



[b-u39xbzfd99] .dxbl-tabs-tablist {
    background: linear-gradient(var(--sab-primary-soft) 0%, var(--sab-primary-soft-hover) 100%);
    border-radius: 10px;
    padding: 1px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}


.sab-image-thumb[b-u39xbzfd99] {
    width: 90px;
    height: 90px;
    object-fit: contain;
    border: 1px solid var(--sab-border);
    border-radius: 6px;
    cursor: pointer;
    background: var(--sab-bg);
}

    .sab-image-thumb:hover[b-u39xbzfd99] {
        border-color: var(--sab-primary);
        box-shadow: 0 0 6px rgba(0,0,0,.25);
    }

.sab-image-preview[b-u39xbzfd99] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sab-image-large[b-u39xbzfd99] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sab-divider[b-u39xbzfd99] {
    width: 100%;
    height: 1px;
    background: var(--sab-border);
    margin: 8px 0;
}
.sab-checkbox[b-u39xbzfd99] {
    display: block;
    width: 100%;
    margin-right: 18px;
}

.sab-button[b-u39xbzfd99] {
    width: 100%;
    width: 40px;
    margin-right: 18px;
}

.sab-check-container[b-u39xbzfd99] {
    display: flex;
    align-items: center;
    height: 100%;
    padding-top: 8px;
}

.sab-button-container[b-u39xbzfd99] {
    display: flex;
    align-items: center;
    padding-top: 8px;
}

    .sab-button-container .dxbl-btn[b-u39xbzfd99] {
        min-width: 120px;
    }
.sab-panel-header[b-u39xbzfd99] {
    font-size: 16px;
    font-weight: 600;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--sab-border);
    background: var(--sab-surface-hover);
}
.sab-grid .dxbl-grid-header .dxbl-grid-header-content[b-u39xbzfd99] {
    font-weight: 700;
}



[b-u39xbzfd99] .sab-button {
    border: 1px solid var(--sab-border);
    border-radius: 6px;
    padding: 5px 14px;
    background-color: var(--sab-bg);
    color: var(--sab-text);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    min-height: 32px;
    transition: all 0.15s ease;
}

    [b-u39xbzfd99] .sab-button:hover {
        background-color: var(--sab-surface-hover);
        border-color: var(--sab-border-strong);
        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.20);
    }

    [b-u39xbzfd99] .sab-button:active {
        transform: translateY(1px);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }
/*******************************************/

.barcode-notepad[b-u39xbzfd99] {
    display: flex;
    width:350px;
    flex-direction: column;
    height: 100%;
    gap: 12px;
}

.barcode-camera-box[b-u39xbzfd99] {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    border-radius: 8px;
    background: #111;
    border: 1px solid var(--sab-border);
}

/* dashed target band = area the decoder looks at first (90% x 50%) */
.barcode-target[b-u39xbzfd99] {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 25%;
    bottom: 25%;
    border: 2px dashed rgba(255, 255, 255, 0.85);
    border-radius: 6px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.barcode-cam-controls[b-u39xbzfd99] {
    position: absolute;
    right: 6px;
    top: 6px;
    display: flex;
    gap: 6px;
}

.barcode-cam-btn[b-u39xbzfd99] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0;
}

    .barcode-cam-btn:hover[b-u39xbzfd99] {
        background: rgba(0, 0, 0, 0.7);
    }

    .barcode-cam-btn.on[b-u39xbzfd99] {
        background: var(--sab-primary);
        border-color: var(--sab-primary);
    }

.barcode-cam-info[b-u39xbzfd99] {
    position: absolute;
    left: 6px;
    bottom: 4px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.75);
}

.barcode-hint[b-u39xbzfd99] {
    font-size: 11px;
    color: var(--sab-text-muted);
    margin-top: -6px;
}

    .barcode-camera-box video[b-u39xbzfd99] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

.barcode-scan-line[b-u39xbzfd99] {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 50%;
    height: 2px;
    background: red;
    box-shadow: 0 0 8px red;
    animation: barcodeScan-b-u39xbzfd99 1.5s infinite;
}

@keyframes barcodeScan-b-u39xbzfd99 {

    0% {
        top: 28%;
    }

    50% {
        top: 72%;
    }

    100% {
        top: 28%;
    }
}

.barcode-list-title[b-u39xbzfd99] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.barcode-manual-add[b-u39xbzfd99] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: flex-end;
}

.barcode-manual-textbox[b-u39xbzfd99] {
    width: 100px;
}

.barcode-count[b-u39xbzfd99] {
    min-width: 28px;
    padding: 3px 8px;
    border-radius: 12px;
    text-align: center;
    font-size: 12px;
}

.barcode-listbox[b-u39xbzfd99] {
    width: 100%;
    flex: 1;
    min-height: 260px;
    border: 1px solid var(--sab-border);
    border-radius: 5px;
    background: var(--sab-bg);
    padding: 4px;
    font-family: Consolas, monospace;
    font-size: 14px;
    outline: none;
}

    .barcode-listbox option[b-u39xbzfd99] {
        padding: 7px 8px;
    }

.barcode-footer[b-u39xbzfd99] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.menu-title[b-u39xbzfd99] {
    position: relative;
    cursor: default;
    
    padding: 5px;
}

.tooltip[b-u39xbzfd99] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 100%;
    background: var(--sab-text);
    color: var(--sab-bg);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    transition: opacity 0.2s;
    z-index: 1000;
}

.menu-title:hover .tooltip[b-u39xbzfd99] {
    visibility: visible;
    opacity: 1;
}


.barcode-action-row[b-u39xbzfd99] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.barcode-entry-row[b-u39xbzfd99] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
}

.barcode-barno[b-u39xbzfd99] {
    white-space: nowrap;
    font-weight: 600;
}

.barcode-textbox-container[b-u39xbzfd99] {
    flex: 1;
    min-width: 0;
}

.barcode-footer[b-u39xbzfd99] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.pdf-viewer[b-u39xbzfd99] {
    width: 100%;
    height: calc(90vh - 80px);
}




/****************************/

.sab-pdf-popup[b-u39xbzfd99] {
    background-image: url('/images/sabback.jpg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Header */
.sab-pdf-header[b-u39xbzfd99] {
    width: 100%;
    height: 45px;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    box-sizing: border-box;
    background: linear-gradient(var(--sab-primary-soft), var(--sab-primary-soft-hover));
    border: 1px solid var(--sab-primary-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Heading */
.sab-pdf-title-button[b-u39xbzfd99] {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--sab-text) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Close */
.sab-pdf-close[b-u39xbzfd99] {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--sab-text) !important;
}

    .sab-pdf-close:hover[b-u39xbzfd99] {
        background: #dc3545 !important;
        color: white !important;
    }


/* ============================= */
/* POPUP SCROLL CONTROL           */
/* ============================= */

.sab-pdf-popup .dxbl-popup-content[b-u39xbzfd99] {
    overflow: hidden !important;
    padding: 0 !important;
}

.sab-pdf-popup .dxbl-popup-body[b-u39xbzfd99] {
    overflow: hidden !important;
    padding: 0 !important;
}


/* PDF container */
.sab-pdf-body[b-u39xbzfd99] {
    width: 100%;
    height: 100%;
    overflow: hidden;
}


/* PDF Viewer */
.pdf-viewer[b-u39xbzfd99] {
    width: 100%;
    height: 100%;
}
[b-u39xbzfd99] .dxbl-fl-cpt {
    padding-top: 0 !important;
    margin-top: 0 !important;
    align-self: center !important;
    line-height: 1.2;
    font-weight: 500 !important;
    color: var(--sab-text) !important;
}

/* ==================================================================
   AI assistant panel (MstEntryV2.razor.ai.cs)
   Entry form ka layout flex nahi hai, isliye panel ko dayein taraf
   fix drawer bana diya - form ka layout bilkul nahi badalta.
   ================================================================== */
.sab-mstai-panel[b-u39xbzfd99] {
    position: fixed;
    top: 90px;
    right: 10px;
    bottom: 10px;
    width: 360px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--sab-border);
    border-radius: 10px;
    background: var(--sab-surface);
    color: var(--sab-text);
    box-shadow: var(--sab-shadow-lg);
}

.sab-mstai-head[b-u39xbzfd99] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--sab-border);
}

.sab-mstai-close[b-u39xbzfd99] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--sab-text);
}

    .sab-mstai-close:hover[b-u39xbzfd99] {
        background: var(--sab-surface-hover);
    }

.sab-mstai-chat[b-u39xbzfd99] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 2px;
}

.sab-mstai-hint[b-u39xbzfd99] {
    font-size: 12px;
    opacity: .75;
    line-height: 1.7;
}

.sab-mstai-msg[b-u39xbzfd99] {
    max-width: 92%;
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

    .sab-mstai-msg.user[b-u39xbzfd99] {
        align-self: flex-end;
        background: var(--sab-primary);
        color: #fff;
    }

    .sab-mstai-msg.bot[b-u39xbzfd99] {
        align-self: flex-start;
        background: var(--sab-surface-hover);
    }

.sab-mstai-interim[b-u39xbzfd99] {
    font-size: 12px;
    font-style: italic;
    opacity: .7;
}

.sab-mstai-buttons[b-u39xbzfd99] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 900px) {
    .sab-mstai-panel[b-u39xbzfd99] {
        width: auto;
        left: 10px;
    }
}


/* ==================================================================
   Attachments popup (MstEntryV2.razor.attach.cs)
   File popup ke ANDAR dikhti hai - pehle picture bahar form par
   dikhti thi, jo galat tha.
   ================================================================== */
.sab-attach-body[b-u39xbzfd99] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 420px;
}

.sab-attach-img[b-u39xbzfd99] {
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--sab-surface-hover);
}

.sab-attach-pdf[b-u39xbzfd99] {
    width: 100%;
    height: 480px;
    overflow: hidden;
    border-radius: 6px;
}

.sab-attach-empty[b-u39xbzfd99] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    font-size: 13px;
    opacity: .7;
    background: var(--sab-surface-hover);
    border-radius: 6px;
}

.sab-attach-note[b-u39xbzfd99] {
    font-size: 12.5px;
    white-space: pre-wrap;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--sab-surface-hover);
}

.sab-attach-err[b-u39xbzfd99] {
    font-size: 12.5px;
    white-space: pre-wrap;
    padding: 6px 8px;
    border-radius: 6px;
    color: #fff;
    background: var(--sab-danger, #c0392b);
}

.sab-attach-foot[b-u39xbzfd99] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    padding: 6px 8px;
}

[b-u39xbzfd99] .sab-attach-combo {
    min-width: 320px;
}

@media (max-width: 760px) {
    .sab-attach-body[b-u39xbzfd99],
    .sab-attach-empty[b-u39xbzfd99] {
        min-height: 300px;
    }

    .sab-attach-pdf[b-u39xbzfd99] {
        height: 320px;
    }
}

/* mask = decimal / digit : number right align (desktop jaisa) */
[b-u39xbzfd99] .sab-num-right input {
    text-align: right;
}

/* >>> BREAKPOINT - MOBILE LABEL : ab wwwroot/css/site.css me (har form / popup ke liye ek jagah) */
/* _content/ZabWebErp_dev/Components/Reports/Report.razor.rz.scp.css */
[b-jfse7e7kto] .filter-item .dxbl-fl-cpt {
    width: 120px; /* Caption width */
}

[b-jfse7e7kto] .filter-item .dxbl-fl-editor {
    width: 250px; /* Editor area width */
}

[b-jfse7e7kto] .filter-item {
    min-width: 400px; /* Total item width */
}

.report-filter-container[b-jfse7e7kto] {
    width: 700px; /* fixed width */
    margin-bottom: 15px;
}

.filter-panel[b-jfse7e7kto] {
    padding: 15px;
}

.filter-layout[b-jfse7e7kto] {
    width: 100%;
}

.menu-title[b-jfse7e7kto] {
    background: var(--sab-surface);
    color: var(--sab-text);

    padding: 8px 12px;

    border: 1px solid var(--sab-border);
    border-radius: 6px;

    font-size: 18px;
    font-weight: 600;

    margin: 0 0 12px 0;

    box-sizing: border-box;
}
.tooltip[b-jfse7e7kto] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 100%;
    background: var(--sab-text);
    color: var(--sab-bg);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    transition: opacity 0.2s;
    z-index: 1000;
}

.menu-title:hover .tooltip[b-jfse7e7kto] {
    visibility: visible;
    opacity: 1;
}



.filter-header[b-jfse7e7kto] {
    background: var(--sab-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border-radius: 10px;
}


.report-filter-box[b-jfse7e7kto] {
    background: var(--sab-bg);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    padding: 12px;
}

    .report-filter-box input[b-jfse7e7kto] {
        background-color: var(--sab-bg) !important;
    }

    .report-filter-box .dxbl-text-edit[b-jfse7e7kto],
    .report-filter-box .dxbl-date-edit[b-jfse7e7kto],
    .report-filter-box .dxbl-input[b-jfse7e7kto] {
        background-color: var(--sab-bg) !important;
    }

[b-jfse7e7kto] .report-filter-box .sab-help-textbox {
    background-color: var(--sab-bg) !important;
}
/* _content/ZabWebErp_dev/Components/Reports/Report_grid.razor.rz.scp.css */
.sab-group[b-4hbko50nol] {
    background: var(--sab-surface);
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

    .sab-group .dxbl-panel[b-4hbko50nol] {
        background: var(--sab-surface);
        border: 1px solid var(--sab-border);
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }



.report-container[b-4hbko50nol] {
    position: relative;
}

.report-loading-overlay[b-4hbko50nol] {
    position: absolute;
    inset: 0;
    z-index: 9999;
    background: var(--sab-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.report-loading-box[b-4hbko50nol] {
    background: var(--sab-bg);
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.20);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.report-spinner[b-4hbko50nol] {
    width: 18px;
    height: 18px;
    border: 3px solid var(--sab-border);
    border-top-color: var(--sab-text);
    border-radius: 50%;
    animation: report-spin-b-4hbko50nol 0.8s linear infinite;
}

@keyframes report-spin-b-4hbko50nol {
    to {
        transform: rotate(360deg);
    }
}
/* _content/ZabWebErp_dev/Components/Reports/SabEntryReportSetup.razor.rz.scp.css */
/* >>> BREAKPOINT - ENTRY REPORT [Setup] popup (height : pehle wali, virtual scroll ke saath scroll aata tha) */
[b-ydf6s6vg8b] .er-grid { height: min(440px, calc(100vh - 260px)); }
.er-msg[b-ydf6s6vg8b] { font-size: 12px; opacity: .8; margin-top: 6px; }
.er-err[b-ydf6s6vg8b] { color: #c62828; padding: 8px 0; }
/* >>> BREAKPOINT - chuni hui CELL (mouse / keyboard) - js/sabgridlayout.js sab-cell-sel */
.er-keygrid[b-ydf6s6vg8b]  td.sab-cell-sel { outline: 2px solid var(--dxbl-primary, #1565c0); outline-offset: -2px; background: rgba(21, 101, 192, .10); }
/* _content/ZabWebErp_dev/Components/Reports/SabEntryReportShow.razor.rz.scp.css */
/* >>> BREAKPOINT - ENTRY REPORT [Show] popup : label | control (mobile par ek ke neeche ek) */
.es-form[b-ex2pkdd0t0] { display: grid; grid-template-columns: 110px 1fr; gap: 8px 10px; align-items: center; }
.es-form > label[b-ex2pkdd0t0] { font-size: 13px; opacity: .85; }
.es-dates[b-ex2pkdd0t0] { display: flex; align-items: center; gap: 8px; }
.es-dates > span[b-ex2pkdd0t0] { font-size: 13px; opacity: .85; }
.es-msg[b-ex2pkdd0t0] { font-size: 12px; color: #c62828; margin-top: 8px; }
.es-err[b-ex2pkdd0t0] { color: #c62828; padding: 8px 0; }
@media (max-width: 560px) {
    .es-form[b-ex2pkdd0t0] { grid-template-columns: 1fr; gap: 4px; }
    .es-dates[b-ex2pkdd0t0] { flex-wrap: wrap; }
}
/* _content/ZabWebErp_dev/Components/Reports/SabEwayPopup.razor.rz.scp.css */
/* >>> BREAKPOINT - E-way Bill popup */
.sab-eway[b-amv45mgzh5] { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.sab-eway-grid[b-amv45mgzh5] { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; align-items: baseline; }
.sab-eway-grid span[b-amv45mgzh5] { color: #5b6472; }
.sab-eway-grid b[b-amv45mgzh5] { font-weight: 600; min-height: 18px; word-break: break-all; }
.sab-eway-irn[b-amv45mgzh5] { font-size: 11px; font-weight: 500 !important; }
.sab-eway-sec[b-amv45mgzh5] { margin-top: 6px; padding-top: 8px; border-top: 1px solid #e3e7ee; font-weight: 700; color: #123372; }
.sab-eway-msg[b-amv45mgzh5] { padding: 8px 10px; border-radius: 6px; background: #f3f5f9; }
.sab-eway-msg.ok[b-amv45mgzh5] { background: #e8f6ee; color: #16683a; }
.sab-eway-msg.err[b-amv45mgzh5] { background: #fdecec; color: #a32020; }
.sab-eway-btns[b-amv45mgzh5] { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
/* _content/ZabWebErp_dev/Components/Reports/Sabgridreport.razor.rz.scp.css */
[b-iaulxvv3bv] .filter-item .dxbl-fl-cpt {
    width: 120px; /* Caption width */
}

[b-iaulxvv3bv] .filter-item .dxbl-fl-editor {
    width: 250px; /* Editor area width */
}

[b-iaulxvv3bv] .filter-item {
    min-width: 400px; /* Total item width */
}

.report-filter-container[b-iaulxvv3bv] {
    width: 700px; /* fixed width */
    margin-bottom: 15px;
    padding:20px;
}

.filter-panel[b-iaulxvv3bv] {
    padding: 15px;
}

.filter-layout[b-iaulxvv3bv] {
    width: 100%;
}

.menu-title[b-iaulxvv3bv] {
    position: relative;
    cursor: default;
    background-color: var(--sab-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding : 10px;
}
    .menu-title h2[b-iaulxvv3bv] {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        color: var(--sab-text);
        line-height: 1.3;
    }


.report-sabtext[b-iaulxvv3bv] {
    flex: 1;
    background-color: var(--sab-surface) !important;
}

[b-iaulxvv3bv] .report-sabtext .dxbl-text-editor {
    background-color: var(--sab-surface) !important;
}

[b-iaulxvv3bv] .report-sabtext .dxbl-text-editor-input {
    background-color: var(--sab-surface) !important;
}
.tooltip[b-iaulxvv3bv] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 100%;
    background: var(--sab-text);
    color: var(--sab-bg);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    transition: opacity 0.2s;
    z-index: 1000;
}

.menu-title:hover .tooltip[b-iaulxvv3bv] {
    visibility: visible;
    opacity: 1;
}



.filter-header[b-iaulxvv3bv] {
    background: var(--sab-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border-radius: 10px;
}


.report-filter-box[b-iaulxvv3bv] {
    background: var(--sab-bg);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    padding:10px;
}

    .report-filter-box input[b-iaulxvv3bv] {
        background-color: var(--sab-bg) !important;
    }

    .report-filter-box .dxbl-text-edit[b-iaulxvv3bv],
    .report-filter-box .dxbl-date-edit[b-iaulxvv3bv],
    .report-filter-box .dxbl-input[b-iaulxvv3bv] {
        background-color: var(--sab-bg) !important;
    }

[b-iaulxvv3bv] .report-filter-box .sab-help-textbox {
    background-color: var(--sab-bg) !important;
}


.report-loading-overlay[b-iaulxvv3bv] {
    position: absolute;
    inset: 0;
    background: var(--sab-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.report-loading-box[b-iaulxvv3bv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
}

/* spinner ring + company image beech me */
.report-loading-ring[b-iaulxvv3bv] {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-loading-ring[b-iaulxvv3bv]  .report-loading-indicator,
.report-loading-ring[b-iaulxvv3bv]  .dxbl-wait-indicator {
    position: absolute;
    inset: 0;
    width: 96px !important;
    height: 96px !important;
}

.report-loading-ring[b-iaulxvv3bv]  .dxbl-wait-indicator svg {
    width: 96px !important;
    height: 96px !important;
}

.report-loading-logo[b-iaulxvv3bv] {
    position: relative;
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 50%;
    animation: report-loading-pulse-b-iaulxvv3bv 1.2s ease-in-out infinite;
}

@keyframes report-loading-pulse-b-iaulxvv3bv {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.88); opacity: .75; }
}
/* ---------------- AI assistant side panel ---------------- */
.sab-gridai-panel[b-iaulxvv3bv] {
    flex: 0 0 340px;
    width: 340px;
    height: 70vh;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    box-sizing: border-box;
    background: var(--sab-surface);
    border: 1px solid var(--sab-border);
    border-radius: 10px;
    color: var(--sab-text);
}

.sab-gridai-head[b-iaulxvv3bv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--sab-primary-text);
}

.sab-gridai-provider[b-iaulxvv3bv] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    color: var(--sab-text-muted);
    border: 1px solid var(--sab-border);
    border-radius: 10px;
    padding: 1px 8px;
}

.sab-gridai-close[b-iaulxvv3bv] {
    border: 0;
    background: transparent;
    color: var(--sab-text-muted);
    cursor: pointer;
    font-size: 14px;
}

    .sab-gridai-close:hover[b-iaulxvv3bv] { color: var(--sab-danger); }

.sab-gridai-chat[b-iaulxvv3bv] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    background: var(--sab-bg);
    border: 1px solid var(--sab-border);
    border-radius: 8px;
}

.sab-gridai-hint[b-iaulxvv3bv] {
    color: var(--sab-text-muted);
    font-size: 13px;
    line-height: 1.6;
    padding: 6px;
}

.sab-gridai-msg[b-iaulxvv3bv] {
    max-width: 92%;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

    .sab-gridai-msg.user[b-iaulxvv3bv] {
        align-self: flex-end;
        background: var(--sab-primary);
        color: var(--sab-on-primary);
        border-bottom-right-radius: 2px;
    }

    .sab-gridai-msg.bot[b-iaulxvv3bv] {
        align-self: flex-start;
        background: var(--sab-surface-hover);
        border-bottom-left-radius: 2px;
    }

.sab-gridai-interim[b-iaulxvv3bv] {
    font-style: italic;
    color: var(--sab-text-muted);
    font-size: 12px;
}

.sab-gridai-buttons[b-iaulxvv3bv] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 900px) {
    .sab-gridai-panel[b-iaulxvv3bv] { flex-basis: 260px; width: 260px; }
}

/* ==================================================================
   AI ka chart
   SVG SabChartBuilder (C#) banata hai. Rang "currentColor" se aate hain
   taki dark theme me text apne aap ulta ho jaye.
   ================================================================== */

[b-iaulxvv3bv] .sab-chart-popup .sab-chart-box {
    color: var(--sab-text, #1a1a1a);
    padding: 8px 4px;
    overflow: auto;
    height: 100%;
}

[b-iaulxvv3bv] .sab-chart-box .sab-chart-svg {
    display: block;
    max-width: 100%;
}

[b-iaulxvv3bv] .sab-chart-foot {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--sab-border, #dde5ea);
    font-size: 12px;
    opacity: 0.75;
    text-align: right;
}

/* chat ke andar "View chart" - chhota, halka, message ka hissa lage */
.sab-gridai-chartlink[b-iaulxvv3bv] {
    margin-top: 6px;
}

.sab-gridai-chartlink button[b-iaulxvv3bv] {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 3px 9px;
    font-size: 12px;
    color: inherit;
    cursor: pointer;
    opacity: 0.85;
}

.sab-gridai-chartlink button:hover[b-iaulxvv3bv] {
    opacity: 1;
}

/* ---------------- PDF viewer header: Share / Download (mobile share sheet) ---------------- */
.sab-pdf-header[b-iaulxvv3bv] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.sab-pdf-share[b-iaulxvv3bv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--sab-border, #ccc);
    border-radius: 6px;
    background: var(--sab-surface, #f5f5f5);
    color: var(--sab-text, #222);
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.sab-pdf-share:first-of-type[b-iaulxvv3bv] {
    margin-left: auto;          /* title left, buttons right */
}

.sab-pdf-share:hover[b-iaulxvv3bv] {
    border-color: var(--sab-border-strong, #999);
}

.sab-pdf-share i[b-iaulxvv3bv] {
    font-size: 14px;
}

@media (max-width: 480px) {
    .sab-pdf-share-text[b-iaulxvv3bv] { display: none; }   /* phone par sirf icon */
    .sab-pdf-share[b-iaulxvv3bv] { padding: 6px 10px; }
}

/* ---------------- title row: menu name + Show Report + Chat (ek hi line) ---------------- */
 /* >>> BREAKPOINT - Show + Sheet + Chat sab EK HI LINE me.
    Pehle flex-wrap:wrap tha, isliye jagah kam padte hi teen line ban jati thi.
    Ab nowrap - jagah kam ho to sirf report ka naam chhota hota hai. */
.sab-rep-titlebar[b-iaulxvv3bv] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    margin-bottom: 6px;
    width: 100%;
    min-width: 0;
}

    /* naam hi sikudta hai, baaki sab apni jagah par */
    .sab-rep-titlebar h2[b-iaulxvv3bv] {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sab-rep-titlebar > *:not(h2)[b-iaulxvv3bv] {
        flex: 0 0 auto;
    }

.sab-rep-chat[b-iaulxvv3bv] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* =========================================================================
   >>> BREAKPOINT - SEND BUTTONS : pehle BLACK & WHITE, kaam ke baad COLOURFUL
   Shuru me icon grey. Jab us channel ka kaam poora ho jata hai to component
   us item par class "sab-send-done" laga deta hai -> icon apne brand rang me.
   Report dobara khulne par flags reset -> phir se black & white.
   ::deep isliye ki DxToolbar apna markup khud render karta hai.
   ========================================================================= */

/* default : sab grey (black & white) */
.sab-report-bottombar[b-iaulxvv3bv]  i[class*="fa-"] {
    color: #6b7785 !important;
    filter: grayscale(1);
}

/* kaam poora -> apna asli rang */
.sab-report-bottombar[b-iaulxvv3bv]  .sab-send-done i[class*="fa-"],
.sab-report-bottombar[b-iaulxvv3bv]  .sab-send-done .dxbl-btn i[class*="fa-"] {
    filter: none !important;
}

.sab-report-bottombar[b-iaulxvv3bv]  .sab-send-done .fa-file-pdf { color: #c62828 !important; }   /* PDF      - red   */
.sab-report-bottombar[b-iaulxvv3bv]  .sab-send-done .fa-envelope { color: #c62828 !important; }   /* Email    - red   */
.sab-report-bottombar[b-iaulxvv3bv]  .sab-send-done .fa-whatsapp { color: #25D366 !important; }   /* WhatsApp - brand */
.sab-report-bottombar[b-iaulxvv3bv]  .sab-send-done .fa-telegram { color: #229ED9 !important; }   /* Telegram - brand */

/* chalte waqt (button disable) - halka aur "kaam chal raha hai" wala ehsaas */
.sab-report-bottombar[b-iaulxvv3bv]  .dxbl-btn:disabled,
.sab-report-bottombar[b-iaulxvv3bv]  .dxbl-btn[aria-disabled="true"] {
    opacity: .45 !important;
    cursor: progress !important;
}

/* >>> BREAKPOINT - Show ke paas Google Sheet chunne wala combobox */
/* >>> BREAKPOINT - Sheet [ ... ] : chaurai 50px.
   Zaroorat pade to yahan badha lijiye - baaki kuch nahi badalna padega. */
.sab-gsheet-wrap[b-iaulxvv3bv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.sab-gsheet-lbl[b-iaulxvv3bv] {
    font-size: 12px;
    color: var(--sab-text-muted, #6b7785);
    white-space: nowrap;
}

.sab-gsheet-pick[b-iaulxvv3bv] {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
}

/* >>> BREAKPOINT - Report / Summary tabs (report popup ke andar) */
.sab-rep-tabs[b-iaulxvv3bv] {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

    .sab-rep-tabs[b-iaulxvv3bv]  .dxbl-tabs-content,
    .sab-rep-tabs[b-iaulxvv3bv]  .dxbl-tabpage {
        min-width: 0;
        max-width: 100%;
        overflow: auto;
    }

/* >>> BREAKPOINT - bottom bar ka Share button (mobile share sheet) */
.sab-rep-share[b-iaulxvv3bv] {
    margin-left: 8px;
}

/* >>> BREAKPOINT - footer summary popup : keyboard focus wali row dikhe */
.sab-sum-item[b-iaulxvv3bv] { cursor: pointer; }
.sab-sum-item:focus-within[b-iaulxvv3bv] { background: #e5f1fb; outline: 1px solid #99c1ec; }

/* >>> BREAKPOINT - COUNT : bottom bar me Telegram ke aage */
.sab-rep-count[b-iaulxvv3bv] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--sab-surface-active, rgba(42,120,214,.10));
    color: var(--sab-text);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* >>> BREAKPOINT - MOBILE : bottom bar (Pdf / Email / WhatsApp / Telegram / Share) ke icon DOUBLE
   aur ek dusre se door. 768px se chhoti screen par hi. */
@media (max-width: 768px) {
    .sab-report-bottombar[b-iaulxvv3bv] {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .sab-report-bottombar[b-iaulxvv3bv]  i[class*="fa-"] {
        font-size: 2em !important;
    }

    .sab-report-bottombar[b-iaulxvv3bv]  .dxbl-btn {
        margin: 2px 8px !important;
        padding: 6px 8px !important;
    }

    .sab-rep-share[b-iaulxvv3bv] {
        margin-left: 12px;
        padding: 6px 10px;
    }
}

/* >>> BREAKPOINT - HEADER : menu naam + Report / Summary button ; neeche ki tab patti chhupi */
.sab-rep-head[b-iaulxvv3bv] { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sab-rep-headname[b-iaulxvv3bv] { font-weight: 700; }
.sab-rep-headtab[b-iaulxvv3bv] { border: 1px solid var(--sab-border, #cfd8e3); background: var(--sab-surface, #fff); color: var(--sab-text, #1f2937);
                   border-radius: 14px; padding: 2px 12px; font-size: 13px; cursor: pointer; line-height: 1.6; }
.sab-rep-headtab:hover[b-iaulxvv3bv] { filter: brightness(.96); }
/* >>> BREAKPOINT - Report / Summary button (bina chuna) : theme ka primary rang, safed text (pehle white par white dikhta tha) */
.sab-rep-headtab[b-iaulxvv3bv] { background: var(--sab-primary, #1976d2) !important; border-color: rgba(255,255,255,.6) !important;   /* heading bhi theme rang ho to bhi alag dikhe */
                   color: #fff !important; opacity: .85; }
.sab-rep-headtab:hover[b-iaulxvv3bv] { opacity: 1; }
/* >>> BREAKPOINT - chuna hua (Report / Summary) : font bada + theme ka primary rang GAHRA (dark) karke background */
.sab-rep-headtab.on[b-iaulxvv3bv] { background: color-mix(in srgb, var(--sab-primary, #1976d2) 70%, #000) !important;
                      border-color: color-mix(in srgb, var(--sab-primary, #1976d2) 60%, #000) !important;
                      color: #fff !important; font-weight: 700; font-size: 15px; padding: 3px 14px;
                      box-shadow: 0 1px 4px rgba(0,0,0,.25); opacity: 1; }
[b-iaulxvv3bv] .sab-rep-tabs [role="tablist"] { display: none !important; }

/* >>> BREAKPOINT - search box aadha */
[b-iaulxvv3bv] .sab-rep-search { width: 120px !important; max-width: 120px; min-width: 0 !important; }

/* >>> XLSX button ka hara icon */
.sab-report-bottombar[b-iaulxvv3bv]  .sab-xlsx-btn i { color: #1d6f42 !important; }

/* >>> BREAKPOINT - header : menu naam / Report / Summary LEFT me */
.sab-rep-head[b-iaulxvv3bv] { display: flex !important; width: 100%; justify-content: flex-start; text-align: left; margin-right: auto; }
/* >>> Choose / Summary popup : All wali line alag dikhe */
.sab-sum-all[b-iaulxvv3bv] { font-weight: 700; border-bottom: 1px solid var(--sab-border, #dfe5ef); padding-bottom: 6px; margin-bottom: 4px; }

/* >>> BREAKPOINT - QUERY + COUNT (toolbar ke bahar) : desktop par bottom bar ki usi line me */
.sab-rep-extra[b-iaulxvv3bv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

/* =========================================================================
   >>> BREAKPOINT - MOBILE (768px se chhoti screen) - sirf mobile view
   1. Report page : MstEntry (mst-v2-card) jaisi chaudai / padding - pehle 700px fix + 20px padding
      se screen se bahar jata tha.
   2. Grid toolbar : search patla, "Layout:" label chhupa, layout dropdown patla
      (Save ke aage AutoFit / SabErpAI bahar nahi jayenge).
   3. Bottom bar : icon popup ke neeche chipke (margin-top:auto), Query + Count agli line me.
   4. AI chat : side panel ki jagah report ke upar poori chaudai ka sheet (popup jaisa) -
      Mic / Undo / Reset / Send sab dikhte hain.
   ========================================================================= */
@media (max-width: 768px) {
    .report-filter-container[b-iaulxvv3bv] {
        width: auto;
        max-width: 100%;
        margin: 10px;
        padding: 0;
        box-sizing: border-box;
    }

    .report-filter-box[b-iaulxvv3bv] {
        padding: 15px;
        border-radius: 12px;
        box-sizing: border-box;
    }

    [b-iaulxvv3bv] .filter-item { min-width: 0; }
    [b-iaulxvv3bv] .filter-item .dxbl-fl-editor { width: auto; }

    [b-iaulxvv3bv] .sab-rep-search { width: 85px !important; max-width: 85px; }
    .sab-rep-laylbl[b-iaulxvv3bv] { display: none; }
    [b-iaulxvv3bv] .sab-rep-laycb { width: 72px !important; min-width: 0 !important; }

    .sab-report-bottombar[b-iaulxvv3bv] { margin-top: auto; }
    .sab-rep-extra[b-iaulxvv3bv] {
        flex: 1 0 100%;
        justify-content: flex-start;
        margin-left: 4px;
    }

    .sab-gridai-panel[b-iaulxvv3bv] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 12%;
        width: auto;
        height: auto;
        flex-basis: auto;
        z-index: 30;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, .35);
    }

    .sab-gridai-panel[b-iaulxvv3bv]  .dxbl-memo { width: 100% !important; }
    .sab-gridai-buttons[b-iaulxvv3bv] { flex-wrap: nowrap; }
}

/* >>> BREAKPOINT - bottom bar (Xlsx / Pdf / WhatsApp / Query / Share / Count) popup ke neeche chipki, bottom padding 0 (desktop + mobile) */
.sab-report-bottombar[b-iaulxvv3bv] {
    margin-top: auto;
    padding-bottom: 0;
    margin-bottom: 0;
}
/* _content/ZabWebErp_dev/Components/Reports/SabPivotPanel.razor.rz.scp.css */
/* ============================================================================
   SAB PIVOT PANEL - Summary tab
   ========================================================================= */

.sab-pivot[b-ma87cgcfxj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 6px 2px 2px;
    box-sizing: border-box;
}

.sab-pivot-empty[b-ma87cgcfxj] {
    padding: 24px;
    text-align: center;
    font-size: 13px;
    color: var(--sab-text-muted, #6b7785);
}

/* ------------------------------------------------------------ field patti */
.sab-pivot-fields[b-ma87cgcfxj] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;          /* >>> BREAKPOINT - sab button EK hi row me */
    overflow-x: auto;           /* chhoti screen par row scroll ho, tootegi nahi */
    white-space: nowrap;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    background: var(--sab-neutral-6, #f7f9fb);
}

.sab-pivot-fl[b-ma87cgcfxj] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sab-text-muted, #6b7785);
    margin-right: 2px;
}

.sab-pivot-fld[b-ma87cgcfxj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 8px;
    border: 1px solid var(--sab-border);
    border-radius: 6px;
    background: var(--sab-bg);
}

.sab-pivot-fn[b-ma87cgcfxj] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sab-text);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sab-pivot-area[b-ma87cgcfxj] {
    width: 92px;
    min-width: 92px;
}

/* ------------------------------------------------------------------ pivot */
.sab-pivot-grid[b-ma87cgcfxj] {
    width: 100%;
    min-width: 0;
    overflow: auto;
}

    .sab-pivot-grid[b-ma87cgcfxj]  .sab-pivot-dx {
        width: 100%;
        min-width: 0;
    }

/* ------------------------------------------------------------------ chart */
.sab-pivot-chart[b-ma87cgcfxj] {
    border: 1px solid var(--sab-border);
    border-radius: 10px;
    background: var(--sab-bg);
    padding: 8px 10px 10px;
    min-width: 0;
}

.sab-pivot-chead[b-ma87cgcfxj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.sab-pivot-ct[b-ma87cgcfxj] {
    font-size: 13px;
    font-weight: 700;
    color: var(--sab-text);
}

.sab-pivot-cs[b-ma87cgcfxj] {
    font-size: 11px;
    color: var(--sab-text-muted, #8a95a3);
    margin-left: auto;
}

.sab-pivot-chart[b-ma87cgcfxj]  .dxbl-chart,
.sab-pivot-chart[b-ma87cgcfxj]  .dxbl-chart svg {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 768px) {
    .sab-pivot-fn[b-ma87cgcfxj] { max-width: 90px; }
    .sab-pivot-area[b-ma87cgcfxj] { width: 80px; min-width: 80px; }

    .sab-pivot-chart[b-ma87cgcfxj]  .dxbl-chart { height: 220px !important; }

    .sab-pivot-chart[b-ma87cgcfxj]  .dxbl-chart text { font-size: 9px !important; }
}


/* >>> BREAKPOINT - DxPivotTable + toolbar */
.sab-pivot-grid[b-ma87cgcfxj] {
    overflow: auto;
    max-height: 48vh;
}

/* pivot ab child component (SabPivotTable) me hai, isliye ::deep chahiye */
.sab-pivot[b-ma87cgcfxj]  .sab-pivot-dx {
    font-size: .82rem;
}

.sab-pivot-sep[b-ma87cgcfxj] {
    display: inline-block;
    width: 1px;
    height: 20px;
    margin: 0 6px;
    background: var(--bs-border-color, #dee2e6);
}

/* >>> BREAKPOINT - GRAND TOTAL bold (row ka bhi, column ka bhi).
   DevExpress apni class khud banata hai aur version ke saath naam badal sakta
   hai, isliye naam ka TUKDA match kar rahe hain - "grand" jis bhi class me ho.
   ::deep isliye ki ye scoped CSS hai aur ye cell hamare markup ke andar nahi,
   DxPivotTable ke andar bante hain. */
.sab-pivot[b-ma87cgcfxj]  [class*="grand-total"],
.sab-pivot[b-ma87cgcfxj]  [class*="grandtotal"],
.sab-pivot[b-ma87cgcfxj]  [class*="GrandTotal"],
.sab-pivot[b-ma87cgcfxj]  [class*="grand-Total"] {
    font-weight: 700 !important;
}

/* >>> BREAKPOINT - column resize ka grip (sabPivotResize.init se lagta hai) */
.sab-pivot[b-ma87cgcfxj]  .sab-rsz-grip {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 5;
}

.sab-pivot[b-ma87cgcfxj]  .sab-rsz-host {
    position: relative;
}

/* >>> BREAKPOINT - drill link (Row / Column heading). sab-drill-link
   Sabgridreport ki scoped CSS me hai, isliye yahan apni copy chahiye. */
/* >>> BREAKPOINT - dark theme me blue link kaala pad jata tha.
   Ab link apne cell ka hi text color leta hai (currentColor) - light me kaala,
   dark me safed - aur dotted underline se pata chalta hai ki click hota hai. */
.sab-pivot a.sab-drill-link[b-ma87cgcfxj],
.sab-pivot[b-ma87cgcfxj]  a.sab-drill-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px dotted currentColor;
}

.sab-pivot a.sab-drill-link:hover[b-ma87cgcfxj],
.sab-pivot[b-ma87cgcfxj]  a.sab-drill-link:hover {
    text-decoration: none;
    border-bottom-style: solid;
}

/* >>> BREAKPOINT - abhi lage hue field ki patti (chips) - (x) se remove */
.sab-pivot-chips[b-ma87cgcfxj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 2px 2px;
}

.sab-pivot-chip[b-ma87cgcfxj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 14px;
    padding: 2px 4px 2px 8px;
    font-size: .76rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    max-width: 240px;
}

.sab-pivot-chip-ar[b-ma87cgcfxj] {
    font-weight: 700;
    opacity: .65;
    text-transform: uppercase;
    font-size: .64rem;
    letter-spacing: .03em;
}

.sab-pivot-chip-nm[b-ma87cgcfxj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sab-pivot-chip-x[b-ma87cgcfxj] {
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 50%;
    font-size: .72rem;
}

.sab-pivot-chip-x:hover[b-ma87cgcfxj] {
    opacity: 1;
    background: var(--bs-secondary-bg, #e9ecef);
}

.sab-pivot-chip.ar-row[b-ma87cgcfxj]    { border-left: 3px solid #4e79a7; }
.sab-pivot-chip.ar-column[b-ma87cgcfxj] { border-left: 3px solid #59a14f; }
.sab-pivot-chip.ar-data[b-ma87cgcfxj]   { border-left: 3px solid #e15759; }
.sab-pivot-chip.ar-filter[b-ma87cgcfxj] { border-left: 3px solid #b07aa1; }

/* toolbar ke andar ki cheezein sikudein nahi */
.sab-pivot-fields > *[b-ma87cgcfxj] {
    flex: 0 0 auto;
}

/* >>> BREAKPOINT - layout combobox : 200px -> 100px (50% kam) */
.sab-pivot-laypick[b-ma87cgcfxj] {
    display: inline-block;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

/* >>> BREAKPOINT - Row / Column / Data area ke header me (x) */
.sab-pivot[b-ma87cgcfxj]  .sab-pivot-hdr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.sab-pivot[b-ma87cgcfxj]  .sab-pivot-hdr-x {
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .55;
    cursor: pointer;
    line-height: 1;
    padding: 1px 5px;
    border-radius: 50%;
    font-size: .7rem;
}

.sab-pivot[b-ma87cgcfxj]  .sab-pivot-hdr-x:hover {
    opacity: 1;
    background: rgba(220, 53, 69, .18);
    color: #dc3545;
}
/* _content/ZabWebErp_dev/Components/SabCrm/CrmShell.razor.rz.scp.css */
/* >>> BREAKPOINT - SAB CRM : saari styling (DevExpress Blazor CRM demo jaisa look). ::deep = pages ke andar bhi lage */
.crm-denied[b-3ymrgqxb9n] { padding: 20px; color: #b00020; font-weight: 600; }

.crm[b-3ymrgqxb9n] { display: flex; height: calc(100vh - 70px); min-height: 520px; background: #f3f4f6; font-family: "Segoe UI", Arial, sans-serif; }

/* ---------------- left menu */
.crm-side[b-3ymrgqxb9n] { width: 220px; flex: 0 0 auto; background: #fff; border-right: 1px solid #e5e7eb; overflow-y: auto; transition: width .15s; }
    .crm-side.closed[b-3ymrgqxb9n] { width: 48px; }
.crm-brand[b-3ymrgqxb9n] { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 8px; font-size: 16px; font-weight: 700; color: #1f2937; border-bottom: 1px solid #f0f1f3; }
.crm-iconbtn[b-3ymrgqxb9n] { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: #4b5563; }
    .crm-iconbtn:hover[b-3ymrgqxb9n] { background: #f3f4f6; }
.crm-group[b-3ymrgqxb9n] { display: flex; align-items: center; gap: 8px; padding: 14px 14px 6px; font-size: 13px; font-weight: 700; color: #374151; }
    .crm-group i[b-3ymrgqxb9n] { color: #5f6be8; width: 16px; }
.crm-link[b-3ymrgqxb9n] { display: block; padding: 7px 14px 7px 38px; font-size: 13px; color: #4b5563; text-decoration: none; border-left: 3px solid transparent; }
    .crm-link:hover[b-3ymrgqxb9n] { background: #f5f6ff; color: #1f2937; }
    .crm-link.on[b-3ymrgqxb9n] { background: #eef0ff; color: #3b45c4; font-weight: 600; border-left-color: #5f6be8; }

/* ---------------- page */
.crm-main[b-3ymrgqxb9n] { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px; gap: 12px; overflow: auto; }

[b-3ymrgqxb9n] .crm-card { background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); padding: 12px 14px; }
[b-3ymrgqxb9n] .crm-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; }
[b-3ymrgqxb9n] .crm-title { font-size: 18px; font-weight: 700; color: #111827; margin-right: 12px; }
[b-3ymrgqxb9n] .crm-spacer { flex: 1; }
[b-3ymrgqxb9n] .crm-search { width: 220px; }
[b-3ymrgqxb9n] .crm-fill { flex: 1; min-height: 0; display: flex; }
[b-3ymrgqxb9n] .crm-fill > * { flex: 1; min-width: 0; }
[b-3ymrgqxb9n] .crm-dim { color: #6b7280; font-size: 12px; }
[b-3ymrgqxb9n] .crm-err { background: #fdecea; color: #b91c1c; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
[b-3ymrgqxb9n] .crm-sub { font-size: 12px; color: #6b7280; }
[b-3ymrgqxb9n] .crm-cardtitle { font-size: 15px; font-weight: 700; color: #111827; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
[b-3ymrgqxb9n] .crm-btnlink { border: 0; background: transparent; color: #4b5563; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
    [b-3ymrgqxb9n] .crm-btnlink:hover { background: #f3f4f6; color: #b91c1c; }

/* ---------------- status (dot + colour) */
[b-3ymrgqxb9n] .crm-st { font-size: 12px; white-space: nowrap; }
    [b-3ymrgqxb9n] .crm-st::before { content: " "; display: inline-block; width: .6em; height: .6em; margin-right: .35em; border-radius: 50%; background: currentColor; }
[b-3ymrgqxb9n] .crm-st-lead { color: #2563eb; }
[b-3ymrgqxb9n] .crm-st-prospect { color: #d97706; }
[b-3ymrgqxb9n] .crm-st-customer { color: #16a34a; }
[b-3ymrgqxb9n] .crm-st-inactive { color: #9ca3af; }
[b-3ymrgqxb9n] .crm-st-open { color: #6b7280; }
[b-3ymrgqxb9n] .crm-st-progress { color: #c2410c; }
[b-3ymrgqxb9n] .crm-st-done { color: #16a34a; }
[b-3ymrgqxb9n] .crm-st-deferred { color: #dc2626; }
[b-3ymrgqxb9n] .crm-pr-high { color: #dc2626; }
[b-3ymrgqxb9n] .crm-pr-normal { color: #2563eb; }
[b-3ymrgqxb9n] .crm-pr-low { color: #6b7280; }
[b-3ymrgqxb9n] .dxbl-grid-focused-row .crm-st { color: inherit !important; }

/* ---------------- contact list : grid + right panel */
[b-3ymrgqxb9n] .crm-split { flex: 1; min-height: 0; display: flex; gap: 12px; }
[b-3ymrgqxb9n] .crm-split-grid { flex: 1; min-width: 0; display: flex; }
[b-3ymrgqxb9n] .crm-split-grid .dxbl-grid { flex: 1; }
[b-3ymrgqxb9n] .crm-grid { height: 100%; width: 100%; }
[b-3ymrgqxb9n] .crm-panel { width: 380px; flex: 0 0 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
[b-3ymrgqxb9n] .crm-panel-head { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
[b-3ymrgqxb9n] .crm-panel-head .crm-spacer { flex: 1; }
[b-3ymrgqxb9n] .crm-namecell div:first-child { font-weight: 600; color: #111827; }

/* accordion jaisa */
[b-3ymrgqxb9n] .crm-acc { border-top: 1px solid #eef0f3; }
[b-3ymrgqxb9n] .crm-acc-head { display: flex; align-items: center; gap: 6px; padding: 8px 0; font-weight: 700; font-size: 13px; cursor: pointer; color: #1f2937; }
[b-3ymrgqxb9n] .crm-acc-item { padding: 6px 8px; border-radius: 6px; font-size: 13px; }
    [b-3ymrgqxb9n] .crm-acc-item:hover { background: #f8f9fb; }
[b-3ymrgqxb9n] .crm-acc-item .t { font-weight: 600; color: #111827; }

/* ---------------- contact form (view / edit) */
[b-3ymrgqxb9n] .crm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
[b-3ymrgqxb9n] .crm-form .full { grid-column: 1 / -1; }
[b-3ymrgqxb9n] .crm-cap { font-size: 11px; color: #6b7280; margin-bottom: 2px; text-transform: none; }
[b-3ymrgqxb9n] .crm-val { font-size: 14px; color: #111827; min-height: 20px; word-break: break-word; }
[b-3ymrgqxb9n] .crm-sep { grid-column: 1 / -1; border: 0; border-top: 1px solid #eef0f3; margin: 4px 0; }
[b-3ymrgqxb9n] .crm-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #e0e7ff; color: #3b45c4;
                      display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; }
[b-3ymrgqxb9n] .crm-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
[b-3ymrgqxb9n] .crm-head { display: flex; gap: 16px; align-items: center; margin-bottom: 10px; }

/* ---------------- contact details : 2 column */
[b-3ymrgqxb9n] .crm-details { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(320px, 38em) 1fr; gap: 12px; }
[b-3ymrgqxb9n] .crm-details > .crm-card { overflow-y: auto; }
[b-3ymrgqxb9n] .crm-tabs { display: flex; gap: 2px; border-bottom: 1px solid #e5e7eb; margin-bottom: 10px; }
    [b-3ymrgqxb9n] .crm-tabs span { padding: 8px 14px; cursor: pointer; font-size: 13px; color: #4b5563; border-bottom: 2px solid transparent; }
    [b-3ymrgqxb9n] .crm-tabs span.on { color: #3b45c4; border-bottom-color: #5f6be8; font-weight: 600; }

/* opportunities cards */
[b-3ymrgqxb9n] .crm-opps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
[b-3ymrgqxb9n] .crm-group-h { font-size: 13px; font-weight: 700; color: #374151; margin: 8px 0 6px; }
[b-3ymrgqxb9n] .crm-opp { border-radius: 8px; padding: 10px 12px; border-left: 4px solid #5f6be8; background: #f5f6ff; font-size: 13px; position: relative; }
    [b-3ymrgqxb9n] .crm-opp.closed { border-left-color: #9ca3af; background: #f6f7f9; }
    [b-3ymrgqxb9n] .crm-opp .name { font-weight: 700; color: #111827; margin-bottom: 4px; padding-right: 50px; }
    [b-3ymrgqxb9n] .crm-opp .acts { position: absolute; top: 6px; right: 6px; }

/* notes / activities list */
[b-3ymrgqxb9n] .crm-list-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; border-bottom: 1px solid #f0f1f3; font-size: 13px; }
[b-3ymrgqxb9n] .crm-list-item .grow { flex: 1; min-width: 0; }
[b-3ymrgqxb9n] .crm-list-item .meta { font-size: 11px; color: #6b7280; }
[b-3ymrgqxb9n] .crm-addrow { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; flex-wrap: wrap; }

/* ---------------- scheduler */
[b-3ymrgqxb9n] .crm-sched { flex: 1; min-height: 0; display: flex; gap: 12px; }
[b-3ymrgqxb9n] .crm-sched-side { width: 270px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
[b-3ymrgqxb9n] .crm-sched-main { flex: 1; min-width: 0; padding: 6px; }
[b-3ymrgqxb9n] .crm-sched-main .dxbl-scheduler { height: 100%; }
[b-3ymrgqxb9n] .crm-res { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; cursor: pointer; }
[b-3ymrgqxb9n] .crm-res-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
[b-3ymrgqxb9n] .crm-res-0 { background-color: #5f6be8 !important; color: #fff !important; }
[b-3ymrgqxb9n] .crm-res-1 { background-color: #16a34a !important; color: #fff !important; }
[b-3ymrgqxb9n] .crm-res-2 { background-color: #d97706 !important; color: #fff !important; }
[b-3ymrgqxb9n] .crm-res-3 { background-color: #0891b2 !important; color: #fff !important; }
[b-3ymrgqxb9n] .crm-res-4 { background-color: #db2777 !important; color: #fff !important; }

/* ---------------- dashboard */
[b-3ymrgqxb9n] .crm-tickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
[b-3ymrgqxb9n] .crm-ticker { display: flex; align-items: center; gap: 12px; }
[b-3ymrgqxb9n] .crm-ticker .ic { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
    [b-3ymrgqxb9n] .crm-ticker .ic.pos { background: #e8f7ee; color: #16a34a; }
    [b-3ymrgqxb9n] .crm-ticker .ic.neg { background: #fdecec; color: #dc2626; }
[b-3ymrgqxb9n] .crm-ticker .mid { flex: 1; min-width: 0; }
[b-3ymrgqxb9n] .crm-ticker .t { font-size: 12px; color: #6b7280; }
[b-3ymrgqxb9n] .crm-ticker .v { font-size: 20px; font-weight: 700; color: #111827; white-space: nowrap; }
[b-3ymrgqxb9n] .crm-ticker .pct { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 12px; white-space: nowrap; }
    [b-3ymrgqxb9n] .crm-ticker .pct.pos { background: #e8f7ee; color: #16a34a; }
    [b-3ymrgqxb9n] .crm-ticker .pct.neg { background: #fdecec; color: #dc2626; }
[b-3ymrgqxb9n] .crm-dash2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
[b-3ymrgqxb9n] .crm-rangebtn { border: 1px solid transparent; background: transparent; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #374151; }
    [b-3ymrgqxb9n] .crm-rangebtn.on { background: #eef0ff; border-color: #c7cbff; color: #3b45c4; font-weight: 600; }
[b-3ymrgqxb9n] .crm-bar { height: 8px; background: #eef0f3; border-radius: 4px; overflow: hidden; }
    [b-3ymrgqxb9n] .crm-bar > div { height: 100%; background: #5f6be8; }

/* AI insights panel */
[b-3ymrgqxb9n] .crm-ai { width: 360px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
[b-3ymrgqxb9n] .crm-ai-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; font-size: 13px; min-height: 200px; }
[b-3ymrgqxb9n] .crm-ai-msg { padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; }
    [b-3ymrgqxb9n] .crm-ai-msg.user { background: #eef0ff; align-self: flex-end; max-width: 90%; }
    [b-3ymrgqxb9n] .crm-ai-msg.ai { background: #f6f7f9; max-width: 95%; }
[b-3ymrgqxb9n] .crm-ai-sugg { display: flex; gap: 6px; flex-wrap: wrap; }
    [b-3ymrgqxb9n] .crm-ai-sugg button { border: 1px solid #c7cbff; background: #fff; color: #3b45c4; border-radius: 14px; padding: 4px 10px; font-size: 12px; cursor: pointer; }

@media (max-width: 1100px) {
    [b-3ymrgqxb9n] .crm-details { grid-template-columns: 1fr; }
    [b-3ymrgqxb9n] .crm-dash2 { grid-template-columns: 1fr; }
    [b-3ymrgqxb9n] .crm-panel { width: 320px; }
    [b-3ymrgqxb9n] .crm-ai { width: 300px; }
}
@media (max-width: 760px) {
    .crm-side[b-3ymrgqxb9n] { width: 48px; }
    [b-3ymrgqxb9n] .crm-split { flex-direction: column; }
    [b-3ymrgqxb9n] .crm-panel { width: auto; }
    [b-3ymrgqxb9n] .crm-sched { flex-direction: column; }
    [b-3ymrgqxb9n] .crm-sched-side { width: auto; }
    [b-3ymrgqxb9n] .crm-form { grid-template-columns: 1fr; }
    [b-3ymrgqxb9n] .crm-ai { width: auto; }
}
[b-3ymrgqxb9n] .crm-w140 { width: 140px; }
[b-3ymrgqxb9n] .crm-w240 { width: 240px; }
/* _content/ZabWebErp_dev/Components/SabErpAI/BusinessAI.razor.rz.scp.css */
/* ============================================================================
   BUSINESS AI window - buttons, progress, chat
   ========================================================================= */

.biz-ai[b-rrx95dooym] {
    display: flex;
    flex-direction: column;
    /* popup ki uchai (min(700px, 92vh)) - header / padding */
    height: calc(min(700px, 92vh) - 96px);
    min-height: 0;
    gap: 8px;
}

.bz-bar[b-rrx95dooym] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.bz-dl[b-rrx95dooym] {
    font-size: 12px;
    color: #c0392b;
    text-decoration: none;
    padding: 3px 7px;
    border: 1px solid var(--sab-border);
    border-radius: 6px;
}

.bz-info[b-rrx95dooym] {
    margin-left: auto;
    font-size: 11px;
    color: var(--sab-text-muted, #6b7785);
}

/* ---------------------------------------------------------------- progress */
.bz-prog[b-rrx95dooym] {
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    padding: 8px;
}

.bz-prog-bar[b-rrx95dooym] {
    height: 10px;
    background: var(--sab-neutral-6, #e9eef5);
    border-radius: 6px;
    overflow: hidden;
}

.bz-prog-fill[b-rrx95dooym] {
    height: 100%;
    background: linear-gradient(90deg, #2a78d6, #1baf7a);
    transition: width .3s ease;
}

.bz-prog-txt[b-rrx95dooym] {
    font-size: 12px;
    margin-top: 4px;
    color: var(--sab-text);
}

.bz-steps[b-rrx95dooym] {
    margin-top: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
}

.bz-step[b-rrx95dooym] { font-size: 11px; color: var(--sab-text-muted, #6b7785); }
.bz-step.ok[b-rrx95dooym] { color: #1b7f3b; }
.bz-step.bad[b-rrx95dooym] { color: #c0392b; }
.bz-step.run[b-rrx95dooym] { color: #2a78d6; }

/* ---------------------------------------------------------------- chat */
.bz-chat[b-rrx95dooym] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;   /* naya message hamesha neeche dikhe, scroll ki zarurat nahi */
    gap: 6px;
    padding: 4px 2px;
}

.bz-msg[b-rrx95dooym] {
    max-width: 88%;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

    .bz-msg.user[b-rrx95dooym] {
        align-self: flex-end;
        background: #2a78d6;
        color: #fff;
        border-bottom-right-radius: 3px;
    }

    .bz-msg.ai[b-rrx95dooym] {
        align-self: flex-start;
        background: var(--sab-neutral-6, #eef3f9);
        color: var(--sab-text);
        border: 1px solid var(--sab-border);
        border-bottom-left-radius: 3px;
    }

.bz-think[b-rrx95dooym] { font-style: italic; }

.bz-hint[b-rrx95dooym] {
    font-size: 12px;
    color: var(--sab-text-muted, #6b7785);
    padding: 10px;
    border: 1px dashed var(--sab-border);
    border-radius: 8px;
}

/* ---------------------------------------------------------------- ask */
.bz-ask[b-rrx95dooym] {
    display: flex;
    gap: 6px;
}

.bz-input[b-rrx95dooym] {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    background: var(--sab-bg);
    color: var(--sab-text);
    font-size: 13px;
}

    .bz-input:focus[b-rrx95dooym] {
        outline: none;
        border-color: #2a78d6;
    }

/* >>> BREAKPOINT - PDF viewer (Proforma jaisa) */
.bz-pdf[b-rrx95dooym] { display: flex; flex-direction: column; gap: 8px; height: calc(min(760px, 94vh) - 90px); }
.bz-pdfbtns[b-rrx95dooym] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bz-pdfview[b-rrx95dooym] { flex: 1; width: 100%; border: 1px solid var(--sab-border); border-radius: 6px; background: #fff; }

/* ---------------------------------------------------------------- >>> BREAKPOINT - days (M / D / Y) */
.bz-days[b-rrx95dooym] {
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 6px;
    background: var(--sab-surface, transparent);
}

.bz-days-grid[b-rrx95dooym] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 6px 10px;
    align-items: center;
    font-size: 12.5px;
}

.bz-days-msg[b-rrx95dooym] {
    margin-top: 6px;
    font-size: 12px;
    color: #c62828;
}

.bz-days-btns[b-rrx95dooym] {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
}
/* _content/ZabWebErp_dev/Components/SabErpAI/EnquiryAI.razor.rz.scp.css */
/* ============================================================================
   ENQUIRY AI (client) - chat, stock cards, order draft
   ========================================================================= */

.eq[b-yb7pjednc1] {
    display: flex;
    flex-direction: column;
    height: calc(min(720px, 92vh) - 96px);
    min-height: 0;
    gap: 8px;
}

.eq-chat[b-yb7pjednc1] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;   /* naya message hamesha neeche */
    gap: 8px;
    padding: 4px 2px;
}

.eq-msg[b-yb7pjednc1] {
    max-width: 92%;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
}

    .eq-msg.user[b-yb7pjednc1] {
        align-self: flex-end;
        background: #2a78d6;
        color: #fff;
        border-bottom-right-radius: 3px;
    }

    .eq-msg.ai[b-yb7pjednc1] {
        align-self: flex-start;
        background: var(--sab-neutral-6, #eef3f9);
        color: var(--sab-text);
        border: 1px solid var(--sab-border);
        border-bottom-left-radius: 3px;
    }

.eq-text[b-yb7pjednc1] { white-space: pre-wrap; word-break: break-word; }
.eq-think[b-yb7pjednc1] { font-style: italic; }

/* ---------------------------------------------------------------- stock cards */
.eq-cards[b-yb7pjednc1] {
    margin-top: 6px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.eq-card[b-yb7pjednc1] {
    background: var(--sab-bg);
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    overflow: hidden;
}

    .eq-card img[b-yb7pjednc1] {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        display: block;
        background: #f1f5f9;
    }

.eq-cbody[b-yb7pjednc1] { padding: 6px 8px; font-size: 12px; }
.eq-q[b-yb7pjednc1] { font-weight: 700; font-size: 13px; }
.eq-s b[b-yb7pjednc1] { color: #1b7f3b; }
.eq-r b[b-yb7pjednc1] { color: #1f4e79; }

/* ---------------------------------------------------------------- order draft */
.eq-draft[b-yb7pjednc1] {
    margin-top: 6px;
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: var(--sab-bg);
}

    .eq-draft th[b-yb7pjednc1], .eq-draft td[b-yb7pjednc1] {
        border: 1px solid var(--sab-border);
        padding: 4px 6px;
        text-align: left;
    }

    .eq-draft th[b-yb7pjednc1] { background: var(--sab-neutral-6, #eef3f9); }
    .eq-draft td.n[b-yb7pjednc1] { text-align: right; }
    .eq-draft tr.short td[b-yb7pjednc1] { color: #c0392b; }

.eq-actions[b-yb7pjednc1] {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.eq-state[b-yb7pjednc1] {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #1b7f3b;
}

/* ---------------------------------------------------------------- ask */
.eq-ask[b-yb7pjednc1] { display: flex; gap: 6px; }

.eq-input[b-yb7pjednc1] {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    background: var(--sab-bg);
    color: var(--sab-text);
    font-size: 13px;
}

    .eq-input:focus[b-yb7pjednc1] { outline: none; border-color: #2a78d6; }

/* ---------------------------------------------------------------- order pdf link */
.eq-pdf[b-yb7pjednc1] {
    display: inline-block;
    cursor: pointer;
    margin-top: 6px;
    padding: 4px 8px;
    border: 1px solid var(--sab-border);
    border-radius: 6px;
    background: var(--sab-bg);
    color: #c0392b;
    font-size: 12px;
    text-decoration: none;
}

/* ---------------------------------------------------------------- >>> quality suggestions */
.eq-sugg[b-yb7pjednc1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 96px;
    overflow-y: auto;
    padding: 2px 0;
}

.eq-sg[b-yb7pjednc1] {
    max-width: 100%;
    padding: 4px 10px;
    border: 1px solid #2a78d6;
    border-radius: 14px;
    background: var(--sab-bg);
    color: #1f4e79;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .eq-sg small[b-yb7pjednc1] { color: #1b7f3b; margin-left: 4px; }
    .eq-sg:hover[b-yb7pjednc1] { background: #2a78d6; color: #fff; }
    .eq-sg:hover small[b-yb7pjednc1] { color: #fff; }

/* ---------------------------------------------------------------- >>> mic (bol kar entry) */
.eq-mic[b-yb7pjednc1] {
    width: 36px;
    min-width: 36px;
    height: 34px;
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    background: var(--sab-bg);
    color: #2a78d6;
    cursor: pointer;
}

    .eq-mic.on[b-yb7pjednc1] {
        background: #c0392b;
        border-color: #c0392b;
        color: #fff;
        animation: eqpulse-b-yb7pjednc1 1.2s infinite;
    }

    .eq-mic:disabled[b-yb7pjednc1] { opacity: .5; cursor: default; }

@keyframes eqpulse-b-yb7pjednc1 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .5); }
    50% { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); }
}

/* >>> design suggestion : design (bold) + quality + stock */
.eq-sgq[b-yb7pjednc1] { font-size: 11px; color: var(--sab-text-muted, #6b7785); margin-left: 4px; }
.eq-sg:hover .eq-sgq[b-yb7pjednc1] { color: #fff; }

/* ---------------------------------------------------------------- >>> suggestion cards (dashboard jaise) */
.eq-scards[b-yb7pjednc1] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scroll-snap-type: x proximity;
}

.eq-scard[b-yb7pjednc1] {
    flex: 0 0 120px;
    scroll-snap-align: start;
    background: var(--sab-bg);
    border: 1px solid var(--sab-border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

    .eq-scard:hover[b-yb7pjednc1] {
        transform: translateY(-2px);
        border-color: #2a78d6;
        box-shadow: 0 4px 10px rgba(42, 120, 214, .25);
    }

.eq-simg[b-yb7pjednc1] {
    height: 72px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 24px;
}

    .eq-simg img[b-yb7pjednc1] { width: 100%; height: 100%; object-fit: cover; display: block; }

.eq-sbody[b-yb7pjednc1] { padding: 5px 7px 6px; line-height: 1.25; }
.eq-sd[b-yb7pjednc1] { font-weight: 700; font-size: 13px; color: var(--sab-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-sq[b-yb7pjednc1] { font-size: 11px; color: var(--sab-text-muted, #6b7785); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-sm[b-yb7pjednc1] { font-size: 12px; font-weight: 700; color: #1b7f3b; }

/* >>> photo na ho : ZabWebERP.png poora dikhe (kate nahi) */
.eq-card img.nophoto[b-yb7pjednc1] { object-fit: contain; background: #fff; padding: 6px; }

/* >>> BREAKPOINT - chat PDF viewer (mobile par bhi app ke andar) */
[b-yb7pjednc1] .eq-pdfview-dx { flex: 1; width: 100%; min-height: 360px; height: 100%; border: 1px solid var(--sab-border); border-radius: 6px; }
/* _content/ZabWebErp_dev/Components/SabErpAI/SabCatalogPopup.razor.rz.scp.css */
/* >>> BREAKPOINT - CATALOG POPUP (card = BiCart / Dashboard2 panel jaisa) */
.ct-wrap[b-0j90m5xsge] { display: flex; flex-direction: column; gap: 8px; min-height: 60vh;
           --ct-shadow: 0 1px 2px rgba(16,24,40,.06), 0 3px 10px rgba(16,24,40,.08); }
.ct-bar[b-0j90m5xsge] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px;
          background: #f3f6fb; border: 1px solid #dfe5ef; border-radius: 10px; }
.ct-lbl[b-0j90m5xsge] { font-weight: 600; color: #123372; margin: 0; }
[b-0j90m5xsge] .ct-cb { width: 190px; }

.ct-tools[b-0j90m5xsge] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 2px; }
.ct-all[b-0j90m5xsge] { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #123372; margin: 0; cursor: pointer; }
.ct-all input[b-0j90m5xsge] { width: 16px; height: 16px; cursor: pointer; }
.ct-cnt[b-0j90m5xsge] { font-size: 12px; color: #5b6472; }
.ct-tright[b-0j90m5xsge] { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }

.ct-status[b-0j90m5xsge] { font-size: 12px; color: #5b6472; min-height: 16px; }
.ct-note[b-0j90m5xsge] { padding: 18px; color: #5b6472; text-align: center; }
.ct-err[b-0j90m5xsge] { padding: 10px 12px; border-radius: 8px; background: #fdecec; color: #a32020; }

.ct-cards[b-0j90m5xsge] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
            max-height: 66vh; overflow: auto; padding: 4px; }

/* ---- card = panel : header / photo / footer */
.ct-card[b-0j90m5xsge] { background: #ffffff; border: 1px solid #dbe3ee; border-radius: 12px; box-shadow: var(--ct-shadow);
           display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
           transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.ct-card:hover[b-0j90m5xsge] { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(16,24,40,.14); }
.ct-card.sel[b-0j90m5xsge] { border-color: #2a78d6; box-shadow: 0 0 0 2px rgba(42,120,214,.35), var(--ct-shadow); }

.ct-ph[b-0j90m5xsge] { position: relative; display: flex; align-items: center; justify-content: center; min-height: 36px;
         padding: 7px 34px; border-bottom: 1px solid #dbe3ee;
         background: linear-gradient(to bottom, #eef3f9, #ffffff); }
.ct-q[b-0j90m5xsge] { font-size: 14px; font-weight: 700; color: #0f172a; text-align: center;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ct-chk[b-0j90m5xsge] { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; cursor: pointer; margin: 0; }

.ct-img[b-0j90m5xsge] { aspect-ratio: 1 / 1; background: #f5f7fa; display: flex; align-items: center; justify-content: center; }
.ct-img img[b-0j90m5xsge] { width: 100%; height: 100%; object-fit: cover; }
.ct-img img.nophoto[b-0j90m5xsge] { object-fit: contain; padding: 22px; opacity: .8; }

.ct-pf[b-0j90m5xsge] { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 4px;
         padding: 7px 8px; border-top: 1px solid #dbe3ee; background: linear-gradient(to top, #eef3f9, #ffffff); }
.ct-pfside[b-0j90m5xsge] { display: flex; justify-content: flex-end; }
.ct-pftxt[b-0j90m5xsge] { text-align: center; min-width: 0; line-height: 1.3; }
.ct-d[b-0j90m5xsge] { font-weight: 600; color: #123372; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-s[b-0j90m5xsge] { font-size: 12px; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-n[b-0j90m5xsge] { font-size: 12px; color: #374151; }
.ct-n b[b-0j90m5xsge] { color: #0f172a; }
.ct-qr[b-0j90m5xsge] { width: 46px; height: 46px; image-rendering: pixelated; background: #fff; border: 1px solid #e6ebf2; border-radius: 4px; }

@media (max-width: 600px) {
    [b-0j90m5xsge] .ct-cb { width: 100%; }
    .ct-lbl[b-0j90m5xsge] { width: 100%; }
    .ct-cards[b-0j90m5xsge] { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ct-pf[b-0j90m5xsge] { grid-template-columns: 0 1fr 40px; }
    .ct-qr[b-0j90m5xsge] { width: 38px; height: 38px; }
}

/* >>> BREAKPOINT - PDF viewer popup */
.ct-pdf[b-0j90m5xsge] { display: flex; flex-direction: column; gap: 8px; height: calc(min(760px, 94vh) - 90px); }
.ct-pdfbtns[b-0j90m5xsge] { display: flex; gap: 6px; flex-wrap: wrap; }
[b-0j90m5xsge] .ct-pdfview-dx { flex: 1; width: 100%; min-height: 360px; height: 100%; border: 1px solid #dbe3ee; border-radius: 6px; }
.ct-pdfhint[b-0j90m5xsge] { font-size: 11px; opacity: .7; }
.ct-pdfview[b-0j90m5xsge] { flex: 1; width: 100%; min-height: 300px; border: 1px solid #dbe3ee; border-radius: 6px; background: #fff; }

/* >>> BREAKPOINT - header / footer = select, photo = zoom */
.ct-card[b-0j90m5xsge] { cursor: default; }
.ct-ph[b-0j90m5xsge], .ct-pf[b-0j90m5xsge] { cursor: pointer; user-select: none; }
.ct-img[b-0j90m5xsge] { cursor: zoom-in; }
.ct-clear[b-0j90m5xsge] { border: 1px solid #c9d2e0; background: #fff; color: #a32020; border-radius: 14px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.ct-zoom[b-0j90m5xsge] { display: flex; align-items: center; justify-content: center; background: #f5f7fa; border-radius: 8px; }
.ct-zoom img[b-0j90m5xsge] { max-width: 100%; max-height: 78vh; object-fit: contain; }

/* >>> BREAKPOINT - qty limit box + Available */
.ct-qtybox[b-0j90m5xsge] { width: 110px; height: 30px; border: 1px solid #c9d2e0; border-radius: 6px; padding: 0 8px; }
.ct-avail[b-0j90m5xsge] { color: #16683a !important; }

/* >>> BREAKPOINT - qty filter (operator + value) */
[b-0j90m5xsge] .ct-opcb { width: 210px; }
.ct-and[b-0j90m5xsge] { font-size: 12px; color: #5b6472; }
@media (max-width: 600px) { [b-0j90m5xsge] .ct-opcb { width: 100%; } }
/* _content/ZabWebErp_dev/Components/SabErpAI/SabPickBox.razor.rz.scp.css */
/* >>> BREAKPOINT - SabLookup (MstEntry) jaisa dikhne wala help box */
.pb-box[b-mi5n0yebfy] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 30px;
    background: var(--sab-bg);
    border: 1px solid var(--sab-border);
    border-radius: 4px;
    overflow: hidden;
}

.pb-text[b-mi5n0yebfy] {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 13px;
    color: var(--sab-text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-ph[b-mi5n0yebfy] { color: var(--sab-text-muted, #94a3b8); }

.pb-btn[b-mi5n0yebfy] {
    width: 34px;
    min-width: 34px;
    height: 100%;
    background: var(--sab-bg);
    color: var(--sab-text);
    border: 0;
    border-left: 1px solid var(--sab-border);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}

    .pb-btn:hover[b-mi5n0yebfy] { background: var(--sab-surface-hover, #eef3f9); }

.pb-ro .pb-text[b-mi5n0yebfy] { cursor: default; background: var(--sab-neutral-6, #f5f8fc); }
.pb-ro .pb-btn[b-mi5n0yebfy] { cursor: default; opacity: .5; }
/* _content/ZabWebErp_dev/Components/SabErpAI/SabReminderPopup.razor.rz.scp.css */
/* ============================================================================
   TASK / REMINDER popup
   ========================================================================= */

.tk-wrap[b-73d3zx2f24] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tk-form[b-73d3zx2f24] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--sab-border);
    border-radius: 10px;
    background: var(--sab-neutral-6, #f5f8fc);
}

.tk-row[b-73d3zx2f24] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tk-lbl[b-73d3zx2f24] {
    width: 80px;
    min-width: 80px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sab-text);
}

.tk-row[b-73d3zx2f24]  .tk-ctl { flex: 1 1 280px; min-width: 0; }
.tk-row[b-73d3zx2f24]  .tk-date { width: 150px; }

.tk-btns[b-73d3zx2f24] {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.tk-head[b-73d3zx2f24] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sab-text);
}

.tk-count[b-73d3zx2f24] {
    background: #2a78d6;
    color: #fff;
    border-radius: 10px;
    padding: 0 8px;
    font-size: 11px;
    line-height: 18px;
}

.tk-late[b-73d3zx2f24] {
    background: #fdecea;
    color: #c0392b;
    border-radius: 10px;
    padding: 0 8px;
    font-size: 11px;
    line-height: 18px;
}

.tk-done[b-73d3zx2f24] {
    cursor: pointer;
    color: #1b7f3b;
    font-size: 17px;
}

    .tk-done:hover[b-73d3zx2f24] { color: #15803d; transform: scale(1.1); display: inline-block; }

.tk-wrap[b-73d3zx2f24]  .tk-overdue td { color: #c0392b; }

.tk-wrap[b-73d3zx2f24]  .tk-grid td {
    font-size: 12.5px;
    white-space: normal;
}

.tk-empty[b-73d3zx2f24] {
    text-align: center;
    font-size: 12px;
    color: var(--sab-text-muted, #6b7785);
    padding: 8px;
}

@media (max-width: 600px) {
    .tk-lbl[b-73d3zx2f24] { width: 100%; }
    .tk-btns[b-73d3zx2f24] { margin-left: 0; width: 100%; }
}

/* >>> BREAKPOINT - Status column (Pending / Complete) + status hint */
.tk-st[b-73d3zx2f24] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: .74rem;
    font-weight: 600;
}
.tk-st-p[b-73d3zx2f24] { background: #fff3cd; color: #8a6100; }
.tk-st-c[b-73d3zx2f24] { background: #d7f0df; color: #146c3a; }
.tk-hint[b-73d3zx2f24] { margin-left: auto; font-size: .72rem; opacity: .7; }
.tk-wrap[b-73d3zx2f24]  .tk-complete td { color: #6b7785; }
/* _content/ZabWebErp_dev/Components/SabErpAI/WebOrderPopup.razor.rz.scp.css */
/* ============================================================================
   WEB ORDER ENTRY popup
   ========================================================================= */

.wo[b-a68rixrcep] { display: flex; flex-direction: column; gap: 8px; }

.wo-form[b-a68rixrcep] {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e3e9f1;
    border-radius: 10px;
    /* >>> BREAKPOINT - panel safed, chamakdar, halki parchhai (pehle grey tha) */
    background: #ffffff;
    filter: brightness(1.04);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12), 0 1px 3px rgba(15, 23, 42, .08);
}

.wo-fields[b-a68rixrcep] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.wo-row[b-a68rixrcep] { display: flex; align-items: center; gap: 8px; }

    .wo-row label[b-a68rixrcep] {
        width: 60px;
        min-width: 60px;
        font-size: 13px;
        font-weight: 600;
        color: var(--sab-text);
    }

.wo-row[b-a68rixrcep]  .wo-ctl { flex: 1; min-width: 0; }

/* >>> BREAKPOINT - naya layout : ek line me do field */
/* >>> BREAKPOINT - perorder layout : Party | Design ,  Quality | Shade ,  Pcs Cut Qty Rate */
.wo-row label.wo-l2[b-a68rixrcep] { width: 52px; min-width: 52px; margin-left: 6px; }
.wo-shade[b-a68rixrcep] {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--sab-border);
    border-radius: 4px;
    background: var(--sab-bg);
    color: var(--sab-text);
    font-size: 13px;
}
    .wo-shade:disabled[b-a68rixrcep] { opacity: .6; }
.wo-nums[b-a68rixrcep] { display: flex; align-items: center; gap: 6px; }
    .wo-nums label[b-a68rixrcep] { width: auto; min-width: 0; margin-left: 4px; }
    .wo-nums label:first-child[b-a68rixrcep] { width: 60px; min-width: 60px; margin-left: 0; }
.wo-nums[b-a68rixrcep]  .wo-num { width: 64px; }
.wo-nums[b-a68rixrcep]  .wo-rate { width: 84px; }

.wo-info[b-a68rixrcep] { font-size: 12px; color: var(--sab-text); }
.wo-short[b-a68rixrcep] { color: #b91c1c; font-weight: 800; font-size: 17px; background: #fee2e2; padding: 1px 8px; border-radius: 6px; }   /* >>> BREAKPOINT - more than stock : bada + bold + laal patti */

.wo-img[b-a68rixrcep] {
    width: 150px;                 /* >>> BREAKPOINT - badi photo */
    min-width: 150px;
    height: 150px;
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .wo-img img[b-a68rixrcep] { width: 100%; height: 100%; object-fit: cover; display: block; }

.wo-noimg[b-a68rixrcep] { text-align: center; font-size: 11px; color: #94a3b8; }
    .wo-noimg i[b-a68rixrcep] { font-size: 30px; }

.wo-btns[b-a68rixrcep] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wo-tot[b-a68rixrcep] { margin-left: auto; font-size: 12px; color: var(--sab-text-muted, #6b7785); }

.wo-del[b-a68rixrcep] { cursor: pointer; color: #c0392b; }
.wo-edit[b-a68rixrcep] { cursor: pointer; color: #2a78d6; margin-right: 12px; }

/* ---------------------------------------------------------------- >>> design cards */
/* >>> BREAKPOINT - HERO strip : saare design EK row me, horizontal scroll, height fix */
.wo-dcards[b-a68rixrcep] {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 8px;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

    .wo-dcards[b-a68rixrcep]::-webkit-scrollbar { height: 6px; }
    .wo-dcards[b-a68rixrcep]::-webkit-scrollbar-thumb { background: #b9c7d8; border-radius: 3px; }

.wo-dcard[b-a68rixrcep] {
    flex: 0 0 112px;
    width: 112px;
    height: 116px;
    scroll-snap-align: start;
    background: var(--sab-bg);
    border: 1px solid var(--sab-border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

    .wo-dcard:hover[b-a68rixrcep] { transform: translateY(-2px); border-color: #2a78d6; box-shadow: 0 4px 10px rgba(42, 120, 214, .25); }
    .wo-dcard.sel[b-a68rixrcep] { border: 2px solid #2a78d6; background: #eaf2fc; }
    .wo-dcard.off[b-a68rixrcep] { cursor: default; opacity: .6; transform: none; }

.wo-dimg[b-a68rixrcep] {
    height: 70px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 22px;
}

    .wo-dimg img[b-a68rixrcep] { width: 100%; height: 100%; object-fit: cover; display: block; }

.wo-dname[b-a68rixrcep] { font-weight: 700; font-size: 12px; padding: 4px 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sab-text); }
.wo-dqty[b-a68rixrcep] { font-size: 11px; font-weight: 700; color: #1b7f3b; padding-bottom: 5px; }

@media (max-width: 640px) {
    .wo-form[b-a68rixrcep] { flex-direction: column-reverse; }
    .wo-img[b-a68rixrcep] { width: 100%; height: 140px; }
    .wo-row[b-a68rixrcep] { flex-wrap: wrap; }
    .wo-nums[b-a68rixrcep] { flex-wrap: wrap; width: 100%; }
    .wo-row label.wo-l2[b-a68rixrcep] { margin-left: 0; width: 60px; min-width: 60px; }
}

/* ---------------------------------------------------------------- >>> mic + focus + pdf viewer */
.wo-fld[b-a68rixrcep] { display: inline-flex; border-radius: 5px; }
.wo-fld.foc[b-a68rixrcep] { box-shadow: 0 0 0 2px rgba(42, 120, 214, .45); }

.wo-mic[b-a68rixrcep] {
    width: 36px;
    min-width: 36px;
    height: 32px;
    border: 1px solid var(--sab-border);
    border-radius: 8px;
    background: var(--sab-bg);
    color: #2a78d6;
    cursor: pointer;
}

    .wo-mic.on[b-a68rixrcep] {
        background: #c0392b;
        border-color: #c0392b;
        color: #fff;
        animation: wopulse-b-a68rixrcep 1.2s infinite;
    }

@keyframes wopulse-b-a68rixrcep {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .5); }
    50% { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); }
}

.wo-heard[b-a68rixrcep] {
    font-size: 12px;
    font-style: italic;
    color: var(--sab-text-muted, #6b7785);
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wo-pdf[b-a68rixrcep] { display: flex; flex-direction: column; gap: 8px; height: calc(min(760px, 94vh) - 90px); }
/* >>> BREAKPOINT - mobile par app ke andar PDF viewer */
[b-a68rixrcep] .wo-pdfview-dx { flex: 1; width: 100%; min-height: 360px; height: 100%; border: 1px solid var(--sab-border); border-radius: 6px; }
.wo-pdfhint[b-a68rixrcep] { font-size: 11px; opacity: .7; margin-top: 2px; }
.wo-pdfview[b-a68rixrcep] { flex: 1; width: 100%; min-height: 300px; border: 1px solid var(--sab-border); border-radius: 6px; background: #fff; }

/* ---------------------------------------------------------------- >>> barcode */
.wo-scan[b-a68rixrcep] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px;
}

    .wo-scan > i[b-a68rixrcep] { color: var(--sab-text); font-size: 18px; }

.wo-scanin[b-a68rixrcep] {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--sab-border);
    border-radius: 6px;
    background: var(--sab-bg);
    color: var(--sab-text);
    font-size: 13px;
}

    .wo-scanin:focus[b-a68rixrcep] { outline: none; border-color: #2a78d6; }

.wo-scanbtn[b-a68rixrcep] {
    width: 36px;
    min-width: 36px;
    height: 30px;
    border: 1px solid var(--sab-border);
    border-radius: 6px;
    background: var(--sab-bg);
    color: #2a78d6;
    cursor: pointer;
}

    .wo-scanbtn.on[b-a68rixrcep] { background: #c0392b; border-color: #c0392b; color: #fff; }

.wo-cam[b-a68rixrcep] {
    position: relative;
    height: 200px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

    .wo-cam video[b-a68rixrcep] { width: 100%; height: 100%; object-fit: cover; display: block; }

.wo-cam-line[b-a68rixrcep] {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 2px;
    background: #e53935;
    box-shadow: 0 0 6px #e53935;
}

/* >>> photo na ho : ZabWebERP.png poora dikhe (kate nahi) */
.wo-img img.nophoto[b-a68rixrcep], .wo-dimg img.nophoto[b-a68rixrcep] { object-fit: contain; background: #fff; padding: 4px; }

/* >>> BREAKPOINT - side wali photo click = badi */
.wo-img[b-a68rixrcep] { cursor: zoom-in; }
.wo-zoom[b-a68rixrcep] {
    width: 100%;
    height: calc(94vh - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    background: #111827;
    border-radius: 8px;
}
    .wo-zoom img[b-a68rixrcep] { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* >>> BREAKPOINT - Save button Rate ke aage */
.wo-nums[b-a68rixrcep]  .wo-savebtn { margin-left: 6px; white-space: nowrap; }

/* >>> BREAKPOINT - MOBILE PDF : iframe ki jagah sandesh (Download / Share upar) */
.wo-pdfmobile[b-a68rixrcep] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 200px;
    padding: 16px;
    text-align: center;
    font-size: 14px;
    color: var(--sab-text);
    border: 1px dashed var(--sab-border);
    border-radius: 8px;
}

    .wo-pdfmobile i[b-a68rixrcep] {
        font-size: 44px;
        color: #c62828;
    }
/* _content/ZabWebErp_dev/Components/Setup/SabWebErpSetup.razor.rz.scp.css */
/* >>> BREAKPOINT - ERP Setup */
.es[b-el5fn47ugy] { display: flex; flex-direction: column; gap: 8px; height: 100%; font-size: 13px; }
.es-bar[b-el5fn47ugy] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px; background: #f3f6fb; border: 1px solid #dfe5ef; border-radius: 8px; }
.es-bar label[b-el5fn47ugy] { font-weight: 600; color: #123372; }
.es-btn[b-el5fn47ugy] { height: 30px; padding: 0 14px; border: 1px solid #123372; background: #fff; color: #123372; border-radius: 6px; cursor: pointer; font-weight: 600; }
.es-btn.es-mainbtn[b-el5fn47ugy] { background: #123372; color: #fff; }
.es-btn:disabled[b-el5fn47ugy] { opacity: .5; cursor: default; }
.es-link[b-el5fn47ugy] { border: none; background: none; color: #2a78d6; cursor: pointer; padding: 0 4px; text-decoration: underline; }
.es-note[b-el5fn47ugy] { color: #5b6472; }
.es-busy[b-el5fn47ugy] { color: #b26b00; font-weight: 600; }
.es-msg[b-el5fn47ugy] { padding: 8px 10px; border-radius: 6px; }
.es-msg.ok[b-el5fn47ugy] { background: #e8f6ee; color: #16683a; }
.es-msg.err[b-el5fn47ugy] { background: #fdecec; color: #a32020; }
.es-pick[b-el5fn47ugy] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.es-sel[b-el5fn47ugy] { color: #1baf7a; font-weight: 600; }
/* left tree (User Rights jaisa) */
.es-search[b-el5fn47ugy] { height: 30px; border: 1px solid #c9d2e0; border-radius: 6px; padding: 0 8px; }
.es-tree[b-el5fn47ugy] { height: 415px; overflow: auto; border: 1px solid #dfe5ef; border-radius: 6px; }
.es-ttable[b-el5fn47ugy] { width: 100%; border-collapse: collapse; font-size: 13px; }
.es-ttable th[b-el5fn47ugy] { position: sticky; top: 0; background: #f3f6fb; color: #123372; text-align: left; padding: 6px 8px; border-bottom: 1px solid #dfe5ef; z-index: 1; }
.es-ttable td[b-el5fn47ugy] { padding: 4px 8px; border-bottom: 1px solid #f0f2f6; white-space: nowrap; }
.es-ttable input[type=checkbox][b-el5fn47ugy] { margin-right: 6px; vertical-align: middle; }
.es-tgroup td[b-el5fn47ugy] { background: #eef3fb; font-weight: 700; color: #123372; }
.es-tchild[b-el5fn47ugy] { padding-left: 34px !important; }
.es-tog[b-el5fn47ugy] { display: inline-block; width: 16px; cursor: pointer; user-select: none; }
.es-hchk[b-el5fn47ugy] { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; margin: 0; }
.es-main[b-el5fn47ugy] { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; min-height: 0; flex: 1; }
.es-pane[b-el5fn47ugy] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* grid ki height : pager nahi, scroll. Header + filter row + n rows (ek row ~34px) */
[b-el5fn47ugy] .es-h3 { height: 175px; }     /* Source / Target : 3 rows */
[b-el5fn47ugy] .es-h10 { height: 415px; }    /* Source objects / To target : 10 rows */
.es-head[b-el5fn47ugy] { font-weight: 700; color: #123372; display: flex; align-items: center; gap: 8px; }
/* >>> BREAKPOINT - source fix box + Done button */
.es-srcbox[b-el5fn47ugy] { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid #dfe5ef; border-radius: 6px; background: #f8fafd; }
.es-done[b-el5fn47ugy] { margin-left: auto; }
.es-confirm[b-el5fn47ugy] { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }

@media (max-width: 900px) {
    .es-main[b-el5fn47ugy], .es-pick[b-el5fn47ugy] { grid-template-columns: 1fr; }
}

/* >>> BREAKPOINT - ERRORS popup (notepad jaisa) */
.es-errbtn[b-el5fn47ugy] { border-color: #a32020; color: #a32020; }
.es-errwrap[b-el5fn47ugy] { display: flex; flex-direction: column; gap: 8px; }
.es-errtext[b-el5fn47ugy] { width: 100%; height: 65vh; resize: vertical; font-family: Consolas, 'Courier New', monospace; font-size: 12px;
              line-height: 1.45; padding: 10px; border: 1px solid #c9d2e0; border-radius: 6px; background: #fffef8; color: #1f2937; white-space: pre; }
/* _content/ZabWebErp_dev/Components/Shared/SabEntRibbon.razor.rz.scp.css */
.sab-toolbar[b-cc3g92jm2l] {
    display:none;
}
.sab-ribbon[b-cc3g92jm2l] {
    border-radius: 10px;
    padding: 1px;
    margin: 5px;
 
}


    /* >>> BREAKPOINT - ribbon = LEFT MENU ka rang (har theme me --sab-menu-*) */
    .sab-ribbon button[b-cc3g92jm2l] {
        background: var(--sab-menu-bg) !important;
        color: #ffffff !important;
        border: 1px solid var(--sab-menu-border) !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,.12);
    }


        .sab-ribbon button:hover[b-cc3g92jm2l] {
            background: var(--sab-menu-hover) !important;
        }

    .sab-ribbon .dxbl-btn[b-cc3g92jm2l] {
        background: var(--sab-menu-bg) !important;
        color: #ffffff !important;
    }


    .sab-ribbon .sab-print-running[b-cc3g92jm2l] {
        background: var(--sab-primary) !important;
        background-image: none !important;
        color: white !important;
    }

        .sab-ribbon .sab-print-running .dxbl-btn-icon[b-cc3g92jm2l],
        .sab-ribbon .sab-print-running svg[b-cc3g92jm2l] {
            color: white !important;
        }

    .sab-ribbon.sab-print-wait[b-cc3g92jm2l],
    .sab-ribbon.sab-print-wait *[b-cc3g92jm2l] {
        cursor: wait !important;
    }


/* =========================================================================
   >>> BREAKPOINT - RIBBON ICONS COLOURFUL
   Pehle sab icon ek hi text colour me the. Ab har kaam ka apna rang:
   original / pehchane jaane wale brand colours (WhatsApp green, Telegram
   blue, Gmail red...). Text waisa hi rehta hai, sirf icon rangeen hota hai.
   ::deep isliye ki DxToolbar apna markup khud render karta hai.
   ========================================================================= */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn .fa-magnifying-glass { color:#1e88e5 !important; }  /* Find    - blue   */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn .fa-plus             { color:#2e7d32 !important; }  /* New     - green  */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn .fa-pen-to-square    { color:#f9a825 !important; }  /* Edit    - amber  */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn .fa-floppy-disk      { color:#0277bd !important; }  /* Save    - blue   */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn .fa-xmark            { color:#757575 !important; }  /* Cancel  - grey   */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn .fa-trash            { color:#d32f2f !important; }  /* Delete  - red    */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn .fa-rotate-right     { color:#00897b !important; }  /* Refresh - teal   */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn .fa-print            { color:#37474f !important; }  /* Print   - slate  */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn .fa-file-invoice     { color:#5e35b1 !important; }  /* Print1  - purple */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn .fa-envelope         { color:#c62828 !important; }  /* Email   - red    */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn .fa-whatsapp         { color:#25D366 !important; }  /* WhatsApp brand   */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn .fa-telegram         { color:#229ED9 !important; }  /* Telegram brand   */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn .fa-barcode          { color:#212121 !important; }  /* Barcode - black  */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn .fa-paperclip        { color:#6d4c41 !important; }  /* Attach  - brown  */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn .fa-wand-magic-sparkles { color:#8e24aa !important; } /* AI    - violet */

/* hover / disabled par rang na bigde */
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn:hover i[class*="fa-"] { filter: brightness(.9); }

.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn:disabled i[class*="fa-"],
.sab-ribbon[b-cc3g92jm2l]  .dxbl-btn[aria-disabled="true"] i[class*="fa-"] {
    color: var(--sab-text-muted, #9e9e9e) !important;
    filter: grayscale(1);
}

/* print chalte waqt wala safed icon rule upar wale rango se upar rehna chahiye */
.sab-ribbon[b-cc3g92jm2l]  .sab-print-running i[class*="fa-"] { color:#fff !important; }

/* >>> BREAKPOINT - MOBILE : entry ke icon (Find / New / Save ...) thode door-door */
@media (max-width: 768px) {
    .sab-ribbon[b-cc3g92jm2l]  .dxbl-btn {
        margin: 3px 6px !important;
    }
}
/* _content/ZabWebErp_dev/Components/Support/SabSupportPopup.razor.rz.scp.css */
/* >>> BREAKPOINT - Support popup (email jaisa) */
.sp[b-l3jhbl4376] { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.sp-mail[b-l3jhbl4376] { border: 1px solid #dfe5ef; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: #fbfcfe; }
.sp-row[b-l3jhbl4376] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-lbl[b-l3jhbl4376] { color: #5b6472; min-width: 44px; }
.sp-to[b-l3jhbl4376] { margin-left: 18px; }
.sp-in[b-l3jhbl4376] { height: 30px; border: 1px solid #c9d2e0; border-radius: 6px; padding: 0 8px; width: 170px; }
.sp-mailin[b-l3jhbl4376] { width: 260px; }
.sp-query[b-l3jhbl4376] { width: 100%; border: 1px solid #c9d2e0; border-radius: 6px; padding: 8px; resize: vertical; font: inherit; }
.sp-foot[b-l3jhbl4376] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid #e3e7ee; border-bottom: 1px solid #e3e7ee; padding: 8px 0; }
.sp-btn[b-l3jhbl4376] { height: 32px; padding: 0 16px; border: 1px solid #123372; background: #fff; color: #123372; border-radius: 6px; cursor: pointer; font-weight: 600; }
.sp-btn.sp-save[b-l3jhbl4376] { background: #123372; color: #fff; }
.sp-btn:disabled[b-l3jhbl4376] { opacity: .5; cursor: default; }
.sp-tk[b-l3jhbl4376] { margin-left: auto; }
.sp-msg[b-l3jhbl4376] { padding: 8px 10px; border-radius: 6px; }
.sp-msg.ok[b-l3jhbl4376] { background: #e8f6ee; color: #16683a; }
.sp-msg.err[b-l3jhbl4376] { background: #fdecec; color: #a32020; }
.sp-hist-head[b-l3jhbl4376] { font-weight: 700; color: #123372; }
/* >>> BREAKPOINT - approval : Send / Reject (grid me chhote button) */
.sp-btn.sp-mini[b-l3jhbl4376] { height: 24px; padding: 0 8px; font-size: 12px; margin-right: 4px; }
.sp-btn.sp-rej[b-l3jhbl4376] { border-color: #a32020; color: #a32020; }
/* _content/ZabWebErp_dev/Components/Support/SabSupportPopup_solutions.razor.rz.scp.css */
/* >>> BREAKPOINT - Support Solutions */
.ss[b-v7taq81tm0] { display: flex; flex-direction: column; gap: 8px; height: 100%; font-size: 13px; }
.ss-bar[b-v7taq81tm0] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px; background: #f3f6fb; border: 1px solid #dfe5ef; border-radius: 8px; }
.ss-bar select[b-v7taq81tm0], .ss-acts select[b-v7taq81tm0] { height: 30px; border: 1px solid #c9d2e0; border-radius: 6px; padding: 0 6px; }
.ss-me[b-v7taq81tm0] { font-weight: 600; color: #123372; }
.ss-time[b-v7taq81tm0] { margin-left: auto; color: #5b6472; }
.ss-btn[b-v7taq81tm0] { height: 30px; padding: 0 14px; border: 1px solid #123372; background: #fff; color: #123372; border-radius: 6px; cursor: pointer; font-weight: 600; }
.ss-btn.ss-main[b-v7taq81tm0] { background: #123372; color: #fff; }
.ss-btn:disabled[b-v7taq81tm0] { opacity: .5; cursor: default; }
.ss-d[b-v7taq81tm0] { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.ss-dgrid[b-v7taq81tm0] { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; }
.ss-dgrid span[b-v7taq81tm0] { color: #5b6472; }
.ss-query[b-v7taq81tm0] { white-space: pre-wrap; padding: 8px 10px; background: #fbfcfe; border: 1px solid #dfe5ef; border-radius: 6px; }
.ss-acts[b-v7taq81tm0] { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ss-lbl[b-v7taq81tm0] { font-weight: 700; color: #123372; }
.ss-sol[b-v7taq81tm0] { width: 100%; border: 1px solid #c9d2e0; border-radius: 6px; padding: 8px; font: inherit; resize: vertical; }
.ss-ai[b-v7taq81tm0] { padding: 8px 10px; border: 1px dashed #c9d2e0; border-radius: 6px; color: #5b6472; }
.ss-msg[b-v7taq81tm0] { padding: 8px 10px; border-radius: 6px; }
.ss-msg.ok[b-v7taq81tm0] { background: #e8f6ee; color: #16683a; }
.ss-msg.err[b-v7taq81tm0] { background: #fdecec; color: #a32020; }
.ss-log[b-v7taq81tm0] { max-height: 180px; overflow: auto; border: 1px solid #eef1f6; border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
/* _content/ZabWebErp_dev/Components/User/SabDealerPopup.razor.rz.scp.css */
/* >>> BREAKPOINT - Dealer Setup popup : andar ka page scroll ho, popup screen se bahar na jaye */
.dlp-body[b-sbgvfotxgq] { max-height: 80vh; overflow: auto; }
/* _content/ZabWebErp_dev/Components/User/SabTutorialPopup.razor.rz.scp.css */
/* ============================================================================
   TUTORIAL popup - 4 video card + player
   ========================================================================= */

.tut-wrap[b-tw1tmmkqmd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tut-list[b-tw1tmmkqmd] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.tut-card[b-tw1tmmkqmd] {
    cursor: pointer;
    border: 1px solid var(--sab-border);
    border-radius: 10px;
    padding: 6px;
    background: var(--sab-bg);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    min-width: 0;
}

    .tut-card:hover[b-tw1tmmkqmd] {
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(15,23,42,.15);
    }

    .tut-card.on[b-tw1tmmkqmd] {
        border-color: #2a78d6;
        box-shadow: 0 0 0 2px rgba(42,120,214,.35);
    }

.tut-thumb[b-tw1tmmkqmd] {
    position: relative;
    border-radius: 7px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #0d47a1;
}

    .tut-thumb img[b-tw1tmmkqmd] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.tut-play[b-tw1tmmkqmd] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: rgba(255,255,255,.92);
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

.tut-dur[b-tw1tmmkqmd] {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: 11px;
}

.tut-name[b-tw1tmmkqmd] {
    margin-top: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sab-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tut-sub[b-tw1tmmkqmd] {
    font-size: 11px;
    color: var(--sab-text-muted, #6b7785);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tut-player[b-tw1tmmkqmd] {
    background: #0b1220;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    max-height: calc(92vh - 260px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tut-video[b-tw1tmmkqmd] {
    width: 100%;
    height: 100%;
    background: #000;
    display: block;
}

.tut-now[b-tw1tmmkqmd] {
    position: absolute;
    left: 10px;
    top: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 12px;
    pointer-events: none;
}

.tut-empty[b-tw1tmmkqmd] {
    color: #c7d2e3;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tut-empty i[b-tw1tmmkqmd] { font-size: 26px; color: #ffd666; }

@media (max-width: 700px) {
    .tut-list[b-tw1tmmkqmd] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* >>> BREAKPOINT - LANGUAGE tick (English / Hindi / Marathi) */
.tut-lang[b-tw1tmmkqmd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 13px;
    color: var(--sab-text);
}

.tut-lang-cap[b-tw1tmmkqmd] {
    font-weight: 700;
}

.tut-lang-opt[b-tw1tmmkqmd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid var(--sab-border);
    border-radius: 14px;
    cursor: pointer;
    user-select: none;
}

    .tut-lang-opt.on[b-tw1tmmkqmd] {
        border-color: #2a78d6;
        background: rgba(42,120,214,.10);
        font-weight: 600;
    }

    .tut-lang-opt input[b-tw1tmmkqmd] {
        margin: 0;
        cursor: pointer;
    }

.tut-miss[b-tw1tmmkqmd] {
    position: absolute;
    right: 10px;
    top: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(214,120,42,.85);
    color: #fff;
    font-size: 12px;
    pointer-events: none;
}