/* /Components/Layout/AppShell.razor.rz.scp.css */
/* =====================================================================
   GAINS — DashboardLayout.razor.css
   Scoped styles for the main app shell (sidebar + topbar + content)
   ===================================================================== */

/* ── CSS Variables ── */
.gains-shell[b-53favc5946] {
    --sb-width: 220px;
    --sb-collapsed-width: 56px;
    --topbar-h: 52px;
    --sb-bg: #0f2340;
    --sb-text: #b8cbe4;
    --sb-hover: #172d4a;
    --sb-active: #1a3a5c;
    --sb-active-text: #ffffff;
    --sb-section: #6b8aaa;
    --sb-border: rgba(255,255,255,0.07);
    --primary: #1a56a7;
    --primary-dark: #0f3d82;
    --primary-light: #e6f0fb;
    --bg: #f0f4f9;
    --card: #ffffff;
    --border: #dde3ed;
    --text: #1a2537;
    --muted: #64748b;
    --success: #16a34a;
    --success-bg: #dcfce7;
    --warning: #b45309;
    --warning-bg: #fef3c7;
    --danger: #b91c1c;
    --danger-bg: #fee2e2;
    --info: #0369a1;
    --info-bg: #e0f2fe;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
}

/* ── Shell ── */
.gains-shell[b-53favc5946] {
    display: flex;
    height: 100vh;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
}

/* ═══════════════════════════════
   SIDEBAR
═══════════════════════════════ */
.gains-sidebar[b-53favc5946] {
    width: var(--sb-width);
    min-width: var(--sb-width);
    background: var(--sb-bg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    transition: width 0.25s ease, min-width 0.25s ease;
    z-index: 100;
    flex-shrink: 0;
}

/* Collapsed state */
.gains-shell.sb-collapsed .gains-sidebar[b-53favc5946] {
    width: var(--sb-collapsed-width);
    min-width: var(--sb-collapsed-width);
}
.gains-shell.sb-collapsed .sb-label[b-53favc5946],
.gains-shell.sb-collapsed .sb-section-label[b-53favc5946],
.gains-shell.sb-collapsed .sb-chevron[b-53favc5946],
.gains-shell.sb-collapsed .sb-profile-info[b-53favc5946],
.gains-shell.sb-collapsed .sb-profile-caret[b-53favc5946],
.gains-shell.sb-collapsed .sb-logo-text[b-53favc5946],
.gains-shell.sb-collapsed .sb-profile-dropdown[b-53favc5946] { display: none; }
.gains-shell.sb-collapsed .sb-nav-item[b-53favc5946] { justify-content: center; padding: 10px 0; }
.gains-shell.sb-collapsed .sb-nav-children[b-53favc5946] { display: none !important; }

/* Logo */
.sb-logo[b-53favc5946] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
    border-bottom: 1px solid var(--sb-border);
    text-decoration: none;
    flex-shrink: 0;
}
.sb-logo-icon[b-53favc5946] {
    width: 32px; height: 32px;
    background: var(--primary);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sb-logo-text[b-53favc5946] { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 0.5px; }

/* Profile */
.sb-profile[b-53favc5946] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--sb-border);
    position: relative;
    flex-shrink: 0;
}
.sb-profile-trigger[b-53favc5946] {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
}
.sb-avatar[b-53favc5946], .tb-avatar[b-53favc5946] {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
    letter-spacing: 0.5px;
}
.sb-profile-info[b-53favc5946] { flex: 1; min-width: 0; }
.sb-profile-name[b-53favc5946] { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-profile-role[b-53favc5946] { font-size: 11px; color: var(--sb-section); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-profile-caret[b-53favc5946] { color: var(--sb-section); font-size: 12px; transition: transform 0.2s; }
.sb-profile-caret.open[b-53favc5946] { transform: rotate(180deg); }

/* Profile dropdown */
.sb-profile-dropdown[b-53favc5946] {
    position: absolute;
    left: 10px; right: 10px;
    top: calc(100% - 2px);
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 200;
    overflow: hidden;
    border: 1px solid var(--border);
}
.sb-pd-header[b-53favc5946] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
}
.sb-pd-name[b-53favc5946] { font-size: 13px; font-weight: 600; color: var(--text); }
.sb-pd-meta[b-53favc5946] { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sb-pd-item[b-53favc5946] {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; cursor: pointer;
    font-size: 13px; color: var(--text);
    text-decoration: none;
    background: none; border: none; width: 100%;
    font-family: inherit; text-align: left;
    transition: background 0.12s;
}
.sb-pd-item:hover[b-53favc5946] { background: #f1f5f9; }
.sb-pd-item i[b-53favc5946] { width: 16px; text-align: center; color: var(--muted); font-size: 15px; }
.sb-pd-divider[b-53favc5946] { height: 1px; background: var(--border); margin: 2px 0; }
.sb-pd-logout[b-53favc5946] { color: var(--danger) !important; }
.sb-pd-logout i[b-53favc5946] { color: var(--danger) !important; }
.sb-pd-logout:hover[b-53favc5946] { background: #fff5f5 !important; }

/* Nav */
.sb-nav[b-53favc5946] { flex: 1; overflow-y: auto; padding: 8px 0; }
.sb-nav[b-53favc5946]::-webkit-scrollbar { width: 3px; }
.sb-nav[b-53favc5946]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.sb-section-label[b-53favc5946] {
    font-size: 10px; font-weight: 600; letter-spacing: 0.8px;
    color: var(--sb-section);
    padding: 10px 14px 4px;
    text-transform: uppercase;
}

/* Nav group trigger (parent item) */
.sb-nav-item[b-53favc5946] {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 14px; cursor: pointer;
    color: var(--sb-text);
    font-size: 13px; transition: background 0.12s;
    user-select: none; justify-content: space-between;
}
.sb-nav-item:hover[b-53favc5946] { background: var(--sb-hover); color: #fff; }
.sb-nav-item.active[b-53favc5946] { background: var(--sb-active); color: var(--sb-active-text); }
.sb-nav-item.active .sb-nav-icon[b-53favc5946] { color: #4e9cf5; }

.sb-nav-item-left[b-53favc5946] { display: flex; align-items: center; gap: 9px; }
.sb-nav-icon[b-53favc5946] { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }
.sb-label[b-53favc5946] { white-space: nowrap; }
.sb-chevron[b-53favc5946] { font-size: 12px; color: var(--sb-section); transition: transform 0.2s; }
.sb-chevron.open[b-53favc5946] { transform: rotate(180deg); }

/* Nav children */
.sb-nav-children[b-53favc5946] { }
.sb-nav-child[b-53favc5946] {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 42px;
    font-size: 12.5px; color: #8aa5c4; cursor: pointer;
    transition: background 0.12s; border-left: 2px solid transparent;
    text-decoration: none;
}
.sb-nav-child:hover[b-53favc5946] { background: var(--sb-hover); color: #d0dfee; border-left-color: rgba(255,255,255,0.15); }
.sb-nav-child.active[b-53favc5946] { color: #fff; background: rgba(26,86,167,0.25); border-left-color: #4e9cf5; }
.sb-nav-child[b-53favc5946]::before {
    content: "";
    width: 4px; height: 4px; border-radius: 50%;
    background: currentColor; flex-shrink: 0; opacity: 0.5;
}
.sb-nav-child.active[b-53favc5946]::before { opacity: 1; background: #4e9cf5; }

/* Leaf nav item (no children) */
.sb-nav-leaf[b-53favc5946] { justify-content: flex-start; }

/* Footer collapse button */
.sb-footer[b-53favc5946] {
    padding: 10px 14px;
    border-top: 1px solid var(--sb-border);
    flex-shrink: 0;
}
.sb-collapse-btn[b-53favc5946] {
    display: flex; align-items: center; gap: 8px;
    width: 100%; background: none; border: none; cursor: pointer;
    color: var(--sb-section); font-size: 12px;
    padding: 6px 0; transition: color 0.15s; font-family: inherit;
}
.sb-collapse-btn:hover[b-53favc5946] { color: #fff; }

/* ═══════════════════════════════
   MAIN
═══════════════════════════════ */
.gains-main[b-53favc5946] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Topbar */
.gains-topbar[b-53favc5946] {
    height: var(--topbar-h);
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px;
    flex-shrink: 0;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.gains-topbar-left[b-53favc5946]  { display: flex; align-items: center; gap: 12px; }
.gains-topbar-right[b-53favc5946] { display: flex; align-items: center; gap: 8px; }

.tb-hamburger[b-53favc5946] {
    background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: 18px; padding: 4px;
    display: flex; align-items: center;
    border-radius: 6px; transition: background 0.12s;
}
.tb-hamburger:hover[b-53favc5946] { background: #f1f5f9; color: var(--text); }

/* Breadcrumb */
.gains-breadcrumb[b-53favc5946] { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.bc-parent[b-53favc5946] { color: var(--muted); }
.bc-sep[b-53favc5946] { font-size: 11px; color: #cbd5e1; }
.bc-current[b-53favc5946] { color: var(--text); font-weight: 600; }

/* FY selector */
.tb-fy-select[b-53favc5946] {
    padding: 5px 10px; border-radius: var(--radius);
    border: 1px solid var(--border); background: #f8fafc;
    font-size: 12.5px; color: var(--text); cursor: pointer;
    font-family: inherit;
}
.tb-fy-select:hover[b-53favc5946] { background: #f1f5f9; }

/* Icon button */
.tb-icon-btn[b-53favc5946] {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border); background: #f8fafc;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 16px;
    position: relative; transition: background 0.12s;
}
.tb-icon-btn:hover[b-53favc5946] { background: var(--primary-light); color: var(--primary); }
.tb-notif-dot[b-53favc5946] {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger); border: 2px solid #fff;
    position: absolute; top: 2px; right: 2px;
}

/* Notifications panel */
.tb-notif-wrap[b-53favc5946] { position: relative; }
.tb-notif-panel[b-53favc5946] {
    position: absolute; right: 0; top: calc(100% + 8px);
    width: 300px; background: var(--card);
    border-radius: var(--radius); border: 1px solid var(--border);
    box-shadow: var(--shadow-md); z-index: 300; overflow: hidden;
}
.tb-notif-hdr[b-53favc5946] {
    padding: 11px 14px; border-bottom: 1px solid var(--border);
    font-size: 13px; font-weight: 600; color: var(--text);
    display: flex; justify-content: space-between; align-items: center;
}
.tb-notif-mark[b-53favc5946] { font-size: 11px; color: var(--primary); cursor: pointer; font-weight: 400; background: none; border: none; font-family: inherit; }
.tb-notif-item[b-53favc5946] { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f8fafc; }
.tb-notif-item:last-child[b-53favc5946] { border-bottom: none; }
.tb-ndot[b-53favc5946] { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); margin-top: 4px; flex-shrink: 0; }
.tb-ndot.read[b-53favc5946] { background: var(--border); }
.tb-ntext[b-53favc5946] { font-size: 12.5px; color: var(--text); line-height: 1.4; }
.tb-ntime[b-53favc5946] { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Topbar buttons */
.tb-btn[b-53favc5946] {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--card);
    cursor: pointer; font-size: 12.5px; color: var(--text);
    font-family: inherit; transition: background 0.12s;
}
.tb-btn:hover[b-53favc5946] { background: #f1f5f9; }
.tb-btn.primary[b-53favc5946] { background: var(--primary); color: #fff; border-color: var(--primary); }
.tb-btn.primary:hover[b-53favc5946] { background: var(--primary-dark); }

/* User pill */
.tb-user-pill[b-53favc5946] { display: flex; align-items: center; gap: 8px; }
.tb-avatar[b-53favc5946] { width: 32px; height: 32px; font-size: 11px; }
.tb-user-name[b-53favc5946] { font-size: 13px; font-weight: 500; color: var(--text); }

/* ═══════════════════════════════
   CONTENT
═══════════════════════════════ */
.gains-content[b-53favc5946] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: var(--bg);
}
.gains-content[b-53favc5946]::-webkit-scrollbar { width: 4px; }
.gains-content[b-53favc5946]::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ═══════════════════════════════
   LOGOUT MODAL
═══════════════════════════════ */
.gains-modal-overlay[b-53favc5946] {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 500;
    display: flex; align-items: center; justify-content: center;
}
.gains-modal[b-53favc5946] {
    background: var(--card);
    border-radius: 14px;
    padding: 30px 28px 24px;
    width: 340px;
    box-shadow: var(--shadow-md);
    text-align: center;
}
.gains-modal-icon[b-53favc5946] { font-size: 40px; color: var(--danger); margin-bottom: 12px; }
.gains-modal-title[b-53favc5946] { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.gains-modal-sub[b-53favc5946] { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.gains-modal-actions[b-53favc5946] { display: flex; gap: 10px; justify-content: center; }
.gains-modal-btn[b-53favc5946] {
    padding: 8px 24px; border-radius: var(--radius);
    font-size: 13px; font-family: inherit;
    cursor: pointer; font-weight: 600; transition: background 0.12s;
    border: 1px solid var(--border);
}
.gains-modal-btn.cancel[b-53favc5946] { background: var(--card); color: var(--text); }
.gains-modal-btn.cancel:hover[b-53favc5946] { background: #f1f5f9; }
.gains-modal-btn.confirm[b-53favc5946] { background: var(--danger); color: #fff; border-color: var(--danger); }
.gains-modal-btn.confirm:hover[b-53favc5946] { background: #991b1b; }
/* /Components/Layout/DashboardLayout.razor.rz.scp.css */
/* =====================================================================
   GAINS — DashboardLayout.razor.css  (v2)
   Pure SSR layout — all interactivity via app.js
   ===================================================================== */

/* ── Root tokens ── */
.gains-shell[b-5wcplwsv0q] {
    --sb-w: 220px;
    --sb-collapsed-w: 56px;
    --topbar-h: 52px;
    --footer-h: 44px;
    --sb-bg: #0f2340;
    --sb-text: #b8cbe4;
    --sb-hover: #172d4a;
    --sb-active: #1a3a5c;
    --sb-border: rgba(255,255,255,0.07);
    --primary: #1a56a7;
    --primary-dark: #0f3d82;
    --primary-light: #e6f0fb;
    --bg: #f0f4f9;
    --card: #ffffff;
    --border: #dde3ed;
    --text: #1a2537;
    --muted: #64748b;
    --danger: #b91c1c;
    --danger-light: #fff5f5;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.14);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.18);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    height: 100vh;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
}

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */
.gains-sidebar[b-5wcplwsv0q] {
    width: var(--sb-w);
    min-width: var(--sb-w);
    background: var(--sb-bg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    transition: width 0.28s var(--ease), min-width 0.28s var(--ease);
    flex-shrink: 0;
    z-index: 100;
}

/* ── Collapsed state (JS adds .sb-collapsed to #gains-shell) ── */
.gains-shell.sb-collapsed .gains-sidebar[b-5wcplwsv0q] {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
    border: none;
}

.gains-shell.sb-collapsed .sb-label[b-5wcplwsv0q] {
    opacity: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}

.gains-shell.sb-collapsed .sb-nav-children[b-5wcplwsv0q] {
    display: none !important;
}

.gains-shell.sb-collapsed .sb-nav-item[b-5wcplwsv0q] {
    justify-content: center;
    padding: 10px 0;
}

.gains-shell.sb-collapsed .sb-section-label[b-5wcplwsv0q] {
    opacity: 0;
}

.gains-shell.sb-collapsed .sb-profile-trigger[b-5wcplwsv0q] {
    justify-content: center;
}

/* ── Logo ── */
.sb-logo[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    width: fit-content;
    margin: 14px 14px;
    background: #1ab99a;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 6px;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-align: left;
    flex-shrink: 0;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 6px rgba(26,185,154,0.3);
}

    .sb-logo:hover[b-5wcplwsv0q] {
        background: #0e9e83;
    }

    .sb-logo i[b-5wcplwsv0q] {
        font-size: 15px;
        color: #fff;
    }

.sb-label[b-5wcplwsv0q] {
    transition: opacity 0.2s var(--ease), width 0.2s var(--ease);
}

.sb-logo-text[b-5wcplwsv0q] {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ══════════════════════════════════════
   PROFILE BLOCK
══════════════════════════════════════ */
.sb-profile[b-5wcplwsv0q] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--sb-border);
    position: relative;
    flex-shrink: 0;
}

.sb-profile-trigger[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 5px 6px;
    border-radius: var(--radius);
    transition: background 0.15s;
}

    .sb-profile-trigger:hover[b-5wcplwsv0q] {
        background: rgba(255,255,255,0.06);
    }

.sb-avatar[b-5wcplwsv0q], .tb-avatar[b-5wcplwsv0q] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #2472d4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}

.sb-profile-info[b-5wcplwsv0q] {
    flex: 1;
    min-width: 0;
}

.sb-profile-name[b-5wcplwsv0q] {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-profile-role[b-5wcplwsv0q] {
    font-size: 11px;
    color: #6b8aaa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-profile-caret[b-5wcplwsv0q] {
    font-size: 12px;
    color: #6b8aaa;
    transition: transform 0.25s var(--ease);
    flex-shrink: 0;
}

    .sb-profile-caret.open[b-5wcplwsv0q] {
        transform: rotate(180deg);
    }

/* ── Profile Dropdown ── */
.sb-profile-dropdown[b-5wcplwsv0q] {
    position: absolute;
    left: 10px;
    right: 10px;
    top: calc(100% - 4px);
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    border: 1px solid var(--border);
    overflow: hidden;
    /* Slide-down animation */
    opacity: 0;
    transform: translateY(-8px) scaleY(0.95);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

    .sb-profile-dropdown.open[b-5wcplwsv0q] {
        opacity: 1;
        transform: translateY(0) scaleY(1);
        pointer-events: all;
    }

.sb-pd-header[b-5wcplwsv0q] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, #f8fafc 0%, #f0f4f9 100%);
}

.sb-pd-avatar-row[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.sb-pd-avatar-lg[b-5wcplwsv0q] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #2472d4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.sb-pd-name[b-5wcplwsv0q] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.sb-pd-meta[b-5wcplwsv0q] {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}

    .sb-pd-meta i[b-5wcplwsv0q] {
        font-size: 11px;
        flex-shrink: 0;
    }

.sb-pd-item[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    font-family: inherit;
    text-align: left;
    transition: background 0.12s, padding-left 0.12s;
}

    .sb-pd-item:hover[b-5wcplwsv0q] {
        background: #f1f5f9;
        padding-left: 18px;
    }

    .sb-pd-item i[b-5wcplwsv0q] {
        width: 17px;
        text-align: center;
        color: var(--muted);
        font-size: 15px;
        flex-shrink: 0;
    }

.sb-pd-divider[b-5wcplwsv0q] {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.sb-pd-logout[b-5wcplwsv0q] {
    color: var(--danger) !important;
}

    .sb-pd-logout i[b-5wcplwsv0q] {
        color: var(--danger) !important;
    }

    .sb-pd-logout:hover[b-5wcplwsv0q] {
        background: var(--danger-light) !important;
        padding-left: 18px;
    }

/* ══════════════════════════════════════
   NAVIGATION
══════════════════════════════════════ */
.sb-nav[b-5wcplwsv0q] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

    .sb-nav[b-5wcplwsv0q]::-webkit-scrollbar {
        width: 3px;
    }

    .sb-nav[b-5wcplwsv0q]::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.1);
        border-radius: 3px;
    }

.sb-section-label[b-5wcplwsv0q] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: #6b8aaa;
    padding: 10px 14px 4px;
    text-transform: uppercase;
    transition: opacity 0.2s;
}

.sb-nav-item[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    cursor: pointer;
    color: var(--sb-text);
    font-size: 13px;
    transition: background 0.12s, color 0.12s;
    user-select: none;
    justify-content: space-between;
}

    .sb-nav-item:hover[b-5wcplwsv0q] {
        background: var(--sb-hover);
        color: #fff;
    }

    .sb-nav-item.active[b-5wcplwsv0q] {
        background: var(--sb-active);
        color: #fff;
    }

        .sb-nav-item.active .sb-nav-icon[b-5wcplwsv0q] {
            color: #4e9cf5;
        }

.sb-nav-item-left[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.sb-nav-icon[b-5wcplwsv0q] {
    font-size: 16px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.sb-chevron[b-5wcplwsv0q] {
    font-size: 12px;
    color: #6b8aaa;
    transition: transform 0.25s var(--ease);
}

    .sb-chevron.open[b-5wcplwsv0q] {
        transform: rotate(180deg);
    }

/* ── Nav children (smooth accordion) ── */
.sb-nav-children[b-5wcplwsv0q] {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s var(--ease), opacity 0.2s;
    opacity: 0;
}

    .sb-nav-children.open[b-5wcplwsv0q] {
        max-height: 600px; /* large enough for any group */
        opacity: 1;
    }

.sb-nav-child[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 42px;
    font-size: 12.5px;
    color: #8aa5c4;
    cursor: pointer;
    transition: background 0.12s, border-left-color 0.12s, color 0.12s;
    border-left: 2px solid transparent;
    text-decoration: none;
}

    .sb-nav-child:hover[b-5wcplwsv0q] {
        background: var(--sb-hover);
        color: #d0dfee;
        border-left-color: rgba(255,255,255,0.15);
    }

    .sb-nav-child.active[b-5wcplwsv0q] {
        color: #fff;
        background: rgba(26,86,167,0.25);
        border-left-color: #4e9cf5;
    }

    .sb-nav-child[b-5wcplwsv0q]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
        opacity: 0.5;
    }

    .sb-nav-child.active[b-5wcplwsv0q]::before {
        opacity: 1;
        background: #4e9cf5;
    }

.sb-nav-leaf[b-5wcplwsv0q] {
    justify-content: flex-start;
}

/* ── Sidebar footer (collapse btn) ── */
.sb-footer[b-5wcplwsv0q] {
    padding: 0px 14px;
    border-top: 1px solid var(--sb-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-help-btn[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: 100%;
    height: var(--footer-h);
    box-sizing: border-box;
    padding: 0 12px;
    border: none;
    background: none;
    color: #b9c9dc;
    text-decoration: none;
    transition: color 0.15s;
}

    .sb-help-btn:hover[b-5wcplwsv0q] {
        color: #fff;
    }

.sb-help-icon[b-5wcplwsv0q] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

.sb-help-text[b-5wcplwsv0q] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.gains-shell.sb-collapsed .sb-help-btn[b-5wcplwsv0q] {
    padding: 0;
}

.gains-shell.sb-collapsed .sb-help-text[b-5wcplwsv0q] {
    display: none;
}

.sb-collapse-btn[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    color: #6b8aaa;
    font-size: 12px;
    padding: 6px 0;
    transition: color 0.15s;
    font-family: inherit;
}

    .sb-collapse-btn:hover[b-5wcplwsv0q] {
        color: #fff;
    }

.gains-shell.sb-collapsed .sb-collapse-btn[b-5wcplwsv0q] {
    justify-content: center;
}

/* ══════════════════════════════════════
   MAIN AREA
══════════════════════════════════════ */
.gains-main[b-5wcplwsv0q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ── Topbar ── */
.gains-topbar[b-5wcplwsv0q] {
    height: var(--topbar-h);
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    flex-shrink: 0;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.gains-topbar-left[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gains-topbar-right[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── GAINS branded sidebar toggle — exact match to old ASPX green button ── */
.tb-gains-toggle[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #1ab99a;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    font-weight: 200;
    padding: 6px 13px;
    border-radius: 6px;
    font-family: inherit;
    letter-spacing: 0.04em;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 6px rgba(26,185,154,0.3);
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
}

    .tb-gains-toggle:hover[b-5wcplwsv0q] {
        background: #0e9e83;
        box-shadow: 0 3px 10px rgba(26,185,154,0.4);
    }

    .tb-gains-toggle:active[b-5wcplwsv0q] {
        background: #0b8a72;
        box-shadow: none;
    }

.tb-toggle-icon[b-5wcplwsv0q] {
    font-size: 16px;
    display: flex;
    align-items: center;
}

.tb-toggle-label[b-5wcplwsv0q] {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.06em;
}

.gains-breadcrumb[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.bc-parent[b-5wcplwsv0q] {
    color: var(--muted);
}

.bc-sep[b-5wcplwsv0q] {
    font-size: 11px;
    color: #cbd5e1;
}

.bc-current[b-5wcplwsv0q] {
    color: var(--text);
    font-weight: 600;
}

.tb-fy-badge[b-5wcplwsv0q] {
    padding: 5px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: #f8fafc;
    font-size: 12.5px;
    color: var(--text);
}

.tb-icon-btn[b-5wcplwsv0q] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #f8fafc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 16px;
    position: relative;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

    .tb-icon-btn:hover[b-5wcplwsv0q] {
        background: var(--primary-light);
        color: var(--primary);
        border-color: #b8d4f5;
    }

.tb-notif-dot[b-5wcplwsv0q] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    border: 2px solid var(--card);
    position: absolute;
    top: 2px;
    right: 2px;
    transition: transform 0.2s;
}

    .tb-notif-dot.hidden[b-5wcplwsv0q] {
        display: none;
    }

.tb-notif-wrap:hover .tb-notif-dot[b-5wcplwsv0q] {
    transform: scale(1.2);
}

/* ── Notifications panel ── */
.tb-notif-wrap[b-5wcplwsv0q] {
    position: relative;
}

.tb-notif-panel[b-5wcplwsv0q] {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 310px;
    background: var(--card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 300;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

    .tb-notif-panel.open[b-5wcplwsv0q] {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: all;
    }

.tb-notif-hdr[b-5wcplwsv0q] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

.tb-notif-mark[b-5wcplwsv0q] {
    font-size: 11px;
    color: var(--primary);
    cursor: pointer;
    font-weight: 500;
    background: none;
    border: none;
    font-family: inherit;
    padding: 3px 8px;
    border-radius: 4px;
    transition: background 0.12s;
}

    .tb-notif-mark:hover[b-5wcplwsv0q] {
        background: var(--primary-light);
    }

.tb-notif-item[b-5wcplwsv0q] {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s;
    cursor: pointer;
}

    .tb-notif-item:last-child[b-5wcplwsv0q] {
        border-bottom: none;
    }

    .tb-notif-item:hover[b-5wcplwsv0q] {
        background: #f8fafc;
    }

.tb-ndot[b-5wcplwsv0q] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    margin-top: 5px;
    flex-shrink: 0;
}

    .tb-ndot.read[b-5wcplwsv0q] {
        background: var(--border);
    }

.tb-ntext[b-5wcplwsv0q] {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.4;
}

.tb-ntime[b-5wcplwsv0q] {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

/* ── Topbar buttons ── */
.tb-btn[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    cursor: pointer;
    font-size: 12.5px;
    color: var(--text);
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s;
}

    .tb-btn:hover[b-5wcplwsv0q] {
        background: #f1f5f9;
        border-color: #c7d2e0;
    }

.tb-user-pill[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 5px 8px;
    border-radius: var(--radius);
    transition: background 0.15s;
}

    .tb-user-pill:hover[b-5wcplwsv0q] {
        background: #f1f5f9;
    }

.tb-avatar[b-5wcplwsv0q] {
    width: 32px;
    height: 32px;
    font-size: 11px;
}

.tb-user-name[b-5wcplwsv0q] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

/* ── Topbar Profile Dropdown ── */
.tb-profile-wrap[b-5wcplwsv0q] {
    position: relative;
    flex-shrink: 0;
}

.tb-profile-caret[b-5wcplwsv0q] {
    font-size: 12px;
    color: var(--muted);
    transition: transform 0.25s var(--ease);
    flex-shrink: 0;
}

    .tb-profile-caret.open[b-5wcplwsv0q] {
        transform: rotate(180deg);
    }

.tb-profile-dropdown[b-5wcplwsv0q] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 280px;
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    border: 1px solid var(--border);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px) scaleY(0.95);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

    .tb-profile-dropdown.open[b-5wcplwsv0q] {
        opacity: 1;
        transform: translateY(0) scaleY(1);
        pointer-events: all;
    }

/* ── Content area ── */
.gains-content[b-5wcplwsv0q] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: var(--bg);
}

    .gains-content[b-5wcplwsv0q]::-webkit-scrollbar {
        width: 4px;
    }

    .gains-content[b-5wcplwsv0q]::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 4px;
    }

/* ── Footer ── */
.gains-footer[b-5wcplwsv0q] {
    flex-shrink: 0;
    height: var(--footer-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    background: var(--card);
    border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════
   LOGOUT MODAL  (improved)
══════════════════════════════════════ */
.gains-modal-overlay[b-5wcplwsv0q] {
    display: flex; /* always flex — visibility via opacity/pointer-events */
    position: fixed;
    inset: 0;
    background: rgba(15, 35, 64, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 500;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s var(--ease), backdrop-filter 0.22s;
}

    .gains-modal-overlay.open[b-5wcplwsv0q] {
        opacity: 1;
        pointer-events: all;
    }

.gains-modal[b-5wcplwsv0q] {
    background: var(--card);
    border-radius: 18px;
    padding: 32px 28px 26px;
    width: 360px;
    max-width: calc(100vw - 32px);
    box-shadow: var(--shadow-lg);
    text-align: center;
    transform: scale(0.88) translateY(12px);
    transition: transform 0.25s var(--ease);
}

.gains-modal-overlay.open .gains-modal[b-5wcplwsv0q] {
    transform: scale(1) translateY(0);
}

/* Icon circle */
.gains-modal-icon-wrap[b-5wcplwsv0q] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 0 0 8px #fee2e233;
}

.gains-modal-icon[b-5wcplwsv0q] {
    font-size: 28px;
    color: var(--danger);
    line-height: 1;
}

.gains-modal-title[b-5wcplwsv0q] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.gains-modal-sub[b-5wcplwsv0q] {
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 26px;
    line-height: 1.5;
}

.gains-modal-actions[b-5wcplwsv0q] {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.gains-modal-btn[b-5wcplwsv0q] {
    padding: 10px 28px;
    border-radius: var(--radius);
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    border: 1px solid var(--border);
    min-width: 110px;
}

    .gains-modal-btn:active[b-5wcplwsv0q] {
        transform: scale(0.97);
    }

    .gains-modal-btn.cancel[b-5wcplwsv0q] {
        background: var(--card);
        color: var(--text);
    }

        .gains-modal-btn.cancel:hover[b-5wcplwsv0q] {
            background: #f1f5f9;
        }

    .gains-modal-btn.confirm[b-5wcplwsv0q] {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        color: #fff;
        border-color: #dc2626;
        box-shadow: 0 2px 8px rgba(185,28,28,0.35);
    }

        .gains-modal-btn.confirm:hover[b-5wcplwsv0q] {
            background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
            box-shadow: 0 4px 14px rgba(185,28,28,0.45);
        }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 768px) {
    .gains-shell[b-5wcplwsv0q] {
        --sb-w: 200px;
    }

    .tb-user-name[b-5wcplwsv0q], .tb-btn-label[b-5wcplwsv0q] {
        display: none;
    }

    .tb-toggle-label[b-5wcplwsv0q] {
        display: none;
    }

    .tb-gains-toggle[b-5wcplwsv0q] {
        padding: 6px 10px;
    }
}

/* Hide all sidebar content when fully collapsed */
.gains-shell.sb-collapsed .sb-label[b-5wcplwsv0q],
.gains-shell.sb-collapsed .sb-nav-children[b-5wcplwsv0q],
.gains-shell.sb-collapsed .sb-section-label[b-5wcplwsv0q],
.gains-shell.sb-collapsed .sb-profile[b-5wcplwsv0q],
.gains-shell.sb-collapsed .sb-nav[b-5wcplwsv0q],
.gains-shell.sb-collapsed .sb-logo[b-5wcplwsv0q],
.gains-shell.sb-collapsed .sb-footer[b-5wcplwsv0q] {
    opacity: 0;
    pointer-events: none;
}

/* ── Level-3 nav (Masters sub-categories) ── */
.sb-nav-sub[b-5wcplwsv0q] {
    padding: 7px 14px 7px 32px !important;
    font-size: 12.5px;
}

.sb-nav-icon-sm[b-5wcplwsv0q] {
    font-size: 14px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.sb-nav-children-l3 .sb-nav-child[b-5wcplwsv0q] {
    padding-left: 54px;
    font-size: 12px;
    color: #7a9ab8;
    border-left: 2px solid transparent;
}

    .sb-nav-children-l3 .sb-nav-child:hover[b-5wcplwsv0q] {
        background: var(--sb-hover);
        color: #c8ddf0;
        border-left-color: rgba(255,255,255,0.1);
    }

    .sb-nav-children-l3 .sb-nav-child.active[b-5wcplwsv0q] {
        color: #fff;
        background: rgba(26,86,167,0.2);
        border-left-color: #4e9cf5;
    }

    .sb-nav-children-l3 .sb-nav-child[b-5wcplwsv0q]::before {
        content: "";
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
        opacity: 0.4;
    }
/* Siddharth 29 JUN 2026 16 :56 */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =====================================================
   GAINS — MainLayout.razor.css
   ===================================================== */

.gains-layout[b-buakehe8mn] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* Blazor error UI */
#blazor-error-ui[b-buakehe8mn] {
    background: #fef2f2;
    border-top: 1px solid #fecaca;
    color: #b91c1c;
    display: none;
    font-size: 14px;
    padding: 10px 16px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

    #blazor-error-ui .reload[b-buakehe8mn] {
        color: #1AB99A;
        font-weight: 600;
        margin-left: 8px;
        text-decoration: none;
    }

    #blazor-error-ui .dismiss[b-buakehe8mn] {
        cursor: pointer;
        float: right;
        font-weight: bold;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-5nvn20xp0v],
.components-reconnect-repeated-attempt-visible[b-5nvn20xp0v],
.components-reconnect-failed-visible[b-5nvn20xp0v],
.components-pause-visible[b-5nvn20xp0v],
.components-resume-failed-visible[b-5nvn20xp0v],
.components-rejoining-animation[b-5nvn20xp0v] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-retrying[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-failed[b-5nvn20xp0v],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-5nvn20xp0v] {
    display: block;
}


#components-reconnect-modal[b-5nvn20xp0v] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-5nvn20xp0v 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-5nvn20xp0v 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-5nvn20xp0v 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-5nvn20xp0v]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-5nvn20xp0v 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-5nvn20xp0v {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-5nvn20xp0v {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-5nvn20xp0v {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-5nvn20xp0v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-5nvn20xp0v] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-5nvn20xp0v] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-5nvn20xp0v] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-5nvn20xp0v] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-5nvn20xp0v] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-5nvn20xp0v] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-5nvn20xp0v 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-5nvn20xp0v] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-5nvn20xp0v {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Dashboard/Dashboard.razor.rz.scp.css */
/* =====================================================================
   GAINS — Dashboard.razor.css   (page-scoped styles)
   ===================================================================== */

.dash-page[b-uvd6ide2bl] { display: flex; flex-direction: column; gap: 16px; }

/* ── Page header ── */
.dash-hdr[b-uvd6ide2bl] { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.dash-title[b-uvd6ide2bl] { font-size: 20px; font-weight: 700; color: #1a2537; margin: 0; }
.dash-sub[b-uvd6ide2bl] { font-size: 12px; color: #64748b; margin: 2px 0 0; }
.dash-hdr-actions[b-uvd6ide2bl] { display: flex; gap: 8px; }
.dash-btn[b-uvd6ide2bl] {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 8px;
    border: 1px solid #dde3ed; background: #fff;
    cursor: pointer; font-size: 12.5px; color: #1a2537;
    font-family: inherit; transition: background 0.12s;
}
.dash-btn:hover[b-uvd6ide2bl] { background: #f1f5f9; }
.dash-btn.primary[b-uvd6ide2bl] { background: #1a56a7; color: #fff; border-color: #1a56a7; }
.dash-btn.primary:hover[b-uvd6ide2bl] { background: #0f3d82; }

/* ── Stats row ── */
.dash-stats[b-uvd6ide2bl] { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.dash-stat-card[b-uvd6ide2bl] {
    background: #fff; border: 1px solid #dde3ed;
    border-radius: 8px; padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.dash-stat-top[b-uvd6ide2bl] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.dash-stat-icon[b-uvd6ide2bl] {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
}
.dash-stat-icon.blue[b-uvd6ide2bl]  { background: #e0f2fe; color: #0369a1; }
.dash-stat-icon.green[b-uvd6ide2bl] { background: #dcfce7; color: #16a34a; }
.dash-stat-icon.amber[b-uvd6ide2bl] { background: #fef3c7; color: #b45309; }
.dash-stat-icon.red[b-uvd6ide2bl]   { background: #fee2e2; color: #b91c1c; }
.dash-trend[b-uvd6ide2bl] {
    font-size: 11px; font-weight: 600;
    padding: 2px 6px; border-radius: 4px;
    display: inline-flex; align-items: center; gap: 2px;
}
.dash-trend.up[b-uvd6ide2bl]      { background: #dcfce7; color: #16a34a; }
.dash-trend.down[b-uvd6ide2bl]    { background: #fee2e2; color: #b91c1c; }
.dash-trend.neutral[b-uvd6ide2bl] { background: #f1f5f9; color: #64748b; }
.dash-stat-val[b-uvd6ide2bl]   { font-size: 22px; font-weight: 700; color: #1a2537; }
.dash-stat-label[b-uvd6ide2bl] { font-size: 12px; color: #64748b; margin-top: 2px; }

/* ── Card ── */
.dash-card[b-uvd6ide2bl] {
    background: #fff; border: 1px solid #dde3ed;
    border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
}
.dash-card-hdr[b-uvd6ide2bl] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px 11px; border-bottom: 1px solid #dde3ed;
}
.dash-card-title[b-uvd6ide2bl]  { font-size: 13px; font-weight: 600; color: #1a2537; }
.dash-card-action[b-uvd6ide2bl] { font-size: 12px; color: #1a56a7; text-decoration: none; cursor: pointer; }
.dash-card-action:hover[b-uvd6ide2bl] { text-decoration: underline; }
.dash-card-body[b-uvd6ide2bl]   { padding: 14px 16px; }

/* ── Panels row ── */
.dash-panels[b-uvd6ide2bl] { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }

/* Bar chart */
.dash-bar-row[b-uvd6ide2bl] { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.dash-bar-row:last-child[b-uvd6ide2bl] { margin-bottom: 0; }
.dash-bar-label[b-uvd6ide2bl] { font-size: 12px; color: #64748b; width: 110px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar-track[b-uvd6ide2bl] { flex: 1; height: 7px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.dash-bar-fill[b-uvd6ide2bl]  { height: 100%; border-radius: 4px; }
.dash-bar-amt[b-uvd6ide2bl]   { font-size: 12px; color: #1a2537; font-weight: 600; width: 52px; text-align: right; }

/* Activity */
.dash-act-item[b-uvd6ide2bl] { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.dash-act-item:last-child[b-uvd6ide2bl] { border-bottom: none; padding-bottom: 0; }
.dash-act-dot[b-uvd6ide2bl] { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.dash-act-dot.blue[b-uvd6ide2bl]  { background: #1a56a7; }
.dash-act-dot.green[b-uvd6ide2bl] { background: #16a34a; }
.dash-act-dot.amber[b-uvd6ide2bl] { background: #d97706; }
.dash-act-dot.red[b-uvd6ide2bl]   { background: #b91c1c; }
.dash-act-text[b-uvd6ide2bl] { font-size: 12.5px; color: #1a2537; line-height: 1.4; }
.dash-act-meta[b-uvd6ide2bl] { font-size: 11px; color: #64748b; margin-top: 2px; }

/* ── Bottom row ── */
.dash-bottom[b-uvd6ide2bl] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* Table */
.dash-table[b-uvd6ide2bl] { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dash-table th[b-uvd6ide2bl] {
    text-align: left; font-weight: 600; font-size: 11px;
    color: #64748b; padding: 8px 12px;
    border-bottom: 1px solid #dde3ed;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.dash-table td[b-uvd6ide2bl] { padding: 8px 12px; border-bottom: 1px solid #f8fafc; color: #1a2537; }
.dash-table tr:last-child td[b-uvd6ide2bl] { border-bottom: none; }
.dash-table tr:hover td[b-uvd6ide2bl] { background: #f8fafc; }

/* Badges */
.dash-badge[b-uvd6ide2bl] {
    display: inline-flex; align-items: center;
    font-size: 10.5px; font-weight: 600; padding: 2px 8px;
    border-radius: 12px;
}
.dash-badge.approved[b-uvd6ide2bl] { background: #dcfce7; color: #16a34a; }
.dash-badge.pending[b-uvd6ide2bl]  { background: #fef3c7; color: #b45309; }
.dash-badge.overdue[b-uvd6ide2bl]  { background: #fee2e2; color: #b91c1c; }
.dash-badge.review[b-uvd6ide2bl]   { background: #e0f2fe; color: #0369a1; }

/* AR/AP */
.dash-arap-block[b-uvd6ide2bl]  { margin-bottom: 10px; }
.dash-arap-block:last-child[b-uvd6ide2bl] { margin-bottom: 0; }
.dash-arap-label[b-uvd6ide2bl] { font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
.dash-arap-val[b-uvd6ide2bl]   { font-size: 20px; font-weight: 700; }
.dash-arap-val.green[b-uvd6ide2bl] { color: #16a34a; }
.dash-arap-val.red[b-uvd6ide2bl]   { color: #b91c1c; }
.dash-arap-val.blue[b-uvd6ide2bl]  { color: #1a56a7; }
.dash-arap-sub[b-uvd6ide2bl]   { font-size: 11px; color: #64748b; margin-top: 2px; }
.dash-divider[b-uvd6ide2bl]    { height: 1px; background: #dde3ed; margin: 10px 0; }

/* Quick access */
.dash-qa-grid[b-uvd6ide2bl] { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.dash-qa-btn[b-uvd6ide2bl] {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 10px; border-radius: 8px;
    border: 1px solid #dde3ed; background: #fff;
    cursor: pointer; font-size: 12px; color: #1a2537;
    font-family: inherit; transition: background 0.12s, border-color 0.12s;
    text-align: left;
}
.dash-qa-btn:hover[b-uvd6ide2bl] { background: #e6f0fb; border-color: #93c4ef; color: #1a56a7; }
.dash-qa-btn i[b-uvd6ide2bl]    { font-size: 15px; color: #1a56a7; }

/* Role tags */
.dash-role-tags[b-uvd6ide2bl] { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid #dde3ed; }
.dash-role-tag[b-uvd6ide2bl] {
    font-size: 10.5px; padding: 3px 8px;
    border-radius: 4px;
    background: #e6f0fb; color: #1a56a7; font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .dash-stats[b-uvd6ide2bl]  { grid-template-columns: repeat(2, 1fr); }
    .dash-bottom[b-uvd6ide2bl] { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
    .dash-panels[b-uvd6ide2bl] { grid-template-columns: 1fr; }
    .dash-bottom[b-uvd6ide2bl] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Dashboard/GainsDashboard.razor.rz.scp.css */
/* =====================================================================
   GAINS — GainsDashboard.razor.css   (page-scoped styles)
   Reuses .bspl-page / .bspl-title-block / .bspl-gains-toggle (same title
   chrome as Balance Sheet / P&L) and .mu-card / .mu-empty from
   wwwroot/CSS/masters-forms.css for the common page chrome; only the
   elements unique to this dashboard (tabs bar, chart panels, pies, bars)
   are defined here.
   ===================================================================== */

/* ── Page shell: natural height (no forced 100%/inner overflow) — the
   page grows as more cards/rows are added and the page simply scrolls,
   instead of clipping content in a fixed-height inner box. ── */
.gd-page[b-rm4n3g3zob] {
    position: relative; /* anchors the <Loader> overlay (position:absolute; inset:0) to this page */
    background: #f3f3f4;
    min-height: 100%;
}

/* Title block + tabs bar stay pinned to the top while the grid below
   scrolls underneath them. */
.gd-header-sticky[b-rm4n3g3zob] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
}

/* ── Date range filter bar (From / To / Display), sits above the tabs ── */
.gd-filter-bar[b-rm4n3g3zob] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid #e7eaec;
    flex-wrap: wrap;
}
/* GlobalDatepicker's own .gdp-field-block/.gdp-wrap (from masters-forms.css)
   default to width:100%, which would stretch to fill this flex row — cap
   them to a fixed, comfortable width instead, matching the reference image. */
.gd-filter-bar[b-rm4n3g3zob]  .gdp-field-block {
    width: 220px;
    flex: 0 0 auto;
}
.gd-filter-bar[b-rm4n3g3zob]  .gdp-wrap {
    width: 100%;
}
.gd-display-btn[b-rm4n3g3zob] {
    padding: 9px 22px;
    border: none;
    border-radius: 6px;
    background: #1ab99a;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s;
}
.gd-display-btn:hover[b-rm4n3g3zob] { background: #159a80; }

/* ── Tabs bar (white strip, matches .bspl-btnbar) ── */
.gd-tabs-bar[b-rm4n3g3zob] {
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #e7eaec;
}

/* ── "Product / Company / Zone" dropdown, sits directly below the tabs bar.
   The Sales tab's FILTERS button renders on this same row (flex + space-
   between) instead of on its own line further down the page. ── */
.gd-viewby-bar[b-rm4n3g3zob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background: #fff;
    border-bottom: 1px solid #e7eaec;
}

/* ── Body under the toolbar (matches .bspl-content) — no longer its own
   scroll container; the page (and its .gains-content ancestor) scrolls
   as a whole so additional rows just extend the page length. ── */
.gd-body[b-rm4n3g3zob] {
    padding: 14px 16px 24px;
}

/* ── Tabs ── */
.gd-tabs[b-rm4n3g3zob] { display: flex; gap: 8px; }
.gd-tab[b-rm4n3g3zob] {
    padding: 7px 18px;
    border-radius: 6px;
    border: 1px solid #dde3ed;
    background: #fff;
    color: #1a2537;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.gd-tab:hover[b-rm4n3g3zob] { background: #f1f5f9; }
.gd-tab.active[b-rm4n3g3zob] {
    background: #1ab99a;
    border-color: #1ab99a;
    color: #fff;
}

/* ── Grid of 6 panels, 3 per row ── */
.gd-grid[b-rm4n3g3zob] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* Square card footprint (header + body together). Width is capped and
   centered within its grid column (instead of stretching to the full
   column width) so the squares stay a reasonable, consistent size
   regardless of viewport width — height just follows via aspect-ratio. */
.gd-card[b-rm4n3g3zob] {
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 520px;
    min-height: 0;
    justify-self: center;
}

/* ── Card header (light green gradient, matches .uf-header / .uf-section) ── */
.gd-card-hdr[b-rm4n3g3zob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(90deg, #f3fcf9 0%, #d6f2ea 100%);
    border-bottom: 1px solid #cdeee4;
    flex-wrap: wrap;
}
.gd-card-hdr-left[b-rm4n3g3zob] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gd-card-title[b-rm4n3g3zob] { font-size: 13px; font-weight: 650; color: #0f766e; }
.gd-card-hdr-icons[b-rm4n3g3zob] { display: flex; gap: 4px; }

.gd-card-icon-btn[b-rm4n3g3zob] {
    background: rgba(15, 118, 110, 0.08);
    border: none;
    color: #0f766e;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s;
}
.gd-card-icon-btn:hover[b-rm4n3g3zob] { background: rgba(15, 118, 110, 0.16); }
.gd-card-icon-btn i[b-rm4n3g3zob] { font-size: 13px; }

/* List/graph view-toggle button, when in "list" mode — otherwise clicking it
   swaps the icon with no visible confirmation that anything changed. */
.gd-card-icon-btn.active[b-rm4n3g3zob] {
    background: #0f766e;
    color: #fff;
}
.gd-card-icon-btn.active:hover[b-rm4n3g3zob] { background: #0c5f59; }

/* ── Period toggle (Q/Y, D/M/Y, AR/AP, DR/CR) ── */
.gd-period-toggle[b-rm4n3g3zob] { display: flex; gap: 3px; }
.gd-period-btn[b-rm4n3g3zob] {
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    border-radius: 5px;
    border: 1px solid #cdeee4;
    background: #fff;
    color: #0f766e;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.gd-period-btn:hover[b-rm4n3g3zob] { background: #eafaf4; }
.gd-period-btn.active[b-rm4n3g3zob] { background: #1ab99a; border-color: #1ab99a; color: #fff; }

/* ── Inline select (P/L dropdown, Bank & Cash "--Select--") ── */
.gd-select[b-rm4n3g3zob] {
    padding: 5px 26px 5px 9px;
    border: 1px solid #dde3ed;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    color: #1a2537;
    background: #fff;
    cursor: pointer;
    outline: none;
}
.gd-select:focus[b-rm4n3g3zob] { border-color: #1ab99a; }
.gd-select-inline[b-rm4n3g3zob] { max-width: 140px; }

.gd-card-subhdr[b-rm4n3g3zob] { padding: 6px 14px; }

/* ── Chart panel body — transparent so it blends straight into the card's
   own white background (premium light dashboard look) instead of the old
   black panel; fills whatever room is left below the header/subheader,
   no fixed min-height fighting the aspect-ratio. ── */
.gd-card-body-empty[b-rm4n3g3zob] { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.gd-chart-dark[b-rm4n3g3zob] {
    flex: 1;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 4px;
}

/* Live-data pie (Income + Expense) — Highcharts, rendered into these divs via
   JS interop (gainsRenderPieChart in GainsDashboard.js). Legend sits below
   the pie itself (Highcharts' own legend, enabled in JS) with a subtle hover
   scale/shadow highlight per slice — see gainsRenderPieChart. Fills the full
   panel (not forced square) since Highcharts needs the extra vertical room
   below the pie to lay out that legend row. */
.gd-highcharts-pie[b-rm4n3g3zob] {
    width: 100%;
    height: 100%;
}

/* ARAP's "list" view — a compact scrollable rows list, alternative to its
   pie ("graph" view), toggled via the card's header list/graph icon button. */
.gd-arap-list[b-rm4n3g3zob] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 2px 4px;
}
.gd-arap-row[b-rm4n3g3zob] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid #f1f5f9;
}
.gd-arap-row:last-child[b-rm4n3g3zob] { border-bottom: none; }
.gd-arap-dot[b-rm4n3g3zob] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 9px;
}
.gd-arap-name[b-rm4n3g3zob] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #1a2537;
}
.gd-arap-amt[b-rm4n3g3zob] {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 650;
    color: #0f172a;
    white-space: nowrap;
}

/* Loading / error / empty states — colors tuned for the light chart panel. */
.gd-chart-status[b-rm4n3g3zob] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 13px;
}
.gd-chart-error[b-rm4n3g3zob] { color: #e11d48; }
.gd-spin[b-rm4n3g3zob] { animation: gd-spin-b-rm4n3g3zob 0.9s linear infinite; }
@keyframes gd-spin-b-rm4n3g3zob { to { transform: rotate(360deg); } }

/* Profit / Loss chart — rendered via Highcharts (gainsRenderPlChart in
   GainsDashboard.js) into the #gd-pl-chart div below, the same JS-interop
   pattern the Income/Expense pies use. This div IS literal markup written
   directly in this component's .razor file, so (unlike the old hand-built
   SVG version) CSS isolation's scope attribute applies to it normally and
   these rules can safely stay scoped here. */
.gd-pl-body[b-rm4n3g3zob] { padding: 6px 4px 0; min-height: 0; overflow: hidden; }
.gd-pl-highcharts[b-rm4n3g3zob] { width: 100%; height: 100%; }

/* Not part of the grid — overrides the square .gd-card aspect-ratio so
   the "coming soon" placeholder is just a normal full-width banner. */
.gd-placeholder-card[b-rm4n3g3zob] { aspect-ratio: auto; max-width: none; min-height: 220px; display: flex; align-items: center; justify-content: center; }

/* =====================================================================
   Sales tab — same light "premium" card chrome as the Dashboard tab's
   panels above (.mu-card/.gd-card: white background, teal-gradient header,
   subtle border/shadow) rather than a separate dark theme, so every box
   looks consistent across tabs. DataTables + its Buttons extension are
   loaded scoped to this page only (see GainsDashboard.razor's
   <HeadContent>); the re-skin in masters-forms.css matches this same
   light look.
   ===================================================================== */
.gd-sales-wrap[b-rm4n3g3zob] { display: flex; flex-direction: column; gap: 14px; }

/* Toolbar row above the cards — hosts the Filter trigger (.bspl-filter-toggle,
   the same global class QLedger's own "FILTERS" button uses, from
   masters-forms.css) which opens the .mu-drawer slide-out panel below,
   again the same shared drawer QLedger uses for its own Filters panel. */
.gd-sales-status[b-rm4n3g3zob] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 40px 0;
    justify-content: center;
    color: #64748b;
    font-size: 13px;
}
.gd-sales-error[b-rm4n3g3zob] { color: #e11d48; }

/* Hosts the <Loader> overlay while Sales data is loading — Loader positions
   itself absolute/inset:0 against the nearest positioned ancestor, so this
   needs both position:relative and real height of its own (there's nothing
   else in this branch for it to size against otherwise). */
.gd-sales-loading[b-rm4n3g3zob] {
    position: relative;
    min-height: 420px;
}

/* Loader.razor's own overlay is a frosted white veil (for overlaying real
   content behind it elsewhere in the app) — here there's nothing behind it
   yet, so that veil just reads as a flat white box. ::deep reaches past the
   <Loader> component boundary to make just this instance's background
   properly transparent, without touching Loader.razor.css itself (which
   would affect every other page that uses it). */
.gd-sales-loading[b-rm4n3g3zob]  .gl-overlay {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* First row: 3 equal-width cards (grid + pie + bar). */
.gd-sales-row[b-rm4n3g3zob] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.gd-sales-card[b-rm4n3g3zob] {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dde3ed;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    min-height: 380px;
    overflow: hidden;
}
/* Second row: the monthly detail grid, full width. */
.gd-sales-card-full[b-rm4n3g3zob] {
    min-height: 0;
}

.gd-sales-card-hdr[b-rm4n3g3zob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(90deg, #f3fcf9 0%, #d6f2ea 100%);
    border-bottom: 1px solid #cdeee4;
    flex-wrap: wrap;
}
.gd-sales-card-title[b-rm4n3g3zob] { font-size: 13px; font-weight: 650; color: #0f766e; }

.gd-sales-card-body[b-rm4n3g3zob] {
    flex: 1;
    padding: 10px 12px;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.gd-sales-chart[b-rm4n3g3zob] { width: 100%; height: 100%; min-height: 320px; }

/* Note: the DataTables (dark theme) re-skin for the two Sales-tab grids
   lives in wwwroot/CSS/masters-forms.css, NOT here. Those grids' entire
   <table>/toolbar/pagination markup is injected via raw JS innerHTML (same
   "Blazor renders an empty container div, JS owns everything inside it"
   pattern the Highcharts charts use) — Blazor's CSS Isolation only ever
   attaches its scope attribute to elements Blazor itself rendered, so any
   rule here targeting that JS-injected markup would silently never match
   (the exact bug already hit once on this page with the old hand-built SVG
   P&L chart). Only .gd-sales-card-body itself (the real, Blazor-rendered
   container div) is styled from this file; everything DataTables draws
   inside it is styled globally instead. */

/* The Sales Filter panel itself is NOT styled here — it reuses the global
   .mu-drawer/.mu-drawer-overlay/.mu-drawer-hdr/.mu-drawer-x/.mu-drawer-body/
   .mu-fld/.mu-drawer-foot/.mu-btn classes from masters-forms.css, the exact
   same slide-out drawer QLedger.razor's own "Filters" panel uses, per the
   request to match that page's filter UI rather than a centered popup. */

/* ── Responsive ── */
@media (max-width: 1100px) {
    .gd-grid[b-rm4n3g3zob] { grid-template-columns: repeat(2, 1fr); }
    .gd-sales-row[b-rm4n3g3zob] { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .gd-grid[b-rm4n3g3zob] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Landing/GainsLanding.razor.rz.scp.css */
/*
  GainsLanding.razor.css
  Scoped to the landing page content only.
  DashboardLayout provides the sidebar, topbar, and gains-content wrapper.
  No gl-root / gl-topbar / gl-sidebar / gl-body / gl-main rules here.
*/

/* ── Page-level flex column so site-strip + welcome + scroll + footer stack ── */
:root[b-dv6ihzvhpq], .gains-content[b-dv6ihzvhpq] {
    --gl-teal: #1AB99A;
}

/* Self-contained flex column wrapper owned by this page — doesn't depend
   on DashboardLayout's internal class names, so the footer reliably pins
   to the true bottom of the viewport regardless of how the layout shell
   is structured. */
.gl-page[b-dv6ihzvhpq] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Kept as a defensive fallback in case DashboardLayout still wraps pages
   in an element with this class — harmless no-op otherwise. */
:deep(.gains-content)[b-dv6ihzvhpq] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

/* ── Site strip ── */
.gl-site-strip[b-dv6ihzvhpq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 20px 8px;
    background: #fff;
    border-bottom: 1px solid #dde3ed;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}

/* .gl-site-strip-left-wrap and .gl-gains-toggle now live in
   common-page-chrome.css (aliased alongside .bspl-title-left /
   .bspl-gains-toggle) */

.gl-site-strip-left[b-dv6ihzvhpq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gl-site-strip-name[b-dv6ihzvhpq] {
    font-size: 14px;
    font-weight: 700;
    color: #1AB99A;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: opacity 0.15s;
}

    .gl-site-strip-name:hover[b-dv6ihzvhpq] {
        opacity: 0.8;
        text-decoration: underline;
    }

.gl-site-strip-period[b-dv6ihzvhpq] {
    font-size: 11.5px;
    color: #64748b;
}

.gl-set-default-btn[b-dv6ihzvhpq] {
    background: none;
    border: none;
    padding: 0;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 700;
    color: #1AB99A;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
    transition: opacity 0.15s;
}

    .gl-set-default-btn:hover[b-dv6ihzvhpq] {
        opacity: 0.75;
    }

.gl-site-strip-right[b-dv6ihzvhpq] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.gl-change-period-label[b-dv6ihzvhpq] {
    font-size: 11.5px;
    color: #64748b;
    margin-right: 2px;
    font-weight: 500;
}

.gl-period-btn[b-dv6ihzvhpq] {
    padding: 4px 11px;
    border-radius: 4px;
    border: 1px solid #dde3ed;
    background: #fff;
    font-size: 12px;
    font-family: inherit;
    color: #374151;
    cursor: pointer;
    transition: background 0.12s;
}

    .gl-period-btn:hover[b-dv6ihzvhpq] {
        background: #f0f4f9;
    }

    .gl-period-btn.active[b-dv6ihzvhpq] {
        border-color: #9ca3af;
        font-weight: 500;
    }

/* ── Welcome bar ── */
.gl-welcome-bar[b-dv6ihzvhpq] {
    background: #f0fdf9;
    border-bottom: 1px solid #a7f3d0;
    padding: 6px 20px;
    font-size: 12px;
    color: #374151;
    flex-shrink: 0;
}

    .gl-welcome-bar strong[b-dv6ihzvhpq] {
        color: #1AB99A;
        font-weight: 700;
    }

/* ── Error banner ── */
.gl-error-banner[b-dv6ihzvhpq] {
    background: #fef2f2;
    color: #b91c1c;
    border-bottom: 1px solid #fecaca;
    padding: 8px 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Scrollable content area ── */
.gl-content-scroll[b-dv6ihzvhpq] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

    .gl-content-scroll[b-dv6ihzvhpq]::-webkit-scrollbar {
        width: 4px;
    }

    .gl-content-scroll[b-dv6ihzvhpq]::-webkit-scrollbar-thumb {
        background: #dde3ed;
        border-radius: 4px;
    }

/* ── Loading ── */
.gl-loading-center[b-dv6ihzvhpq] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #1AB99A;
}

.gl-spin[b-dv6ihzvhpq] {
    animation: gl-spin-b-dv6ihzvhpq 0.85s linear infinite;
    display: inline-block;
}

.gl-spin-lg[b-dv6ihzvhpq] {
    font-size: 32px;
}

@keyframes gl-spin-b-dv6ihzvhpq {
    to {
        transform: rotate(360deg);
    }
}

/* .gl-footer now lives in common-page-chrome.css (aliased alongside .bspl-footer) */

.gl-footer-link[b-dv6ihzvhpq] {
    color: #1AB99A;
    text-decoration: none;
    font-weight: 500;
}

    .gl-footer-link:hover[b-dv6ihzvhpq] {
        text-decoration: underline;
    }

/* ── Dashboard grid ── */
.gl-dashboard[b-dv6ihzvhpq] {
    display: flex;
    flex-direction: row;
    gap: 14px;
    padding: 16px 20px;
    align-items: stretch; /* both columns same total height */
}

.gl-left-col[b-dv6ihzvhpq],
.gl-right-col[b-dv6ihzvhpq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

/* Stats and Login details grow equally to fill mid row */
.gl-card-stats[b-dv6ihzvhpq],
.gl-card-login[b-dv6ihzvhpq] {
    flex: 1;
}

/* Vouchers and Monthly grow equally to fill bottom row */
.gl-card-vouchers[b-dv6ihzvhpq],
.gl-card-monthly[b-dv6ihzvhpq] {
    flex: 1;
}

.gl-col-span-2[b-dv6ihzvhpq] {
    width: 100%;
}

/* ── Cards ── */
.gl-card[b-dv6ihzvhpq] {
    background: #fff;
    border-radius: 10px;
    border: 0.5px solid #dde3ed;
}

.gl-card-site[b-dv6ihzvhpq], .gl-card-login[b-dv6ihzvhpq], .gl-card-stats[b-dv6ihzvhpq], .gl-card-monthly[b-dv6ihzvhpq], .gl-card-vouchers[b-dv6ihzvhpq] {
    display: flex;
    flex-direction: column;
}

/* Row 1 fixed height */
.gl-card-site[b-dv6ihzvhpq] {
    height: 240px;
}

.gl-card-login[b-dv6ihzvhpq] {
    flex: 1;
    min-height: 0;
}

.gl-card-site .gl-info-table-wrap[b-dv6ihzvhpq] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    height: 100%;
}

    .gl-card-site .gl-info-table-wrap[b-dv6ihzvhpq]::-webkit-scrollbar {
        width: 3px;
    }

    .gl-card-site .gl-info-table-wrap[b-dv6ihzvhpq]::-webkit-scrollbar-thumb {
        background: #dde3ed;
        border-radius: 3px;
    }

.gl-card-login .gl-login-scroll[b-dv6ihzvhpq] {
    max-height: 220px;
    overflow-y: auto;
    min-height: 0;
}

    .gl-card-login .gl-login-scroll[b-dv6ihzvhpq]::-webkit-scrollbar {
        width: 3px;
    }

    .gl-card-login .gl-login-scroll[b-dv6ihzvhpq]::-webkit-scrollbar-thumb {
        background: #dde3ed;
        border-radius: 3px;
    }

.gl-card-login .gl-rtable td[b-dv6ihzvhpq] {
    padding: 5px 14px;
    font-size: 12px;
}

.gl-card-login .gl-rtable th[b-dv6ihzvhpq] {
    padding: 5px 14px;
    font-size: 10.5px;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fafafa;
}

.gl-card-stats[b-dv6ihzvhpq] {
    justify-content: flex-start;
}

.gl-card-monthly .gl-months[b-dv6ihzvhpq] {
    flex: 1;
}

.gl-card-vouchers .gl-vtypes[b-dv6ihzvhpq] {
    flex: 1;
    overflow-y: auto;
    max-height: 160px;
}

    .gl-card-vouchers .gl-vtypes[b-dv6ihzvhpq]::-webkit-scrollbar {
        width: 3px;
    }

    .gl-card-vouchers .gl-vtypes[b-dv6ihzvhpq]::-webkit-scrollbar-thumb {
        background: #dde3ed;
        border-radius: 3px;
    }

/* ── Card header ── */
.gl-card-hdr[b-dv6ihzvhpq] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    border-bottom: 0.5px solid #f3f4f6;
    background: #fafafa;
}

    .gl-card-hdr i[b-dv6ihzvhpq] {
        color: #1AB99A;
    }

    .gl-card-hdr small[b-dv6ihzvhpq] {
        font-size: 11px;
        font-weight: 400;
        color: #9ca3af;
    }

/* ── Info table ── */
.gl-info-table[b-dv6ihzvhpq] {
    width: 100%;
    border-collapse: collapse;
}

    .gl-info-table tr[b-dv6ihzvhpq] {
        border-bottom: 0.5px solid #f3f4f6;
    }

        .gl-info-table tr:last-child[b-dv6ihzvhpq] {
            border-bottom: none;
        }

    .gl-info-table td[b-dv6ihzvhpq] {
        padding: 5px 14px;
        font-size: 12.5px;
        vertical-align: middle;
    }

.gl-info-icon[b-dv6ihzvhpq] {
    width: 32px;
    color: #9ca3af;
    font-size: 15px;
    text-align: center;
}

.gl-info-key[b-dv6ihzvhpq] {
    color: #9ca3af;
    font-weight: 400;
    width: 80px;
    font-size: 12px;
}

.gl-info-val[b-dv6ihzvhpq] {
    color: #374151;
    font-weight: 400;
}

    .gl-info-val.gl-teal[b-dv6ihzvhpq] {
        color: #1AB99A !important;
        font-weight: 500;
    }

/* ── Password row ── */
.gl-pwd[b-dv6ihzvhpq] {
    color: #9ca3af !important;
    font-size: 11px !important;
    font-style: italic;
    font-weight: 400 !important;
}

.gl-pwd-row[b-dv6ihzvhpq] {
    cursor: pointer;
    transition: background 0.12s;
}

    .gl-pwd-row:hover[b-dv6ihzvhpq] {
        background: #f8fafc;
    }

.gl-pwd-change-hint[b-dv6ihzvhpq] {
    margin-left: 10px;
    font-size: 11px;
    color: #1AB99A;
    font-weight: 600;
    border: 0.5px solid #1AB99A;
    border-radius: 4px;
    padding: 1px 7px;
    opacity: 0;
    transition: opacity 0.15s;
}

.gl-pwd-row:hover .gl-pwd-change-hint[b-dv6ihzvhpq] {
    opacity: 1;
}

/* ── Stats ── */
.gl-stat-row[b-dv6ihzvhpq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 0.5px solid #f3f4f6;
    font-size: 12.5px;
}

    .gl-stat-row:last-child[b-dv6ihzvhpq] {
        border-bottom: none;
    }

.gl-stat-icon[b-dv6ihzvhpq] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: #f0f4f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #1AB99A;
    flex-shrink: 0;
}

.gl-stat-key[b-dv6ihzvhpq] {
    flex: 1;
    color: #374151;
}

.gl-stat-val[b-dv6ihzvhpq] {
    font-weight: 700;
    color: #1AB99A;
}

/* ── Voucher types ── */
.gl-vtypes[b-dv6ihzvhpq] {
    padding: 8px 14px;
}

.gl-vtype-row[b-dv6ihzvhpq] {
    display: grid;
    grid-template-columns: 60px 1fr 60px 1fr;
    gap: 4px;
    padding: 4px 0;
    border-bottom: 0.5px solid #f9fafb;
    font-size: 12px;
}

    .gl-vtype-row:last-child[b-dv6ihzvhpq] {
        border-bottom: none;
    }

.gl-vt-key[b-dv6ihzvhpq] {
    color: #374151;
    font-weight: 600;
}

.gl-vt-val[b-dv6ihzvhpq] {
    color: #1AB99A;
    font-weight: 700;
    text-align: right;
    padding-right: 10px;
}

/* ── FY buttons ── */
.gl-fy-btns[b-dv6ihzvhpq] {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-top: 0.5px solid #f3f4f6;
    background: #fafafa;
}

.gl-fy-btn[b-dv6ihzvhpq] {
    padding: 4px 10px;
    border-radius: 5px;
    border: 0.5px solid #dde3ed;
    background: #fff;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    color: #374151;
    transition: background 0.12s;
}

    .gl-fy-btn:hover[b-dv6ihzvhpq] {
        background: #f0f4f9;
    }

    .gl-fy-btn.active[b-dv6ihzvhpq] {
        background: #1AB99A;
        color: #fff;
        border-color: #1AB99A;
    }

.gl-fy1-btn[b-dv6ihzvhpq] {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 5px;
    border: 0.5px solid #dde3ed;
    background: #f8fafc;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    color: #374151;
}

    .gl-fy1-btn.active[b-dv6ihzvhpq] {
        background: #1AB99A;
        color: #fff;
        border-color: #1AB99A;
    }

/* ── Right table (login log) ── */
.gl-rtable[b-dv6ihzvhpq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .gl-rtable th[b-dv6ihzvhpq] {
        padding: 7px 14px;
        text-align: left;
        font-size: 10.5px;
        font-weight: 600;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 0.5px solid #f3f4f6;
        background: #fafafa;
    }

    .gl-rtable td[b-dv6ihzvhpq] {
        padding: 8px 14px;
        border-bottom: 0.5px solid #f9fafb;
        color: #374151;
    }

    .gl-rtable tbody tr:last-child td[b-dv6ihzvhpq] {
        border-bottom: none;
    }

/* ── Monthly vouchers ── */
.gl-months[b-dv6ihzvhpq] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 10px 14px;
    gap: 2px;
}

.gl-month-row[b-dv6ihzvhpq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-bottom: 0.5px solid #f9fafb;
    font-size: 12px;
}

.gl-month-name[b-dv6ihzvhpq] {
    font-weight: 600;
    color: #374151;
    min-width: 32px;
}

.gl-month-val[b-dv6ihzvhpq] {
    color: #1AB99A;
    font-weight: 700;
}

/* ── Utilities ── */
.gl-teal[b-dv6ihzvhpq] {
    color: #1AB99A !important;
}

/* ── Modals ── */
.gl-modal-overlay[b-dv6ihzvhpq] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gl-modal[b-dv6ihzvhpq] {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: hidden;
}

.gl-modal-wide[b-dv6ihzvhpq] {
    max-width: 620px;
}

.gl-modal-header[b-dv6ihzvhpq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 0.5px solid #f3f4f6;
}

.gl-modal-title[b-dv6ihzvhpq] {
    font-size: 16px;
    font-weight: 600;
    color: #1AB99A;
}

.gl-modal-close[b-dv6ihzvhpq] {
    background: none;
    border: none;
    font-size: 20px;
    color: #9ca3af;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.12s;
}

    .gl-modal-close:hover[b-dv6ihzvhpq] {
        color: #374151;
    }

.gl-modal-body[b-dv6ihzvhpq] {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gl-modal-footer[b-dv6ihzvhpq] {
    padding: 12px 22px 16px;
    border-top: 0.5px solid #f3f4f6;
    display: flex;
    justify-content: flex-end;
}

.gl-modal-submit-btn[b-dv6ihzvhpq] {
    width: auto !important;
    padding: 9px 28px !important;
    margin-top: 0 !important;
}

/* ── Password inputs ── */
.gl-pwd-input[b-dv6ihzvhpq] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: #374151;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    background: #fafafa;
}

    .gl-pwd-input:focus[b-dv6ihzvhpq] {
        border-color: #1AB99A;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(26,185,154,0.12);
    }

    .gl-pwd-input[b-dv6ihzvhpq]::placeholder {
        color: #9ca3af;
    }

.gl-pwd-submit[b-dv6ihzvhpq] {
    width: 100%;
    padding: 11px;
    background: #1AB99A;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 4px;
}

    .gl-pwd-submit:hover:not(:disabled)[b-dv6ihzvhpq] {
        background: #15a389;
    }

    .gl-pwd-submit:disabled[b-dv6ihzvhpq] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.gl-pwd-error[b-dv6ihzvhpq] {
    background: #fef2f2;
    color: #b91c1c;
    border: 0.5px solid #fecaca;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gl-pwd-success[b-dv6ihzvhpq] {
    background: #f0fdf9;
    color: #065f46;
    border: 0.5px solid #a7f3d0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Change Site modal ── */
.gl-changesite-body[b-dv6ihzvhpq] {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0 !important;
}

.gl-cs-left[b-dv6ihzvhpq] {
    border-right: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
}

.gl-cs-col-hdr[b-dv6ihzvhpq] {
    padding: 10px 16px;
    font-size: 11.5px;
    color: #64748b;
    background: #fafafa;
    border-bottom: 1px solid #f3f4f6;
    font-weight: 500;
}

.gl-cs-site-list[b-dv6ihzvhpq] {
    flex: 1;
    overflow-y: auto;
    max-height: 220px;
    padding: 4px 0;
}

.gl-cs-site-row[b-dv6ihzvhpq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.12s;
    border-bottom: 0.5px solid #f9fafb;
}

    .gl-cs-site-row:hover[b-dv6ihzvhpq] {
        background: #f0f4f9;
    }

    .gl-cs-site-row.active[b-dv6ihzvhpq] {
        background: #f0fdf9;
        color: #1AB99A;
        font-weight: 600;
    }

.gl-cs-site-name[b-dv6ihzvhpq] {
    flex: 1;
    color: inherit;
}

.gl-cs-site-id[b-dv6ihzvhpq] {
    font-size: 11px;
    color: #9ca3af;
    margin-left: 8px;
}

.gl-cs-right[b-dv6ihzvhpq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
}

.gl-cs-date-row[b-dv6ihzvhpq] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    padding: 6px 10px;
    background: #fafafa;
}

.gl-cs-yr-btn[b-dv6ihzvhpq] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #1AB99A;
    background: none;
    color: #1AB99A;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    font-family: inherit;
}

    .gl-cs-yr-btn:hover[b-dv6ihzvhpq] {
        background: #1AB99A;
        color: #fff;
    }

.gl-cs-date-input[b-dv6ihzvhpq] {
    flex: 1;
    border: none;
    background: none;
    font-size: 13px;
    font-family: inherit;
    color: #374151;
    outline: none;
}

.gl-cs-cal-icon[b-dv6ihzvhpq] {
    font-size: 16px;
    color: #9ca3af;
}

.gl-cs-fy-btns[b-dv6ihzvhpq] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.gl-cs-fy-btn[b-dv6ihzvhpq] {
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid #dde3ed;
    background: #fff;
    font-size: 11.5px;
    font-family: inherit;
    color: #374151;
    cursor: pointer;
}

    .gl-cs-fy-btn:hover[b-dv6ihzvhpq] {
        background: #f0fdf9;
        border-color: #1AB99A;
        color: #1AB99A;
    }

/* ── Set Default modal ── */
.gl-sd-table[b-dv6ihzvhpq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .gl-sd-table th[b-dv6ihzvhpq] {
        padding: 8px 12px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: #374151;
        border-bottom: 1px solid #f3f4f6;
        background: #fafafa;
    }

    .gl-sd-table td[b-dv6ihzvhpq] {
        padding: 10px 12px;
    }

.gl-sd-select[b-dv6ihzvhpq] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    font-size: 13px;
    font-family: inherit;
    color: #374151;
    background: #fff;
    outline: none;
    cursor: pointer;
}

    .gl-sd-select:focus[b-dv6ihzvhpq] {
        border-color: #1AB99A;
    }

.gl-sd-date-cell[b-dv6ihzvhpq] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    padding: 5px 10px;
    background: #fff;
    min-width: 160px;
    cursor: pointer;
}

    .gl-sd-date-cell:hover[b-dv6ihzvhpq], .gl-sd-date-cell:focus-within[b-dv6ihzvhpq] {
        border-color: #1AB99A;
    }

.gl-sd-cal-icon[b-dv6ihzvhpq] {
    font-size: 16px;
    color: #1AB99A;
    flex-shrink: 0;
    pointer-events: none;
}

.gl-sd-date-input[b-dv6ihzvhpq] {
    flex: 1;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    color: #374151;
    outline: none;
    cursor: pointer;
    min-width: 120px;
    padding: 0;
}

    .gl-sd-date-input[b-dv6ihzvhpq]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: 0.7;
    }

        .gl-sd-date-input[b-dv6ihzvhpq]::-webkit-calendar-picker-indicator:hover {
            opacity: 1;
        }

/* ── Responsive ── */
@media (max-width: 900px) {
    /* BUG FIX: .gl-dashboard is a flex container (flex-direction:row), not
       a grid — "grid-template-columns" here had zero effect, which is why
       the left/right panels never actually stacked on mobile. */
    .gl-dashboard[b-dv6ihzvhpq] {
        flex-direction: column;
        padding: 12px 14px;
        gap: 12px;
    }

    .gl-left-col[b-dv6ihzvhpq],
    .gl-right-col[b-dv6ihzvhpq] {
        gap: 12px;
    }

    .gl-toggle-label[b-dv6ihzvhpq] {
        display: none;
    }

    .gl-gains-toggle[b-dv6ihzvhpq] {
        padding: 8px 10px;
    }

    /* Site strip — let left/right groups stack instead of squeezing */
    .gl-site-strip[b-dv6ihzvhpq] {
        padding: 8px 12px 6px;
        gap: 6px;
    }

    .gl-site-strip-right[b-dv6ihzvhpq] {
        gap: 4px;
        width: 100%;
    }

    .gl-change-period-label[b-dv6ihzvhpq] {
        width: 100%;
        margin-bottom: 2px;
    }

    .gl-period-btn[b-dv6ihzvhpq] {
        padding: 4px 9px;
        font-size: 11px;
    }

    .gl-welcome-bar[b-dv6ihzvhpq] {
        padding: 6px 12px;
        font-size: 11px;
        line-height: 1.5;
    }

    .gl-error-banner[b-dv6ihzvhpq] {
        padding: 8px 12px;
        font-size: 11px;
    }

    /* Fixed-height panels are sized for desktop — shrink them so they
       don't dominate a small screen */
    .gl-card-site[b-dv6ihzvhpq],
    .gl-card-image[b-dv6ihzvhpq] {
        height: 180px;
    }

    .gl-card-hdr[b-dv6ihzvhpq] {
        padding: 8px 12px;
        font-size: 11px;
    }

    /* Voucher-type pairs (2 per row) get tight on narrow phones — with
       only 2 explicit columns, the 4 spans per row (key,val,key,val)
       auto-wrap into 2 stacked rows instead of being hidden. */
    .gl-vtype-row[b-dv6ihzvhpq] {
        grid-template-columns: 1fr 1fr;
        row-gap: 2px;
    }

    /* Monthly vouchers — 3 columns is cramped on phones */
    .gl-months[b-dv6ihzvhpq] {
        grid-template-columns: 1fr 1fr;
        padding: 8px 10px;
    }

    .gl-info-table td[b-dv6ihzvhpq] {
        padding: 5px 10px;
        font-size: 12px;
    }

    .gl-info-key[b-dv6ihzvhpq] {
        width: 64px;
    }
}

@media (max-width: 480px) {
    .gl-site-strip-name[b-dv6ihzvhpq] {
        font-size: 13px;
    }

    .gl-card-site[b-dv6ihzvhpq],
    .gl-card-image[b-dv6ihzvhpq] {
        height: 150px;
    }

    .gl-months[b-dv6ihzvhpq] {
        grid-template-columns: 1fr;
    }

    .gl-fy-btns[b-dv6ihzvhpq],
    .gl-fy-btn[b-dv6ihzvhpq] {
        font-size: 10.5px;
    }
}

/* ── Right column wrapper — image + login stacked ── */
.gl-right-col[b-dv6ihzvhpq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Site image card ── */
.gl-card-image[b-dv6ihzvhpq] {
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    height: 240px;
    flex-shrink: 0;
}

.gl-site-image[b-dv6ihzvhpq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ================================================================
   GAINS Login Page — Login.razor.css  (v4)
   Left panel redesigned with product story.
   Right panel/form classes unchanged.
================================================================ */

/* Force Arial for every element on the login page (overrides inherit/font-family). */
.gains-login-page[b-2ua8mk68tf],
.gains-login-page *[b-2ua8mk68tf] {
    font-family: Arial, sans-serif !important;
}

.gains-login-page[b-2ua8mk68tf] {
    display: flex;
    min-height: 100vh;
    width: 100%;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ════════════════════════════════════════════════════════
   LEFT PANEL  — completely redesigned
════════════════════════════════════════════════════════ */
.gains-left[b-2ua8mk68tf] {
    width: 44%;
    min-width: 320px;
    background: #071c11;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* Decorative blobs — now purposeful glow, not circles */
.gains-deco1[b-2ua8mk68tf] {
    position: absolute;
    top: -120px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26,185,154,.22) 0%, transparent 65%);
    pointer-events: none;
}

.gains-deco2[b-2ua8mk68tf] {
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33,118,199,.18) 0%, transparent 65%);
    pointer-events: none;
}
/* Extra subtle grid texture */
.gains-left[b-2ua8mk68tf]::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.032) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}

/* ── Brand block ── */
.gains-left-top[b-2ua8mk68tf] {
    padding: 2.25rem 2.5rem 0;
    position: relative;
    z-index: 1;
}

.gains-brand[b-2ua8mk68tf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gains-brand-icon[b-2ua8mk68tf] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(26,185,154,.15);
    border: 1px solid rgba(26,185,154,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.gains-brand-img[b-2ua8mk68tf] {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.gains-brand-name[b-2ua8mk68tf] {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .13em;
    color: #fff;
    line-height: 1.1;
}

.gains-brand-sub[b-2ua8mk68tf] {
    font-size: 10px;
    color: rgba(255,255,255,.35);
    line-height: 1.4;
    margin-top: 2px;
}

/* ── Mid: headline + description + feature list ── */
.gains-left-mid[b-2ua8mk68tf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.75rem 2.5rem 1.5rem;
    position: relative;
    z-index: 1;
}

.gains-headline[b-2ua8mk68tf] {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    line-height: 1.22;
    margin: 0 0 .9rem;
    letter-spacing: -.02em;
}

    .gains-headline span[b-2ua8mk68tf] {
        color: #1AB99A;
    }

.gains-desc[b-2ua8mk68tf] {
    font-size: 13.5px;
    color: rgba(255,255,255,.45);
    line-height: 1.75;
    margin: 0 0 1.6rem;
    max-width: 340px;
}

/* Feature grid — replaces plain stats */
.gains-stats[b-2ua8mk68tf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 0;
}

.gains-stat[b-2ua8mk68tf] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255,255,255,.045);
    border: .5px solid rgba(255,255,255,.09);
    border-radius: 12px;
    padding: 13px 14px;
    transition: background .18s;
}

    .gains-stat:hover[b-2ua8mk68tf] {
        background: rgba(255,255,255,.07);
    }

/* Icon for each stat — colour coded */
.gains-stat-icon[b-2ua8mk68tf] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.gains-stat-icon-teal[b-2ua8mk68tf] {
    background: rgba(26,185,154,.2);
    color: #1AB99A;
}

.gains-stat-icon-blue[b-2ua8mk68tf] {
    background: rgba(33,118,199,.2);
    color: #60a5fa;
}

.gains-stat-icon-purple[b-2ua8mk68tf] {
    background: rgba(139,92,246,.2);
    color: #a78bfa;
}

.gains-stat-icon-orange[b-2ua8mk68tf] {
    background: rgba(251,146,60,.2);
    color: #fb923c;
}

.gains-stat-body[b-2ua8mk68tf] {
    flex: 1;
    min-width: 0;
}

.gains-stat-num[b-2ua8mk68tf] {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 2px;
}

.gains-stat-label[b-2ua8mk68tf] {
    font-size: 11px;
    color: rgba(255,255,255,.4);
    line-height: 1.4;
}

/* ── Bottom: trusted badges + test-drive CTA ── */
.gains-left-bottom[b-2ua8mk68tf] {
    padding: 1.25rem 2.5rem 1.75rem;
    position: relative;
    z-index: 1;
    border-top: .5px solid rgba(255,255,255,.07);
}

.gains-trusted[b-2ua8mk68tf] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
    margin-bottom: 10px;
}

.gains-badges[b-2ua8mk68tf] {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.gains-badge[b-2ua8mk68tf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.06);
    border: .5px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 5px 11px;
    font-size: 11px;
    color: rgba(255,255,255,.55);
    transition: background .15s;
}

    .gains-badge:hover[b-2ua8mk68tf] {
        background: rgba(255,255,255,.1);
    }

    .gains-badge i[b-2ua8mk68tf] {
        font-size: 13px;
        color: #1AB99A;
    }

/* Test-drive CTA */
.gains-testdrive[b-2ua8mk68tf] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(26,185,154,.18), rgba(26,185,154,.08));
    border: 1px solid rgba(26,185,154,.32);
    border-radius: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    transition: background .18s, border-color .18s, transform .15s;
}

    .gains-testdrive:hover[b-2ua8mk68tf] {
        background: linear-gradient(135deg, rgba(26,185,154,.28), rgba(26,185,154,.15));
        border-color: rgba(26,185,154,.55);
        transform: translateY(-1px);
        color: #fff;
    }

    .gains-testdrive i:first-child[b-2ua8mk68tf] {
        font-size: 18px;
        color: #1AB99A;
        flex-shrink: 0;
    }

    .gains-testdrive span[b-2ua8mk68tf] {
        flex: 1;
    }

.gains-td-arrow[b-2ua8mk68tf] {
    font-size: 16px;
    color: rgba(255,255,255,.4);
    transition: transform .15s;
    flex-shrink: 0;
}

.gains-testdrive:hover .gains-td-arrow[b-2ua8mk68tf] {
    transform: translateX(3px);
    color: #1AB99A;
}


/* ════════════════════════════════════════════════════════
   RIGHT PANEL  — unchanged from original
════════════════════════════════════════════════════════ */
.gains-right[b-2ua8mk68tf] {
    flex: 1;
    background: #f4f6f8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    position: relative;
    overflow: visible;
}

.gains-right-deco-tl[b-2ua8mk68tf] {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 180px;
    border-right: .5px solid #e5e7eb;
    border-bottom: .5px solid #e5e7eb;
    border-radius: 0 0 100% 0;
    pointer-events: none;
}

.gains-right-deco-br[b-2ua8mk68tf] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 150px;
    border-left: .5px solid #e5e7eb;
    border-top: .5px solid #e5e7eb;
    border-radius: 100% 0 0 0;
    pointer-events: none;
}

.gains-right-dots[b-2ua8mk68tf] {
    position: absolute;
    top: 24px;
    right: 24px;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 6px;
    opacity: .25;
    pointer-events: none;
}

    .gains-right-dots span[b-2ua8mk68tf] {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #1AB99A;
        display: block;
    }

/* ── Form card ── */
.gains-card[b-2ua8mk68tf] {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 20px;
    border: .5px solid #e5e7eb;
    overflow: visible;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 24px rgba(15,23,42,.08);
    animation: gains-card-in-b-2ua8mk68tf .4s cubic-bezier(.16,1,.3,1) both;
}

@keyframes gains-card-in-b-2ua8mk68tf {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.98);
    }

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

.gains-card-header[b-2ua8mk68tf] {
    background: #071c11;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gains-card-step[b-2ua8mk68tf] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1AB99A;
    margin-bottom: 4px;
}

.gains-card-title[b-2ua8mk68tf] {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.gains-card-subtitle[b-2ua8mk68tf] {
    font-size: 13px;
    color: rgba(255,255,255,.5);
    margin-top: 2px;
}

.gains-card-icon-wrap[b-2ua8mk68tf] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(26,185,154,.15);
    border: 1px solid rgba(26,185,154,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #1AB99A;
    flex-shrink: 0;
}

.gains-card-progress[b-2ua8mk68tf] {
    height: 3px;
    background: rgba(26,185,154,.15);
}

.gains-card-progress-bar[b-2ua8mk68tf] {
    height: 100%;
    background: #1AB99A;
    transition: width .3s;
}

.gains-card-body[b-2ua8mk68tf] {
    padding: 1.75rem 2rem;
}

.gains-card-footer[b-2ua8mk68tf] {
    padding: 1rem 2rem;
    border-top: .5px solid #f3f4f6;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    background: #fafafa;
}

    .gains-card-footer a[b-2ua8mk68tf] {
        color: #1AB99A;
        text-decoration: none;
        font-weight: 600;
    }

        .gains-card-footer a:hover[b-2ua8mk68tf] {
            color: #2176C7;
        }

/* Error banner */
.gains-error[b-2ua8mk68tf] {
    background: #fef2f2;
    color: #b91c1c;
    border: .5px solid #fecaca;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
    animation: gains-card-in-b-2ua8mk68tf .2s ease both;
}

    .gains-error i[b-2ua8mk68tf] {
        font-size: 16px;
        flex-shrink: 0;
    }

/* Mode selector */
.gains-mode-section[b-2ua8mk68tf] {
    margin-bottom: 1.1rem;
}

.gains-mode-label[b-2ua8mk68tf] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 8px;
}

.gains-mode-options[b-2ua8mk68tf] {
    display: flex;
    gap: 4px;
}

.gains-mode-opt[b-2ua8mk68tf] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    border-radius: 8px;
    background: #f3f4f6;
    border: 1.5px solid transparent;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
    transition: all .15s;
}

    .gains-mode-opt input[b-2ua8mk68tf] {
        display: none;
    }

    .gains-mode-opt:has(input:checked)[b-2ua8mk68tf] {
        background: #fff;
        border-color: #1AB99A;
        color: #1AB99A;
        box-shadow: 0 1px 4px rgba(0,0,0,.08);
    }

    .gains-mode-opt:hover:not(:has(input:checked))[b-2ua8mk68tf] {
        background: #e9ecef;
        color: #374151;
    }

/* Country code */
.gains-ccode[b-2ua8mk68tf] {
    position: absolute;
    left: 42px;
    top: 50%;
    transform: translateY(-50%);
    height: 28px;
    width: 84px;
    border: none;
    border-right: 1.5px solid #e5e7eb;
    background: transparent;
    font-size: 13px;
    color: #374151;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    z-index: 2;
    padding: 0 4px;
}

.gains-input.gains-input-ccode[b-2ua8mk68tf] {
    padding-left: 136px;
}

/* Invalid state */
.gains-input-invalid[b-2ua8mk68tf] {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
}

    .gains-input-invalid:focus[b-2ua8mk68tf] {
        box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
    }

.gains-validation[b-2ua8mk68tf] {
    font-size: 12px;
    color: #b91c1c;
    margin-top: 5px;
}

/* Fields */
.gains-field[b-2ua8mk68tf] {
    margin-bottom: 1.1rem;
}

    .gains-field label[b-2ua8mk68tf] {
        display: block;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #6b7280;
        margin-bottom: 7px;
    }

.gains-input-wrap[b-2ua8mk68tf] {
    position: relative;
    display: flex;
    align-items: center;
}

.gains-input-icon[b-2ua8mk68tf] {
    position: absolute;
    left: 13px;
    font-size: 17px;
    color: #1AB99A;
    pointer-events: none;
    z-index: 1;
}

.gains-input-icon-svg[b-2ua8mk68tf] {
    width: 18px;
    height: 18px;
    color: #1AB99A;
}

.gains-input[b-2ua8mk68tf] {
    width: 100%;
    height: 46px;
    padding: 0 44px 0 42px;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    color: #111827;
    background: #f9fafb;
    outline: none;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

    .gains-input[b-2ua8mk68tf]::placeholder {
        color: #9ca3af;
    }

    .gains-input:hover[b-2ua8mk68tf] {
        border-color: #d1d5db;
    }

    .gains-input:focus[b-2ua8mk68tf] {
        border-color: #1AB99A;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(26,185,154,.12);
    }

    .gains-input:disabled[b-2ua8mk68tf] {
        opacity: .6;
        cursor: not-allowed;
    }

.gains-eye-btn[b-2ua8mk68tf] {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color .15s;
    z-index: 1;
}

    .gains-eye-btn:hover[b-2ua8mk68tf] {
        color: #1AB99A;
    }

/* Form row */
.gains-form-row[b-2ua8mk68tf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.gains-remember[b-2ua8mk68tf] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
}

    .gains-remember input[b-2ua8mk68tf] {
        accent-color: #1AB99A;
    }

.gains-forgot[b-2ua8mk68tf] {
    font-size: 13px;
    color: #1AB99A;
    text-decoration: none;
    font-weight: 600;
}

    .gains-forgot:hover[b-2ua8mk68tf] {
        color: #2176C7;
    }

/* Sign-in button */
.gains-signin-btn[b-2ua8mk68tf] {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #1AB99A, #0d9480);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(26,185,154,.3);
    transition: transform .1s, box-shadow .15s, opacity .15s;
    margin-bottom: 1rem;
}

    .gains-signin-btn:hover:not(:disabled)[b-2ua8mk68tf] {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(26,185,154,.4);
    }

    .gains-signin-btn:active:not(:disabled)[b-2ua8mk68tf] {
        transform: scale(.99);
    }

    .gains-signin-btn:disabled[b-2ua8mk68tf] {
        opacity: .5;
        cursor: not-allowed;
    }

    .gains-signin-btn i[b-2ua8mk68tf] {
        font-size: 18px;
    }

/* Divider */
.gains-divider[b-2ua8mk68tf] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}

    .gains-divider hr[b-2ua8mk68tf] {
        flex: 1;
        border: none;
        border-top: 1px solid #f3f4f6;
        margin: 0;
    }

    .gains-divider span[b-2ua8mk68tf] {
        font-size: 12px;
        color: #9ca3af;
        white-space: nowrap;
    }

/* SSO */
.gains-sso-btn[b-2ua8mk68tf] {
    width: 100%;
    height: 44px;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s, border-color .15s;
}

    .gains-sso-btn:hover[b-2ua8mk68tf] {
        background: #f9fafb;
        border-color: #1AB99A;
    }

    .gains-sso-btn i[b-2ua8mk68tf] {
        font-size: 17px;
        color: #2176C7;
    }

/* Site picker */
.gains-site-list[b-2ua8mk68tf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 340px;
    overflow-y: auto;
    margin-bottom: .5rem;
    padding-right: 2px;
}

    .gains-site-list[b-2ua8mk68tf]::-webkit-scrollbar {
        width: 4px;
    }

    .gains-site-list[b-2ua8mk68tf]::-webkit-scrollbar-track {
        background: #f3f4f6;
        border-radius: 4px;
    }

    .gains-site-list[b-2ua8mk68tf]::-webkit-scrollbar-thumb {
        background: #1AB99A;
        border-radius: 4px;
    }

.gains-site-btn[b-2ua8mk68tf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border: .5px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
    transition: border-color .12s, background .12s, transform .1s;
}

    .gains-site-btn:hover[b-2ua8mk68tf] {
        border-color: #1AB99A;
        background: #f0fdf9;
        transform: translateX(2px);
    }

    .gains-site-btn.gains-site-default[b-2ua8mk68tf] {
        border-color: #1AB99A;
    }

.gains-site-avatar[b-2ua8mk68tf] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f0fdf9;
    border: .5px solid #a7f3d0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #065f46;
    flex-shrink: 0;
}

.gains-site-default .gains-site-avatar[b-2ua8mk68tf] {
    background: linear-gradient(135deg, #1AB99A, #0d9480);
    color: #fff;
    border-color: #1AB99A;
}

.gains-site-info[b-2ua8mk68tf] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.gains-site-name[b-2ua8mk68tf] {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gains-site-id[b-2ua8mk68tf] {
    font-size: 11px;
    color: #9ca3af;
}

.gains-site-badge[b-2ua8mk68tf] {
    font-size: 10px;
    background: #1AB99A;
    color: #fff;
    border-radius: 4px;
    padding: 2px 7px;
    flex-shrink: 0;
    font-weight: 600;
}

.gains-back-btn[b-2ua8mk68tf] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-size: 13px;
    color: #1AB99A;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    transition: color .15s;
}

    .gains-back-btn:hover[b-2ua8mk68tf] {
        color: #2176C7;
    }

/* Spinner */
.gains-spin[b-2ua8mk68tf] {
    animation: gains-spin-b-2ua8mk68tf .85s linear infinite;
    display: inline-block;
}

@keyframes gains-spin-b-2ua8mk68tf {
    to {
        transform: rotate(360deg);
    }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .gains-login-page[b-2ua8mk68tf] {
        flex-direction: column;
    }

    .gains-left[b-2ua8mk68tf] {
        width: 100%;
        min-height: 0;
    }

    .gains-left-mid[b-2ua8mk68tf] {
        padding: 1.25rem 1.5rem 1rem;
        justify-content: flex-start;
    }

    .gains-headline[b-2ua8mk68tf] {
        font-size: 24px;
    }

    .gains-desc[b-2ua8mk68tf], .gains-stats[b-2ua8mk68tf] {
        display: none;
    }

    .gains-left-bottom[b-2ua8mk68tf] {
        padding: 1rem 1.5rem 1.25rem;
    }

    .gains-testdrive[b-2ua8mk68tf] {
        display: none;
    }

    .gains-right[b-2ua8mk68tf] {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 420px) {
    .gains-card-body[b-2ua8mk68tf] {
        padding: 1.25rem 1.25rem;
    }

    .gains-card-header[b-2ua8mk68tf] {
        padding: 1.25rem 1.25rem;
    }

    .gains-card-footer[b-2ua8mk68tf] {
        padding: .75rem 1.25rem;
    }
}


/* =============================================
   FORGOT PASSWORD MODAL
   ============================================= */
.modal-backdrop[b-2ua8mk68tf] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(3px);
}

.modal-card[b-2ua8mk68tf] {
    background: #fff;
    border-radius: 18px;
    width: 95%;
    max-width: 460px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-head[b-2ua8mk68tf] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #f1f5f9;
}

.modal-head-icon[b-2ua8mk68tf] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #eff4ff;
    color: #3563e9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal-title[b-2ua8mk68tf] {
    font-size: 16px;
    font-weight: 700;
    color: #0f1923;
    margin: 0 0 3px;
}

.modal-desc[b-2ua8mk68tf] {
    font-size: 12.5px;
    color: #6b7a8d;
    margin: 0;
}

.modal-x[b-2ua8mk68tf] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

    .modal-x:hover[b-2ua8mk68tf] {
        background: #f1f5f9;
        color: #0f1923;
    }

.modal-body[b-2ua8mk68tf] {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.radio-section-label[b-2ua8mk68tf] {
    font-size: 11.5px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.radio-group[b-2ua8mk68tf] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.radio-pill[b-2ua8mk68tf] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 9px;
    border: 1.5px solid #e5e7eb;
    background: #f8fafd;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

    .radio-pill input[type="radio"][b-2ua8mk68tf] {
        display: none;
    }

    .radio-pill:hover[b-2ua8mk68tf] {
        border-color: #3563e9;
        color: #3563e9;
        background: #eff4ff;
    }

.radio-active[b-2ua8mk68tf] {
    border-color: #3563e9 !important;
    background: #eff4ff !important;
    color: #3563e9 !important;
}

.modal-field[b-2ua8mk68tf] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.req[b-2ua8mk68tf] {
    color: #e94343;
    margin-left: 2px;
}

.modal-input[b-2ua8mk68tf] {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13.5px;
    color: #0f1923;
    background: #f8fafd;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    box-sizing: border-box;
}

    .modal-input:focus[b-2ua8mk68tf] {
        border-color: #3563e9;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(53, 99, 233, 0.1);
    }

.modal-error[b-2ua8mk68tf] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12.5px;
    font-weight: 500;
}

.modal-foot[b-2ua8mk68tf] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafd;
}

.btn-ghost[b-2ua8mk68tf] {
    padding: 9px 18px;
    border-radius: 9px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

    .btn-ghost:hover:not(:disabled)[b-2ua8mk68tf] {
        background: #f1f5f9;
    }

    .btn-ghost:disabled[b-2ua8mk68tf] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-primary[b-2ua8mk68tf] {
    padding: 9px 20px;
    border-radius: 9px;
    border: none;
    background: linear-gradient(135deg, #3563e9, #0ea472);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
    font-family: inherit;
}

    .btn-primary:hover:not(:disabled)[b-2ua8mk68tf] {
        opacity: 0.92;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(53, 99, 233, 0.3);
    }

    .btn-primary:disabled[b-2ua8mk68tf] {
        opacity: 0.6;
        cursor: not-allowed;
    }
/* /Components/Pages/Masters/MBankChequeSequence.razor.rz.scp.css */
/* =====================================================================
   GAINS — MBankChequeSequence.razor.css   (Masters → Bank Cheque Sequence, page-scoped)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only Bank-Cheque-Sequence-page-specific rules remain here.
   ===================================================================== */

.mu-page[b-paskmvu9ll] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mu-card[b-paskmvu9ll] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mu-toolbar[b-paskmvu9ll] {
    flex-shrink: 0;
}

.mu-table-wrap[b-paskmvu9ll] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-paskmvu9ll] {
    flex-shrink: 0;
}

.bspl-footer-right[b-paskmvu9ll] {
    font-size: inherit;
    color: inherit;
}

.mu-pager[b-paskmvu9ll] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Right-align the sequence number columns */
.mu-num[b-paskmvu9ll] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Ledger picker (Add mode: typeahead; Edit mode: locked label) ── */
.bcs-ledger-field[b-paskmvu9ll] {
    position: relative;
}

.bcs-ledger-wrap[b-paskmvu9ll] {
    position: relative;
}

.bcs-ledger-locked[b-paskmvu9ll] {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--mu-surface-alt, #f4f5f7);
    border: 1px solid var(--mu-border, #e2e4e9);
    font-weight: 600;
}

.bcs-suggest[b-paskmvu9ll] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 220px;
    overflow-y: auto;
    background: var(--mu-surface, #fff);
    border: 1px solid var(--mu-border, #e2e4e9);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.bcs-suggest-item[b-paskmvu9ll] {
    padding: 9px 12px;
    cursor: pointer;
    font-size: 14px;
}

    .bcs-suggest-item:hover[b-paskmvu9ll] {
        background: var(--mu-hover, #f0f2f5);
    }

.bcs-suggest-empty[b-paskmvu9ll] {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--mu-text-muted, #8a8f98);
}

/* ── Start / End / Current Sequence — three inputs side by side ── */
.bcs-seq-row[b-paskmvu9ll] {
    display: flex;
    gap: 12px;
}

    .bcs-seq-row .uf-field[b-paskmvu9ll] {
        flex: 1;
        margin-bottom: 0;
    }

@media (max-width: 480px) {
    .bcs-seq-row[b-paskmvu9ll] {
        flex-direction: column;
        gap: 14px;
    }
}

/* ── Mobile: "New sequence" button — icon only, stays top-right ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-paskmvu9ll] {
        margin-left: auto;
    }

        .bspl-title-actions .mu-btn-label[b-paskmvu9ll] {
            display: none;
        }

        .bspl-title-actions .mu-btn[b-paskmvu9ll] {
            padding: 8px 10px;
            gap: 0;
        }

            .bspl-title-actions .mu-btn i[b-paskmvu9ll] {
                font-size: 15px;
            }

    .mu-foot-info[b-paskmvu9ll] {
        display: none;
    }
}
/* /Components/Pages/Masters/MBankDetails.razor.rz.scp.css */
/* =====================================================================
   GAINS — MBankDetails.razor.css   (Masters → Bank Details, page-scoped)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only Bank-Details-page-specific rules remain here.
   ===================================================================== */

.mu-page[b-pb9bcutd2e] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mu-card[b-pb9bcutd2e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mu-toolbar[b-pb9bcutd2e] {
    flex-shrink: 0;
}

.mu-table-wrap[b-pb9bcutd2e] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-pb9bcutd2e] {
    flex-shrink: 0;
}

.bspl-footer-right[b-pb9bcutd2e] {
    font-size: inherit;
    color: inherit;
}

.mu-pager[b-pb9bcutd2e] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Modal: "apply to all sites" checkbox ── */
.bd-checkbox-field[b-pb9bcutd2e] {
    margin-bottom: 0;
}

.bd-checkbox-label[b-pb9bcutd2e] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}

    .bd-checkbox-label input[type="checkbox"][b-pb9bcutd2e] {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

/* ── Mobile: "New bank detail" button — icon only, stays top-right ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-pb9bcutd2e] {
        margin-left: auto;
    }

        .bspl-title-actions .mu-btn-label[b-pb9bcutd2e] {
            display: none;
        }

        .bspl-title-actions .mu-btn[b-pb9bcutd2e] {
            padding: 8px 10px;
            gap: 0;
        }

            .bspl-title-actions .mu-btn i[b-pb9bcutd2e] {
                font-size: 15px;
            }

    .mu-foot-info[b-pb9bcutd2e] {
        display: none;
    }
}
/* /Components/Pages/Masters/MCategory.razor.rz.scp.css */
/* =====================================================================
   GAINS — MCategory.razor.css   (Masters → Category grid, page-scoped)
   Shared "mu-" grid/page styles live in wwwroot/CSS/masters-forms.css.
   Only Category-page-specific rules remain here.
   ===================================================================== */

.mu-page[b-6kg8ln9dxe] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mu-card[b-6kg8ln9dxe] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mu-toolbar[b-6kg8ln9dxe] {
    flex-shrink: 0;
}

.mu-table-wrap[b-6kg8ln9dxe] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-6kg8ln9dxe] {
    flex-shrink: 0;
}

.bspl-footer-right[b-6kg8ln9dxe] {
    font-size: inherit;
    color: inherit;
}

.mu-pager[b-6kg8ln9dxe] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Mobile: "New category" button — icon only, stays top-right ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-6kg8ln9dxe] {
        margin-left: auto;
    }

        .bspl-title-actions .mu-btn-label[b-6kg8ln9dxe] {
            display: none;
        }

        .bspl-title-actions .mu-btn[b-6kg8ln9dxe] {
            padding: 8px 10px;
            gap: 0;
        }

            .bspl-title-actions .mu-btn i[b-6kg8ln9dxe] {
                font-size: 15px;
            }

    .mu-foot-info[b-6kg8ln9dxe] {
        display: none;
    }
}
/* /Components/Pages/Masters/MCostCenter.razor.rz.scp.css */
/* =====================================================================
   GAINS — MCostCenter.razor.css   (Masters → Cost Center, page-scoped)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only Cost-Center-page-specific rules remain here.
   ===================================================================== */

.mu-page[b-wjthxy4h8u] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mu-card[b-wjthxy4h8u] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mu-toolbar[b-wjthxy4h8u] {
    flex-shrink: 0;
}

.mu-table-wrap[b-wjthxy4h8u] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-wjthxy4h8u] {
    flex-shrink: 0;
}

.bspl-footer-right[b-wjthxy4h8u] {
    font-size: inherit;
    color: inherit;
}

.mu-pager[b-wjthxy4h8u] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Toolbar: search + group filter side by side ── */
.cc-toolbar[b-wjthxy4h8u] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .cc-toolbar .mu-search[b-wjthxy4h8u] {
        flex: 1;
        min-width: 200px;
    }

.cc-group-filter-wrap[b-wjthxy4h8u] {
    position: relative;
    flex-shrink: 0;
}

.cc-group-filter[b-wjthxy4h8u] {
    appearance: none;
    padding: 8px 30px 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--mu-border, #e2e4e9);
    background: var(--mu-surface, #fff);
    font-size: 14px;
    cursor: pointer;
    min-width: 160px;
}

.cc-group-filter-caret[b-wjthxy4h8u] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 11px;
    color: var(--mu-text-muted, #8a8f98);
}

/* ── Grid: keep remarks from stretching the row ── */
.cc-remarks[b-wjthxy4h8u] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Modal: remarks textarea + "apply to branches" checkbox ── */
.cc-remarks-input[b-wjthxy4h8u] {
    resize: vertical;
    min-height: 64px;
    font-family: inherit;
}

.cc-checkbox-field[b-wjthxy4h8u] {
    margin-bottom: 0;
}

.cc-checkbox-label[b-wjthxy4h8u] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}

    .cc-checkbox-label input[type="checkbox"][b-wjthxy4h8u] {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

/* ── Mobile ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-wjthxy4h8u] {
        margin-left: auto;
    }

        .bspl-title-actions .mu-btn-label[b-wjthxy4h8u] {
            display: none;
        }

        .bspl-title-actions .mu-btn[b-wjthxy4h8u] {
            padding: 8px 10px;
            gap: 0;
        }

            .bspl-title-actions .mu-btn i[b-wjthxy4h8u] {
                font-size: 15px;
            }

    .mu-foot-info[b-wjthxy4h8u] {
        display: none;
    }

    .cc-toolbar[b-wjthxy4h8u] {
        flex-direction: column;
        align-items: stretch;
    }

    .cc-group-filter[b-wjthxy4h8u] {
        width: 100%;
    }

    .cc-remarks[b-wjthxy4h8u] {
        max-width: 140px;
    }
}
/* /Components/Pages/Masters/MDepot.razor.rz.scp.css */
/* MDepot.razor.css — scoped styles for the Depot list page */

/* Abbreviation column */
.dp-abbr[b-o2f8l0049c] {
    font-weight: 600;
    color: #0f9d8a;
    letter-spacing: 0.3px;
}

/* Factory / Depot type badge */
.dp-badge[b-o2f8l0049c] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.dp-badge-factory[b-o2f8l0049c] {
    background: #fef3c7;
    color: #92400e;
}

.dp-badge-depot[b-o2f8l0049c] {
    background: #e0f2fe;
    color: #075985;
}
/* /Components/Pages/Masters/MDepotEdit.razor.rz.scp.css */
/* MDepotEdit.razor.css — scoped styles for the Depot edit modal */

/* Two-column layout for paired fields */
.uf-row-2[b-u9y4odutsd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

@media (max-width: 540px) {
    .uf-row-2[b-u9y4odutsd] {
        grid-template-columns: 1fr;
    }
}

/* Textarea */
.uf-textarea[b-u9y4odutsd] {
    resize: vertical;
    min-height: 60px;
}

/* Checkbox row */
.uf-check-row[b-u9y4odutsd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
}

.uf-check-row input[type="checkbox"][b-u9y4odutsd] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #0f9d8a;
}

.uf-check-label[b-u9y4odutsd] {
    font-size: 13px;
    color: #374151;
}
/* /Components/Pages/Masters/MDocumentType.razor.rz.scp.css */
/* =====================================================================
   GAINS — MDocumentType.razor.css   (Masters → Document Type grid, page-scoped)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only Document-Type-page-specific rules remain here.
   ===================================================================== */

.mu-page[b-riepggkypv] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mu-card[b-riepggkypv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mu-toolbar[b-riepggkypv] {
    flex-shrink: 0;
}

.mu-table-wrap[b-riepggkypv] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-riepggkypv] {
    flex-shrink: 0;
}

.bspl-footer-right[b-riepggkypv] {
    font-size: inherit;
    color: inherit;
}

.mu-pager[b-riepggkypv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Mobile: "New document type" button — icon only, stays top-right ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-riepggkypv] {
        margin-left: auto;
    }

        .bspl-title-actions .mu-btn-label[b-riepggkypv] {
            display: none;
        }

        .bspl-title-actions .mu-btn[b-riepggkypv] {
            padding: 8px 10px;
            gap: 0;
        }

            .bspl-title-actions .mu-btn i[b-riepggkypv] {
                font-size: 15px;
            }

    .mu-foot-info[b-riepggkypv] {
        display: none;
    }
}
/* /Components/Pages/Masters/MGroup.razor.rz.scp.css */
/* =====================================================================
   GAINS — MGroup.razor.css   (Masters → Group grid, page-scoped)
   Shared "mu-" grid/page styles now live in wwwroot/CSS/masters-forms.css.
   Only Group-page-specific rules remain here.
   ===================================================================== */

/* .mu-row-click now lives in the global CSS/masters-forms.css so it can be
   reused on any page. Nothing Group-specific to add here. */

/* =====================================================================
   Page-end footer pinning — same pattern used on BSPL / Daybook / TB /
   MLogin. .mu-page becomes a full-height flex column; .mu-card (the
   bordered table box) grows to fill the remaining space instead of being
   sized only to its own content, and the footer sits as a direct sibling
   below it so it always lands at the true bottom of the page.
   ===================================================================== */
.mu-page[b-ukuv8fcuje] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mu-card[b-ukuv8fcuje] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mu-toolbar[b-ukuv8fcuje] {
    flex-shrink: 0;
}

.mu-table-wrap[b-ukuv8fcuje] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-ukuv8fcuje] {
    flex-shrink: 0;
}

/* mu-pager sits inside .bspl-footer-right now — undo the inherited
   margin-left:auto/font-size/color from common-page-chrome.css so the
   pagesize dropdown and page buttons keep their own sizing/typography. */
.bspl-footer-right[b-ukuv8fcuje] {
    font-size: inherit;
    color: inherit;
}

.mu-pager[b-ukuv8fcuje] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Mobile: "New group" button — icon only, stays top-right ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-ukuv8fcuje] {
        margin-left: auto;
    }

    .bspl-title-actions .mu-btn-label[b-ukuv8fcuje] {
        display: none;
    }

    .bspl-title-actions .mu-btn[b-ukuv8fcuje] {
        padding: 8px 10px;
        gap: 0;
    }

    .bspl-title-actions .mu-btn i[b-ukuv8fcuje] {
        font-size: 15px;
    }

    .mu-foot-info[b-ukuv8fcuje] {
        display: none;
    }
}
/* /Components/Pages/Masters/MGroupEdit.razor.rz.scp.css */
/* =====================================================================
   GAINS — MGroupEdit.razor.css   (edit Group modal)
   Shared "uf-" modal styles now live in wwwroot/CSS/masters-forms.css.
   Only Group-edit-specific rules and small overrides remain here.
   ===================================================================== */

.uf-modal-sm[b-awuk0cjuz0] { max-width: 460px; }

/* Field spacing / section spacing specific to this (shorter) form */
.uf-field[b-awuk0cjuz0] { margin-bottom: 13px; }
.uf-field:last-child[b-awuk0cjuz0] { margin-bottom: 0; }
.uf-section[b-awuk0cjuz0] { margin: 0 0 0; }

/* Read-only depth row: "5  ASSETS" */
.uf-depth[b-awuk0cjuz0] { display: flex; align-items: center; gap: 12px; padding-top: 7px; }
.uf-depth-val[b-awuk0cjuz0] { font-size: 14px; font-weight: 600; color: #1e293b; }
.uf-depth-class[b-awuk0cjuz0] { font-size: 12px; font-weight: 700; color: #0f766e; letter-spacing: 0.6px; }

@media (max-width: 540px) {
    .uf-field[b-awuk0cjuz0] { grid-template-columns: 1fr; gap: 4px; }
    .uf-field > label[b-awuk0cjuz0] { padding-top: 0; }
}
/* /Components/Pages/Masters/MIPAddress.razor.rz.scp.css */
/* =====================================================================
   GAINS — MIPAddress.razor.css   (Masters → IP Address grid, page-scoped)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only IP-Address-page-specific rules remain here.
   ===================================================================== */

.mu-page[b-0fz7tcqzsx] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mu-card[b-0fz7tcqzsx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mu-toolbar[b-0fz7tcqzsx] {
    flex-shrink: 0;
}

.mu-table-wrap[b-0fz7tcqzsx] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-0fz7tcqzsx] {
    flex-shrink: 0;
}

.bspl-footer-right[b-0fz7tcqzsx] {
    font-size: inherit;
    color: inherit;
}

.mu-pager[b-0fz7tcqzsx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Columns ── */
.mu-ip-machine[b-0fz7tcqzsx] {
    white-space: nowrap;
}

.mu-ip-addr[b-0fz7tcqzsx] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Mobile: "New IP address" button — icon only, stays top-right ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-0fz7tcqzsx] {
        margin-left: auto;
    }

        .bspl-title-actions .mu-btn-label[b-0fz7tcqzsx] {
            display: none;
        }

        .bspl-title-actions .mu-btn[b-0fz7tcqzsx] {
            padding: 8px 10px;
            gap: 0;
        }

            .bspl-title-actions .mu-btn i[b-0fz7tcqzsx] {
                font-size: 15px;
            }

    .mu-foot-info[b-0fz7tcqzsx] {
        display: none;
    }
}
/* /Components/Pages/Masters/MItem.razor.rz.scp.css */
/* =====================================================================
   GAINS — MItem.razor.css   (Masters → Item grid, page-scoped)
   Shared "mu-" grid/page styles now live in wwwroot/CSS/masters-forms.css.
   Only Item-page-specific rules and small overrides remain here — mirrors
   MLedger.razor.css exactly (same tabs/drawer/filter classes, reused as-is).
   ===================================================================== */

/* Numeric column alignment (OB Qty, Rate, OB Value, MRP, TAX %) */
.mu-table thead th.mu-th-num[b-vozfp7j4gg] {
    text-align: right;
}

.mu-table tbody td.mu-num[b-vozfp7j4gg] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Status icons: green check (active) / red cross (inactive) ──
   Sizing + "active" green color are shared in wwwroot/CSS/masters-forms.css
   (.mu-check, .mu-cross); only the page-specific "inactive" red remains here. */
.mu-cross[b-vozfp7j4gg] {
    color: #dc2626;
}

/* Note: the filter drawer (.mu-drawer*/.mu-fld) is a shared[b-vozfp7j4gg], reusable rule
   set in wwwroot/CSS/masters-forms.css — nothing page-specific to keep here. */
/* .mu-row-click now lives in the global CSS/masters-forms.css (reusable
   anywhere) — no page-specific override needed here. */

/* ── Top tabs (GRID / ENTRY / REPORT / ITEMGALLERY / AUDIT) ── */
.le-toptabs[b-vozfp7j4gg] {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.le-toptab[b-vozfp7j4gg] {
    padding: 8px 16px;
    margin: 0 5px 6px 0;
    border: 1px solid #dde3ed;
    background: #fff;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .le-toptab:hover[b-vozfp7j4gg] {
        background: #f8fafc;
        border-color: #c3ccdb;
        color: #334155;
    }

    .le-toptab.active[b-vozfp7j4gg] {
        background: #fff;
        color: #14b8a6;
        border: 1.5px solid #14b8a6;
    }

.le-tabpane[b-vozfp7j4gg] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

.le-tabpane-msg[b-vozfp7j4gg] {
    color: #94a3b8;
    font-size: 14px;
}

/* =====================================================================
   Page-end footer pinning — same pattern used on BSPL / Daybook / TB /
   MLogin / MGroup / MItemGroup / MLedger. .mu-page becomes a full-height
   flex column; .mu-card (the bordered table box) grows to fill the
   remaining space instead of being sized only to its own content, and the
   footer sits as a direct sibling below it so it always lands at the true
   bottom of the page.
   ===================================================================== */
.mu-page[b-vozfp7j4gg] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.le-toptabs[b-vozfp7j4gg] {
    flex-shrink: 0;
    padding: 0 0 0 10px;
}

.mu-card[b-vozfp7j4gg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mu-table-wrap[b-vozfp7j4gg] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-vozfp7j4gg] {
    flex-shrink: 0;
}

.bspl-footer-right[b-vozfp7j4gg] {
    font-size: inherit;
    color: inherit;
}

.mu-pager[b-vozfp7j4gg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Mobile: "Filter" button — icon only, stays top-right ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-vozfp7j4gg] {
        margin-left: auto;
    }

    .bspl-title-actions .mu-btn-label[b-vozfp7j4gg] {
        display: none;
    }

    .bspl-title-actions .mu-btn[b-vozfp7j4gg] {
        padding: 8px 10px;
        gap: 0;
    }

    .bspl-title-actions .mu-btn i[b-vozfp7j4gg] {
        font-size: 15px;
    }

    .mu-foot-info[b-vozfp7j4gg] {
        display: none;
    }
}
/* /Components/Pages/Masters/MItemEdit.razor.rz.scp.css */
/* =====================================================================
   GAINS — MItemEdit.razor.css   (Item entry form, inline — Masters → Item → ENTRY)
   Blazor scopes component CSS per-file, so the generic "le-" field/row/button
   look (originally written for MLedgerEdit) is duplicated here rather than
   inherited — same convention already used across Masters pages.
   ===================================================================== */

.ie-root[b-8xc7kmihi6] {
    background: #fff;
    border: 1px solid #dde3ed;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    /* .ie-root is a flex item inside .mu-page (a fixed-height flex column,
       shared with the grid/tabs). Because overflow is not "visible" here,
       flexbox's automatic minimum size becomes 0 — so on mobile, once the
       stacked entry form got taller than .mu-page's box, the flex algorithm
       silently shrank .ie-root to fit instead of letting it grow, and
       overflow:hidden then clipped everything below the shrunk height
       (footer buttons, Set Rate, etc.) with no scrollbar anywhere. Same
       fix already used for .le-toptabs/.mu-foot as siblings in this flex
       column — pin it to its natural content height so it renders in full
       and the page (.gains-content) scrolls normally to reach it. */
    flex-shrink: 0;
}

.ie-main[b-8xc7kmihi6] {
    display: flex;
    align-items: stretch;
}

/* ── Left: form ── */
.ie-form[b-8xc7kmihi6] {
    flex: 1;
    min-width: 0;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.le-row[b-8xc7kmihi6] {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    gap: 12px;
}

.le-row > label[b-8xc7kmihi6] {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.le-req[b-8xc7kmihi6] {
    color: #dc2626;
}

.le-inp[b-8xc7kmihi6] {
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    font-size: 13px;
    font-family: inherit;
    color: #1a2537;
    background: #fff;
    outline: none;
    max-width: 320px;
}

    .le-inp:focus[b-8xc7kmihi6] {
        border-color: #1a56a7;
        box-shadow: 0 0 0 3px rgba(26,86,167,0.12);
    }

    .le-inp.le-sm[b-8xc7kmihi6] {
        max-width: 160px;
    }

    .le-inp.le-xs[b-8xc7kmihi6] {
        width: 64px;
        max-width: 64px;
    }

    .le-inp.le-amt[b-8xc7kmihi6] {
        width: 110px;
        max-width: 110px;
        text-align: right;
    }

.le-invalid[b-8xc7kmihi6] {
    border-color: #e11d48 !important;
    background: #fff5f6;
}

.le-field-err[b-8xc7kmihi6] {
    color: #b42318;
    font-size: 12px;
    margin-top: 2px;
}

.ie-pair[b-8xc7kmihi6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── HSN Code shaded box ── */
.ie-hsn-box[b-8xc7kmihi6] {
    background: #eef1f6;
    border-radius: 6px;
    padding: 10px 12px;
}

.ie-taxpct[b-8xc7kmihi6] {
    color: #15803d;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.ie-taxpct-btn[b-8xc7kmihi6] {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

    .ie-taxpct-btn:hover[b-8xc7kmihi6] {
        color: #116630;
    }

/* ── HSN tax-details popup — reuses the shared "uf-" modal system.
   Field/section spacing set locally per the convention in MItemGroupEdit.razor.css. ── */
.uf-modal-hsn[b-8xc7kmihi6] {
    max-width: 380px;
}

.uf-field[b-8xc7kmihi6] {
    margin-bottom: 13px;
}

    .uf-field:last-child[b-8xc7kmihi6] {
        margin-bottom: 0;
    }

.uf-section[b-8xc7kmihi6] {
    margin: 14px 0 0;
}

/* Set Rate's Save button only disables transiently while saving — keep it
   full-color rather than the global .uf-btn-save:disabled dimmed look, to
   match the HSN popup's Save button. */
.ie-sr-save:disabled[b-8xc7kmihi6] {
    opacity: 1;
    cursor: not-allowed;
}

.ie-hsn-popup-loading[b-8xc7kmihi6] {
    padding: 20px 0;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}

/* ── GlobalDatepicker (shared component) — Item-form-only adjustments ──
   These use Blazor's ::deep so they only reach into GlobalDatepicker's markup
   when it's rendered inside THIS page (the HSN/Set Rate popups). Every other
   page that uses GlobalDatepicker (BSPL, TB, QG, QLedger, DayBook, DocumentGrid)
   keeps its normal look — nothing here touches the shared component file. */

/* The calendar dropdown was getting clipped by this popup's own clipping
   (.uf-modal has overflow:hidden, .uf-body has overflow-y:auto with a capped
   height) — let it escape the popup instead of being cut off. */
.uf-modal-hsn[b-8xc7kmihi6] {
    overflow: visible;
}

.uf-modal-hsn .uf-body[b-8xc7kmihi6] {
    overflow: visible;
    max-height: none;
}

/* Move the calendar icon to the trailing edge as its own element (separated
   by a divider), instead of blended in at the start next to the date text. */
[b-8xc7kmihi6] .gdp-wrap {
    justify-content: space-between;
}

[b-8xc7kmihi6] .gdp-value {
    order: 1;
}

[b-8xc7kmihi6] .gdp-icon {
    order: 2;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #dde3ed;
}

/* ── Photo + price-history row ── */
.ie-media[b-8xc7kmihi6] {
    display: flex;
    gap: 20px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.ie-photo-box[b-8xc7kmihi6] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
}

.ie-photo-frame[b-8xc7kmihi6] {
    width: 150px;
    height: 150px;
    border: 1px solid #dde3ed;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
}

.ie-photo-img[b-8xc7kmihi6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ie-photo-placeholder[b-8xc7kmihi6] {
    color: #cbd5e1;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.ie-photo-btn-row[b-8xc7kmihi6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ie-photo-upload-btn[b-8xc7kmihi6] {
    cursor: pointer;
}

.ie-photo-remove-btn[b-8xc7kmihi6] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dde3ed;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

    .ie-photo-remove-btn:hover[b-8xc7kmihi6] {
        background: #fee2e2;
        border-color: #f1aab2;
        color: #dc2626;
    }

.ie-history[b-8xc7kmihi6] {
    flex: 1 1 220px;
    min-width: 200px;
    max-width: 300px;
    height: 150px;
    border: 1px solid #dde3ed;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ie-hist-scroll[b-8xc7kmihi6] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.ie-hist-table[b-8xc7kmihi6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

    .ie-hist-table thead th[b-8xc7kmihi6] {
        position: sticky;
        top: 0;
        background: #4b5563;
        color: #fff;
        font-weight: 600;
        font-size: 11px;
        line-height: 1.3;
        padding: 5px 8px;
        text-align: right;
    }

        .ie-hist-table thead th:first-child[b-8xc7kmihi6] {
            text-align: left;
        }

    .ie-hist-table tbody td[b-8xc7kmihi6] {
        padding: 5px 8px;
        border-bottom: 1px solid #eef2f7;
        text-align: right;
        color: #1a2537;
        line-height: 1.3;
    }

        .ie-hist-table tbody td:first-child[b-8xc7kmihi6] {
            text-align: left;
        }

.ie-hist-empty[b-8xc7kmihi6] {
    text-align: center !important;
    color: #94a3b8;
    padding: 10px 0 !important;
    font-size: 12px;
    border-bottom: none !important;
}

/* ── Right: side action buttons (placeholders) ── */
.ie-side[b-8xc7kmihi6] {
    flex: 0 0 190px;
    background: #eef1f6;
    border-left: 1px solid #e5e9f0;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ie-side-btn[b-8xc7kmihi6] {
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: not-allowed;
    letter-spacing: 0.02em;
}

    /* Enabled side buttons (e.g. Set Rate) get the normal clickable look —
       everything still pending an endpoint stays disabled and greyed out above. */
    .ie-side-btn:not(:disabled)[b-8xc7kmihi6] {
        background: #fff;
        color: #334155;
        cursor: pointer;
    }

        .ie-side-btn:not(:disabled):hover[b-8xc7kmihi6] {
            background: #f8fafc;
            border-color: #94a3b8;
        }

/* ── Footer ── */
.le-foot[b-8xc7kmihi6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid #e5e9f0;
    background: #f7f9fc;
}

.le-btn[b-8xc7kmihi6] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.04em;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}

    .le-btn:hover[b-8xc7kmihi6] {
        background: #eef4fb;
    }

    .le-btn:disabled[b-8xc7kmihi6] {
        opacity: 0.6;
        cursor: not-allowed;
    }

        .le-btn:disabled:hover[b-8xc7kmihi6] {
            background: #fff;
        }

    .le-btn.save[b-8xc7kmihi6] {
        background: #15803d;
        border-color: #15803d;
        color: #fff;
    }

        .le-btn.save:hover:not(:disabled)[b-8xc7kmihi6] {
            background: #116630;
        }

        .le-btn.save:disabled[b-8xc7kmihi6] {
            background: #86b99a;
            border-color: #86b99a;
        }

    .le-btn.del[b-8xc7kmihi6] {
        color: #b91c1c;
        border-color: #f1c4c4;
    }

        .le-btn.del:hover:not(:disabled)[b-8xc7kmihi6] {
            background: #fee2e2;
        }

.ie-gear[b-8xc7kmihi6] {
    margin-left: auto;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
}

    .ie-gear:hover[b-8xc7kmihi6] {
        color: #64748b;
    }

@media (max-width: 720px) {
    .ie-main[b-8xc7kmihi6] {
        flex-direction: column;
    }

    .ie-form[b-8xc7kmihi6] {
        padding: 14px;
    }

    /* Fixed 130px label column + fixed-width inputs is what was overflowing —
       stack label above field and let inputs size to the available width. */
    .le-row[b-8xc7kmihi6] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .le-inp[b-8xc7kmihi6] {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

        .le-inp.le-sm[b-8xc7kmihi6],
        .le-inp.le-xs[b-8xc7kmihi6],
        .le-inp.le-amt[b-8xc7kmihi6] {
            width: auto;
            max-width: none;
            flex: 1 1 80px;
        }

    .ie-pair[b-8xc7kmihi6] {
        flex-wrap: wrap;
    }

    .ie-taxpct[b-8xc7kmihi6],
    .ie-taxpct-btn[b-8xc7kmihi6] {
        flex: 0 0 auto;
    }

    .ie-media[b-8xc7kmihi6] {
        flex-direction: column;
    }

    .ie-photo-box[b-8xc7kmihi6] {
        width: 100%;
    }

    .ie-history[b-8xc7kmihi6] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* .ie-side was picking up its row-layout flex-basis (190px) as a HEIGHT
       once .ie-main switches to column — reset it to a normal full-width block
       instead of a squashed 190px-tall strip. */
    .ie-side[b-8xc7kmihi6] {
        flex: 0 0 auto;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        border-left: none;
        border-top: 1px solid #e5e9f0;
    }

        .ie-side-btn[b-8xc7kmihi6] {
            flex: 1 1 45%;
        }

    .le-foot.ie-foot[b-8xc7kmihi6] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ie-gear[b-8xc7kmihi6] {
        margin-left: auto;
    }
}

@media (max-width: 480px) {
    /* Icons only — same "mu-btn-label" convention MItem.razor's grid header
       already uses for its Filter button on narrow screens. */
    .ie-btn-label[b-8xc7kmihi6] {
        display: none;
    }

    .le-foot.ie-foot .le-btn[b-8xc7kmihi6] {
        padding: 8px 10px;
        gap: 0;
    }

    .ie-side-btn[b-8xc7kmihi6] {
        flex: 1 1 100%;
    }
}

@media (max-width: 540px) {
    /* Same treatment MItemGroupEdit.razor.css already gives its own .uf-field —
       applied here too since the HSN/Set Rate popups use the same shared class. */
    .uf-field[b-8xc7kmihi6] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

        .uf-field > label[b-8xc7kmihi6] {
            padding-top: 0;
        }
}
/* /Components/Pages/Masters/MItemGroup.razor.rz.scp.css */
/* =====================================================================
   GAINS — MItemGroup.razor.css   (Masters → Item Group grid, page-scoped)
   Shared "mu-" grid/page styles now live in wwwroot/CSS/masters-forms.css.
   Only Item-Group-page-specific rules remain here.
   ===================================================================== */

/* =====================================================================
   Page-end footer pinning — same pattern used on BSPL / Daybook / TB /
   MLogin / MGroup. .mu-page becomes a full-height flex column; .mu-card
   (the bordered table box) grows to fill the remaining space instead of
   being sized only to its own content, and the footer sits as a direct
   sibling below it so it always lands at the true bottom of the page.
   ===================================================================== */
.mu-page[b-r0e2nyz8pf] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mu-card[b-r0e2nyz8pf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mu-toolbar[b-r0e2nyz8pf] {
    flex-shrink: 0;
}

.mu-table-wrap[b-r0e2nyz8pf] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-r0e2nyz8pf] {
    flex-shrink: 0;
}

.bspl-footer-right[b-r0e2nyz8pf] {
    font-size: inherit;
    color: inherit;
}

.mu-pager[b-r0e2nyz8pf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Photo thumbnail column ── */
.mu-photo-cell[b-r0e2nyz8pf] {
    width: 48px;
}

.mu-photo-thumb[b-r0e2nyz8pf] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    object-fit: cover;
    display: block;
}

.mu-photo-placeholder[b-r0e2nyz8pf] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* ── Mobile: "New item group" button — icon only, stays top-right ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-r0e2nyz8pf] {
        margin-left: auto;
    }

    .bspl-title-actions .mu-btn-label[b-r0e2nyz8pf] {
        display: none;
    }

    .bspl-title-actions .mu-btn[b-r0e2nyz8pf] {
        padding: 8px 10px;
        gap: 0;
    }

    .bspl-title-actions .mu-btn i[b-r0e2nyz8pf] {
        font-size: 15px;
    }

    .mu-foot-info[b-r0e2nyz8pf] {
        display: none;
    }
}
/* /Components/Pages/Masters/MItemGroupEdit.razor.rz.scp.css */
/* =====================================================================
   GAINS — MItemGroupEdit.razor.css   (edit Item Group modal)
   Shared "uf-" modal styles now live in wwwroot/CSS/masters-forms.css.
   Only Item-Group-edit-specific rules and small overrides remain here.
   ===================================================================== */

.uf-modal-sm[b-gun49tn4fd] { max-width: 460px; }

/* Field spacing / section spacing specific to this (shorter) form */
.uf-field[b-gun49tn4fd] { margin-bottom: 13px; }
.uf-field:last-child[b-gun49tn4fd] { margin-bottom: 0; }
.uf-section[b-gun49tn4fd] { margin: 0 0 0; }

/* Read-only depth row */
.uf-depth[b-gun49tn4fd] { display: flex; align-items: center; gap: 12px; padding-top: 7px; }
.uf-depth-val[b-gun49tn4fd] { font-size: 14px; font-weight: 600; color: #1e293b; }

/* ── Photo: a rectangular preview box, with the upload/remove buttons stacked below it.
   The real <input type="file"> is visually hidden (clip-rect, not opacity) and triggered
   by a <label for="...">, so only one button is ever visible — no native file-picker UI
   leaks through next to it. ── */
.uf-photo-stack[b-gun49tn4fd] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.uf-photo-box[b-gun49tn4fd] {
    width: 168px;
    height: 168px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uf-photo-img[b-gun49tn4fd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.uf-photo-placeholder[b-gun49tn4fd] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 32px;
}

.uf-photo-btn-row[b-gun49tn4fd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
}

.uf-photo-upload-btn[b-gun49tn4fd],
.uf-photo-remove-btn[b-gun49tn4fd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    width: fit-content;
    white-space: nowrap;
    padding: 4px 9px;
    font-size: 11px;
}

.uf-photo-upload-btn i[b-gun49tn4fd],
.uf-photo-remove-btn i[b-gun49tn4fd] {
    font-size: 10px;
}

@media (max-width: 540px) {
    .uf-field[b-gun49tn4fd] { grid-template-columns: 1fr; gap: 4px; }
    .uf-field > label[b-gun49tn4fd] { padding-top: 0; }
}
/* /Components/Pages/Masters/MLedger.razor.rz.scp.css */
/* =====================================================================
   GAINS — MLedger.razor.css   (Masters → Ledger grid, page-scoped)
   Shared "mu-" grid/page styles now live in wwwroot/CSS/masters-forms.css.
   Only Ledger-page-specific rules and small overrides remain here.
   ===================================================================== */

/* Toast on this page is slightly smaller than the shared default */
.mu-toast[b-26ww3l7206] {
    gap: 12px;
    min-width: 300px;
    padding: 16px 16px 16px 18px;
    font-size: 14px;
}

/* Numeric column alignment (Ledger grid only) */
.mu-table thead th.mu-th-num[b-26ww3l7206] {
    text-align: right;
}

.mu-table tbody td.mu-num[b-26ww3l7206] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Status pill ── */
.mu-status[b-26ww3l7206] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}

    .mu-status.on[b-26ww3l7206] {
        background: #dcfce7;
        color: #15803d;
    }

    .mu-status.off[b-26ww3l7206] {
        background: #f1f5f9;
        color: #64748b;
    }

/* ── Status icons: green check (active) / red cross (inactive) ──
   Sizing + "active" green color are shared in wwwroot/CSS/masters-forms.css
   (.mu-check, .mu-cross); only the page-specific "inactive" red remains here. */
.mu-cross[b-26ww3l7206] {
    color: #dc2626;
}

/* Note: the filter bar (.mu-filter/.mu-alpha/.mu-filter-grid) and the
   filter drawer (.mu-drawer*/ .mu-fld) are now shared[b-26ww3l7206], reusable rules in
wwwroot/CSS/masters-forms.css — nothing page-specific to keep here. */
/* .mu-row-click now lives in the global CSS/masters-forms.css (reusable
   anywhere) — no page-specific override needed here. */
/* ── Top tabs (GRID / CONTACTS / ENTRY / REPORT / AUDIT) ── */
.le-toptabs[b-26ww3l7206] {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.le-toptab[b-26ww3l7206] {
    padding: 8px 16px;
    margin: 0 5px 6px 0;
    border: 1px solid #dde3ed;
    background: #fff;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .le-toptab:hover[b-26ww3l7206] {
        background: #f8fafc;
        border-color: #c3ccdb;
        color: #334155;
    }

    .le-toptab.active[b-26ww3l7206] {
        background: #fff;
        color: #14b8a6;
        border: 1.5px solid #14b8a6;
    }

.le-tabpane[b-26ww3l7206] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

.le-tabpane-msg[b-26ww3l7206] {
    color: #94a3b8;
    font-size: 14px;
}

/* =====================================================================
   Page-end footer pinning — same pattern used on BSPL / Daybook / TB /
   MLogin / MGroup. .mu-page becomes a full-height flex column; .mu-card
   (the bordered table box) grows to fill the remaining space instead of
   being sized only to its own content, and the footer sits as a direct
   sibling below it so it always lands at the true bottom of the page.
   ===================================================================== */
.mu-page[b-26ww3l7206] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.le-toptabs[b-26ww3l7206] {
    flex-shrink: 0;
    padding: 0 0 0 10px;
}

.mu-card[b-26ww3l7206] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mu-toolbar[b-26ww3l7206] {
    flex-shrink: 0;
}

.mu-table-wrap[b-26ww3l7206] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-26ww3l7206] {
    flex-shrink: 0;
}

/* mu-pager sits inside .bspl-footer-right now — undo the inherited
   margin-left:auto/font-size/color from common-page-chrome.css so the
   pagesize dropdown and page buttons keep their own sizing/typography. */
.bspl-footer-right[b-26ww3l7206] {
    font-size: inherit;
    color: inherit;
}

.mu-pager[b-26ww3l7206] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Mobile: "New ledger" / "Filter" buttons — icon only, stay top-right ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-26ww3l7206] {
        margin-left: auto;
    }

    .bspl-title-actions .mu-btn-label[b-26ww3l7206] {
        display: none;
    }

    .bspl-title-actions .mu-btn[b-26ww3l7206] {
        padding: 8px 10px;
        gap: 0;
    }

    .bspl-title-actions .mu-btn i[b-26ww3l7206] {
        font-size: 15px;
    }

    .mu-foot-info[b-26ww3l7206] {
        display: none;
    }
}
/* /Components/Pages/Masters/MLedgerEdit.razor.rz.scp.css */
/* =====================================================================
   GAINS - MLedgerEdit.razor.css   (Ledger edit form, tabbed, inline)
   ===================================================================== */

/* =====================================================================
   Font (Arial) for this form is set via the shared .le-inline rule in
   wwwroot/CSS/masters-forms.css — no need to repeat it here.
   ===================================================================== */
.le-inline[b-7cxrak7dj5] {
    position: relative;
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 100%;
    height: 72vh; min-height: 460px;
    background: #fff; border: 1px solid #dde3ed; border-radius: 0;
    overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    /* .le-inline is a flex item inside .mu-page (a fixed-height flex column,
       shared with the grid/tabs). Pin it so it can never be shrunk by the
       flex algorithm below its own box — same trap and same fix as
       MItemEdit's .ie-root. */
    flex-shrink: 0;
}
@media (max-width: 720px) {
    .le-inline[b-7cxrak7dj5] {
        grid-template-columns: 1fr;
        /* A fixed 72vh/460px single-row-height 2-pane card doesn't leave
           enough room once the rail (tab list) stacks above the pane on
           mobile — the tab list and footer buttons were getting squeezed
           out of the visible box. Let the card grow to fit its stacked
           content instead, same "natural height + page scroll" approach
           used for the Item entry form. */
        grid-template-rows: auto 1fr;
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .le-rail[b-7cxrak7dj5] {
        height: auto;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid #e5e9f0;
    }

    /* Tab list becomes a horizontal row instead of a stacked column. */
    .le-tabs[b-7cxrak7dj5] {
        flex-direction: row;
        flex-wrap: wrap;
        overflow-y: visible;
        overflow-x: auto;
        flex: 0 0 auto;
        padding: 8px;
        gap: 6px;
    }

    .le-tab[b-7cxrak7dj5] {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Dr/Cr/Diff summary is desktop-only real estate — hide on mobile. */
    .le-diff[b-7cxrak7dj5] {
        display: none;
    }

    .le-pane[b-7cxrak7dj5] {
        height: auto;
        min-height: 320px;
    }

    /* Fixed 140px label column + fixed-width inputs is what was overflowing
       on narrow screens — stack label above field, same treatment already
       given to .le-row2 just below. */
    .le-row[b-7cxrak7dj5] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .le-inp[b-7cxrak7dj5] {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

        .le-inp.le-sm[b-7cxrak7dj5],
        .le-inp.le-xs[b-7cxrak7dj5],
        .le-inp.le-amt[b-7cxrak7dj5] {
            width: auto;
            max-width: none;
            flex: 1 1 80px;
        }

    .le-ob[b-7cxrak7dj5] {
        flex-wrap: wrap;
    }

    .le-foot[b-7cxrak7dj5] {
        flex-wrap: wrap;
    }

    .le-pane-hdr[b-7cxrak7dj5] {
        flex-wrap: wrap;
        gap: 10px 20px;
    }
}

/* Left rail */
.le-rail[b-7cxrak7dj5] {
    display: flex; flex-direction: column;
    border-right: 1px solid #e5e9f0; background: #fbfcfe;
    height: 100%; min-height: 0; overflow: hidden;
}
.le-tabs[b-7cxrak7dj5] { display: flex; flex-direction: column; padding: 8px; gap: 2px; flex: 1; overflow-y: auto; }
.le-tab[b-7cxrak7dj5] {
    text-align: left; padding: 8px 12px; border: none; background: none;
    font-size: 13px; color: #334155; font-family: inherit; cursor: pointer;
    border-radius: 6px; transition: background 0.12s, color 0.12s;
}
.le-tab:hover[b-7cxrak7dj5] { background: #eef4fb; }
.le-tab.active[b-7cxrak7dj5] { background: #c7d8f0; color: #0f3d82; font-weight: 600; }
.le-tab:disabled[b-7cxrak7dj5] { opacity: 0.4; cursor: not-allowed; }
.le-tab:disabled:hover[b-7cxrak7dj5] { background: none; }

.le-diff[b-7cxrak7dj5] { border-top: 1px solid #e5e9f0; padding: 10px 12px; }
.le-diff-hdr[b-7cxrak7dj5] { font-size: 12px; font-weight: 700; color: #1a2537; text-align: center; margin-bottom: 6px; }
.le-diff-row[b-7cxrak7dj5] { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; color: #1a56a7; }
.le-diff-row b[b-7cxrak7dj5] { font-variant-numeric: tabular-nums; }
.le-diff-delta[b-7cxrak7dj5] { border-top: 1px dashed #cbd5e1; margin-top: 4px; padding-top: 6px; }

/* Right pane */
.le-pane[b-7cxrak7dj5] { display: flex; flex-direction: column; min-width: 0; height: 100%; min-height: 0; }
.le-pane-hdr[b-7cxrak7dj5] {
    display: flex; gap: 28px; align-items: center;
    padding: 12px 18px; background: #eef1f6; border-bottom: 1px solid #e5e9f0;
    font-size: 13px; color: #475569; font-weight: 600;
}
.le-body[b-7cxrak7dj5] { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px; }

.le-form[b-7cxrak7dj5] { display: flex; flex-direction: column; gap: 12px; }
.le-row[b-7cxrak7dj5] { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 12px; }
.le-row-top[b-7cxrak7dj5] { align-items: start; }
.le-row > label[b-7cxrak7dj5] { font-size: 13px; color: #334155; }
.le-req[b-7cxrak7dj5] { color: #dc2626; }
.le-inp[b-7cxrak7dj5] {
    padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 5px;
    font-size: 13px; font-family: inherit; color: #1a2537; background: #fff; outline: none;
    max-width: 320px;
}
.le-inp:focus[b-7cxrak7dj5] { border-color: #1a56a7; box-shadow: 0 0 0 3px rgba(26,86,167,0.12); }
.le-inp:disabled[b-7cxrak7dj5] { background: #f1f5f9; color: #64748b; cursor: not-allowed; }
.le-inp.le-sm[b-7cxrak7dj5] { max-width: 180px; }
.le-inp.le-xs[b-7cxrak7dj5] { width: 64px; }
.le-inp.le-amt[b-7cxrak7dj5] { width: 130px; text-align: right; }
.le-ta[b-7cxrak7dj5] { resize: none; width: 100%; max-width: 320px; }
.le-ob[b-7cxrak7dj5] { display: flex; align-items: center; gap: 8px; }
.le-curr[b-7cxrak7dj5] { font-size: 13px; color: #475569; }
.le-placeholder[b-7cxrak7dj5] { color: #94a3b8; font-size: 14px; padding: 40px 8px; text-align: center; }

/* Section bars + checkbox lists */
.le-section[b-7cxrak7dj5] {
    background: #2f5c8f; color: #fff;
    font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
    padding: 7px 12px; border-radius: 4px; margin: 2px 0 6px;
}
.le-checks[b-7cxrak7dj5] { display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }
.le-chk[b-7cxrak7dj5] { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #1a2537; cursor: pointer; }
/* .le-chk input sizing is shared in wwwroot/CSS/masters-forms.css */
.le-taxchk[b-7cxrak7dj5] { margin-bottom: 4px; }

/* Two-column rows (Address / Statutory) */
.le-row2[b-7cxrak7dj5] {
    display: grid; grid-template-columns: 140px 210px 120px 210px;
    gap: 12px; align-items: center; justify-content: start;
}
.le-row2 > label[b-7cxrak7dj5] { font-size: 13px; color: #334155; }
.le-row2 .le-inp[b-7cxrak7dj5] { width: 100%; max-width: none; }
.le-geo[b-7cxrak7dj5] { display: flex; align-items: center; gap: 6px; width: 100%; }
.le-geo .le-inp[b-7cxrak7dj5] { flex: 1; min-width: 0; width: auto; max-width: none; }
.le-geo .le-xs[b-7cxrak7dj5] { flex: 0 0 56px; }
.le-pin[b-7cxrak7dj5] { color: #dc2626; flex: 0 0 auto; }
.le-cal[b-7cxrak7dj5] { color: #1a56a7; font-size: 15px; cursor: pointer; flex: 0 0 auto; }
@media (max-width: 760px) {
    .le-row2[b-7cxrak7dj5] { grid-template-columns: 140px 1fr; }
}

/* Footer */
.le-readonly[b-7cxrak7dj5] { background: #f1f5f9; color: #475569; cursor: not-allowed; }

/* City autocomplete */
.le-autocomplete[b-7cxrak7dj5] { position: relative; }
.le-suggest[b-7cxrak7dj5] {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 40;
    margin: 0; padding: 4px; list-style: none;
    background: #fff; border: 1px solid #cbd5e1; border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
    max-height: 240px; overflow-y: auto;
}
.le-suggest li[b-7cxrak7dj5] {
    display: flex; flex-direction: column; gap: 1px;
    padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #1a2537;
}
.le-suggest li:hover[b-7cxrak7dj5],
.le-suggest li.active[b-7cxrak7dj5] { background: #eef4fb; }
.le-suggest-sub[b-7cxrak7dj5] { font-size: 11.5px; color: #94a3b8; }

/* Contacts table — matches the shared mu-table grid look */
.le-contacts-wrap[b-7cxrak7dj5] { max-height: 540px; overflow: auto; }
.le-contacts[b-7cxrak7dj5] { width: 100%; border-collapse: collapse; font-size: 13px; }
.le-contacts thead th[b-7cxrak7dj5] {
    position: sticky; top: 0; z-index: 1;
    background: #4b5563; color: #fff;
    text-align: left; font-weight: 600; font-size: 12.5px;
    padding: 10px 14px; white-space: nowrap;
}
.le-contacts tbody td[b-7cxrak7dj5] {
    padding: 10px 14px; color: #1a2537;
    border-bottom: 1px solid #eef2f7; white-space: nowrap;
}
.le-contacts tbody tr:nth-child(even) td[b-7cxrak7dj5] { background: #f7f9fc; }
.le-contacts tbody tr:hover td[b-7cxrak7dj5] { background: #eef4fb; }
.le-contacts .le-idx[b-7cxrak7dj5] { color: #1a56a7; font-weight: 600; }
.le-contacts tbody tr.le-row-click[b-7cxrak7dj5] { cursor: pointer; }
.le-th-act[b-7cxrak7dj5] { width: 48px; }
.le-th-chk[b-7cxrak7dj5] { width: 44px; }
.le-contacts thead th.le-th-chk[b-7cxrak7dj5] { text-align: center; }
.le-cat-wrap[b-7cxrak7dj5] { max-width: 480px; }
.le-cat-wrap .le-contacts th:last-child[b-7cxrak7dj5],
.le-cat-wrap .le-contacts td:last-child[b-7cxrak7dj5] { width: 70px; text-align: left; }
.le-act-cell[b-7cxrak7dj5] { text-align: center; }
/* .le-del sizing/color/hover are shared in wwwroot/CSS/masters-forms.css (.mu-del, .le-del) */

/* Contact edit modal */
.le-modal-overlay[b-7cxrak7dj5] {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px);
}
.le-modal[b-7cxrak7dj5] {
    position: fixed; z-index: 1201; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, 92vw);
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    display: flex; flex-direction: column;
}
.le-modal-hdr[b-7cxrak7dj5] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; background: #eef1f6; border-bottom: 1px solid #e5e9f0;
    font-size: 14px; font-weight: 600; color: #1a2537;
}
.le-modal-x[b-7cxrak7dj5] {
    background: none; border: none; color: #64748b;
    font-size: 22px; line-height: 1; cursor: pointer;
}
.le-modal-x:hover[b-7cxrak7dj5] { color: #334155; }
.le-modal-body[b-7cxrak7dj5] { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.le-modal-foot[b-7cxrak7dj5] {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 18px; border-top: 1px solid #e5e9f0; background: #f7f9fc;
}
/* Confirm dialog — fully shared in wwwroot/CSS/masters-forms.css
   (.mu-confirm-*, .le-cfm-* are styled together there) */

/* Default flag: green check (yes) / maroon cross (no) —
   sizing + green shared in wwwroot/CSS/masters-forms.css (.le-chk-ok, .le-chk-no) */
.le-chk-no[b-7cxrak7dj5] { color: #7f1d1d; }

/* Field validation */
.le-invalid[b-7cxrak7dj5] { border-color: #e11d48 !important; background: #fff5f6; }
.le-field-err[b-7cxrak7dj5] { color: #b42318; font-size: 12px; margin: -6px 0 2px; }

/* Toast (top-right) */
.le-toast[b-7cxrak7dj5] {
    position: fixed; right: 28px; top: 28px; z-index: 1100;
    display: flex; align-items: center; gap: 12px;
    min-width: 300px; max-width: 420px;
    padding: 16px 16px 16px 18px; border-radius: 14px;
    background: #fff; color: #0f3d36;
    border: 1px solid #cdeee4; border-left: 5px solid #1ab99a;
    box-shadow: 0 16px 40px rgba(15, 118, 110, 0.22);
    font-size: 14px; font-weight: 500; line-height: 1.3;
    animation: le-toast-in-b-7cxrak7dj5 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.le-toast-err[b-7cxrak7dj5] { border-left-color: #e11d48; color: #7f1d1d; }
.le-toast span[b-7cxrak7dj5] { flex: 1; }
.le-toast-x[b-7cxrak7dj5] {
    background: none; border: none; color: #94a3b8;
    font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; margin-left: 4px;
}
.le-toast-x:hover[b-7cxrak7dj5] { color: #475569; }
@keyframes le-toast-in-b-7cxrak7dj5 {
    from { opacity: 0; transform: translateY(-16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.le-foot[b-7cxrak7dj5] {
    display: flex; gap: 10px; padding: 14px 18px; flex-shrink: 0;
    border-top: 1px solid #e5e9f0; background: #f7f9fc;
}
.le-btn[b-7cxrak7dj5] {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 6px; border: 1px solid #cbd5e1;
    background: #fff; color: #334155; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
    letter-spacing: 0.04em; white-space: nowrap; user-select: none; flex-shrink: 0;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.le-btn:hover[b-7cxrak7dj5] { background: #eef4fb; }
.le-btn.save[b-7cxrak7dj5] { background: #15803d; border-color: #15803d; color: #fff; }
.le-btn.save:hover[b-7cxrak7dj5] { background: #116630; }
.le-btn.del[b-7cxrak7dj5] { color: #b91c1c; border-color: #f1c4c4; }
.le-btn.del:hover[b-7cxrak7dj5] { background: #fee2e2; }
.le-row2 .le-btn[b-7cxrak7dj5] { padding: 6px 12px; }
/* /Components/Pages/Masters/MLogin.razor.rz.scp.css */
/* =====================================================================
   GAINS — MLogin.razor.css   (Masters → Login user grid, page-scoped)
   Shared "mu-" grid/page styles now live in wwwroot/CSS/masters-forms.css.
   Only Login-page-specific rules remain here.
   ===================================================================== */

/* "Login" link-style button inside the grid rows */
.mu-login[b-nha6g8xbow] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .mu-login:hover[b-nha6g8xbow] {
        text-decoration: underline;
    }

/* =====================================================================
   Page-end footer pinning — same pattern used on BSPL / Daybook / TB.
   .mu-page becomes a full-height flex column; .mu-card (the bordered
   table box) grows to fill the remaining space instead of being sized
   only to its own content, and .mu-foot (pagination) sits as a direct
   sibling below it so it always lands at the true bottom of the page
   rather than trailing right under a short table.
   ===================================================================== */
.mu-page[b-nha6g8xbow] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mu-card[b-nha6g8xbow] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mu-toolbar[b-nha6g8xbow] {
    flex-shrink: 0;
}

.mu-table-wrap[b-nha6g8xbow] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-nha6g8xbow] {
    flex-shrink: 0;
}

/* mu-pager sits inside .bspl-footer-right now — undo the inherited
   margin-left:auto/font-size/color from common-page-chrome.css so the
   pagesize dropdown and page buttons keep their own sizing/typography. */
.bspl-footer-right[b-nha6g8xbow] {
    font-size: inherit;
    color: inherit;
}

.mu-pager[b-nha6g8xbow] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Mobile: "New user" button — icon only, stays top-right ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-nha6g8xbow] {
        margin-left: auto;
    }

    .bspl-title-actions .mu-btn-label[b-nha6g8xbow] {
        display: none;
    }

    .bspl-title-actions .mu-btn[b-nha6g8xbow] {
        padding: 8px 10px;
        gap: 0;
    }

    .bspl-title-actions .mu-btn i[b-nha6g8xbow] {
        font-size: 15px;
    }

    .mu-foot-info[b-nha6g8xbow] {
        display: none;
    }
}
/* /Components/Pages/Masters/MLoginEdit.razor.rz.scp.css */
/* =====================================================================
   GAINS — MLoginEdit.razor.css   (add/edit Login modal)
   Shared "uf-" modal styles now live in wwwroot/CSS/masters-forms.css.
   Only Login-edit-specific rules and small overrides remain here.
   ===================================================================== */

.uf-grid[b-94tnkwqe1u] { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; }
.uf-col[b-94tnkwqe1u] { display: flex; flex-direction: column; }

/* This form's fields/sections use slightly different spacing */
.uf-field[b-94tnkwqe1u] { margin-bottom: 11px; }
.uf-section[b-94tnkwqe1u] { margin: 18px 0 0; }

.uf-input-sm[b-94tnkwqe1u] { width: auto; min-width: 92px; }

/* Password field eye-toggle (.uf-pwd, .uf-eye) is now shared in
   wwwroot/CSS/masters-forms.css — reusable on any future Masters edit form. */

/* Mobile (cc + number) */
.uf-mobile[b-94tnkwqe1u] { display: flex; gap: 6px; }
.uf-cc[b-94tnkwqe1u] {
    flex: 0 0 66px; padding: 8px 6px; border: 1px solid #dde3ec; border-radius: 8px;
    font-size: 13px; color: #1e293b; font-family: inherit; background: #fff; cursor: pointer;
}
.uf-cc:focus[b-94tnkwqe1u] { outline: none; border-color: #1ab99a; box-shadow: 0 0 0 3px rgba(26, 185, 154, 0.16); }

/* Checkbox rows */
.uf-checks[b-94tnkwqe1u] { display: flex; flex-wrap: wrap; gap: 9px 18px; margin: 6px 0 12px; }
.uf-checks-col[b-94tnkwqe1u] { flex-direction: column; gap: 9px; }
.uf-check[b-94tnkwqe1u] { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #334155; cursor: pointer; }
/* .uf-check input sizing is shared in wwwroot/CSS/masters-forms.css */

.uf-access-row[b-94tnkwqe1u] { margin: 2px 0 12px; }
/* .uf-btn-ghost is shared in wwwroot/CSS/masters-forms.css */

.uf-userlog[b-94tnkwqe1u] {
    display: flex; align-items: center; gap: 11px;
    background: #f7f8fc; border: 1px solid #eceef6; border-radius: 10px; padding: 11px 13px;
}
.uf-userlog-icon[b-94tnkwqe1u] { font-size: 18px; }
.uf-userlog-btn[b-94tnkwqe1u] {
    background: #e2f7f1; color: #0f766e; border: 1px solid #b6e8db; border-radius: 7px;
    padding: 5px 13px; font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.12s;
}
.uf-userlog-btn:hover[b-94tnkwqe1u] { background: #d2f1e8; }
.uf-userlog-note[b-94tnkwqe1u] { font-size: 11.5px; color: #94a3b8; font-style: italic; }

.uf-days[b-94tnkwqe1u] { display: flex; flex-wrap: wrap; gap: 9px 16px; }

/* Google Authenticator row + reset button */
.uf-ga-row[b-94tnkwqe1u] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.uf-reset-auth[b-94tnkwqe1u] {
    padding: 5px 12px; border-radius: 7px; cursor: pointer;
    border: 1px solid #cdeee4; background: #effbf7; color: #0f766e;
    font-size: 12px; font-weight: 500; font-family: inherit; transition: background 0.12s;
}
.uf-reset-auth:hover[b-94tnkwqe1u] { background: #d6f2ea; }
.uf-reset-done[b-94tnkwqe1u] { font-size: 12px; color: #0f766e; font-weight: 500; }

.uf-inline-fields[b-94tnkwqe1u] { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; }
.uf-inline-fields .uf-field[b-94tnkwqe1u] { grid-template-columns: auto auto; align-items: center; margin-bottom: 0; }
.uf-inline-fields .uf-field > label[b-94tnkwqe1u] { padding-top: 0; }
.uf-time[b-94tnkwqe1u] { display: flex; align-items: center; gap: 6px; }
.uf-time-suffix[b-94tnkwqe1u] { font-size: 12px; color: #94a3b8; }
.uf-depo[b-94tnkwqe1u] { align-items: center; }
.uf-depo .uf-field[b-94tnkwqe1u] { grid-template-columns: 56px 1fr; }

.uf-xlogin[b-94tnkwqe1u] { display: flex; flex-wrap: wrap; gap: 10px; }

/* Footer */
.uf-footer-right[b-94tnkwqe1u] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* .uf-btn-new / .uf-btn-del are shared in wwwroot/CSS/masters-forms.css */
.uf-help[b-94tnkwqe1u] { margin-left: 6px; font-size: 11.5px; color: #94a3b8; }

@media (max-width: 700px) {
    .uf-grid[b-94tnkwqe1u] { grid-template-columns: 1fr; gap: 0; }
}
/* /Components/Pages/Masters/MNarration.razor.rz.scp.css */
/* =====================================================================
   GAINS — MNarration.razor.css   (Masters → Narration grid, page-scoped)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only Narration-page-specific rules remain here.
   ===================================================================== */

.mu-page[b-ajghd7nc0u] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mu-card[b-ajghd7nc0u] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mu-toolbar[b-ajghd7nc0u] {
    flex-shrink: 0;
}

.mu-table-wrap[b-ajghd7nc0u] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-ajghd7nc0u] {
    flex-shrink: 0;
}

.bspl-footer-right[b-ajghd7nc0u] {
    font-size: inherit;
    color: inherit;
}

.mu-pager[b-ajghd7nc0u] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── NarCode column: keep it tight; narration takes the rest ── */
.mu-nar-code[b-ajghd7nc0u] {
    width: 120px;
    white-space: nowrap;
}

/* ── Narration column: long free text — clamp to one line with an ellipsis
   (full text still available via the row's title tooltip) so a huge entry
   doesn't force endless horizontal scroll. ── */
.mu-nar-text[b-ajghd7nc0u] {
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Narration textarea in the add/edit modal ── */
.uf-nar-textarea[b-ajghd7nc0u] {
    box-sizing: border-box;
    min-height: 120px;
    resize: vertical;
    line-height: 1.4;
}

/* ── Mobile: "New narration" button — icon only, stays top-right ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-ajghd7nc0u] {
        margin-left: auto;
    }

        .bspl-title-actions .mu-btn-label[b-ajghd7nc0u] {
            display: none;
        }

        .bspl-title-actions .mu-btn[b-ajghd7nc0u] {
            padding: 8px 10px;
            gap: 0;
        }

            .bspl-title-actions .mu-btn i[b-ajghd7nc0u] {
                font-size: 15px;
            }

    .mu-foot-info[b-ajghd7nc0u] {
        display: none;
    }

    .mu-nar-text[b-ajghd7nc0u] {
        max-width: 200px;
    }
}
/* /Components/Pages/Masters/MRole.razor.rz.scp.css */
/* MRole.razor.css — scoped styles for the Role Master list page */

/* Role name column — prominent */
.rm-role-name[b-3h4jqrnnti] {
    font-weight: 500;
    color: #111827;
}

/* Role ID column — muted, narrow */
.rm-role-id[b-3h4jqrnnti] {
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

.rm-th-id[b-3h4jqrnnti] {
    width: 90px;
}

/* Total count badge in subtitle */
.rm-total-badge[b-3h4jqrnnti] {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 10px;
    background: #e0f2fe;
    color: #075985;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}
/* /Components/Pages/Masters/MRoleEdit.razor.rz.scp.css */
/* MRoleEdit.razor.css — scoped styles for the Role edit modal */
/* Role is a single-field form — no extra layout needed */
/* /Components/Pages/Masters/MTaxClass.razor.rz.scp.css */
/* MTaxClass.razor.css — scoped styles for the Tax Class list page */

/* Percentage column — right-align and fixed width */
.tc-perc[b-sw1iltx63w] {
    text-align: left;
    padding-right: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width:120px;
}

/* IN / OUT badges */
.tc-badge[b-sw1iltx63w] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.tc-badge-in[b-sw1iltx63w] {
    background: #d1fae5;
    color: #065f46;
}

.tc-badge-out[b-sw1iltx63w] {
    background: #fee2e2;
    color: #991b1b;
}

.tc-badge-both[b-sw1iltx63w] {
    background: #e0e7ff;
    color: #3730a3;
}
/* /Components/Pages/Masters/MTaxClassEdit.razor.rz.scp.css */
/* MTaxClassEdit.razor.css — scoped styles for the Tax Class edit modal */

/* Percentage input — narrower than full-width */
.tc-perc-input[b-z131x4le0j] {
    max-width: 160px;
}
/* /Components/Pages/Masters/MUOM.razor.rz.scp.css */
/* =====================================================================
   GAINS — MUOM.razor.css   (Masters → UOM grid, page-scoped)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   ===================================================================== */

.mu-page[b-fyzcpu3dc0] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mu-card[b-fyzcpu3dc0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mu-toolbar[b-fyzcpu3dc0] {
    flex-shrink: 0;
}

.mu-table-wrap[b-fyzcpu3dc0] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-fyzcpu3dc0] {
    flex-shrink: 0;
}

.bspl-footer-right[b-fyzcpu3dc0] {
    font-size: inherit;
    color: inherit;
}

.mu-pager[b-fyzcpu3dc0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Mobile: "New unit" button — icon only, stays top-right ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-fyzcpu3dc0] {
        margin-left: auto;
    }

        .bspl-title-actions .mu-btn-label[b-fyzcpu3dc0] {
            display: none;
        }

        .bspl-title-actions .mu-btn[b-fyzcpu3dc0] {
            padding: 8px 10px;
            gap: 0;
        }

            .bspl-title-actions .mu-btn i[b-fyzcpu3dc0] {
                font-size: 15px;
            }

    .mu-foot-info[b-fyzcpu3dc0] {
        display: none;
    }
}
/* /Components/Pages/Masters/MUQC.razor.rz.scp.css */
/* =====================================================================
   GAINS — MUQC.razor.css   (Masters → UQC grid, page-scoped, read-only)
   Shared "mu-" styles live in wwwroot/CSS/masters-forms.css.
   ===================================================================== */

.mu-page[b-3vzbl8z7zp] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mu-card[b-3vzbl8z7zp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mu-toolbar[b-3vzbl8z7zp] {
    flex-shrink: 0;
}

.mu-table-wrap[b-3vzbl8z7zp] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-3vzbl8z7zp] {
    flex-shrink: 0;
}

.bspl-footer-right[b-3vzbl8z7zp] {
    font-size: inherit;
    color: inherit;
}

.mu-pager[b-3vzbl8z7zp] {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* /Components/Pages/Masters/NavigationSetting.razor.rz.scp.css */
/* =====================================================================
   NavSetting.razor.css
   Scoped to the Navigation Setting page. Reuses the shared chrome
   (bspl-title-block / bspl-footer / mu-table / mu-drawer / itb-toptabs)
   from masters-forms.css + common-page-chrome.css and adds only the
   toggle-badge and tree styling specific to this form.
   Mirrors TDS.razor.css layout so the two pages read identically.
   ===================================================================== */

.itb-page[b-tvug04tfev] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.itb-toptabs[b-tvug04tfev] {
    flex-shrink: 0;
    padding: 8px 16px 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

    .itb-toptabs button[b-tvug04tfev] {
        padding: 7px 16px;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .2px;
        text-transform: uppercase;
        background: #fff;
        color: #555;
        border: 1px solid #d5d5d5;
        border-radius: 6px;
        cursor: pointer;
        font-family: inherit;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: background .12s, color .12s, border-color .12s;
    }

        .itb-toptabs button:hover[b-tvug04tfev] {
            background: #f5f5f5;
        }

        .itb-toptabs button.active[b-tvug04tfev] {
            background: #1ab99a;
            color: #fff;
            border-color: #1ab99a;
            font-weight: 700;
        }

.itb-page .mu-card[b-tvug04tfev] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0 16px;
}

.itb-page .mu-table-wrap[b-tvug04tfev] {
    flex: 1;
    overflow: auto;
    min-height: 200px;
}

.itb-grid-table[b-tvug04tfev] {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

    .itb-grid-table thead th[b-tvug04tfev] {
        text-align: left;
        font-size: 11.5px;
        font-weight: 700;
        line-height: 1.3;
        padding: 8px 10px;
    }

    .itb-grid-table tbody td[b-tvug04tfev] {
        border-left: 1px solid #eef0f2;
        border-right: 1px solid #eef0f2;
        border-bottom: 1px solid #eef0f2;
        border-top: 0;
        padding: 8px 10px;
    }

    .itb-grid-table th.num[b-tvug04tfev],
    .itb-grid-table td.num[b-tvug04tfev] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .itb-grid-table .mu-th-idx[b-tvug04tfev],
    .itb-grid-table .mu-idx[b-tvug04tfev] {
        text-align: right;
    }

    /* Checkbox column */
    .itb-grid-table .mu-th-chk[b-tvug04tfev],
    .itb-grid-table .mu-td-chk[b-tvug04tfev] {
        text-align: center;
    }

    .itb-grid-table tr.row-selected td[b-tvug04tfev] {
        background: #eafaf5;
    }

/* ── Toolbar strip above the grid ── */
.itb-toolbar[b-tvug04tfev] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    font-size: 12.5px;
    color: #555;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}

.nav-dirty[b-tvug04tfev] {
    color: #c0392b;
    font-weight: 600;
}

/* ── Error / success banners ── */
.itb-error[b-tvug04tfev] {
    margin: 12px 16px 0;
    padding: 10px 14px;
    background: #fdf3f3;
    border-left: 4px solid #c0392b;
    color: #c0392b;
    font-size: 13px;
    flex-shrink: 0;
}

.itb-ok[b-tvug04tfev] {
    margin: 12px 16px 0;
    padding: 10px 14px;
    background: #eefaf4;
    border-left: 4px solid #1ab99a;
    color: #0f8a72;
    font-size: 13px;
    flex-shrink: 0;
}

/* ── Visible / Hidden badge ── */
.nav-badge[b-tvug04tfev] {
    display: inline-block;
    min-width: 54px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: uppercase;
}

    .nav-badge.on[b-tvug04tfev] {
        background: #e3f7ef;
        color: #0f8a72;
    }

    .nav-badge.off[b-tvug04tfev] {
        background: #f1f2f4;
        color: #94a3b8;
    }

/* ── Navigation tree rows ── */
.itb-grid-table tr.nav-main-row td[b-tvug04tfev] {
    background: #f7f9fa;
    font-weight: 700;
}

.itb-grid-table td.nav-sub-cell[b-tvug04tfev] {
    padding-left: 28px;
    color: #475569;
    position: relative;
}

    .itb-grid-table td.nav-sub-cell[b-tvug04tfev]::before {
        content: "└";
        position: absolute;
        left: 12px;
        color: #cbd5e1;
    }
/* /Components/Pages/Masters/Schedule.razor.rz.scp.css */
/* =====================================================================
   Schedule.razor.css  (scoped)

   Shared "mu-"/"uf-"/"bspl-" styles live in the global stylesheets
   (masters-forms.css + common-page-chrome.css). Only Schedule-page-specific
   rules remain here — the flex page/card layout every Masters grid uses, the
   per-form modal spacing, and the small ALIE text beside the round badge.
   ===================================================================== */

.mu-page[b-ua45m7kmwi] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mu-card[b-ua45m7kmwi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mu-toolbar[b-ua45m7kmwi] {
    flex-shrink: 0;
}

.mu-table-wrap[b-ua45m7kmwi] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-ua45m7kmwi] {
    flex-shrink: 0;
}

.bspl-footer-right[b-ua45m7kmwi] {
    font-size: inherit;
    color: inherit;
}

.mu-pager[b-ua45m7kmwi] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Per-form modal spacing the shared file leaves to each page. */
.uf-field[b-ua45m7kmwi] {
    margin-bottom: 14px;
}

    .uf-field:last-child[b-ua45m7kmwi] {
        margin-bottom: 0;
    }

/* ALIE cell: round mu-plbs chip + the full word beside it. */
.sch-alie-txt[b-ua45m7kmwi] {
    margin-left: 8px;
    font-size: 12.5px;
    color: #475569;
    vertical-align: middle;
}

/* ── Mobile: header action buttons — icon only, stay top-right ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-ua45m7kmwi] {
        margin-left: auto;
    }

        .bspl-title-actions .mu-btn-label[b-ua45m7kmwi] {
            display: none;
        }

        .bspl-title-actions .mu-btn[b-ua45m7kmwi] {
            padding: 8px 10px;
            gap: 0;
        }

            .bspl-title-actions .mu-btn i[b-ua45m7kmwi] {
                font-size: 15px;
            }

    .mu-foot-info[b-ua45m7kmwi] {
        display: none;
    }

    .sch-alie-txt[b-ua45m7kmwi] {
        display: none;
    }
}
/* /Components/Pages/NoRecords.razor.rz.scp.css */
/* ================================================================
   GAINS Common Empty State — NoRecords.razor.css
================================================================ */

.nr-empty[b-n6hw40hmew] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 44px 16px;
    text-align: center;
}

.nr-art[b-n6hw40hmew] {
    width: 140px;
    height: auto;
    margin-bottom: 10px;
}

.nr-title[b-n6hw40hmew] {
    font-size: 16px;
    font-weight: 600;
    color: #334155;
}

.nr-sub[b-n6hw40hmew] {
    font-size: 13px;
    color: #94a3b8;
}
/* /Components/Pages/Transactions/ARAP.razor.rz.scp.css */
/* =====================================================================
   GAINS — ARAP.razor.css   (Transactions → ARAP, page-scoped)
   Mirrors QLedger.razor.css's teal theme (#1ab99a) + mu- grid additions
   so ARAP matches the same look/fonts/classes as Query Ledger.
   Base look (mu- grid system) comes from the global masters-forms.css.
   ===================================================================== */

.bspl-title-left h1[b-hh3n09puyr] {
    font-weight: 100;
    color: #1ab99a;
}

/* ── Header AR/AP toggle — small pills next to the page title (legacy top-nav
   style). Only 2 buttons (no separate ARAP one) — clicking either jumps into
   the Ledger-Summary section with that mode, matching SelectArApMode. ── */
.arap-header-modes[b-hh3n09puyr] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;   /* .bspl-filter-toggle also has margin-left:auto (global CSS) —
                             whichever flex item claims it first eats the free space.
                             AR/AP sat left of the title-actions bar and FILTERS floated
                             alone at the far right, leaving a gap between them. Claiming
                             the auto margin here pulls AR/AP flush against FILTERS,
                             both hugging the header's right edge, matching reference. */
    margin-right: 10px;
}

.arap-mode-btn[b-hh3n09puyr] {
    padding: 6px 14px;
    border-radius: 5px;
    border: 1px solid #1ab99a;
    background: #fff;
    color: #1ab99a;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
}

    .arap-mode-btn:hover[b-hh3n09puyr] {
        background: #e6f7f4;
    }

    .arap-mode-btn.active[b-hh3n09puyr] {
        background: #1ab99a;
        color: #fff;
    }

/* ── Section buttons (Vouchers / … added one by one) ── */
.arap-sections[b-hh3n09puyr] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0px 0px 10px 10px;
}

.arap-section[b-hh3n09puyr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid #dde3ed;
    background: #fff;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 400;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .arap-section:hover[b-hh3n09puyr] {
        background: #f1f5f9;
        color: #1a2537;
    }

    .arap-section.active[b-hh3n09puyr] {
        background: #1ab99a;
        border-color: #1ab99a;
        color: #fff;
    }

.arap-dollar[b-hh3n09puyr] {
    font-weight: 600;
    font-size: 13px;
}

/* ── Filter drawer field/check/section — same recipe as QLedger's
   ql-field/ql-check/ql-drawer-section, kept page-local since Blazor CSS
   isolation scopes QLedger.razor.css to that component only. Drawer outer
   chrome itself (mu-drawer/-overlay/-hdr/-body/-foot) is global. ── */
.arap-field[b-hh3n09puyr] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    color: #64748b;
    margin-bottom: 14px;
}

.arap-drawer-section[b-hh3n09puyr] {
    margin-top: 6px;
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #1ab99a;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.arap-check[b-hh3n09puyr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1a2537;
    cursor: pointer;
    padding: 4px 0;
}

    .arap-check input[b-hh3n09puyr] {
        accent-color: #1ab99a;
    }

    .arap-check:has(input:disabled)[b-hh3n09puyr] {
        color: #94a3b8;
        cursor: not-allowed;
    }

/* Clear Filter / GO pair repeated at the top of the drawer (legacy had it
   at both top and bottom of the sidebar). */
.arap-drawer-topbtns[b-hh3n09puyr] {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid #eef2f7;
}

    .arap-drawer-topbtns .mu-btn[b-hh3n09puyr] {
        flex: 1 1 50%;
        justify-content: center;
    }

/* ARAP / AR / AP side-by-side checkboxes */
.arap-check-row[b-hh3n09puyr] {
    display: flex;
    gap: 24px;
    margin-bottom: 6px;
}

.arap-check-row-3[b-hh3n09puyr] {
    gap: 16px;
    flex-wrap: wrap;
}


/* Indented date input(s) shown under As On Date / Date Range */
.arap-subfield[b-hh3n09puyr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 10px 26px;
}

/* Ledger quick-search + disabled "L" picker button */
.arap-led-row[b-hh3n09puyr] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

    .arap-led-row .uf-input[b-hh3n09puyr] {
        flex: 1 1 auto;
        min-width: 0;
    }

.arap-led-btn[b-hh3n09puyr] {
    flex: 0 0 40px;
    justify-content: center;
    padding: 7px 0;
}

    .arap-led-btn:disabled[b-hh3n09puyr] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Group dropdown (placeholder — no group data source wired yet) */
.mu-drawer-body > select.uf-input[b-hh3n09puyr] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 14px;
}

/* ── Layout ── */
.mu-page[b-hh3n09puyr] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
}

.arap-body[b-hh3n09puyr] {
    flex: 1;
    min-height: 0;
    display: flex;
}

    .arap-body .mu-card[b-hh3n09puyr] {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
    }

    .arap-body .mu-table-wrap[b-hh3n09puyr] {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow: auto;
    }

/* ── Grid cell extras (on top of mu-table) ── */
.mu-table thead th.num[b-hh3n09puyr] {
    text-align: right;
}

.mu-table td.num[b-hh3n09puyr] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mu-table td.cr[b-hh3n09puyr] {
    color: #800000;
}

.mu-table thead th[b-hh3n09puyr] {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    color: #1a2537;   /* global masters-forms.css sets thead th color:#fff (for its
                         own dark #4b5563 header bg) — this override only changed
                         background to white, leaving text white-on-white = invisible
                         header row (##/Ledger/Amount/Unadjusted, ##/Ageing/Amount/%). */
}

.arap-nowrap[b-hh3n09puyr] {
    white-space: nowrap;
}

.arap-ledger[b-hh3n09puyr] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arap-ledcode[b-hh3n09puyr] {
    display: block;
    font-size: 11px;
    color: #94a3b8;
}

.arap-vnum-cell[b-hh3n09puyr] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.arap-vsquare[b-hh3n09puyr] {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #1ab99a;
    border-radius: 2px;
    flex: 0 0 10px;
}

.arap-vnum[b-hh3n09puyr] {
    color: #1a56a7;
    font-weight: 500;
}

.arap-vtype[b-hh3n09puyr] {
    font-weight: 500;
    font-size: 13px;
    color: #1a2537;
}

/* ── Dashboard (landing) — AR/AP stat cards ── */
.arap-dash[b-hh3n09puyr] {
    padding: 20px;
    overflow: auto;
}

/* 2x2 diagonal layout, matching the legacy ARAP_New.aspx dashboard:
   [ AR stats card ] [ big AR illustration ]
   [ big AP illustration ] [ AP stats card ] */
.arap-dash-grid[b-hh3n09puyr] {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    grid-auto-rows: minmax(230px, auto);
    gap: 20px;
}

.arap-dash-card[b-hh3n09puyr] {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    background: #fff;
    display: flex;
    flex-direction: column;
}

.arap-dash-hdr[b-hh3n09puyr] {
    padding: 12px 16px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.03em;
    color: #1a2537;
    text-align: center;
    background-image: linear-gradient(to left, rgba(126,179,148,0.25), rgba(130,202,215,0.15));
}

.arap-dash-body[b-hh3n09puyr] {
    padding: 40px 24px 14px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Big illustration panels (top-right / bottom-left) */
.arap-dash-imgpanel[b-hh3n09puyr] {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    background: #fff;
}

    .arap-dash-imgpanel img[b-hh3n09puyr] {
        width: 100%;
        height: 100%;
        min-height: 230px;
        object-fit: cover;
        display: block;
    }

@media (max-width: 900px) {
    .arap-dash-grid[b-hh3n09puyr] {
        grid-template-columns: 1fr;
    }

    .arap-dash-imgpanel[b-hh3n09puyr] {
        display: none;
    }
}

/* ── Dashboard footer bar (legacy "AR/AP … SWITCH VIEW") — sized with
   clamp() (vw/vh bound between sane min/max) instead of fixed px so it
   scales with viewport/resolution rather than just breakpoint-snapping. ── */
.arap-dash-footer[b-hh3n09puyr] {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vw, 20px);
    width: 100%;
    padding: clamp(8px, 1.6vh, 16px) clamp(12px, 2vw, 24px);
    box-sizing: border-box;
    font-size: clamp(12px, 1.1vw, 14px);
    color: #1a2537;
    background-image: linear-gradient(to left, rgba(126,179,148,0.5), rgba(126,179,148,0.3), rgba(126,179,148,0.1), rgba(130,202,215,0.5));
}

.arap-switch-btn[b-hh3n09puyr] {
    padding: clamp(4px, 0.8vh, 8px) clamp(10px, 1.6vw, 16px);
    font-size: clamp(11px, 1vw, 13px);
}

.arap-dash-row[b-hh3n09puyr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 10px 0;
    border-bottom: none;
    font-size: 14px;
    font-weight: 600;
    color: #1a56a7;
}

    .arap-dash-row strong[b-hh3n09puyr] {
        color: #1a56a7;
    }

    .arap-dash-row strong.cr[b-hh3n09puyr] {
        color: #800000;
    }

.arap-dash-icon[b-hh3n09puyr] {
    color: #1ab99a;
    margin-right: 6px;
}

/* Empty / error states */
.arap-empty-state[b-hh3n09puyr] {
    text-align: center;
    color: #64748b;
    padding: 48px 16px;
    font-size: 13.5px;
}

.arap-error[b-hh3n09puyr] {
    color: #dc2626;
}

/* ── Fixed page footer (pager) ── */
.arap-footer-fixed[b-hh3n09puyr] {
    position: sticky;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid #dde3ed;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .arap-section[b-hh3n09puyr] {
        min-height: 44px;
        padding: 10px 14px;
    }
}

/* ── Ledger picker popup — same recipe as QLedger's ql-lp-*/ql-modal-* ── */
.arap-lp-overlay[b-hh3n09puyr] {
    z-index: 1300;
}

.arap-lp-modal[b-hh3n09puyr] {
    max-width: 640px;
    max-height: 80vh;
}

.arap-modal-search[b-hh3n09puyr] {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcfe;
}

    .arap-modal-search .uf-input[b-hh3n09puyr] {
        flex: 1 1 auto;
        min-width: 0;
    }

.arap-modal-body[b-hh3n09puyr] {
    flex: 1;
    overflow-y: auto;
}

.arap-lp-row[b-hh3n09puyr] {
    cursor: pointer;
}

    .arap-lp-row:hover[b-hh3n09puyr] {
        background: #f1f5f9;
    }

.arap-lp-idx[b-hh3n09puyr] {
    width: 56px;
}

.mu-table tbody td.arap-lp-idx[b-hh3n09puyr] {
    color: #1a56a7;
    font-weight: 600;
}

.arap-lp-name[b-hh3n09puyr] {
    color: #1a56a7;
    font-weight: 500;
}

/* ── Ledger-summary ("ARAP") — CLIENTWISE/INVOICES/PIVOT sub-tabs + 2-panel
   layout (AR/AP Summary left, ageing Summary Total right), matching the
   legacy dark-bar sub-nav look. ── */
.arap-ls-tabs[b-hh3n09puyr] {
    display: flex;
    gap: 2px;
    padding: 10px 14px;
    background: #233645;
}

/* INVOICES sub-tab row (DETAILS/ABRIDGED/SEARCH) — only rendered while
   INVOICES or one of its children is selected, so it's visually a second,
   slightly indented level under the main CLIENTWISE/INVOICES/PIVOT bar. */
.arap-ls-subtabs[b-hh3n09puyr] {
    padding-top: 0;
    padding-left: 34px;
    background: #1a2a37;
}

.arap-ls-tab[b-hh3n09puyr] {
    padding: 8px 18px;
    border: none;
    border-radius: 4px 4px 0 0;
    background: transparent;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    font-family: inherit;
}

    .arap-ls-tab:hover[b-hh3n09puyr] {
        color: #fff;
    }

    .arap-ls-tab.active[b-hh3n09puyr] {
        background: #fff;
        color: #1a56a7;
    }

.arap-ls-grid[b-hh3n09puyr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
    align-items: start;
}

.arap-ls-panel[b-hh3n09puyr] {
    border: 1px solid #eef2f7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.arap-ls-panel-hdr[b-hh3n09puyr] {
    padding: 12px 16px;
    font-weight: 700;
    font-size: 13px;
    color: #1a2537;
    background-image: linear-gradient(to left, rgba(126,179,148,0.25), rgba(130,202,215,0.15));
}

.arap-ls-panel-body[b-hh3n09puyr] {
    max-height: 480px;
    overflow: auto;
}

@media (max-width: 900px) {
    .arap-ls-grid[b-hh3n09puyr] {
        grid-template-columns: 1fr;
    }
}

/* ── PIVOT sub-tab — one full-width panel (not the 2-col ClientWise grid),
   13 columns wide so it scrolls horizontally rather than wrapping. ── */
.arap-pivot-panel[b-hh3n09puyr] {
    margin: 20px;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.arap-pivot-scroll[b-hh3n09puyr] {
    overflow: auto;
}

.arap-pivot-table th[b-hh3n09puyr],
.arap-pivot-table td[b-hh3n09puyr] {
    white-space: nowrap;
}

.arap-pivot-table .arap-ledger[b-hh3n09puyr] {
    max-width: none;
}

/* ── Ledger-summary footer — "Go to Page" dropdown next to Switch View ── */
.arap-goto-label[b-hh3n09puyr] {
    font-weight: 600;
}

.arap-goto-select[b-hh3n09puyr] {
    width: auto;
    min-width: 56px;
    padding: 4px 8px;
}

/* ── Party-wise section — subtotal bar + DueDays aging badge ── */
.arap-party-total[b-hh3n09puyr] {
    background: #233645;
    color: #fff;
    font-weight: 700;
}

    .arap-party-total td[b-hh3n09puyr] {
        padding: 8px 12px;
    }

.arap-pw-icon[b-hh3n09puyr] {
    margin-left: 10px;
    cursor: not-allowed;
    opacity: 0.7;
}

.arap-dd-badge[b-hh3n09puyr] {
    display: inline-block;
    min-width: 42px;
    padding: 3px 8px;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    text-align: center;
}

.arap-dd-light[b-hh3n09puyr] {
    background: #c1743f;
}

.arap-dd-dark[b-hh3n09puyr] {
    background: #6b1010;
}

.arap-raw-body[b-hh3n09puyr] {
    margin-top: 10px;
    padding: 10px;
    max-width: 100%;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 6px;
    font-size: 11px;
    text-align: left;
}
/* /Components/Pages/Transactions/BSPL.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   BSPL.razor.css  — exact match to screenshot design
   ═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────────── */
.bspl-page[b-a9m088rzdg] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f3f3f4;
    font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    color: #333;
}

/* ══════════════════════════════════════════════════════
   TITLE BLOCK, GAINS-TOGGLE, and FILTER BUTTON now live in the
   shared common-page-chrome.css (see .bspl-title-block, .bspl-title-left,
   .bspl-gains-toggle, .bspl-title-actions, .bspl-filter-toggle)
   ══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   BUTTON BAR  (ABRIDGED / NORMAL / EXPAND + FY 1Y …)
   ══════════════════════════════════════════════════════ */
.bspl-btnbar[b-a9m088rzdg] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px 6px;
    background: #fff;
    border-bottom: 1px solid #e7eaec;
    flex-wrap: wrap;
}

/* ABRIDGED / NORMAL / EXPAND */
.bspl-dep-btn[b-a9m088rzdg] {
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: #555;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: all .12s;
    text-transform: uppercase;
}

    .bspl-dep-btn:hover[b-a9m088rzdg] {
        background: #f5f5f5;
    }

    .bspl-dep-btn.active[b-a9m088rzdg] {
        background: #1ab394;
        color: #fff;
        border-color: #1ab394;
    }

/* Spacer between ABR/NOR/EXP and FY/1Y… */
.bspl-btn-gap[b-a9m088rzdg] {
    width: 10px;
}

/* FY / 1Y / 2Y / 3Y / 4Y / Q5 — small outlined buttons */
.bspl-yr-btn[b-a9m088rzdg] {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: #555;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    cursor: pointer;
    transition: all .12s;
    min-width: 34px;
    text-align: center;
}

    .bspl-yr-btn:hover[b-a9m088rzdg] {
        background: #f5f5f5;
    }

    .bspl-yr-btn.active[b-a9m088rzdg] {
        background: #1ab394;
        color: #fff;
        border-color: #1ab394;
    }

/* Q / M buttons (same style as yr buttons) */
.bspl-qm-btn[b-a9m088rzdg] {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: #555;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    cursor: pointer;
    transition: all .12s;
    min-width: 30px;
    text-align: center;
}

    .bspl-qm-btn:hover[b-a9m088rzdg] {
        background: #f5f5f5;
    }

    .bspl-qm-btn.active[b-a9m088rzdg] {
        background: #1ab394;
        color: #fff;
        border-color: #1ab394;
    }

/* Filter toggle button — now in common-page-chrome.css (.bspl-filter-toggle) */

/* ══════════════════════════════════════════════════════
   MAIN CONTENT
   ══════════════════════════════════════════════════════ */
.bspl-content[b-a9m088rzdg] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0px 8px;
}



/* ── Panel header (coloured bar) ──────────────────────── */
.bspl-panel-hdr[b-a9m088rzdg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    letter-spacing: 0.3px;
}

    .bspl-panel-hdr.exp[b-a9m088rzdg] {
        background: #660000;
    }

    .bspl-panel-hdr.inc[b-a9m088rzdg] {
        background: #003366;
    }

.bspl-panel-hdr-right[b-a9m088rzdg] {
    font-size: 12px;
    font-weight: 400;
    opacity: .9;
}

/* ── Row base ─────────────────────────────────────────── */
.bspl-row[b-a9m088rzdg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid #e7eaec;
    min-height: 30px;
    transition: background .07s;
}

    .bspl-row:hover[b-a9m088rzdg] {
        background: #f9f9f9;
    }

    .bspl-row:last-child[b-a9m088rzdg] {
        border-bottom: none;
    }

/* Name / value cells */
.bspl-row-name[b-a9m088rzdg] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
    font-size: 13px;
}

.bspl-row-val[b-a9m088rzdg] {
    white-space: nowrap;
    text-align: right;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    min-width: 110px;
}

.bspl-row-prev[b-a9m088rzdg] {
    white-space: nowrap;
    text-align: right;
    font-size: 12px;
    color: #aaa;
    min-width: 95px;
    padding-left: 6px;
    font-variant-numeric: tabular-nums;
}

/* ── Row TYPE classes — exact match to screenshots ────── */

/* Root header row (CAPITAL, LOANS, TOTAL) */
.bspl-row.row-root-exp[b-a9m088rzdg] {
    background: #660000 !important;
    color: #fff;
    font-weight: 700;
    border-bottom: none !important;
    padding: 6px 10px;
}

    .bspl-row.row-root-exp:hover[b-a9m088rzdg] {
        background: #660000 !important;
    }

    .bspl-row.row-root-exp .bspl-row-name[b-a9m088rzdg],
    .bspl-row.row-root-exp .bspl-row-val[b-a9m088rzdg] {
        color: #fff;
    }

.bspl-row.row-root-inc[b-a9m088rzdg] {
    background: #003366 !important;
    color: #fff;
    font-weight: 700;
    border-bottom: none !important;
    padding: 6px 10px;
}

    .bspl-row.row-root-inc:hover[b-a9m088rzdg] {
        background: #003366 !important;
    }

    .bspl-row.row-root-inc .bspl-row-name[b-a9m088rzdg],
    .bspl-row.row-root-inc .bspl-row-val[b-a9m088rzdg] {
        color: #fff;
    }

/* Group row — bold black, light grey bg */
.bspl-row.row-group[b-a9m088rzdg] {
    background: #f2f3f5;
    font-weight: 700;
    color: #222;
}

    .bspl-row.row-group .bspl-row-name[b-a9m088rzdg] {
        color: #222;
    }

    .bspl-row.row-group .bspl-row-val[b-a9m088rzdg] {
        color: #222;
    }

/* Sub-group row (depth 2) — bold, white bg */
.bspl-row.row-subgroup[b-a9m088rzdg] {
    background: #fff;
    font-weight: 700;
    color: #222;
}

    .bspl-row.row-subgroup .bspl-row-name[b-a9m088rzdg] {
        color: #222;
    }

    .bspl-row.row-subgroup .bspl-row-val[b-a9m088rzdg] {
        color: #222;
    }



/* Profit / Loss row (BS) and Nett Profit / Loss row (PL)
   background: rgb(226,239,218)  text: rgb(21,103,48) */
.bspl-row.row-profit[b-a9m088rzdg] {
    background-color: rgb(226, 239, 218) !important;
}

    .bspl-row.row-profit:hover[b-a9m088rzdg] {
        background-color: rgb(213, 230, 203) !important;
    }

    .bspl-row.row-profit .bspl-row-name[b-a9m088rzdg],
    .bspl-row.row-profit .bspl-row-val[b-a9m088rzdg],
    .bspl-row.row-profit .bspl-row-prev[b-a9m088rzdg] {
        color: rgb(21, 103, 48) !important;
        font-weight: 600;
    }

/* Difference in Opening Balance (orange) */
.bspl-row.row-diff[b-a9m088rzdg] {
    background-color: #fff9f3;
}

    .bspl-row.row-diff .bspl-row-name[b-a9m088rzdg],
    .bspl-row.row-diff .bspl-row-val[b-a9m088rzdg] {
        color: #e07b39 !important;
    }

/* Negative amounts */
.neg[b-a9m088rzdg] {
    color: #c0392b !important;
}

/* ── Panel footer (Total row) ─────────────────────────── */
.bspl-panel-footer[b-a9m088rzdg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    border-top: none;
}

    .bspl-panel-footer.exp[b-a9m088rzdg] {
        background: #660000;
    }

    .bspl-panel-footer.inc[b-a9m088rzdg] {
        background: #003366;
    }

/* ══════════════════════════════════════════════════════
   MULTI-COLUMN GRID  (Q / M / Q5 / 2-4Y)
   ══════════════════════════════════════════════════════ */






.bspl-mc-hdr.exp[b-a9m088rzdg] {
    background: #660000;
}

.bspl-mc-hdr.inc[b-a9m088rzdg] {
    background: #003366;
}







.bspl-mc-row:hover[b-a9m088rzdg] {
    background: #f9f9f9;
}

.bspl-mc-row.mc-root-exp[b-a9m088rzdg] {
    background: #660000 !important;
    color: #fff;
    font-weight: 700;
}

    .bspl-mc-row.mc-root-exp:hover[b-a9m088rzdg] {
        background: #660000 !important;
    }

.bspl-mc-row.mc-root-inc[b-a9m088rzdg] {
    background: #003366 !important;
    color: #fff;
    font-weight: 700;
}

    .bspl-mc-row.mc-root-inc:hover[b-a9m088rzdg] {
        background: #003366 !important;
    }

    .bspl-mc-row.mc-root-exp .bspl-mc-val-cell[b-a9m088rzdg],
    .bspl-mc-row.mc-root-inc

    .bspl-mc-row.mc-group[b-a9m088rzdg] {
        background: #f2f3f5;
        font-weight: 700;
    }

.bspl-mc-row.mc-subgroup[b-a9m088rzdg] {
    background: #fff;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════
   SKELETON LOADING
   ══════════════════════════════════════════════════════ */
.bspl-skeleton-panels[b-a9m088rzdg] {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
}

.bspl-sk-panel[b-a9m088rzdg] {
    flex: 1;
    background: #fff;
    border: 1px solid #e7eaec;
    padding: 0;
    overflow: hidden;
}

.bspl-sk-hdr[b-a9m088rzdg] {
    height: 36px;
    background: #bbb;
    margin-bottom: 0;
}

.bspl-sk-row[b-a9m088rzdg] {
    height: 29px;
    margin: 0;
    border-bottom: 1px solid #e7eaec;
    background: linear-gradient(90deg,#efefef 25%,#e5e5e5 50%,#efefef 75%);
    background-size: 400% 100%;
    animation: bspl-shimmer-b-a9m088rzdg 1.4s infinite;
}

@keyframes bspl-shimmer-b-a9m088rzdg {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: -100% 0
    }
}

/* ══════════════════════════════════════════════════════
   LOADING SPINNER — page-level loading now uses the shared <Loader>
   component; this ring is kept for the small COA modal spinner only.
   ══════════════════════════════════════════════════════ */
.bspl-spinner-ring[b-a9m088rzdg] {
    width: 48px;
    height: 48px;
    border: 5px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bspl-spin-b-a9m088rzdg .7s linear infinite;
}

@keyframes bspl-spin-b-a9m088rzdg {
    to {
        transform: rotate(360deg);
    }
}

/* ══════════════════════════════════════════════════════
   ERROR / EMPTY
   ══════════════════════════════════════════════════════ */
.bspl-error[b-a9m088rzdg] {
    margin: 10px 16px;
    padding: 10px 14px;
    background: #fdf3f3;
    border-left: 4px solid #c0392b;
    color: #c0392b;
    font-size: 13px;
}

.bspl-empty[b-a9m088rzdg] {
    text-align: center;
    padding: 50px 20px;
    color: #aaa;
    font-size: 13px;
}

/* ══════════════════════════════════════════════════════
   RIGHT FILTER SIDEBAR — now uses shared masters-forms.css classes
   (.mu-drawer, .mu-drawer-overlay, .mu-drawer-hdr, .mu-fld, .mu-drawer-foot),
   same as MLedger. Only the checkbox-row label style is page-local.
   ══════════════════════════════════════════════════════ */
.le-chk[b-a9m088rzdg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1a2537;
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════
   FIXED BOTTOM FOOTER — now in common-page-chrome.css
   (.bspl-footer, .bspl-foot-btn, .bspl-footer-left, .bspl-footer-right)
   ══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .bspl-panels[b-a9m088rzdg],
    .bspl-mc-panels[b-a9m088rzdg],
    .bspl-skeleton-panels[b-a9m088rzdg] {
        flex-direction: column;
    }





    .bspl-dep-btn[b-a9m088rzdg] {
        padding: 4px 10px;
        font-size: 11px;
    }

    .bspl-yr-btn[b-a9m088rzdg],
    .bspl-qm-btn[b-a9m088rzdg] {
        padding: 4px 7px;
        font-size: 11px;
        min-width: 28px;
    }
}

/* Multi-col ledger name colours */
.mc-led-exp[b-a9m088rzdg] {
    color: #660000;
}

.mc-led-inc[b-a9m088rzdg] {
    color: #003366;
}

/* ══════════════════════════════════════════════════════
   TOTAL BAR — full width, both sides side by side
   ══════════════════════════════════════════════════════ */
.bspl-total-bar[b-a9m088rzdg] {
    display: flex;
    gap: 16px; /* matches .bspl-panels gap */
    padding: 0 0 4px 0;
}

.bspl-total-cell[b-a9m088rzdg] {
    flex: 1 1 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    letter-spacing: 0.3px;
}

    .bspl-total-cell.exp[b-a9m088rzdg] {
        background: #660000;
    }

    .bspl-total-cell.inc[b-a9m088rzdg] {
        background: #003366;
    }

/* ══════════════════════════════════════════════════════
   EMPTY FILLER ROW — equalises left/right row count
   ══════════════════════════════════════════════════════ */
.bspl-row-empty[b-a9m088rzdg] {
    min-height: 30px;
    border-bottom: 1px solid #e7eaec;
    background: #fff;
}

/* Remove the old per-panel footer (replaced by total-bar) */
.bspl-panel-footer[b-a9m088rzdg] {
    display: none !important;
}

/* MC panels still use their own footer */




/* TITLE ROW — now in common-page-chrome.css (.bspl-title-row) */

/* ══════════════════════════════════════════════════════
   BUTTON BAR — two groups, wrap on mobile
   ══════════════════════════════════════════════════════ */
.bspl-btnbar[b-a9m088rzdg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 6px;
    background: #fff;
    border-bottom: 1px solid #e7eaec;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.bspl-btnbar-group[b-a9m088rzdg] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* FOOTER LEFT / RIGHT layout — now in common-page-chrome.css */

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVE  (≤ 767px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Title, subtitle, and Filters button mobile rules now in common-page-chrome.css */

    /* Button bar */
    .bspl-btnbar[b-a9m088rzdg] {
        padding: 6px 10px;
        gap: 6px;
    }

    .bspl-dep-btn[b-a9m088rzdg] {
        padding: 4px 8px;
        font-size: 11px;
    }

    .bspl-yr-btn[b-a9m088rzdg],
    .bspl-qm-btn[b-a9m088rzdg] {
        padding: 3px 7px;
        font-size: 11px;
        min-width: 26px;
    }

    /* Panels — stack vertically */
    .bspl-panels[b-a9m088rzdg],
    .bspl-mc-panels[b-a9m088rzdg],
    .bspl-skeleton-panels[b-a9m088rzdg] {
        flex-direction: column;
    }

    /* Total bar — stack vertically too */
    .bspl-total-bar[b-a9m088rzdg] {
        flex-direction: column;
        gap: 0;
    }

    .bspl-total-cell[b-a9m088rzdg] {
        width: 100%;
    }

    /* Row text */
    .bspl-row-name[b-a9m088rzdg] {
        font-size: 12px;
    }

    .bspl-row-val[b-a9m088rzdg] {
        font-size: 12px;
        min-width: 80px;
    }

    /* Multi-col */



    /* Content padding */
    .bspl-content[b-a9m088rzdg] {
        padding: 8px 0px 8px;
    }

    /* Footer mobile rules now in common-page-chrome.css */
}

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVE  (≤ 480px — very small phones)
   ══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .bspl-dep-btn[b-a9m088rzdg] {
        padding: 3px 6px;
        font-size: 10px;
    }

    .bspl-yr-btn[b-a9m088rzdg],
    .bspl-qm-btn[b-a9m088rzdg] {
        padding: 3px 5px;
        font-size: 10px;
        min-width: 22px;
    }

    .bspl-panel-hdr[b-a9m088rzdg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .bspl-panel-hdr-right[b-a9m088rzdg] {
        font-size: 10px;
    }
}


/* TITLE ACTIONS wrapper — now in common-page-chrome.css (.bspl-title-actions) */

.bspl-export-btn[b-a9m088rzdg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: opacity .12s;
    color: #fff;
}

    .bspl-export-btn:hover[b-a9m088rzdg] {
        opacity: .85;
    }

    .bspl-export-btn.pdf[b-a9m088rzdg] {
        background: #c0392b;
    }

    .bspl-export-btn.xls[b-a9m088rzdg] {
        background: #1e7e34;
    }

/* ══════════════════════════════════════════════════════
   PANEL HEADER DATE COLUMNS  (current + prev year)
   ══════════════════════════════════════════════════════ */
.bspl-hdr-dates[b-a9m088rzdg] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

    .bspl-hdr-dates span[b-a9m088rzdg] {
        font-size: 12px;
        font-weight: 400;
        opacity: .9;
        min-width: 110px;
        text-align: right;
        white-space: nowrap;
    }

/* Panel header must flex correctly with date group */
.bspl-panel-hdr[b-a9m088rzdg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    letter-spacing: 0.3px;
    gap: 8px;
}

/* Panel footer — same layout as header */
.bspl-panel-footer[b-a9m088rzdg] {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    gap: 8px;
}

    .bspl-panel-footer.exp[b-a9m088rzdg] {
        background: #660000;
    }

    .bspl-panel-footer.inc[b-a9m088rzdg] {
        background: #003366;
    }

/* Remove old total-bar (totals are now inside each panel footer) */
.bspl-total-bar[b-a9m088rzdg] {
    display: none !important;
}

.bspl-total-cell[b-a9m088rzdg] {
    display: none !important;
}

/* ══════════════════════════════════════════════════════
   LEDGER ROW — colour set via style= on bspl-row-name
   Remove class-based colour overrides that conflict
   ══════════════════════════════════════════════════════ */



/* ══════════════════════════════════════════════════════
   MOBILE — totals stay inside each panel (no stacking issue)
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .bspl-export-btn span[b-a9m088rzdg] {
        display: none;
    }
    /* icon only on mobile */
    .bspl-export-btn[b-a9m088rzdg] {
        padding: 5px 8px;
    }

    .bspl-hdr-dates[b-a9m088rzdg] {
        flex-direction: column;
        gap: 2px;
        align-items: flex-end;
    }

        .bspl-hdr-dates span[b-a9m088rzdg] {
            font-size: 10px;
            min-width: auto;
        }
    /* Panel footer stacks label + amounts on very small screens */
    .bspl-panel-footer[b-a9m088rzdg] {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

        .bspl-panel-footer .bspl-hdr-dates[b-a9m088rzdg] {
            flex-direction: row;
            justify-content: flex-end;
        }
}

@media (max-width: 480px) {
    .bspl-export-btn[b-a9m088rzdg] {
        padding: 4px 7px;
        font-size: 11px;
    }
}

/* ══════════════════════════════════════════════════════
   ROW COLOUR RULES
   Ledger rows (isGroup=="L"): color set via inline style on the row div
     isplbs 2/4 → #660000   isplbs 1/3 → #000080
   Group rows: LedgerColor returns "inherit" → CSS classes control colour
   ══════════════════════════════════════════════════════ */

/* group row: bold dark */
.bspl-row.row-group[b-a9m088rzdg] {
    font-weight: 700;
    color: #222;
    background: #f2f3f5;
}

.bspl-row.row-subgroup[b-a9m088rzdg] {
    font-weight: 700;
    color: #222;
    background: #fff;
}

/* Ensure child spans don't override the row's inline color for ledger rows */
.bspl-row .bspl-row-name[b-a9m088rzdg],
.bspl-row .bspl-row-val[b-a9m088rzdg],
.bspl-row .bspl-row-prev[b-a9m088rzdg] {
    color: inherit;
}

/* Group/special rows reset to their CSS class color (override inherit) */
.bspl-row.row-group .bspl-row-name[b-a9m088rzdg],
.bspl-row.row-group .bspl-row-val[b-a9m088rzdg],
.bspl-row.row-subgroup .bspl-row-name[b-a9m088rzdg],
.bspl-row.row-subgroup .bspl-row-val[b-a9m088rzdg] {
    color: #222 !important;
}

/* profit row keeps its green */
.bspl-row.row-profit[b-a9m088rzdg],
.bspl-row.row-profit .bspl-row-name[b-a9m088rzdg],
.bspl-row.row-profit .bspl-row-val[b-a9m088rzdg],
.bspl-row.row-profit .bspl-row-prev[b-a9m088rzdg] {
    color: rgb(21, 103, 48) !important;
}

/* diff row keeps its orange */
.bspl-row.row-diff[b-a9m088rzdg],
.bspl-row.row-diff .bspl-row-name[b-a9m088rzdg],
.bspl-row.row-diff .bspl-row-val[b-a9m088rzdg] {
    color: #e07b39 !important;
}

/* MC rows — same inherit pattern */
.bspl-mc-row .bspl-mc-name-cell[b-a9m088rzdg],
.bspl-mc-row
.bspl-mc-row.mc-group .bspl-mc-name-cell[b-a9m088rzdg],
.bspl-mc-row.mc-group
/* ══════════════════════════════════════════════════════
   MC PANEL FOOTER — same flex as header row so
   per-column total values align under their columns
   ══════════════════════════════════════════════════════ */
/* Name cell and val cells inside footer reuse mc cell sizing */
.bspl-mc-panel .bspl-panel-footer .bspl-mc-name-cell[b-a9m088rzdg],
.bspl-mc-panel .bspl-panel-footer
/* ══════════════════════════════════════════════════════
   MULTI-COLUMN GRID  (Prev 1/2/3/4, Q, M, Q5)
   Each side (Left / Right) is a .bspl-mc-scroll wrapper
   that scrolls horizontally independently.
   Every row is a single flex line:
     [name-cell] [val-cell] [val-cell] …
   Name cell has fixed width; value cells fixed width,
   right-aligned, tabular numbers.
   ══════════════════════════════════════════════════════ */
/* outer container — two panels side by side */
/* each half-panel: scrollable horizontally */
.bspl-mc-scroll[b-a9m088rzdg] {
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid #e7eaec;
}

/* ── Column widths ────────────────────────────────────
   Name cell: 200px fixed, left-align
   Value cell: 130px fixed, right-align
   ── */




/* ── Header row (sticky) ── */
.bspl-mc-hdr-row[b-a9m088rzdg] {
    display: flex;
    align-items: center;
    min-height: 36px;
    position: sticky;
    top: 0;
    z-index: 5;
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
}

    .bspl-mc-hdr-row.exp[b-a9m088rzdg] {
        background: #660000;
    }

    .bspl-mc-hdr-row.inc[b-a9m088rzdg] {
        background: #003366;
    }

.bspl-mc-hdr-cell[b-a9m088rzdg] {
    color: #fff !important;
    font-weight: 700;
}

/* ── Data rows ── */
.bspl-mc-dr[b-a9m088rzdg] {
    display: flex;
    align-items: center;
    min-height: 28px;
    border-bottom: 1px solid #e7eaec;
    transition: background .07s;
}

    .bspl-mc-dr:hover[b-a9m088rzdg] {
        background: #f9f9f9;
    }

    /* group row */
    .bspl-mc-dr.mc-group[b-a9m088rzdg] {
        background: #f2f3f5;
        font-weight: 700;
        color: #222 !important;
    }

        .bspl-mc-dr.mc-group .bspl-mc-nc[b-a9m088rzdg],
        .bspl-mc-dr.mc-group .bspl-mc-vc[b-a9m088rzdg] {
            color: #222 !important;
        }

    /* ledger rows: color set via inline style on the row div */
    .bspl-mc-dr .bspl-mc-nc[b-a9m088rzdg],
    .bspl-mc-dr .bspl-mc-vc[b-a9m088rzdg] {
        color: inherit;
    }

/* ── Mobile ── */
@media (max-width: 767px) {
    .bspl-mc-wrap[b-a9m088rzdg] {
        flex-direction: column;
        padding: 8px;
        gap: 10px;
    }
}

@media (max-width: 480px) {
}

/* ══════════════════════════════════════════════════════
   STANDARD MODE WRAPPER  (Y / PY)
   Both panels side-by-side on wide screens,
   stacked vertically on narrow screens.
   Each panel reuses .bspl-mc-scroll + column classes
   so FY and PY columns align perfectly.
   ══════════════════════════════════════════════════════ */

/* Outer flex container — horizontal on wide, vertical on narrow */

/* Each half */
.bspl-std-panel[b-a9m088rzdg] {
    flex: 1 1 0;
    min-width: 0; /* allow shrinking */
}

    /* The scroll wrapper inside each panel */
    .bspl-std-panel .bspl-mc-scroll[b-a9m088rzdg] {
        width: 100%;
        border: 1px solid #e7eaec;
        background: #fff;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

/* ── Responsive breakpoint ──────────────────────────
   Below 900px: stack panels vertically.
   Each panel then takes full width and scrolls
   horizontally on its own if needed.
   ── */
@media (max-width: 900px) {
    .bspl-std-wrap[b-a9m088rzdg] {
        flex-direction: column;
        gap: 12px;
        padding: 8px 0;
    }

    .bspl-std-panel[b-a9m088rzdg] {
        flex: none;
        width: 100%;
    }
}

/* ── Row type overrides for mc-dr inside standard mode ── */
/* Special rows — profit/diff — need !important to beat inline color */
.bspl-mc-dr.row-profit[b-a9m088rzdg],
.bspl-mc-dr.row-profit .bspl-mc-nc[b-a9m088rzdg],
.bspl-mc-dr.row-profit .bspl-mc-vc[b-a9m088rzdg] {
    background-color: rgb(226, 239, 218) !important;
    color: rgb(21, 103, 48) !important;
    font-weight: 600;
}

    .bspl-mc-dr.row-profit:hover[b-a9m088rzdg] {
        background-color: rgb(213, 230, 203) !important;
    }

.bspl-mc-dr.row-diff[b-a9m088rzdg],
.bspl-mc-dr.row-diff .bspl-mc-nc[b-a9m088rzdg],
.bspl-mc-dr.row-diff .bspl-mc-vc[b-a9m088rzdg] {
    color: #e07b39 !important;
    background: #fff9f3;
}

/* Group rows */
.bspl-mc-dr.row-group[b-a9m088rzdg] {
    background: #f2f3f5;
    font-weight: 700;
    color: #222 !important;
}

    .bspl-mc-dr.row-group .bspl-mc-nc[b-a9m088rzdg],
    .bspl-mc-dr.row-group .bspl-mc-vc[b-a9m088rzdg] {
        color: #222 !important;
    }

.bspl-mc-dr.row-subgroup[b-a9m088rzdg] {
    background: #fff;
    font-weight: 700;
    color: #222 !important;
}

    .bspl-mc-dr.row-subgroup .bspl-mc-nc[b-a9m088rzdg],
    .bspl-mc-dr.row-subgroup .bspl-mc-vc[b-a9m088rzdg] {
        color: #222 !important;
    }

/* Also apply to MC wrap for consistency */
@media (max-width: 900px) {
    .bspl-mc-wrap[b-a9m088rzdg] {
        flex-direction: column;
        gap: 12px;
        padding: 8px;
    }

    .bspl-mc-scroll[b-a9m088rzdg] {
        flex: none;
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════
   ILLUSTRATION BAR
   Equivalent to BalanceSheet001.png / ProfitandLoss.png
   from the old Bootstrap webform.
   Shows on screens ≥900px, hidden below.
   ══════════════════════════════════════════════════════ */
.bspl-illus-bar[b-a9m088rzdg] {
    background: #fff;
    border-bottom: 1px solid #e7eaec;
    padding: 10px 16px;
}

.bspl-illus-inner[b-a9m088rzdg] {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 900px;
}

/* Left and right blocks */
.bspl-illus-block[b-a9m088rzdg] {
    flex: 1 1 0;
    min-width: 0;
}

.bspl-illus-label[b-a9m088rzdg] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.bspl-illus-block.exp .bspl-illus-label[b-a9m088rzdg] {
    color: #660000;
}

.bspl-illus-block.inc .bspl-illus-label[b-a9m088rzdg] {
    color: #003366;
}

/* Progress track */
.bspl-illus-bar-track[b-a9m088rzdg] {
    width: 100%;
    height: 10px;
    background: #f0f2f7;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 4px;
}

.bspl-illus-bar-fill[b-a9m088rzdg] {
    height: 100%;
    border-radius: 5px;
    transition: width .5s ease;
    min-width: 4px;
}

    .bspl-illus-bar-fill.exp[b-a9m088rzdg] {
        background: #660000;
    }

    .bspl-illus-bar-fill.inc[b-a9m088rzdg] {
        background: #003366;
    }

.bspl-illus-amount[b-a9m088rzdg] {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bspl-illus-block.exp .bspl-illus-amount[b-a9m088rzdg] {
    color: #660000;
}

.bspl-illus-block.inc .bspl-illus-amount[b-a9m088rzdg] {
    color: #003366;
}

/* Centre icon + label */
.bspl-illus-centre[b-a9m088rzdg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bspl-illus-report-name[b-a9m088rzdg] {
    font-size: 9px;
    font-weight: 700;
    color: #1ab394;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Hide on mobile — same as old webform d-xl-only behaviour */
@media (max-width: 900px) {
    .bspl-illus-bar[b-a9m088rzdg] {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════
   REPORT IMAGE COLUMN
   Matches webform col-xl-4 third column:
     - BalanceSheet001.png  (BS)
     - ProfitandLoss.jpg    (PL)
   Shown on screens ≥ 1200px (xl), hidden below.
   Copy images to GainsBlazor/wwwroot/images/
   ══════════════════════════════════════════════════════ */




/* Show only on XL (≥1200px), hidden on smaller screens */
@media (max-width: 1199px) {
}

/* On XL screens give panels a bit less flex so image fits */
@media (min-width: 1200px) {
    .bspl-std-wrap[b-a9m088rzdg],
    .bspl-mc-wrap[b-a9m088rzdg] {
        align-items: flex-start;
    }

    .bspl-std-panel[b-a9m088rzdg],
    .bspl-mc-scroll[b-a9m088rzdg] {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ══════════════════════════════════════════════════════════════════
   GRID SYSTEM — shared by Standard (Y/PY) and Multi-Col (Q/M/etc.)

   Layout: two .bspl-panel-half side-by-side, each containing a
   .bspl-scroll-box that scrolls horizontally if needed.
   Rows = flex lines:
     [.nc — name, fixed width] [.vc — value, fixed, right-align] ...

   Column widths:
     Name cell (.nc):  240px
     Value cell (.vc): 150px
   These give enough room for Indian crore amounts.
   ══════════════════════════════════════════════════════════════════ */

/* ── Outer wrap: two panels side-by-side on ≥900px ── */

/* ── Each half panel ── */
.bspl-std-panel[b-a9m088rzdg] {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

/* MC scroll — same as std-panel */
.bspl-mc-scroll[b-a9m088rzdg] {
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid #e7eaec;
}

/* std-panel inner scroll box */
.bspl-std-panel .bspl-mc-scroll[b-a9m088rzdg] {
    width: 100%;
}

/* ── Name cell ── */


/* ── Value cell ── */


/* ── Header row ── */
.bspl-mc-hdr-row[b-a9m088rzdg] {
    display: flex;
    align-items: center;
    min-height: 34px;
    position: sticky;
    top: 0;
    z-index: 5;
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
}

    .bspl-mc-hdr-row.exp[b-a9m088rzdg] {
        background: #660000;
    }

    .bspl-mc-hdr-row.inc[b-a9m088rzdg] {
        background: #003366;
    }

.bspl-mc-hdr-cell[b-a9m088rzdg] {
    color: #fff !important;
    font-weight: 700;
}

/* ── Data row ── */
.bspl-mc-dr[b-a9m088rzdg] {
    display: flex;
    align-items: center;
    min-height: 28px;
    border-bottom: 1px solid #e7eaec;
    background: #fff;
    transition: background .07s;
}

    .bspl-mc-dr:hover[b-a9m088rzdg] {
        background: #f9f9f9;
    }

    /* group/subgroup */
    .bspl-mc-dr.mc-group[b-a9m088rzdg],
    .bspl-mc-dr.row-group[b-a9m088rzdg] {
        background: #f2f3f5;
        font-weight: 700;
    }

        .bspl-mc-dr.mc-group .bspl-mc-nc[b-a9m088rzdg],
        .bspl-mc-dr.mc-group .bspl-mc-vc[b-a9m088rzdg],
        .bspl-mc-dr.row-group .bspl-mc-nc[b-a9m088rzdg],
        .bspl-mc-dr.row-group .bspl-mc-vc[b-a9m088rzdg] {
            color: #222 !important;
        }

    .bspl-mc-dr.row-subgroup[b-a9m088rzdg] {
        background: #fff;
        font-weight: 700;
    }

        .bspl-mc-dr.row-subgroup .bspl-mc-nc[b-a9m088rzdg],
        .bspl-mc-dr.row-subgroup .bspl-mc-vc[b-a9m088rzdg] {
            color: #222 !important;
        }

    /* profit row */
    .bspl-mc-dr.row-profit[b-a9m088rzdg] {
        background-color: rgb(226,239,218) !important;
    }

        .bspl-mc-dr.row-profit:hover[b-a9m088rzdg] {
            background-color: rgb(213,230,203) !important;
        }

        .bspl-mc-dr.row-profit .bspl-mc-nc[b-a9m088rzdg],
        .bspl-mc-dr.row-profit .bspl-mc-vc[b-a9m088rzdg] {
            color: rgb(21,103,48) !important;
            font-weight: 600;
        }

    /* diff row */
    .bspl-mc-dr.row-diff[b-a9m088rzdg] {
        background: #fff9f3;
    }

        .bspl-mc-dr.row-diff .bspl-mc-nc[b-a9m088rzdg],
        .bspl-mc-dr.row-diff .bspl-mc-vc[b-a9m088rzdg] {
            color: #e07b39 !important;
        }

    /* ledger rows: color set via inline style on row div */
    .bspl-mc-dr .bspl-mc-nc[b-a9m088rzdg],
    .bspl-mc-dr .bspl-mc-vc[b-a9m088rzdg] {
        color: inherit;
    }

/* ── REPORT IMAGE COLUMN ──────────────────────────────
   Shown ONLY in FY standard mode (no prev columns).
   Positioned OUTSIDE the flex wrap, floated right.
   Matches webform col-xl-4 d-xl-block behaviour.
   Copy to wwwroot/images/:
     BalanceSheet001.png
     ProfitandLoss.jpg
   ── */



/* Show only on XL (≥1200px) */
@media (min-width: 1200px) {


    /* On XL when image is visible, data panels share remaining width */
    .bspl-std-wrap[b-a9m088rzdg],
    .bspl-mc-wrap[b-a9m088rzdg] {
        /* image is floated, wraps naturally */
    }
}

/* ── RESPONSIVE: stack panels vertically below 900px ── */
@media (max-width: 900px) {
    .bspl-std-wrap[b-a9m088rzdg],
    .bspl-mc-wrap[b-a9m088rzdg] {
        flex-direction: column;
        gap: 10px;
        padding: 8px;
    }

    .bspl-std-panel[b-a9m088rzdg],
    .bspl-mc-scroll[b-a9m088rzdg] {
        flex: none;
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
}


/* ══════════════════════════════════════════════════════════════════
   AUTHORITATIVE GRID CSS — single source of truth for all columns.
   Applies to both Standard (Y/PY) and Multi-Col (Q/M/2Y/3Y/4Y/Q5).
   ══════════════════════════════════════════════════════════════════ */

/* ── Outer wraps ── */
.bspl-std-wrap[b-a9m088rzdg],
.bspl-mc-wrap[b-a9m088rzdg] {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 10px 16px 6px;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}

.bspl-std-panel[b-a9m088rzdg] {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.bspl-mc-scroll[b-a9m088rzdg] {
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid #e7eaec;
}

.bspl-std-panel .bspl-mc-scroll[b-a9m088rzdg] {
    width: 100%;
    overflow-x: auto;
}

/* ── Name cell: 220px fixed ── */
.bspl-mc-nc[b-a9m088rzdg] {
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    padding: 5px 8px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* ── Value cell: 140px fixed, right-aligned ── */
.bspl-mc-vc[b-a9m088rzdg] {
    flex: 0 0 140px !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    padding: 5px 10px;
    text-align: right !important;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-sizing: border-box;
}

/* ── Header row ── */
.bspl-mc-hdr-row[b-a9m088rzdg] {
    display: flex !important;
    align-items: center;
    min-height: 34px;
    position: sticky;
    top: 0;
    z-index: 5;
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
}

    .bspl-mc-hdr-row.exp[b-a9m088rzdg] {
        background: #660000 !important;
    }

    .bspl-mc-hdr-row.inc[b-a9m088rzdg] {
        background: #003366 !important;
    }

.bspl-mc-hdr-cell[b-a9m088rzdg] {
    color: #fff !important;
    font-weight: 700 !important;
    text-align: right !important;
    /* Header labels ("Apr-25-Mar-26") are text, not numbers — they can be
       longer than a typical value and don't have the same "must show the
       true magnitude" requirement a currency figure does, but losing part
       of the label to ellipsis still looks like a rendering bug (it looks
       identical to the column-width mismatch this was mistaken for).
       Let it wrap to 2 lines instead — the sticky header row has vertical
       room to grow without touching data-row alignment below it. */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.15;
}

.bspl-mc-hdr-row[b-a9m088rzdg] {
    min-height: 34px;
    height: auto;
    padding: 3px 0;
}

    .bspl-mc-hdr-row .bspl-mc-nc[b-a9m088rzdg] {
        text-align: left !important;
    }

/* ── Data row ── */
.bspl-mc-dr[b-a9m088rzdg] {
    display: flex !important;
    align-items: center;
    min-height: 28px;
    border-bottom: 1px solid #e7eaec;
    background: #fff;
    transition: background .07s;
}

    .bspl-mc-dr:hover[b-a9m088rzdg] {
        background: #f9f9f9;
    }

    /* colour rules — least specific so inline style beats them */
    .bspl-mc-dr .bspl-mc-nc[b-a9m088rzdg],
    .bspl-mc-dr .bspl-mc-vc[b-a9m088rzdg] {
        color: inherit;
    }

    .bspl-mc-dr.mc-group[b-a9m088rzdg],
    .bspl-mc-dr.row-group[b-a9m088rzdg] {
        background: #f2f3f5;
        font-weight: 700;
    }

    .bspl-mc-dr.row-subgroup[b-a9m088rzdg] {
        background: #fff;
        font-weight: 700;
    }

    .bspl-mc-dr.mc-group .bspl-mc-nc[b-a9m088rzdg],
    .bspl-mc-dr.mc-group .bspl-mc-vc[b-a9m088rzdg],
    .bspl-mc-dr.row-group .bspl-mc-nc[b-a9m088rzdg],
    .bspl-mc-dr.row-group .bspl-mc-vc[b-a9m088rzdg] {
        color: #222 !important;
    }

    .bspl-mc-dr.row-subgroup .bspl-mc-nc[b-a9m088rzdg],
    .bspl-mc-dr.row-subgroup .bspl-mc-vc[b-a9m088rzdg] {
        color: #222 !important;
    }

    .bspl-mc-dr.row-profit[b-a9m088rzdg] {
        background-color: rgb(226,239,218) !important;
    }

        .bspl-mc-dr.row-profit:hover[b-a9m088rzdg] {
            background-color: rgb(213,230,203) !important;
        }

        .bspl-mc-dr.row-profit .bspl-mc-nc[b-a9m088rzdg],
        .bspl-mc-dr.row-profit .bspl-mc-vc[b-a9m088rzdg] {
            color: rgb(21,103,48) !important;
            font-weight: 600;
        }

    .bspl-mc-dr.row-diff[b-a9m088rzdg] {
        background: #fff9f3;
    }

        .bspl-mc-dr.row-diff .bspl-mc-nc[b-a9m088rzdg],
        .bspl-mc-dr.row-diff .bspl-mc-vc[b-a9m088rzdg] {
            color: #e07b39 !important;
        }

/* ── Responsive: stack below 900px ── */
@media (max-width: 900px) {
    .bspl-std-wrap[b-a9m088rzdg],
    .bspl-mc-wrap[b-a9m088rzdg] {
        flex-direction: column;
        gap: 10px;
        padding: 8px;
    }

    .bspl-std-panel[b-a9m088rzdg],
    .bspl-mc-scroll[b-a9m088rzdg] {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .bspl-mc-nc[b-a9m088rzdg] {
        flex: 0 0 180px !important;
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
        font-size: 12px;
    }

    .bspl-mc-vc[b-a9m088rzdg] {
        flex: 0 0 120px !important;
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .bspl-mc-nc[b-a9m088rzdg] {
        flex: 0 0 140px !important;
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        font-size: 11px;
        padding: 4px 5px;
    }

    .bspl-mc-vc[b-a9m088rzdg] {
        flex: 0 0 100px !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        font-size: 11px;
        padding: 4px 5px;
    }
}

/* ══════════════════════════════════════════════════════
   REPORT IMAGE COLUMN
   3rd flex child inside .bspl-std-wrap.
   Sits beside left+right panels on XL screens.
   Old webform: col-xl-4 d-xl-block d-sm-none
   New: flex: 0 0 280px, hidden below 1100px
   ══════════════════════════════════════════════════════ */
.bspl-img-col[b-a9m088rzdg] {
    flex: 0 0 280px;
    width: 280px;
    display: none; /* hidden by default */
    align-items: flex-start;
    justify-content: center;
    padding: 0 4px;
    align-self: flex-start;
}

.bspl-report-img[b-a9m088rzdg] {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
}

/* Show on XL (≥1100px) only */
@media (min-width: 1100px) {
    .bspl-img-col[b-a9m088rzdg] {
        display: flex;
    }
}

/* On mobile: stack panels vertically, hide image */
@media (max-width: 900px) {
    .bspl-img-col[b-a9m088rzdg] {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════
   DEPTH BUTTON SHORT/LONG LABELS
   Desktop (>600px): show ABRIDGED / NORMAL / EXPAND
   Mobile (≤600px):  show ABR / NOR / EXP
   ══════════════════════════════════════════════════════ */
.bspl-btn-short[b-a9m088rzdg] {
    display: none;
}

.bspl-btn-full[b-a9m088rzdg] {
    display: inline;
}

@media (max-width: 600px) {
    .bspl-btn-short[b-a9m088rzdg] {
        display: inline;
    }

    .bspl-btn-full[b-a9m088rzdg] {
        display: none;
    }
}


/* ════════════════════════════════════════════════════════════════
   FINAL OVERRIDE — fixes empty space and responsive layout
   ════════════════════════════════════════════════════════════════ */

/* Wrap: don't stretch children, let them be natural width */
.bspl-std-wrap[b-a9m088rzdg],
.bspl-mc-wrap[b-a9m088rzdg] {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: flex-start !important;
    gap: 12px;
    padding: 10px 16px 6px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto; /* let the whole row scroll if needed */
}

    /* FY / PY standard mode: panels share available space equally */
    .bspl-std-wrap .bspl-std-panel[b-a9m088rzdg] {
        flex: 1 1 0 !important; /* stretch to fill — percentage cols fill 100% */
        min-width: 0;
        overflow: hidden;
    }

    /* MC mode panels: stretch equally when side-by-side */
    .bspl-mc-wrap:not(.bspl-mc-vertical) .bspl-mc-scroll[b-a9m088rzdg] {
        flex: 1 1 0 !important;
        min-width: 0;
        overflow-x: auto;
    }

/* Inner scroll box inside std-panel */
.bspl-std-panel .bspl-mc-scroll[b-a9m088rzdg] {
    flex: none !important;
    width: 100% !important; /* fill the panel */
    overflow-x: auto;
    border: 1px solid #e7eaec;
    background: #fff;
}

/* Monthly / Q / Q5: force vertical stacking always */
.bspl-mc-wrap[b-a9m088rzdg] {
    flex-direction: row;
}

/* Image column: natural size beside panels */
.bspl-std-wrap .bspl-img-col[b-a9m088rzdg] {
    flex: 0 0 auto !important;
    align-self: flex-start;
    margin-left: auto; /* push to right edge */
}

/* ── RESPONSIVE ─────────────────────────────────────────────────
   ≤ 1024px: Monthly/Q/M stacks — both modes go column
   ≤ 900px:  all modes go column, full width panels
   ──────────────────────────────────────────────────────────────── */

/* Monthly / Q / Q5 — stack vertically at ≤1024px */
@media (max-width: 1024px) {
    .bspl-mc-wrap[b-a9m088rzdg] {
        flex-direction: column !important;
        overflow-x: visible;
    }

        .bspl-mc-wrap .bspl-mc-scroll[b-a9m088rzdg] {
            flex: none !important;
            width: 100% !important;
            overflow-x: auto;
        }
}

/* All modes — stack vertically at ≤900px */
@media (max-width: 900px) {
    .bspl-std-wrap[b-a9m088rzdg],
    .bspl-mc-wrap[b-a9m088rzdg] {
        flex-direction: column !important;
        overflow-x: visible;
        padding: 8px;
        gap: 10px;
    }

        .bspl-std-wrap .bspl-std-panel[b-a9m088rzdg],
        .bspl-mc-wrap .bspl-mc-scroll[b-a9m088rzdg] {
            flex: none !important;
            width: 100% !important;
            overflow-x: auto;
        }

    .bspl-std-panel .bspl-mc-scroll[b-a9m088rzdg] {
        width: 100% !important;
        overflow-x: auto;
    }

    .bspl-img-col[b-a9m088rzdg] {
        display: none !important;
    }

    .bspl-mc-nc[b-a9m088rzdg] {
        flex: 0 0 160px !important;
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        font-size: 12px;
    }

    .bspl-mc-vc[b-a9m088rzdg] {
        flex: 0 0 110px !important;
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .bspl-mc-nc[b-a9m088rzdg] {
        flex: 0 0 130px !important;
        width: 130px !important;
        min-width: 130px !important;
        max-width: 130px !important;
        font-size: 11px;
        padding: 4px 5px;
    }

    .bspl-mc-vc[b-a9m088rzdg] {
        flex: 0 0 95px !important;
        width: 95px !important;
        min-width: 95px !important;
        max-width: 95px !important;
        font-size: 11px;
        padding: 4px 5px;
    }
}

/* Monthly / Q / Q5: always stack vertically (too many columns for side-by-side) */
.bspl-mc-wrap.bspl-mc-vertical[b-a9m088rzdg] {
    flex-direction: column !important;
}

    .bspl-mc-wrap.bspl-mc-vertical .bspl-mc-scroll[b-a9m088rzdg] {
        flex: none !important;
        width: 100% !important;
        overflow-x: auto;
    }

/* ══════════════════════════════════════════════════════════════════
   PERCENTAGE-BASED COLUMN WIDTHS  (matches old Bootstrap webform)
   Source: CS code uses width:50%/164px for FY, 40%/30%/30% for Prev1

   Rule:
     FY (1 value col):    name=60%  val=40%
     Prev1 (2 value cols): name=40%  val=30% each
     Prev2 (3 value cols): name=40%  val=20% each
     Prev3 (4 value cols): name=35%  val=21.6% each
     Prev4 (5 value cols): name=35%  val=13% each
     Q/M (many cols):     name=200px fixed, val=130px fixed (scroll)

   Implementation: .bspl-cols-N class on the scroll container
   sets nc/vc to % so total = 100% with no trailing space.
   ══════════════════════════════════════════════════════════════════ */

/* Base: percentage mode — override the fixed px !important rules */
.bspl-mc-scroll[class*="bspl-cols-"] .bspl-mc-nc[b-a9m088rzdg],
.bspl-mc-scroll[class*="bspl-cols-"] .bspl-mc-vc[b-a9m088rzdg] {
    flex: none !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bspl-mc-scroll[class*="bspl-cols-"] .bspl-mc-vc[b-a9m088rzdg] {
    text-align: right !important;
    /* Never truncate a currency value — clipping "3,22,33,60,066.36" down
       to "3,22,0" makes it look like a completely different, smaller
       number, unlike truncating a ledger name which is merely inconvenient.

       IMPORTANT: this must be a fixed constant, not min-width:max-content.
       Each .bspl-mc-dr row is an independent flex container — max-content
       sizes a cell to THAT ROW's own number, so a row with a long value
       ("1,40,78,10,652.08") gets a wider column than a row with a short
       one ("92,72,557.00"), even though both are meant to be the same
       column. That's what broke cross-row alignment after scrolling.
       A constant width applied identically to every row (regardless of
       what that row's own value is) is what actually keeps columns
       aligned down the page. 150px comfortably fits this app's realistic
       worst case (crore amounts, 2 decimals, ~17 characters) at this
       font-size — bump it if a still-longer value ever needs to fit. */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 165px !important;
}

/* THE ACTUAL BUG behind headers still clipping in Q/M/2Y/3Y/4Y: a header
   cell's markup is <div class="bspl-mc-vc bspl-mc-hdr-cell">, so it's
   matched by BOTH the rule above (3-part selector: .bspl-mc-scroll[..]
   .bspl-mc-vc) AND the earlier .bspl-mc-hdr-cell wrap-to-2-lines fix
   (only a 1-part selector). Both are !important, so specificity decides
   the tie — 3 parts beats 1, meaning the truncation rule was silently
   winning on EVERY header cell, in every mode, the entire time. The
   wrap fix never actually worked; it only looked like it worked on 1Y
   because that particular label happened to be short enough to never
   need wrapping in the first place. This matches the truncation rule's
   own specificity (3 parts) so it finally wins the tie for header cells
   specifically, while data cells (no .bspl-mc-hdr-cell class) are
   untouched and still protected against clipping. */
.bspl-mc-scroll[class*="bspl-cols-"] .bspl-mc-hdr-cell[b-a9m088rzdg] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    min-width: 165px;
}

/* 1 value column — FY: 60% / 40% */
.bspl-cols-1 .bspl-mc-nc[b-a9m088rzdg] {
    width: 60% !important;
}

.bspl-cols-1 .bspl-mc-vc[b-a9m088rzdg] {
    width: 40% !important;
}

/* 2 value columns — Prev1: 40% / 30% / 30% */
.bspl-cols-2 .bspl-mc-nc[b-a9m088rzdg] {
    width: 40% !important;
}

.bspl-cols-2 .bspl-mc-vc[b-a9m088rzdg] {
    width: 30% !important;
}

/* 3 value columns — Prev2: 40% / 20% / 20% / 20% */
.bspl-cols-3 .bspl-mc-nc[b-a9m088rzdg] {
    width: 40% !important;
}

.bspl-cols-3 .bspl-mc-vc[b-a9m088rzdg] {
    width: 20% !important;
}

/* 4 value columns — Prev3: 35% + 4×(16.25%) */
.bspl-cols-4 .bspl-mc-nc[b-a9m088rzdg] {
    width: 35% !important;
}

.bspl-cols-4 .bspl-mc-vc[b-a9m088rzdg] {
    width: 16.25% !important;
}

/* 5 value columns — Prev4: 35% + 5×(13%) */
.bspl-cols-5 .bspl-mc-nc[b-a9m088rzdg] {
    width: 35% !important;
}

.bspl-cols-5 .bspl-mc-vc[b-a9m088rzdg] {
    width: 13% !important;
}

/* 6+ value columns (Q/M/Q5 monthly = 12 cols) — fixed px, scroll horizontally */
.bspl-cols-6 .bspl-mc-nc[b-a9m088rzdg],
.bspl-cols-7 .bspl-mc-nc[b-a9m088rzdg],
.bspl-cols-8 .bspl-mc-nc[b-a9m088rzdg],
.bspl-cols-9 .bspl-mc-nc[b-a9m088rzdg],
.bspl-cols-10 .bspl-mc-nc[b-a9m088rzdg],
.bspl-cols-11 .bspl-mc-nc[b-a9m088rzdg],
.bspl-cols-12 .bspl-mc-nc[b-a9m088rzdg],
.bspl-cols-13 .bspl-mc-nc[b-a9m088rzdg] {
    width: 180px !important;
    min-width: 180px !important;
}

.bspl-cols-6 .bspl-mc-vc[b-a9m088rzdg],
.bspl-cols-7 .bspl-mc-vc[b-a9m088rzdg],
.bspl-cols-8 .bspl-mc-vc[b-a9m088rzdg],
.bspl-cols-9 .bspl-mc-vc[b-a9m088rzdg],
.bspl-cols-10 .bspl-mc-vc[b-a9m088rzdg],
.bspl-cols-11 .bspl-mc-vc[b-a9m088rzdg],
.bspl-cols-12 .bspl-mc-vc[b-a9m088rzdg],
.bspl-cols-13 .bspl-mc-vc[b-a9m088rzdg] {
    width: 120px !important;
    min-width: 120px !important;
}

/* Percentage-col container: always 100% of its slot. overflow-x is "auto"
   (not "hidden") so that if the rows inside ever need more space than that
   (e.g. narrower window + per-column min-widths), the columns are still
   reachable via a local scrollbar on THIS panel — rather than being silently
   clipped and unreachable, which is what "hidden" caused whenever the
   window was narrower than ~900px but not narrow enough to hit the old
   mobile-only auto-overflow media query. When content actually fits (the
   normal desktop case), auto shows no scrollbar at all, so this is safe
   at every screen size. */
.bspl-cols-1[b-a9m088rzdg],
.bspl-cols-2[b-a9m088rzdg],
.bspl-cols-3[b-a9m088rzdg],
.bspl-cols-4[b-a9m088rzdg],
.bspl-cols-5[b-a9m088rzdg] {
    overflow-x: auto !important;
    width: 100% !important;
}

/* For many-col (6+): scroll needed */
.bspl-cols-6[b-a9m088rzdg],
.bspl-cols-7[b-a9m088rzdg],
.bspl-cols-8[b-a9m088rzdg],
.bspl-cols-9[b-a9m088rzdg],
.bspl-cols-10[b-a9m088rzdg],
.bspl-cols-11[b-a9m088rzdg],
.bspl-cols-12[b-a9m088rzdg],
.bspl-cols-13[b-a9m088rzdg] {
    overflow-x: auto !important;
}

/* Rows: grow to fit all their columns rather than being capped at the
   visible viewport width. On desktop, percentage-based columns (1–5 cols)
   sum to exactly 100% so max-content ≈ 100% and nothing changes visually.
   On narrow mobile screens, though, the per-column min-width overrides
   (see the ≤900px block below) can push the real content wider than the
   viewport — in that case the row must grow (max-content) so the header,
   data, and totals-footer rows all share the same actual width and scroll
   together inside .bspl-mc-scroll, instead of the row being clipped at
   100% while extra columns spill out past its coloured box unstyled. */
.bspl-cols-1 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-1 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-2 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-2 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-3 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-3 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-4 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-4 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-5 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-5 .bspl-mc-dr[b-a9m088rzdg] {
    width: max-content !important;
    min-width: 100% !important;
    flex-wrap: nowrap !important;
}

/* Rows in many-column mode (6+ cols — Q/M/Q5) — same reasoning, always needed
   since these always exceed the viewport width and rely on horizontal scroll. */
.bspl-cols-6 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-6 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-7 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-7 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-8 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-8 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-9 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-9 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-10 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-10 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-11 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-11 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-12 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-12 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-13 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-13 .bspl-mc-dr[b-a9m088rzdg] {
    width: max-content !important;
    min-width: 100% !important;
    flex-wrap: nowrap !important;
}

/* std-panel in percentage mode: full width of its flex container */
.bspl-std-panel[b-a9m088rzdg] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
}

/* mc panels with percentage cols: side-by-side takes full row each */
.bspl-mc-wrap:not(.bspl-mc-vertical) .bspl-mc-scroll.bspl-cols-1[b-a9m088rzdg],
.bspl-mc-wrap:not(.bspl-mc-vertical) .bspl-mc-scroll.bspl-cols-2[b-a9m088rzdg],
.bspl-mc-wrap:not(.bspl-mc-vertical) .bspl-mc-scroll.bspl-cols-3[b-a9m088rzdg],
.bspl-mc-wrap:not(.bspl-mc-vertical) .bspl-mc-scroll.bspl-cols-4[b-a9m088rzdg],
.bspl-mc-wrap:not(.bspl-mc-vertical) .bspl-mc-scroll.bspl-cols-5[b-a9m088rzdg] {
    flex: 1 1 0 !important;
    width: 0 !important; /* flex will distribute equally */
    min-width: 0 !important;
}

/* Mobile: percentage cols switch to fixed px for readability (1–5 cols only) */
@media (max-width: 900px) {
    .bspl-cols-1 .bspl-mc-nc[b-a9m088rzdg],
    .bspl-cols-2 .bspl-mc-nc[b-a9m088rzdg],
    .bspl-cols-3 .bspl-mc-nc[b-a9m088rzdg],
    .bspl-cols-4 .bspl-mc-nc[b-a9m088rzdg],
    .bspl-cols-5 .bspl-mc-nc[b-a9m088rzdg] {
        /* Now that .bspl-mc-nc is sticky/frozen (see the FROZEN NAME COLUMN
           section below), it only needs to be wide enough to read the
           label — not the ~55% of the screen it used to get when it
           scrolled away with everything else. At 55%, 2+ value columns
           each needing ~140px min-width forced heavy horizontal scroll,
           and since the wide frozen column stayed pinned, scrolling slid
           value column 1 halfway BEHIND it — that's what produced the
           half-cut headers/totals ("6-Mar-27" instead of "Apr-26-Mar-27"). */
        width: 38% !important;
        min-width: 0 !important;
    }

    /* Must match the base rule's selector specificity
       (.bspl-mc-scroll[class*="bspl-cols-"] .bspl-mc-vc, which sets
       flex:none !important) or these overrides silently lose regardless
       of !important — that's the actual bug: the plain ".bspl-cols-N
       .bspl-mc-vc" selector below is lower-specificity than the base rule,
       so vc kept flex:none + width:auto (shrinks to fit its own text)
       instead of stretching to the row's right edge, leaving the value
       column short of the true right edge even though the text inside it
       was already right-aligned.

       min-width is a flat constant (140px), NOT max-content — max-content
       sizes each row's cell to THAT ROW's own number, so rows with longer
       values would get wider columns than rows with shorter ones, breaking
       alignment down the page after scrolling. A constant floor applied
       identically to every row is what keeps columns aligned. */
    .bspl-mc-scroll[class*="bspl-cols-"] .bspl-mc-vc[b-a9m088rzdg] {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 140px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: right !important;
        font-variant-numeric: tabular-nums;
    }

    /* Same specificity-tie bug as the desktop rule above, just inside this
       media query — header cells carry both .bspl-mc-vc and
       .bspl-mc-hdr-cell, so without this equally-specific override the
       overflow:hidden two lines up silently wins on every header cell at
       mobile widths too. */
    .bspl-mc-scroll[class*="bspl-cols-"] .bspl-mc-hdr-cell[b-a9m088rzdg] {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    .bspl-cols-1[b-a9m088rzdg],
    .bspl-cols-2[b-a9m088rzdg],
    .bspl-cols-3[b-a9m088rzdg],
    .bspl-cols-4[b-a9m088rzdg],
    .bspl-cols-5[b-a9m088rzdg] {
        overflow-x: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   PANEL WIDTH FINAL FIX
   Panels must stretch to fill available space (minus image col).
   Image col is fixed 260px, panels share the rest equally.
   ══════════════════════════════════════════════════════════════════ */

/* Standard wrap: panels stretch, image is fixed */
.bspl-std-wrap[b-a9m088rzdg] {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px;
    padding: 10px 16px 6px;
    width: 100%;
    box-sizing: border-box;
}

    .bspl-std-wrap .bspl-std-panel[b-a9m088rzdg] {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 0 !important; /* flex will distribute: each panel gets (100% - img - gap) / 2 */
        overflow: hidden;
    }

.bspl-std-panel .bspl-mc-scroll[b-a9m088rzdg] {
    width: 100% !important;
    border: 1px solid #e7eaec;
    background: #fff;
    overflow-x: auto;
}

/* Image column: fixed 260px, does not grow/shrink */
.bspl-std-wrap .bspl-img-col[b-a9m088rzdg] {
    flex: 0 0 260px !important;
    width: 260px !important;
    align-self: flex-start;
}

/* MC wrap panels also stretch */
.bspl-mc-wrap:not(.bspl-mc-vertical) .bspl-mc-scroll[b-a9m088rzdg] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 0 !important;
    overflow-x: auto;
}

/* Percentage cols must fill 100% of their panel (auto, not hidden — see
   the note on the earlier identical rule for why) */
.bspl-cols-1[b-a9m088rzdg],
.bspl-cols-2[b-a9m088rzdg],
.bspl-cols-3[b-a9m088rzdg],
.bspl-cols-4[b-a9m088rzdg],
.bspl-cols-5[b-a9m088rzdg] {
    overflow-x: auto !important;
    width: 100% !important;
}

    .bspl-cols-1 .bspl-mc-hdr-row[b-a9m088rzdg],
    .bspl-cols-1 .bspl-mc-dr[b-a9m088rzdg],
    .bspl-cols-2 .bspl-mc-hdr-row[b-a9m088rzdg],
    .bspl-cols-2 .bspl-mc-dr[b-a9m088rzdg],
    .bspl-cols-3 .bspl-mc-hdr-row[b-a9m088rzdg],
    .bspl-cols-3 .bspl-mc-dr[b-a9m088rzdg],
    .bspl-cols-4 .bspl-mc-hdr-row[b-a9m088rzdg],
    .bspl-cols-4 .bspl-mc-dr[b-a9m088rzdg],
    .bspl-cols-5 .bspl-mc-hdr-row[b-a9m088rzdg],
    .bspl-cols-5 .bspl-mc-dr[b-a9m088rzdg] {
        width: max-content !important;
        min-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }

.bspl-cols-6 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-6 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-7 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-7 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-8 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-8 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-9 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-9 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-10 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-10 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-11 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-11 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-12 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-12 .bspl-mc-dr[b-a9m088rzdg],
.bspl-cols-13 .bspl-mc-hdr-row[b-a9m088rzdg],
.bspl-cols-13 .bspl-mc-dr[b-a9m088rzdg] {
    width: max-content !important;
    min-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
}

/* Mobile: stack and hide image */
@media (max-width: 900px) {
    .bspl-std-wrap[b-a9m088rzdg],
    .bspl-mc-wrap[b-a9m088rzdg] {
        flex-direction: column !important;
        padding: 8px !important;
        gap: 8px !important;
    }

        .bspl-std-wrap .bspl-std-panel[b-a9m088rzdg],
        .bspl-mc-wrap .bspl-mc-scroll[b-a9m088rzdg] {
            flex: none !important;
            width: 100% !important;
            min-width: 0 !important;
        }

    .bspl-std-panel .bspl-mc-scroll[b-a9m088rzdg] {
        width: 100% !important;
        overflow-x: auto;
    }

    .bspl-img-col[b-a9m088rzdg] {
        display: none !important;
    }
    /* Column widths for 1–5 col mode are handled by the single
       .bspl-mc-scroll[class*="bspl-cols-"] .bspl-mc-vc / .bspl-mc-nc
       rules above — duplicating them here with a lower-specificity
       selector previously caused the value column to silently ignore
       these overrides (see the note above that block). */
}
/* ↑ FIX: this closing brace was missing, which silently trapped every
   single rule below (COA modal, frozen name column, clear-date button,
   etc.) inside the @media (max-width: 900px) block above it — meaning
   none of that CSS applied at all on any screen wider than 900px. This
   is what "all form style removed" actually was. */

/* ═══════════════════════════════════════════════════════════════════
   COA BSPL MODAL  (BSPLView icon)
   ═══════════════════════════════════════════════════════════════════ */
.coa-modal-overlay[b-a9m088rzdg] {
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 30, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    box-sizing: border-box;
}

.coa-modal-card[b-a9m088rzdg] {
    background: #fff;
    width: 100%;
    max-width: 860px;
    height: 90vh;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    box-sizing: border-box;
}

.coa-modal-x[b-a9m088rzdg] {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #9aa0a8;
    cursor: pointer;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

    .coa-modal-x:hover[b-a9m088rzdg] {
        color: #333;
        background: #f0f1f3;
    }

.coa-modal-header[b-a9m088rzdg] {
    padding: 20px 26px 14px;
    border-bottom: 1px solid #eceff2;
    flex: 0 0 auto;
}

    .coa-modal-header h2[b-a9m088rzdg] {
        margin: 0;
        font-size: 20px;
        font-weight: 100;
        color: #2fa89b;
        letter-spacing: .2px;
    }

.coa-modal-sub[b-a9m088rzdg] {
    font-size: 12.5px;
    color: #8a8f98;
    margin-top: 3px;
    font-weight: 100;
}

.coa-modal-body[b-a9m088rzdg] {
    padding: 18px 22px 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
    background: #fbfbfc;
}

.coa-modal-loading[b-a9m088rzdg] {
    display: flex;
    justify-content: center;
    padding: 50px 0;
}

.coa-grid-row[b-a9m088rzdg] {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.coa-grid-row-bottom[b-a9m088rzdg] {
    margin-bottom: 4px;
}

.coa-col[b-a9m088rzdg] {
    flex: 1 1 0;
    min-width: 0;
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

/* ── Section header bar ── */
.coa-section-header[b-a9m088rzdg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

    .coa-section-header span:last-child[b-a9m088rzdg] {
        font-variant-numeric: tabular-nums;
        font-size: 13px;
        letter-spacing: 0;
    }

.coa-hdr-liab[b-a9m088rzdg] {
    background: #f7d6d1;
    color: #8a2c25;
}

.coa-hdr-asset[b-a9m088rzdg] {
    background: #d8e7f7;
    color: #1f4e79;
}

.coa-hdr-exp[b-a9m088rzdg] {
    background: #dfe3ae;
    color: #4b4b16;
}

.coa-hdr-inc[b-a9m088rzdg] {
    background: #dfe3ae;
    color: #4b4b16;
}

/* ── Rows ── */
.coa-row[b-a9m088rzdg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    font-size: 13px;
    color: #2b2f36;
    border-bottom: 1px solid #f1f2f4;
    line-height: 1.35;
}

    .coa-row:last-child[b-a9m088rzdg] {
        border-bottom: none;
    }

.coa-row-group[b-a9m088rzdg] {
    font-weight: 700;
    background: #fafbfc;
    padding-top: 8px;
    padding-bottom: 8px;
}

    .coa-row-group + .coa-row-leaf[b-a9m088rzdg] {
        border-top: none;
    }

.coa-row-leaf[b-a9m088rzdg] {
    font-weight: 400;
    color: #4a4f57;
}

.coa-row-profit[b-a9m088rzdg] {
    font-weight: 700;
    background: #e9f4e3;
    color: #156730;
    padding-top: 8px;
    padding-bottom: 8px;
}

.coa-row-label[b-a9m088rzdg] {
    flex: 1 1 auto;
    padding-right: 10px;
    min-width: 0;
    overflow-wrap: break-word;
}

.coa-row-value[b-a9m088rzdg] {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    min-width: 90px;
}

.coa-pill[b-a9m088rzdg] {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 5px;
    font-weight: 700;
}

.coa-pill-liab[b-a9m088rzdg] {
    background: #f7d6d1;
    color: #8a2c25;
}

.coa-pill-asset[b-a9m088rzdg] {
    background: #d8e7f7;
    color: #1f4e79;
}

.coa-pill-exp[b-a9m088rzdg],
.coa-pill-inc[b-a9m088rzdg] {
    background: #e3e6bd;
    color: #4b4b16;
}

/* ── Working capital callout ── */
.coa-wc-box[b-a9m088rzdg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #eceef0;
    padding: 9px 14px;
    margin-top: 10px;
    border-radius: 7px;
    font-size: 12.5px;
    color: #4a4f57;
}

    .coa-wc-box span:last-child[b-a9m088rzdg] {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

/* ── Footer ── */
.coa-modal-footer[b-a9m088rzdg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 22px;
    border-top: 1px solid #eceff2;
    flex: 0 0 auto;
    background: #fff;
}

.coa-footer-icon[b-a9m088rzdg] {
    font-size: 21px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: opacity .15s;
}

    .coa-footer-icon:hover[b-a9m088rzdg] {
        opacity: .75;
    }

.coa-footer-close[b-a9m088rzdg] {
    margin-left: auto;
    background: #eceff2;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: background .15s;
}

    .coa-footer-close:hover[b-a9m088rzdg] {
        background: #dfe3e7;
    }

/* ── Scrollbar polish ── */
.coa-modal-body[b-a9m088rzdg]::-webkit-scrollbar {
    width: 8px;
}

.coa-modal-body[b-a9m088rzdg]::-webkit-scrollbar-thumb {
    background: #d8dade;
    border-radius: 8px;
}

.coa-modal-body[b-a9m088rzdg]::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 640px) {
    .coa-modal-overlay[b-a9m088rzdg] {
        padding: 0;
        align-items: stretch;
    }

    .coa-modal-card[b-a9m088rzdg] {
        max-width: 100%;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .coa-modal-header[b-a9m088rzdg] {
        padding: 16px 44px 12px 16px;
    }

        .coa-modal-header h2[b-a9m088rzdg] {
            font-size: 17px;
        }

    .coa-modal-body[b-a9m088rzdg] {
        padding: 12px 12px 6px;
    }

    .coa-grid-row[b-a9m088rzdg] {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 14px;
    }

    .coa-section-header[b-a9m088rzdg] {
        padding: 8px 10px;
        font-size: 11.5px;
    }

    .coa-row[b-a9m088rzdg] {
        padding: 6px 10px;
        font-size: 12.5px;
    }

    .coa-row-value[b-a9m088rzdg] {
        min-width: 70px;
    }

    .coa-modal-footer[b-a9m088rzdg] {
        padding: 10px 14px;
        gap: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FIX: 2Y/3Y/4Y (non-vertical multi-col mode) completely vanishing
   at narrow widths.

   `.bspl-mc-wrap:not(.bspl-mc-vertical) .bspl-mc-scroll.bspl-cols-N` sets
   `width: 0 !important` as a flex-grow equal-distribution trick — safe in
   row layout (flex-basis governs the main axis there), but at ≤900px
   `.bspl-mc-wrap` switches to `flex-direction: column`, which flips the
   main axis to vertical. Once that happens, `width` becomes the CROSS
   axis property and is no longer shielded by flex-basis math — the panel
   collapses to a literal 0px-wide, invisible box. This restores a real
   width once stacked, at equal-or-higher specificity + later source order
   so it wins the tie against that rule.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .bspl-mc-wrap:not(.bspl-mc-vertical) .bspl-mc-scroll[b-a9m088rzdg],
    .bspl-mc-wrap:not(.bspl-mc-vertical) .bspl-mc-scroll.bspl-cols-1[b-a9m088rzdg],
    .bspl-mc-wrap:not(.bspl-mc-vertical) .bspl-mc-scroll.bspl-cols-2[b-a9m088rzdg],
    .bspl-mc-wrap:not(.bspl-mc-vertical) .bspl-mc-scroll.bspl-cols-3[b-a9m088rzdg],
    .bspl-mc-wrap:not(.bspl-mc-vertical) .bspl-mc-scroll.bspl-cols-4[b-a9m088rzdg],
    .bspl-mc-wrap:not(.bspl-mc-vertical) .bspl-mc-scroll.bspl-cols-5[b-a9m088rzdg] {
        width: 100% !important;
        min-width: 100% !important;
        flex: none !important;
        overflow-x: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Clear-date icon button (To Date row) — plain <img> reusing the
   GreenCalendarPicker's class names, but that component's own scoped
   CSS doesn't apply here, so it needs its own sizing to match the
   calendar trigger button next to it in the From Date row.
   (Same block as DocumentGrid.razor.css, kept page-scoped since these
   class names double up with GreenCalendarPicker's own trigger.)
   ═══════════════════════════════════════════════════════════════════ */
.gcp-trigger[b-a9m088rzdg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .gcp-trigger:hover[b-a9m088rzdg] {
        background: #f5f5f5;
        border-color: #bbb;
    }

.gcp-icon[b-a9m088rzdg] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

/* ══════════════════════════════════════════════════════════════════
   FROZEN NAME COLUMN — .bspl-mc-nc stays pinned to the left edge while
   the value columns scroll underneath it, like a spreadsheet's frozen
   first column. Without this, scrolling right to see Prev1/Prev2/Q/M
   columns scrolls the row label away too, so you end up looking at a
   column of numbers with no idea which row they belong to — that's
   the actual "data doesn't look proper when I scroll" complaint, not
   a leftover alignment bug (that part is already fixed).

   Needs an explicit, opaque background per row state so the pinned
   column doesn't show other rows' content bleeding through underneath
   it — "background: inherit" doesn't work here since inherit pulls
   from the parent (.bspl-mc-dr), not from a sibling/self color rule,
   and transparent would let scrolled-under content show through.
   ══════════════════════════════════════════════════════════════════ */
.bspl-mc-nc[b-a9m088rzdg] {
    position: sticky !important;
    left: 0 !important;
    z-index: 3;
    background: #fff;
}

/* Data-row backgrounds — match each row type's own background exactly */
.bspl-mc-dr.mc-group .bspl-mc-nc[b-a9m088rzdg],
.bspl-mc-dr.row-group .bspl-mc-nc[b-a9m088rzdg] {
    background: #f2f3f5;
}

.bspl-mc-dr.row-subgroup .bspl-mc-nc[b-a9m088rzdg] {
    background: #fff;
}

.bspl-mc-dr.row-profit .bspl-mc-nc[b-a9m088rzdg] {
    background-color: rgb(226, 239, 218) !important;
}

.bspl-mc-dr.row-diff .bspl-mc-nc[b-a9m088rzdg] {
    background: #fff9f3;
}

/* Header/Total rows — sit on top of data rows while scrolling
   (higher z-index), background matches the exp/inc colour bar */
.bspl-mc-hdr-row .bspl-mc-nc[b-a9m088rzdg] {
    z-index: 6;
}

.bspl-mc-hdr-row.exp .bspl-mc-nc[b-a9m088rzdg] {
    background: #660000 !important;
}

.bspl-mc-hdr-row.inc .bspl-mc-nc[b-a9m088rzdg] {
    background: #003366 !important;
}

/* Sid Edge shadow removed — it was rendering as a visible unwanted line/
   border down the row labels in mobile view instead of a subtle cue. */



/* /Components/Pages/Transactions/CrossLink.razor.rz.scp.css */
/* ── Top bar: party info + VType filters + action buttons, one row ── */
.xl-topbar[b-jtvv6whuoc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: nowrap;
    padding: 10px 16px;
    background: #f7f9fa;
    border-bottom: 1px solid #eef0f2;
    overflow-x: auto;
}

.xl-party-info[b-jtvv6whuoc] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    flex-shrink: 0;
}

    .xl-party-info span[b-jtvv6whuoc] {
        color: #1a7f4b;
        font-weight: 700;
    }

.xl-vtype-filters[b-jtvv6whuoc] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 1;
    min-width: 0;
}

.xl-vtype-group[b-jtvv6whuoc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 14px;
    border-right: 1px solid #e5e8ec;
}

    .xl-vtype-group:last-child[b-jtvv6whuoc] {
        border-right: none;
        padding-right: 0;
    }

.xl-vtype-item[b-jtvv6whuoc] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

    .xl-vtype-item input[b-jtvv6whuoc] {
        margin: 0;
        cursor: pointer;
    }

.xl-actions[b-jtvv6whuoc] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.xl-btn[b-jtvv6whuoc] {
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: uppercase;
    background: #fff;
    color: #555;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
}

    .xl-btn:hover:not(:disabled)[b-jtvv6whuoc] {
        background: #f5f5f5;
    }

    .xl-btn:disabled[b-jtvv6whuoc] {
        opacity: .5;
        cursor: not-allowed;
    }

    .xl-btn.primary[b-jtvv6whuoc] {
        background: #1ab99a;
        color: #fff;
        border-color: #1ab99a;
        font-weight: 700;
    }

        .xl-btn.primary:hover:not(:disabled)[b-jtvv6whuoc] {
            background: #159a80;
        }

/* ── Panels: left/right tables, identical look ── */
.xl-panels[b-jtvv6whuoc] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0 16px 16px;
    flex: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

.xl-left[b-jtvv6whuoc], .xl-right[b-jtvv6whuoc] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0; /* ← added: lets the table-wrap actually shrink/scroll */
    margin: 12px 0 !important;
    box-sizing: border-box;
}

.xl-left[b-jtvv6whuoc] {
    flex: 0 0 42%;
    max-width: 42%;
}

.xl-right[b-jtvv6whuoc] {
    flex: 1 1 0%;
    min-width: 0;
}

    /*.xl-left .mu-table-wrap, .xl-right .mu-table-wrap {
        flex: 1;
        overflow-y: auto;
        overflow-x: auto;
        min-height: 0;*/ /* ← added */
        /*max-height: 65vh;*/ /* ← safety net so it scrolls even if flex context breaks */
    /*}*/

    .xl-left .mu-table-wrap[b-jtvv6whuoc], .xl-right .mu-table-wrap[b-jtvv6whuoc] {
        flex: 1;
        overflow: auto;
        min-height: 200px;
    }

/* Unified table look for both panels — same header/body/footer treatment */
.xl-table[b-jtvv6whuoc] {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

    .xl-table thead th[b-jtvv6whuoc] {
        position: sticky;
        top: 0;
        z-index: 5;
        padding: 8px 10px;
        text-align: left;
        /* background/color removed — inherits default .mu-table thead th styling */
    }

        .xl-table thead th.num[b-jtvv6whuoc], .xl-table thead th.mu-th-idx[b-jtvv6whuoc] {
            text-align: right;
        }

    .xl-table tbody td[b-jtvv6whuoc] {
        padding: 7px 10px;
        font-size: 12px;
        border-bottom: 1px solid #eef0f2;
        vertical-align: middle;
    }

        .xl-table tbody td.num[b-jtvv6whuoc] {
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

        .xl-table tbody td.mu-idx[b-jtvv6whuoc] {
            text-align: right;
        }

    .xl-table tr.row-selected td[b-jtvv6whuoc] {
        background: #eafaf5;
    }

    /* Sticky footer — same pattern as ITB/TDS grids */
    .xl-table tfoot td[b-jtvv6whuoc] {
        position: sticky;
        bottom: 0;
        z-index: 6;
        background: #f2f2f2;
        font-weight: 600;
        font-size: 12px;
        padding: 7px 10px;
        box-sizing: border-box;
        border-top: 1px solid #d6dbe0;
    }

        .xl-table tfoot td.num[b-jtvv6whuoc] {
            text-align: right;
        }

.xl-cross-in[b-jtvv6whuoc] {
    width: 90px;
    padding: 3px 6px;
    border: 1px solid #d6dbe0;
    border-radius: 4px;
    text-align: right;
    font-size: 12.5px;
}

.mu-th-chk[b-jtvv6whuoc], .mu-td-chk[b-jtvv6whuoc] {
    text-align: center;
}
/* Base page-flex layout — must be redefined here because Blazor CSS isolation
   means ITB.razor.css's identical rules don't apply outside that component. */
.itb-page[b-jtvv6whuoc] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .itb-page .mu-card[b-jtvv6whuoc] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

@media (max-width: 900px) {
    .xl-panels[b-jtvv6whuoc] {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .xl-left[b-jtvv6whuoc], .xl-right[b-jtvv6whuoc] {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

        /* Stacked panels each need their own bounded height so both
       stay visible with independent scroll, instead of one pushing
       the other off-screen. */
        .xl-left .mu-table-wrap[b-jtvv6whuoc], .xl-right .mu-table-wrap[b-jtvv6whuoc] {
            max-height: 45vh;
            min-height: 180px;
        }

    .xl-topbar[b-jtvv6whuoc] {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .xl-party-info[b-jtvv6whuoc] {
        flex: 1 1 100%;
        order: 1;
    }

    .xl-vtype-filters[b-jtvv6whuoc] {
        flex: 1 1 100%;
        order: 3;
        overflow-x: auto;
    }

    .xl-actions[b-jtvv6whuoc] {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
    }
}
.xl-party-info[b-jtvv6whuoc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    flex-shrink: 0;
}

    .xl-party-info b[b-jtvv6whuoc] {
        font-size: 13px;
    }

.xl-obcb[b-jtvv6whuoc] {
    display: flex;
    gap: 16px;
    font-size: 11.5px;
    color: #555;
}

    .xl-obcb b[b-jtvv6whuoc] {
        color: #1a7f4b;
        font-weight: 700;
    }
.xl-linked-section[b-jtvv6whuoc] {
    border-bottom: 2px solid #d6dbe0;
    flex-shrink: 0;
}

.xl-linked-hdr[b-jtvv6whuoc] {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    background: #f7f9fa;
}

.xl-linked-wrap[b-jtvv6whuoc] {
    max-height: 180px;
    overflow: auto;
}
.xl-loading-row[b-jtvv6whuoc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    color: #64748b;
    font-size: 12.5px;
}

.xl-spinner[b-jtvv6whuoc] {
    width: 16px;
    height: 16px;
    border: 2px solid #d6dbe0;
    border-top-color: #1ab99a;
    border-radius: 50%;
    animation: xl-spin-b-jtvv6whuoc 0.7s linear infinite;
}

@keyframes xl-spin-b-jtvv6whuoc {
    to {
        transform: rotate(360deg);
    }
}

.xl-report-balance td[b-jtvv6whuoc] {
    font-weight: 700;
    background: #f7f9fa;
    border-top: 2px solid #d6dbe0;
}

/* ── Tab row (GRID / SUMMARY / REPORT) — must be redefined here,
   same reason as .itb-page/.mu-card: CSS isolation means TDS/ITB's
   .le-toptabs rules don't apply outside those components. ── */
.le-toptabs[b-jtvv6whuoc] {
    flex-shrink: 0;
    padding: 8px 16px 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.le-toptab[b-jtvv6whuoc] {
    padding: 7px 16px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: uppercase;
    background: #fff;
    color: #555;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .12s, color .12s, border-color .12s;
}

    .le-toptab:hover[b-jtvv6whuoc] {
        background: #f5f5f5;
    }

    .le-toptab.active[b-jtvv6whuoc] {
        background: #1ab99a;
        color: #fff;
        border-color: #1ab99a;
        font-weight: 700;
    }
.xl-summode-group[b-jtvv6whuoc] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}

@media (max-width: 480px) {
    .xl-summode-group[b-jtvv6whuoc] {
        flex-direction: column;
        gap: 8px;
    }
}
/* /Components/Pages/Transactions/DocumentGrid.razor.rz.scp.css */
/* =====================================================================
   DocumentGrid.razor.css
   Header (bspl-title-block), footer (bspl-footer), table (mu-table),
   and filter drawer (mu-drawer/mu-fld) all come from the shared
   common-page-chrome.css / masters-forms.css — same as Daybook, MGroup,
   MLedger. Only Document-Grid-specific bits remain here.
   ===================================================================== */

.dg-page[b-tyvb7jqz8m] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f3f3f4;
    font-family: 'Segoe UI', 'Open Sans', Arial, sans-serif;
}

/* ── Grid / Tiles / Summary tab switcher (left) + Voucher/General/
   Un-Tagged category toggle (right) — mirrors the legacy page's
   two-sided toolbar (LIST/TILES/... on the left, VOUCHERS/GENERAL/
   UN-TAGGED on the right). ── */
.dg-tabbar[b-tyvb7jqz8m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: #fff;
    border-bottom: 1px solid #e7eaec;
    padding: 8px 16px 6px;
    flex-shrink: 0;
}

.dg-tabbar-left[b-tyvb7jqz8m],
.dg-tabbar-right[b-tyvb7jqz8m] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.dg-tab[b-tyvb7jqz8m] {
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    background: #fff;
    color: #555;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    cursor: pointer;
    transition: all .12s;
}

    .dg-tab:hover[b-tyvb7jqz8m] {
        background: #f5f5f5;
    }

    .dg-tab.active[b-tyvb7jqz8m] {
        background: #1ab394;
        color: #fff;
        border-color: #1ab394;
    }

/* Category toggle — same pill shape, distinct blue accent so it doesn't
   visually blend into the view-mode tabs on the left. */
.dg-cat-btn[b-tyvb7jqz8m] {
    padding: 5px 14px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    background: #fff;
    color: #555;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    cursor: pointer;
    transition: all .12s;
}

    .dg-cat-btn:hover[b-tyvb7jqz8m] {
        background: #f5f5f5;
    }

    .dg-cat-btn.active[b-tyvb7jqz8m] {
        background: #1a56a7;
        color: #fff;
        border-color: #1a56a7;
    }

/* ── Scrollable middle content — the one part that scrolls, matching
   .bspl-content / .db-content on the other Transactions pages ── */
.dg-content[b-tyvb7jqz8m] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 8px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

    .dg-content .mu-card[b-tyvb7jqz8m] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        background: #fff;
        border: 1px solid #e5e8ec;
        border-radius: 4px;
        overflow: hidden;
    }

    .dg-content .mu-table-wrap[b-tyvb7jqz8m] {
        flex: 1;
        overflow: auto;
        min-height: 200px;
    }

/* ── Tiles view ── */
.dg-tiles-wrap[b-tyvb7jqz8m] {
    flex: 1;
    overflow: auto;
    min-height: 200px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 14px;
    padding: 16px;
}

.dg-tile[b-tyvb7jqz8m] {
    width: 160px;
    border: 1px solid #e5e8ec;
    border-radius: 6px;
    background: #fafbfc;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow .12s, border-color .12s;
}

    .dg-tile:hover[b-tyvb7jqz8m] {
        border-color: #1ab394;
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }

.dg-tile-thumb[b-tyvb7jqz8m] {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4fb;
    color: #1a56a7;
    font-size: 32px;
}

.dg-tile-body[b-tyvb7jqz8m] {
    padding: 8px 10px;
}

.dg-tile-name[b-tyvb7jqz8m] {
    font-size: 12px;
    font-weight: 600;
    color: #1a2537;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dg-tile-meta[b-tyvb7jqz8m] {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-end[b-tyvb7jqz8m] {
    text-align: right;
}

/* ── "Filter By" Ledger/Group radios — one line instead of stacking,
   since .le-chk is a block-level label by default. ── */
.dg-radio-row[b-tyvb7jqz8m] {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* ── Sortable column headers (Detail grid + Summary tab) — Tabler-icon
   arrows, same pattern as OrderGrid's/Daybook's .mu-th-sort/.db-sort.
   Needed locally since Blazor CSS isolation means OrderGrid's copy of
   this rule doesn't reach this page. ── */
.mu-th-sort[b-tyvb7jqz8m] {
    cursor: pointer;
    white-space: nowrap;
}

    .mu-th-sort i[b-tyvb7jqz8m] {
        margin-left: 4px;
        font-size: 12px;
        opacity: .6;
    }

.dg-error[b-tyvb7jqz8m] {
    margin: 0 0 10px;
    padding: 10px 14px;
    background: #fdf3f3;
    border-left: 4px solid #c0392b;
    color: #c0392b;
    font-size: 13px;
    flex-shrink: 0;
}

.dg-ledger[b-tyvb7jqz8m] {
    color: #2f8fd1;
}

.dg-narration[b-tyvb7jqz8m] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dg-file-btn[b-tyvb7jqz8m] {
    background: none;
    border: none;
    color: #1a56a7;
    font-size: 12.5px;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .dg-file-btn:hover[b-tyvb7jqz8m] {
        text-decoration: underline;
    }

.dg-uploaded[b-tyvb7jqz8m] {
    font-size: 12px;
    color: #333;
}

.dg-uploaded-by[b-tyvb7jqz8m] {
    font-size: 11px;
    color: #94a3b8;
}

.dg-total[b-tyvb7jqz8m] {
    font-weight: 700;
    color: #1a56a7;
}

.dg-page-current[b-tyvb7jqz8m] {
    font-size: 12.5px;
    color: #64748b;
}

/* Ledger match list inside the filter drawer */
.mu-fld select[size][b-tyvb7jqz8m] {
    height: auto;
    font-size: 12.5px;
}

/* Clear-date icon button (To Date row) — plain <img> reusing the
   GreenCalendarPicker's class names, but that component's own scoped
   CSS doesn't apply here, so it needs its own sizing to match the
   calendar trigger button next to it in the From Date row. */
.gcp-trigger[b-tyvb7jqz8m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .gcp-trigger:hover[b-tyvb7jqz8m] {
        background: #f5f5f5;
        border-color: #bbb;
    }

.gcp-icon[b-tyvb7jqz8m] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .dg-narration[b-tyvb7jqz8m] {
        max-width: 120px;
    }

    .dg-content[b-tyvb7jqz8m] {
        padding: 8px 10px;
    }
}
/* /Components/Pages/Transactions/GAINS_TB.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   GAINS_TB.razor.css — Trial Balance (Ledgerwise / Groupwise)
   Namespaced tb2-* to match this page's markup.

   Header (title, subtitle, GAINS toggle) and Filters button now use
   the shared common-page-chrome.css classes: .bspl-title-block,
   .bspl-title-row, .bspl-title-left, .bspl-gains-toggle,
   .bspl-title-actions, .bspl-filter-toggle.

   Footer bar itself also uses common-page-chrome.css: .bspl-footer,
   .bspl-footer-left, .bspl-footer-right. Pagination/export icons
   below remain page-specific.
   ═══════════════════════════════════════════════════════════════ */

/* Note: --tb2-teal / --tb2-teal-light were previously defined via :root here,
   but Blazor's CSS isolation rewrites :root to :root[b-xxxxx], which never
   matches anything — so the variables silently failed and .tb2-btn.active
   rendered with no background/border at all. Replaced with literal hex
   values (#1a9c8c / #6fd6c5) throughout instead. */

.tb2-page[b-q3cgykc38x] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f3f3f4;
    font-family: 'Segoe UI', sans-serif;
}

.tb2-btnbar[b-q3cgykc38x] {
    background: #fff;
    border: 1px solid #e5e8ec;
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.tb2-btnrow[b-q3cgykc38x] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .tb2-btnrow + .tb2-btnrow[b-q3cgykc38x] {
        margin-top: 8px;
    }

.tb2-btn-gap[b-q3cgykc38x] {
    flex: 0 0 12px;
}

.tb2-btn[b-q3cgykc38x] {
    background: #fff;
    border: 1px solid #d6dbe0;
    color: #555;
    border-radius: 4px;
    padding: 7px 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    cursor: pointer;
}

    .tb2-btn.tb2-btn-sm[b-q3cgykc38x] {
        padding: 7px 12px;
    }

    .tb2-btn.active[b-q3cgykc38x] {
        background: #1a9c8c;
        color: #fff;
        border-color: #1a9c8c;
    }

    .tb2-btn:hover:not(.active):not(:disabled)[b-q3cgykc38x] {
        background: #f5f7fa;
    }

    .tb2-btn:disabled[b-q3cgykc38x] {
        opacity: .4;
        cursor: not-allowed;
    }

/* Full label ("YEARLY") on normal screens; short label ("Y") on mobile, so
   YEARLY/QUARTERLY/MONTHLY/CB ONLY/5 COLUMN don't wrap/overflow on narrow screens. */
.tb2-btn-short[b-q3cgykc38x] {
    display: none;
}

@media (max-width: 576px) {
    .tb2-btn-full[b-q3cgykc38x] {
        display: none;
    }

    .tb2-btn-short[b-q3cgykc38x] {
        display: inline;
    }

    .tb2-btn[b-q3cgykc38x] {
        padding: 7px 12px;
    }

    .tb2-btnrow[b-q3cgykc38x] {
        gap: 6px;
    }
}

.tb2-grid-card[b-q3cgykc38x] {
    background: #fff;
    border: 1px solid #e5e8ec;
    border-radius: 4px;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tb2-toolbar[b-q3cgykc38x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 13px;
    color: #555;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

.tb2-entries-select[b-q3cgykc38x] {
    border: 1px solid #d6dbe0;
    border-radius: 3px;
    padding: 2px 6px;
    margin: 0 4px;
}

.tb2-search-input[b-q3cgykc38x] {
    border: 1px solid #d6dbe0;
    border-radius: 3px;
    padding: 3px 8px;
    margin-left: 6px;
}

.tb2-body-row[b-q3cgykc38x] {
    display: flex;
    flex: 1;
    min-height: 0;
}

.tb2-table-wrap[b-q3cgykc38x] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tb2-scroll[b-q3cgykc38x] {
    flex: 1;
    overflow: auto;
    min-height: 200px;
}

/* ── Groupwise 4-card layout (Assets/Liabilities/Income/Expenses) ── */
.tb2-group-scroll[b-q3cgykc38x] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 2px;
}

.tb2-group-card[b-q3cgykc38x] {
    border: 1px solid #e5e8ec;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.tb2-group-header-row[b-q3cgykc38x],
.tb2-group-row[b-q3cgykc38x],
.tb2-group-total-row[b-q3cgykc38x] {
    display: grid;
    align-items: center;
    column-gap: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid #eef0f2;
    font-size: 12.5px;
}

    .tb2-group-header-row:last-child[b-q3cgykc38x],
    .tb2-group-row:last-child[b-q3cgykc38x],
    .tb2-group-total-row:last-child[b-q3cgykc38x] {
        border-bottom: none;
    }

.tb2-group-header-label[b-q3cgykc38x] {
    font-weight: 700;
    color: #222;
}

.tb2-group-header-val[b-q3cgykc38x] {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tb2-group-row-label[b-q3cgykc38x] {
    text-align: left;
}

.tb2-group-row-val[b-q3cgykc38x] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tb2-group-total-row[b-q3cgykc38x] {
    background-color: #c2b280 !important;
    font-weight: 700;
    color: #2b2410;
}

.tb2-table[b-q3cgykc38x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    white-space: nowrap;
}

    .tb2-table th[b-q3cgykc38x], .tb2-table td[b-q3cgykc38x] {
        padding: 8px 12px;
        border-bottom: 1px solid #eef0f2;
    }

    .tb2-table thead th[b-q3cgykc38x] {
        border-bottom: 2px solid #e5e8ec;
        font-weight: 700;
        position: sticky;
        top: 0;
        cursor: pointer;
        user-select: none;
        z-index: 1;
    }

.tb2-th-period[b-q3cgykc38x] {
    font-size: 12.5px;
}

.tb2-th-field[b-q3cgykc38x] {
    font-size: 10.5px;
    color: rgba(255, 255, 255, .75);
    font-weight: 600;
}

.tb2-idx[b-q3cgykc38x] {
    width: 36px;
    color: #999;
    text-align: right;
}

.tb2-ledcode[b-q3cgykc38x] {
    color: #2f8fd1;
    font-weight: 500;
}

.tb2-row-even[b-q3cgykc38x] {
    background: #fafbfc;
}

/* Uniform "water-color" band across all 5 total rows (A-E), matching the legacy
   WebForms .Totbgcolor (#EBF4FA) — !important guards against any global table/
   zebra-striping CSS elsewhere in the app winning the cascade on these rows.
   Font-weight is intentionally NOT !important here so the inline
   font-weight:700/600 per row (bold only for "Ledger Total"/"Total") still wins. */
.tb2-row-total[b-q3cgykc38x],
.tb2-row-total td[b-q3cgykc38x] {
    background-color: #eaf3fb !important;
}

/* Sticky footer: the whole tfoot group (all 5 total rows) sticks to the bottom
   of .tb2-scroll as one unit — simpler and more robust than pinning each
   individually with hand-computed pixel offsets (which broke if row height
   ever changed with padding/font-size edits). */
.tb2-table tfoot[b-q3cgykc38x] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 -1px 0 #d7e6f0;
}

.tb2-zero[b-q3cgykc38x] {
    color: #aaa;
}

.tb2-dr[b-q3cgykc38x] {
    color: #222;
}

.tb2-cr[b-q3cgykc38x] {
    color: #d9534f;
}

.tb2-loading[b-q3cgykc38x] {
    padding: 40px;
    text-align: center;
    color: #888;
}

.tb2-illustration[b-q3cgykc38x] {
    width: 300px;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-left: 1px solid #eef0f2;
}

    .tb2-illustration img[b-q3cgykc38x] {
        max-width: 100%;
        opacity: .9;
    }

.tb2-footer-icons[b-q3cgykc38x] {
    display: flex;
    gap: 12px;
    font-size: 16px;
}

    .tb2-footer-icons a[b-q3cgykc38x] {
        cursor: pointer;
    }

.tb2-pagination[b-q3cgykc38x] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tb2-page-btn[b-q3cgykc38x] {
    border: 1px solid #d6dbe0;
    background: #fff;
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
}

    .tb2-page-btn:disabled[b-q3cgykc38x] {
        opacity: .4;
        cursor: default;
    }

/* ── Filter drawer — now uses shared masters-forms.css classes
   (.mu-drawer, .mu-drawer-overlay, .mu-drawer-hdr, .mu-fld, .mu-drawer-foot),
   same as MLedger. Only the checkbox/radio-row label style is page-local. ── */
.le-chk[b-q3cgykc38x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1a2537;
    cursor: pointer;
    margin-bottom: 6px;
}
/* /Components/Pages/Transactions/Inventory/ChallanGrid.razor.rz.scp.css */
/* =====================================================================
   GAINS — ChallanGrid.razor.css   (Transactions → Challan grid, page-scoped)
   Shared "mu-"/"bspl-" chrome lives in wwwroot/CSS/masters-forms.css;
   .t-page on the root wrapper already gives this table the transaction
   blue (#306B9C) header. Only Challan-grid-specific rules live here.
   ===================================================================== */

/* Same footer-pinning pattern used on BSPL / Daybook / TB / Masters pages. */
.ch-page[b-d5exzse6n8] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .ch-page .mu-card[b-d5exzse6n8] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .ch-page .mu-toolbar[b-d5exzse6n8] {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ch-page .mu-table-wrap[b-d5exzse6n8] {
        flex: 1;
        overflow: auto;
        min-height: 0;
        padding-left: 16px;
    }

/* ── Table density/striping — copied verbatim from Daybook's .db-table so
   this grid matches its row height/spacing exactly instead of the looser
   generic .mu-table look. Isolated CSS means it has to be redeclared here. ── */
.db-table[b-d5exzse6n8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .db-table th[b-d5exzse6n8] {
        text-align: left;
        padding: 8px 10px;
        border-bottom: 1px solid #ddd;
        position: sticky;
        top: 0;
        z-index: 3;
    }

    .db-table td[b-d5exzse6n8] {
        padding: 6px 10px;
        border-bottom: 1px solid #f2f2f2;
    }

    .db-table tfoot td[b-d5exzse6n8] {
        position: sticky;
        bottom: 0;
        z-index: 3;
        background: #e8e8e8;
    }

/* ── Summary tables (Month/Item/Ledger-wise) — table-layout:fixed so
   columns respect the <colgroup> widths defined in the markup. Column
   widths themselves live in <colgroup>/<col> in the .razor file rather
   than nth-child CSS here, because position:sticky on <th> doesn't
   reliably stay in sync with nth-child percentage widths across browsers
   — colgroup decouples sizing from the header cell's own rendering,
   which is what was causing header/body columns to drift apart. ── */
.ch-summary-month[b-d5exzse6n8], .ch-summary-item[b-d5exzse6n8], .ch-summary-ledger[b-d5exzse6n8] {
    table-layout: fixed;
}

    .ch-summary-month th[b-d5exzse6n8], .ch-summary-month td[b-d5exzse6n8],
    .ch-summary-item th[b-d5exzse6n8], .ch-summary-item td[b-d5exzse6n8],
    .ch-summary-ledger th[b-d5exzse6n8], .ch-summary-ledger td[b-d5exzse6n8] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ── Summary two-pane split — Month/Item/Ledger-wise table on the left,
   the secondary drill-down (Ledger-wise or Item-wise breakdown, scoped to
   whatever row was clicked on the left) on the right. Matches the legacy
   page's side-by-side layout.

   The split container itself must NOT scroll — it would otherwise inherit
   overflow:auto from .mu-table-wrap above and scroll the whole row as one
   unit, which both breaks independent scrolling per side and breaks
   sticky th/tfoot (position:sticky needs each pane to be its OWN nearest
   scrolling ancestor, not a shared one). align-items:stretch (overriding
   flex's default here explicitly) is what gives each pane a real bounded
   height to scroll within — without it, overflow-y:auto has nothing to
   clip against and the pane just grows with its content instead. ── */
.ch-page .mu-table-wrap.ch-summary-split[b-d5exzse6n8] {
    display: flex;
    align-items: stretch;
    gap: 16px;
    overflow: hidden;
    min-height: 0;
}

.ch-summary-left[b-d5exzse6n8] {
    flex: 1 1 55%;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}

.ch-summary-right[b-d5exzse6n8] {
    flex: 1 1 45%;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    border-left: 1px solid #e5e8ec;
    padding-left: 16px;
}

.ch-summary-right-title[b-d5exzse6n8] {
    font-weight: 700;
    font-size: 13px;
    color: #1a2537;
    padding: 4px 0 10px;
}

.ch-summary-right-tbl[b-d5exzse6n8] {
    width: 100%;
    border-collapse: collapse;
}

@media (max-width: 991px) {
    .ch-summary-split[b-d5exzse6n8] {
        flex-direction: column;
    }

    .ch-summary-right[b-d5exzse6n8] {
        border-left: none;
        border-top: 1px solid #e5e8ec;
        padding-left: 0;
        padding-top: 12px;
        width: 100%;
    }
}

.db-row-even[b-d5exzse6n8] {
    background: #ffffff;
}

.db-row-odd[b-d5exzse6n8] {
    background: #f5fafa;
}

.db-table tbody tr:hover[b-d5exzse6n8] {
    background: #e8f5f0;
}

/* ── Checkbox select column — matches Daybook's .chk column ── */
.chk[b-d5exzse6n8] {
    width: 32px;
    text-align: center;
}

/* ── Top view tabs (Details / Summary) — copied verbatim from Daybook's
   .db-tabbar/.db-tab since Blazor CSS isolation means Daybook.razor.css's
   rules can't reach this page. ── */
.db-tabbar[b-d5exzse6n8] {
    display: flex;
    gap: 4px;
    background: #fff;
    border-bottom: 1px solid #e7eaec;
    padding: 8px 0 6px 12px;
    flex-shrink: 0;
}

.db-tab[b-d5exzse6n8] {
    background: #fff;
    color: #555;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    padding: 5px 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: all .12s;
}

    .db-tab:hover[b-d5exzse6n8] {
        background: #f5f5f5;
    }

    .db-tab.active[b-d5exzse6n8] {
        background: #1ab394;
        color: #fff;
        border-color: #1ab394;
    }

/* ── Summary sub-tabs (Month Count / Month Value / Item-wise / Ledger-wise) ──
   Same source as above — Daybook's .db-summary-tabbar/.db-summary-tab. ── */
.db-summary-tabbar[b-d5exzse6n8] {
    display: flex;
    gap: 8px;
    padding: 10px 0 10px 12px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.db-summary-tab[b-d5exzse6n8] {
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
    padding: 5px 16px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

    .db-summary-tab.active[b-d5exzse6n8] {
        background: #16a085;
        color: #fff;
        border-color: #16a085;
    }

/* ── Footer pagination — Daybook's numbered .db-pagination/.db-page-btn ── */
.db-pagination[b-d5exzse6n8] {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 0;
}

.db-page-btn[b-d5exzse6n8] {
    background: #fff;
    border: 1px solid #ddd;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
}

    .db-page-btn.active[b-d5exzse6n8] {
        background: #16a085;
        color: #fff;
        border-color: #16a085;
    }

    .db-page-btn:disabled[b-d5exzse6n8] {
        opacity: .4;
        cursor: default;
    }

.bspl-footer-count[b-d5exzse6n8] {
    font-size: 12px;
    color: #666;
    margin-left: 4px;
}

/* ── "C" clear-dates button next to To Date — resets just the date range
   back to the FY default, without touching the rest of the filter form
   (that's what the drawer's "Clear Filter" button does). ── */
.ch-date-clear-btn[b-d5exzse6n8] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    background: #fff;
    color: #555;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

    .ch-date-clear-btn:hover[b-d5exzse6n8] {
        background: #f5f5f5;
        border-color: #1ab394;
        color: #1ab394;
    }

.ch-inline-error[b-d5exzse6n8] {
    color: #b91c1c;
    font-size: 12.5px;
}

/* ── Small colored square before VNum, matching Daybook's VNum swatch
   (colored by wColor, same source the VType badge already uses) ── */
.ch-vnum-dot[b-d5exzse6n8] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 7px;
    vertical-align: middle;
}

/* ── Type badge (wType/wTypeAlias, colored via wColor from the API) ── */
.ch-type-badge[b-d5exzse6n8] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ch-party[b-d5exzse6n8] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Clickable Ledger/Item name in the Ledger-wise/Item-wise summary
   tables — drills to QLedger/QItem. Copied from Daybook's .db-drill for
   the same CSS-isolation reason as the other classes in this file. ── */
.db-drill[b-d5exzse6n8] {
    cursor: pointer;
}

/* ── Numeric columns (Qty / Amount / Total / GRN / DLN / Prod) — right-aligned,
   tabular figures. The .db-table-th override is needed because ".db-table th"
   (two classes) otherwise beats plain ".ch-num" (one class) on specificity,
   silently left-aligning header cells like Total/GRN/DLN/Prod despite the
   class being present. ── */
.ch-num[b-d5exzse6n8] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.db-table th.ch-num[b-d5exzse6n8] {
    text-align: right;
}

/* ── Linked/unlinked indicator ── */
.ch-link-col[b-d5exzse6n8] {
    text-align: center;
    width: 56px;
}

.ch-linked[b-d5exzse6n8] {
    color: #1ab99a;
}

.ch-unlinked[b-d5exzse6n8] {
    color: #cbd5e1;
}

/* ── Grand total row — sticky to the bottom of the scroll area, same
   pattern used on BSPL/Daybook total rows ── */
.ch-total-row[b-d5exzse6n8] {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: #eef4fb;
    font-weight: 700;
    color: #1a2537;
}

    .ch-total-row td[b-d5exzse6n8] {
        border-top: 2px solid #306B9C;
    }

@media (max-width: 767px) {
    .ch-page .mu-toolbar[b-d5exzse6n8] {
        flex-wrap: wrap;
    }

    .ch-party[b-d5exzse6n8] {
        max-width: 140px;
    }
}
/* /Components/Pages/Transactions/Inventory/ITB.razor.rz.scp.css */
/* =====================================================================
   ITB.razor.css
   Header (bspl-title-block), footer (bspl-footer), tabs (le-toptabs),
   table (mu-table), and filter drawer (mu-drawer/mu-fld) all come from
   the shared common-page-chrome.css / masters-forms.css — same as
   MLedger. Only ITB-specific bits (gallery cards, numeric column
   alignment) remain here.
   ===================================================================== */

/* Page-end footer pinning — same pattern as MLedger/MGroup/Daybook/BSPL. */
.itb-page[b-e1uf9e3hb8] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.itb-toptabs[b-e1uf9e3hb8] {
    flex-shrink: 0;
    padding: 8px 16px 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

    /* Self-contained pill-button styling for the tab row — doesn't rely on
   masters-forms.css's .le-toptab actually being in effect on this route,
   so the tabs render consistently even if that stylesheet isn't loaded
   here. Matches the solid-teal-active pattern used by BSPL/TB/Daybook. */
    .itb-toptabs button[b-e1uf9e3hb8] {
        padding: 7px 16px;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .2px;
        text-transform: uppercase;
        background: #fff;
        color: #555;
        border: 1px solid #d5d5d5;
        border-radius: 6px;
        cursor: pointer;
        font-family: inherit;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: background .12s, color .12s, border-color .12s;
    }

        .itb-toptabs button i[b-e1uf9e3hb8] {
            font-size: 12px;
        }

        .itb-toptabs button:hover[b-e1uf9e3hb8] {
            background: #f5f5f5;
        }

        .itb-toptabs button.active[b-e1uf9e3hb8] {
            background: #1ab99a;
            color: #fff;
            border-color: #1ab99a;
            font-weight: 700;
        }

.itb-page .mu-card[b-e1uf9e3hb8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0 16px;
}

.itb-page .mu-table-wrap[b-e1uf9e3hb8] {
    flex: 1;
    overflow: auto;
    min-height: 200px;
}

.itb-page .bspl-footer-right[b-e1uf9e3hb8] {
    font-size: inherit;
    color: inherit;
}

/* Numeric column alignment (not defined globally in masters-forms.css) */
.mu-table thead th.num[b-e1uf9e3hb8] {
    text-align: right;
}

.mu-table td.num[b-e1uf9e3hb8] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.itb-iname[b-e1uf9e3hb8] {
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.itb-page-current[b-e1uf9e3hb8] {
    font-size: 12.5px;
    color: #64748b;
}

.itb-error[b-e1uf9e3hb8] {
    margin: 12px 16px 0;
    padding: 10px 14px;
    background: #fdf3f3;
    border-left: 4px solid #c0392b;
    color: #c0392b;
    font-size: 13px;
    flex-shrink: 0;
}

/* ── Toolbar: "Show N entries" + "Search:" (DataTables-style controls) ── */
.itb-toolbar[b-e1uf9e3hb8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    font-size: 12.5px;
    color: #555;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}

.itb-pagesize[b-e1uf9e3hb8] {
    padding: 4px 8px;
    border: 1px solid #d6dbe0;
    border-radius: 4px;
    margin: 0 4px;
    font-family: inherit;
    color: #333;
}

    .itb-pagesize:focus[b-e1uf9e3hb8],
    .itb-search:focus[b-e1uf9e3hb8],
    .itb-pageno:focus[b-e1uf9e3hb8] {
        outline: none;
        border-color: #1ab99a;
        box-shadow: 0 0 0 3px rgba(26,185,154,0.12);
    }

.itb-search[b-e1uf9e3hb8] {
    padding: 5px 10px;
    border: 1px solid #d6dbe0;
    border-radius: 4px;
    margin-left: 6px;
    font-family: inherit;
    color: #333;
}

/* ── Grouped grid headers (OB / IN / OUT / CB spanning Qty·Rate·Value) ──
   Light/white header with thin borders, matching the DataTables-style
   reference — NOT the dark mu-table default header used elsewhere. */
.itb-grid-table[b-e1uf9e3hb8] {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
}

    .itb-grid-table thead th[b-e1uf9e3hb8] {
       /* background: #fff !important;
        color: #333 !important;*/
        text-align: center;
        font-size: 11.5px;
        font-weight: 700;
        line-height: 1.3;
       /* border: 1px solid #e3e6ea;*/
        padding: 8px 10px;
    }
    /* Left-align the ItemCode/Item Group and Item Name header cells */
    .itb-grid-table thead tr:first-child th:nth-child(2)[b-e1uf9e3hb8],
    .itb-grid-table thead tr:first-child th:nth-child(3)[b-e1uf9e3hb8] {
        text-align: left;
    }
    .itb-grid-table thead tr:first-child th:nth-child(1)[b-e1uf9e3hb8] {
        text-align: right;
    }
    .itb-grid-table tbody td.mu-idx[b-e1uf9e3hb8] {
        text-align: right;
        padding-right: 8px;
    }
.itb-grp-hdr[b-e1uf9e3hb8] {
    background: #fff;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.itb-th-sort[b-e1uf9e3hb8] {
    cursor: pointer;
    user-select: none;
}



    .itb-th-sort[b-e1uf9e3hb8]::after {
        /* content: "\21C5";
        margin-left: 4px;
        color: #b7bec7;
        font-size: 10px;*/

        /*Hide that Arrorw from Header*/
        content: none;
    }

.itb-grid-table tbody td[b-e1uf9e3hb8],
.itb-grid-table tfoot td[b-e1uf9e3hb8] {
    border-left: 1px solid #eef0f2;
    border-right: 1px solid #eef0f2;
    border-bottom: 1px solid #eef0f2;
    border-top: 0;
}
[b-e1uf9e3hb8] .itb-secondary {
    color: #1ab99a !important;
    font-size: 11.5px;
}

.itb-sq[b-e1uf9e3hb8] {
    color: #1ab99a;
    font-size: 8px;
    vertical-align: 2px;
}

.itb-code[b-e1uf9e3hb8] {
    color: #2f8fd1;
}

[b-e1uf9e3hb8] tfoot .itb-secondary {
    color: #1ab99a !important;
}

.itb-xls-btn[b-e1uf9e3hb8] {
    background: none;
    border: none;
    color: #1a7f4b;
    font-size: 15px;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 8px;
}

.itb-pageno[b-e1uf9e3hb8] {
    padding: 3px 8px;
    border: 1px solid #d6dbe0;
    border-radius: 4px;
    font-family: inherit;
    color: #333;
}

/* ── Gallery view ── */
.itb-gallery-wrap[b-e1uf9e3hb8] {
    flex: 1;
    overflow: auto;
    min-height: 200px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 14px;
    padding: 16px;
}

.itb-card[b-e1uf9e3hb8] {
    width: 220px;
    border: 1px solid #e5e8ec;
    border-radius: 3px;
    background: #ececec;
    overflow: hidden;
    transition: box-shadow .12s, border-color .12s;
}

    .itb-card:hover[b-e1uf9e3hb8] {
        border-color: #1ab99a;
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }

.itb-card-hdr[b-e1uf9e3hb8] {
    padding: 6px 8px;
    background: #e2e2e2;
    border-bottom: 1px solid #d5d5d5;
}

.itb-card-name[b-e1uf9e3hb8] {
    font-size: 12px;
    color: #2f8fd1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.itb-card-photo[b-e1uf9e3hb8] {
    position: relative;
    height: 150px;
    background: #f8f8f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .itb-card-photo img[b-e1uf9e3hb8] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.itb-card-noimg[b-e1uf9e3hb8] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #d9d3b8;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
}

.itb-card-code[b-e1uf9e3hb8] {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: #1ab99a;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
}

.itb-card-boxes[b-e1uf9e3hb8] {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: #ececec;
}

.itb-box[b-e1uf9e3hb8] {
    flex: 1;
    text-align: center;
    padding: 3px 4px;
    border: 1px solid #1ab99a;
    border-radius: 3px;
    background: #fff;
    color: #1a2537;
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.itb-box-wide[b-e1uf9e3hb8] {
    flex: 2;
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .itb-card[b-e1uf9e3hb8] {
        width: 140px;
    }

    .itb-card-photo[b-e1uf9e3hb8] {
        height: 100px;
    }

    .itb-page .mu-card[b-e1uf9e3hb8] {
        margin: 0 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Clear-date icon button (To Date row) — plain <img> reusing the
   GreenCalendarPicker's class names, but that component's own scoped
   CSS doesn't apply here, so it needs its own sizing to match the
   calendar trigger button next to it in the From Date row.
   (Same block as DocumentGrid.razor.css / BSPL.razor.css.)
   ═══════════════════════════════════════════════════════════════════ */
.gcp-trigger[b-e1uf9e3hb8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .gcp-trigger:hover[b-e1uf9e3hb8] {
        background: #f5f5f5;
        border-color: #bbb;
    }

.gcp-icon[b-e1uf9e3hb8] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}
.itb-grid-table thead tr:first-child th[b-e1uf9e3hb8] {
    position: sticky;
    top: 0;
    z-index: 20;
}

.itb-grid-table thead tr:nth-child(2) th[b-e1uf9e3hb8] {
    position: sticky;
    top: 34px; /* Same as the height above */
    z-index: 19;
}

.itb-grid-table thead[b-e1uf9e3hb8],
.itb-grid-table thead tr[b-e1uf9e3hb8],
.itb-grid-table thead th[b-e1uf9e3hb8] {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
/* Sticky footer */
.itb-grid-table tfoot td[b-e1uf9e3hb8] {
    position: sticky;
    bottom: 0;
    z-index: 15;
    background: #fff; /* or your footer background */
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    padding: 4px 8px;
    box-sizing: border-box;
    background: #f2f2f2;
}
.itb-code[b-e1uf9e3hb8] {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: max-width 0.15s;
}

.itb-code-wide[b-e1uf9e3hb8] {
    max-width: 200px;
    white-space: normal;
}


/* Item Name header (2nd row spans it; target the 3rd th in row 1) */
.itb-grid-table thead tr:first-child th:nth-child(3)[b-e1uf9e3hb8] {
    width: 22%;
}

/* Keep columns readable; scroll horizontally instead of crushing */
.itb-grid-table[b-e1uf9e3hb8] {
    min-width: 1100px;
}

@media (max-width: 900px) {
    .itb-toolbar[b-e1uf9e3hb8] {
        flex-direction: column;
        align-items: stretch;
    }

    .itb-toolbar-right[b-e1uf9e3hb8] {
        display: flex;
        align-items: center;
    }

    .itb-search[b-e1uf9e3hb8] {
        flex: 1;
    }

    .bspl-footer[b-e1uf9e3hb8] {
        flex-wrap: wrap;
        gap: 8px;
    }
    /* drawer full-width so filters stay usable on phones */
    .mu-drawer[b-e1uf9e3hb8] {
        width: 100%;
        max-width: 360px;
    }
}
.itb-grid-table thead[b-e1uf9e3hb8],
.itb-grid-table thead tr[b-e1uf9e3hb8],
.itb-grid-table thead th[b-e1uf9e3hb8] {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
    /* ── Boxed header grid, matching the body's #eef0f2 lines ── */

    /* Row 1: box each group cell (OB / IN / OUT / CB) on all sides */
    .itb-grid-table thead tr:first-child th.itb-grp-hdr[b-e1uf9e3hb8] {
        border: 1px solid #eef0f2 !important;
    }

    /* Row 2: vertical dividers only at the group boundaries
   (Qty of each group starts a new group → left border) */
    .itb-grid-table thead tr:nth-child(2) th:nth-child(3n+1)[b-e1uf9e3hb8] {
        border-left: 1px solid #eef0f2 !important;
    }

    /* Close the right edge of the last group in row 2 */
    .itb-grid-table thead tr:nth-child(2) th:last-child[b-e1uf9e3hb8] {
        border-right: 1px solid #eef0f2 !important;
    }

    /* Bottom line under the whole header, separating it from the body */
    .itb-grid-table thead tr:nth-child(2) th[b-e1uf9e3hb8] {
        border-bottom: 1px solid #eef0f2 !important;
    }
/* /Components/Pages/Transactions/Inventory/OrderGrid.razor.rz.scp.css */
/* =====================================================================
   GAINS — OrderGrid.razor.css   (Transactions → Order grid, page-scoped)
   Mirrors ChallanGrid.razor.css's design language. Shared "mu-"/"bspl-"
   chrome lives in wwwroot/CSS/masters-forms.css; .t-page on the root
   wrapper already gives this table the transaction blue (#306B9C) header.
   Only Order-grid-specific rules live here. Blazor CSS isolation means
   the "db-*" rules that originate in Daybook.razor.css can't reach this
   page either, so — same as ChallanGrid — they're redeclared verbatim.
   ===================================================================== */

/* Same footer-pinning pattern used on BSPL / Daybook / Challan / Masters pages. */
.og-page[b-9nauk2vmio] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .og-page .mu-card[b-9nauk2vmio] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .og-page .mu-table-wrap[b-9nauk2vmio] {
        flex: 1;
        overflow: auto;
        min-height: 0;
    }

/* ── Combined top bar: Details/Summary tabs on the left, PUR/SLS toggle
   on the right — same bar, split with space-between so it reads as one
   toolbar instead of two stacked strips. ── */
.db-tabbar.og-tabbar[b-9nauk2vmio] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 12px;
}

.og-tabbar-left[b-9nauk2vmio],
.og-tabbar-right[b-9nauk2vmio] {
    display: flex;
    gap: 4px;
}

/* ── PUR / SLS toggle — same button language as db-tab, colored like the
   transaction-page blue accent instead of the green summary-tab accent
   so it reads as a distinct control group. ── */
.og-type-btn[b-9nauk2vmio] {
    background: #fff;
    color: #555;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    padding: 5px 18px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: all .12s;
}

    .og-type-btn:hover[b-9nauk2vmio] {
        background: #f5f5f5;
    }

    .og-type-btn.active[b-9nauk2vmio] {
        background: #306B9C;
        color: #fff;
        border-color: #306B9C;
    }

/* ── Table density/striping — copied verbatim from Daybook's/Challan's
   .db-table so this grid matches row height/spacing exactly. ── */
.db-table[b-9nauk2vmio] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .db-table th[b-9nauk2vmio] {
        text-align: left;
        padding: 8px 10px;
        border-bottom: 1px solid #ddd;
        position: sticky;
        top: 0;
        z-index: 3;
    }

    .db-table td[b-9nauk2vmio] {
        padding: 6px 10px;
        border-bottom: 1px solid #f2f2f2;
    }

    .db-table tfoot td[b-9nauk2vmio] {
        position: sticky;
        bottom: 0;
        z-index: 3;
        background: #e8e8e8;
    }

.db-row-even[b-9nauk2vmio] {
    background: #ffffff;
}

.db-row-odd[b-9nauk2vmio] {
    background: #f5fafa;
}

.db-table tbody tr:hover[b-9nauk2vmio] {
    background: #e8f5f0;
}

/* ── Sortable header — Tabler-icon arrows, same as Challan's mu-th-sort. ── */
.mu-th-sort[b-9nauk2vmio] {
    cursor: pointer;
    white-space: nowrap;
}

    .mu-th-sort i[b-9nauk2vmio] {
        margin-left: 4px;
        font-size: 12px;
        opacity: .6;
    }

/* ── Checkbox select column — matches Daybook's/Challan's .chk column ── */
.chk[b-9nauk2vmio] {
    width: 32px;
    text-align: center;
}

/* .mu-idx is already styled by masters-forms.css (blue, semi-bold) — not
   redeclared here, same as Challan. */

/* ── Top view tabs (Details / Summary) — copied verbatim from Daybook's/
   Challan's .db-tabbar/.db-tab. ── */
.db-tabbar[b-9nauk2vmio] {
    display: flex;
    gap: 4px;
    background: #fff;
    border-bottom: 1px solid #e7eaec;
    padding: 8px 0 6px 12px;
    flex-shrink: 0;
}

.db-tab[b-9nauk2vmio] {
    background: #fff;
    color: #555;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    padding: 5px 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: all .12s;
}

    .db-tab:hover[b-9nauk2vmio] {
        background: #f5f5f5;
    }

    .db-tab.active[b-9nauk2vmio] {
        background: #1ab394;
        color: #fff;
        border-color: #1ab394;
    }

/* ── Summary sub-tabs (Macro / Ledger / Item / Month) — copied verbatim
   from Daybook's/Challan's .db-summary-tabbar/.db-summary-tab. ── */
.db-summary-tabbar[b-9nauk2vmio] {
    display: flex;
    gap: 8px;
    padding: 10px 0 10px 12px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.db-summary-tab[b-9nauk2vmio] {
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
    padding: 5px 16px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

    .db-summary-tab.active[b-9nauk2vmio] {
        background: #16a085;
        color: #fff;
        border-color: #16a085;
    }

/* ── Qty / Amount metric toggle on the Month summary tab ── */
.og-metric-toggle[b-9nauk2vmio] {
    display: flex;
    gap: 6px;
    padding: 8px 0 8px 12px;
}

.og-metric-btn[b-9nauk2vmio] {
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
    padding: 5px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

    .og-metric-btn.active[b-9nauk2vmio] {
        background: #16a085;
        color: #fff;
        border-color: #16a085;
    }

/* ── Summary tables — table-layout:fixed so columns respect <colgroup>
   widths, same reasoning as Challan's ch-summary-* tables: sticky <th>
   doesn't reliably stay in sync with nth-child percentage widths, so
   colgroup decouples sizing from the header cell's own rendering. ── */
.og-summary-macro[b-9nauk2vmio], .og-summary-ledger[b-9nauk2vmio], .og-summary-item[b-9nauk2vmio] {
    table-layout: fixed;
}

    .og-summary-macro th[b-9nauk2vmio], .og-summary-macro td[b-9nauk2vmio],
    .og-summary-ledger th[b-9nauk2vmio], .og-summary-ledger td[b-9nauk2vmio],
    .og-summary-item th[b-9nauk2vmio], .og-summary-item td[b-9nauk2vmio] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Month-wise summary has a dynamic number of month columns, so it keeps
   auto table-layout instead of a fixed <colgroup>. */
.og-summary-month th[b-9nauk2vmio], .og-summary-month td[b-9nauk2vmio] {
    white-space: nowrap;
}

/* ── Drill-down link cells (Ledger name / Item name in summary tables) ── */
.og-drill[b-9nauk2vmio] {
    cursor: pointer;
}

    .og-drill:hover[b-9nauk2vmio] {
        text-decoration: underline;
    }

/* ── Numeric columns (Amount / Qty / #Items / summary totals) —
   right-aligned, tabular figures. The .db-table-th override is needed
   because ".db-table th" (two classes) otherwise beats plain ".og-num"
   (one class) on specificity, silently left-aligning header cells. ── */
.og-num[b-9nauk2vmio] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.db-table th.og-num[b-9nauk2vmio] {
    text-align: right;
}

/* ── Type badge (PO/SO/JWI/JWO, colored via GetTypeColor) ── */
.og-type-badge[b-9nauk2vmio] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ── Small colored square before OrderID, matching Daybook's/Challan's
   VNum swatch (colored by the same OType→color map used across Orders) ── */
.og-vnum-dot[b-9nauk2vmio] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 7px;
    vertical-align: middle;
}

.og-vnum-link[b-9nauk2vmio] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px 0 0;
    vertical-align: middle;
}

.og-party[b-9nauk2vmio] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.og-item-name[b-9nauk2vmio] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.og-quote-badge[b-9nauk2vmio] {
    background: #e67e22;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    letter-spacing: .3px;
    margin-left: 6px;
}

/* ── Grand total row — sticky to the bottom of the scroll area, same
   pattern used on BSPL/Daybook/Challan total rows. ── */
.og-total-row[b-9nauk2vmio] {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: #eef4fb;
    font-weight: 700;
    color: #1a2537;
}

    .og-total-row td[b-9nauk2vmio] {
        border-top: 2px solid #306B9C;
    }

/* ── "C" clear-dates button next to To Date — resets just the date range
   back to the FY default, without touching the rest of the filter form
   (that's what the drawer's "Clear Filter" button does). ── */
.og-date-clear-btn[b-9nauk2vmio] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    background: #fff;
    color: #555;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

    .og-date-clear-btn:hover[b-9nauk2vmio] {
        background: #f5f5f5;
        border-color: #1ab394;
        color: #1ab394;
    }

.og-inline-error[b-9nauk2vmio] {
    color: #b91c1c;
    font-size: 12.5px;
}

/* ── Footer pagination — Daybook's/Challan's numbered .db-pagination/
   .db-page-btn. ── */
.db-pagination[b-9nauk2vmio] {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 0;
}

.db-page-btn[b-9nauk2vmio] {
    background: #fff;
    border: 1px solid #ddd;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
}

    .db-page-btn.active[b-9nauk2vmio] {
        background: #16a085;
        color: #fff;
        border-color: #16a085;
    }

    .db-page-btn:disabled[b-9nauk2vmio] {
        opacity: .4;
        cursor: default;
    }

.bspl-footer-count[b-9nauk2vmio] {
    font-size: 12px;
    color: #666;
    margin-left: 4px;
}

@media (max-width: 767px) {
    .og-tabbar-right[b-9nauk2vmio] {
        gap: 4px;
    }

    .og-party[b-9nauk2vmio] {
        max-width: 140px;
    }
}
/* /Components/Pages/Transactions/Inventory/QItem.razor.rz.scp.css */
/* =====================================================================
   GAINS — QLedger.razor.css   (Transactions → Query Ledger, page-scoped)
   ONLY QL-specific additions. Base look (mu- grid system, uf- modal/
   inputs) comes from the global CSS/masters-forms.css.
   ===================================================================== */

/* =====================================================================
   Page-end footer pinning + sticky header/footer — see the CONSOLIDATED
   block at the very end of this file. Everything related to .mu-page /
   .ql-body / .mu-card / .mu-table-wrap sizing was previously scattered
   across several places in this file (with genuinely conflicting
   duplicate declarations for .ql-body and .mu-table-wrap found along the
   way) — it's now defined exactly once, at the end, so cascade order
   can't silently override it again.
   ===================================================================== */

/* mu-pager sits inside .bspl-footer-right now — undo the inherited
   margin-left:auto/font-size/color from common-page-chrome.css so the
   pagesize dropdown and page buttons keep their own sizing/typography. */
.bspl-footer-right[b-grsw0ihapw] {
    font-size: inherit;
    color: inherit;
}

.bspl-title-left h1[b-grsw0ihapw] {
    font-weight: 100;
    color: #1ab99a;
}

/* ── Page header: ledger name in teal, thin weight ── */
/*.ql-title {
    font-family: "Segoe UI Light", "Segoe UI", sans-serif;
    font-weight: 100 !important;
    color: #1ab99a;
    margin: 0;
}*/

/* Teal action button (FILTERS / GO / Search) — QL accent over mu-btn */
.ql-go[b-grsw0ihapw] {
    background: #1ab99a;
    color: #fff;
    border-color: #1ab99a;
}

    .ql-go:hover[b-grsw0ihapw] {
        background: #159a80;
    }

.ql-back[b-grsw0ihapw] {
    padding: 6px 10px;
    font-size: 12px;
}

/* ── Section buttons (Accounts / Summary Opp Ledger / Summary VType) ── */
.ql-sections[b-grsw0ihapw] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0px 0px 0px 10px;
}

.ql-section[b-grsw0ihapw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid #dde3ed;
    background: #fff;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 400;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .ql-section i[b-grsw0ihapw] {
        font-size: 15px;
    }

.ql-dollar[b-grsw0ihapw] {
    font-weight: 600;
    font-size: 13px;
}

.ql-section:hover[b-grsw0ihapw] {
    background: #f1f5f9;
    color: #1a2537;
}

.ql-section.active[b-grsw0ihapw] {
    background: #1ab99a;
    border-color: #1ab99a;
    color: #fff;
}

/* ── Layout: main card + balance panel ── */
.ql-body[b-grsw0ihapw] {
    display: flex;
    gap: 16px;
    align-items: stretch; /* card fills height — inner grid scrolls, page never does */
    overflow: hidden; /* containment: children scroll, not the page */
}

    .ql-body .mu-card[b-grsw0ihapw] {
        flex: 1 1 auto;
        min-width: 0;
    }

/* grid header = sidebar navy theme */
/* ── Grouping tabs (Trans / Day / Month / Quarter) ── */
.ql-tabs[b-grsw0ihapw] {
    display: flex;
    gap: 6px;
}

.ql-tab[b-grsw0ihapw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid #dde3ed;
    background: #fff;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 400;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .ql-tab:hover[b-grsw0ihapw] {
        background: #f1f5f9;
        color: #1a2537;
    }

    .ql-tab.active[b-grsw0ihapw] {
        background: #eafaf6;
        color: #1ab99a;
        border-color: #1ab99a;
    }

/* ── TRANS sub-tabs ── */
.ql-subtabs[b-grsw0ihapw] {
    display: flex;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcfe;
}

.ql-subtab[b-grsw0ihapw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 7px;
    border: 1px solid #dde3ed;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    color: #64748b;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .ql-subtab:hover:not(:disabled)[b-grsw0ihapw] {
        background: #f1f5f9;
        color: #1a2537;
    }

    .ql-subtab.active[b-grsw0ihapw] {
        color: #1ab99a;
        border-color: #1ab99a;
        background: #fff;
        font-weight: 600;
    }

    .ql-subtab:disabled[b-grsw0ihapw] {
        color: #cbd5e1;
        cursor: not-allowed;
        background: #f7f9fc;
    }

/* ── QL table cell extras (on top of mu-table) ── */
.mu-table thead th.num[b-grsw0ihapw] {
    text-align: right;
}

.mu-table td.num[b-grsw0ihapw] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mu-table td.cr[b-grsw0ihapw] {
    color: #800000;
}
/* Cr amounts in maroon */
.ql-drcr[b-grsw0ihapw] {
    width: 52px;
    font-size: 12px;
}

.mu-table thead th.ql-drcr[b-grsw0ihapw] {
    color: #fff;
}

.mu-table tbody td.ql-drcr[b-grsw0ihapw] {
    color: #64748b;
}

.ql-nowrap[b-grsw0ihapw] {
    white-space: nowrap;
}

.ql-narr[b-grsw0ihapw], .ql-ledger[b-grsw0ihapw] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ql-th-vnum[b-grsw0ihapw] {
    padding-left: 40px;
}

/* Totals footer */
.mu-table tfoot td[b-grsw0ihapw] {
    padding: 11px 14px;
    font-weight: 700;
    color: #1a2537;
    border-top: 2px solid #dde3ed;
    background: #fbfcfe;
    position: sticky;
    bottom: 0;
}

    .mu-table tfoot td.num[b-grsw0ihapw] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .mu-table tfoot td.cr[b-grsw0ihapw] {
        color: #800000;
    }

/* VNum cell: paperclip + voucher square + link */
.ql-vnum-cell[b-grsw0ihapw] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ql-clip[b-grsw0ihapw] {
    color: #64748b;
    font-size: 14px;
}

.ql-vsquare[b-grsw0ihapw] {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #1ab99a;
    border-radius: 2px;
    flex: 0 0 10px;
    cursor: pointer;
}

    .ql-vsquare:hover[b-grsw0ihapw] {
        opacity: 0.7;
    }

.ql-vnum[b-grsw0ihapw] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .ql-vnum:hover[b-grsw0ihapw] {
        text-decoration: underline;
    }

/* VType colored per row (inline color from API vColor) */
.ql-vtype[b-grsw0ihapw] {
    font-weight: 500;
    font-size: 13px;
}

/* Period link (Month/Day/Quarter drill-down) */
.ql-period-link[b-grsw0ihapw] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    font-weight: 500;
}

    .ql-period-link:hover[b-grsw0ihapw] {
        text-decoration: underline;
    }

/* Empty / error states */
.ql-empty-state[b-grsw0ihapw] {
    text-align: center;
    color: #64748b;
    padding: 48px 16px;
    font-size: 13.5px;
}

    .ql-empty-state p[b-grsw0ihapw] {
        margin: 4px 0;
    }

    .ql-empty-state strong[b-grsw0ihapw] {
        color: #1a2537;
    }

.ql-error[b-grsw0ihapw] {
    color: #dc2626;
}

/* ── Balance panel ── */
.ql-balance[b-grsw0ihapw] {
    flex: 0 0 300px;
    background: #fff;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
}

.ql-bal-hdr[b-grsw0ihapw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    color: #1a2537;
    border-bottom: 1px solid #eef2f7;
}

.ql-bal-toggle[b-grsw0ihapw] {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    display: inline-flex;
    padding: 2px;
}

    .ql-bal-toggle svg[b-grsw0ihapw] {
        width: 16px;
        height: 16px;
        transition: transform 0.15s;
    }

    .ql-bal-toggle:hover[b-grsw0ihapw] {
        color: #1a2537;
    }

.ql-bal-table[b-grsw0ihapw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .ql-bal-table th[b-grsw0ihapw] {
        text-align: left;
        font-weight: 700;
        font-size: 12px;
        color: #1a2537;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        padding: 10px 14px;
        border-bottom: 1px solid #eef2f7;
        background: #fbfcfe;
    }

        .ql-bal-table th.num[b-grsw0ihapw], .ql-bal-table td.num[b-grsw0ihapw] {
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

    .ql-bal-table td[b-grsw0ihapw] {
        padding: 10px 14px;
        color: #1a2537;
        border-bottom: 1px solid #eef2f7;
    }

        .ql-bal-table td.cr[b-grsw0ihapw] {
            color: #800000;
        }

.ql-bal-closing td[b-grsw0ihapw] {
    font-weight: 700;
}

/* ── Filter drawer — outer chrome (overlay/panel/header/body/footer) now
   uses the shared masters-forms.css classes (.mu-drawer-overlay,
   .mu-drawer, .mu-drawer-hdr, .mu-drawer-x, .mu-drawer-body,
   .mu-drawer-foot), same as BSPL/TB/MLedger. Only the field-level
   classes below (still nested inside .mu-drawer-body) remain page-local. ── */
.ql-drawer-section[b-grsw0ihapw] {
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #1ab99a;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ql-field[b-grsw0ihapw] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    color: #64748b;
}

.ql-led-row[b-grsw0ihapw] {
    display: flex;
    gap: 6px;
}

    .ql-led-row input[b-grsw0ihapw] {
        flex: 1;
        min-width: 0;
    }

.ql-led-pick[b-grsw0ihapw] {
    cursor: pointer;
    background: #fff;
}

.ql-led-btn[b-grsw0ihapw] {
    flex: 0 0 36px;
    border-radius: 8px;
    border: 1px solid #1a56a7;
    background: #1a56a7;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .ql-led-btn:hover[b-grsw0ihapw] {
        background: #0f3d82;
    }

.ql-check[b-grsw0ihapw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1a2537;
    cursor: pointer;
}

    .ql-check input[b-grsw0ihapw] {
        accent-color: #1ab99a;
    }

    .ql-check:has(input:disabled)[b-grsw0ihapw] {
        color: #94a3b8;
    }

/* ── Ledger picker popup: QL additions over uf-modal ── */
.ql-lp-overlay[b-grsw0ihapw] {
    z-index: 1300;
}
/* above the filter drawer (1200) */
.ql-lp-modal[b-grsw0ihapw] {
    max-width: 760px;
    max-height: 80vh;
}

.ql-modal-search[b-grsw0ihapw] {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcfe;
}

    .ql-modal-search .uf-input[b-grsw0ihapw] {
        flex: 1 1 auto;
        min-width: 0;
    }

.ql-lp-code[b-grsw0ihapw] {
    flex: 0 1 120px !important;
}

.ql-modal-body[b-grsw0ihapw] {
    flex: 1;
    overflow-y: auto;
}

.ql-lp-row[b-grsw0ihapw] {
    cursor: pointer;
}

.ql-lp-idx[b-grsw0ihapw] {
    width: 56px;
}

.mu-table tbody td.ql-lp-idx[b-grsw0ihapw] {
    color: #1a56a7;
    font-weight: 600;
}

.ql-lp-name[b-grsw0ihapw] {
    color: #1a56a7;
    font-weight: 500;
}

/* ── Voucher documents modal: QL additions over uf-modal ── */
.ql-docs-overlay[b-grsw0ihapw] {
    z-index: 1300;
}

.ql-docs-modal[b-grsw0ihapw] {
    max-width: 700px;
    max-height: 80vh;
}

/* ── Others Links → Docs grid ── */
.ql-docs-table td[b-grsw0ihapw] {
    vertical-align: middle;
}

.ql-doc-filechip[b-grsw0ihapw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #1a56a7;
    font-size: 13px;
    cursor: pointer;
}

    .ql-doc-filechip:hover[b-grsw0ihapw] {
        text-decoration: underline;
        background: #eef2f7;
    }

    .ql-doc-filechip i[b-grsw0ihapw] {
        font-size: 12px;
        color: #64748b;
    }

/* ── Others Links dropdown: DOCS/SCANS, MASTER, GRAPH, COF ── */
.ql-ol-item[b-grsw0ihapw] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
}

    .ql-ol-item i[b-grsw0ihapw] {
        width: 16px;
        text-align: center;
    }

.ql-ol-docs i[b-grsw0ihapw] {
    color: #b91c1c;
}

.ql-ol-master i[b-grsw0ihapw] {
    color: #92400e;
}

.ql-ol-graph i[b-grsw0ihapw] {
    color: #0d9488;
}

.ql-ol-cof[b-grsw0ihapw] {
    padding-left: 24px; /* aligns with the icon-less COF label under the iconed items above */
}

.ql-cof-status[b-grsw0ihapw] {
    padding: 8px 20px;
    font-size: 13px;
    color: #475569;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}

    .ql-cof-status.ql-error[b-grsw0ihapw] {
        color: #b91c1c;
        background: #fef2f2;
    }

/* ── Image lightbox (Others Links → Docs) ── */
.ql-lightbox-overlay[b-grsw0ihapw] {
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ql-lightbox-panel[b-grsw0ihapw] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: #000;
    border-radius: 8px;
    padding: 16px;
}

.ql-lightbox-img[b-grsw0ihapw] {
    display: block;
    margin: 0 auto;
    max-width: 86vw;
    max-height: 80vh;
    object-fit: contain;
}

.ql-lightbox-caption[b-grsw0ihapw] {
    margin-top: 8px;
    color: #fff;
    font-size: 13px;
    text-align: center;
}

.ql-lightbox-close[b-grsw0ihapw] {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #fff;
}

/* ── Responsive ── */
@media (max-width: 980px) {
    .ql-body[b-grsw0ihapw] {
        flex-direction: column;
    }

    /* Stacked layout: the grid card should fill nearly the whole screen —
       only a compact Balance strip sits below it, not an even split. */
    .ql-body .mu-card[b-grsw0ihapw] {
        flex: 1 1 auto;
        min-height: 75vh;
    }

    /* Balance panel becomes a compact strip under the grid — sized to its
       content with a capped height (scrolls internally if needed) instead
       of stretching to match the card. */
    .ql-balance[b-grsw0ihapw] {
        flex: 0 0 auto;
        width: 100%;
        max-height: 160px;
        overflow-y: auto;
    }
}


/* ── T Format / Compare split ── */
/* ── T Format / Compare split ── */
.ql-tformat[b-grsw0ihapw] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
}

/* base halves — T format height */
.ql-thalf[b-grsw0ihapw] {
    flex: 1 1 50%;
    min-width: 0;
    overflow: auto;
    max-height: 48vh;
}

/* compare shorter */
.ql-compare .ql-thalf[b-grsw0ihapw] {
    max-height: 68vh;
}

/* Outer grid wrapper must not double-scroll around the halves */
.mu-table-wrap:has(.ql-tformat)[b-grsw0ihapw] {
    max-height: none;
    overflow: visible;
}

.ql-tf-bar[b-grsw0ihapw] {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .ql-tf-bar.in[b-grsw0ihapw] {
        background: #3b5998;
    }
    /* blue IN bar */
    .ql-tf-bar.out[b-grsw0ihapw] {
        background: #6b1010;
    }

/* maroon OUT bar */
.ql-thalf-title[b-grsw0ihapw] {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: #1a2537;
    background: #fbfcfe;
    border-bottom: 1px solid #eef2f7;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

    .ql-thalf-title.cr[b-grsw0ihapw] {
        color: #800000;
    }
/* Compare/T-format halves use light headers like the old form.
   Column headers stick just below the IN/OUT bar (bar ≈ 37px). */
.ql-thalf .mu-table thead th[b-grsw0ihapw] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    color: #1a2537;
    border-bottom: 2px solid #eef2f7;
}

.ql-thalf .ql-tf-bar + table thead th[b-grsw0ihapw],
.ql-thalf .ql-thalf-title + table thead th[b-grsw0ihapw] {
    top: 37px;
}

.ql-thalf .mu-table thead th.ql-cmp-cr[b-grsw0ihapw], .ql-thalf .mu-table thead th.num.ql-cmp-cr[b-grsw0ihapw] {
    color: #800000;
}

/* Per-half pager under each T-format table */
.ql-tf-pager[b-grsw0ihapw] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px;
    background: #fbfcfe;
    border-top: 1px solid #eef2f7;
    min-height: 49px;
    box-sizing: border-box;
}
/* When a half is paged, its Total row sticks just above the pager */
.ql-thalf .ql-has-pager tfoot td[b-grsw0ihapw] {
    bottom: 49px;
}

/* ── Page footer: group path + export icons ── */
.ql-pgfoot[b-grsw0ihapw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    font-size: 12.5px;
    color: #1a56a7;
    flex-wrap: wrap;
}

.ql-pgfoot-path[b-grsw0ihapw] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Footer export/print icons now use the shared .bspl-foot-btn classes
   (matching BSPL exactly) instead of these page-local ones. */

/* =====================================================================
   RESPONSIVE PATCH — phones & small tablets
   ===================================================================== */

/* Ensure wide tables scroll inside card, never the page */
.mu-table-wrap[b-grsw0ihapw] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tablet & below (<= 980px) — existing block already stacks .ql-body */
@media (max-width: 980px) {
    /* Stack T-format / Compare halves */
    .ql-tformat[b-grsw0ihapw] {
        flex-direction: column;
    }

    .ql-thalf[b-grsw0ihapw],
    .ql-compare .ql-thalf[b-grsw0ihapw] {
        flex: 1 1 auto;
        width: 100%;
        max-height: none; /* let page scroll naturally when stacked */
    }
}

/* Phones (<= 640px) */
@media (max-width: 640px) {
    /* Tabs: allow wrap, bigger touch */
    .ql-tabs[b-grsw0ihapw] {
        flex-wrap: wrap;
    }

    .ql-tab[b-grsw0ihapw],
    .ql-subtab[b-grsw0ihapw],
    .ql-section[b-grsw0ihapw] {
        min-height: 44px;
        padding: 10px 14px;
    }

    .ql-subtabs[b-grsw0ihapw] {
        flex-wrap: wrap;
    }

    /* Stock/Month/Day/Ledger-wise grids: table-layout:fixed percentage
       columns look fine on desktop but crush every number into an
       unreadable sliver on a phone-width screen. Give each table a
       sensible min-width instead, so .mu-table-wrap scrolls horizontally
       (finger-scrollable) rather than distorting the columns.
       Widened further than the first pass — at 860px, a 6%-wide Qty/Weight
       column (~52px) minus its 20px of left+right padding left only ~32px
       for text, just barely too tight for a parenthesized 3-digit value
       like "(108)", so it visibly overflowed past the column into the
       next cell's separator line. More width + tighter padding (below)
       fixes that. */
    .ql-stock-table[b-grsw0ihapw] {
        min-width: 1000px;
    }

    .ql-monthly-table[b-grsw0ihapw] {
        min-width: 980px;
    }

    .ql-ledgersum-table[b-grsw0ihapw] {
        min-width: 700px;
    }

    /* Balance toggle & pager arrows: finger-size */
    .ql-bal-toggle[b-grsw0ihapw] {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        align-items: center;
    }

    .ql-tf-pager .mu-nav[b-grsw0ihapw] {
        min-width: 44px;
        min-height: 44px;
    }

    /* Ledger picker: full-width modal, search stacks */
    .ql-lp-modal[b-grsw0ihapw] {
        max-width: calc(100vw - 16px);
        max-height: 90vh;
    }

    .ql-modal-search[b-grsw0ihapw] {
        flex-wrap: wrap;
    }

        .ql-modal-search .uf-input[b-grsw0ihapw] {
            flex: 1 1 100%;
        }

    .ql-lp-code[b-grsw0ihapw] {
        flex: 1 1 100% !important;
    }

    /* Balance panel header title smaller page title */
    .ql-title[b-grsw0ihapw] {
        font-size: 20px;
    }

    /* Footer path truncates instead of pushing icons */
    .ql-pgfoot[b-grsw0ihapw] {
        gap: 8px;
    }

    .ql-pgfoot-path[b-grsw0ihapw] {
        flex: 1 1 100%;
    }
}

/* Ellipsis actually work on truncating cells */
.ql-narr[b-grsw0ihapw],
.ql-ledger[b-grsw0ihapw] {
    white-space: nowrap;
}

/* Added by Gaurav for padding fix*/
.gains-layout[b-grsw0ihapw] { /* wrapper holding sidebar + page */
    display: flex;
}

.gains-sidebar[b-grsw0ihapw] {
    flex: 0 0 auto; /* own width */
}

.gains-content[b-grsw0ihapw] { /* where @Body renders */
    flex: 1 1 auto;
    min-width: 0; /* IMPORTANT — lets tables shrink instead of overflow */
}

/* ── Print: clean grid-only output for the Print button ── */
@media print {
    .mu-hdr-actions[b-grsw0ihapw],
    .ql-sections[b-grsw0ihapw],
    .ql-subtabs[b-grsw0ihapw],
    .mu-toolbar[b-grsw0ihapw],
    .ql-drawer-overlay[b-grsw0ihapw],
    .uf-overlay[b-grsw0ihapw],
    .mu-foot[b-grsw0ihapw],
    .ql-tf-pager[b-grsw0ihapw],
    .bspl-foot-btn[b-grsw0ihapw],
    .ql-bal-toggle[b-grsw0ihapw] {
        display: none !important;
    }

    .ql-body[b-grsw0ihapw] {
        display: block;
    }

    .ql-balance[b-grsw0ihapw] {
        width: 100%;
        margin-top: 12px;
        page-break-inside: avoid;
    }

    .mu-table-wrap[b-grsw0ihapw], .ql-thalf[b-grsw0ihapw] {
        max-height: none !important;
        overflow: visible !important;
    }

    .mu-table thead th[b-grsw0ihapw] {
        position: static !important;
    }

    .mu-table tfoot td[b-grsw0ihapw], .ql-tf-bar[b-grsw0ihapw], .ql-thalf-title[b-grsw0ihapw] {
        position: static !important;
    }

    .mu-card[b-grsw0ihapw] {
        border: none;
        box-shadow: none;
    }
}


/* ── Fixed page footer (pager + export icons) ── */
.ql-footer-fixed[b-grsw0ihapw] {
    position: sticky;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid #dde3ed;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
}

/* Export/print icons use the shared .bspl-foot-btn classes (matching BSPL) —
   see common-page-chrome.css; nothing page-local needed here anymore. */

/* ── Others Links (section-bar dropdown) ── */
.ql-otherlinks[b-grsw0ihapw] {
    position: relative;
    display: inline-block;
}

.ql-otherlinks-btn[b-grsw0ihapw] {
    color: #1a56a7;
    border-color: #c3d4ec;
    text-transform: none;
}

.ql-otherlinks-menu[b-grsw0ihapw] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 200;
    min-width: 170px;
    background: #fff;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    display: flex;
    flex-direction: column;
    padding: 6px;
}

    .ql-otherlinks-menu button[b-grsw0ihapw] {
        background: none;
        border: none;
        text-align: left;
        padding: 8px 10px;
        font-size: 12.5px;
        color: #1a2537;
        border-radius: 6px;
        font-family: inherit;
        cursor: pointer;
    }

        .ql-otherlinks-menu button:hover:not(:disabled)[b-grsw0ihapw] {
            background: #f1f5f9;
        }

        .ql-otherlinks-menu button:disabled[b-grsw0ihapw] {
            color: #94a3b8;
            cursor: not-allowed;
        }


/* =====================================================================
   CONSOLIDATED — page pinning + sticky header/footer (single source of
   truth; everything else in this file that touches .mu-page / .ql-body /
   .mu-card / .mu-table-wrap sizing was left alone above, but THIS block
   is last in the file, so it wins any cascade conflict without needing
   to hunt down every prior declaration).
   ===================================================================== */

/* .mu-page: full-height flex column. height:100% depends on every
   ancestor up to the viewport having a definite height; min-height:100vh
   is a hard floor that works regardless of whether that chain holds. */
.mu-page[b-grsw0ihapw] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
}

/* .ql-body: fills whatever's left after the title block + section/mode
   tabs. min-height:0 is required for a flex child to be allowed to
   shrink below its content size — without it, a tall table can force
   .ql-body past .mu-page's height instead of scrolling internally. */
.ql-body[b-grsw0ihapw] {
    flex: 1;
    min-height: 0;
}

    .ql-body .mu-card[b-grsw0ihapw] {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
    }

    /* .mu-table-wrap is the ONLY element that scrolls vertically. Header and
   footer stick to its top/bottom (below) instead of scrolling with it. */
    .ql-body .mu-table-wrap[b-grsw0ihapw] {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow: auto;
    }

/* ql-balance sizes to its own content — never scrolls, never gets capped. */
/*.ql-balance {
    max-height: none;
    overflow: visible;
}*/

/* balance panel: content height only, don't stretch with the card */
.ql-balance[b-grsw0ihapw] {
    align-self: flex-start;
    max-height: 100%;
    overflow: auto;
}
/* Sticky header — was missing entirely, which is why a long table's
   column headers scrolled away with the rows instead of staying pinned
   at the top of .mu-table-wrap. Needs an opaque background since content
   scrolls underneath it. */
.mu-table thead th[b-grsw0ihapw] {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Sticky totals row — pins to the bottom of .mu-table-wrap regardless of
   how many rows are above it, instead of drifting down the page as more
   rows are added. (Was already sticky, reinforced here with a guaranteed
   z-index + opaque background so scrolling rows can't visually bleed
   through or paint over it.) */
.mu-table tfoot td[b-grsw0ihapw] {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: #fbfcfe;
}

/* Footer is the last flex child of .mu-page → always at the true bottom */
.ql-footer-fixed[b-grsw0ihapw] {
    flex-shrink: 0;
}

/* T-format / Compare halves: fill the card instead of viewport-relative heights */
.mu-table-wrap:has(.ql-tformat)[b-grsw0ihapw] {
    overflow: hidden;
}

.ql-tformat[b-grsw0ihapw] {
    height: 100%;
    box-sizing: border-box;
}

    .ql-tformat .ql-thalf[b-grsw0ihapw] {
        max-height: 100%;
    }

.ql-lnk-parent td[b-grsw0ihapw] {
    font-weight: 600;
    background: #fbfcfe;
}

.ql-lnk-child td[b-grsw0ihapw] {
    color: #475569;
}

/* ═══════════════════════════════════════════════════════════════════
   Clear-date icon button (To Date row) — plain <img> reusing the
   GreenCalendarPicker's class names, but that component's own scoped
   CSS doesn't apply here, so it needs its own sizing to match the
   calendar trigger button next to it in the From Date row.
   (Same block as DocumentGrid.razor.css / BSPL.razor.css / ITB.razor.css.)
   ═══════════════════════════════════════════════════════════════════ */
.gcp-trigger[b-grsw0ihapw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .gcp-trigger:hover[b-grsw0ihapw] {
        background: #f5f5f5;
        border-color: #bbb;
    }

.gcp-icon[b-grsw0ihapw] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

/* ── Stock/Trans (api/QI/trial/detail) — numeric column alignment.
   Mirrors MItem.razor.css/MLedger.razor.css: shared "mu-" grid styles live
   in wwwroot/CSS/masters-forms.css, only this small page-specific rule
   (which every "mu-" grid page defines locally) is needed here. ── */
.mu-table thead th.mu-th-num[b-grsw0ihapw] {
    text-align: right;
}

.mu-table tbody td.mu-num[b-grsw0ihapw] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Stock grid (Inward/Outward/Closing) — group + sub headers centered
   instead of right-aligned; body figures stay right-aligned (.num) as
   everywhere else in the app. Same specificity as the master-css .num
   header rule, so it must come after it in source order to win. ── */
.ql-stock-table thead th.num[b-grsw0ihapw],
.ql-monthly-table thead th.num[b-grsw0ihapw] {
    text-align: center;
}

/* ── Totals row pinned to the true bottom of the grid, always —
   not just while scrolled there.
   position:sticky (the master rule + the two-row top-offset rule this
   replaces) only stops an element from scrolling OUT of view; it can't
   pull the footer down to fill empty space when there are only a few
   rows and the table is shorter than .mu-table-wrap. Fix: make the grid
   itself a flex column — thead/tfoot become fixed-size flex items and
   ONLY tbody scrolls, so tfoot always sits flush at the bottom of the
   wrapper regardless of row count. Scoped to .ql-stock-table only so
   other "mu-" grids elsewhere keep the plain sticky behavior.
   Splitting thead/tbody/tfoot into independent table boxes means they no
   longer share one column-width computation, so widths are pinned
   explicitly below to keep the three sections lined up. ── */
/* overflow-y hidden (tbody handles its own vertical scroll internally,
   see below) but overflow-x stays scrollable — needed so the mobile rule
   further down (min-width on narrow screens) can actually produce a
   horizontal scrollbar instead of squashing every column unreadably. */
.mu-table-wrap:has(.ql-stock-table)[b-grsw0ihapw] {
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ql-stock-table[b-grsw0ihapw] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .ql-stock-table thead[b-grsw0ihapw],
    .ql-stock-table tfoot[b-grsw0ihapw] {
        display: table;
        width: 100%;
        table-layout: fixed;
        flex: 0 0 auto;
    }

    .ql-stock-table thead th[b-grsw0ihapw],
    .ql-stock-table tfoot td[b-grsw0ihapw] {
        position: static;
    }

    .ql-stock-table tbody[b-grsw0ihapw] {
        display: block;
        flex: 1 1 auto;
        overflow-y: auto;
    }

        .ql-stock-table tbody tr[b-grsw0ihapw] {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

/* ── Month tab grid (api/QI/trial/monthly) — # · Date · OB/IN/OUT/CB groups,
   14 columns. No tfoot needed (the endpoint returns a plain array, no
   totals), so this stays a single plain <table> — no flex/scroll-split
   trick required here.
   Column widths come from the <colgroup>/<col> tags in the markup instead
   of per-cell CSS: with table-layout:fixed, a table only looks at its
   FIRST row to size columns, and our first header row uses colspan="3"
   for the OB/IN/OUT/CB group cells, so the second header row's per-column
   widths were being ignored (columns fell back to equal thirds instead of
   9%/6%/7%), which visibly misaligned the header from the body below it.
   <col> widths aren't subject to that "first row" rule, so they're the
   reliable fix, and they don't require restructuring the table itself. */
.ql-monthly-table[b-grsw0ihapw] {
    table-layout: fixed;
}

/* Shorter row height than the default .mu-table padding (10px 14px). */
.ql-monthly-table thead th[b-grsw0ihapw],
.ql-monthly-table tbody td[b-grsw0ihapw] {
    padding: 4px 10px;
}

/* Qty/Weight, Rate, Value — right-aligned (overrides the center-align
   these sub-headers inherit from the group-label row rule; data cells
   already right-align via the app-wide .mu-table td.num default). The
   OB/IN/OUT/CB group-label row stays centered. */
.ql-monthly-table thead tr:last-child th.num[b-grsw0ihapw] {
    text-align: right;
}

.ql-monthly-table thead tr:first-child th[b-grsw0ihapw] {
    top: 0;
    z-index: 2;
}

.ql-monthly-table thead tr:last-child th[b-grsw0ihapw] {
    top: 26px; /* matches row1's now-shorter height (4px 10px padding) */
    z-index: 1;
}

/* Vertical column separators — silver lines, only at group boundaries
   (after #, after Date, after each group's Value column) — not after the
   Qty/Weight or Rate columns inside a group. */
.ql-monthly-table thead tr:first-child th[b-grsw0ihapw] {
    border-right: 1px solid silver; /* every row1 cell IS a group (or #/Date), so its right edge is always a group boundary */
}

    .ql-monthly-table thead tr:first-child th:last-child[b-grsw0ihapw] {
        border-right: none;
    }

.ql-monthly-table thead tr:last-child th:nth-child(3)[b-grsw0ihapw],
.ql-monthly-table thead tr:last-child th:nth-child(6)[b-grsw0ihapw],
.ql-monthly-table thead tr:last-child th:nth-child(9)[b-grsw0ihapw] {
    border-right: 1px solid silver;
}

.ql-monthly-table tbody td:nth-child(1)[b-grsw0ihapw],
.ql-monthly-table tbody td:nth-child(2)[b-grsw0ihapw],
.ql-monthly-table tbody td:nth-child(5)[b-grsw0ihapw],
.ql-monthly-table tbody td:nth-child(8)[b-grsw0ihapw],
.ql-monthly-table tbody td:nth-child(11)[b-grsw0ihapw] {
    border-right: 1px solid silver;
}

/* ── Ledger wise tab grid (api/QI/trial/ledger-summary) — # · Party/Ledger ·
   IN/OUT groups, 8 columns. No tfoot (plain array, no totals). Same
   <colgroup>-driven width approach as .ql-monthly-table, for the same
   "table-layout:fixed only reads the first header row" reason. ── */
.ql-ledgersum-table[b-grsw0ihapw] {
    table-layout: fixed;
}

.ql-ledgersum-table thead th.num[b-grsw0ihapw] {
    text-align: center; /* IN / OUT group labels */
}

.ql-ledgersum-table thead tr:last-child th.num[b-grsw0ihapw] {
    text-align: right; /* Qty/Weight, Rate, Value sub-headers */
}

/* Party/Ledger names can be long — let them wrap instead of the app-wide
   nowrap default (.mu-table tbody td), matching the reference layout. */
.ql-ledgersum-table tbody td.ql-ledger-name[b-grsw0ihapw] {
    white-space: normal;
}

.ql-ledgersum-table thead th[b-grsw0ihapw],
.ql-ledgersum-table tbody td[b-grsw0ihapw] {
    padding: 4px 10px;
}

.ql-ledgersum-table thead tr:first-child th[b-grsw0ihapw] {
    top: 0;
    z-index: 2;
}

.ql-ledgersum-table thead tr:last-child th[b-grsw0ihapw] {
    top: 26px;
    z-index: 1;
}

/* Vertical column separators — silver lines, only at group boundaries. */
.ql-ledgersum-table thead tr:first-child th[b-grsw0ihapw] {
    border-right: 1px solid silver;
}

    .ql-ledgersum-table thead tr:first-child th:last-child[b-grsw0ihapw] {
        border-right: none;
    }

.ql-ledgersum-table thead tr:last-child th:nth-child(3)[b-grsw0ihapw] {
    border-right: 1px solid silver;
}

.ql-ledgersum-table tbody td:nth-child(1)[b-grsw0ihapw],
.ql-ledgersum-table tbody td:nth-child(2)[b-grsw0ihapw],
.ql-ledgersum-table tbody td:nth-child(5)[b-grsw0ihapw] {
    border-right: 1px solid silver;
}

/* Explicit column widths (12 visual columns: # · Date/Party · VNum/VType ·
   Inward Qty/Rate/Amt · Outward Qty/Rate/Amt · Closing Qty/Rate/Amt) kept
   identical across thead/tbody/tfoot — a single native <table> lines these
   up automatically; three independent table boxes don't. */
.ql-stock-table thead tr:first-child th:nth-child(1)[b-grsw0ihapw],
.ql-stock-table tbody td:nth-child(1)[b-grsw0ihapw] {
    width: 3%;
}

.ql-stock-table thead tr:first-child th:nth-child(2)[b-grsw0ihapw],
.ql-stock-table tbody td:nth-child(2)[b-grsw0ihapw] {
    width: 18%;
}

.ql-stock-table thead tr:first-child th:nth-child(3)[b-grsw0ihapw],
.ql-stock-table tbody td:nth-child(3)[b-grsw0ihapw] {
    width: 10%;
}

.ql-stock-table thead tr:first-child th:nth-child(4)[b-grsw0ihapw] {
    width: 23%; /* Inward group = 8% + 7% + 8% */
}

.ql-stock-table thead tr:last-child th:nth-child(1)[b-grsw0ihapw],
.ql-stock-table tbody td:nth-child(4)[b-grsw0ihapw] {
    width: 8%;
}

.ql-stock-table thead tr:last-child th:nth-child(2)[b-grsw0ihapw],
.ql-stock-table tbody td:nth-child(5)[b-grsw0ihapw] {
    width: 7%;
}

.ql-stock-table thead tr:last-child th:nth-child(3)[b-grsw0ihapw],
.ql-stock-table tbody td:nth-child(6)[b-grsw0ihapw] {
    width: 8%;
}

.ql-stock-table thead tr:first-child th:nth-child(5)[b-grsw0ihapw] {
    width: 23%; /* Outward group = 8% + 7% + 8% */
}

.ql-stock-table thead tr:last-child th:nth-child(4)[b-grsw0ihapw],
.ql-stock-table tbody td:nth-child(7)[b-grsw0ihapw] {
    width: 8%;
}

.ql-stock-table thead tr:last-child th:nth-child(5)[b-grsw0ihapw],
.ql-stock-table tbody td:nth-child(8)[b-grsw0ihapw] {
    width: 7%;
}

.ql-stock-table thead tr:last-child th:nth-child(6)[b-grsw0ihapw],
.ql-stock-table tbody td:nth-child(9)[b-grsw0ihapw] {
    width: 8%;
}

.ql-stock-table thead tr:first-child th:nth-child(6)[b-grsw0ihapw] {
    width: 23%; /* Closing group = 8% + 7% + 8% */
}

.ql-stock-table thead tr:last-child th:nth-child(7)[b-grsw0ihapw],
.ql-stock-table tbody td:nth-child(10)[b-grsw0ihapw] {
    width: 8%;
}

.ql-stock-table thead tr:last-child th:nth-child(8)[b-grsw0ihapw],
.ql-stock-table tbody td:nth-child(11)[b-grsw0ihapw] {
    width: 7%;
}

.ql-stock-table thead tr:last-child th:nth-child(9)[b-grsw0ihapw],
.ql-stock-table tbody td:nth-child(12)[b-grsw0ihapw] {
    width: 8%;
}

/* Totals row: 1st cell spans columns 1-3 (colspan="3" = 3%+18%+10% = 31%),
   the remaining 9 cells match columns 4-12 one-for-one. */
.ql-stock-table tfoot td:nth-child(1)[b-grsw0ihapw] {
    width: 31%;
}

.ql-stock-table tfoot td:nth-child(2)[b-grsw0ihapw] {
    width: 8%;
}

.ql-stock-table tfoot td:nth-child(3)[b-grsw0ihapw] {
    width: 7%;
}

.ql-stock-table tfoot td:nth-child(4)[b-grsw0ihapw] {
    width: 8%;
}

.ql-stock-table tfoot td:nth-child(5)[b-grsw0ihapw] {
    width: 8%;
}

.ql-stock-table tfoot td:nth-child(6)[b-grsw0ihapw] {
    width: 7%;
}

.ql-stock-table tfoot td:nth-child(7)[b-grsw0ihapw] {
    width: 8%;
}

.ql-stock-table tfoot td:nth-child(8)[b-grsw0ihapw] {
    width: 8%;
}

.ql-stock-table tfoot td:nth-child(9)[b-grsw0ihapw] {
    width: 7%;
}

.ql-stock-table tfoot td:nth-child(10)[b-grsw0ihapw] {
    width: 8%;
}

/* =====================================================================
   Mobile stacked layout — grid gets nearly the whole screen, Balance
   becomes a short strip underneath. Repeated here (last in the file) so
   it wins over the earlier CONSOLIDATED block's ".ql-body .mu-card
   { min-height: 0 }", which has the same selector specificity and would
   otherwise cancel the min-height set inside the @media (max-width:980px)
   block above, since it comes later in the file than that block.

   Previous attempt made the Balance panel disappear entirely: giving
   .mu-card a hard min-height:75vh while .ql-body still had its base
   overflow:hidden meant that once .mu-card + .ql-balance's combined
   height exceeded whatever box height .ql-body actually resolved to,
   the overflow (i.e. .ql-balance, since it comes second) was clipped
   away instead of becoming scrollable — invisible, not just short.
   Fix: .mu-card gets a FIXED height (flex: 0 0 75vh, not min-height, so
   it can't be stretched further by leftover flex-grow) and .ql-body
   itself becomes vertically scrollable, so if the two stacked panels
   together are taller than the screen, the rest is reached by
   scrolling instead of being cut off. ── */
@media (max-width: 980px) {
    .ql-body[b-grsw0ihapw] {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .ql-body .mu-card[b-grsw0ihapw] {
        flex: 0 0 75vh;
        min-height: 0;
    }

    .ql-balance[b-grsw0ihapw] {
        flex: 0 0 auto;
        max-height: 160px;
        overflow-y: auto;
    }
}

/* Tighter cell padding on phones for the Month/Day/Ledger-wise grids, to
   reclaim horizontal room for the wider min-width above. Placed here
   (true end of file) rather than in the earlier @media(max-width:640px)
   block, because the non-media "Shorter row height" rule
   (.ql-monthly-table thead th, tbody td { padding: 4px 10px }) declared
   further up the file has equal selector specificity and — appearing
   later than that earlier media block — was silently winning and
   canceling a tighter padding value set there. */
/* ── Voucher report popup — opened from the green VNum dot in the Stock/Trans
   grid. Same fixed-overlay + centered-panel convention as .mu-drawer-overlay,
   just centered instead of a side drawer since VHtml renders a full report,
   not a short form. ── */
.ql-voucher-modal-overlay[b-grsw0ihapw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1000;
}

.ql-voucher-modal[b-grsw0ihapw] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 90vw;
    max-width: 1100px;
    max-height: 88vh;
    overflow: auto;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    z-index: 1001;
}

.ql-voucher-modal-hdr[b-grsw0ihapw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    font-weight: 600;
    color: #16a085;
}

.ql-voucher-modal-x[b-grsw0ihapw] {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #888;
}

.ql-voucher-modal-body[b-grsw0ihapw] {
    padding: 14px 16px;
}

@media (max-width: 640px) {
    .ql-monthly-table thead th[b-grsw0ihapw],
    .ql-monthly-table tbody td[b-grsw0ihapw],
    .ql-ledgersum-table thead th[b-grsw0ihapw],
    .ql-ledgersum-table tbody td[b-grsw0ihapw] {
        padding: 4px 6px;
    }
}
/* /Components/Pages/Transactions/QG.razor.rz.scp.css */
/* =====================================================================
   GAINS — QG.razor.css   (Transactions → Query Group, page-scoped)
   Same UI template as QLedger.razor.css. ONLY QG-specific additions.
   Base look (mu- grid system, uf- modal/inputs) comes from the global
   CSS/masters-forms.css.
   ===================================================================== */

/* ── Base font / colour — matches BSPL.razor.css ── */
.qg-page[b-bgzookcsj0] {
    font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    color: #333;
}

/* ── Page header: group name in teal, thin weight ── */
.qg-title[b-bgzookcsj0] {
    font-size: 20px;
    font-weight: 100 !important;
    color: #1ab394;
    margin: 0;
}

.qg-title-row[b-bgzookcsj0] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.qg-title-cb[b-bgzookcsj0] {
    font-size: 13px;
    font-weight: 700;
    color: #1a2537;
    white-space: nowrap;
}

.qg-title-more[b-bgzookcsj0] {
    border: none;
    background: none;
    color: #64748b;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}

.qg-title-more:hover[b-bgzookcsj0] {
    color: #1a2537;
}

/* ── "..." balance popup ── */
.qg-bal-overlay[b-bgzookcsj0] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
}

.qg-bal-popup[b-bgzookcsj0] {
    background: #fff;
    border-radius: 8px;
    width: 380px;
    max-width: 92vw;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.qg-bal-popup-hdr[b-bgzookcsj0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eef2f7;
    color: #1ab394;
    font-size: 17px;
    font-weight: 600;
}

.qg-bal-popup-x[b-bgzookcsj0] {
    border: none;
    background: none;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.qg-bal-popup-table[b-bgzookcsj0] {
    width: 100%;
    border-collapse: collapse;
}

.qg-bal-popup-table th[b-bgzookcsj0],
.qg-bal-popup-table td[b-bgzookcsj0] {
    padding: 10px 18px;
    font-size: 13.5px;
}

.qg-bal-popup-table thead th[b-bgzookcsj0] {
    text-align: left;
    font-weight: 700;
    color: #1a2537;
}

.qg-bal-popup-table th.num[b-bgzookcsj0],
.qg-bal-popup-table td.num[b-bgzookcsj0] {
    text-align: right;
}

.qg-bal-popup-table td.cr[b-bgzookcsj0] {
    color: #800000;
}

.qg-bal-popup-table tbody tr:nth-child(odd)[b-bgzookcsj0] {
    background: #f8fafc;
}

.qg-bal-popup-closing td[b-bgzookcsj0] {
    font-weight: 600;
    border-top: 1px solid #eef2f7;
}

/* GO button now uses shared mu-btn.primary from masters-forms.css */

/* ── Section buttons (Accounts / Summary) ── */
.qg-sections[b-bgzookcsj0] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.qg-section[b-bgzookcsj0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid #dde3ed;
    background: #fff;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 400;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.qg-dollar[b-bgzookcsj0] {
    font-weight: 600;
    font-size: 13px;
}

.qg-section:hover[b-bgzookcsj0] {
    background: #f1f5f9;
    color: #1a2537;
}

.qg-section.active[b-bgzookcsj0] {
    background: #1ab394;
    border-color: #1ab394;
    color: #fff;
}

/* ── Layout: main card + balance panel ── */
.qg-body[b-bgzookcsj0] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

    .qg-body .mu-card[b-bgzookcsj0] {
        flex: 1 1 auto;
        min-width: 0;
    }

/* ── Grouping tabs (Trans / Day / Month / Ledger / Group) ── */
.qg-tabs[b-bgzookcsj0] {
    display: flex;
    gap: 6px;
}

.qg-tab[b-bgzookcsj0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid #dde3ed;
    background: #fff;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 400;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .qg-tab:hover[b-bgzookcsj0] {
        background: #f1f5f9;
        color: #1a2537;
    }

    .qg-tab.active[b-bgzookcsj0] {
        background: #fff;
        color: #1a56a7;
        border-color: #1a56a7;
    }

/* ── QG table cell extras (on top of mu-table) ── */
.mu-table thead th.num[b-bgzookcsj0] {
    text-align: right;
}

.mu-table td.num[b-bgzookcsj0] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mu-table td.cr[b-bgzookcsj0] {
    color: #800000;
}
/* Cr amounts in maroon */

.mu-table td.qg-pivot-neg[b-bgzookcsj0] {
    color: #800000;
}
/* Negative pivot cell (any month column) — same maroon as old ASPX pivot grid */

.qg-pivot-table th[b-bgzookcsj0],
.qg-pivot-table td[b-bgzookcsj0] {
    white-space: nowrap;
}

.qg-drcr[b-bgzookcsj0] {
    width: 52px;
    color: #64748b;
    font-size: 12px;
}

/* Amount + direction merged into one cell (Day tab's OB/NettTrans/CB) —
   no separate "Dr/Cr" header column, direction just trails the number. */
.qg-drcr-inline[b-bgzookcsj0] {
    color: #64748b;
    font-size: 12px;
    margin-left: 3px;
}

/* ── Summary section (Type / Ledger / Group) ── */
.qg-summary-banner[b-bgzookcsj0] {
    background: #f1f4f8;
    text-align: center;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: #1a2537;
    padding: 8px 0;
}

/* Group sub-tab's tree branch rows (parentGroup/group nodes, no ledId) —
   bold, dark text, distinct from leaf ledger rows (.qg-ledger, blue link). */
.qg-summary-groupnode[b-bgzookcsj0] {
    font-weight: 600;
    color: #1a2537;
}

.qg-nowrap[b-bgzookcsj0] {
    white-space: nowrap;
}

.qg-narr[b-bgzookcsj0] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Name column — Trans' Group/Opposite Ledger, Ledger tab's Ledger name,
   Group tab's Group name — all share this one class, so all three views
   render the same blue link colour instead of drifting apart. */
.qg-ledger[b-bgzookcsj0] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1a56a7;
    font-weight: 500;
}

/* Ledger drill-down: only clickable in Hide CB=0 / Show Only Transaction
   focus mode (see CanDrillLedger) — plain cursor/underline cue, no new color. */
.qg-clickable[b-bgzookcsj0] {
    cursor: pointer;
}

.qg-clickable:hover[b-bgzookcsj0] {
    text-decoration: underline;
}

.qg-drill-banner[b-bgzookcsj0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: #eef4fc;
    border: 1px solid #cfe0f5;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #1a2537;
}

.qg-drill-clear[b-bgzookcsj0] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: #1a56a7;
    font: inherit;
}

.qg-drill-clear:hover[b-bgzookcsj0] {
    text-decoration: underline;
}

/* VNum cell: green square + link-styled number, matches QLedger's ql-vnum-cell */
.qg-vnum-cell[b-bgzookcsj0] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.qg-vsquare[b-bgzookcsj0] {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #1ab394;
    border-radius: 2px;
    flex: 0 0 10px;
}

.qg-vnum[b-bgzookcsj0] {
    color: #1a56a7;
    font-weight: 500;
}

/* Type badge — colour set inline per-row via TypeColor() */
.qg-vtype[b-bgzookcsj0] {
    font-weight: 600;
    font-size: 13px;
}

/* Totals footer */
.mu-table tfoot td[b-bgzookcsj0] {
    padding: 11px 14px;
    font-weight: 700;
    color: #1a2537;
    border-top: 2px solid #dde3ed;
    background: #fbfcfe;
    position: sticky;
    bottom: 0;
}

    .mu-table tfoot td.num[b-bgzookcsj0] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .mu-table tfoot td.cr[b-bgzookcsj0] {
        color: #800000;
    }

/* Period link (Month drill-down) */
.qg-period-link[b-bgzookcsj0] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    font-weight: 500;
}

    .qg-period-link:hover[b-bgzookcsj0] {
        text-decoration: underline;
    }

/* Empty / error states */
.qg-empty-state[b-bgzookcsj0] {
    text-align: center;
    color: #64748b;
    padding: 48px 16px;
    font-size: 13.5px;
}

    .qg-empty-state p[b-bgzookcsj0] {
        margin: 4px 0;
    }

    .qg-empty-state strong[b-bgzookcsj0] {
        color: #1a2537;
    }

.qg-error[b-bgzookcsj0] {
    color: #dc2626;
}

.qg-field-error[b-bgzookcsj0] {
    color: #dc2626;
    font-size: 11.5px;
}

/* ── Balance panel ── */
.qg-balance[b-bgzookcsj0] {
    flex: 0 0 300px;
    background: #fff;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
}

.qg-bal-hdr[b-bgzookcsj0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    color: #1a2537;
    border-bottom: 1px solid #eef2f7;
}

.qg-bal-toggle[b-bgzookcsj0] {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    display: inline-flex;
    padding: 2px;
}

    .qg-bal-toggle svg[b-bgzookcsj0] {
        width: 16px;
        height: 16px;
        transition: transform 0.15s;
    }

    .qg-bal-toggle:hover[b-bgzookcsj0] {
        color: #1a2537;
    }

.qg-bal-table[b-bgzookcsj0] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .qg-bal-table th[b-bgzookcsj0] {
        text-align: left;
        font-weight: 700;
        font-size: 12px;
        color: #1a2537;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        padding: 10px 14px;
        border-bottom: 1px solid #eef2f7;
        background: #fbfcfe;
    }

        .qg-bal-table th.num[b-bgzookcsj0], .qg-bal-table td.num[b-bgzookcsj0] {
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

    .qg-bal-table td[b-bgzookcsj0] {
        padding: 10px 14px;
        color: #1a2537;
        border-bottom: 1px solid #eef2f7;
    }

        .qg-bal-table td.cr[b-bgzookcsj0] {
            color: #800000;
        }

.qg-bal-closing td[b-bgzookcsj0] {
    font-weight: 700;
}

/* Filter drawer chrome (overlay, panel, header, close button, body, footer)
   now uses shared .mu-drawer / .mu-drawer-overlay / .mu-drawer-hdr /
   .mu-drawer-x / .mu-drawer-body / .mu-drawer-foot from masters-forms.css,
   same as QLedger. Only field-level styling below remains page-specific. */
.qg-drawer-section[b-bgzookcsj0] {
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #1ab394;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.qg-goto-item[b-bgzookcsj0] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #1a2537;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

    .qg-goto-item:hover[b-bgzookcsj0] {
        background: #f1f4f8;
    }

    .qg-goto-item i[b-bgzookcsj0] {
        color: #64748b;
        width: 16px;
    }

.qg-drawer-divider[b-bgzookcsj0] {
    height: 1px;
    background: #eef2f7;
    margin: 4px 0;
}

/* Date/Group fields now use the shared .mu-fld class from masters-forms.css
   (same pattern as MLedger's filter drawer), not a page-specific rule. */

.qg-led-row[b-bgzookcsj0] {
    display: flex;
    gap: 6px;
}

    .qg-led-row input[b-bgzookcsj0] {
        flex: 1;
        min-width: 0;
    }

.qg-led-pick[b-bgzookcsj0] {
    cursor: pointer;
    background: #fff;
}

/* Group field rendered as a fake dropdown, opens the picker popup */
.qg-led-pick-wrap[b-bgzookcsj0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    background: #fff;
    color: #1a2537;
    font-size: 13px;
    cursor: pointer;
}

    .qg-led-pick-wrap svg[b-bgzookcsj0] {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        color: #64748b;
    }

.qg-led-btn[b-bgzookcsj0] {
    align-self: flex-start;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #1a56a7;
    background: #1a56a7;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .qg-led-btn:hover[b-bgzookcsj0] {
        background: #0f3d82;
    }

    .qg-led-btn:disabled[b-bgzookcsj0] {
        background: #1a56a7;
        opacity: 0.6;
        cursor: not-allowed;
    }

.qg-check[b-bgzookcsj0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1a2537;
    cursor: pointer;
}

    .qg-check input[b-bgzookcsj0] {
        accent-color: #1ab394;
    }

    .qg-check:has(input:disabled)[b-bgzookcsj0] {
        color: #94a3b8;
    }

.qg-check-row[b-bgzookcsj0] {
    display: flex;
    gap: 24px;
}

.qg-radio-row[b-bgzookcsj0] {
    display: flex;
    gap: 20px;
    padding-left: 22px;
}

.qg-radio[b-bgzookcsj0] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #1a2537;
    cursor: pointer;
}

    .qg-radio input[b-bgzookcsj0] {
        accent-color: #1ab394;
    }

    .qg-radio:has(input:disabled)[b-bgzookcsj0] {
        color: #94a3b8;
        cursor: not-allowed;
    }

/* ── Group picker popup: QG additions over uf-modal ── */
.qg-lp-overlay[b-bgzookcsj0] {
    z-index: 1300;
}
/* above the filter drawer (1200) */

.qg-lp-modal[b-bgzookcsj0] {
    max-width: 640px;
    max-height: 70vh;
}

.qg-modal-search[b-bgzookcsj0] {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcfe;
}

    .qg-modal-search .uf-input[b-bgzookcsj0] {
        flex: 1 1 auto;
        min-width: 0;
    }

.qg-modal-body[b-bgzookcsj0] {
    flex: 1;
    overflow-y: auto;
}

.qg-lp-row[b-bgzookcsj0] {
    cursor: pointer;
}

.qg-lp-name[b-bgzookcsj0] {
    color: #1a56a7;
    font-weight: 500;
}

/* ── Responsive ── */
@media (max-width: 980px) {
    .qg-body[b-bgzookcsj0] {
        flex-direction: column;
    }

    .qg-balance[b-bgzookcsj0] {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* =====================================================================
   Layout truth block — single source for page-height + sticky footer,
   matching QLedger's pattern. .mu-page (shared) only sets flex-column +
   gap; it never stretches to full viewport height on its own, so without
   this the footer just trails after content instead of pinning to the
   true bottom of the screen.
   ===================================================================== */
.qg-page[b-bgzookcsj0] {
    height: 100%;
    min-height: 100vh;
}

.qg-body[b-bgzookcsj0] {
    flex: 1;
    min-height: 0;
    overflow: hidden; /* containment: children scroll, not the page */
    align-items: stretch; /* overrides the earlier align-items:flex-start —
        without stretch, .mu-card never gets a bounded height, so
        .mu-table-wrap's overflow:auto has nothing to scroll inside and
        the whole page scrolls instead of the grid. */
}

    .qg-body .mu-card[b-bgzookcsj0] {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .qg-body .mu-table-wrap[b-bgzookcsj0] {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow: auto;
    }

/* Pins the footer bar to the true bottom of the viewport instead of
   trailing after the card content. */
.qg-footer-fixed[b-bgzookcsj0] {
    position: sticky;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid #dde3ed;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════
   Clear-date icon button (To Date row) — plain <img> reusing the
   GreenCalendarPicker's class names, but that component's own scoped
   CSS doesn't apply here, so it needs its own sizing to match the
   calendar trigger button next to it in the From Date row.
   (Same block as DocumentGrid.razor.css / BSPL.razor.css / ITB.razor.css /
   QLedger.razor.css.)
   ═══════════════════════════════════════════════════════════════════ */
.gcp-trigger[b-bgzookcsj0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .gcp-trigger:hover[b-bgzookcsj0] {
        background: #f5f5f5;
        border-color: #bbb;
    }

.gcp-icon[b-bgzookcsj0] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

/* ── "G" advanced group search popup ── */
.qg-gp-overlay[b-bgzookcsj0] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
}

.qg-gp-popup[b-bgzookcsj0] {
    background: #fff;
    border-radius: 8px;
    width: 760px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.qg-gp-hdr[b-bgzookcsj0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eef2f7;
    color: #1ab394;
    font-size: 20px;
    font-weight: 300;
}

.qg-gp-x[b-bgzookcsj0] {
    border: none;
    background: none;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.qg-gp-body[b-bgzookcsj0] {
    padding: 14px 18px;
    overflow-y: auto;
}

.qg-gp-filters[b-bgzookcsj0] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.qg-gp-filters .uf-input[b-bgzookcsj0] {
    width: 160px;
}

.qg-gp-alpha[b-bgzookcsj0] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    background: #1a2f6b;
    padding: 4px;
    border-radius: 4px 4px 0 0;
}

.qg-gp-letter[b-bgzookcsj0] {
    border: none;
    background: transparent;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 3px;
}

.qg-gp-letter:hover[b-bgzookcsj0] {
    background: rgba(255, 255, 255, 0.12);
}

.qg-gp-letter.active[b-bgzookcsj0] {
    background: #fff;
    color: #1a2f6b;
}

.qg-gp-panes[b-bgzookcsj0] {
    display: flex;
    gap: 10px;
    border: 1px solid #e2e8f0;
    border-top: none;
    max-height: 340px;
}

.qg-gp-list[b-bgzookcsj0] {
    flex: 1 1 65%;
    overflow: auto;
}

.qg-gp-table th[b-bgzookcsj0],
.qg-gp-table td[b-bgzookcsj0] {
    font-size: 12.5px;
    padding: 6px 8px;
}

.qg-gp-tree[b-bgzookcsj0] {
    flex: 1 1 35%;
    border-left: 1px solid #e2e8f0;
    overflow: auto;
    font-size: 12.5px;
    padding: 6px 0;
}

.qg-gp-tree-node[b-bgzookcsj0] {
    padding-top: 3px;
    padding-bottom: 3px;
    white-space: nowrap;
    cursor: pointer;
}

.qg-gp-tree-node:hover[b-bgzookcsj0] {
    background: #f1f4f8;
}

.qg-gp-footer[b-bgzookcsj0] {
    padding: 8px 2px 0;
    font-size: 12.5px;
    color: #1a2537;
}

.qg-gp-foot[b-bgzookcsj0] {
    padding: 10px 18px;
    border-top: 1px solid #eef2f7;
    text-align: right;
}
/* /Components/Pages/Transactions/QLedger.razor.rz.scp.css */
/* =====================================================================
   GAINS — QLedger.razor.css   (Transactions → Query Ledger, page-scoped)
   ONLY QL-specific additions. Base look (mu- grid system, uf- modal/
   inputs) comes from the global CSS/masters-forms.css.
   ===================================================================== */

/* =====================================================================
   Page-end footer pinning + sticky header/footer — see the CONSOLIDATED
   block at the very end of this file. Everything related to .mu-page /
   .ql-body / .mu-card / .mu-table-wrap sizing was previously scattered
   across several places in this file (with genuinely conflicting
   duplicate declarations for .ql-body and .mu-table-wrap found along the
   way) — it's now defined exactly once, at the end, so cascade order
   can't silently override it again.
   ===================================================================== */

/* mu-pager sits inside .bspl-footer-right now — undo the inherited
   margin-left:auto/font-size/color from common-page-chrome.css so the
   pagesize dropdown and page buttons keep their own sizing/typography. */
.bspl-footer-right[b-gba25bxpef] {
    font-size: inherit;
    color: inherit;
}

.bspl-title-left h1[b-gba25bxpef] {
    font-weight: 100;
    color: #1ab99a;
}

/* ── Page header: ledger name in teal, thin weight ── */
/*.ql-title {
    font-family: "Segoe UI Light", "Segoe UI", sans-serif;
    font-weight: 100 !important;
    color: #1ab99a;
    margin: 0;
}*/

/* Teal action button (FILTERS / GO / Search) — QL accent over mu-btn */
.ql-go[b-gba25bxpef] {
    background: #1ab99a;
    color: #fff;
    border-color: #1ab99a;
}

    .ql-go:hover[b-gba25bxpef] {
        background: #159a80;
    }

.ql-back[b-gba25bxpef] {
    padding: 6px 10px;
    font-size: 12px;
}

/* ── Section buttons (Accounts / Summary Opp Ledger / Summary VType) ── */
.ql-sections[b-gba25bxpef] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0px 0px 0px 10px;
}

.ql-section[b-gba25bxpef] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid #dde3ed;
    background: #fff;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 400;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .ql-section i[b-gba25bxpef] {
        font-size: 15px;
    }

.ql-dollar[b-gba25bxpef] {
    font-weight: 600;
    font-size: 13px;
}

.ql-section:hover[b-gba25bxpef] {
    background: #f1f5f9;
    color: #1a2537;
}

.ql-section.active[b-gba25bxpef] {
    background: #1ab99a;
    border-color: #1ab99a;
    color: #fff;
}

/* ── Layout: main card + balance panel ── */
.ql-body[b-gba25bxpef] {
    display: flex;
    gap: 16px;
}

.mu-card[b-gba25bxpef] {
    flex: 1 1 auto;
    min-width: 0; /* lets it shrink below content width instead of pushing the balance panel off */
}

    /*.ql-body .mu-card {
        flex: 1 1 auto;
        min-width: 0;
    }
*/
/* grid header = sidebar navy theme */
/* ── Grouping tabs (Trans / Day / Month / Quarter) ── */
.ql-tabs[b-gba25bxpef] {
    display: flex;
    gap: 6px;
}

.ql-tab[b-gba25bxpef] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid #dde3ed;
    background: #fff;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 400;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .ql-tab:hover[b-gba25bxpef] {
        background: #f1f5f9;
        color: #1a2537;
    }

    .ql-tab.active[b-gba25bxpef] {
        background: #eafaf6;
        color: #1ab99a;
        border-color: #1ab99a;
    }

/* ── TRANS sub-tabs ── */
.ql-subtabs[b-gba25bxpef] {
    display: flex;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcfe;
}

.ql-subtab[b-gba25bxpef] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 8px 12px;
    margin: 4px;
    border-radius: 7px;
    border: 1px solid #dde3ed;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    color: #64748b;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .ql-subtab:hover:not(:disabled)[b-gba25bxpef] {
        background: #f1f5f9;
        color: #1a2537;
    }

    .ql-subtab.active[b-gba25bxpef] {
        color: #1ab99a;
        border-color: #1ab99a;
        background: #fff;
        font-weight: 600;
    }

/* Forced override for sub-tabs inside .ql-docs-cats (AR-AP, Orders, Docs
   category toggles) — guards against any global button/link reset or a
   stale Blazor CSS-isolation scope hash silently dropping the base
   .ql-subtab rule above. */
.ql-docs-cats .ql-subtab[b-gba25bxpef] {
    border: 1px solid #dde3ed !important;
    background: #fff !important;
    color: #64748b !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

    .ql-docs-cats .ql-subtab.active[b-gba25bxpef] {
        border-color: #1ab99a !important;
        color: #1ab99a !important;
        background: #fff !important;
    }

    .ql-docs-cats .ql-subtab:hover:not(.active)[b-gba25bxpef] {
        background: #f1f5f9 !important;
        color: #1a2537 !important;
    }

.ql-subtab:disabled[b-gba25bxpef] {
    color: #cbd5e1;
    cursor: not-allowed;
    background: #f7f9fc;
}

/* ── QL table cell extras (on top of mu-table) ── */
.mu-table thead th.num[b-gba25bxpef] {
    text-align: right;
}

.mu-table td.num[b-gba25bxpef] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mu-table td.cr[b-gba25bxpef] {
    color: #800000;
}
/* Cr amounts in maroon */
.ql-drcr[b-gba25bxpef] {
    width: 52px;
    font-size: 12px;
}

.mu-table thead th.ql-drcr[b-gba25bxpef] {
    color: #fff;
}

.mu-table tbody td.ql-drcr[b-gba25bxpef] {
    color: #64748b;
}

.ql-nowrap[b-gba25bxpef] {
    white-space: nowrap;
}

.ql-narr[b-gba25bxpef], .ql-ledger[b-gba25bxpef] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ql-th-vnum[b-gba25bxpef] {
    padding-left: 40px;
}

/* Totals footer */
.mu-table tfoot td[b-gba25bxpef] {
    padding: 11px 14px;
    font-weight: 700;
    color: #1a2537;
    border-top: 2px solid #dde3ed;
    background: #fbfcfe;
    position: sticky;
    bottom: 0;
}

    .mu-table tfoot td.num[b-gba25bxpef] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .mu-table tfoot td.cr[b-gba25bxpef] {
        color: #800000;
    }

/* VNum cell: paperclip + voucher square + link */
.ql-vnum-cell[b-gba25bxpef] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ql-clip[b-gba25bxpef] {
    color: #64748b;
    font-size: 14px;
}

.ql-vsquare[b-gba25bxpef] {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #1ab99a;
    border-radius: 2px;
    flex: 0 0 10px;
}

.ql-vnum[b-gba25bxpef] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .ql-vnum:hover[b-gba25bxpef] {
        text-decoration: underline;
    }

/* VType colored per row (inline color from API vColor) */
.ql-vtype[b-gba25bxpef] {
    font-weight: 500;
    font-size: 13px;
}

/* Period link (Month/Day/Quarter drill-down) */
.ql-period-link[b-gba25bxpef] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    font-weight: 500;
}

    .ql-period-link:hover[b-gba25bxpef] {
        text-decoration: underline;
    }

/* Empty / error states */
.ql-empty-state[b-gba25bxpef] {
    text-align: center;
    color: #64748b;
    padding: 48px 16px;
    font-size: 13.5px;
}

    .ql-empty-state p[b-gba25bxpef] {
        margin: 4px 0;
    }

    .ql-empty-state strong[b-gba25bxpef] {
        color: #1a2537;
    }

.ql-error[b-gba25bxpef] {
    color: #dc2626;
}

/* ── Balance panel: restore the earlier bordered card look ── */
/* ── Balance panel: card, header, toggle, table — fully consolidated ── */
.ql-balance[b-gba25bxpef] {
    min-width: 300px;
    max-width: 360px;
    flex-shrink: 0;
    align-self: flex-start;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: auto;
    max-height: 100%;
}

.ql-bal-hdr[b-gba25bxpef] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
}

.ql-bal-toggle[b-gba25bxpef] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 2px;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #64748b;
    flex-shrink: 0;
}

    .ql-bal-toggle:hover[b-gba25bxpef] {
        background: #f1f5f9;
    }

    .ql-bal-toggle svg[b-gba25bxpef] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

.ql-bal-table[b-gba25bxpef] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .ql-bal-table th[b-gba25bxpef],
    .ql-bal-table td[b-gba25bxpef] {
        padding: 10px 12px;
        white-space: nowrap;
        overflow: visible;
        font-size: 13px;
        border-bottom: 1px solid #eee;
        background: #fff;
    }

    .ql-bal-table th[b-gba25bxpef] {
        text-align: left;
        color: #6b7280;
        font-weight: 500;
        background: #fafafa;
    }

        .ql-bal-table th.num[b-gba25bxpef],
        .ql-bal-table td.num[b-gba25bxpef] {
            text-align: right;
            font-variant-numeric: tabular-nums;
            width: 34%;
        }

    .ql-bal-table td:first-child[b-gba25bxpef] {
        width: 32%;
    }

.ql-bal-closing td[b-gba25bxpef] {
    font-weight: 700;
    background: #fff;
    border-top: 2px solid #dcdcdc;
    border-bottom: none;
}

/* ── Responsive ── */
@media (max-width: 980px) {
    .ql-balance[b-gba25bxpef] {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 640px) {
    .ql-bal-toggle[b-gba25bxpef] {
        width: 44px;
        height: 44px;
    }

    .ql-bal-table th[b-gba25bxpef],
    .ql-bal-table td[b-gba25bxpef] {
        padding: 8px 8px;
        font-size: 12px;
    }
}
.ql-bal-table td.cr[b-gba25bxpef] {
    color: #800000;
}

/* ── Filter drawer — outer chrome (overlay/panel/header/body/footer) now
   uses the shared masters-forms.css classes (.mu-drawer-overlay,
   .mu-drawer, .mu-drawer-hdr, .mu-drawer-x, .mu-drawer-body,
   .mu-drawer-foot), same as BSPL/TB/MLedger. Only the field-level
   classes below (still nested inside .mu-drawer-body) remain page-local. ── */
.ql-drawer-section[b-gba25bxpef] {
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #1ab99a;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ql-field[b-gba25bxpef] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    color: #64748b;
}

.ql-led-row[b-gba25bxpef] {
    display: flex;
    gap: 6px;
}

    .ql-led-row input[b-gba25bxpef] {
        flex: 1;
        min-width: 0;
    }

.ql-led-pick[b-gba25bxpef] {
    cursor: pointer;
    background: #fff;
}

.ql-led-btn[b-gba25bxpef] {
    flex: 0 0 36px;
    border-radius: 8px;
    border: 1px solid #1a56a7;
    background: #1a56a7;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .ql-led-btn:hover[b-gba25bxpef] {
        background: #0f3d82;
    }

.ql-check[b-gba25bxpef] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1a2537;
    cursor: pointer;
}

    .ql-check input[b-gba25bxpef] {
        accent-color: #1ab99a;
    }

    .ql-check:has(input:disabled)[b-gba25bxpef] {
        color: #94a3b8;
    }

/* ── Ledger picker popup: QL additions over uf-modal ── */
.ql-lp-overlay[b-gba25bxpef] {
    z-index: 1300;
}
/* above the filter drawer (1200) */
.ql-lp-modal[b-gba25bxpef] {
    max-width: 760px;
    max-height: 80vh;
}

.ql-modal-search[b-gba25bxpef] {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcfe;
}

    .ql-modal-search .uf-input[b-gba25bxpef] {
        flex: 1 1 auto;
        min-width: 0;
    }

.ql-lp-code[b-gba25bxpef] {
    flex: 0 1 120px !important;
}

.ql-modal-body[b-gba25bxpef] {
    flex: 1;
    overflow-y: auto;
}

.ql-lp-row[b-gba25bxpef] {
    cursor: pointer;
}

.ql-lp-idx[b-gba25bxpef] {
    width: 56px;
}

.mu-table tbody td.ql-lp-idx[b-gba25bxpef] {
    color: #1a56a7;
    font-weight: 600;
}

.ql-lp-name[b-gba25bxpef] {
    color: #1a56a7;
    font-weight: 500;
}

/* ── Voucher documents modal: QL additions over uf-modal ── */
.ql-docs-overlay[b-gba25bxpef] {
    z-index: 1300;
}

.ql-docs-modal[b-gba25bxpef] {
    max-width: 700px;
    max-height: 80vh;
}

/* ── Others Links → Docs grid ── */
.ql-docs-table td[b-gba25bxpef] {
    vertical-align: middle;
}

.ql-doc-filechip[b-gba25bxpef] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #1a56a7;
    font-size: 13px;
    cursor: pointer;
}

    .ql-doc-filechip:hover[b-gba25bxpef] {
        text-decoration: underline;
        background: #eef2f7;
    }

    .ql-doc-filechip i[b-gba25bxpef] {
        font-size: 12px;
        color: #64748b;
    }

/* ── Others Links dropdown: DOCS/SCANS, MASTER, GRAPH, COF ── */
.ql-ol-item[b-gba25bxpef] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
}

    .ql-ol-item i[b-gba25bxpef] {
        width: 16px;
        text-align: center;
    }

.ql-ol-docs i[b-gba25bxpef] {
    color: #b91c1c;
}

.ql-ol-master i[b-gba25bxpef] {
    color: #92400e;
}

.ql-ol-graph i[b-gba25bxpef] {
    color: #0d9488;
}

.ql-ol-cof[b-gba25bxpef] {
    padding-left: 24px; /* aligns with the icon-less COF label under the iconed items above */
}

.ql-cof-status[b-gba25bxpef] {
    padding: 8px 20px;
    font-size: 13px;
    color: #475569;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}

    .ql-cof-status.ql-error[b-gba25bxpef] {
        color: #b91c1c;
        background: #fef2f2;
    }

/* ── Image lightbox (Others Links → Docs) ── */
.ql-lightbox-overlay[b-gba25bxpef] {
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ql-lightbox-panel[b-gba25bxpef] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: #000;
    border-radius: 8px;
    padding: 16px;
}

.ql-lightbox-img[b-gba25bxpef] {
    display: block;
    margin: 0 auto;
    max-width: 86vw;
    max-height: 80vh;
    object-fit: contain;
}

.ql-lightbox-caption[b-gba25bxpef] {
    margin-top: 8px;
    color: #fff;
    font-size: 13px;
    text-align: center;
}

.ql-lightbox-close[b-gba25bxpef] {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #fff;
}

/* ── Responsive ── */
@media (max-width: 980px) {
    .ql-body[b-gba25bxpef] {
        flex-direction: column;
    }

    .ql-balance[b-gba25bxpef] {
        flex: 1 1 auto;
        width: 100%;
    }
}


/* ── T Format / Compare split ── */
/* ── T Format / Compare split ── */
.ql-tformat[b-gba25bxpef] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
}

/* base halves — T format height */
.ql-thalf[b-gba25bxpef] {
    flex: 1 1 50%;
    min-width: 0;
    overflow: auto;
    max-height: 48vh;
}

/* compare shorter */
.ql-compare .ql-thalf[b-gba25bxpef] {
    max-height: 68vh;
}

/* Outer grid wrapper must not double-scroll around the halves */
.mu-table-wrap:has(.ql-tformat)[b-gba25bxpef] {
    max-height: none;
    overflow: visible;
}

.ql-tf-bar[b-gba25bxpef] {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .ql-tf-bar.in[b-gba25bxpef] {
        background: #3b5998;
    }
    /* blue IN bar */
    .ql-tf-bar.out[b-gba25bxpef] {
        background: #6b1010;
    }

/* maroon OUT bar */
.ql-thalf-title[b-gba25bxpef] {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: #1a2537;
    background: #fbfcfe;
    border-bottom: 1px solid #eef2f7;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

    .ql-thalf-title.cr[b-gba25bxpef] {
        color: #800000;
    }
/* Compare/T-format halves use light headers like the old form.
   Column headers stick just below the IN/OUT bar (bar ≈ 37px). */
.ql-thalf .mu-table thead th[b-gba25bxpef] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    color: #1a2537;
    border-bottom: 2px solid #eef2f7;
}

.ql-thalf .ql-tf-bar + table thead th[b-gba25bxpef],
.ql-thalf .ql-thalf-title + table thead th[b-gba25bxpef] {
    top: 37px;
}

.ql-thalf .mu-table thead th.ql-cmp-cr[b-gba25bxpef], .ql-thalf .mu-table thead th.num.ql-cmp-cr[b-gba25bxpef] {
    color: #800000;
}

/* Per-half pager under each T-format table */
.ql-tf-pager[b-gba25bxpef] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px;
    background: #fbfcfe;
    border-top: 1px solid #eef2f7;
    min-height: 49px;
    box-sizing: border-box;
}
/* When a half is paged, its Total row sticks just above the pager */
.ql-thalf .ql-has-pager tfoot td[b-gba25bxpef] {
    bottom: 49px;
}

/* ── Page footer: group path + export icons ── */
.ql-pgfoot[b-gba25bxpef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    font-size: 12.5px;
    color: #1a56a7;
    flex-wrap: wrap;
}

.ql-pgfoot-path[b-gba25bxpef] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Footer export/print icons now use the shared .bspl-foot-btn classes
   (matching BSPL exactly) instead of these page-local ones. */

/* =====================================================================
   RESPONSIVE PATCH — phones & small tablets
   ===================================================================== */

/* Ensure wide tables scroll inside card, never the page */
.mu-table-wrap[b-gba25bxpef] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tablet & below (<= 980px) — existing block already stacks .ql-body */
@media (max-width: 980px) {
    /* Stack T-format / Compare halves */
    .ql-tformat[b-gba25bxpef] {
        flex-direction: column;
    }

    .ql-thalf[b-gba25bxpef],
    .ql-compare .ql-thalf[b-gba25bxpef] {
        flex: 1 1 auto;
        width: 100%;
        max-height: none; /* let page scroll naturally when stacked */
    }
}

/* Phones (<= 640px) */
@media (max-width: 640px) {
    /* Tabs: allow wrap, bigger touch */
    .ql-tabs[b-gba25bxpef] {
        flex-wrap: wrap;
    }

    .ql-tab[b-gba25bxpef],
    .ql-subtab[b-gba25bxpef],
    .ql-section[b-gba25bxpef] {
        min-height: 44px;
        padding: 10px 14px;
    }

    .ql-subtabs[b-gba25bxpef] {
        flex-wrap: wrap;
    }

    /* Balance toggle & pager arrows: finger-size */
    .ql-bal-toggle[b-gba25bxpef] {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        align-items: center;
    }

    .ql-tf-pager .mu-nav[b-gba25bxpef] {
        min-width: 44px;
        min-height: 44px;
    }

    /* Ledger picker: full-width modal, search stacks */
    .ql-lp-modal[b-gba25bxpef] {
        max-width: calc(100vw - 16px);
        max-height: 90vh;
    }

    .ql-modal-search[b-gba25bxpef] {
        flex-wrap: wrap;
    }

        .ql-modal-search .uf-input[b-gba25bxpef] {
            flex: 1 1 100%;
        }

    .ql-lp-code[b-gba25bxpef] {
        flex: 1 1 100% !important;
    }

    /* Balance panel header title smaller page title */
    .ql-title[b-gba25bxpef] {
        font-size: 20px;
    }

    /* Footer path truncates instead of pushing icons */
    .ql-pgfoot[b-gba25bxpef] {
        gap: 8px;
    }

    .ql-pgfoot-path[b-gba25bxpef] {
        flex: 1 1 100%;
    }
}

/* Ellipsis actually work on truncating cells */
.ql-narr[b-gba25bxpef],
.ql-ledger[b-gba25bxpef] {
    white-space: nowrap;
}

/* Added by Gaurav for padding fix*/
.gains-layout[b-gba25bxpef] { /* wrapper holding sidebar + page */
    display: flex;
}

.gains-sidebar[b-gba25bxpef] {
    flex: 0 0 auto; /* own width */
}

.gains-content[b-gba25bxpef] { /* where @Body renders */
    flex: 1 1 auto;
    min-width: 0; /* IMPORTANT — lets tables shrink instead of overflow */
}

/* ── Print: clean grid-only output for the Print button ── */
@media print {
    .mu-hdr-actions[b-gba25bxpef],
    .ql-sections[b-gba25bxpef],
    .ql-subtabs[b-gba25bxpef],
    .mu-toolbar[b-gba25bxpef],
    .ql-drawer-overlay[b-gba25bxpef],
    .uf-overlay[b-gba25bxpef],
    .mu-foot[b-gba25bxpef],
    .ql-tf-pager[b-gba25bxpef],
    .bspl-foot-btn[b-gba25bxpef],
    .ql-bal-toggle[b-gba25bxpef] {
        display: none !important;
    }

    .ql-body[b-gba25bxpef] {
        display: block;
    }

    .ql-balance[b-gba25bxpef] {
        width: 100%;
        margin-top: 12px;
        page-break-inside: avoid;
    }

    .mu-table-wrap[b-gba25bxpef], .ql-thalf[b-gba25bxpef] {
        max-height: none !important;
        overflow: visible !important;
    }

    .mu-table thead th[b-gba25bxpef] {
        position: static !important;
    }

    .mu-table tfoot td[b-gba25bxpef], .ql-tf-bar[b-gba25bxpef], .ql-thalf-title[b-gba25bxpef] {
        position: static !important;
    }

    .mu-card[b-gba25bxpef] {
        border: none;
        box-shadow: none;
    }
}


/* ── Fixed page footer (pager + export icons) ── */
.ql-footer-fixed[b-gba25bxpef] {
    position: sticky;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid #dde3ed;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
}

/* Export/print icons use the shared .bspl-foot-btn classes (matching BSPL) —
   see common-page-chrome.css; nothing page-local needed here anymore. */

/* ── Others Links (section-bar dropdown) ── */
.ql-otherlinks[b-gba25bxpef] {
    position: relative;
    display: inline-block;
}

.ql-otherlinks-btn[b-gba25bxpef] {
    color: #1a56a7;
    border-color: #c3d4ec;
    text-transform: none;
}

.ql-otherlinks-menu[b-gba25bxpef] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 200;
    min-width: 170px;
    background: #fff;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    display: flex;
    flex-direction: column;
    padding: 6px;
}

    .ql-otherlinks-menu button[b-gba25bxpef] {
        background: none;
        border: none;
        text-align: left;
        padding: 8px 10px;
        font-size: 12.5px;
        color: #1a2537;
        border-radius: 6px;
        font-family: inherit;
        cursor: pointer;
    }

        .ql-otherlinks-menu button:hover:not(:disabled)[b-gba25bxpef] {
            background: #f1f5f9;
        }

        .ql-otherlinks-menu button:disabled[b-gba25bxpef] {
            color: #94a3b8;
            cursor: not-allowed;
        }


/* =====================================================================
   CONSOLIDATED — page pinning + sticky header/footer (single source of
   truth; everything else in this file that touches .mu-page / .ql-body /
   .mu-card / .mu-table-wrap sizing was left alone above, but THIS block
   is last in the file, so it wins any cascade conflict without needing
   to hunt down every prior declaration).
   ===================================================================== */

/* .mu-page: full-height flex column. height:100% depends on every
   ancestor up to the viewport having a definite height; min-height:100vh
   is a hard floor that works regardless of whether that chain holds. */
.mu-page[b-gba25bxpef] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
}

/* .ql-body: fills whatever's left after the title block + section/mode
   tabs. min-height:0 is required for a flex child to be allowed to
   shrink below its content size — without it, a tall table can force
   .ql-body past .mu-page's height instead of scrolling internally. */
.ql-body[b-gba25bxpef] {
    flex: 1;
    min-height: 0;
}

    .ql-body .mu-card[b-gba25bxpef] {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
    }

    /* .mu-table-wrap is the ONLY element that scrolls vertically. Header and
   footer stick to its top/bottom (below) instead of scrolling with it. */
    .ql-body .mu-table-wrap[b-gba25bxpef] {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow: auto;
    }

/* ql-balance sizes to its own content — never scrolls, never gets capped. */
/*.ql-balance {
    max-height: none;
    overflow: visible;
}*/

/* balance panel: content height only, don't stretch with the card */
.ql-balance[b-gba25bxpef] {
    align-self: flex-start;
    max-height: 100%;
    overflow: auto;
}
/* Sticky header — was missing entirely, which is why a long table's
   column headers scrolled away with the rows instead of staying pinned
   at the top of .mu-table-wrap. Needs an opaque background since content
   scrolls underneath it. */
.mu-table thead th[b-gba25bxpef] {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Sticky totals row — pins to the bottom of .mu-table-wrap regardless of
   how many rows are above it, instead of drifting down the page as more
   rows are added. (Was already sticky, reinforced here with a guaranteed
   z-index + opaque background so scrolling rows can't visually bleed
   through or paint over it.) */
.mu-table tfoot td[b-gba25bxpef] {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: #fbfcfe;
}

/* Footer is the last flex child of .mu-page → always at the true bottom */
.ql-footer-fixed[b-gba25bxpef] {
    flex-shrink: 0;
}

/* T-format / Compare halves: fill the card instead of viewport-relative heights */
.mu-table-wrap:has(.ql-tformat)[b-gba25bxpef] {
    overflow: hidden;
}

.ql-tformat[b-gba25bxpef] {
    height: 100%;
    box-sizing: border-box;
}

    .ql-tformat .ql-thalf[b-gba25bxpef] {
        max-height: 100%;
    }

.ql-lnk-parent td[b-gba25bxpef] {
    font-weight: 600;
    background: #fbfcfe;
}

.ql-lnk-child td[b-gba25bxpef] {
    color: #475569;
}

/* ═══════════════════════════════════════════════════════════════════
   Clear-date icon button (To Date row) — plain <img> reusing the
   GreenCalendarPicker's class names, but that component's own scoped
   CSS doesn't apply here, so it needs its own sizing to match the
   calendar trigger button next to it in the From Date row.
   (Same block as DocumentGrid.razor.css / BSPL.razor.css / ITB.razor.css.)
   ═══════════════════════════════════════════════════════════════════ */
.gcp-trigger[b-gba25bxpef] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .gcp-trigger:hover[b-gba25bxpef] {
        background: #f5f5f5;
        border-color: #bbb;
    }

.gcp-icon[b-gba25bxpef] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}
/*fixed other links close*/
.ql-ol-overlay[b-gba25bxpef] {
    position: fixed;
    inset: 0;
    z-index: 40; /* below the menu, above everything else */
}

.ql-grp-toggle[b-gba25bxpef] {
    background: none;
    border: none;
    cursor: pointer;
    width: 18px;
    margin-right: 4px;
}


/*ledger search suggestion*/

.ql-led-suggest-row[b-gba25bxpef] {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

    .ql-led-suggest-row:hover[b-gba25bxpef] {
        background: #f1f5f9;
    }

.ql-led-suggest-code[b-gba25bxpef] {
    color: #64748b;
}

/*for redirect form*/
.ql-quick-actions[b-gba25bxpef] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

.ql-qa-item[b-gba25bxpef] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    background: none;
    border: none;
    border-radius: 6px;
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    color: #1a2537;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .ql-qa-item i[b-gba25bxpef] {
        width: 16px;
        text-align: center;
        color: #64748b;
        font-size: 13px;
    }

    .ql-qa-item:hover:not(:disabled)[b-gba25bxpef] {
        background: #f1f5f9;
    }

    .ql-qa-item:disabled[b-gba25bxpef] {
        color: #cbd5e1;
        cursor: not-allowed;
    }

        .ql-qa-item:disabled i[b-gba25bxpef] {
            color: #cbd5e1;
        }
/* /Components/Pages/Transactions/Register.razor.rz.scp.css */
/* =====================================================================
   GAINS — Registers.razor.css   (Transactions → Registers, page-scoped)
   ONLY Registers-specific additions. Base look (mu- grid system,
   ql- filter/field/tabs, uf- modal, bspl- title block) comes from
   masters-forms.css + QLedger.razor.css already loaded globally.
   ===================================================================== */

/* ── Type-picker modal (the "REGISTERS" popup) ── */
.rg-type-modal[b-j7xjuzm8zh] {
    width: min(760px, 92vw);
}

.rg-type-columns[b-j7xjuzm8zh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px 24px;
}

.rg-type-col[b-j7xjuzm8zh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rg-type-item[b-j7xjuzm8zh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    text-align: left;
    font-size: 13px;
    color: var(--mu-text, #374151);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .rg-type-item i[b-j7xjuzm8zh] {
        font-size: 12px;
        opacity: 0.7;
    }

    .rg-type-item:hover[b-j7xjuzm8zh] {
        background: var(--mu-hover-bg, #f3f4f6);
    }

    .rg-type-item.active[b-j7xjuzm8zh] {
        background: var(--mu-thead-bg, #306B9C);
        color: #fff;
    }

.rg-type-footer[b-j7xjuzm8zh] {
    display: flex;
    justify-content: flex-end;
    padding: 12px 24px 20px;
}

/* ── Summary tab: three grids side by side (matches the screenshot) ── */
/* ── Summary layout: left stack (consolidated + monthwise), right wide party grid ── */
.rg-summary-grid[b-j7xjuzm8zh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 16px;
    align-items: start;
}

.rg-summary-left[b-j7xjuzm8zh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.rg-summary-col[b-j7xjuzm8zh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.rg-summary-title[b-j7xjuzm8zh] {
    font-weight: 600;
    font-size: 13px;
    padding: 8px 10px;
    background: linear-gradient(135deg, #eef7f0, #e3f1ea);
    color: #2f5f4c;
}

/* Containment: each grid scrolls inside its own box, never bleeds out */
.rg-summary-scroll[b-j7xjuzm8zh] {
    max-height: 420px;
    overflow: auto;
    min-width: 0;
}

@media (max-width: 1100px) {
    .rg-summary-grid[b-j7xjuzm8zh] {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   The rules below are copied from QLedger.razor.css, not written fresh.
   Blazor CSS isolation scopes a component's .razor.css file to only that
   component's own rendered markup — so QLedger's .ql-* rules never reach
   Registers.razor even though the class names match. Every .ql-* class
   used in Registers.razor's markup needs its own copy here for the same
   reason. If QLedger.razor.css's versions of these change, update both.
   ===================================================================== */

.ql-sections[b-j7xjuzm8zh] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0px 0px 0px 10px;
}

.ql-section[b-j7xjuzm8zh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid #dde3ed;
    background: #fff;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 400;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .ql-section i[b-j7xjuzm8zh] {
        font-size: 15px;
    }

    .ql-section:hover[b-j7xjuzm8zh] {
        background: #f1f5f9;
        color: #1a2537;
    }

    .ql-section.active[b-j7xjuzm8zh] {
        background: #1ab99a;
        border-color: #1ab99a;
        color: #fff;
    }

.ql-body[b-j7xjuzm8zh] {
    display: flex;
    gap: 16px;
    align-items: stretch;
    overflow: hidden;
}

.ql-ledger[b-j7xjuzm8zh] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ql-vnum[b-j7xjuzm8zh] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .ql-vnum:hover[b-j7xjuzm8zh] {
        text-decoration: underline;
    }

/* Empty / error states */
.ql-empty-state[b-j7xjuzm8zh] {
    text-align: center;
    color: #64748b;
    padding: 48px 16px;
    font-size: 13.5px;
}

    .ql-empty-state p[b-j7xjuzm8zh] {
        margin: 4px 0;
    }

    .ql-empty-state strong[b-j7xjuzm8zh] {
        color: #1a2537;
    }

.ql-error[b-j7xjuzm8zh] {
    color: #dc2626;
}

.ql-drawer-section[b-j7xjuzm8zh] {
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #1ab99a;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ql-field[b-j7xjuzm8zh] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    color: #64748b;
}

.ql-led-row[b-j7xjuzm8zh] {
    display: flex;
    gap: 6px;
}

    .ql-led-row input[b-j7xjuzm8zh] {
        flex: 1;
        min-width: 0;
    }

.ql-led-pick[b-j7xjuzm8zh] {
    cursor: pointer;
    background: #fff;
}

.ql-led-btn[b-j7xjuzm8zh] {
    flex: 0 0 36px;
    border-radius: 8px;
    border: 1px solid #1a56a7;
    background: #1a56a7;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .ql-led-btn:hover[b-j7xjuzm8zh] {
        background: #0f3d82;
    }

.ql-check[b-j7xjuzm8zh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1a2537;
    cursor: pointer;
}

    .ql-check input[b-j7xjuzm8zh] {
        accent-color: #1ab99a;
    }

    .ql-check:has(input:disabled)[b-j7xjuzm8zh] {
        color: #94a3b8;
    }

/* ── Ledger picker popup: QL additions over uf-modal ── */
.ql-lp-overlay[b-j7xjuzm8zh] {
    z-index: 1300;
}


.ql-lp-modal[b-j7xjuzm8zh] {
    max-width: 760px;
    max-height: 80vh;
}

.ql-modal-search[b-j7xjuzm8zh] {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcfe;
}

    .ql-modal-search .uf-input[b-j7xjuzm8zh] {
        flex: 1 1 auto;
        min-width: 0;
    }

.ql-lp-code[b-j7xjuzm8zh] {
    flex: 0 1 120px !important;
}

.ql-modal-body[b-j7xjuzm8zh] {
    flex: 1;
    overflow-y: auto;
}

.ql-lp-row[b-j7xjuzm8zh] {
    cursor: pointer;
}

.ql-lp-idx[b-j7xjuzm8zh] {
    width: 56px;
}

.mu-table tbody td.ql-lp-idx[b-j7xjuzm8zh] {
    color: #1a56a7;
    font-weight: 600;
}

.ql-lp-name[b-j7xjuzm8zh] {
    color: #1a56a7;
    font-weight: 500;
}

/* =====================================================================
   Sizing chain — copied from the "CONSOLIDATED" block at the end of
   QLedger.razor.css. .mu-table-wrap's global rule in masters-forms.css
   gives it a fixed 540px height; this block overrides that so the whole
   .mu-page → .ql-body → .mu-card → .mu-table-wrap chain instead fills
   available height as a flex column, with only .mu-table-wrap scrolling.
   Without this, .mu-card falls back to its global min-height:260px and
   the grid renders collapsed/short. Keep in sync with QLedger's copy.
   ===================================================================== */
.mu-page[b-j7xjuzm8zh] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
}

.ql-body[b-j7xjuzm8zh] {
    flex: 1;
    min-height: 0;
}

    .ql-body .mu-card[b-j7xjuzm8zh] {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
    }

    .ql-body .mu-table-wrap[b-j7xjuzm8zh] {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow: auto;
    }

.mu-table thead th[b-j7xjuzm8zh] {
    position: sticky;
    top: 0;
    z-index: 3;
}

.mu-table tfoot td[b-j7xjuzm8zh] {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: #fbfcfe;
}

/* ── Amount column formatting — right align, tabular nums, Total row spacing ── */
.mu-table thead th.num[b-j7xjuzm8zh] {
    text-align: right;
}

.mu-table td.num[b-j7xjuzm8zh] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mu-table td.cr[b-j7xjuzm8zh] {
    color: #800000;
}

.ql-drcr[b-j7xjuzm8zh] {
    width: 52px;
    font-size: 12px;
}

.mu-table thead th.ql-drcr[b-j7xjuzm8zh] {
    color: #fff;
}

.mu-table tbody td.ql-drcr[b-j7xjuzm8zh] {
    color: #64748b;
}
.mu-total-row[b-j7xjuzm8zh] {
    height: 40px;
    background: #fff;
    margin-left : 0px;
}
/* ── Fixed page footer (pager + export icons) ── */
.ql-footer-fixed[b-j7xjuzm8zh] {
    position: sticky;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid #dde3ed;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
    flex-shrink: 0; /* last flex child of .mu-page → always at the true bottom */
}

/* /Components/Pages/Transactions/TDS.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   Clear-date icon button (To Date row) — plain <img> reusing the
   GreenCalendarPicker's class names, but that component's own scoped
   CSS doesn't apply here, so it needs its own sizing to match the
   calendar trigger button next to it in the From Date row.
   (Same block as DocumentGrid.razor.css / BSPL.razor.css.)
   ═══════════════════════════════════════════════════════════════════ */
.gcp-trigger[b-v12h5cx2bi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .gcp-trigger:hover[b-v12h5cx2bi] {
        background: #f5f5f5;
        border-color: #bbb;
    }

.gcp-icon[b-v12h5cx2bi] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}
/* =====================================================================
   TDS.razor.css
   Page layout + tab styling — scoped to this component only.
   Header (bspl-title-block), footer (bspl-footer), table (mu-table),
   filter drawer (mu-drawer/mu-fld) already come from shared
   masters-forms.css / common-page-chrome.css.
   ===================================================================== */

.itb-page[b-v12h5cx2bi] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.itb-toptabs[b-v12h5cx2bi] {
    flex-shrink: 0;
    padding: 8px 16px 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

    .itb-toptabs button[b-v12h5cx2bi] {
        padding: 7px 16px;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .2px;
        text-transform: uppercase;
        background: #fff;
        color: #555;
        border: 1px solid #d5d5d5;
        border-radius: 6px;
        cursor: pointer;
        font-family: inherit;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: background .12s, color .12s, border-color .12s;
    }

        .itb-toptabs button:hover[b-v12h5cx2bi] {
            background: #f5f5f5;
        }

        .itb-toptabs button.active[b-v12h5cx2bi] {
            background: #1ab99a;
            color: #fff;
            border-color: #1ab99a;
            font-weight: 700;
        }

        .itb-toptabs button:disabled[b-v12h5cx2bi] {
            opacity: 0.5;
            cursor: not-allowed;
        }

.itb-subtabs[b-v12h5cx2bi] {
    padding-top: 0;
}

    .itb-subtabs button[b-v12h5cx2bi] {
        padding: 5px 12px;
        font-size: 10.5px;
    }

.itb-page .mu-card[b-v12h5cx2bi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0 16px;
}

.itb-page .mu-table-wrap[b-v12h5cx2bi] {
    flex: 1;
    overflow: auto;
    min-height: 200px;
}

.itb-grid-table[b-v12h5cx2bi] {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

    .itb-grid-table thead th[b-v12h5cx2bi] {
        text-align: left;
        font-size: 11.5px;
        font-weight: 700;
        line-height: 1.3;
        padding: 8px 10px;
    }

    .itb-grid-table tbody td[b-v12h5cx2bi],
    .itb-grid-table tfoot td[b-v12h5cx2bi] {
        border-left: 1px solid #eef0f2;
        border-right: 1px solid #eef0f2;
        border-bottom: 1px solid #eef0f2;
        border-top: 0;
        padding: 8px 10px;
    }

    .itb-grid-table th.num[b-v12h5cx2bi],
    .itb-grid-table td.num[b-v12h5cx2bi] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .itb-grid-table tfoot td[b-v12h5cx2bi] {
        position: sticky;
        bottom: 0;
        background: #f2f2f2;
        font-weight: 600;
    }

.itb-toolbar[b-v12h5cx2bi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    font-size: 12.5px;
    color: #555;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}

.itb-page-current[b-v12h5cx2bi] {
    font-size: 12.5px;
    color: #64748b;
}

.itb-error[b-v12h5cx2bi] {
    margin: 12px 16px 0;
    padding: 10px 14px;
    background: #fdf3f3;
    border-left: 4px solid #c0392b;
    color: #c0392b;
    font-size: 13px;
    flex-shrink: 0;
}

.itb-pageno[b-v12h5cx2bi] {
    padding: 3px 8px;
    border: 1px solid #d6dbe0;
    border-radius: 4px;
    font-family: inherit;
    color: #333;
}
.itb-grid-table .mu-th-idx[b-v12h5cx2bi],
.itb-grid-table .mu-idx[b-v12h5cx2bi] {
    text-align: right;
}
/* ── Generate Challan modal ── */
.tds-modal-overlay[b-v12h5cx2bi] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1000;
}

.tds-modal[b-v12h5cx2bi] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 440px;
    max-width: 92vw;
    max-height: 90vh;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.tds-modal-hdr[b-v12h5cx2bi] {
    padding: 14px 18px;
    border-bottom: 1px solid #eef0f2;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tds-modal-body[b-v12h5cx2bi] {
    padding: 16px 18px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tds-modal-foot[b-v12h5cx2bi] {
    padding: 12px 18px;
    border-top: 1px solid #eef0f2;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.tds-summary[b-v12h5cx2bi] {
    background: #f7f9fa;
    border: 1px solid #eef0f2;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12.5px;
}

    .tds-summary div[b-v12h5cx2bi] {
        display: flex;
        justify-content: space-between;
        padding: 3px 0;
    }

    .tds-summary span[b-v12h5cx2bi] {
        color: #64748b;
    }

/* Checkbox column */
.itb-grid-table .mu-th-chk[b-v12h5cx2bi],
.itb-grid-table .mu-td-chk[b-v12h5cx2bi] {
    text-align: center;
}

.itb-grid-table tr.row-selected td[b-v12h5cx2bi] {
    background: #eafaf5;
}
/* /Components/Pages/Transactions/TdsChallanIntermediate.razor.rz.scp.css */
.tds-ci-summary[b-ts8hci8fjy] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    background: #f7f9fa;
    border: 1px solid #eef0f2;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 12px 16px 0;
    font-size: 12.5px;
}

    .tds-ci-summary div[b-ts8hci8fjy] {
        display: flex;
        flex-direction: column;
    }

    .tds-ci-summary span[b-ts8hci8fjy] {
        color: #64748b;
    }

.tds-ci-form[b-ts8hci8fjy] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
}

    .tds-ci-form .mu-fld[b-ts8hci8fjy] {
        min-width: 200px;
    }

.tds-ci-foot[b-ts8hci8fjy] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    margin-top: auto;
}

.itb-ok[b-ts8hci8fjy] {
    background: #f0faf4;
    border-left-color: #1a7f4b;
    color: #1a7f4b;
}
.tds-gen-table th[b-ts8hci8fjy], .tds-gen-table td[b-ts8hci8fjy] {
    font-size: 11.5px;
    padding: 6px 8px;
    vertical-align: middle;
}

.tds-gen-table .mu-th-chk[b-ts8hci8fjy], .tds-gen-table .mu-td-chk[b-ts8hci8fjy] {
    text-align: center;
}

.tds-gen-table tr.row-selected td[b-ts8hci8fjy] {
    background: #eafaf5;
}

.tds-sub[b-ts8hci8fjy] {
    color: #1ab99a;
    font-size: 10.5px;
}

.tds-in[b-ts8hci8fjy] {
    width: 90%;
    padding: 2px 4px;
    border: 1px solid #d6dbe0;
    border-radius: 3px;
    font-size: 11px;
}

.tds-gen-table select[b-ts8hci8fjy] {
    width: 100%;
    padding: 3px;
    font-size: 11px;
    border: 1px solid #d6dbe0;
    border-radius: 3px;
}

.tds-ci-foot[b-ts8hci8fjy] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    margin-top: auto;
}

.itb-ok[b-ts8hci8fjy] {
    background: #f0faf4;
    border-left-color: #1a7f4b;
    color: #1a7f4b;
}
/* /Components/Pages/Transactions/Voucher/Inventory/InvVoucher.razor.rz.scp.css */
/* =====================================================
   InvVoucher.razor.css
   Scoped styles for the Inventory Voucher page.
   Palette matches Login.razor.css (GAINS teal), plus a
   dedicated purchase-mode accent (light orange).
   ===================================================== */

.iv-page[b-s3cvf82m4z] {
    --iv-accent: #1AB99A;
    --iv-accent-dark: #0d9480;
    --iv-accent-bg: #eafbf6;
    --iv-purchase: #f97316;
    --iv-purchase-dark: #c2410c;
    --iv-purchase-bg: #fff4ec;
    --iv-bg: #f1f5f9;
    --iv-panel: #ffffff;
    --iv-border: #e2e8f0;
    --iv-border-strong: #cbd5e1;
    --iv-text: #1e293b;
    --iv-muted: #64748b;
    --iv-muted-light: #94a3b8;
    --iv-danger: #dc2626;
    --iv-danger-bg: #fef2f2;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: var(--iv-text);
    padding: 20px 12px 86px;
    font-size: 13px;
}

/* ---------- topbar ---------- */
.iv-topbar[b-s3cvf82m4z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.iv-topbar-left[b-s3cvf82m4z] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.iv-status[b-s3cvf82m4z] {
    font-size: 12px;
    font-weight: 600;
    color: var(--iv-accent-dark);
    min-height: 16px;
}

.iv-status-error[b-s3cvf82m4z] {
    color: var(--iv-danger);
}

.iv-btn[b-s3cvf82m4z] {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--iv-border-strong);
    background: #fff;
    color: var(--iv-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: .12s;
}

    .iv-btn:hover[b-s3cvf82m4z] {
        border-color: var(--iv-accent);
        color: var(--iv-accent-dark);
    }

    .iv-btn:disabled[b-s3cvf82m4z] {
        opacity: .5;
        cursor: not-allowed;
    }

.iv-btn-primary[b-s3cvf82m4z] {
    background: var(--iv-accent);
    color: #fff;
    border-color: var(--iv-accent);
}

    .iv-btn-primary:hover[b-s3cvf82m4z] {
        background: var(--iv-accent-dark);
        color: #fff;
    }

.iv-btn-danger:hover[b-s3cvf82m4z] {
    border-color: var(--iv-danger);
    color: var(--iv-danger);
    background: var(--iv-danger-bg);
}

.iv-btn-sm[b-s3cvf82m4z] {
    padding: 5px 10px;
    font-size: 11.5px;
}

/* ---------- settings panel ---------- */
.iv-settings-panel[b-s3cvf82m4z] {
    background: #fff;
    border: 1.5px solid var(--iv-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 18px;
}

.iv-check[b-s3cvf82m4z] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--iv-muted);
    cursor: pointer;
}

.iv-check-col[b-s3cvf82m4z] {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* ---------- tabs ---------- */
.iv-tabs[b-s3cvf82m4z] {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--iv-border);
}

.iv-tab[b-s3cvf82m4z] {
    padding: 9px 18px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--iv-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.iv-tab-active[b-s3cvf82m4z] {
    color: var(--iv-accent-dark);
    border-color: var(--iv-accent);
}

.iv-tab-locked[b-s3cvf82m4z] {
    color: var(--iv-muted-light);
    cursor: not-allowed;
}

/* ---------- layout ---------- */
.iv-panel-split[b-s3cvf82m4z] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
}

.iv-side[b-s3cvf82m4z] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.iv-card[b-s3cvf82m4z] {
    background: #fff;
    border: 1.5px solid var(--iv-border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 14px;
}

.iv-section-title[b-s3cvf82m4z] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--iv-muted);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

/* voucher-type mode tint */
.iv-header-card[b-s3cvf82m4z] {
    border-top: 4px solid var(--iv-accent);
    transition: border-color .15s, background .15s;
}

    .iv-header-card.iv-mode-sales[b-s3cvf82m4z] {
        border-top-color: var(--iv-accent);
        background: linear-gradient(180deg, var(--iv-accent-bg) 0%, #fff 90px);
    }

    .iv-header-card.iv-mode-purchase[b-s3cvf82m4z] {
        border-top-color: var(--iv-purchase);
        background: linear-gradient(180deg, var(--iv-purchase-bg) 0%, #fff 90px);
    }

.iv-vtype-strip[b-s3cvf82m4z] {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.iv-vtype-pill[b-s3cvf82m4z] {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 9px;
    background: #f8fafc;
    border: 1.5px solid var(--iv-border);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    color: var(--iv-muted);
    transition: .12s;
}

    .iv-vtype-pill.iv-active[data-vtype="sales"][b-s3cvf82m4z] {
        background: var(--iv-accent-bg);
        border-color: var(--iv-accent);
        color: var(--iv-accent-dark);
    }

    .iv-vtype-pill.iv-active[data-vtype="purchase"][b-s3cvf82m4z] {
        background: var(--iv-purchase-bg);
        border-color: var(--iv-purchase);
        color: var(--iv-purchase-dark);
    }

/* ---------- fields ---------- */
.iv-field-grid[b-s3cvf82m4z] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.iv-field[b-s3cvf82m4z] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.iv-field-wide[b-s3cvf82m4z] {
    grid-column: span 2;
}

.iv-field label[b-s3cvf82m4z] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--iv-muted);
}

.iv-input[b-s3cvf82m4z], [b-s3cvf82m4z] .iv-input {
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid var(--iv-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    background: #f8fafc;
    color: var(--iv-text);
    outline: none;
    transition: .12s;
    width: 100%;
}

    .iv-input:focus[b-s3cvf82m4z], [b-s3cvf82m4z] .iv-input:focus {
        border-color: var(--iv-accent);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(26,185,154,.12);
    }

    .iv-input[readonly][b-s3cvf82m4z], .iv-input:disabled[b-s3cvf82m4z], [b-s3cvf82m4z] .iv-input[readonly], [b-s3cvf82m4z] .iv-input:disabled {
        background: #f1f5f9;
        color: var(--iv-muted);
    }

.iv-mono[b-s3cvf82m4z] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

.iv-narration[b-s3cvf82m4z] {
    height: auto;
    min-height: 44px;
    padding: 8px 10px;
    resize: vertical;
}

.iv-currency[b-s3cvf82m4z] {
    width: 90px;
}

.iv-exchrate[b-s3cvf82m4z] {
    width: 110px;
}

.iv-customer-add[b-s3cvf82m4z] {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

.iv-inline-add[b-s3cvf82m4z] {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.iv-checks-row[b-s3cvf82m4z] {
    display: flex;
    gap: 24px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* ---------- autocomplete ---------- */
.iv-auto[b-s3cvf82m4z] {
    position: relative;
}

.iv-suggest[b-s3cvf82m4z] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--iv-border);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15,23,42,.12);
    max-height: 200px;
    overflow-y: auto;
    z-index: 40;
}

.iv-suggest-row[b-s3cvf82m4z] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12.5px;
}

    .iv-suggest-row:hover[b-s3cvf82m4z] {
        background: var(--iv-accent-bg);
    }

    .iv-suggest-row small[b-s3cvf82m4z] {
        color: var(--iv-muted-light);
    }

/* LedgerAutofill / ItemAutofill (Components/Shared) render their own markup with their
   own class names (lga-* / ia-*) — these need ::deep since they're rendered inside a
   child component, not directly by this page. */
[b-s3cvf82m4z] .lga-wrap, [b-s3cvf82m4z] .ia-wrap {
    position: relative;
    display: block;
}

[b-s3cvf82m4z] .lga-spin, [b-s3cvf82m4z] .ia-spin {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--iv-muted-light);
    font-size: 12px;
}

[b-s3cvf82m4z] .lga-suggest, [b-s3cvf82m4z] .ia-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--iv-border);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15,23,42,.12);
    max-height: 200px;
    overflow-y: auto;
    z-index: 40;
    list-style: none;
    margin: 0;
    padding: 4px;
}

    [b-s3cvf82m4z] .lga-suggest li, [b-s3cvf82m4z] .ia-suggest li {
        padding: 8px 10px;
        cursor: pointer;
        font-size: 12.5px;
        border-radius: 6px;
    }

        [b-s3cvf82m4z] .lga-suggest li:hover, [b-s3cvf82m4z] .ia-suggest li:hover,
        [b-s3cvf82m4z] .lga-suggest li.active, [b-s3cvf82m4z] .ia-suggest li.active {
            background: var(--iv-accent-bg);
        }

[b-s3cvf82m4z] .lga-empty, [b-s3cvf82m4z] .ia-empty {
    color: var(--iv-muted-light);
    cursor: default;
}

[b-s3cvf82m4z] .lga-name, [b-s3cvf82m4z] .ia-name {
    font-size: 12.5px;
}

/* ---------- tables ---------- */
.iv-table-wrap[b-s3cvf82m4z] {
    overflow-x: auto;
}

.iv-table[b-s3cvf82m4z] {
    width: 100%;
    border-collapse: collapse;
}

    .iv-table thead th[b-s3cvf82m4z] {
        background: #f8fafc;
        color: var(--iv-muted);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        padding: 8px;
        text-align: left;
        border-bottom: 1.5px solid var(--iv-border);
    }

    .iv-table tbody td[b-s3cvf82m4z] {
        padding: 6px 8px;
        border-bottom: 1px solid var(--iv-border);
        vertical-align: middle;
        font-size: 12px;
    }

    .iv-table tfoot td[b-s3cvf82m4z] {
        background: #f8fafc;
        font-weight: 700;
        padding: 8px;
        font-size: 11.5px;
    }

.text-right[b-s3cvf82m4z] {
    text-align: right;
}

.iv-bold[b-s3cvf82m4z] {
    font-weight: 700;
    color: var(--iv-accent-dark);
}

.iv-sub-line[b-s3cvf82m4z] {
    font-size: 10.5px;
    color: var(--iv-muted-light);
    margin-top: 2px;
}

.iv-row-clickable[b-s3cvf82m4z] {
    cursor: pointer;
}

    .iv-row-clickable:hover[b-s3cvf82m4z] {
        background: var(--iv-accent-bg);
    }

.iv-row-actions[b-s3cvf82m4z] {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.iv-icon-btn[b-s3cvf82m4z] {
    border: none;
    background: none;
    color: var(--iv-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 3px 5px;
}

    .iv-icon-btn:hover[b-s3cvf82m4z] {
        color: var(--iv-accent-dark);
    }

.iv-icon-danger:hover[b-s3cvf82m4z] {
    color: var(--iv-danger);
}

.iv-input-cell[b-s3cvf82m4z], [b-s3cvf82m4z] .iv-input-cell {
    border: none;
    background: transparent;
    padding: 4px 2px;
}

.iv-side-table[b-s3cvf82m4z] {
    font-size: 12px;
}

.iv-muted[b-s3cvf82m4z] {
    color: var(--iv-muted-light);
}

.iv-muted-sm[b-s3cvf82m4z] {
    font-size: 11px;
    color: var(--iv-muted-light);
}

.iv-neg[b-s3cvf82m4z] {
    color: var(--iv-danger);
}

.iv-add-row-btn[b-s3cvf82m4z] {
    margin: 10px 0 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1.5px dashed var(--iv-border-strong);
    color: var(--iv-accent-dark);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}

    .iv-add-row-btn:hover[b-s3cvf82m4z] {
        background: var(--iv-accent-bg);
        border-color: var(--iv-accent);
    }

.iv-three-col[b-s3cvf82m4z] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* ---------- totals ---------- */
.iv-totals-wrap[b-s3cvf82m4z] {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.iv-totals-card[b-s3cvf82m4z] {
    width: 340px;
    background: #f8fafc;
    border: 1.5px solid var(--iv-border);
    border-radius: 10px;
    padding: 14px 18px;
}

.iv-totals-line[b-s3cvf82m4z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 12.5px;
}

.iv-totals-input[b-s3cvf82m4z] {
    width: 100px;
    text-align: right;
    height: 30px;
}

.iv-totals-grand[b-s3cvf82m4z] {
    border-top: 1.5px solid var(--iv-border-strong);
    margin-top: 6px;
    padding-top: 10px;
    font-weight: 800;
    font-size: 17px;
    color: var(--iv-accent-dark);
}

/* ---------- party / side panel ---------- */
.iv-party-box[b-s3cvf82m4z] {
    background: #f8fafc;
    border: 1px solid var(--iv-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 10px;
}

.iv-cb[b-s3cvf82m4z] {
    font-weight: 700;
    font-size: 13px;
    color: var(--iv-accent-dark);
}

.iv-cb-danger[b-s3cvf82m4z] {
    color: var(--iv-danger);
}

.iv-party-line[b-s3cvf82m4z] {
    font-size: 11.5px;
    color: var(--iv-muted);
    margin-top: 3px;
}

.iv-btn-row[b-s3cvf82m4z] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

    .iv-btn-row .iv-btn[b-s3cvf82m4z] {
        flex: 1;
        justify-content: center;
    }

.iv-mini-list[b-s3cvf82m4z] {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.iv-mini-row[b-s3cvf82m4z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--iv-border);
    border-radius: 8px;
    font-size: 12px;
    background: #fafbfc;
}

.iv-tag[b-s3cvf82m4z] {
    font-size: 9.5px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    margin-right: 6px;
}

    .iv-tag.sales[b-s3cvf82m4z] {
        background: var(--iv-accent-bg);
        color: var(--iv-accent-dark);
    }

    .iv-tag.purchase[b-s3cvf82m4z] {
        background: var(--iv-purchase-bg);
        color: var(--iv-purchase-dark);
    }

.iv-link-btn[b-s3cvf82m4z] {
    border: none;
    background: none;
    color: var(--iv-muted);
    cursor: pointer;
    font-size: 11px;
    text-decoration: underline;
}

.iv-empty-note[b-s3cvf82m4z] {
    font-size: 11.5px;
    color: var(--iv-muted-light);
    padding: 8px 2px;
}

.iv-lock-note[b-s3cvf82m4z] {
    padding: 30px;
    text-align: center;
    color: var(--iv-muted-light);
    font-size: 13px;
}


/* ---------- view tab ---------- */
.iv-view-grid[b-s3cvf82m4z] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
    margin-bottom: 16px;
}

.iv-view-item[b-s3cvf82m4z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12.5px;
}

    .iv-view-item span[b-s3cvf82m4z] {
        font-size: 10px;
        text-transform: uppercase;
        color: var(--iv-muted-light);
        font-weight: 700;
    }

/* ---------- attachments / links ---------- */
.iv-attach-drop[b-s3cvf82m4z] {
    border: 2px dashed var(--iv-border-strong);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    color: var(--iv-muted);
    margin-bottom: 14px;
}

.iv-attach-list[b-s3cvf82m4z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.iv-attach-row[b-s3cvf82m4z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border: 1px solid var(--iv-border);
    border-radius: 8px;
    background: #fafbfc;
    font-size: 12.5px;
}

    .iv-attach-row a[b-s3cvf82m4z] {
        color: var(--iv-accent-dark);
        text-decoration: none;
        font-weight: 600;
        margin-right: 8px;
    }

.iv-link-form[b-s3cvf82m4z] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 8px;
    margin-bottom: 14px;
}

/* ---------- modals ---------- */
.iv-overlay[b-s3cvf82m4z] {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.5);
    z-index: 100;
}

.iv-modal[b-s3cvf82m4z] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 700px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    padding: 0;
}

.iv-modal-head[b-s3cvf82m4z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid var(--iv-border);
    font-weight: 700;
    font-size: 14px;
}

.iv-modal-body[b-s3cvf82m4z] {
    padding: 18px 22px;
}

.iv-modal-grid[b-s3cvf82m4z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.iv-modal-linetotal[b-s3cvf82m4z] {
    grid-column: span 2;
    background: var(--iv-accent-bg);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: var(--iv-accent-dark);
}

.iv-modal-actions[b-s3cvf82m4z] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--iv-border);
}

/* ---------- fixed footer ---------- */
.iv-footer-bar[b-s3cvf82m4z] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1.5px solid var(--iv-border);
    box-shadow: 0 -6px 20px rgba(15,23,42,.08);
    z-index: 50;
    padding: 10px 12px;
}

.iv-footer-inner[b-s3cvf82m4z] {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

@media print {
    .iv-topbar[b-s3cvf82m4z], .iv-settings-panel[b-s3cvf82m4z], .iv-tabs[b-s3cvf82m4z], .iv-side[b-s3cvf82m4z], .iv-add-row-btn[b-s3cvf82m4z], .iv-footer-bar[b-s3cvf82m4z] {
        display: none !important;
    }

    .iv-panel-split[b-s3cvf82m4z] {
        grid-template-columns: 1fr;
    }

    .iv-card[b-s3cvf82m4z] {
        border: none;
        box-shadow: none;
    }
}

@media (max-width: 900px) {
    .iv-field-grid[b-s3cvf82m4z] {
        grid-template-columns: repeat(2, 1fr);
    }

    .iv-panel-split[b-s3cvf82m4z] {
        grid-template-columns: 1fr;
    }

    .iv-settings-panel[b-s3cvf82m4z] {
        grid-template-columns: repeat(2, 1fr);
    }

    .iv-three-col[b-s3cvf82m4z] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/TwoFactorAuth.razor.rz.scp.css */
/* ================================================================
   GAINS — TwoFactorAuth.razor.css  (v2 — full redesign)
================================================================ */

/* ── Page ── */
.tfa-page[b-p2x88xy2dr] {
    display: flex;
    min-height: 100vh;
    width: 100%;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
}

/* ════════════════════════════════════════════
   LEFT PANEL
════════════════════════════════════════════ */
.tfa-left[b-p2x88xy2dr] {
    width: 42%;
    min-width: 340px;
    background: linear-gradient(160deg, #071a12 0%, #0a2218 55%, #071a12 100%);
    display: flex;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* Radial glow */
.tfa-left[b-p2x88xy2dr]::before {
    content: '';
    position: absolute;
    top: -80px; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(ellipse,
        rgba(26,185,154,.22) 0%,
        rgba(26,185,154,.07) 40%,
        transparent 68%);
    animation: tfaGlow-b-p2x88xy2dr 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes tfaGlow-b-p2x88xy2dr {
    0%,100% { opacity:.5; transform: translateX(-50%) scale(1);    }
    50%      { opacity:1;  transform: translateX(-50%) scale(1.12); }
}

/* Dot grid */
.tfa-left[b-p2x88xy2dr]::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,.038) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.tfa-left-inner[b-p2x88xy2dr] {
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2.25rem;
    width: 100%;
    position: relative;
    z-index: 1;
    gap: 0;
}

/* Brand */
.tfa-brand[b-p2x88xy2dr]          { display: flex; align-items: center; gap: 14px; margin-bottom: 2rem; }
.tfa-brand-icon[b-p2x88xy2dr]     {
    width: 46px; height: 46px; border-radius: 11px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.tfa-logo-img[b-p2x88xy2dr]       { width: 34px; height: 34px; object-fit: contain; }
.tfa-brand-name[b-p2x88xy2dr]     { font-size: 21px; font-weight: 700; letter-spacing: .13em; color: #fff; line-height: 1.1; }
.tfa-brand-full[b-p2x88xy2dr]     { font-size: 10.5px; color: rgba(255,255,255,.38); margin-top: 2px; line-height: 1.4; }

/* Heading */
.tfa-mid[b-p2x88xy2dr] { margin-bottom: 1.6rem; }
.tfa-mid h2[b-p2x88xy2dr]      { font-size: 24px; font-weight: 700; color: #fff; line-height: 1.35; margin: 0 0 .65rem; }
.tfa-mid h2 span[b-p2x88xy2dr] { color: #1AB99A; }
.tfa-mid p[b-p2x88xy2dr]       { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.68; margin: 0; }

/* ── Install guide box ── */
.tfa-install-box[b-p2x88xy2dr] {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    padding: 18px 18px 20px;
    margin-bottom: 1.4rem;
    overflow: hidden;
}

/* Header row inside box */
.tfa-install-header[b-p2x88xy2dr] {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.tfa-gauth-logo-wrap[b-p2x88xy2dr] {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: rgba(26,185,154,.1);
    border: 1px solid rgba(26,185,154,.25);
    display: flex; align-items: center; justify-content: center;
    padding: 8px;
    box-shadow: 0 0 16px rgba(26,185,154,.15);
}
.tfa-gauth-logo[b-p2x88xy2dr] {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(26,185,154,.3));
}
.tfa-install-title[b-p2x88xy2dr] {
    font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2;
}
.tfa-install-sub[b-p2x88xy2dr] {
    font-size: 11px; color: rgba(255,255,255,.38); margin-top: 2px;
}

/* Method tabs */
.tfa-link-tabs[b-p2x88xy2dr] {
    display: flex; gap: 0; margin-bottom: 18px;
    background: rgba(0,0,0,.2); border-radius: 9px; padding: 3px;
}
.tfa-link-tab[b-p2x88xy2dr] {
    flex: 1; padding: 7px 10px;
    border-radius: 7px; border: none;
    background: transparent; cursor: pointer;
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,.4);
    font-family: inherit; transition: all .2s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.tfa-link-tab i[b-p2x88xy2dr] { font-size: 13px; }
.tfa-link-tab.active[b-p2x88xy2dr] {
    background: rgba(26,185,154,.2);
    color: #1AB99A;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.tfa-link-tab:not(.active):hover[b-p2x88xy2dr] { color: rgba(255,255,255,.65); }

/* Tab panes */
.tfa-tab-pane[b-p2x88xy2dr] { display: none; }
.tfa-tab-pane.active[b-p2x88xy2dr] { display: block; animation: tfaTabIn-b-p2x88xy2dr .2s ease; }
@keyframes tfaTabIn-b-p2x88xy2dr { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform: translateY(0); } }

/* ── Visual method steps ── */
.tfa-method-steps[b-p2x88xy2dr] { display: flex; flex-direction: column; }

.tfa-ms-item[b-p2x88xy2dr] {
    display: grid;
    grid-template-columns: 22px 2px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 12px;
    row-gap: 0;
}

.tfa-ms-num[b-p2x88xy2dr] {
    grid-row: 1; grid-column: 1;
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, #1AB99A, #0e8a73);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(26,185,154,.4);
    position: relative; z-index: 1;
    margin-top: 1px;
}

.tfa-ms-line[b-p2x88xy2dr] {
    grid-row: 2; grid-column: 2;
    width: 2px; background: rgba(26,185,154,.2);
    margin: 2px auto 0; height: 100%; min-height: 14px;
    border-radius: 2px;
    position: relative; left: -10px;
}
.tfa-ms-line-last[b-p2x88xy2dr] { background: transparent; }

.tfa-ms-body[b-p2x88xy2dr] {
    grid-row: 1 / 3; grid-column: 3;
    display: flex; align-items: flex-start; gap: 10px;
    padding-bottom: 16px;
}

.tfa-ms-icon[b-p2x88xy2dr] {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: rgba(255,255,255,.55);
}
.tfa-ms-icon-green[b-p2x88xy2dr] {
    background: rgba(26,185,154,.15) !important;
    border-color: rgba(26,185,154,.35) !important;
    color: #1AB99A !important;
}

.tfa-ms-txt[b-p2x88xy2dr] { flex: 1; }
.tfa-ms-title[b-p2x88xy2dr] {
    font-size: 12.5px; font-weight: 700; color: #fff;
    margin-bottom: 3px; line-height: 1.3;
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.tfa-ms-badge[b-p2x88xy2dr] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 4px;
    background: rgba(26,185,154,.2); border: 1px solid rgba(26,185,154,.4);
    font-size: 11px; color: #1AB99A; font-weight: 900; line-height: 1;
}
.tfa-ms-desc[b-p2x88xy2dr] {
    font-size: 11.5px; color: rgba(255,255,255,.45); line-height: 1.55;
}
.tfa-ms-desc strong[b-p2x88xy2dr] { color: rgba(255,255,255,.75); }
.tfa-ms-desc em[b-p2x88xy2dr]     { font-style: normal; color: #5eead4; }

/* Secret key rows (inside method step) */
.tfa-sk-rows[b-p2x88xy2dr] { display: flex; flex-direction: column; gap: 6px; }
.tfa-sk-row[b-p2x88xy2dr]  { display: flex; flex-direction: column; gap: 3px; }
.tfa-sk-lbl[b-p2x88xy2dr]  {
    font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: rgba(255,255,255,.3);
}
.tfa-sk-val[b-p2x88xy2dr]  {
    font-size: 11.5px; font-weight: 600; color: #fff;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    border-radius: 7px; padding: 5px 9px;
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.tfa-sk-val span[b-p2x88xy2dr] { word-break: break-all; font-family: 'Courier New', monospace; font-size: 11px; letter-spacing: .04em; }
.tfa-sk-copy[b-p2x88xy2dr] {
    width: 22px; height: 22px; border-radius: 5px;
    background: rgba(26,185,154,.15); border: none; cursor: pointer;
    color: #1AB99A; font-size: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s;
}
.tfa-sk-copy:hover[b-p2x88xy2dr] { background: rgba(26,185,154,.3); }

.tfa-scanned-tag[b-p2x88xy2dr] {
    display: inline-flex; align-items: center; gap: 5px;
    color: #34d399 !important; font-size: 11px !important;
}
.tfa-scanned-tag i[b-p2x88xy2dr] { font-size: 13px; }

/* ── Steps (returning user) ── */
.tfa-steps[b-p2x88xy2dr]      { display: flex; flex-direction: column; gap: 13px; }
.tfa-step[b-p2x88xy2dr]       { display: flex; align-items: flex-start; gap: 12px; }
.tfa-step-num[b-p2x88xy2dr]   {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(26,185,154,.18);
    border: 1px solid rgba(26,185,154,.38);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #1AB99A;
    flex-shrink: 0; margin-top: 1px;
}
.tfa-step-txt[b-p2x88xy2dr]          { font-size: 12.5px; color: rgba(255,255,255,.5); line-height: 1.55; }
.tfa-step-txt strong[b-p2x88xy2dr]   { color: #fff; display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }

/* App store buttons */
.tfa-store-label[b-p2x88xy2dr] {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: rgba(255,255,255,.3);
    margin-top: 1.4rem; margin-bottom: 8px;
}
.tfa-store-label i[b-p2x88xy2dr] { font-size: 12px; }
.tfa-store-btns[b-p2x88xy2dr] { display: flex; gap: 8px; }
.tfa-store-btn[b-p2x88xy2dr]  {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px; padding: 9px 16px; text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s;
    flex: 1; justify-content: center;
}
.tfa-store-btn:hover[b-p2x88xy2dr] {
    background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.22);
    transform: translateY(-1px);
}
.tfa-store-btn i[b-p2x88xy2dr] { font-size: 22px; color: #fff; }
.tfa-store-btn-txt .tfa-store-lbl[b-p2x88xy2dr] { font-size: 9px; color: rgba(255,255,255,.38); text-transform: uppercase; letter-spacing: .06em; }
.tfa-store-btn-txt .tfa-store-name[b-p2x88xy2dr] { font-size: 13px; font-weight: 700; color: #fff; }

/* ════════════════════════════════════════════
   RIGHT PANEL
════════════════════════════════════════════ */
.tfa-right[b-p2x88xy2dr] {
    flex: 1;
    background: #f0f4f9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    min-height: 100vh;
}

/* Card */
.tfa-card[b-p2x88xy2dr] {
    width: 100%;
    max-width: 450px;
    background: #fff;
    border: 1px solid #dde3ed;
    border-radius: 20px;
    padding: 28px 28px 24px;
    box-shadow: 0 4px 24px rgba(15,23,42,.07);
    transition: border-color .4s, box-shadow .4s;
    animation: tfaCardIn-b-p2x88xy2dr .45s cubic-bezier(.16,1,.3,1) both;
}
.tfa-card-success[b-p2x88xy2dr] {
    border-color: rgba(26,185,154,.4) !important;
    box-shadow: 0 4px 24px rgba(15,23,42,.06), 0 0 32px rgba(26,185,154,.1) !important;
}
@keyframes tfaCardIn-b-p2x88xy2dr {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Progress bar at top of card */
.tfa-card-progress-bar-wrap[b-p2x88xy2dr] {
    height: 3px; background: #f1f5f9;
    border-radius: 3px; margin-bottom: 20px; overflow: hidden;
}
.tfa-card-progress-bar[b-p2x88xy2dr] {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, #1AB99A, #34d399);
    transition: width .4s ease;
}

/* ── Card top: badge + shield ── */
.tfa-card-top[b-p2x88xy2dr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.tfa-mode-badge[b-p2x88xy2dr] {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 20px; padding: 5px 12px;
    font-size: 11.5px; font-weight: 600;
}
.tfa-mode-badge i[b-p2x88xy2dr]   { font-size: 13px; }
.tfa-mode-setup[b-p2x88xy2dr]     { background: #eff6ff; border: .5px solid #bfdbfe; color: #1e40af; }
.tfa-mode-verify[b-p2x88xy2dr]    { background: #f0fdf9; border: .5px solid #a7f3d0; color: #065f46; }

/* Animated shield */
.tfa-shield-wrap[b-p2x88xy2dr] {
    position: relative;
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tfa-ring[b-p2x88xy2dr] {
    position: absolute; border-radius: 50%;
    animation: tfaRing-b-p2x88xy2dr 2.8s ease-out infinite;
}
.tfa-ring-a[b-p2x88xy2dr] { width: 60px; height: 60px; border: 1.5px solid rgba(26,185,154,.35); animation-delay: 0s; }
.tfa-ring-b[b-p2x88xy2dr] { width: 44px; height: 44px; border: 1.5px solid rgba(26,185,154,.5);  animation-delay: .6s; }
@keyframes tfaRing-b-p2x88xy2dr {
    0%   { transform: scale(1);    opacity: .75; }
    60%  { transform: scale(1.12); opacity: .22; }
    100% { transform: scale(1.2);  opacity: 0;   }
}
.tfa-shield-icon[b-p2x88xy2dr] {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, #1AB99A, #0e8a73);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px; z-index: 1;
    box-shadow: 0 6px 18px rgba(26,185,154,.35);
    animation: tfaBob-b-p2x88xy2dr 3.2s ease-in-out infinite;
    transition: background .4s, box-shadow .4s;
}
.tfa-shield-err[b-p2x88xy2dr] {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    box-shadow: 0 6px 18px rgba(239,68,68,.35) !important;
    animation: tfaShake-b-p2x88xy2dr .42s ease !important;
}
.tfa-shield-ok[b-p2x88xy2dr] {
    background: linear-gradient(135deg, #34d399, #1AB99A) !important;
    box-shadow: 0 6px 18px rgba(26,185,154,.5) !important;
    animation: tfaBounce-b-p2x88xy2dr .5s cubic-bezier(.36,.07,.19,.97) !important;
}
@keyframes tfaBob-b-p2x88xy2dr    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes tfaShake-b-p2x88xy2dr  { 0%,100%{transform:translateX(0)} 18%{transform:translateX(-5px)} 36%{transform:translateX(5px)} 54%{transform:translateX(-3px)} 72%{transform:translateX(3px)} }
@keyframes tfaBounce-b-p2x88xy2dr { 0%{transform:scale(1)} 40%{transform:scale(1.18)} 70%{transform:scale(.92)} 100%{transform:scale(1)} }

/* Title / sub */
.tfa-title[b-p2x88xy2dr] { font-size: 20px; font-weight: 700; color: #111827; margin: 0 0 5px; }
.tfa-sub[b-p2x88xy2dr]   { font-size: 13px; color: #6b7280; margin: 0 0 14px; line-height: 1.5; }

/* Account badge */
.tfa-acct-badge[b-p2x88xy2dr] {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f0fdf9; border: .5px solid #a7f3d0;
    border-radius: 20px; padding: 4px 12px;
    font-size: 12px; color: #065f46; font-weight: 600;
    margin-bottom: 18px;
}
.tfa-acct-badge i[b-p2x88xy2dr] { font-size: 14px; color: #1AB99A; }

/* ════════════════════════════════
   QR / KEY SETUP (first login)
════════════════════════════════ */
.tfa-setup-grid[b-p2x88xy2dr] {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin-bottom: 12px;
}
.tfa-qr-panel[b-p2x88xy2dr] {
    background: #f9fafb; border: .5px solid #e5e7eb;
    border-radius: 12px; padding: 14px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.tfa-qr-label[b-p2x88xy2dr] {
    font-size: 10.5px; font-weight: 600; color: #6b7280;
    text-transform: uppercase; letter-spacing: .05em;
    display: flex; align-items: center; gap: 5px;
}
.tfa-qr-box[b-p2x88xy2dr] {
    width: 128px; height: 128px;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.tfa-qr-img[b-p2x88xy2dr]     { width: 120px; height: 120px; object-fit: contain; }
.tfa-qr-loading[b-p2x88xy2dr] { font-size: 26px; color: #1AB99A; }

.tfa-key-panel[b-p2x88xy2dr] {
    background: #f9fafb; border: .5px solid #e5e7eb;
    border-radius: 12px; padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.tfa-key-row[b-p2x88xy2dr]   { display: flex; flex-direction: column; gap: 3px; }
.tfa-key-lbl[b-p2x88xy2dr]   { font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .07em; }
.tfa-key-val[b-p2x88xy2dr]   { font-size: 12.5px; font-weight: 600; color: #111827; }
.tfa-key-secret[b-p2x88xy2dr] {
    font-size: 10px; font-family: 'Courier New', monospace;
    color: #065f46; background: #f0fdf9;
    border: .5px solid #a7f3d0; border-radius: 6px;
    padding: 5px 7px; word-break: break-all; line-height: 1.6;
}
.tfa-copy-btn[b-p2x88xy2dr] {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: .5px solid #e5e7eb;
    border-radius: 6px; padding: 4px 9px;
    font-size: 11px; color: #6b7280; cursor: pointer;
    font-family: inherit; transition: background .12s; width: fit-content;
}
.tfa-copy-btn:hover[b-p2x88xy2dr] { background: #f3f4f6; color: #111827; }
.tfa-copy-btn i[b-p2x88xy2dr]     { font-size: 13px; }

.tfa-setup-notice[b-p2x88xy2dr] {
    display: flex; align-items: flex-start; gap: 8px;
    background: #fffbeb; border: .5px solid #fde68a;
    border-radius: 8px; padding: 9px 11px;
    font-size: 11.5px; color: #92400e; margin-bottom: 16px;
    line-height: 1.5;
}
.tfa-setup-notice i[b-p2x88xy2dr] { font-size: 15px; color: #d97706; flex-shrink: 0; margin-top: 1px; }

/* ════════════════════════════════
   VERIFY SECTION (timer + OTP)
════════════════════════════════ */
.tfa-verify-section[b-p2x88xy2dr] {
    background: #f8fafc;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    padding: 16px 16px 14px;
    margin-bottom: 14px;
}

/* Timer pill */
.tfa-timer-pill[b-p2x88xy2dr] {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px; padding-bottom: 14px;
    border-bottom: 1px solid #e8edf5;
}
.tfa-timer-ring-wrap[b-p2x88xy2dr] {
    position: relative; width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.tfa-timer-svg[b-p2x88xy2dr]   { width: 44px; height: 44px; transform: rotate(-90deg); display: block; position: absolute; inset: 0; }
.tfa-timer-track[b-p2x88xy2dr] { fill: none; stroke: #e2e8f0; stroke-width: 3.5; }
.tfa-timer-fill[b-p2x88xy2dr]  { fill: none; stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray 1s linear, stroke .6s; }
.tfa-timer-num[b-p2x88xy2dr]   {
    font-size: 13px; font-weight: 800;
    font-family: 'Courier New', monospace;
    line-height: 1; position: relative; z-index: 1;
    transition: color .6s;
}
.tfa-timer-text[b-p2x88xy2dr]  { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.tfa-timer-label[b-p2x88xy2dr] { font-size: 11.5px; font-weight: 600; transition: color .4s; }
.tfa-timer-bar-wrap[b-p2x88xy2dr] { height: 4px; border-radius: 3px; background: #e2e8f0; overflow: hidden; }
.tfa-timer-bar[b-p2x88xy2dr]   { height: 100%; border-radius: 3px; transition: width 1s linear, background .6s; }
.tfa-refresh-btn[b-p2x88xy2dr] {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid #e2e8f0; background: #fff;
    cursor: pointer; color: #6b7280; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s; flex-shrink: 0;
}
.tfa-refresh-btn:hover:not(:disabled)[b-p2x88xy2dr] { background: #f1f5f9; color: #1a2537; }
.tfa-refresh-btn:disabled[b-p2x88xy2dr] { opacity: .4; cursor: not-allowed; }

/* OTP */
.tfa-otp-label[b-p2x88xy2dr] {
    font-size: 11px; font-weight: 600; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .07em;
    margin-bottom: 10px;
}
.tfa-otp-row[b-p2x88xy2dr] {
    display: flex; align-items: center;
    justify-content: center; gap: 7px;
    margin-bottom: 10px;
}
.tfa-otp-sep[b-p2x88xy2dr] { font-size: 18px; color: #cbd5e1; margin: 0 2px; user-select: none; }
.tfa-otp-input[b-p2x88xy2dr] {
    width: 48px; height: 56px; border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: #fff; color: #111827;
    font-size: 24px; font-weight: 700;
    text-align: center;
    font-family: 'Courier New', monospace;
    outline: none; caret-color: #1AB99A;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
    animation: tfaBoxIn-b-p2x88xy2dr .35s cubic-bezier(.16,1,.3,1) both;
}
.tfa-otp-row input:nth-child(1)[b-p2x88xy2dr] { animation-delay: .03s; }
.tfa-otp-row input:nth-child(2)[b-p2x88xy2dr] { animation-delay: .07s; }
.tfa-otp-row input:nth-child(3)[b-p2x88xy2dr] { animation-delay: .11s; }
.tfa-otp-row input:nth-child(5)[b-p2x88xy2dr] { animation-delay: .17s; }
.tfa-otp-row input:nth-child(6)[b-p2x88xy2dr] { animation-delay: .21s; }
.tfa-otp-row input:nth-child(7)[b-p2x88xy2dr] { animation-delay: .25s; }
@keyframes tfaBoxIn-b-p2x88xy2dr {
    from { opacity: 0; transform: translateY(8px) scale(.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tfa-otp-input[b-p2x88xy2dr]::placeholder { color: #d1d5db; font-size: 16px; }
.tfa-otp-input:focus[b-p2x88xy2dr] {
    border-color: #1AB99A;
    background: rgba(26,185,154,.05);
    box-shadow: 0 0 0 3px rgba(26,185,154,.15);
    transform: translateY(-2px) scale(1.05);
}
.tfa-inp-filled:not(:focus)[b-p2x88xy2dr] {
    border-color: rgba(26,185,154,.5);
    background: rgba(26,185,154,.04);
}
.tfa-inp-err[b-p2x88xy2dr] {
    border-color: #ef4444 !important;
    background: rgba(239,68,68,.05) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
    color: #b91c1c !important;
    animation: tfaShake-b-p2x88xy2dr .42s ease !important;
    transform: none !important;
}
.tfa-inp-ok[b-p2x88xy2dr] {
    border-color: #1AB99A !important;
    background: rgba(26,185,154,.07) !important;
    box-shadow: 0 0 0 3px rgba(26,185,154,.15) !important;
    color: #065f46 !important;
}
.tfa-otp-input:disabled[b-p2x88xy2dr] { opacity: .4; cursor: not-allowed; transform: none !important; }

/* Fill dots */
.tfa-fill-track[b-p2x88xy2dr] { display: flex; justify-content: center; gap: 8px; }
.tfa-fill-dot[b-p2x88xy2dr]   {
    width: 6px; height: 6px; border-radius: 50%;
    background: #e2e8f0;
    transition: background .2s, transform .2s, box-shadow .2s;
}
.tfa-fill-on[b-p2x88xy2dr]              { background: #34d399 !important; transform: scale(1.3); box-shadow: 0 0 6px rgba(52,211,153,.5); }
.tfa-fill-err.tfa-fill-on[b-p2x88xy2dr] { background: #ef4444 !important; box-shadow: 0 0 6px rgba(239,68,68,.4) !important; }

/* ════════════════════════════════
   ALERTS
════════════════════════════════ */
.tfa-alert[b-p2x88xy2dr] {
    display: flex; align-items: center; gap: 9px;
    border-radius: 10px; padding: 10px 13px;
    font-size: 12.5px; font-weight: 500;
    margin-bottom: 12px;
    animation: tfaAlertIn-b-p2x88xy2dr .28s cubic-bezier(.16,1,.3,1) both;
}
@keyframes tfaAlertIn-b-p2x88xy2dr {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tfa-alert i[b-p2x88xy2dr]    { font-size: 16px; flex-shrink: 0; }
.tfa-alert-err[b-p2x88xy2dr]  { background: rgba(239,68,68,.07); border: .5px solid rgba(239,68,68,.28); color: #b91c1c; }
.tfa-alert-ok[b-p2x88xy2dr]   { background: rgba(26,185,154,.07); border: .5px solid rgba(26,185,154,.28); color: #065f46; }

/* ════════════════════════════════
   VERIFY BUTTON
════════════════════════════════ */
.tfa-validate-btn[b-p2x88xy2dr] {
    width: 100%; height: 46px; border: none;
    border-radius: 12px; background: #e2e8f0; color: #9ca3af;
    font-size: 14px; font-weight: 700; cursor: not-allowed;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; transition: all .2s; margin-bottom: 12px;
}
.tfa-btn-ready[b-p2x88xy2dr] {
    background: linear-gradient(135deg, #1AB99A, #0e8a73) !important;
    color: #fff !important; cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(26,185,154,.3);
}
.tfa-btn-ready:hover[b-p2x88xy2dr]  { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(26,185,154,.4); }
.tfa-btn-ready:active[b-p2x88xy2dr] { transform: translateY(0); }
.tfa-btn-done[b-p2x88xy2dr] {
    background: linear-gradient(135deg, #059669, #064e3b) !important;
    color: #fff !important; cursor: default !important;
}
.tfa-validate-btn i[b-p2x88xy2dr] { font-size: 17px; }

.tfa-spin[b-p2x88xy2dr] { animation: tfaSpin-b-p2x88xy2dr .65s linear infinite; display: inline-block; }
@keyframes tfaSpin-b-p2x88xy2dr { to { transform: rotate(360deg); } }

.tfa-back-row[b-p2x88xy2dr] {
    display: flex; align-items: center; justify-content: center;
    gap: 5px; font-size: 12.5px; color: #9ca3af;
}
.tfa-back-row i[b-p2x88xy2dr]   { font-size: 12px; }
.tfa-back-row a[b-p2x88xy2dr]   { color: #1AB99A; text-decoration: none; font-weight: 600; }
.tfa-back-row a:hover[b-p2x88xy2dr] { color: #0e8a73; }

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 960px) {
    .tfa-page[b-p2x88xy2dr]  { flex-direction: column; }
    .tfa-left[b-p2x88xy2dr]  { width: 100%; min-width: unset; }
    .tfa-left-inner[b-p2x88xy2dr] { padding: 1.75rem 1.5rem; }
    .tfa-right[b-p2x88xy2dr] { padding: 1.5rem 1rem; min-height: unset; }
    .tfa-card[b-p2x88xy2dr]  { max-width: 100%; }
    .tfa-setup-grid[b-p2x88xy2dr] { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .tfa-otp-input[b-p2x88xy2dr] { width: 42px; height: 50px; font-size: 20px; }
    .tfa-otp-row[b-p2x88xy2dr]   { gap: 5px; }
    .tfa-card[b-p2x88xy2dr]      { padding: 20px 16px 18px; border-radius: 14px; }
}
/* /Components/Shared/AddGeneralDocument.razor.rz.scp.css */
/* AddGeneralDocument — shared modal, matches legacy 417px popup */

.agd-overlay[b-vvw24nd4ad] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 190;
}

.agd-modal[b-vvw24nd4ad] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 20px));
    background: #fff;
    border-radius: 6px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
    font-size: 13px;
}

.agd-head[b-vvw24nd4ad] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #306B9C;
    color: #fff;
    font-size: 14.5px;
}

.agd-x[b-vvw24nd4ad] {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.agd-body[b-vvw24nd4ad] {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agd-row[b-vvw24nd4ad] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.agd-row > label[b-vvw24nd4ad] {
    width: 35%;
    font-weight: 600;
    color: #374151;
    padding-top: 7px;
    margin: 0;
}

.agd-input[b-vvw24nd4ad] {
    flex: 1;
    height: 34px;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    color: #374151;
    background: #fff;
    outline: none;
    width: 65%;
}

.agd-input:focus[b-vvw24nd4ad] {
    border-color: #306B9C;
    box-shadow: 0 0 0 2px rgba(48, 107, 156, .15);
}

.agd-desc[b-vvw24nd4ad] {
    height: 90px;
    resize: none;
}

.agd-file[b-vvw24nd4ad] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.agd-file[b-vvw24nd4ad]  input[type="file"] {
    font-size: 12.5px;
    max-width: 100%;
}

.agd-filelist[b-vvw24nd4ad] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.agd-filechip[b-vvw24nd4ad] {
    background: #eef4f9;
    color: #306B9C;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11.5px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agd-msg[b-vvw24nd4ad] {
    padding: 8px 10px;
    border-radius: 4px;
    font-weight: 600;
}

.agd-msg-ok[b-vvw24nd4ad] {
    background: #ecfdf5;
    color: #15803d;
    border-left: 3px solid #15803d;
}

.agd-msg-error[b-vvw24nd4ad] {
    background: #fdf3f3;
    color: #c0392b;
    border-left: 3px solid #c0392b;
}

.agd-foot[b-vvw24nd4ad] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #e5e7eb;
}

.agd-btn[b-vvw24nd4ad] {
    height: 32px;
    padding: 0 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.agd-btn:hover:not(:disabled)[b-vvw24nd4ad] {
    background: #f5f5f5;
}

.agd-btn:disabled[b-vvw24nd4ad] {
    opacity: .5;
    cursor: not-allowed;
}

.agd-btn-primary[b-vvw24nd4ad] {
    background: #306B9C;
    border-color: #306B9C;
    color: #fff;
}

.agd-btn-primary:hover:not(:disabled)[b-vvw24nd4ad] {
    background: #285a84;
}
/* /Components/Shared/Autofill/CustomerAutofill.razor.rz.scp.css */
.lga-wrap[b-hubm6nfrej] {
    position: relative;
    width: 100%;
}

.lga-spin[b-hubm6nfrej] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
    pointer-events: none;
}

.lga-suggest[b-hubm6nfrej] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
    max-height: 260px;
    overflow-y: auto;
}

.lga-suggest li[b-hubm6nfrej] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #1a2537;
}

.lga-suggest li:hover[b-hubm6nfrej],
.lga-suggest li.active[b-hubm6nfrej] {
    background: #eef4fb;
}

.lga-suggest li.lga-empty[b-hubm6nfrej] {
    cursor: default;
    color: #94a3b8;
    font-size: 12.5px;
}

.lga-suggest li.lga-empty:hover[b-hubm6nfrej] {
    background: transparent;
}

.lga-name[b-hubm6nfrej] {
    font-weight: 500;
}
/* /Components/Shared/GreenCalendarPicker.razor.rz.scp.css */
/* Components/Shared/GreenCalendarPicker.razor.css
   Ported from GSINS_BS.aspx's .mainObject / .filterObject / .leftElement /
   .CalElement / .monthElement rules, then redesigned: the legacy layout used
   flex rows where each row's buttons stretched to fill available width, so a
   3-button row (Today/T-1/3D) and a 1-button row (Y) ended up with wildly
   different button sizes and nothing lined up into columns. Fixed-width
   buttons + a real divider fixes that while keeping the same left-buttons /
   right-month-grid shape. */

.gcp-wrap[b-rdwmybyczk] {
    position: relative;
    display: inline-flex;
    flex: 0 0 34px;
}

/* Proper icon-button box (matches the input's 34px height and the "C"
   clear-dates button next to it) instead of a bare floating icon with no
   visual weight of its own. */
.gcp-trigger[b-rdwmybyczk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #fff;
    border: 1px solid #dde3ed;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

    .gcp-trigger:hover[b-rdwmybyczk] {
        border-color: #1a56a7;
        background: #f7faff;
    }

.gcp-icon[b-rdwmybyczk] {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.gcp-overlay[b-rdwmybyczk] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

/* Side-by-side layout (buttons left, month grid right), sized against the
   drawer's REAL usable width: .mu-drawer is a fixed 320px with 18px padding
   each side (masters-forms.css), leaving only 284px of content.

   Buttons size to their own label (auto width + nowrap) rather than one
   global fixed width — "Today" (5 chars) needs more room than "Q1" (2
   chars), and forcing every button to match "Today"'s width would blow the
   Q1-Q4 row (4 buttons) past the drawer's budget again. Auto-width still
   gives deterministic, consistent sizing per label (that's what actually
   fixes the original stretch-to-fill bug) without wasting space. */
.gcp-panel[b-rdwmybyczk] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    z-index: 41;
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: max-content;
    max-width: 284px;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    padding: 10px;
    font-family: 'Segoe UI', Arial, sans-serif;
    box-shadow: 0 14px 32px rgba(16, 24, 40, .16), 0 3px 8px rgba(16, 24, 40, .08);
}

.gcp-left[b-rdwmybyczk] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-right: 10px;
    border-right: 1px solid #e5e8ed;
}

.gcp-row[b-rdwmybyczk] {
    display: flex;
    gap: 4px;
}

/* box-sizing: border-box is the key fix here — without it, padding was
   being added ON TOP OF the fixed nth-child widths below (so a "40px"
   button was actually rendering wider than 40px), which is why earlier
   passes kept overflowing budget unpredictably. With border-box, the
   width values below ARE the final rendered width, padding included —
   sizing is now predictable, which is what let this pass safely use the
   leftover budget for bigger buttons instead of guessing. */
.gcp-btn[b-rdwmybyczk] {
    box-sizing: border-box;
    height: 28px;
    padding: 0 4px;
    white-space: nowrap;
    text-align: center;
    background: #f4f7fb;
    border: 1px solid transparent;
    color: #24518f;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 5px;
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}

/* Column 1: Today / W / M / Q1 / Y — "Today" is the widest label here */
.gcp-row .gcp-btn:nth-child(1)[b-rdwmybyczk] {
    width: 42px;
}

/* Column 2: T-1 / W-1 / M-1 / Q2 */
.gcp-row .gcp-btn:nth-child(2)[b-rdwmybyczk] {
    width: 32px;
}

/* Column 3: 3D / Q3 */
.gcp-row .gcp-btn:nth-child(3)[b-rdwmybyczk] {
    width: 27px;
}

/* Column 4: Q4 */
.gcp-row .gcp-btn:nth-child(4)[b-rdwmybyczk] {
    width: 24px;
}

.gcp-btn:hover[b-rdwmybyczk] {
    background: #e8f0fd;
    border-color: #bcd6f7;
    color: #1a56a7;
    box-shadow: 0 1px 3px rgba(26, 86, 167, .12);
}

.gcp-btn:active[b-rdwmybyczk] {
    background: #d7e6fb;
}

.gcp-right[b-rdwmybyczk] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* No separate background/border container here anymore — the grey-box-
   holding-white-buttons look clashed with the flatter left side and made
   this read as two mismatched widgets glued together. Buttons now share
   the same fill color as .gcp-btn directly, so both halves read as one
   consistent set. */
.gcp-months[b-rdwmybyczk] {
    display: grid;
    grid-template-columns: repeat(3, 31px);
    gap: 4px;
}

.gcp-month[b-rdwmybyczk] {
    box-sizing: border-box;
    height: 28px;
    padding: 0 4px;
    white-space: nowrap;
    text-align: center;
    background: #f4f7fb;
    border: 1px solid transparent;
    color: #24518f;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 5px;
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}

    .gcp-month:hover[b-rdwmybyczk] {
        background: #e8f0fd;
        border-color: #bcd6f7;
        color: #1a56a7;
        box-shadow: 0 1px 3px rgba(26, 86, 167, .12);
    }

    .gcp-month:active[b-rdwmybyczk] {
        background: #d7e6fb;
    }
/* /Components/Shared/ItemAutofill.razor.rz.scp.css */
.ia-wrap[b-ryf4oe94f4] {
    position: relative;
    width: 100%;
}

.ia-spin[b-ryf4oe94f4] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
    pointer-events: none;
}

.ia-suggest[b-ryf4oe94f4] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
    max-height: 260px;
    overflow-y: auto;
}

.ia-suggest li[b-ryf4oe94f4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #1a2537;
}

.ia-suggest li:hover[b-ryf4oe94f4],
.ia-suggest li.active[b-ryf4oe94f4] {
    background: #eef4fb;
}

.ia-suggest li.ia-empty[b-ryf4oe94f4] {
    cursor: default;
    color: #94a3b8;
    font-size: 12.5px;
}

.ia-suggest li.ia-empty:hover[b-ryf4oe94f4] {
    background: transparent;
}

.ia-name[b-ryf4oe94f4] {
    font-weight: 500;
}
/* /Components/Shared/LedgerAutofill.razor.rz.scp.css */
.lga-wrap[b-ao5khswua8] {
    position: relative;
    width: 100%;
}

.lga-spin[b-ao5khswua8] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
    pointer-events: none;
}

.lga-suggest[b-ao5khswua8] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
    max-height: 260px;
    overflow-y: auto;
}

.lga-suggest li[b-ao5khswua8] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #1a2537;
}

.lga-suggest li:hover[b-ao5khswua8],
.lga-suggest li.active[b-ao5khswua8] {
    background: #eef4fb;
}

.lga-suggest li.lga-empty[b-ao5khswua8] {
    cursor: default;
    color: #94a3b8;
    font-size: 12.5px;
}

.lga-suggest li.lga-empty:hover[b-ao5khswua8] {
    background: transparent;
}

.lga-name[b-ao5khswua8] {
    font-weight: 500;
}
/* /Components/Shared/Loader.razor.rz.scp.css */
/* ================================================================
   GAINS Common Loader — Loader.razor.css
   Transparent overlay, GAINS logo centred inside a spinning ring.
================================================================ */

.gl-overlay[b-3cs277499y] {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Transparent background — only a faint frosted veil so the logo reads */
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Cover the entire viewport when requested */
.gl-fullscreen[b-3cs277499y] {
    position: fixed;
}

.gl-box[b-3cs277499y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* ── Spinner: ring rotates, logo stays still ── */
.gl-spinner[b-3cs277499y] {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gl-ring[b-3cs277499y] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid transparent;
    /* Gradient ring matching the GAINS green→blue brand */
    border-top-color: #2ec27e;
    border-right-color: #1ab99a;
    border-bottom-color: #2176c7;
    animation: gl-spin-b-3cs277499y 0.9s linear infinite;
}

.gl-logo[b-3cs277499y] {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: transparent;          /* keep the PNG's own transparency */
    animation: gl-pulse-b-3cs277499y 1.6s ease-in-out infinite;
}

.gl-msg[b-3cs277499y] {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
    letter-spacing: 0.01em;
}

/* Visually-hidden text for screen readers */
.gl-sr[b-3cs277499y] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes gl-spin-b-3cs277499y {
    to { transform: rotate(360deg); }
}

@keyframes gl-pulse-b-3cs277499y {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(0.92); opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
    .gl-ring[b-3cs277499y] { animation-duration: 2s; }
    .gl-logo[b-3cs277499y] { animation: none; }
}
/* /Components/Shared/LocationAutofill.razor.rz.scp.css */
.loc-wrap[b-c4u23658a0] {
    position: relative;
    width: 100%;
}

.loc-spin[b-c4u23658a0] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
    pointer-events: none;
}

.loc-suggest[b-c4u23658a0] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15,23,42,.16);
    max-height: 260px;
    overflow-y: auto;
}

    .loc-suggest li[b-c4u23658a0] {
        display: flex;
        flex-direction: column;
        gap: 1px;
        padding: 7px 10px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        color: #1a2537;
    }

        .loc-suggest li:hover[b-c4u23658a0],
        .loc-suggest li.active[b-c4u23658a0] {
            background: #eef4fb;
        }

        .loc-suggest li.loc-empty[b-c4u23658a0] {
            cursor: default;
            color: #94a3b8;
            font-size: 12.5px;
        }

.loc-name[b-c4u23658a0] {
    font-weight: 500;
}
/* /Components/Shared/LoginAutofill.razor.rz.scp.css */
.loa-wrap[b-8s490s9azt] {
    position: relative;
    width: 100%;
}

.loa-spin[b-8s490s9azt] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
    pointer-events: none;
}

.loa-suggest[b-8s490s9azt] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
    max-height: 260px;
    overflow-y: auto;
}

    .loa-suggest li[b-8s490s9azt] {
        display: flex;
        flex-direction: column;
        gap: 1px;
        padding: 7px 10px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        color: #1a2537;
    }

        .loa-suggest li:hover[b-8s490s9azt],
        .loa-suggest li.active[b-8s490s9azt] {
            background: #eef4fb;
        }

        .loa-suggest li.loa-empty[b-8s490s9azt] {
            cursor: default;
            color: #94a3b8;
            font-size: 12.5px;
        }

            .loa-suggest li.loa-empty:hover[b-8s490s9azt] {
                background: transparent;
            }

        .loa-suggest li.loa-error[b-8s490s9azt] {
            color: #b91c1c;
            white-space: normal;
            word-break: break-word;
        }

.loa-name[b-8s490s9azt] {
    font-weight: 500;
}
/* /Components/Shared/NavSection.razor.rz.scp.css */
.gl-ns[b-e51upb9o84] {
    margin: 2px 0;
}

.gl-ns-trigger[b-e51upb9o84] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-align: left;
    transition: background 0.12s, color 0.12s;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

    .gl-ns-trigger:hover[b-e51upb9o84],
    .gl-ns-trigger.open[b-e51upb9o84] {
        color: rgba(255,255,255,0.85);
        background: rgba(255,255,255,0.04);
    }

.gl-ns-left[b-e51upb9o84] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gl-ns-icon[b-e51upb9o84] {
    font-size: 15px;
    color: #1AB99A;
}

.gl-ns-chevron[b-e51upb9o84] {
    font-size: 13px;
    color: rgba(255,255,255,0.3);
    transition: transform 0.2s;
}

    .gl-ns-chevron.open[b-e51upb9o84] {
        transform: rotate(180deg);
    }

.gl-ns-children[b-e51upb9o84] {
    padding: 2px 0 4px;
}
/* /Components/Shared/QgDatePicker.razor.rz.scp.css */
.qgdp-wrap[b-mfkp1nq8cc] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d6dbe1;
    border-radius: 4px;
    background: #fff;
    padding: 5px 8px;
    font-size: 13px;
}

.qgdp-icon-btn[b-mfkp1nq8cc] {
    border: none;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #b3261e;
    width: 16px;
    height: 16px;
}

.qgdp-icon-btn svg[b-mfkp1nq8cc] {
    width: 16px;
    height: 16px;
}

.qgdp-display[b-mfkp1nq8cc] {
    cursor: pointer;
    color: #333;
    white-space: nowrap;
    user-select: none;
}

.qgdp-overlay[b-mfkp1nq8cc] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: transparent;
}

.qgdp-popup[b-mfkp1nq8cc] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1401;
    background: #fff;
    border: 1px solid #d6dbe1;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 10px;
    width: 260px;
}

.qgdp-hdr[b-mfkp1nq8cc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.qgdp-title[b-mfkp1nq8cc] {
    font-weight: 600;
    color: #1a56a7;
    font-size: 13px;
}

.qgdp-nav[b-mfkp1nq8cc] {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 15px;
    color: #1a56a7;
    padding: 2px 6px;
    border-radius: 4px;
}

.qgdp-nav:hover[b-mfkp1nq8cc] {
    background: #eef3fb;
}

.qgdp-grid[b-mfkp1nq8cc] {
    width: 100%;
    border-collapse: collapse;
}

.qgdp-grid th[b-mfkp1nq8cc] {
    font-size: 11px;
    color: #8a94a6;
    font-weight: 600;
    padding: 2px 0;
    text-align: center;
}

.qgdp-wk[b-mfkp1nq8cc] {
    font-size: 10px;
    color: #b0b7c3;
    text-align: center;
    width: 20px;
}

.qgdp-grid td[b-mfkp1nq8cc] {
    text-align: center;
    padding: 1px;
}

.qgdp-day[b-mfkp1nq8cc] {
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    color: #333;
}

.qgdp-day:hover[b-mfkp1nq8cc] {
    background: #eef3fb;
}

.qgdp-outside[b-mfkp1nq8cc] {
    color: #c4c9d2;
}

.qgdp-today[b-mfkp1nq8cc] {
    font-weight: 700;
    color: #1a56a7;
}

.qgdp-selected[b-mfkp1nq8cc] {
    background: #1a56a7 !important;
    color: #fff !important;
    font-weight: 600;
}

.qgdp-foot[b-mfkp1nq8cc] {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
    border-top: 1px solid #eef1f4;
    padding-top: 6px;
}

.qgdp-today-btn[b-mfkp1nq8cc] {
    border: none;
    background: none;
    color: #1ab394;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
}

.qgdp-today-btn:hover[b-mfkp1nq8cc] {
    text-decoration: underline;
}
/* /Components/Shared/Registergridshared.razor.rz.scp.css */
/* =====================================================================
   GAINS — RegisterGridShared.razor.css   (page-scoped, child component
   rendered inside SalesRegister.razor / PurchaseRegister.razor)

   Base look already loaded GLOBALLY, do NOT redefine here:
     - masters-forms.css   → mu-* grid/table/pager/drawer/toast system,
                              uf-* modal system, bspl-*/

/*gl-* page chrome,
gdp-* datepicker, gn-* nav loader
This file adds ONLY:
(a) .ql-* classes — these come from QLedger.razor.css, but Blazor
CSS isolation scopes a .razor.css file to only that component's
own rendered markup. QLedger's .ql-* rules never reach this
component even though the class names match, so every .ql-*
class used in this component's markup needs its own copy here
(same reasoning, same copied rules, as Registers.razor.css).
(b) a handful of small overrides on top of masters-forms.css's
global .mu-table / .mu-card / .mu-table-wrap so this page's
grid fills the available height instead of the default fixed
540px card (same "sizing chain" override Registers.razor.css
         and QLedger.razor.css both carry).
(c) spr-* — genuinely new to this page (AC-redirect button, the
         Summary options popup).*/
===================================================================== */
/* ── Tabs / section pills (Purchase Reg / Sales Reg / Stock Reg / Summary) ── */
.ql-sections[b-dj50c8u2oa] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0px 0px 0px 10px;
}

.ql-section[b-dj50c8u2oa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid #dde3ed;
    background: #fff;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 400;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .ql-section i[b-dj50c8u2oa] {
        font-size: 15px;
    }

    .ql-section:hover[b-dj50c8u2oa] {
        background: #f1f5f9;
        color: #1a2537;
    }

    .ql-section.active[b-dj50c8u2oa] {
        background: #1ab99a;
        border-color: #1ab99a;
        color: #fff;
    }

.ql-body[b-dj50c8u2oa] {
    display: flex;
    gap: 16px;
    align-items: stretch;
    overflow: hidden;
}

.ql-vnum[b-dj50c8u2oa] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .ql-vnum:hover[b-dj50c8u2oa] {
        text-decoration: underline;
    }

/* Empty / error states */
.ql-empty-state[b-dj50c8u2oa] {
    text-align: center;
    color: #64748b;
    padding: 48px 16px;
    font-size: 13.5px;
}

    .ql-empty-state p[b-dj50c8u2oa] {
        margin: 4px 0;
    }

    .ql-empty-state strong[b-dj50c8u2oa] {
        color: #1a2537;
    }

.ql-error[b-dj50c8u2oa] {
    color: #dc2626;
}

.ql-field[b-dj50c8u2oa] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    color: #64748b;
}

.ql-led-row[b-dj50c8u2oa] {
    display: flex;
    gap: 6px;
}

    .ql-led-row input[b-dj50c8u2oa] {
        flex: 1;
        min-width: 0;
    }

.ql-led-pick[b-dj50c8u2oa] {
    cursor: pointer;
    background: #fff;
}

.ql-led-btn[b-dj50c8u2oa] {
    flex: 0 0 36px;
    border-radius: 8px;
    border: 1px solid #1a56a7;
    background: #1a56a7;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .ql-led-btn:hover[b-dj50c8u2oa] {
        background: #0f3d82;
    }

/* ── Party (ledger) picker popup: QL additions over global uf-modal ── */
.ql-lp-overlay[b-dj50c8u2oa] {
    z-index: 1300;
}

.ql-lp-modal[b-dj50c8u2oa] {
    max-width: 760px;
    max-height: 80vh;
}

.ql-modal-search[b-dj50c8u2oa] {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcfe;
}

    .ql-modal-search .uf-input[b-dj50c8u2oa] {
        flex: 1 1 auto;
        min-width: 0;
    }

.ql-lp-code[b-dj50c8u2oa] {
    flex: 0 1 120px !important;
}

.ql-modal-body[b-dj50c8u2oa] {
    flex: 1;
    overflow-y: auto;
}

.ql-lp-row[b-dj50c8u2oa] {
    cursor: pointer;
}

.ql-lp-idx[b-dj50c8u2oa] {
    width: 56px;
}

.mu-table tbody td.ql-lp-idx[b-dj50c8u2oa] {
    color: #1a56a7;
    font-weight: 600;
}

.ql-lp-name[b-dj50c8u2oa] {
    color: #1a56a7;
    font-weight: 500;
}

/* =====================================================================
   Sizing chain — same fix as Registers.razor.css / QLedger.razor.css.
   masters-forms.css's global .mu-table-wrap gives it a fixed 540px
   height; this overrides that so the whole .mu-page → .ql-body →
   .mu-card → .mu-table-wrap chain instead fills available height as a
   flex column, with only .mu-table-wrap scrolling.
   ===================================================================== */
.mu-page[b-dj50c8u2oa] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
}

.ql-body[b-dj50c8u2oa] {
    flex: 1;
    min-height: 0;
}

    .ql-body .mu-card[b-dj50c8u2oa] {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
    }

    .ql-body .mu-table-wrap[b-dj50c8u2oa] {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow: auto;
    }

.mu-table thead th[b-dj50c8u2oa] {
    position: sticky;
    z-index: 3;
}

/* Two-row thead (plain header row, or "Taxes" colspan + CGST/SGST/IGST
   row underneath it): row 1 sticks at top:0 same as before. Row 2 needs
   an offset equal to row 1's height, or it sticks at top:0 too and ends
   up overlapping/hidden behind row 1's rowspan="2" cells on scroll —
   that's the bug in the screenshot. :not(:first-child) only ever matches
   when a second row genuinely exists, so single-row tables (no tax
   columns) are unaffected. */
.mu-table thead tr:first-child th[b-dj50c8u2oa] {
    top: 0;
    height: 40px;
}

.mu-table thead tr:not(:first-child) th[b-dj50c8u2oa] {
    top: 40px;
}

.mu-table tfoot td[b-dj50c8u2oa] {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: #fbfcfe;
}

/* ── Amount column formatting — masters-forms.css has no .num/.cr
   convention, so this grid's numeric columns need it defined here ── */
.mu-table thead th.num[b-dj50c8u2oa] {
    text-align: right;
}

.mu-table td.num[b-dj50c8u2oa] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mu-total-row[b-dj50c8u2oa] {
    height: 40px;
    background: #fff;
}

/* Fixed page footer — not global; QLedger-specific sticky-footer behavior */
.ql-footer-fixed[b-dj50c8u2oa] {
    position: sticky;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid #dde3ed;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}

/* =====================================================================
   New to this page (not in masters-forms.css or QLedger.razor.css)
   ===================================================================== */

/* "A/C Purchase Register" — sits apart from the ql-section tab pills,
   matches the white icon-button style in the reference screenshot */
.spr-ac-btn[b-dj50c8u2oa] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #dde3ed;
    color: #1a2537;
    font-weight: 600;
    font-size: 12.5px;
}

    .spr-ac-btn i[b-dj50c8u2oa] {
        color: #1ab99a;
    }

    .spr-ac-btn:hover[b-dj50c8u2oa] {
        background: #f3f4f6;
    }

/* Summary options popup (matches the stacked-button screenshot) */
.spr-summary-modal[b-dj50c8u2oa] {
    width: min(280px, 90vw);
}

.spr-summary-list[b-dj50c8u2oa] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.spr-summary-btn[b-dj50c8u2oa] {
    padding: 12px 16px;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    background: #fff;
    color: #1a2537;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

    .spr-summary-btn:hover[b-dj50c8u2oa] {
        background: #f1f5f9;
        border-color: #1ab99a;
    }

.spr-tax-group[b-dj50c8u2oa] {
    text-align: center;
}
/* /Components/Shared/Reports/Report24Q.razor.rz.scp.css */
.rpt24q-wrap[b-1fypeqz2l6] {
    padding: 24px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #000;
    background: #fff;
}

.rpt24q-header[b-1fypeqz2l6] {
    text-align: center;
    position: relative;
    margin-bottom: 16px;
}

    .rpt24q-header h2[b-1fypeqz2l6] {
        margin: 0;
    }

.rpt24q-print-btn[b-1fypeqz2l6] {
    position: absolute;
    left: 0;
    top: 0;
    background: none;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
}

.rpt24q-bold[b-1fypeqz2l6] {
    font-weight: 700;
    text-align: center;
    margin: 4px 0;
}

.rpt24q-particulars[b-1fypeqz2l6] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.rpt24q-srno[b-1fypeqz2l6] {
    width: 30px;
    vertical-align: top;
    font-weight: 700;
    padding-top: 6px;
}

.rpt24q-section-title[b-1fypeqz2l6] {
    font-weight: 600;
    padding-bottom: 6px;
}

.rpt24q-subtable[b-1fypeqz2l6] {
    width: 100%;
    border-collapse: collapse;
}

    .rpt24q-subtable td[b-1fypeqz2l6] {
        padding: 4px 0;
        vertical-align: middle;
        border-top: 1px solid #eee;
    }

.rpt24q-label[b-1fypeqz2l6] {
    width: 260px;
    font-size: 12.5px;
    color: #333;
}

.rpt24q-boxtable[b-1fypeqz2l6] {
    border-collapse: collapse;
}

.rpt24q-box[b-1fypeqz2l6] {
    width: 22px;
    height: 26px;
    border: 1px solid #333;
    text-align: center;
    font-size: 13px;
    font-family: monospace;
}
/* /Components/Shared/Reports/TdsFormHeader.razor.rz.scp.css */
.rpt24q-wrap[b-63uqjnc9mf] {
    padding: 24px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #000;
    background: #fff;
}

.rpt24q-header[b-63uqjnc9mf] {
    text-align: center;
    position: relative;
    margin-bottom: 16px;
}

    .rpt24q-header h2[b-63uqjnc9mf] {
        margin: 0;
    }

.rpt24q-print-btn[b-63uqjnc9mf] {
    position: absolute;
    left: 0;
    top: 0;
    background: none;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
}

.rpt24q-bold[b-63uqjnc9mf] {
    font-weight: 700;
    text-align: center;
    margin: 4px 0;
}

.rpt24q-particulars[b-63uqjnc9mf] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.rpt24q-srno[b-63uqjnc9mf] {
    width: 30px;
    vertical-align: top;
    font-weight: 700;
    padding-top: 6px;
}

.rpt24q-section-title[b-63uqjnc9mf] {
    font-weight: 600;
    padding-bottom: 6px;
}

.rpt24q-subtable[b-63uqjnc9mf] {
    width: 100%;
    border-collapse: collapse;
}

    .rpt24q-subtable td[b-63uqjnc9mf] {
        padding: 4px 0;
        vertical-align: middle;
        border-top: 1px solid #eee;
    }

.rpt24q-label[b-63uqjnc9mf] {
    width: 260px;
    font-size: 12.5px;
    color: #333;
}

.rpt24q-boxtable[b-63uqjnc9mf] {
    border-collapse: collapse;
}

.rpt24q-box[b-63uqjnc9mf] {
    width: 22px;
    height: 26px;
    border: 1px solid #333;
    text-align: center;
    font-size: 13px;
    font-family: monospace;
}
/* /Components/Shared/VoucherReportPopup.razor.rz.scp.css */
.vrp-overlay[b-w7fu57psmu] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1000;
}

.vrp-modal[b-w7fu57psmu] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: max-content;
    min-width: 420px;
    max-width: min(90vw, 850px);
    max-height: 88vh;
    overflow: auto;
    border-radius: 6px;
    z-index: 1001;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

.vrp-hdr[b-w7fu57psmu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    font-weight: 600;
    color: #16a085;
}

.vrp-x[b-w7fu57psmu] {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #888;
}

.vrp-body[b-w7fu57psmu] {
    padding: 14px 16px;
}