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: #f8f9fa;
        border-right: 1px solid #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: 'Inter' !important;
    }

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

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

    .smartgrid-header .btn {
        padding: .375rem 0.75rem;
        min-height: 22px;
    }

    .grid-search-clear {
        border: 1px solid #d1d5db !important;
        border-left: none !important;
        background: white !important;
    }

    /* ===========================================================
       Modern SmartGrid toolbar (search / filters / actions)
       Sits ABOVE the grid — sheet-header wraps SpreadsheetHeader.razor
       =========================================================== */
.sheet-header {
    background: transparent;
    /*border: 1px solid #e6e8ee !important;*/
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05) !important;
    /* margin-bottom: 10px;*/
    padding: .55rem .7rem !important;
}

    /* The search/filter cluster itself is ALWAYS a single line (never splits
       internally — see .grid-search-cluster below). The toolbar ROW as a whole
       is still allowed to wrap: action buttons + search + filters stay together
       on line 1, and paging status/page-size/pagination spill to their own line
       2 when the window is too narrow, rather than being pushed off-screen. */
    .smartgrid-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .6rem .75rem;
        padding: 0 !important;
        background: transparent;
    }

    /* Action buttons stay on the LEFT (natural flow order) */
    .smartgrid-header .rencount {
        background: #eef1ff;
        color: var(--theme-default, #4b5cff);
        font-weight: 600;
        border-radius: 999px;
        padding: .35rem .7rem;
    }

    /* Search + filters cluster — sits directly after the action buttons, on the left */
    .grid-search-cluster {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: .5rem;
        flex-shrink: 0;
    }

    /* Search pill — scope + input + clear + go, one visual unit.
       NOTE: overflow is intentionally NOT hidden here — filter trigger
       buttons/popovers live outside this element, but clipping any
       focus ring or badge on the pill itself is still undesirable. */
    .grid-search-pill {
        flex: 0 0 auto;
        width: 300px;
        border-radius: 999px;
        box-shadow: inset 0 0 0 1px #dde1ea;
        transition: box-shadow .15s ease;
    }

        .grid-search-pill:focus-within {
            box-shadow: inset 0 0 0 1.5px var(--theme-default, #4b5cff), 0 0 0 3px rgba(75, 92, 255, .12);
        }

        .grid-search-pill > .form-select,
        .grid-search-pill > .form-control,
        .grid-search-pill > .btn {
            /*border: none !important;*/
            background: transparent;
            box-shadow: none !important;
        }

        .grid-search-pill > .form-select {
            background: #f4f5f8;
            border-radius: 999px 0 0 999px !important;
            border-right: 1px solid #e6e8ee !important;
        }

        .grid-search-pill > .form-control {
            padding-top: .4rem;
            padding-bottom: .4rem;
        }

        .grid-search-pill > .btn-primary {
            background: var(--theme-default, #4b5cff) !important;
            border-radius: 0 999px 999px 0 !important;
            padding-left: .9rem;
            padding-right: .9rem;
        }

    .grid-search-clear {
        border: none !important;
        background: transparent !important;
        color: #94a3b8;
    }

        .grid-search-clear:hover {
            color: #64748b;
        }

    /* Advanced search / date-range / clear-sort trigger buttons, next to the pill */
    .grid-filter-actions {
        display: flex;
        align-items: center;
        gap: .35rem;
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    /* Paging status + page-size + pagination — each stays intact and wraps as a
       whole unit onto its own line rather than being squeezed or scrolled away. */
    .grid-paging-status,
    .smartgrid-header > div:has(.pagination),
    .smartgrid-header > div:has(> .input-group-text) {
        flex-shrink: 0;
    }

    .grid-paging-status {
        border-left: 1px solid #e6e8ee;
        padding-left: .75rem;
    }

    .smartgrid-header .pagination {
        margin-bottom: 0 !important;
    }

    /* ===========================================================
       FluentPopover (advanced search / date-range) renders in the
       browser's native top layer via the `popover` attribute, so it
       is never clipped by grid overflow — but on phones a small
       anchored flyout is unusable. Force it into a bottom-sheet.
       .spq-mobile is stamped on <html> by wwwroot/js/Util.js (SpqViewport).
       =========================================================== */
    html.spq-mobile .grid-adv-search-popover,
    html.spq-mobile .grid-daterange-popover {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85vh !important;
        border-radius: 16px 16px 0 0 !important;
        margin: 0 !important;
    }

    @media (max-width: 768px) {
        .sheet-header {
            padding: .5rem !important;
        }

        .smartgrid-header {
            gap: .5rem;
        }

        /* Search cluster still never splits internally; the toolbar row itself
           wraps normally (paging etc. drop to their own line) on small screens. */
        .grid-search-pill {
            width: 220px;
        }
    }
    /* ===========================
   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 #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: 'Rubik', sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            letter-spacing: 0.2px;
        }
    /* ---------- Modal Body ---------- */
    .cmn-modal-body {
        padding: 0.6rem 0.8rem;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        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: #f1f5f9;
        }

        .cmn-modal-body::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 2px;
        }
    /* ---------- Cards ---------- */
    .card {
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        margin-bottom: 0.6rem;
        background: #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 #e2e8f0;
        font-size: 0.83rem;
        font-weight: 600;
        color: #475569;
        padding: 0.4rem 0.7rem;
        border-radius: 8px 8px 0 0 !important;
        font-family: 'Inter' !important;
        border-top: 1px solid var(--theme-default);
    }

    .card-body {
        padding: 0.5rem 0.7rem;
    }
    /* ---------- Form Elements ---------- */
    .form-label {
        font-weight: 600;
        font-size: 0.78rem;
        /*  color: #475569;*/
        font-family: 'Roboto' !important;
        margin-bottom: 0.08rem;
    }
    /*  Themes specific custom rules*/

    body.dark-only .form-control {
        color: #b2abab !important;
    }

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

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

    body.dark-only .form-check-label {
        color: #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(--theme-secondary) !important;
        border-radius: 6px;
        padding: 0.3rem 0.5rem;
        border: 1px solid #d1d5db;
        font-family: 'Roboto', sans-serif;
        font-size: 0.82rem;
        font-weight: 500;
        background: #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: #fff;
    }
    /* GSTIN special styling */
    input.text-uppercase {
        font-family: 'Roboto Mono', monospace;
        letter-spacing: 0.5px;
        font-weight: 600;
        background: #fefce8;
        border-color: #f59e0b;
    }
    /* Checkboxes */
    .form-check-input {
        width: 0.9rem;
        height: 0.9rem;
        margin-top: 0.15rem;
        border-radius: 3px;
        border: 1px solid #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: #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 #f1f5f9;
        /* background: #fafbff;*/
        border-radius: 0 0 9px 9px;
    }

        .cmn-modal-footer .btn {
            padding: 0.3rem 1rem;
            border-radius: 6px;
            font-family: 'Roboto', sans-serif;
            font-size: 0.82rem;
            font-weight: 600;
            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: #3730a3;
                border-color: #3730a3;
                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: #ef4444 !important;
        font-weight: bold;
    }
    /* 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 {
        width: 12px;
        height: 12px;
    }

    .smartgrid-header .refresh {
        max-height: 31.5px;
    }

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

    .smartgrid-advsearch {
        border: 1px solid #d1d5db !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: #1e2a41 !important;
    background-color: #fff !important;
    border-color: #cdd6e5 !important;
    font-weight: 600;
    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: #fff !important;
    border-color: var(--spq-accent) !important;
}

.spq-toolbar .btn:disabled,
.spq-toolbar .btn.disabled {
    color: #8393ac !important;
    background-color: #f6f8fb !important;
    border-color: #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: #c0362b !important;
    background-color: #fff !important;
    border-color: #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: #c0362b !important;
    background-color: #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: #f6f8fb !important;
    border-color: #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: #d4ddef !important;
    background-color: #1c2c50 !important;
    border-color: #2b3d66 !important;
}

body.dark-only .spq-toolbar .btn:hover,
body.dark-only .spq-toolbar .btn:active,
body.dark-only .spq-toolbar .btn.show {
    color: #fff !important;
    background-color: #223b66 !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: #14213f !important;
    border-color: #26365c !important;
}

body.dark-only .spq-toolbar .btn-danger,
body.dark-only .spq-toolbar .btn-outline-danger {
    color: #f1958b !important;
    background-color: #1c2c50 !important;
    border-color: #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: #14213f !important;
    border-color: #26365c !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   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: #14213f;
    border-color: #26365c;
}

body.dark-only .sfmd-main {
    background: #1c2c50;
    border-color: #26365c;
}

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

body.dark-only .sfmd-rail-count {
    background: #223b66;
    color: #d4ddef;
}

body.dark-only .sfmd-fy,
body.dark-only .sfmd-month,
body.dark-only .sfmd-tool-btn {
    background: #1c2c50;
    border-color: #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: #d4ddef;
}

body.dark-only .sfmd-fy-tick {
    background: #14213f;
    border-color: #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: #223b66;
    color: #9db8f5;
}

body.dark-only .sfmd-month.is-selected {
    background: #223b66;
}

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

body.dark-only .sfmd-chip {
    background: #1c2c50;
    border-color: #2b3d66;
    color: #d4ddef;
}

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