body.light .form-control::placeholder, input::placeholder, textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 0.9;
}

    /*------------------------------------------------------------*/
    /* ✅ OUTER wrapper for ValidationResults + SmartGrid layout */
    .smartgrid-with-validation {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .smartgrid-validation-panel {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-width: 0px;
        max-width: 400px;
        background: var(--sf-subtle, #f8f9fa);
        border-right: 1px solid var(--bd, #dee2e6);
        overflow: hidden;
        flex-shrink: 0;
    }

    .smartgrid-main-container {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-width: 0;
        flex-grow: 1;
    }
    /*------------------------------------------------------------*/


    fluent-combobox::part(listbox) {
        z-index: 9999;
    }

    .smartgrid-left-block {
        height: calc(100vh - 158px) !important;
    }

    .validation-panel {
        /*  height: calc(100vh - 161px) !IMPORTANT;*/
        min-width: 0;
        transition: width 0.3s ease, opacity 0.3s ease;
        display: flex;
        flex-direction: column;
        height: 100%;
    }


    .spinner-xs {
        width: 0.75rem;
        height: 0.75rem;
        border-width: 0.15em;
    }

    .primary-left-border {
        border-left: 2px solid var(--theme-default);
        border-radius: 5px;
    }

    .alert-warning {
        background-color: rgb(228 156 11);
    }

    .overlay-window {
        width: 400px;
    }

    .overlay-wait {
        background: #eeeeee87 !important;
        z-index: 1081 !important;
    }

    @media (min-width: 1270px) {
        .cmn-modal-dialog {
            --bs-modal-width: 95% !important;
        }
    }

    .ff-inter {
        font-family: var(--spq-font-family, 'Inter', sans-serif) !important;
    }

    .cmn-modal-dialog > .modal-content {
        min-height: 400px;
    }

    .cmn-modal-body {
        min-height: 292px;
    }

    /* ===========================================================
       SmartGrid toolbar (sheet-header / smartgrid-header / search pill /
       filter triggers / action-button rail)
       ⟶ MOVED to /css/smartgrid-toolbar.css, which loads after this file.
       Keep all toolbar styling there so there is a single source of truth.
       =========================================================== */

    .grid-paging-status {
        border-left: 1px solid var(--bd, #e6e8ee);
        padding-left: .75rem;
        flex-shrink: 0;
    }

    /* Slim, modern pager strip — fixed chip on the right, single line, never
       wraps or gets squeezed by the button/search scroller next to it. */
    .spq-pager-bar {
        display: flex;
        align-items: center;
        gap: .5rem;
        flex-shrink: 0;
        margin-left: auto;
        background: var(--sf-subtle, #f4f5f8);
        border-radius: 10px;
        padding: .2rem .55rem;
        white-space: nowrap;
    }

    /* Page-size select stacked directly above the row-range count — the
       paging buttons themselves stay untouched in their own block. */
    .spq-pager-bar-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        line-height: 1.15;
    }

    .spq-pager-bar-size {
        font-size: .68rem !important;
        padding: 0 1rem 0 0 !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
        border: none !important;
        background-color: transparent !important;
        color: var(--tc-text, #334155);
        font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
        cursor: pointer;
    }

    .spq-pager-bar-nav {
        display: flex;
        align-items: center;
        gap: .05rem;
        border-left: 1px solid var(--bd, #dde1ea);
        padding-left: .5rem;
    }

    .spq-pager-bar-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--tc-muted, #64748b);
        font-size: .62rem;
        transition: background .12s ease, color .12s ease;
    }

        .spq-pager-bar-btn:hover:not(:disabled) {
            background: var(--sf-raised, #e6e8ee);
            color: #334155;
        }

        .spq-pager-bar-btn:disabled {
            opacity: .35;
            cursor: default;
        }

    .spq-pager-bar-page {
        font-size: .72rem;
        font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
        color: var(--tc-text, #334155);
        padding: 0 .2rem;
    }

    .spq-pager-bar-sep {
        color: var(--tc-faint, #9aa5b8);
        margin: 0 .1rem;
        font-weight: clamp(1, calc(400 + var(--spq-fw-delta, 0)), 1000);
    }

    .spq-pager-bar-count {
        font-size: .62rem;
        color: var(--tc-muted, #8a94a8);
    }

    /* Standalone slim pager shown at whichever end (top/bottom) of the grid
       does NOT currently hold the full toolbar, so paging is always reachable
       on the right without scrolling back to the other end. */
    .smartgrid-mini-pager {
        display: flex;
        justify-content: flex-end;
        padding: .3rem .7rem;
    }

    /* ===========================================================
       SpqPopover — custom popover / bottom-sheet used by the SmartGrid
       toolbar (advanced search, date-range filter). Replaces FluentPopover.

       The layer carries popover="manual" and is promoted to the browser's
       TOP LAYER by SpqPopover.js, so no toolbar/grid overflow, transform or
       z-index can ever clip it. On phones/tablets the same markup renders
       as a native-feel bottom sheet.
       =========================================================== */
    .spq-pop-layer {
        /* reset the UA styles applied to [popover] elements */
        position: fixed;
        inset: 0;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        overflow: visible;
        z-index: 1090;
    }

    .spq-pop__backdrop {
        position: fixed;
        inset: 0;
        background: transparent;
    }

    .spq-pop {
        position: fixed;
        display: flex;
        flex-direction: column;
        width: min(var(--spq-pop-w, 480px), calc(100vw - 16px));
        max-height: min(80vh, calc(100vh - 16px));
        background: var(--bs-body-bg, #fff);
        color: var(--bs-body-color, #1f2937);
        border: 1px solid rgba(15,23,42,.08);
        border-radius: 14px;
        box-shadow: 0 14px 44px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.08);
        overflow: hidden;
        outline: none;
        animation: spq-pop-in .13s ease-out;
    }

    @keyframes spq-pop-in {
        from {
            opacity: 0;
            transform: translateY(-6px) scale(.985);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    /* Drag-handle bar — only meaningful in sheet mode */
    .spq-pop__grip {
        display: none;
    }

    .spq-pop__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .6rem .9rem;
        border-bottom: 1px solid rgba(15,23,42,.08);
        background: rgba(15,23,42,.02);
        flex: 0 0 auto;
    }

    .spq-pop__title {
        margin: 0;
        font-size: .95rem;
        font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    }

    .spq-pop__close {
        flex: 0 0 auto;
    }

    .spq-pop__body {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: .75rem .9rem;
    }

    .spq-pop__footer {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .5rem;
        padding: .6rem .9rem;
        border-top: 1px solid rgba(15,23,42,.08);
        background: rgba(15,23,42,.02);
    }

    /* ---- Bottom sheet (phones / small tablets) ---------------- */
    /* .spq-pop--sheet is stamped by SpqPopover.js; the media query is a
       belt-and-braces fallback if JS positioning never ran. */
    .spq-pop.spq-pop--sheet {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 88vh !important;
        border-radius: 18px 18px 0 0 !important;
        border-bottom: 0;
        animation: spq-sheet-up .2s cubic-bezier(.22,.61,.36,1);
    }

        .spq-pop.spq-pop--sheet .spq-pop__grip {
            display: block;
            width: 40px;
            height: 4px;
            margin: .5rem auto .1rem;
            border-radius: 999px;
            background: rgba(15,23,42,.18);
            flex: 0 0 auto;
        }

        .spq-pop.spq-pop--sheet .spq-pop__body {
            padding: .85rem 1rem;
        }

        .spq-pop.spq-pop--sheet .spq-pop__footer {
            padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
        }

            /* Full-width, thumb-friendly action buttons in sheet mode */
            .spq-pop.spq-pop--sheet .spq-pop__footer > .btn {
                flex: 1 1 0;
                min-height: 44px;
            }

    @keyframes spq-sheet-up {
        from {
            transform: translateY(100%);
        }

        to {
            transform: none;
        }
    }

    /* Dim the page behind the sheet, and stop it scrolling underneath */
    html.spq-pop-lock {
        overflow: hidden;
    }

        html.spq-pop-lock .spq-pop__backdrop {
            background: rgba(15,23,42,.45);
            animation: spq-fade-in .18s ease-out;
        }

    @keyframes spq-fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* ---- Dark theme (body.dark-only, set by appearance.js) ---------
       The layer is promoted to the top layer for painting only — it is
       still a DOM descendant of <body>, so these selectors apply. */
    body.dark-only .spq-pop {
        background: var(--sf-card, #14213f);
        color: var(--tcd-strong, #d4ddef);
        border-color: var(--bd, #26365c);
        box-shadow: 0 14px 44px rgba(0,0,0,.55);
    }

    body.dark-only .spq-pop__header,
    body.dark-only .spq-pop__footer {
        background: rgba(255,255,255,.03);
        border-color: var(--bd, #26365c);
    }

    body.dark-only .spq-pop__title {
        color: var(--tcd-strong, #eaf0fb);
    }

    body.dark-only .spq-pop .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    body.dark-only .spq-pop .form-select,
    body.dark-only .spq-pop .form-control {
        background-color: var(--sf-raised, #1d2b4d);
        border-color: var(--bd, #26365c);
        color: var(--tcd-strong, #d4ddef) !important;
    }

    body.dark-only .spq-pop .border,
    body.dark-only .spq-pop .alert-light {
        background-color: rgba(255,255,255,.02);
        border-color: var(--bd, #26365c) !important;
        color: var(--tcd-strong, #d4ddef);
    }

    body.dark-only .spq-pop--sheet .spq-pop__grip {
        background: rgba(255,255,255,.28);
    }

    @media (max-width: 768px) {
        .spq-pop {
            left: 0 !important;
            right: 0 !important;
            top: auto !important;
            bottom: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            max-height: 88vh !important;
            border-radius: 18px 18px 0 0 !important;
        }

        /* Comfortable tap targets inside the sheet */
        .spq-pop .form-select,
        .spq-pop .form-control {
            min-height: 40px;
            font-size: .95rem;
        }

        .spq-pop .btn {
            min-height: 40px;
        }

        /* Phone layout for the SmartGrid toolbar lives in
           /css/smartgrid-toolbar.css (loaded after this file). */
    }
    /* ===========================
   CompanyMaster New – Compact Modal UI
   Cuba Theme + Bootstrap 5.3
   =========================== */
    /* Compact modal sizing */
    .modal-dialog {
        /* max-width: 850px !important;*/
        margin: 0.5rem auto;
    }

    .modal-content {
        border-radius: 10px;
        border: 1px solid var(--bd, #e2e8f0);
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
    }

    .tiny-select {
        font-size: 13px !important;
        width: auto;
        max-width: 140px;
        background: transparent !important;
        cursor: pointer;
        text-align: center !important;
        border-top: 1px solid gray !important;
    }
    /* ---------- Modal Header ---------- */
    .cmn-modal-header {
        /* background: linear-gradient(135deg, var(--primary-theme, #4b5cff) 0%, #3a4ae4 100%);
    color: #fff;*/
        padding: 0.5rem 0.8rem;
        border-bottom: none;
        border-radius: 9px 9px 0 0;
        position: relative;
    }

        .cmn-modal-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: rgba(255, 255, 255, 0.2);
        }

        .cmn-modal-header .modal-title {
            font-family: var(--spq-font-family, 'Inter', sans-serif);
            font-size: 0.9rem;
            font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
            letter-spacing: 0.2px;
        }
    /* ---------- Modal Body ---------- */
    .cmn-modal-body {
        padding: 0.6rem 0.8rem;
        font-family: var(--spq-font-family, 'Roboto', sans-serif);
        font-weight: clamp(1, calc(400 + var(--spq-fw-delta, 0)), 1000);
        font-size: 0.82rem;
        background: var(--light-background);
        max-height: 80vh;
        overflow-y: auto;
    }
        /* Custom scrollbar for modal body */
        .cmn-modal-body::-webkit-scrollbar {
            width: 4px;
        }

        .cmn-modal-body::-webkit-scrollbar-track {
            background: var(--sf-subtle, #f1f5f9);
        }

        .cmn-modal-body::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 2px;
        }
    /* ---------- Cards ---------- */
    .card {
        border-radius: 8px;
        border: 1px solid var(--bd, #e2e8f0);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        margin-bottom: 0.6rem;
        background: var(--sf-card, #fff);
        transition: box-shadow 0.2s ease;
    }

        .card:hover {
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
        }

    .card-header {
        /* background: linear-gradient(to right, #f8faff, #f0f4ff);*/
        border-bottom: 1px solid var(--bd, #e2e8f0);
        font-size: 0.83rem;
        font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
        color: var(--tc-text, #475569);
        padding: 0.4rem 0.7rem;
        border-radius: 8px 8px 0 0 !important;
        font-family: var(--spq-font-family, 'Inter', sans-serif) !important;
        border-top: 1px solid var(--theme-default);
    }

    .card-body {
        padding: 0.5rem 0.7rem;
    }
    /* ---------- Form Elements ---------- */
    .form-label {
        font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
        font-size: 0.78rem;
        /*  color: #475569;*/
        font-family: var(--spq-font-family, 'Roboto', sans-serif) !important;
        margin-bottom: 0.08rem;
    }
    /*  Themes specific custom rules*/

    body.dark-only .form-control {
        color: var(--tcd-muted, #b2abab) !important;
    }

    body.dark-only .card-header {
        color: var(--theme-text, var(--theme-default)) !important;
    }

    body.dark-only .form-check-input {
        background: #c4c4c4;
    }

    body.dark-only .form-check-label {
        color: var(--tcd-text, #c4c4c4);
    }

    body.dark-only {
        --neutral-fill-input-rest: #1d1e26;
        --neutral-foreground-rest: #b2abab;
    }
    /* Compact spacing */
    .cmn-modal-body .mb-2 {
        margin-bottom: 0.35rem !important;
    }

    .cmn-modal-body .mt-1 {
        margin-top: 0.2rem !important;
    }
    /* Tight grid gutters */
    .cmn-modal-body .row.g-2 {
        --bs-gutter-x: 0.6rem;
        --bs-gutter-y: 0.4rem;
    }
    /* Form controls */
    .form-control,
    .form-select {
        color: var(--app-input-ink, #111827) !important; /* neutral ink — typed values are data, not accent */
        border-radius: 6px;
        padding: 0.3rem 0.5rem;
        border: 1px solid var(--bd, #d1d5db);
        font-family: var(--spq-font-family, 'Roboto', sans-serif);
        font-size: 0.82rem;
        font-weight: clamp(1, calc(500 + var(--spq-fw-delta, 0)), 1000);
        background: var(--sf-card, #fff);
        transition: all 0.2s ease;
    }

    .form-control-sm {
        font-size: .775rem !important;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary-theme, #4b5cff);
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        background: var(--sf-card, #fff);
    }
    /* GSTIN special styling */
    input.text-uppercase {
        font-family: 'Roboto Mono', monospace;
        letter-spacing: 0.5px;
        font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
        background: var(--sf-subtle, #fefce8);
        border-color: #f59e0b;
    }
    /* Checkboxes */
    .form-check-input {
        width: 0.9rem;
        height: 0.9rem;
        margin-top: 0.15rem;
        border-radius: 3px;
        border: 1px solid var(--bd, #d1d5db);
    }

        .form-check-input:checked {
            background-color: var(--primary-theme, #4b5cff);
            border-color: var(--primary-theme, #4b5cff);
        }

    .form-check-label {
        font-size: 0.8rem;
        color: var(--tc-text, #475569);
    }
    /* Validation */
    .validation-summary-errors {
        font-size: 0.78rem;
        padding: 0.4rem 0.6rem;
        border-radius: 6px;
        margin-bottom: 0.5rem;
    }
    /* ---------- Modal Footer ---------- */
    .cmn-modal-footer {
        padding: 0.5rem 0.8rem;
        border-top: 1px solid var(--bd, #f1f5f9);
        /* background: #fafbff;*/
        border-radius: 0 0 9px 9px;
    }

        .cmn-modal-footer .btn {
            padding: 0.3rem 1rem;
            border-radius: 6px;
            font-family: var(--spq-font-family, 'Roboto', sans-serif);
            font-size: 0.82rem;
            font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
            transition: all 0.2s ease;
        }
        /* Secondary button */
        .cmn-modal-footer .btn-secondary {
            background: #64748b;
            border-color: #64748b;
            color: white;
        }

            .cmn-modal-footer .btn-secondary:hover {
                background: #475569;
                border-color: #475569;
            }
        /* Primary button */
        .cmn-modal-footer .btn-primary {
            background: var(--primary-theme, #4b5cff);
            border-color: var(--primary-theme, #4b5cff);
            box-shadow: 0 1px 3px rgba(79, 70, 229, 0.3);
        }

            .cmn-modal-footer .btn-primary:hover {
                background: var(--theme-secondary);
                border-color: var(--theme-secondary);
                transform: translateY(-1px);
                box-shadow: 0 2px 5px rgba(79, 70, 229, 0.4);
            }
    /* Loading spinner */
    .spinner-border {
        width: 1.2rem;
        height: 1.2rem;
        border-width: 0.15em;
    }
    /* Required field asterisk */
    .text-danger {
        color: color-mix(in srgb, #ef4444 var(--ink-keep, 100%), var(--ink-flip, #ef4444)) !important;
        font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000);
    }
    /* Compact card sections */
    .card .card-body .row {
        margin-bottom: 0.2rem;
    }
    /* Reduce vertical space in form groups */
    .form-group {
        margin-bottom: 0.3rem;
    }
    /* Make the modal more compact on small screens */
    @media (max-width: 576px) {
        .modal-dialog {
            margin: 0.3rem auto;
            max-width: 95% !important;
        }

        .cmn-modal-body {
            padding: 0.4rem 0.6rem;
            font-size: 0.8rem;
        }

        .card-body {
            padding: 0.4rem 0.6rem;
        }
    }

    /* .smartgrid-header .spinner-border / .refresh / .smartgrid-advsearch sizing
       now lives in /css/smartgrid-toolbar.css alongside the rest of the bar. */

    .grid-paging-status {
        font-size: 11px !important;
    }

    /*------ Fluent toast*/
    /* Scope it just to toasts */
    /*.fluent-toast-provider {
    --success: #22c55e;
    --error: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;
}
.fluent-toast-provider { 
    --neutral-layer-floating: #111827;
    --neutral-foreground-rest: #ffffff;
    --stroke-subtle: rgba(255,255,255,.12);
}*/
    /*Single line buttons scroller*/
    /* wrapper */
    .slbs {
        position: relative;
        min-width: 0;
        width: 100%;
        overflow: hidden; /* hide fades */
    }
    /* scroll track */
    .slbs__track {
        display: flex;
        flex-wrap: nowrap;
        align-items: start;
        gap: .5rem;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        min-width: 0;
        scrollbar-width: none;
    }
        /*.action-toolbar .slbs__track {
    align-items: center !important;
}*/

        .slbs__track::-webkit-scrollbar {
            display: none;
        }

        .slbs__track > * {
            flex: 0 0 auto;
        }
    /* arrow buttons */
    .slbs__nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 34px;
        width: 34px;
        border: 0;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bs-body-bg, #fff);
        color: var(--bs-body-color, #111);
        box-shadow: 0 6px 18px rgba(0,0,0,.18); /* soft shadow */
        z-index: 5;
        opacity: 0;
        pointer-events: none; /* disabled until JS enables */
        transition: opacity .12s ease, transform .12s ease;
    }

        .slbs__nav:hover {
            transform: translateY(-50%) scale(1.04);
        }

        .slbs__nav:active {
            transform: translateY(-50%) scale(.98);
        }

    .slbs__nav--left {
        left: 6px;
    }

    .slbs__nav--right {
        right: 6px;
    }
    /* fades behind the buttons */
    .slbs::before,
    .slbs::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 52px;
        pointer-events: none;
        z-index: 4;
        opacity: 0;
        transition: opacity .12s ease;
    }

    .slbs::before {
        left: 0;
        background: linear-gradient(to right, rgba(0,0,0,.12), rgba(0,0,0,0));
    }

    .slbs::after {
        right: 0;
        background: linear-gradient(to left, rgba(0,0,0,.12), rgba(0,0,0,0));
    }
    /* show/hide controlled by JS */
    .slbs.slbs--can-scroll .slbs__nav {
        pointer-events: auto;
    }

    .slbs.slbs--left .slbs__nav--left {
        opacity: 1;
    }

    .slbs.slbs--right .slbs__nav--right {
        opacity: 1;
    }

    .slbs.slbs--left::before {
        opacity: 1;
    }

    .slbs.slbs--right::after {
        opacity: 1;
    }
    /* little padding so buttons don't cover first/last items */
    .slbs__track {
        /* padding-left: 48px;
    padding-right: 48px;*/
    }
    /*----------------------------------------------------*/
    /*--- Icons -----*/
    /*Returns Dashboard  (sprite 1024×1536, icon ~192×150, scale 40/192) */
    .rd-icon {
        display: inline-block !important;
        width: 40px;
        height: 38px;
        margin-left: 31px;
        background-image: url(/Icons/Returns-Dashboard.png);
        background-repeat: no-repeat;
        background-size: 215.3px 336px;
    }
    /* Row 1 */
    .rd-icon--return {
        background-position: -29.2px -49.6px;
    }

    .rd-icon--reports {
        background-position: -89.0px -49.6px;
    }

    .rd-icon--ledgers {
        background-position: -148.8px -49.6px;
    }
    /* Row 2 */
    .rd-icon--reconciliation {
        background-position: -29px -137.3px
    }

    .rd-icon--download {
        background-position: -91.6px -137.3px;
    }

    .rd-icon--login {
        background-position: -91.6px -137.3px;
    }
    /* Row 3 */
    .rd-icon--settings {
        background-position: -119.1px -230.2px;
    }
    /*--Home icons--------------*/
    /* Home Dashboard Sprite */
    .home-icon {
        display: inline-block !important;
        width: 40px;
        height: 38px;
        margin-left: 31px;
        background-image: url(/Icons/Home-Dashboard.png);
        background-repeat: no-repeat;
        background-size: 215.3px 336px; /* same scaling logic */
    }

    .home-icon--return-status {
        background-position: -31.2px -36.6px;
    }

    .home-icon--data-backup {
        background-position: -84px -36.6px;
    }

    .home-icon--check-update {
        background-position: -142.8px -36.6px;
    }

    .home-icon--raise-ticket {
        background-position: -30.2px -97.3px;
    }

    .home-icon--buy-software {
        background-position: -88px -97.3px;
    }

    .home-icon--task-reminder {
        background-position: -143.8px -99.3px;
    }

    .home-icon--licence-management {
        background-position: -31.2px -154px;
    }

    .home-icon--client-permission {
        background-position: -84px -154px;
    }

    .home-icon--anydesk {
        background-position: -147.8px -154px;
    }

    .home-icon--database-update {
        background-position: -31.2px -214.7px;
    }

    .home-icon--install-plugins {
        background-position: -88px -214.7px;
    }

    .home-icon--database-integrity {
        background-position: -148.8px -214.7px;
    }
    /*----GSTR3B Icons----------------------------*/
    .gstr3b-icon {
        display: inline-block !important;
        width: 40px;
        height: 38px;
        margin-left: 31px;
        background-image: url(/Icons/GSTR3B.png);
        background-repeat: no-repeat;
        background-size: 215.3px 336px; /* same scaling logic */
    }
    /* Row 1 */
    .gstr3b-icon--summary {
        background-position: -89px -47.6px;
    }

    .gstr3b-icon--outwardsupplies {
        background-position: -145.8px -46.6px;
    }
    /* Row 2 */
    .gstr3b-icon--ecosupplies {
        background-position: -35px -108.3px;
    }

    .gstr3b-icon--interstatesupplies {
        background-position: -91.6px -109.3px;
    }

    .gstr3b-icon--eligitc {
        background-position: -91.6px -111.3px;
    }
    /* Row 3 */
    .gstr3b-icon--exempt {
        background-position: -35px -172.3px;
    }

    .gstr3b-icon--intandlatefee {
        background-position: -90px -172.3px;
    }

    .gstr3b-icon--paymentoftax {
        background-position: -147px -172.3px;
    }
    /* Row 4 */
    .gstr3b-icon--liveelectronic {
        background-position: -87px -233.3px;
    }
    /*---- IMS Inward Icons ----------------------------*/

    .ims-inward-icon {
        display: inline-block !important;
        width: 42px;
        height: 39px;
        margin-left: 31px;
        background-image: url(/Icons/IMS-Inward.png);
        background-repeat: no-repeat;
        background-size: 215.3px 336px;
    }
    /* Row 1 */

    .ims-inward-icon--summary {
        background-position: -31.2px -40.6px;
    }

    .ims-inward-icon--b2b {
        background-position: -86px -39.6px;
    }

    .ims-inward-icon--b2ba {
        background-position: -142.8px -40.6px;
    }
    /* Row 2 */

    .ims-inward-icon--debit-notes {
        background-position: -30.2px -129.3px;
    }

    .ims-inward-icon--debit-notes-amend {
        background-position: -87px -128.3px;
    }

    .ims-inward-icon--credit-notes {
        background-position: -144.8px -128.3px;
    }
    /* Row 3 */
    /* Row 3 ✅ FIXED */
    /* Row 3 ✅ FINAL FIX */

    .ims-inward-icon--credit-notes-amend {
        background-position: -31px -217px;
    }

    .ims-inward-icon--ecomm {
        background-position: -91px -216px;
    }

    .ims-inward-icon--ecomm-amend {
        background-position: -141px -218px;
    }
    /*---- IMS Outward Icons ----------------------------*/

    .ims-outward-icon {
        display: inline-block !important;
        width: 42px;
        height: 39px;
        margin-left: 31px;
        background-image: url('/Icons/IMS-Outward.png');
        background-repeat: no-repeat;
        background-size: 215.3px 336px;
    }
    /* Row 1 */

    .ims-outward-icon--summary {
        background-position: -32px -51px;
    }

    .ims-outward-icon--b2b {
        background-position: -81px -52px;
    }

    .ims-outward-icon--b2ba {
        background-position: -140px -53px;
    }
    /* Row 2 */

    .ims-outward-icon--debit-notes {
        background-position: -32px -138px;
    }

    .ims-outward-icon--debit-note-amendments {
        background-position: -82px -139px;
    }

    .ims-outward-icon--credit-notes {
        background-position: -141px -138px;
    }
    /* Row 3 */

    .ims-outward-icon--credit-note-amendments {
        background-position: -35px -225px;
    }
    /*---- GSTR2A Icons ----------------------------*/


    .gstr2a-icon-a {
        display: inline-block !important;
        width: 53px;
        height: 41px;
        margin-left: 26px;
        background-image: url(/Icons/GSTR2A-1.png);
        background-repeat: no-repeat;
        background-size: 218px 443px;
    }

    .gstr2a-icon--ecoa {
        background-position: -55px -163px;
    }

    .gstr2a-icon--isda {
        background-position: -161px -165px;
    }

    .gstr2a-icon--tdsa {
        background-position: -6px -165px;
    }
    /*---------*/


    .gstr2a-icon {
        display: inline-block !important;
        width: 40px;
        height: 37px;
        margin-left: 29px;
        background-image: url('/Icons/GSTR2A.png');
        background-repeat: no-repeat;
        background-size: 208.3px 334px;
    }
    /* Row 1 */
    .gstr2a-icon--summary {
        background-position: -27px -46px;
    }

    .gstr2a-icon--b2b {
        background-position: -80px -45px;
    }

    .gstr2a-icon--b2ba {
        background-position: -137px -47px;
    }

    .gstr2a-icon--isd {
        background-position: -138px -46px;
    }
    /* Row 2 */
    .gstr2a-icon--isd-amend {
        background-position: -30px -119px;
    }

    .gstr2a-icon--impg {
        background-position: -82px -118px;
    }

    .gstr2a-icon--impgsez {
        background-position: -142px -119px;
    }

    .gstr2a-icon--tds {
        background-position: -143px -121px;
    }
    /* Row 3 */
    .gstr2a-icon--tds-amd {
        background-position: -27px -186px;
    }

    .gstr2a-icon--tcs {
        background-position: -84px -256px;
    }

    .gstr2a-icon--cdnr-credit {
        background-position: -140px -254px;
    }

    .gstr2a-icon--cdnra-credit {
        background-position: -141px -185px;
    }
    /* Row 4 */
    .gstr2a-icon--cdnr-debit {
        background-position: -29px -254px;
    }

    .gstr2a-icon--cdnra-debit {
        background-position: -84px -255px;
    }
    /* Base icon */
    /*---- Electronic Ledger Icons ----------------------------*/

    .ledger-icon {
        display: inline-block !important;
        width: 40px;
        height: 37px;
        margin-left: 29px;
        background-image: url('/Icons/Electronic-Ledger.png');
        background-repeat: no-repeat;
        background-size: 208.3px 334px;
    }
    /* Row 1 */
    .ledger-icon--summary {
        background-position: -32px -67px;
    }

    .ledger-icon--cash-ledger {
        background-position: -86px -70px;
    }

    .ledger-icon--credit-ledger {
        background-position: -140px -69px;
    }
    /* Row 2 */
    .ledger-icon--liability-ledger {
        background-position: -32px -124px;
    }

    .ledger-icon--liability-register {
        background-position: -86px -125px;
    }

    .ledger-icon--itc-reversal {
        background-position: -140px -127px;
    }
    /* Row 3 */
    .ledger-icon--pmt09 {
        background-position: -32px -187px;
    }

    .ledger-icon--rcm-ledger {
        background-position: -84px -188px;
    }

    .ledger-icon--negative-liability {
        background-position: -142px -187px;
    }
    /* ---- GSTR3B REPORT ICONS ---------------------------- */

    .gstr3b-report-icon {
        display: inline-block !important;
        width: 45px;
        height: 42px;
        margin-left: 29px;
        background-image: url('/Icons/GSTR3B-Report.png'); /* your png */
        background-repeat: no-repeat;
        background-size: 208px 208px; /* IMPORTANT: square grid */
    }

    .gstr3b-report-icon--summary {
        background-position: -83px -36px;
    }

    .gstr3b-report-icon--sales {
        background-position: -28px -35px;
    }

    .gstr3b-report-icon--liability {
        background-position: -141px -36px;
    }

    .gstr3b-report-icon--excel {
        background-position: -85px -96px;
    }

    .gstr3b-report-icon--export {
        background-position: -90px -110px;
    }

    .gstr3b-report-icon--compare {
        background-position: -141px -98px;
    }
    /* ---- IMS REPORT ICONS (SPRITE BASED) ---------------------------- */

    .ims-report-icon {
        display: inline-block !important;
        width: 55px;
        height: 55px;
        margin-left: 29px;
        background-image: url('/Icons/IMS-Report.png');
        background-repeat: no-repeat;
        /* IMPORTANT: match your sprite scaling like others */
        background-size: 215.3px 336px;
    }
    /* Row 1 */
    .ims-report-icon--interest {
        background-position: -45px -24px;
    }

    .ims-report-icon--challan {
        background-position: -136px -24px;
    }
    /* Row 2 */
    .ims-report-icon--return {
        background-position: -44px -101px;
    }

    .ims-report-icon--latefee {
        background-position: -141px -101px;
    }
    /* Row 3 */
    .ims-report-icon--notice {
        background-position: -43px -184px;
    }

    .ims-report-icon--view {
        background-position: -138px -186px;
    }
    /* ---- MISC REPORT ICONS ---------------------------- */

    .misc-report-icon {
        display: inline-block !important;
        width: 48px;
        height: 48px;
        margin-left: 29px;
        background-image: url('/Icons/Misc-Report.png');
        background-repeat: no-repeat;
        background-size: 215.3px 336px;
    }
    /* Row 1 */
    .misc-report-icon--ice {
        background-position: -47px -18px;
    }

    .misc-report-icon--gstr1 {
        background-position: -124px -18px;
    }
    /* Row 2 */
    .misc-report-icon--outstanding {
        background-position: -47px -96px;
    }

    .misc-report-icon--b2b {
        background-position: -127px -95px;
    }
    /* Row 3 */
    .misc-report-icon--gstr9 {
        background-position: -127px -165px;
    }
    /* Row 4 */
    .misc-report-icon--appeal {
        background-position: -48px -241px;
    }

    .misc-report-icon--ecomm {
        background-position: -123px -244px;
    }
    /* ---- 2A COMP ICONS ---------------------------- */

    .comp2a-icon {
        display: inline-block !important;
        width: 48px;
        height: 48px;
        margin-left: 29px;
        background-image: url('/Icons/gstr_clean_final.png');
        background-repeat: no-repeat;
        background-size: 251px 236px;
    }
    /* Row 1 */
    .comp2a-icon--summary {
        background-position: -44px -23px;
    }

    .comp2a-icon--invoice-save {
        background-position: -167px -25px;
    }
    /* Row 2 */
    .comp2a-icon--gstr3b-notfiled {
        background-position: -44px -78px;
    }

    .comp2a-icon--supplier {
        background-position: -164px -80px;
    }
    /* Row 3 */
    .comp2a-icon--wrongpos {
        background-position: -46px -135px;
    }

    .comp2a-icon--rcm {
        background-position: -170px -136px;
    }
    /* ---- GSTR1 ICONS ---------------------------- */
    /*.sidebar-link-s {
    display: flex !IMPORTANT;
    align-items: center;
}*/

    .gstr1-icon {
        display: inline-block !important;
        /*  width: 65px;
    height: 34px;
    margin-left: 16px;
    background-image: url(/Icons/GSTR1.png);
    background-repeat: no-repeat;
    background-size: 218px 443px;*/

        width: 53px;
        height: 41px;
        margin-left: 26px;
        background-image: url(/Icons/GSTR1.png);
        background-repeat: no-repeat;
        background-size: 218px 443px;
    }
    /* Row 1 - B2B Invoices */
    .gstr1-icon--summary {
        background-position: -11px -16px;
    }

    .gstr1-icon--b2b {
        background-position: -63px -16px;
    }

    .gstr1-icon--b2ba {
        background-position: -115px -16px;
    }

    .gstr1-icon--b2cl {
        background-position: -165px -17px;
    }

    .gstr1-icon--b2cla {
        background-position: -12px -88px;
    }
    /* Row 2 - B2CS */
    .gstr1-icon--b2cs {
        background-position: -65px -88px;
    }

    .gstr1-icon--b2csa {
        background-position: -115px -88px;
    }

    .gstr1-icon--cdnr {
        background-position: -162px -88px;
    }

    .gstr1-icon--cdnra {
        background-position: -6px -165px;
    }
    /* Row 3 - CDNUR */
    .gstr1-icon--cdnur {
        background-position: -59px -165px;
    }

    .gstr1-icon--cdnura {
        background-position: -109px -165px;
    }

    .gstr1-icon--exp {
        background-position: -161px -165px;
    }

    .gstr1-icon--expa {
        background-position: -9px -238px;
    }
    /* Row 4 - Advance Tax */
    .gstr1-icon--at {
        background-position: -62px -238px;
    }

    .gstr1-icon--ata {
        background-position: -112px -238px;
    }

    .gstr1-icon--txpd {
        background-position: -164px -238px;
    }

    .gstr1-icon--txpa {
        background-position: -8px -311px;
    }
    /* Row 5 - E-Commerce, HSN, Nil, Document */
    .gstr1-icon--ecom {
        background-position: -61px -309px;
    }

    .gstr1-icon--hsn {
        background-position: -112px -309px;
    }

    .gstr1-icon--nil {
        background-position: -163px -309px;
    }

    .gstr1-icon--doc {
        background-position: -8px -374px;
    }

/* ═══════════════════════════════════════════════════════════════════════
   SPQ toolbar button skin (.spq-toolbar)
   Neutral white buttons with a soft border that pick up the active theme
   accent on hover — replaces the multicolored btn-outline-* mix in the
   {return}TopBar components. States driven via Bootstrap 5.3 --bs-btn-*
   variables so hover/active/disabled/dropdown-open all follow along.
   ═══════════════════════════════════════════════════════════════════════ */

.spq-toolbar .btn {
    --spq-accent: var(--theme-default, #3e66e0);
    color: var(--tc-strong, #1e2a41) !important;
    background-color: var(--sf-card, #fff) !important;
    border-color: var(--bd, #cdd6e5) !important;
    font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 7px;
    line-height: 1.35;
    box-shadow: none;
    transition: color .12s, border-color .12s, background-color .12s;
}

.spq-toolbar .btn:hover,
.spq-toolbar .btn:active,
.spq-toolbar .btn.show {
    color: var(--spq-accent) !important;
    background-color: var(--sf-card, #fff) !important;
    border-color: var(--spq-accent) !important;
}

/* Current screen in a family button group (.active) — accent-filled so the
   open page is obvious. Must come after :hover so it stays filled on hover. */
.spq-toolbar .btn.active,
.spq-toolbar .btn.active:hover,
.spq-toolbar .btn.active:focus {
    color: #fff !important;
    background-color: var(--spq-accent) !important;
    border-color: var(--spq-accent) !important;
    position: relative;
    z-index: 1;
}

.spq-toolbar .btn:disabled,
.spq-toolbar .btn.disabled {
    color: #8393ac !important;
    background-color: var(--sf-subtle, #f6f8fb) !important;
    border-color: var(--bd, #e2e7f0) !important;
}

.spq-toolbar .btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--spq-accent) 25%, transparent);
}

/* Icons inside toolbar buttons follow the button color (kills text-success,
   text-warning, etc. inline icon tints); dropdown menu items are unaffected */
.spq-toolbar .btn [class*="text-"] {
    color: inherit !important;
}

/* Danger: red text on neutral, red border + light red fill on hover.
   !important needed — Cuba's style.css forces .btn-danger bg/border with
   !important (#fc564a), which wins over the --bs-btn-* variable route. */
.spq-toolbar .btn-danger,
.spq-toolbar .btn-outline-danger {
    --bs-btn-color: #c0362b;
    --bs-btn-hover-color: #c0362b;
    --bs-btn-hover-bg: #fbe9e7;
    --bs-btn-hover-border-color: #c0362b;
    --bs-btn-active-color: #c0362b;
    --bs-btn-active-bg: #fbe9e7;
    --bs-btn-active-border-color: #c0362b;
    color: color-mix(in srgb, #c0362b var(--ink-keep, 100%), var(--ink-flip, #c0362b)) !important;
    background-color: var(--sf-card, #fff) !important;
    border-color: var(--bd, #cdd6e5) !important;
}

.spq-toolbar .btn-danger:hover,
.spq-toolbar .btn-outline-danger:hover,
.spq-toolbar .btn-danger:active,
.spq-toolbar .btn-outline-danger:active {
    color: color-mix(in srgb, #c0362b var(--ink-keep, 100%), var(--ink-flip, #c0362b)) !important;
    background-color: var(--sf-raised, #fbe9e7) !important;
    border-color: #c0362b !important;
}

.spq-toolbar .btn-danger:focus,
.spq-toolbar .btn-outline-danger:focus {
    box-shadow: 0 0 0 3px rgba(192, 54, 43, .2);
}

.spq-toolbar .btn-danger:disabled,
.spq-toolbar .btn-danger.disabled,
.spq-toolbar .btn-outline-danger:disabled,
.spq-toolbar .btn-outline-danger.disabled {
    color: #8393ac !important;
    background-color: var(--sf-subtle, #f6f8fb) !important;
    border-color: var(--bd, #e2e7f0) !important;
}

/* Solid primary/success CTAs keep accent emphasis (theme-colored fill).
   !important needed — Cuba's style.css forces their bg/border with !important. */
.spq-toolbar .btn-primary:not([class*="btn-outline"]),
.spq-toolbar .btn-success:not([class*="btn-outline"]) {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    color: #fff !important;
    background-color: var(--spq-accent) !important;
    border-color: var(--spq-accent) !important;
}

.spq-toolbar .btn-primary:not([class*="btn-outline"]):disabled,
.spq-toolbar .btn-primary:not([class*="btn-outline"]).disabled,
.spq-toolbar .btn-success:not([class*="btn-outline"]):disabled,
.spq-toolbar .btn-success:not([class*="btn-outline"]).disabled {
    background-color: #aeb9cc !important;
    border-color: #aeb9cc !important;
}

.spq-toolbar .btn-primary:not([class*="btn-outline"]):hover,
.spq-toolbar .btn-success:not([class*="btn-outline"]):hover {
    filter: brightness(1.08);
}

/* Dark theme */
body.dark-only .spq-toolbar .btn {
    color: var(--tcd-strong, #d4ddef) !important;
    background-color: var(--sf-raised, #1c2c50) !important;
    border-color: var(--bd, #2b3d66) !important;
}

body.dark-only .spq-toolbar .btn:hover,
body.dark-only .spq-toolbar .btn:active,
body.dark-only .spq-toolbar .btn.show {
    color: var(--tcd-strong, #fff) !important;
    background-color: var(--sf-raised, #223b66) !important;
    border-color: var(--spq-accent) !important;
}

body.dark-only .spq-toolbar .btn.active,
body.dark-only .spq-toolbar .btn.active:hover,
body.dark-only .spq-toolbar .btn.active:focus {
    color: var(--tcd-strong, #fff) !important;
    background-color: var(--spq-accent) !important;
    border-color: var(--spq-accent) !important;
}

body.dark-only .spq-toolbar .btn:disabled,
body.dark-only .spq-toolbar .btn.disabled {
    color: #5b6b85 !important;
    background-color: var(--sf-card, #14213f) !important;
    border-color: var(--bd, #26365c) !important;
}

body.dark-only .spq-toolbar .btn-danger,
body.dark-only .spq-toolbar .btn-outline-danger {
    color: #f1958b !important;
    background-color: var(--sf-raised, #1c2c50) !important;
    border-color: var(--bd, #2b3d66) !important;
}

body.dark-only .spq-toolbar .btn-danger:hover,
body.dark-only .spq-toolbar .btn-outline-danger:hover,
body.dark-only .spq-toolbar .btn-danger:active,
body.dark-only .spq-toolbar .btn-outline-danger:active {
    color: #f1958b !important;
    background-color: rgba(192, 54, 43, .18) !important;
    border-color: #c0362b !important;
}

body.dark-only .spq-toolbar .btn-danger:disabled,
body.dark-only .spq-toolbar .btn-danger.disabled,
body.dark-only .spq-toolbar .btn-outline-danger:disabled,
body.dark-only .spq-toolbar .btn-outline-danger.disabled {
    color: #5b6b85 !important;
    background-color: var(--sf-card, #14213f) !important;
    border-color: var(--bd, #26365c) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SelectFyMonthDialog (period picker) — short-screen modal chrome.
   The dialog is IsScrollable + DialogCssClass="sfmd-dialog"; its header,
   body and footer are rendered by BlazorBootstrap, out of reach of the
   component's scoped CSS, so their short-height tightening lives here.
   Pane heights themselves are in SelectFyMonthDialog.razor.css.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-height: 600px) {
    .modal-dialog.sfmd-dialog {
        --bs-modal-margin: .5rem;
        margin-top: .5rem;
        margin-bottom: .5rem;
    }

    .modal-dialog-scrollable.sfmd-dialog {
        height: calc(100% - 1rem);
    }

    .sfmd-dialog .modal-header,
    .sfmd-dialog .modal-footer {
        padding-top: .4rem;
        padding-bottom: .4rem;
    }

    .sfmd-dialog .modal-body {
        padding: .6rem .75rem;
    }

    /* Keep the Continue / Cancel row compact: trade name + GSTIN chip are enough. */
    .sfmd-dialog .sfmd-foot-entity-legal {
        display: none;
    }

    .sfmd-dialog .sfmd-footer-stack {
        gap: 4px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   SelectFyMonthDialog (period picker) — dark theme overrides.
   Base styles live in SelectFyMonthDialog.razor.css (scoped); scoped CSS
   cannot reference the body.dark-only ancestor, so dark rules live here.
   ═══════════════════════════════════════════════════════════════════════ */
body.dark-only .sfmd-rail,
body.dark-only .sfmd-main-head,
body.dark-only .sfmd-legend {
    background: var(--sf-card, #14213f);
    border-color: var(--bd, #26365c);
}

body.dark-only .sfmd-main {
    background: var(--sf-raised, #1c2c50);
    border-color: var(--bd, #26365c);
}

body.dark-only .sfmd-rail-head,
body.dark-only .sfmd-rail-hint,
body.dark-only .sfmd-main-head {
    border-color: var(--bd, #26365c);
}

body.dark-only .sfmd-rail-count {
    background: var(--sf-raised, #223b66);
    color: var(--tcd-strong, #d4ddef);
}

body.dark-only .sfmd-fy,
body.dark-only .sfmd-month,
body.dark-only .sfmd-tool-btn {
    background: var(--sf-raised, #1c2c50);
    border-color: var(--bd, #2b3d66);
}

body.dark-only .sfmd-fy-label,
body.dark-only .sfmd-month-name,
body.dark-only .sfmd-main-title,
body.dark-only .sfmd-tool-btn {
    color: var(--tcd-strong, #d4ddef);
}

body.dark-only .sfmd-fy-tick {
    background: var(--sf-card, #14213f);
    border-color: var(--bd, #2b3d66);
}

body.dark-only .sfmd-fy.is-selected .sfmd-fy-tick {
    background: var(--theme-default, #3e66e0);
    border-color: var(--theme-default, #3e66e0);
}

body.dark-only .sfmd-fy-badge {
    background: var(--sf-raised, #223b66);
    color: #9db8f5;
}

body.dark-only .sfmd-month.is-selected {
    background: var(--sf-raised, #223b66);
}

body.dark-only .sfmd-qtr {
    background: var(--sf-raised, #1c2c50);
    border-color: var(--bd, #2b3d66);
    color: var(--tcd-strong, #d4ddef);
}

body.dark-only .sfmd-qtr.is-selected {
    background: var(--sf-raised, #223b66);
    color: #9db8f5;
}

body.dark-only .sfmd-qtr.is-selected .sfmd-qtr-range {
    color: #9db8f5;
}

body.dark-only .sfmd-month-dl-stamp {
    color: #4fd1a5;
}

body.dark-only .sfmd-month.is-closed:not(.is-selected) {
    background: var(--sf-raised, #182849);
}

body.dark-only .sfmd-chip {
    background: var(--sf-raised, #1c2c50);
    border-color: var(--bd, #2b3d66);
    color: var(--tcd-strong, #d4ddef);
}

body.dark-only .sfmd-chip b {
    color: #9db8f5;
}

body.dark-only .sfmd-foot-entity-name {
    color: var(--tcd-strong, #e8eefc);
}

body.dark-only .sfmd-foot-entity-legal {
    color: var(--tcd-muted, #9aa9c7);
}

body.dark-only .sfmd-foot-chip {
    background: var(--sf-raised, #1c2c50);
    border-color: var(--bd, #2b3d66);
    color: #9db8f5;
}

body.dark-only .sfmd-foot-chip-gstin {
    background: var(--sf-raised, #223764);
}

/* ═══════════════════════════════════════════════════════════════
   Ledger Balance Summary — modern table (replaces SmartGrid)
   ═══════════════════════════════════════════════════════════════ */
.lbs-card { height: 100%; min-height: 0; }

.lbs-icon-badge {
    width: 34px; height: 34px;
    background: var(--theme-default); color: #fff; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; flex-shrink: 0;
}

.lbs-subtitle { font-size: 11px; line-height: 1.2; }
.lbs-badge    { font-size: 11px; }

/* export button */
.lbs-export-btn {
    background: var(--sf-subtle, #f0fdf4); color: color-mix(in srgb, #166534 var(--ink-keep, 100%), var(--ink-flip, #166534));
    border: 1px solid #bbf7d0; font-size: 12px; font-weight: clamp(1, calc(500 + var(--spq-fw-delta, 0)), 1000);
}
.lbs-export-btn:hover  { background: color-mix(in srgb, #dcfce7 var(--pastel-keep, 100%), var(--sf-card, #dcfce7)); color: color-mix(in srgb, #14532d var(--ink-keep, 100%), var(--ink-flip, #14532d)); }
.lbs-export-btn:disabled { opacity: .55; cursor: not-allowed; }

/* selection / copy bar */
.lbs-copy-bar {
    background: color-mix(in srgb, var(--theme-default) 8%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--theme-default) 20%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--theme-default) 20%, transparent);
    min-height: 38px;
}
.lbs-copy-count { font-size: 12.5px; font-weight: clamp(1, calc(500 + var(--spq-fw-delta, 0)), 1000); color: var(--theme-text, var(--theme-default)); }
.lbs-copy-btn {
    background: var(--theme-default); color: #fff; font-size: 12px;
    border: none; padding: 3px 12px; border-radius: 5px;
}
.lbs-copy-btn:hover { filter: brightness(0.9); }
.lbs-clear-btn { font-size: 12px; }
.lbs-copy-ok   { color: color-mix(in srgb, #15803d var(--ink-keep, 100%), var(--ink-flip, #15803d)); font-size: 12px; font-weight: clamp(1, calc(500 + var(--spq-fw-delta, 0)), 1000); }

/* hint bar */
.lbs-hint { font-size: 11.5px; }
.lbs-hint kbd {
    background: var(--sf-raised, #e2e8f0); color: var(--tc-text, #475569); border-radius: 3px;
    padding: 1px 4px; font-size: 10.5px; border: 1px solid var(--bd, #cbd5e1);
}

/* body scroll area */
.lbs-body  { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.lbs-scroll { overflow: auto; flex: 1 1 0; min-height: 0; }

/* table */
.lbs-table {
    border-collapse: collapse; width: 100%;
    font-size: 13px; table-layout: fixed;
}

.lbs-th {
    position: sticky; top: 0; z-index: 2;
    background: var(--theme-default); color: #fff;
    font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); font-size: 12px; padding: 8px 10px;
    text-transform: uppercase; letter-spacing: .03em;
    white-space: nowrap;
}

.lbs-col-desc  { width: 42%; text-align: left; }
.lbs-col-num   { width: 11.6%; text-align: right; }
.lbs-col-total { font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); }

/* section header rows */
.lbs-section-hdr td {
    background: color-mix(in srgb, var(--theme-default) 14%, var(--sf-card, #fff));
    color: color-mix(in srgb, var(--theme-default) 80%, #000);
    font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); font-size: 12px; text-transform: uppercase;
    letter-spacing: .04em; padding: 7px 10px;
    border-top: 2px solid color-mix(in srgb, var(--theme-default) 30%, transparent);
}

/* data rows */
.lbs-row {
    cursor: pointer;
    transition: background 0.08s;
}
.lbs-row:hover:not(.lbs-selected) { background: var(--sf-subtle, #f8fafc); }

.lbs-td { padding: 7px 10px; border-bottom: 1px solid var(--bd, #f1f5f9); vertical-align: middle; }
.lbs-col-desc { word-break: break-word; }

/* total row */
.lbs-total-row .lbs-td {
    font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000);
    background: var(--sf-subtle, #f0fdf4);
    border-top: 2px solid #bbf7d0;
    border-bottom: 2px solid #bbf7d0;
}

/* selected row */
.lbs-row.lbs-selected .lbs-td {
    background: color-mix(in srgb, var(--theme-default) 12%, var(--sf-card, #fff)) !important;
    outline: none;
}
.lbs-row.lbs-selected:first-child .lbs-td { border-top-color: color-mix(in srgb, var(--theme-default) 40%, transparent); }

/* empty state */
.lbs-empty { color: var(--tc-faint, #94a3b8); }
.lbs-empty-icon { font-size: 2.5rem; color: #cbd5e1; }

/* ── dark-mode overrides ── */
body.dark-only .lbs-th { background: var(--theme-default); }

body.dark-only .lbs-section-hdr td {
    background: color-mix(in srgb, var(--theme-default) 18%, var(--sf-card, #1e2535));
    color: color-mix(in srgb, var(--theme-default) 90%, #fff);
    border-top-color: color-mix(in srgb, var(--theme-default) 35%, transparent);
}

body.dark-only .lbs-row:hover:not(.lbs-selected) { background: var(--sf-card, #1e2535); }

body.dark-only .lbs-td { border-bottom-color: var(--bd, #2a3347); color: var(--tcd-text, #cbd5e1); }

body.dark-only .lbs-total-row .lbs-td {
    background: #1a2e20; border-color: #166534;
}

body.dark-only .lbs-row.lbs-selected .lbs-td {
    background: color-mix(in srgb, var(--theme-default) 18%, var(--sf-card, #1a2035)) !important;
}

body.dark-only .lbs-copy-bar {
    background: color-mix(in srgb, var(--theme-default) 12%, var(--sf-card, #1a2035));
    border-color: color-mix(in srgb, var(--theme-default) 25%, transparent);
}

body.dark-only .lbs-hint kbd {
    background: var(--sf-raised, #2a3347); color: var(--tcd-muted, #94a3b8); border-color: #374258;
}

body.dark-only .lbs-export-btn {
    background: #14532d; color: #bbf7d0; border-color: #166534;
}
body.dark-only .lbs-export-btn:hover { background: #166534; }

body.dark-only .lbs-empty-icon { color: #374258; }

/* ── Mobile responsive: header actions ── */
@media (max-width: 575.98px) {
    .lbs-hdr-actions {
        width: 100%;
    }
    .lbs-hdr-actions .btn,
    .lbs-hdr-actions > :deep(.btn) {
        flex: 1 1 auto;
        justify-content: center;
        font-size: 12px;
        padding: 5px 8px;
    }
}

/* ── Mobile card list ── */
.lbs-m-list {
    padding-top: 4px;
}

.lbs-m-section {
    background: color-mix(in srgb, var(--theme-default) 14%, var(--sf-card, #fff));
    color: color-mix(in srgb, var(--theme-default) 80%, #000);
    font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); font-size: 11.5px; text-transform: uppercase;
    letter-spacing: .04em; padding: 7px 10px;
    border-top: 2px solid color-mix(in srgb, var(--theme-default) 30%, transparent);
    border-radius: 6px; margin-bottom: 6px; margin-top: 8px;
}

.lbs-m-card {
    background: var(--sf-card, #fff);
    border: 1px solid var(--bd, #e9eef5);
    border-radius: 10px;
    padding: 12px 14px 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: box-shadow 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.lbs-m-card:active { opacity: .85; }

.lbs-m-card.lbs-m-total-card {
    background: var(--sf-subtle, #f0fdf4);
    border-color: #bbf7d0;
    border-width: 2px;
}

.lbs-m-card.lbs-m-selected {
    border-color: color-mix(in srgb, var(--theme-default) 60%, transparent);
    background: color-mix(in srgb, var(--theme-default) 8%, var(--sf-card, #fff));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-default) 25%, transparent);
}

.lbs-m-desc {
    font-size: 13px;
    color: var(--tc-strong, #1e293b);
    margin-bottom: 8px;
    line-height: 1.35;
}

.lbs-m-vals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 12px;
    margin-bottom: 8px;
}

.lbs-m-val-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--sf-subtle, #f8fafc);
    border-radius: 5px;
    padding: 4px 7px;
}

.lbs-m-lbl {
    font-size: 10.5px;
    font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    color: var(--tc-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.lbs-m-num {
    font-size: 12px;
    color: var(--tc-text, #334155);
    font-variant-numeric: tabular-nums;
}

.lbs-m-total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--bd, #e2e8f0);
    padding-top: 7px;
    margin-top: 2px;
}

.lbs-m-total-lbl {
    font-size: 11px;
    font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    color: var(--tc-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.lbs-m-total-val {
    font-size: 14px;
    font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000);
    color: var(--theme-text, var(--theme-default));
    font-variant-numeric: tabular-nums;
}

/* ── Dark mode: mobile cards ── */
body.dark-only .lbs-m-section {
    background: color-mix(in srgb, var(--theme-default) 18%, var(--sf-card, #1e2535));
    color: color-mix(in srgb, var(--theme-default) 90%, #fff);
    border-top-color: color-mix(in srgb, var(--theme-default) 35%, transparent);
}

body.dark-only .lbs-m-card {
    background: var(--sf-card, #1a2035);
    border-color: var(--bd, #2a3347);
    color: var(--tcd-text, #cbd5e1);
}

body.dark-only .lbs-m-card.lbs-m-total-card {
    background: #1a2e20;
    border-color: #166534;
}

body.dark-only .lbs-m-card.lbs-m-selected {
    background: color-mix(in srgb, var(--theme-default) 15%, var(--sf-card, #1a2035));
    border-color: color-mix(in srgb, var(--theme-default) 50%, transparent);
}

body.dark-only .lbs-m-desc { color: var(--tcd-strong, #e2e8f0); }

body.dark-only .lbs-m-val-item {
    background: var(--sf-raised, #212d40);
}

body.dark-only .lbs-m-lbl { color: var(--tcd-muted, #94a3b8); }
body.dark-only .lbs-m-num { color: var(--tcd-text, #cbd5e1); }

body.dark-only .lbs-m-total-line { border-top-color: var(--bd, #2a3347); }
body.dark-only .lbs-m-total-lbl  { color: var(--tcd-muted, #94a3b8); }

/* ── GSTR-2B sidebar icon sprites (from dev/ramesh) ────────────────── */
.gstr2b-icon {
    display: inline-block !important;
    width: 40px;
    height: 37px;
    margin-left: 29px;
    background-image: url('/Icons/GSTR2A.png');
    background-repeat: no-repeat;
    background-size: 208.3px 334px;
}

.gstr2b-icon--summary {
    background-position: -27px -46px;
}

.gstr2b-icon--b2b {
    background-position: -80px -45px;
}

.gstr2b-icon--b2ba {
    background-position: -137px -47px;
}

.gstr2b-icon--isd {
    background-position: -138px -46px;
}

.gstr2b-icon--isd-amend {
    background-position: -30px -119px;
}

.gstr2b-icon--impg {
    background-position: -82px -118px;
}

.gstr2b-icon--impgsez {
    background-position: -142px -119px;
}

.gstr2b-icon--tds {
    background-position: -143px -121px;
}

.gstr2b-icon--tds-amd {
    background-position: -27px -186px;
}

.gstr2b-icon--tcs {
    background-position: -84px -256px;
}

.gstr2b-icon--cdnr-credit {
    background-position: -140px -254px;
}

.gstr2b-icon--cdnra-credit {
    background-position: -141px -185px;
}

.gstr2b-icon--cdnr-debit {
    background-position: -29px -254px;
}

.gstr2b-icon--cdnra-debit {
    background-position: -84px -255px;
}

/* #region Himanshu — sidebar menu icons (Font Awesome)

   The return menus used sprite slices of /Icons/*.png. There are only ~20 slices, so dozens of
   entries shared one picture and 28 pointed at a class that was never defined (blank icon). These
   menus now carry a Font Awesome glyph instead, chosen per section, with the SAME glyph for the
   same section in every return — B2B looks like B2B in GSTR-1, GSTR-1A, GSTR-2A, GSTR-2B,
   e-invoice, e-way bill and Table 8A.

   .spq-mi occupies the same box the sprite span did (53 x 41 with the 26px left margin), so the
   two kinds of entry line up while sprites remain elsewhere in the app. */
.sidebar-link .spq-mi,
.spq-mi {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 41px;
    margin-left: 26px;
    font-size: 1.15rem;
    line-height: 1;
    text-align: center;
    color: inherit;
}

/* Deliberately NO colour rule for the active row. The theme stylesheets already colour the icon
   span on an active link (.sidebar-links li a.active span { color: var(--theme-text, …) }), and an
   override here would beat them on specificity and freeze the glyph at one colour. Inactive rows
   inherit the link's own colour through the base rule above, so the icons follow the selected
   theme and dark mode on their own. */

@media (max-width: 991.98px) {
    .sidebar-link .spq-mi,
    .spq-mi {
        width: 40px;
        margin-left: 12px;
        font-size: 1.05rem;
    }
}
/* #endregion */

/* #region IMS Inward Summary – action column forecolours */
td.ims-col-no-action { color: color-mix(in srgb, #c75000 var(--ink-keep, 100%), var(--ink-flip, #c75000)); font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); }
td.ims-col-accepted  { color: color-mix(in srgb, #1a6e1a var(--ink-keep, 100%), var(--ink-flip, #1a6e1a)); font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); }
td.ims-col-rejected  { color: color-mix(in srgb, #cc0000 var(--ink-keep, 100%), var(--ink-flip, #cc0000)); font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); }
td.ims-col-pending   { color: var(--theme-text, var(--theme-default)); font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); }
/* #endregion */