/* /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;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

    .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: 6px 10px;
    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: 3000px; /* large enough for any group, even with many sub-groups expanded at once */
        opacity: 1;
    }

.sb-nav-child[b-5wcplwsv0q] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 34px;
    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);
}

/* Desktop view: scrolling still works (wheel/trackpad/keyboard), the
   scrollbar itself just isn't drawn — Chrome/Edge/Safari via
   ::-webkit-scrollbar{display:none}, Firefox via scrollbar-width:none.
   Scoped to the same >768px breakpoint the rest of this file treats as
   "desktop" (see the max-width:768px block below), so mobile keeps its
   normal (usually auto-hiding/overlay) scrollbar behavior untouched. */
@media (min-width: 769px) {
    .gains-content[b-5wcplwsv0q] {
        scrollbar-width: none;
    }

        .gains-content[b-5wcplwsv0q]::-webkit-scrollbar {
            display: none;
        }
}

/* ── 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/AssignRoute.razor.rz.scp.css */
/* =====================================================================
   GAINS — AssignRoute.razor.css   (Masters → Sales → Assign Route)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only Assign-Route-page-specific rules remain here.
   ===================================================================== */

/* "Sales Person" link-style button inside the grid rows — same fix every
   other Masters page needed (mu-login isn't in the shared CSS, Blazor's
   CSS isolation means each page using it needs its own copy). */
.mu-login[b-yy89l4gfip] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .mu-login:hover[b-yy89l4gfip] {
        text-decoration: underline;
    }

/* Page-end footer pinning — same pattern as RouteMaster/LevelMaster/MLogin.
   Was missing here entirely, which is why the footer sat flush under the
   table with no card box/border instead of a proper pinned bar. */
.mu-page[b-yy89l4gfip] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

/* Person / Date / GO row above the grid */
.ar-toolbar[b-yy89l4gfip] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

    .ar-toolbar .uf-input:first-child[b-yy89l4gfip] {
        flex: 1 1 220px;
    }

    .ar-toolbar input[type="date"][b-yy89l4gfip] {
        flex: 0 0 170px;
    }

/* Neither grid on this page paginates (matches the old form — both lists
   just scroll inside a fixed-height box instead of a pager). */
.ar-scroll[b-yy89l4gfip] {
    max-height: 420px;
    overflow-y: auto;
}

/* uf-footer expects exactly 2 flex children (left spacer + one right
   item) — group Save alone into .uf-footer-right for consistency with
   the other Masters modals even though there's only one button here. */
.uf-footer-right[b-yy89l4gfip] {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* /Components/Pages/Masters/AssignScheme.razor.rz.scp.css */
/* Flex-fill layout — page fills DashboardLayout's .gains-content (which
   already flex/overflow-scrolls) and only the table body scrolls. Use
   height:100% here, never 100vh (see SchemeGrid.razor.css for the prior
   regression that caused). */
[b-k0607ulibo] .mu-page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

/* Top filter bar — scheme autofill + slab select + date + GO, inline */
[b-k0607ulibo] .as-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

[b-k0607ulibo] .as-filter-field {
    flex: 0 1 240px;
    min-width: 180px;
}

[b-k0607ulibo] .as-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #dde3ed;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: #1a2537;
    background: #fff;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}

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

[b-k0607ulibo] .as-go {
    margin-left: auto;
}

/* Active checkbox column */
[b-k0607ulibo] .as-th-active {
    width: 70px;
    text-align: center;
}

[b-k0607ulibo] .as-td-active {
    text-align: center;
}

    [b-k0607ulibo] .as-td-active input[type="checkbox"] {
        width: 15px;
        height: 15px;
        accent-color: #1ab99a;
        cursor: pointer;
    }

[b-k0607ulibo] .mu-login-cell {
    color: #1a56a7;
}

/* Modal fields use the same stacked label/input as other Masters modals */
[b-k0607ulibo] .as-modal-field {
    grid-template-columns: 120px 1fr;
    margin-bottom: 14px;
    position: relative;
}

/* Footer — sticky (not fixed): stays in the content column, no sidebar
   overlap, and adds no phantom page height. Same approach as the other
   Scheme pages. */
[b-k0607ulibo] .mu-foot {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: #fbfcfe;
}
/* /Components/Pages/Masters/Categoryitem.razor.rz.scp.css */
/* =====================================================================
   GAINS — xCategoryItem.razor.css   (Masters → Category-Item)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only this page's specific rules remain here.
   ===================================================================== */

.mu-login[b-oqjgkcjxq5] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .mu-login:hover[b-oqjgkcjxq5] {
        text-decoration: underline;
    }

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

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

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

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

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

.uf-footer-right[b-oqjgkcjxq5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Clear "Save isn't wired yet" banner inside the modal */
.xci-unwired-banner[b-oqjgkcjxq5] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.5;
}

    .xci-unwired-banner i[b-oqjgkcjxq5] {
        margin-top: 2px;
        flex-shrink: 0;
    }

    .xci-unwired-banner code[b-oqjgkcjxq5] {
        background: rgba(0, 0, 0, 0.06);
        padding: 1px 5px;
        border-radius: 4px;
        font-size: 12px;
    }

/* Item Name / GO / CF toolbar inside the modal */
.ci-toolbar[b-oqjgkcjxq5] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

    .ci-toolbar .uf-input[b-oqjgkcjxq5] {
        flex: 1 1 200px;
    }

.xci-scroll[b-oqjgkcjxq5] {
    max-height: 360px;
    overflow-y: auto;
}

    .xci-scroll td:nth-child(2)[b-oqjgkcjxq5] {
        text-align: center;
        width: 48px;
    }

    .xci-scroll input[type="checkbox"][b-oqjgkcjxq5] {
        width: 17px;
        height: 17px;
        cursor: pointer;
        accent-color: #1a7a4c;
        vertical-align: middle;
    }

    .xci-scroll td[b-oqjgkcjxq5],
    .xci-scroll th[b-oqjgkcjxq5] {
        padding: 8px 12px;
    }

.xci-pager[b-oqjgkcjxq5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.xci-linked-count[b-oqjgkcjxq5] {
    margin-top: 12px;
    font-size: 13px;
    color: #374151;
}

.xci-linked-total[b-oqjgkcjxq5] {
    color: #9ca3af;
    margin-left: 4px;
}
/* /Components/Pages/Masters/Categoryledger.razor.rz.scp.css */
/* =====================================================================
   GAINS — CategoryLedger.razor.css   (Masters → Category-Ledger)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only this page's specific rules remain here.
   ===================================================================== */

.mu-login[b-je5kgbbh6g] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .mu-login:hover[b-je5kgbbh6g] {
        text-decoration: underline;
    }

/* Page-end footer pinning — same pattern as every other Masters page. */
.mu-page[b-je5kgbbh6g] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

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

.uf-footer-right[b-je5kgbbh6g] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Ledger checklist page (100 rows) — bounded scroll within that page */
.cl-scroll[b-je5kgbbh6g] {
    max-height: 380px;
    overflow-y: auto;
}

.cl-modal-pager[b-je5kgbbh6g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.cl-linked-count[b-je5kgbbh6g] {
    margin-top: 12px;
    font-size: 13px;
    color: #374151;
}

.cl-linked-total[b-je5kgbbh6g] {
    color: #9ca3af;
    margin-left: 4px;
}
/* /Components/Pages/Masters/EInvoiceSettings.razor.rz.scp.css */
/* =====================================================================
   E Invoice Settings — page-specific layer only.
   The card shell, section header, field grid, inputs, checkbox and
   Save button all reuse the shared .mu-*/.uf-* classes defined once in
   wwwroot/CSS/masters-forms.css (the same system every other Masters
   edit form — e.g. MCostHeadEdit — uses)[b-r7q4ypo1is], so this page stays visually
   consistent with the rest of the app. Only what's genuinely unique to
   this page (fixed-value State/Country display, the collapsible City
   reveal, and a couple of local width/spacing tweaks) lives here.
   ===================================================================== */

.eis-page[b-r7q4ypo1is] {
    height: 100%;
}

/* Compact settings card — fluid width capped for readability, not a
   fixed size; shrinks to 100% on small screens (see media query below).
   margin-left gives it breathing room off the sidebar edge instead of
   sitting flush against it. */
.eis-card[b-r7q4ypo1is] {
    width: 100%;
    max-width: 480px;
    margin-left: 16px;
}

.eis-section[b-r7q4ypo1is] {
    justify-content: space-between;
}

.eis-body[b-r7q4ypo1is] {
    display: flex;
    flex-direction: column;
}

.eis-form[b-r7q4ypo1is] {
    display: flex;
    flex-direction: column;
}

/* Even vertical rhythm between fields — same spacing convention as
   every other Masters edit form's .uf-field rows. */
.eis-field[b-r7q4ypo1is] {
    margin-bottom: 14px;
}

.eis-control[b-r7q4ypo1is] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* Read-only State/Country values — aligned to the same baseline as the
   input fields above/below them (matches .uf-input's 8px vertical padding). */
.eis-static[b-r7q4ypo1is] {
    font-size: 13px;
    font-weight: 650;
    color: #1a2537;
    padding-top: 8px;
}

/* Change State checkbox — sits in the input column, aligned directly
   under every other field's input (empty label keeps the 112px column). */
.eis-check[b-r7q4ypo1is] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.eis-check-label[b-r7q4ypo1is] {
    font-size: 13px;
    color: #3c4858;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

/* Collapsible City field, revealed only once Change State is checked */
.eis-city-wrap[b-r7q4ypo1is] {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.22s ease, opacity 0.18s ease;
}

    .eis-city-wrap.eis-city-open[b-r7q4ypo1is] {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-bottom: 14px;
    }

.eis-city-inner[b-r7q4ypo1is] {
    overflow: hidden;
    min-height: 0;
}

/* Save button — anchored bottom-right in the shared uf-footer bar,
   consistent with every other Masters form's action row. */
.eis-footer[b-r7q4ypo1is] {
    justify-content: flex-end;
}

/* ── Responsive: same breakpoint every other Masters edit form uses.
   Stack label above its input/value instead of a fixed side-by-side
   column once the viewport gets tight (tablet/mobile). ── */
@media (max-width: 640px) {
    .eis-card[b-r7q4ypo1is] {
        max-width: 100%;
        margin-left: 0;
    }

    .eis-field[b-r7q4ypo1is] {
        grid-template-columns: 1fr;
        gap: 4px;
        margin-bottom: 12px;
    }

        .eis-field > label[b-r7q4ypo1is] {
            padding-top: 0;
        }

    .eis-static[b-r7q4ypo1is] {
        padding-top: 0;
    }

    .eis-footer[b-r7q4ypo1is] {
        justify-content: stretch;
    }

        .eis-footer .uf-btn-save[b-r7q4ypo1is] {
            width: 100%;
            justify-content: center;
        }
}
/* /Components/Pages/Masters/GenerateScheme.razor.rz.scp.css */
/* mu-login is referenced in MLogin.razor but never defined in
   masters-forms.css — was rendering as a default browser button.
   Styled here to match the teal clickable-name look used across
   Masters grids (same color as .mu-idx). */
[b-zng4dm9t9x] .mu-login {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #1a56a7;
    cursor: pointer;
    text-align: left;
}

    [b-zng4dm9t9x] .mu-login:hover {
        text-decoration: underline;
    }

/* =====================================================================
   Footer pinning — identical pattern to QLedger.razor.css's CONSOLIDATED
   block (confirmed working there). mu-page is a min-height:100vh flex
   column; mu-card grows and its own table-wrap is the only thing that
   scrolls; the footer is the last flex child so it sits at the true
   bottom, contained within the main content column (NOT position:fixed,
   which spans the full viewport and overlaps the sidebar).
   ===================================================================== */
/* Footer — sticky, not fixed. Sticky respects the content column's own
   width (sidebar excluded automatically) and adds no phantom height, so
   it can't force the whole page into an unwanted scroll the way
   min-height:100vh did. Table itself keeps scrolling internally via the
   existing global .mu-table-wrap (fixed height + overflow:auto). */
[b-zng4dm9t9x] .mu-foot {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: #fbfcfe;
}
/* /Components/Pages/Masters/GST.razor.rz.scp.css */
/* GST.razor.css — scoped styles for the GST list page */

/* Flex-fill layout — page fills DashboardLayout's .gains-content (which
   already flex/overflow-scrolls) and only the table body scrolls. Use
   height:100% here, never 100vh (see SchemeGrid.razor.css for the prior
   regression that caused). No mu-toolbar on this page (no search/pagination
   toolbar), so no flex-shrink rule needed for it. */
.mu-page[b-s2a1sn5e8j] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

/* Blue "link" look for the GST Name cell, matching other master grids */
.gst-link[b-s2a1sn5e8j] {
    color: #1a56a7;
    font-weight: 600;
}

/* Description column can be long — let it wrap instead of stretching the row */
.gst-desc[b-s2a1sn5e8j] {
    color: #475569;
    max-width: 320px;
    white-space: normal;
    word-break: break-word;
}

/* Grid now flex-fills the card (was a fixed 420px height) — only the
   table body scrolls, page fills the viewport. */
.mu-table-wrap[b-s2a1sn5e8j] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

/* Record count next to the export/new buttons */
.gst-count[b-s2a1sn5e8j] {
    font-size: .82rem;
    color: #64748b;
}
/* /Components/Pages/Masters/GSTEdit.razor.rz.scp.css */
/* GSTEdit.razor.css — scoped styles for the GST Master modal */

.uf-modal-sm.gst-modal[b-wain6udpxg] { max-width: 480px; }

.uf-field.gst-field[b-wain6udpxg] { margin-bottom: 16px; }
.uf-field.gst-field:last-of-type[b-wain6udpxg] { margin-bottom: 0; }

.gst-select[b-wain6udpxg] {
    appearance: auto;
}

.uf-footer-right[b-wain6udpxg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Solid red DELETE button — pinned to the right of SAVE */
.gst-btn-delete[b-wain6udpxg] {
    background: #e5484d;
    border-color: #e5484d;
    color: #fff;
}

    .gst-btn-delete:hover[b-wain6udpxg] {
        background: #c8393d;
    }

    .gst-btn-delete:disabled[b-wain6udpxg] {
        opacity: 0.65;
        cursor: default;
    }

@media (max-width: 540px) {
    .uf-field.gst-field[b-wain6udpxg] { grid-template-columns: 1fr; gap: 4px; }
}
/* /Components/Pages/Masters/GSTSetting.razor.rz.scp.css */
/* =====================================================================
   GST Settings — page-specific layer only.
   The card shell, section header, field grid, inputs, checkbox and
   Save button all reuse the shared .mu-*/.uf-* classes defined once in
   wwwroot/CSS/masters-forms.css (the same system E Invoice Settings and
   every other Masters edit form uses)[b-fxx1coyjxg], so this page stays visually
   consistent with the rest of the app. Mirrors EInvoiceSettings.razor.css
   class-for-class (eis- -> gss-) — only what's genuinely unique to this
   page (fixed-value State/Country display, the collapsible City reveal,
   and a couple of local width/spacing tweaks) lives here.
   ===================================================================== */

.gss-page[b-fxx1coyjxg] {
    height: 100%;
}

/* Compact settings card — fluid width capped for readability, not a
   fixed size; shrinks to 100% on small screens (see media query below).
   margin-left gives it breathing room off the sidebar edge instead of
   sitting flush against it. */
.gss-card[b-fxx1coyjxg] {
    width: 100%;
    max-width: 480px;
    margin-left: 16px;
}

.gss-section[b-fxx1coyjxg] {
    justify-content: space-between;
}

.gss-body[b-fxx1coyjxg] {
    display: flex;
    flex-direction: column;
}

.gss-form[b-fxx1coyjxg] {
    display: flex;
    flex-direction: column;
}

/* Even vertical rhythm between fields — same spacing convention as
   every other Masters edit form's .uf-field rows. */
.gss-field[b-fxx1coyjxg] {
    margin-bottom: 14px;
}

.gss-control[b-fxx1coyjxg] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* Read-only State/Country values — aligned to the same baseline as the
   input fields above/below them (matches .uf-input's 8px vertical padding). */
.gss-static[b-fxx1coyjxg] {
    font-size: 13px;
    font-weight: 650;
    color: #1a2537;
    padding-top: 8px;
}

/* Change State checkbox — sits in the input column, aligned directly
   under every other field's input (empty label keeps the 112px column). */
.gss-check[b-fxx1coyjxg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.gss-check-label[b-fxx1coyjxg] {
    font-size: 13px;
    color: #3c4858;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

/* Collapsible City field, revealed only once Change State is checked */
.gss-city-wrap[b-fxx1coyjxg] {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.22s ease, opacity 0.18s ease;
}

    .gss-city-wrap.gss-city-open[b-fxx1coyjxg] {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-bottom: 14px;
    }

.gss-city-inner[b-fxx1coyjxg] {
    overflow: hidden;
    min-height: 0;
}

/* Save button — anchored bottom-right in the shared uf-footer bar,
   consistent with every other Masters form's action row. */
.gss-footer[b-fxx1coyjxg] {
    justify-content: flex-end;
}

/* ── Responsive: same breakpoint every other Masters edit form uses.
   Stack label above its input/value instead of a fixed side-by-side
   column once the viewport gets tight (tablet/mobile). ── */
@media (max-width: 640px) {
    .gss-card[b-fxx1coyjxg] {
        max-width: 100%;
        margin-left: 0;
    }

    .gss-field[b-fxx1coyjxg] {
        grid-template-columns: 1fr;
        gap: 4px;
        margin-bottom: 12px;
    }

        .gss-field > label[b-fxx1coyjxg] {
            padding-top: 0;
        }

    .gss-static[b-fxx1coyjxg] {
        padding-top: 0;
    }

    .gss-footer[b-fxx1coyjxg] {
        justify-content: stretch;
    }

        .gss-footer .uf-btn-save[b-fxx1coyjxg] {
            width: 100%;
            justify-content: center;
        }
}
/* /Components/Pages/Masters/HSNDescription.razor.rz.scp.css */
/* HSNDescription.razor.css — scoped styles for the HSN Description list page.
   Direct clone of GST.razor.css: same "link" cell treatment, same
   count-label styling. Only class names are renamed. */

/* Flex-fill layout — page fills DashboardLayout's .gains-content (which
   already flex/overflow-scrolls) and only the table body scrolls. Use
   height:100% here, never 100vh (see SchemeGrid.razor.css for the prior
   regression that caused). No mu-toolbar on this page. */
.mu-page[b-ownxr0w44j] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

.hsn-mandatory-note[b-ownxr0w44j] {
    font-size: 12.5px;
    font-weight: 600;
    color: #e11d48;
    white-space: nowrap;
}

/* Blue "link" look for the HSN Code cell, matching GST's .gst-link */
.hsn-link[b-ownxr0w44j] {
    color: #1a56a7;
    font-weight: 600;
}

/* Description column can be long — let it wrap instead of stretching the row */
.hsn-desc[b-ownxr0w44j] {
    color: #475569;
    max-width: 320px;
    white-space: normal;
    word-break: break-word;
}

.hsn-service-cell[b-ownxr0w44j] {
    text-align: center;
}

/* "Is Service" header — center label + sort icon over the checkbox column
   below, narrow width so header and checkbox sit in the same column
   instead of the text overflowing left like before. */
.hsn-service-th[b-ownxr0w44j] {
    width: 90px;
    text-align: center;
}

    .hsn-service-th span[b-ownxr0w44j] {
        display: inline-block;
    }

.hsn-service-chk[b-ownxr0w44j] {
    width: 16px;
    height: 16px;
    accent-color: #1a56a7;
    cursor: pointer;
}

/* Grid now flex-fills the card (was a fixed 420px height) — only the
   table body scrolls, page fills the viewport. */
.mu-table-wrap[b-ownxr0w44j] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

/* Record count next to the export/new buttons */
.hsn-count[b-ownxr0w44j] {
    font-size: .82rem;
    color: #64748b;
}
/* /Components/Pages/Masters/HSNDescriptionEdit.razor.rz.scp.css */
/* HSNDescriptionEdit.razor.css — scoped styles for the HSN Description modal.
   Direct clone of GSTEdit.razor.css: same modal width, field spacing, and
   solid-red delete button treatment. Only class names are renamed. */

.uf-modal-sm.hsn-modal[b-zfkvhrd7ut] { max-width: 480px; }

.uf-field.hsn-field[b-zfkvhrd7ut] { margin-bottom: 16px; }
.uf-field.hsn-field:last-of-type[b-zfkvhrd7ut] { margin-bottom: 0; }

.uf-footer-right[b-zfkvhrd7ut] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Solid red DELETE button — pinned to the right of SAVE, same as GST's gst-btn-delete */
.hsn-btn-delete[b-zfkvhrd7ut] {
    background: #e5484d;
    border-color: #e5484d;
    color: #fff;
}

    .hsn-btn-delete:hover[b-zfkvhrd7ut] {
        background: #c8393d;
    }

    .hsn-btn-delete:disabled[b-zfkvhrd7ut] {
        opacity: 0.65;
        cursor: default;
    }

@media (max-width: 540px) {
    .uf-field.hsn-field[b-zfkvhrd7ut] { grid-template-columns: 1fr; gap: 4px; }
}
/* /Components/Pages/Masters/ICategory.razor.rz.scp.css */
/* ICategory.razor.css — scoped styles for the iCategory grid page */

/* Flex-fill layout — page fills DashboardLayout's .gains-content (which
   already flex/overflow-scrolls) and only the grid (rendered by the child
   ICategoryGrid component) scrolls. Use height:100% here, never 100vh
   (see SchemeGrid.razor.css for the prior regression that caused). The
   child's own root (.mu-table-wrap) gets its matching flex:1/overflow:auto
   rule in ICategoryGrid.razor.css — Blazor scoped CSS can't reach across
   into a child component's own root without ::deep, and that half of the
   chain belongs to the child anyway since it owns that element. */
.mu-page[b-gqboadij4n] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

.ic-link[b-gqboadij4n] {
    color: #1a56a7;
    font-weight: 600;
}

.ic-table-wrap[b-gqboadij4n] {
    overflow-x: auto;
}

.ic-table[b-gqboadij4n] {
    min-width: 480px;
}

.ic-row-selected td[b-gqboadij4n] {
    background: #eafaf4 !important;
}

@media (max-width: 640px) {
    .sr-foot-left[b-gqboadij4n] {
        width: 100%;
        justify-content: space-between;
    }

        .sr-foot-left .mu-btn-label[b-gqboadij4n] {
            display: none;
        }
}
/* /Components/Pages/Masters/ICategoryEdit.razor.rz.scp.css */
/* ICategoryEdit.razor.css — scoped styles for the iCategory Master modal
   Cloned 1:1 from GSTEdit.razor.css sizing/spacing — only class names swapped. */

.uf-modal-sm.ic-modal[b-4ky5qk8if4] { max-width: 480px; }

.uf-field.ic-field[b-4ky5qk8if4] { margin-bottom: 16px; }
.uf-field.ic-field:last-of-type[b-4ky5qk8if4] { margin-bottom: 0; }

.uf-footer-right[b-4ky5qk8if4] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Solid red DELETE button — pinned to the right of SAVE (matches gst-btn-delete) */
.ic-btn-delete[b-4ky5qk8if4] {
    background: #e5484d;
    border-color: #e5484d;
    color: #fff;
}

    .ic-btn-delete:hover[b-4ky5qk8if4] {
        background: #c8393d;
    }

    .ic-btn-delete:disabled[b-4ky5qk8if4] {
        opacity: 0.65;
        cursor: default;
    }

@media (max-width: 540px) {
    .uf-field.ic-field[b-4ky5qk8if4] { grid-template-columns: 1fr; gap: 4px; }
}
/* /Components/Pages/Masters/ICategoryGrid.razor.rz.scp.css */
/* ICategoryGrid.razor.css — scoped styles for the iCategory grid child
   component (rendered inside ICategory.razor's .mu-card).

   Flex-fill layout — this component's own root element (.mu-table-wrap)
   needs to grow to fill the remaining height of the parent's .mu-card
   flex column and scroll internally, instead of the shared
   masters-forms.css fixed 540px height. The parent page (ICategory.razor)
   supplies the .mu-page{height:100%} / .mu-card{flex:1;...} half of the
   chain in its own razor.css — Blazor scoped CSS only applies within the
   component that declares it, so this half must live here since this div
   is this component's own root, not the parent's. */
.mu-table-wrap[b-3f2hvmpq17] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}
/* /Components/Pages/Masters/ICategoryMaster.razor.rz.scp.css */
/* ===== Page header ===== */
.page-header[b-82oqawp0np] {
    padding: 1.25rem 1.5rem 0.5rem;
}

.page-title[b-82oqawp0np] {
    color: #17a589;
    font-weight: 500;
    letter-spacing: 1px;
    margin: 0;
    font-size: 1.6rem;
}

/* ===== Card container (matches GST card width/alignment) ===== */
.content-card[b-82oqawp0np] {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    margin: 0 1.5rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* ===== Table ===== */
.table-responsive-wrapper[b-82oqawp0np] {
    width: 100%;
    overflow-x: auto;
    max-height: 480px;
    overflow-y: auto;
}

.data-grid[b-82oqawp0np] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    min-width: 560px;
}

.data-grid thead th[b-82oqawp0np] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #4b4b4b;
    color: #fff;
    font-weight: 600;
    padding: 0.9rem 1rem;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.sort-icon[b-82oqawp0np] {
    font-size: 0.75rem;
    opacity: 0.75;
    margin-left: 2px;
}

.data-grid tbody td[b-82oqawp0np] {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #ececec;
    vertical-align: middle;
}

.grid-row:nth-child(odd)[b-82oqawp0np] {
    background-color: #f7f7f7;
}

.grid-row:nth-child(even)[b-82oqawp0np] {
    background-color: #ffffff;
}

.grid-row:hover[b-82oqawp0np] {
    background-color: #eafaf6;
    transition: background-color 0.15s ease-in-out;
}

.text-center[b-82oqawp0np] {
    text-align: center;
}

.icon-btn[b-82oqawp0np] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.15s ease-in-out;
}

.icon-btn:hover[b-82oqawp0np] {
    background-color: rgba(0,0,0,0.06);
}

.delete-icon[b-82oqawp0np] {
    color: #e74c3c;
}

.edit-icon[b-82oqawp0np] {
    color: #444;
}

/* ===== Footer ===== */
.grid-footer[b-82oqawp0np] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1.25rem;
    background: #fafafa;
    border-top: 1px solid #ececec;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer-left[b-82oqawp0np] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.btn-new[b-82oqawp0np] {
    background: #e9e9e9;
    color: #333;
    border: 1px solid #d3d3d3;
    padding: 0.4rem 1.1rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.btn-new:hover[b-82oqawp0np] {
    background: #dedede;
}

.excel-icon[b-82oqawp0np] {
    font-size: 1.25rem;
    cursor: pointer;
}

.footer-right[b-82oqawp0np] {
    color: #17a589;
    font-size: 0.85rem;
    font-weight: 500;
}

.alert-error[b-82oqawp0np] {
    background: #fdecea;
    color: #c0392b;
    border: 1px solid #f5c6c1;
    padding: 0.6rem 1rem;
    margin: 1rem 1.25rem 0;
    border-radius: 4px;
    font-size: 0.88rem;
}

.loading-state[b-82oqawp0np] {
    padding: 2rem;
    text-align: center;
    color: #777;
}

/* ===== Modal ===== */
.modal-backdrop-custom[b-82oqawp0np] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn 0.15s ease-in-out;
}

@@keyframes fadeIn {
    from[b-82oqawp0np] { opacity: 0; }
    to[b-82oqawp0np] { opacity: 1; }
}

.modal-box[b-82oqawp0np] {
    background: #fff;
    width: 100%;
    max-width: 620px;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    padding: 1.75rem 2rem 1.5rem;
    margin: 1rem;
    animation: slideDown 0.2s ease-in-out;
    max-height: 90vh;
    overflow-y: auto;
}

@@keyframes slideDown {
    from[b-82oqawp0np] { transform: translateY(-20px); opacity: 0; }
    to[b-82oqawp0np] { transform: translateY(0); opacity: 1; }
}

.modal-header-custom[b-82oqawp0np] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.9rem;
    margin-bottom: 1.25rem;
}

.modal-title-custom[b-82oqawp0np] {
    color: #17a589;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin: 0;
    font-size: 1.4rem;
}

.modal-close[b-82oqawp0np] {
    cursor: pointer;
    font-size: 1.1rem;
    color: #777;
}

.modal-close:hover[b-82oqawp0np] {
    color: #333;
}

.form-row[b-82oqawp0np] {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.form-label[b-82oqawp0np] {
    font-size: 0.95rem;
    color: #333;
}

.required-star[b-82oqawp0np] {
    color: #e74c3c;
}

.form-input[b-82oqawp0np] {
    height: 42px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 0.75rem;
    font-size: 0.95rem;
    width: 100%;
}

.form-input:focus[b-82oqawp0np] {
    outline: none;
    border-color: #17a589;
    box-shadow: 0 0 0 2px rgba(23,165,137,0.15);
}

.field-validation[b-82oqawp0np] {
    grid-column: 2 / 3;
    color: #e74c3c;
    font-size: 0.8rem;
    margin-top: -0.8rem;
}

.modal-footer-custom[b-82oqawp0np] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
    border-top: 1px solid #eee;
    padding-top: 1.1rem;
    margin-top: 0.5rem;
}

.btn-save[b-82oqawp0np] {
    background: #17a589;
    color: #fff;
    border: none;
    padding: 0.55rem 1.6rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.btn-save:hover:not(:disabled)[b-82oqawp0np] {
    background: #148f76;
}

.btn-save:disabled[b-82oqawp0np] {
    background: #a7d9cd;
    cursor: not-allowed;
}

.btn-delete[b-82oqawp0np] {
    background: #e74c3c;
    color: #fff;
    border: none;
    padding: 0.55rem 1.6rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.btn-delete:hover[b-82oqawp0np] {
    background: #cf3d2e;
}

/* ===== Responsive ===== */
@@media (max-width: 768px) {
    .page-header[b-82oqawp0np] {
        padding: 1rem 1rem 0.5rem;
    }

    .content-card[b-82oqawp0np] {
        margin: 0 0.75rem 1rem;
    }

    .form-row[b-82oqawp0np] {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .field-validation[b-82oqawp0np] {
        grid-column: 1;
    }

    .modal-box[b-82oqawp0np] {
        padding: 1.25rem 1.25rem 1rem;
    }

    .grid-footer[b-82oqawp0np] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@@media (max-width: 480px) {
    .data-grid[b-82oqawp0np] {
        font-size: 0.85rem;
    }

    .data-grid thead th[b-82oqawp0np],
    .data-grid tbody td[b-82oqawp0np] {
        padding: 0.6rem 0.6rem;
    }
}
/* /Components/Pages/Masters/Industrymaster.razor.rz.scp.css */
/* =====================================================================
   GAINS — IndustryMaster.razor.css   (Masters → Industry grid, page-scoped)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only Industry-page-specific rules remain here — same pattern as
   MLogin.razor.css / LevelMaster.razor.css.
   ===================================================================== */

/* "Industry Name" link-style button inside the grid rows */
.mu-login[b-fn9qgqtnsr] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .mu-login:hover[b-fn9qgqtnsr] {
        text-decoration: underline;
    }

/* =====================================================================
   Page-end footer pinning — same pattern used on MLogin / BSPL / Daybook.
   ===================================================================== */
.mu-page[b-fn9qgqtnsr] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

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

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

/* uf-footer expects exactly 2 flex children (left spacer + one right item);
   Cancel+Save are grouped into .uf-footer-right so it sees 2, not 3. */
.uf-footer-right[b-fn9qgqtnsr] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* uf-field rows in uf-body have no gap by default — add breathing room
   between stacked fields. */
.uf-field + .uf-field[b-fn9qgqtnsr] {
    margin-top: 16px;
}

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

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

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

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

    .mu-foot-info[b-fn9qgqtnsr] {
        display: none;
    }
}
/* /Components/Pages/Masters/ItemBrand.razor.rz.scp.css */
/* ItemBrand.razor.css — scoped styles for the Item Brand grid page */

/* Flex-fill layout — page fills DashboardLayout's .gains-content (which
   already flex/overflow-scrolls) and only the table body scrolls. Use
   height:100% here, never 100vh (see SchemeGrid.razor.css for the prior
   regression that caused). Matches MTaxClass.razor.css pattern. */
.mu-page[b-pgo6529jwl] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

/* Add/Edit popup — single-field form, default .uf-modal (780px) is oversized.
   Shrink + vertically center; scoped to this page only. */
.uf-modal-sm[b-pgo6529jwl] {
    max-width: 400px;
}

.uf-overlay[b-pgo6529jwl] {
    align-items: center;
}

@media (max-width: 480px) {
    .uf-modal-sm[b-pgo6529jwl] {
        max-width: 100%;
    }
}

/* Blue "link" look for the Item Brand cell, matching the GST reference */
.itembrand-link[b-pgo6529jwl] {
    color: #1a56a7;
    font-weight: 600;
}

.itembrand-count[b-pgo6529jwl] {
    font-size: 12.5px;
    color: #64748b;
    white-space: nowrap;
}

/* Responsive grid — horizontal scroll on narrow viewports so both
   columns stay reachable instead of wrapping/clipping. */
.itembrand-table-wrap[b-pgo6529jwl] {
    overflow-x: auto;
}

.itembrand-table[b-pgo6529jwl] {
    min-width: 420px;
}

@media (max-width: 640px) {
    .itembrand-table[b-pgo6529jwl] {
        min-width: 340px;
    }
}
/* /Components/Pages/Masters/ItemCategory.razor.rz.scp.css */
/* =====================================================================
   GAINS — ItemCategory.razor.css   (Masters → Item-Category)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only this page's specific rules remain here.
   ===================================================================== */

.mu-login[b-txhrgv78nx] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .mu-login:hover[b-txhrgv78nx] {
        text-decoration: underline;
    }

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

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

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

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

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

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

.uf-footer-right[b-txhrgv78nx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Name Like / GO / CF / Item Group toolbar */
.ic-toolbar[b-txhrgv78nx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

    .ic-toolbar .uf-input:first-child[b-txhrgv78nx] {
        flex: 1 1 220px;
    }

.ic-group-select[b-txhrgv78nx] {
    flex: 0 0 220px;
}

/* iGroup drill-down row inside the Assign Categories modal */
.ic-group-row[b-txhrgv78nx] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

    .ic-group-row .ic-group-select[b-txhrgv78nx] {
        flex: 1 1 240px;
    }

    .ic-group-row .uf-btn[b-txhrgv78nx] {
        flex: 0 0 auto;
        white-space: nowrap;
    }

/* Checkbox column in the category checklist — centered, comfortable
   click target, consistent row height */
.ic-scroll td:nth-child(2)[b-txhrgv78nx] {
    text-align: center;
    width: 48px;
}

.ic-scroll input[type="checkbox"][b-txhrgv78nx] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: #1a7a4c;
    vertical-align: middle;
}

.ic-scroll td[b-txhrgv78nx],
.ic-scroll th[b-txhrgv78nx] {
    padding: 8px 12px;
}

/* Category checklist inside the modal — small count, just scrolls */
.ic-scroll[b-txhrgv78nx] {
    max-height: 380px;
    overflow-y: auto;
}

.ic-linked-count[b-txhrgv78nx] {
    margin-top: 12px;
    font-size: 13px;
    color: #374151;
}

.ic-linked-total[b-txhrgv78nx] {
    color: #9ca3af;
    margin-left: 4px;
}
/* /Components/Pages/Masters/ItemIndustry.razor.rz.scp.css */
/* =====================================================================
   GAINS — ItemIndustry.razor.css   (Masters → Item-Industry, xItemIndustry)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only this page's specific rules remain here.
   ===================================================================== */

.mu-login[b-83zcw6pn4d] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .mu-login:hover[b-83zcw6pn4d] {
        text-decoration: underline;
    }

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

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

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

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

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

.uf-footer-right[b-83zcw6pn4d] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Wider modal — has a filter row + paged item grid, needs more room */
.ii-modal-lg[b-83zcw6pn4d] {
    width: min(820px, 92vw);
}

.ii-selected-count[b-83zcw6pn4d] {
    font-size: 13px;
    font-weight: 600;
    color: #1a7a4c;
    margin-left: auto;
    margin-right: 12px;
    white-space: nowrap;
}

/* Item Group select / OR / Name Like / GO / CF filter row */
.ii-filter-row[b-83zcw6pn4d] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.ii-group-select[b-83zcw6pn4d] {
    flex: 0 0 220px;
}

.ii-or[b-83zcw6pn4d] {
    font-weight: 600;
    color: #9ca3af;
    font-size: 12px;
}

.ii-filter-row input[type="text"][b-83zcw6pn4d] {
    flex: 1 1 200px;
}

/* Item checklist — bounded scroll, comfortable checkbox target */
.ii-scroll[b-83zcw6pn4d] {
    max-height: 380px;
    overflow-y: auto;
}

    .ii-scroll td:nth-child(2)[b-83zcw6pn4d] {
        text-align: center;
        width: 48px;
    }

    .ii-scroll input[type="checkbox"][b-83zcw6pn4d] {
        width: 17px;
        height: 17px;
        cursor: pointer;
        accent-color: #1a7a4c;
        vertical-align: middle;
    }

    .ii-scroll td[b-83zcw6pn4d],
    .ii-scroll th[b-83zcw6pn4d] {
        padding: 8px 12px;
    }

.ii-pager[b-83zcw6pn4d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}
/* /Components/Pages/Masters/ItemRate.razor.rz.scp.css */
/* =====================================================================
   GAINS — ItemRate.razor.css   (Masters → Item Rate, page-scoped)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Structural flex-fill rules below are copied verbatim from
   MCostCenter.razor.css so both pages fill the content area, scroll the
   grid body internally, and keep header/toolbar/footer fixed the same way.
   ===================================================================== */

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

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

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

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

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

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

/* ── Toolbar: date / group / name / actions, compact + responsive ── */
.ir-toolbar[b-bjr77rbbwz] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.ir-toolbar-field[b-bjr77rbbwz] {
    display: flex;
    flex-direction: column;
    min-width: 160px;
}

.ir-toolbar-field-grow[b-bjr77rbbwz] {
    flex: 1;
    min-width: 200px;
}

.ir-toolbar-actions[b-bjr77rbbwz] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.ir-label[b-bjr77rbbwz] {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
}

.ir-select[b-bjr77rbbwz] {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 30px;
    cursor: pointer;
}

.ir-btn-cf[b-bjr77rbbwz] {
    background: #f3e8ff;
    border-color: #c084fc;
    color: #7e22ce;
    font-weight: 700;
    padding: 8px 16px;
}

.ir-btn-search[b-bjr77rbbwz] {
    background: #17a673;
    border-color: #17a673;
    color: #fff;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ir-btn-search:hover[b-bjr77rbbwz] {
        background: #128a5f;
    }

/* ── Link cell ───────────────────────────────────────────────────── */
.ir-link[b-bjr77rbbwz] {
    color: #1a56a7;
    font-weight: 600;
}

.ir-num[b-bjr77rbbwz] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Grid: sticky header, fills remaining height, scrolls internally ── */
.ir-table[b-bjr77rbbwz] {
    min-width: 900px;
}

    .ir-table thead th[b-bjr77rbbwz] {
        position: sticky;
        top: 0;
        z-index: 2;
    }

/* ── Footer ──────────────────────────────────────────────────────── */
.ir-foot[b-bjr77rbbwz] {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.ir-foot-right[b-bjr77rbbwz] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ir-toolbar[b-bjr77rbbwz] {
        flex-direction: column;
        align-items: stretch;
    }

    .ir-toolbar-field[b-bjr77rbbwz],
    .ir-toolbar-field-grow[b-bjr77rbbwz] {
        min-width: 0;
        width: 100%;
    }

    .ir-toolbar-actions[b-bjr77rbbwz] {
        width: 100%;
    }

        .ir-toolbar-actions .mu-btn[b-bjr77rbbwz] {
            flex: 1;
        }
}

@media (max-width: 640px) {
    .ir-foot[b-bjr77rbbwz] {
        flex-direction: column;
        align-items: stretch;
    }

    .ir-foot-right[b-bjr77rbbwz] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Masters/ItemRateEdit.razor.rz.scp.css */
/* ItemRateEdit.razor.css — scoped styles for the Add Item Rate modal */

.ir-modal[b-lvvttk513n] { max-width: 480px; }

.uf-field.ir-field[b-lvvttk513n] { margin-bottom: 16px; }
.uf-field.ir-field:last-of-type[b-lvvttk513n] { margin-bottom: 0; }
.uf-field.ir-field > label[b-lvvttk513n] { font-size: 13px; padding-top: 9px; }

.ir-check-row[b-lvvttk513n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
}

.ir-check-label[b-lvvttk513n] {
    font-size: 13.5px;
    color: #334155;
    padding-top: 0;
    cursor: pointer;
}

.ir-field-check input[type="checkbox"][b-lvvttk513n] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.uf-footer-right[b-lvvttk513n] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Solid red DELETE button — matches GST's filled delete treatment */
.ir-btn-delete[b-lvvttk513n] {
    background: #e5484d;
    border-color: #e5484d;
    color: #fff;
}

    .ir-btn-delete:hover[b-lvvttk513n] {
        background: #c8393d;
    }

    .ir-btn-delete:disabled[b-lvvttk513n] {
        opacity: 0.65;
        cursor: default;
    }

/* Confirmation-before-close dialog sits above the edit modal */
.ir-confirm-overlay[b-lvvttk513n] { z-index: 1100; }
.ir-confirm-modal[b-lvvttk513n] { max-width: 360px; }
.ir-confirm-modal .uf-body p[b-lvvttk513n] { margin: 0; color: #475569; font-size: 14px; }

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

.mu-login[b-u7fas7tt6a] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .mu-login:hover[b-u7fas7tt6a] {
        text-decoration: underline;
    }

/* Page-end footer pinning — same pattern as every other Masters page. */
.mu-page[b-u7fas7tt6a] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

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

.uf-footer-right[b-u7fas7tt6a] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Category checklist inside the modal — small count, just scrolls */
.lc-scroll[b-u7fas7tt6a] {
    max-height: 380px;
    overflow-y: auto;
}

.lc-linked-count[b-u7fas7tt6a] {
    margin-top: 12px;
    font-size: 13px;
    color: #374151;
}

.lc-linked-total[b-u7fas7tt6a] {
    color: #9ca3af;
    margin-left: 4px;
}
/* /Components/Pages/Masters/LedgerPopup.razor.rz.scp.css */
/* LedgerPopup.razor.css — scoped styles for the Add Ledger popup */

.lgp-overlay[b-i2arvc7x2i] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}

/* Flex-fill layout — same pattern as TaxClass.razor.css/TaxClassGrid.razor.css:
   modal is a bounded (max-height: 90vh) flex column, header/footer stay
   flex-shrink:0, and .lgp-body/.lgp-table-wrap flex:1 to fill whatever
   room is left, instead of a fixed height that leaves blank space when a
   tax class only has a few ledgers. */
.lgp-modal[b-i2arvc7x2i] {
    position: relative;
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    padding: 20px 24px 22px;
    display: flex;
    flex-direction: column;
    animation: lgp-in-b-i2arvc7x2i 0.18s ease-out;
}

.lgp-close[b-i2arvc7x2i] {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    color: #666;
    font-size: 16px;
    cursor: pointer;
}

    .lgp-close:hover[b-i2arvc7x2i] {
        color: #1a2537;
    }

.lgp-header[b-i2arvc7x2i] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
    padding-right: 24px;
}

.lgp-title-block[b-i2arvc7x2i] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lgp-title-label[b-i2arvc7x2i] {
    color: #475569;
    font-size: 14px;
}

.lgp-title-value[b-i2arvc7x2i] {
    color: #1a56a7;
    font-weight: 600;
    font-size: 15px;
}

.lgp-type-row[b-i2arvc7x2i] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

    .lgp-type-row label[b-i2arvc7x2i] {
        font-size: 13px;
        color: #475569;
        white-space: nowrap;
    }

.lgp-type-select[b-i2arvc7x2i] {
    width: 160px;
}

.lgp-body[b-i2arvc7x2i] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.lgp-table-wrap[b-i2arvc7x2i] {
    flex: 1;
    min-height: 260px;  /* floor so it doesn't collapse to almost nothing with few rows */
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid #e5e9ef;
    border-radius: 6px;

    scrollbar-width: thin;
    scrollbar-color: #b6e8db transparent;
}

    .lgp-table-wrap[b-i2arvc7x2i]::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .lgp-table-wrap[b-i2arvc7x2i]::-webkit-scrollbar-thumb {
        background: #b6e8db;
        border-radius: 8px;
    }

.lgp-table[b-i2arvc7x2i] {
    width: 100%;
    min-width: 760px;
}

.lgp-row:hover td[b-i2arvc7x2i] {
    background: #f8fafc;
}

.lgp-th-chk[b-i2arvc7x2i] {
    width: 44px;
    text-align: center;
}

.lgp-input[b-i2arvc7x2i] {
    padding: 6px 9px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    font-size: 12.5px;
    color: #1a2537;
    font-family: inherit;
    background: #fff;
    outline: none;
}

.lgp-inline-select[b-i2arvc7x2i] {
    height: 32px;
    min-width: 130px;
}

    .lgp-inline-select:disabled[b-i2arvc7x2i] {
        background: #f1f5f9;
        color: #94a3b8;
        cursor: not-allowed;
    }

.lgp-error[b-i2arvc7x2i] {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 6px;
    background: #fff5f6;
    border: 1px solid #f7cdd4;
    color: #be123c;
    font-size: 12.5px;
}

.lgp-footer[b-i2arvc7x2i] {
    flex-shrink: 0;
    margin-top: 16px;
}

.lgp-btn[b-i2arvc7x2i] {
    padding: 7px 22px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
}

.lgp-btn-save[b-i2arvc7x2i] {
    background: #16a765;
}

    .lgp-btn-save:hover[b-i2arvc7x2i] {
        background: #128a54;
    }

    .lgp-btn-save:disabled[b-i2arvc7x2i] {
        opacity: 0.65;
        cursor: default;
    }

@keyframes lgp-in-b-i2arvc7x2i {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 640px) {
    .lgp-modal[b-i2arvc7x2i] {
        max-width: 100%;
        margin: 0 6px;
        padding: 16px 14px 18px;
    }

    .lgp-type-row[b-i2arvc7x2i] {
        margin-left: 0;
        width: 100%;
    }

    .lgp-type-select[b-i2arvc7x2i] {
        width: 100%;
    }
}
/* /Components/Pages/Masters/LedgerSalesRep.razor.rz.scp.css */
/* =====================================================================
   GAINS — LedgerSalesRep.razor.css   (Masters → Ledger-SalesRep)
   Shared "mu-"/"uf-"/"bspl-" styles live in wwwroot/CSS/masters-forms.css.
   Only this page's specific rules remain here.
   ===================================================================== */

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

/* ── Two side-by-side panels (ledgers | sales reps) — replaces the old
   single-grid + popup layout so both grids stay visible at once. ── */
.lsr-cols[b-87etxmtd5l] {
    flex: 1;
    display: flex;
    gap: 16px;
    min-height: 0;
}

.lsr-led[b-87etxmtd5l] {
    flex: 1 1 55%;
    display: flex;
    min-width: 0;
}

.lsr-person[b-87etxmtd5l] {
    flex: 1 1 45%;
    display: flex;
    min-width: 0;
}

    .lsr-led > .mu-card[b-87etxmtd5l],
    .lsr-person > .mu-card[b-87etxmtd5l] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

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

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

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

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

/* Depot / Ledger Name / Person / GO / CF toolbar on the left grid */
.lsr-toolbar[b-87etxmtd5l] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.lsr-field[b-87etxmtd5l] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
}

    .lsr-field span[b-87etxmtd5l] {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #6b7280;
    }

    .lsr-field input[type="text"][b-87etxmtd5l],
    .lsr-field[b-87etxmtd5l]  select {
        height: 36px;
        padding: 0 10px;
        border: 1.5px solid #d1d5db;
        border-radius: 8px;
        font-size: 12.5px;
        font-family: inherit;
        background: #f8fafc;
        color: #111827;
        outline: none;
        transition: .12s;
        width: 100%;
        min-width: 0;
    }

        .lsr-field input[type="text"]:focus[b-87etxmtd5l],
        .lsr-field[b-87etxmtd5l]  select:focus {
            border-color: #1a7a4c;
            background: #fff;
        }

        .lsr-field input[type="text"]:disabled[b-87etxmtd5l] {
            opacity: .55;
            cursor: not-allowed;
        }

/* "Show N entries" + "Search:" row — under the filter toolbar, one per
   grid, DataTables-style. Entries changes page size (server call); Search
   is a quick client-side filter over the currently loaded page only. */
.lsr-subbar[b-87etxmtd5l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px 10px;
    flex-shrink: 0;
    font-size: 12.5px;
    color: #475569;
}

.lsr-entries[b-87etxmtd5l] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    .lsr-entries select[b-87etxmtd5l] {
        height: 28px;
        padding: 0 6px;
        border: 1.5px solid #d1d5db;
        border-radius: 6px;
        font-size: 12.5px;
        background: #fff;
    }

.lsr-quicksearch[b-87etxmtd5l] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    .lsr-quicksearch input[b-87etxmtd5l] {
        height: 28px;
        padding: 0 8px;
        border: 1.5px solid #d1d5db;
        border-radius: 6px;
        font-size: 12.5px;
        min-width: 140px;
    }

        .lsr-quicksearch input:disabled[b-87etxmtd5l] {
            opacity: .55;
            cursor: not-allowed;
        }

/* Right-grid header: "Ledger Name: X" label + selected count + Save,
   all on one row (Save no longer lives in a modal footer). */
.lsr-person-head[b-87etxmtd5l] {
    justify-content: space-between;
    flex-wrap: nowrap;
}

.lsr-sel[b-87etxmtd5l] {
    font-size: 13px;
    color: #0f766e;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.lsr-sel-none[b-87etxmtd5l] {
    color: #94a3b8;
    font-weight: 500;
}

.lsr-person-error[b-87etxmtd5l] {
    margin: 0 16px 10px;
}

.lsr-selected-count[b-87etxmtd5l] {
    font-size: 13px;
    font-weight: 600;
    color: #1a7a4c;
    white-space: nowrap;
}

/* Numeric "Linked" column on the ledger grid */
.lsr-num[b-87etxmtd5l] {
    width: 72px;
    text-align: center;
}

/* Selected ledger row highlight */
.lsr-active[b-87etxmtd5l],
.lsr-active:hover[b-87etxmtd5l] {
    background: #e6f7f2 !important;
}

    .lsr-active td:first-child[b-87etxmtd5l] {
        box-shadow: inset 3px 0 0 #1ab99a;
    }

/* Sales rep checklist — bounded scroll, comfortable checkbox target */
.lsr-scroll[b-87etxmtd5l] {
    max-height: none;
}

.mu-th-chk[b-87etxmtd5l] {
    width: 56px;
    text-align: center;
}

.lsr-chk-cell[b-87etxmtd5l] {
    text-align: center;
    width: 48px;
}

    .lsr-chk-cell input[type="checkbox"][b-87etxmtd5l] {
        appearance: none;
        -webkit-appearance: none;
        width: 17px;
        height: 17px;
        border: 1.5px solid #9ca3af;
        border-radius: 4px;
        cursor: pointer;
        vertical-align: middle;
        position: relative;
        background: #fff;
        margin: 0;
    }

        .lsr-chk-cell input[type="checkbox"]:checked[b-87etxmtd5l],
        .lsr-chk-cell input[type="checkbox"]:disabled:checked[b-87etxmtd5l] {
            background: #1a56a7;
            border-color: #1a56a7;
        }

            .lsr-chk-cell input[type="checkbox"]:checked[b-87etxmtd5l]::after {
                content: "";
                position: absolute;
                left: 5px;
                top: 1px;
                width: 4px;
                height: 9px;
                border: solid #fff;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

        .lsr-chk-cell input[type="checkbox"]:disabled[b-87etxmtd5l] {
            cursor: not-allowed;
            opacity: 0.85;
        }

/* Sales rep checklist's own pagination footer (now permanently inline,
   not inside a modal body). */
.lsr-inner-footer[b-87etxmtd5l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 16px 12px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #6b7280;
    flex-shrink: 0;
}

.lsr-inner-pager[b-87etxmtd5l] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Mobile: stack the two panels ── */
@media (max-width: 900px) {
    .mu-page[b-87etxmtd5l] {
        height: auto;
    }

    .lsr-cols[b-87etxmtd5l] {
        flex-direction: column;
    }

    .mu-table-wrap[b-87etxmtd5l] {
        height: 420px;
        flex: none;
    }

    .lsr-sel[b-87etxmtd5l] {
        max-width: 140px;
    }
}
/* /Components/Pages/Masters/LevelMaster.razor.rz.scp.css */
/* =====================================================================
   GAINS — LevelMaster.razor.css   (Masters → Level grid, page-scoped)
   Shared "mu-" grid/page styles live in wwwroot/CSS/masters-forms.css.
   Only Level-page-specific rules remain here — same pattern as
   MLogin.razor.css.
   ===================================================================== */

/* "Level Name" link-style button inside the grid rows */
.mu-login[b-xhmdizcxj8] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .mu-login:hover[b-xhmdizcxj8] {
        text-decoration: underline;
    }

/* =====================================================================
   Page-end footer pinning — same pattern used on MLogin / BSPL / Daybook.
   ===================================================================== */
.mu-page[b-xhmdizcxj8] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

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

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

/* uf-footer expects exactly 2 flex children (left spacer + one right item);
   Cancel+Save are grouped into .uf-footer-right so it sees 2, not 3 — this
   is just a plain gap between the two buttons inside that group. */
.uf-footer-right[b-xhmdizcxj8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* uf-field rows in uf-body were sitting flush against each other with no
   gap — add breathing room between stacked fields (last one flush to
   the footer as-is). */
.uf-field + .uf-field[b-xhmdizcxj8] {
    margin-top: 16px;
}

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

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

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

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

    .mu-foot-info[b-xhmdizcxj8] {
        display: none;
    }
}
/* /Components/Pages/Masters/MArea.razor.rz.scp.css */
/* =====================================================================
   GAINS — MArea.razor.css   (Masters → Area grid, page-scoped)
   Shared "mu-" grid/page styles + the "uf-" edit-modal system live in
   wwwroot/CSS/masters-forms.css. Only Area-page-specific rules remain here.
   ===================================================================== */

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

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

.mu-toolbar[b-mc1jiy8648] {
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 12px;
}

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

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

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

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

/* Give the City select in the toolbar a bit more room than the page-size
   select it borrows styling from. */
.mu-toolbar .mu-pagesize-wrap .mu-pagesize[b-mc1jiy8648] {
    min-width: 180px;
}

/* ── Mobile: stack the search box and city filter ── */
@media (max-width: 767px) {
    .bspl-title-actions .mu-btn-label[b-mc1jiy8648] {
        display: none;
    }

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

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

    .mu-toolbar .mu-pager[b-mc1jiy8648] {
        justify-content: space-between;
    }

    .mu-foot-info[b-mc1jiy8648] {
        display: none;
    }
}
/* /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/MBom.razor.rz.scp.css */
/* =====================================================================
   GAINS — MBom.razor.css   (Masters → Bill Of Material, page-scoped)
   Single page: header grid + inline header/components editor.
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   ===================================================================== */

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

/* ── List view ── */
.mu-card[b-7aciujvnht] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

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

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

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

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

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

/* BOM name / component item name read as the clickable "primary" cell. */
.mu-bom-name[b-7aciujvnht] {
    color: #0f766e;
    font-weight: 600;
}

/* Right-align numeric columns (Qty, Count) — values and headers. */
.mu-num[b-7aciujvnht] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mu-th-num[b-7aciujvnht] {
    text-align: right;
}

    /* If the sortable header is a flex container, push its label/icon right too. */
    .mu-th-num.mu-th-sort[b-7aciujvnht] {
        justify-content: flex-end;
    }

/* ================================================================
   Entry view — two columns side by side: header form on the left,
   components grid on the right. Action strip stays above.
   ================================================================ */
.bom-entry-stack[b-7aciujvnht] {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(360px, 460px) 1fr;
    gap: 16px;
    min-height: 0;
}

/* Header card hugs its content at the top of the left column. */
.bom-hdr-card[b-7aciujvnht] {
    align-self: start;
    overflow: visible; /* let the item autocomplete escape the card */
}

.bom-lines-card[b-7aciujvnht] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 991px) {
    .bom-entry-stack[b-7aciujvnht] {
        grid-template-columns: 1fr;
    }
}

.bom-hdr-body[b-7aciujvnht] {
    background: #fff;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Label-left / input-right rows on a single line (horizontal). */
.bom-row[b-7aciujvnht] {
    display: grid;
    grid-template-columns: 140px minmax(0, 520px);
    align-items: center;
    gap: 16px;
}

    .bom-row > label[b-7aciujvnht] {
        font-size: 13px;
        color: #475569;
        font-weight: 500;
    }

.bom-row-field[b-7aciujvnht] {
    position: relative;
    min-width: 0;
}

.bom-row-actions[b-7aciujvnht] {
    padding-left: 146px; /* line up under the inputs */
}

    .bom-row-actions .uf-btn-ghost[b-7aciujvnht] {
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 700;
    }

/* Left-aligned action strip for the entry view (Add line · New · Grid · Save),
   styled like the ITB top tabs (.itb-toptabs button). */
.bom-entry-toolbar[b-7aciujvnht] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px 0 12px;
}

    .bom-entry-toolbar .mu-btn[b-7aciujvnht] {
        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;
    }

        .bom-entry-toolbar .mu-btn i[b-7aciujvnht] {
            font-size: 12px;
        }

        .bom-entry-toolbar .mu-btn:hover:not(:disabled)[b-7aciujvnht] {
            background: #f5f5f5;
        }

        /* Save is the single teal accent, like ITB's active tab. */
        .bom-entry-toolbar .mu-btn.success[b-7aciujvnht] {
            background: #1ab99a;
            color: #fff;
            border-color: #1ab99a;
            font-weight: 700;
        }

            .bom-entry-toolbar .mu-btn.success:hover:not(:disabled)[b-7aciujvnht] {
                background: #16a589;
                border-color: #16a589;
            }

        .bom-entry-toolbar .mu-btn:disabled[b-7aciujvnht] {
            opacity: 0.5;
            cursor: not-allowed;
        }

.bom-lines-wrap[b-7aciujvnht] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.bom-th-num[b-7aciujvnht] {
    text-align: right;
}

@media (max-width: 640px) {
    .bom-row[b-7aciujvnht] {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

/* ── Item autocomplete ── */
.bom-ac-wrap[b-7aciujvnht] {
    position: relative;
}

.bom-ac-list[b-7aciujvnht] {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

.bom-ac-item[b-7aciujvnht] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
}

    .bom-ac-item:last-child[b-7aciujvnht] {
        border-bottom: none;
    }

    .bom-ac-item:hover[b-7aciujvnht] {
        background: #f3fcf9;
    }

.bom-ac-name[b-7aciujvnht] {
    font-weight: 500;
}

.bom-ac-code[b-7aciujvnht] {
    font-size: 11.5px;
    color: #94a3b8;
    white-space: nowrap;
}

/* Line modal is a touch narrower than the default uf-modal. */
.bom-line-modal[b-7aciujvnht] {
    max-width: 520px;
}

/* Field rows inside the line modal — slightly narrower label column. */
.bom-field[b-7aciujvnht] {
    grid-template-columns: 96px 1fr;
    margin-bottom: 0;
}

.bom-line-modal .uf-body[b-7aciujvnht] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Mobile: header action buttons show icon only ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-7aciujvnht] {
        margin-left: auto;
    }

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

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

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

    .mu-foot-info[b-7aciujvnht] {
        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/MCity.razor.rz.scp.css */
/* =====================================================================
   GAINS — MCity.razor.css   (Masters → City grid, page-scoped)
   Shared "mu-" grid/page styles + the "uf-" edit-modal system live in
   wwwroot/CSS/masters-forms.css. Only City-page-specific rules remain here.
   ===================================================================== */

/* Same footer-pinning pattern used on BSPL / Daybook / TB / MLogin /
   MGroup / MItemGroup / MState / MArea. .mu-page becomes a full-height
   flex column; .mu-card grows to fill the remaining space instead of
   being sized only to its own content, and the footer sits below it as
   a direct sibling so it always lands at the true bottom of the page. */
.mu-page[b-f0ftva9myh] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

.mu-toolbar[b-f0ftva9myh] {
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 12px;
}

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

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

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

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

/* ── Mobile: stack search box and Country/State/GO filter ── */
@media (max-width: 767px) {
    .bspl-title-actions .mu-btn-label[b-f0ftva9myh] {
        display: none;
    }

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

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

    .mu-toolbar .mu-pager[b-f0ftva9myh] {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .mu-foot-info[b-f0ftva9myh] {
        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/MCostCenterGroup.razor.rz.scp.css */
/* MCostCenterGroup.razor.css — scoped styles for the CC Group grid page */

/* Flex-fill layout — same pattern as MCostCenter.razor.css: page fills
   DashboardLayout's .gains-content (which already flex/overflow-scrolls),
   card stretches to fill the page, and only the table body scrolls.
   Use height:100% here, never 100vh — 100vh double-counts the layout's
   own header/sidebar chrome and forces an extra whole-page scrollbar
   (see SchemeGrid.razor.css for the prior regression this caused). */
.mu-page[b-xuky36nyhr] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

/* Blue "link" look for the Group Name cell, matching the reference screenshot */
.ccg-link[b-xuky36nyhr] {
    color: #1a56a7;
    font-weight: 600;
}

/* /Components/Pages/Masters/MCostCenterGroupEdit.razor.rz.scp.css */
/* MCostCenterGroupEdit.razor.css — scoped styles for the CC Group Master modal */

.uf-modal-sm[b-5l53lmku0p] { max-width: 480px; }

.uf-field.ccg-field[b-5l53lmku0p] { margin-bottom: 16px; }
.uf-field.ccg-field:last-of-type[b-5l53lmku0p] { margin-bottom: 0; }
.uf-field.ccg-field > label[b-5l53lmku0p] { font-size: 13px; padding-top: 9px; }

.uf-footer-right[b-5l53lmku0p] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Solid red DELETE button — pinned to the right of SAVE, matches the
   filled look of the reference screenshot (not the ghost .uf-btn-del). */
.ccg-btn-delete[b-5l53lmku0p] {
    background: #e5484d;
    border-color: #e5484d;
    color: #fff;
}

    .ccg-btn-delete:hover[b-5l53lmku0p] {
        background: #c8393d;
    }

    .ccg-btn-delete:disabled[b-5l53lmku0p] {
        opacity: 0.65;
        cursor: default;
    }

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

/* Same page-end footer pinning pattern used on Item Group / Energy Rate /
   BSPL / Daybook / TB. .mu-page becomes a full-height flex column; .mu-card
   grows to fill the remaining space, and the footer sits as a direct
   sibling below it so it always lands at the true bottom of the page. */
.mu-page[b-2q47hxhfh3] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

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

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

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

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

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

.uf-modal-sm[b-7t3i8aisog] { max-width: 420px; }

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

@media (max-width: 540px) {
    .uf-field[b-7t3i8aisog] { grid-template-columns: 1fr; gap: 4px; }
    .uf-field > label[b-7t3i8aisog] { padding-top: 0; }
}
/* /Components/Pages/Masters/MCostHeaderItem.razor.rz.scp.css */
/* =====================================================================
   GAINS — MCostHeaderItem.razor.css   (Masters → Cost Header Item)
   Shared "mu-" grid/page/filter/drawer/toast styles live in
   wwwroot/CSS/masters-forms.css (same file MItemGroup*.razor.css use).
   Only the two-panel split layout and its checkbox list are page-specific.
   ===================================================================== */

.chi-card[b-ik3uzmt5cx] {
    /* .mu-card is already a flex column that grows to fill .mu-page (see
       MItemGroup.razor.css) — the split panel below just needs to fill it. */
    padding: 0;
}

.chi-split[b-ik3uzmt5cx] {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
}

/* ── Left: cost header list ── */
.chi-left[b-ik3uzmt5cx] {
    flex: 0 0 320px;
    min-width: 240px;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #eef2f7;
    min-height: 0;
}

.chi-panel-hdr[b-ik3uzmt5cx] {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f7f9fc;
    border-bottom: 1px solid #eef2f7;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.chi-panel-hdr-count[b-ik3uzmt5cx] {
    width: 50px;
    text-align: right;
}

.chi-left-scroll[b-ik3uzmt5cx] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ── Right: filters + item checklist ── */
.chi-right[b-ik3uzmt5cx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chi-right-toolbar[b-ik3uzmt5cx] {
    padding: 12px 16px;
    border-bottom: 1px solid #eef2f7;
    flex-shrink: 0;
}

.chi-right-title[b-ik3uzmt5cx] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #1a2537;
}

.chi-linked-badge[b-ik3uzmt5cx] {
    font-size: 12px;
    font-weight: 600;
    color: #1a56a7;
    background: #eef4fb;
    border-radius: 999px;
    padding: 3px 10px;
}

.chi-filter[b-ik3uzmt5cx] {
    flex-shrink: 0;
}

.chi-filter-grid[b-ik3uzmt5cx] {
    grid-template-columns: auto minmax(140px, 200px) auto minmax(120px, 160px) auto minmax(180px, 1fr) auto;
}

.chi-filter-actions[b-ik3uzmt5cx] {
    grid-column: auto;
    justify-content: flex-start;
}

@media (max-width: 900px) {
    .chi-filter-grid[b-ik3uzmt5cx] {
        grid-template-columns: auto 1fr;
    }
}

.chi-items-scroll[b-ik3uzmt5cx] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Shared mu-table, trimmed for the two checklist tables on this page */
.chi-table[b-ik3uzmt5cx] {
    width: 100%;
}

.chi-cat-name[b-ik3uzmt5cx] {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chi-cat-code[b-ik3uzmt5cx],
.chi-cat-count[b-ik3uzmt5cx] {
    text-align: right;
    width: 70px;
    color: #64748b;
    font-size: 12.5px;
}

.chi-row-active td[b-ik3uzmt5cx] {
    background: #eef4fb !important;
    font-weight: 600;
}

.chi-row-linked td[b-ik3uzmt5cx] {
    background: #f4faf6;
}

.chi-th-chk[b-ik3uzmt5cx] {
    width: 34px;
    text-align: center;
}

.chi-chk[b-ik3uzmt5cx] {
    width: 15px;
    height: 15px;
    accent-color: #1a56a7;
    cursor: pointer;
}

    .chi-chk:disabled[b-ik3uzmt5cx] {
        cursor: not-allowed;
        opacity: 0.5;
    }

.chi-items-pager[b-ik3uzmt5cx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid #eef2f7;
    flex-shrink: 0;
}

.chi-page-of[b-ik3uzmt5cx] {
    font-size: 12px;
    color: #475569;
    white-space: nowrap;
}

/* ── Footer ── */
.chi-foot[b-ik3uzmt5cx] {
    flex-shrink: 0;
}

/* ── Report drawer ── */
.chi-report-drawer[b-ik3uzmt5cx] {
    width: 720px;
}

.chi-report-body[b-ik3uzmt5cx] {
    gap: 10px;
}

.chi-report-foot[b-ik3uzmt5cx] {
    justify-content: center;
    gap: 14px;
}

@media (max-width: 720px) {
    .chi-split[b-ik3uzmt5cx] {
        flex-direction: column;
        overflow: auto;
    }

    .chi-left[b-ik3uzmt5cx] {
        flex: 0 0 auto;
        max-width: 100%;
        max-height: 260px;
        border-right: none;
        border-bottom: 1px solid #eef2f7;
    }

    .chi-right[b-ik3uzmt5cx] {
        min-height: 320px;
    }

    .chi-report-drawer[b-ik3uzmt5cx] {
        width: 100vw;
        max-width: 100vw;
    }
}
/* /Components/Pages/Masters/MCostLedger.razor.rz.scp.css */
/* =====================================================================
   GAINS — MCostLedger.razor.css   (Masters → Cost Ledger, page-scoped)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only Cost-Ledger-specific rules — including the Mappings/Report segmented
   tab control, which has no shared equivalent yet — remain here.
   ===================================================================== */

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

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

.mu-toolbar[b-h68hm0b7lt],
.mu-filter[b-h68hm0b7lt] {
    flex-shrink: 0;
}

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

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

.mu-filter-actions[b-h68hm0b7lt] {
    align-items: center;
}

/* ── Mappings / Report segmented toggle ── */
.mu-seg[b-h68hm0b7lt] {
    display: inline-flex;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.mu-seg-btn[b-h68hm0b7lt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: none;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

    .mu-seg-btn + .mu-seg-btn[b-h68hm0b7lt] {
        border-left: 1px solid #cbd5e1;
    }

    .mu-seg-btn:hover[b-h68hm0b7lt] {
        background: #eef4fb;
    }

    .mu-seg-btn.active[b-h68hm0b7lt] {
        background: #1a56a7;
        color: #fff;
    }

.bspl-title-actions[b-h68hm0b7lt] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-h68hm0b7lt] {
        margin-left: auto;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

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

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

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

    .mu-seg-btn[b-h68hm0b7lt] {
        padding: 8px 10px;
    }

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

@media (max-width: 900px) {
    /* mu-filter-grid collapses to "auto 1fr" at this width (shared CSS) —
       let Go/Clear span full width below the fields instead of a phantom
       4th grid column. */
    .mu-filter-actions[b-h68hm0b7lt] {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
    }
}
/* /Components/Pages/Masters/MCostLedgerEdit.razor.rz.scp.css */
/* =====================================================================
   GAINS — MCostLedgerEdit.razor.css   (Add Cost Ledger mapping modal)
   Shared "uf-" modal styles live in wwwroot/CSS/masters-forms.css.
   Only Cost-Ledger-edit-specific rules and small overrides remain here.
   ===================================================================== */

.uf-modal-sm[b-kfxna4o1o1] { max-width: 440px; }

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

.uf-loading-inline[b-kfxna4o1o1] {
    padding: 7px 0;
    color: #64748b;
    font-size: 13px;
}

@media (max-width: 540px) {
    .uf-field[b-kfxna4o1o1] { grid-template-columns: 1fr; gap: 4px; }
    .uf-field > label[b-kfxna4o1o1] { padding-top: 0; }
}
/* /Components/Pages/Masters/MCountry.razor.rz.scp.css */
/* =====================================================================
   GAINS — MCountry.razor.css   (Masters → Country grid, page-scoped)
   Shared "mu-" grid/page styles live in wwwroot/CSS/masters-forms.css.
   Only Country-page-specific rules remain here: the read-only banner
   next to the search box (same pattern as the Voucher Type tab).
   ===================================================================== */

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

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

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

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

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

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

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

/* ── Search box + read-only note share the toolbar row ── */
.cty-toolbar[b-e6dsxt4ss8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cty-readonly-note[b-e6dsxt4ss8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #e11d48;
}

    .cty-readonly-note i[b-e6dsxt4ss8] {
        font-size: 12px;
    }

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

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

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

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

    .mu-foot-info[b-e6dsxt4ss8] {
        display: none;
    }
}
/* /Components/Pages/Masters/MCustType.razor.rz.scp.css */
/* =====================================================================
   GAINS — MCustType.razor.css   (Masters → Customer Type grid, page-scoped)
   Shared "mu-" grid/page styles live in wwwroot/CSS/masters-forms.css
   (same file MItemGroup.razor.css uses) — only page-specific rules here.
   ===================================================================== */

/* =====================================================================
   Page-end footer pinning — same pattern used on ItemGroup / 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-zbj97vph4k] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

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

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

/* ── Row layout: Sr# / Customer Type / Abbr / delete action ── */
.mu-th-idx[b-zbj97vph4k],
.mu-idx[b-zbj97vph4k] {
    width: 56px;
    text-align: left;
    color: #64748b;
}

.mu-th-act[b-zbj97vph4k],
.mu-act-cell[b-zbj97vph4k] {
    width: 44px;
    text-align: right;
}

.mu-del[b-zbj97vph4k] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f1c4c4;
    border-radius: 6px;
    background: #fff;
    color: #b91c1c;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

    .mu-del:hover[b-zbj97vph4k] {
        background: #fee2e2;
        border-color: #e58585;
    }

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

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

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

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

    .mu-foot-info[b-zbj97vph4k] {
        display: none;
    }
}
/* /Components/Pages/Masters/MCustTypeEdit.razor.rz.scp.css */
/* =====================================================================
   GAINS — MCustTypeEdit.razor.css   (edit Customer Type modal)
   Shared "uf-" modal styles live in wwwroot/CSS/masters-forms.css.
   This is the shortest of the Masters edit forms (just two fields), so
   there's very little left to override beyond the modal width and the
   field spacing already used for MItemGroupEdit's short form.
   ===================================================================== */

.uf-modal-sm[b-cbde1xhacl] { max-width: 420px; }

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

@media (max-width: 540px) {
    .uf-field[b-cbde1xhacl] { grid-template-columns: 1fr; gap: 4px; }
    .uf-field > label[b-cbde1xhacl] { padding-top: 0; }
}
/* /Components/Pages/Masters/MDepot.razor.rz.scp.css */
/* MDepot.razor.css — scoped styles for the Depot list page */

/* Flex-fill layout — page fills DashboardLayout's .gains-content (which
   already flex/overflow-scrolls) and only the table body scrolls. Use
   height:100% here, never 100vh (see SchemeGrid.razor.css for the prior
   regression that caused). */
.mu-page[b-o2f8l0049c] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

/* 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/MDepriSetting.razor.rz.scp.css */
/* =====================================================================
   GAINS — MDepriSetting.razor.css   (Masters → Depreciation Setting grid, page-scoped)
   Shared "mu-" grid/page styles live in wwwroot/CSS/masters-forms.css.
   Only Depreciation-Setting-page-specific rules remain here.
   ===================================================================== */

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

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

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

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

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

/* ── Depot / Department filter dropdowns, next to the search box ── */
.ds-filters[b-c3kpmsqzpo] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .bspl-title-actions[b-c3kpmsqzpo] {
        margin-left: auto;
    }

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

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

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

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

    .mu-toolbar[b-c3kpmsqzpo] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .ds-filters[b-c3kpmsqzpo] {
        width: 100%;
    }

        .ds-filters select[b-c3kpmsqzpo] {
            flex: 1 1 45%;
        }
}
/* /Components/Pages/Masters/MDepriSettingEdit.razor.rz.scp.css */
/* =====================================================================
   GAINS — MDepriSettingEdit.razor.css   (edit Depreciation Setting modal)
   Shared "uf-" modal styles live in wwwroot/CSS/masters-forms.css.
   Only Depreciation-Setting-edit-specific rules remain here.
   ===================================================================== */

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

.uf-field[b-w40hlb6ty4] { margin-bottom: 13px; }
.uf-field:last-child[b-w40hlb6ty4] { margin-bottom: 0; }
.uf-section[b-w40hlb6ty4] { margin: 0 0 0; }

@media (max-width: 540px) {
    .uf-field[b-w40hlb6ty4] { grid-template-columns: 1fr; gap: 4px; }
    .uf-field > label[b-w40hlb6ty4] { padding-top: 0; }
}
/* /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/MEnergy.razor.rz.scp.css */
/* =====================================================================
   GAINS — MEnergy.razor.css   (Masters → Energy grid, page-scoped)
   Shared "mu-" grid/page styles now live in wwwroot/CSS/masters-forms.css.
   Only Energy-page-specific rules remain here.
   ===================================================================== */

/* =====================================================================
   Page-end footer pinning — same pattern used on Item Group / 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-nd6dlamvq6] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

.uf-modal-sm[b-nd172c9u0r] { max-width: 420px; }

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

/* Read-only UOM row (API returns it on the grid but doesn't accept it on
   insert/update, so there's no editor for it — just show it when present). */
.uf-readonly-val[b-nd172c9u0r] {
    display: inline-block;
    padding: 6px 0;
    font-size: 13px;
    color: #64748b;
}

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

/* Same page-end footer pinning pattern used on Item Group / BSPL / Daybook / TB. */
.mu-page[b-yskf1re8ke] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

.mu-toolbar[b-yskf1re8ke],
.mu-filter[b-yskf1re8ke] {
    flex-shrink: 0;
}

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

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

/* The filter row's "Go / Clear" buttons don't need a full grid column of their
   own width — let them hug the left edge of their cell instead of stretching. */
.mu-filter-actions[b-yskf1re8ke] {
    align-items: center;
}

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

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

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

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

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

@media (max-width: 900px) {
    /* mu-filter-grid already collapses to "auto 1fr" at this width (shared CSS) —
       let the Go/Clear actions span full width below the fields instead of
       trying to sit in a phantom 4th column that no longer exists. */
    .mu-filter-actions[b-yskf1re8ke] {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
    }
}
/* /Components/Pages/Masters/MEnergyRateEdit.razor.rz.scp.css */
/* =====================================================================
   GAINS — MEnergyRateEdit.razor.css   (Add/Edit Energy Rate modal)
   Shared "uf-" modal styles live in wwwroot/CSS/masters-forms.css.
   Only Energy-Rate-edit-specific rules and small overrides remain here.
   ===================================================================== */

.uf-modal-sm[b-4qzap7j4tc] { max-width: 420px; }

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

@media (max-width: 540px) {
    .uf-field[b-4qzap7j4tc] { grid-template-columns: 1fr; gap: 4px; }
    .uf-field > label[b-4qzap7j4tc] { padding-top: 0; }
}
/* /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/MHoliday.razor.rz.scp.css */
/* =====================================================================
   GAINS — MHoliday.razor.css   (Masters → Holiday Calendar)
   Shared "mu-"/"uf-" grid, button, toast and checkbox styles live in
   wwwroot/CSS/masters-forms.css. Only calendar-grid-specific rules here.
   ===================================================================== */

.hc-card[b-yb2au78pmy] {
    padding: 16px 18px 20px;
}

/* ── Filter toolbar ── */
.hc-toolbar[b-yb2au78pmy] {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e5e9f0;
}

.hc-lbl[b-yb2au78pmy] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
}

.hc-wk-check[b-yb2au78pmy] {
    display: flex;
    align-items: center;
    padding-bottom: 4px;
}

.hc-hint[b-yb2au78pmy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: #eef4fb;
    border: 1px solid #d7e6f8;
    border-radius: 6px;
    color: #1a56a7;
    font-size: 13px;
}

/* ── Quarter / year totals strip ── */
.hc-totals[b-yb2au78pmy] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.hc-total-chip[b-yb2au78pmy] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 12.5px;
}

.hc-total-label[b-yb2au78pmy] {
    color: #64748b;
    font-weight: 600;
}

.hc-total-val[b-yb2au78pmy] {
    color: #1a2537;
    font-weight: 700;
}

.hc-total-year[b-yb2au78pmy] {
    background: #eaf6f1;
    border-color: #cdeadf;
}

    .hc-total-year .hc-total-val[b-yb2au78pmy] {
        color: #116630;
    }

/* ── Month cards ── */
.hc-month-card[b-yb2au78pmy] {
    height: 100%;
    border: 1px solid #dde3ed;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.hc-month-hdr[b-yb2au78pmy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    background: #4b5563;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.hc-month-count[b-yb2au78pmy] {
    background: rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
}

.hc-month-table[b-yb2au78pmy] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .hc-month-table thead th[b-yb2au78pmy] {
        font-size: 10.5px;
        font-weight: 600;
        color: #64748b;
        padding: 5px 0;
        text-align: center;
        border-bottom: 1px solid #eef2f7;
    }

        .hc-month-table thead th.hc-wk[b-yb2au78pmy] {
            color: #94a3b8;
        }

.hc-empty[b-yb2au78pmy] {
    padding: 6px 0;
}

.hc-day[b-yb2au78pmy] {
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    color: #1a2537;
    cursor: pointer;
    user-select: none;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}

    .hc-day:hover[b-yb2au78pmy] {
        background: #eef4fb;
    }

.hc-day-weekend[b-yb2au78pmy] {
    color: #64748b;
}

.hc-day-holiday[b-yb2au78pmy] {
    background: #1a56a7;
    color: #fff;
    font-weight: 700;
}

    .hc-day-holiday:hover[b-yb2au78pmy] {
        background: #0f3d82;
    }

    .hc-day-holiday.hc-day-weekend[b-yb2au78pmy] {
        background: #b91c1c;
    }

        .hc-day-holiday.hc-day-weekend:hover[b-yb2au78pmy] {
            background: #921616;
        }

/* ── Print ── */
@media print {
    .bspl-title-block[b-yb2au78pmy],
    .hc-toolbar[b-yb2au78pmy],
    .mu-toast[b-yb2au78pmy] {
        display: none !important;
    }

    .hc-months[b-yb2au78pmy] {
        row-gap: 8px !important;
    }
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .hc-card[b-yb2au78pmy] {
        padding: 12px;
    }

    .hc-totals[b-yb2au78pmy] {
        gap: 6px;
    }

    .hc-total-chip[b-yb2au78pmy] {
        padding: 5px 9px;
        font-size: 11.5px;
    }

    .hc-day[b-yb2au78pmy] {
        padding: 7px 0;
        font-size: 13px;
    }
}
/* /Components/Pages/Masters/MHSNTaxClass.razor.rz.scp.css */
/* =====================================================================
   GAINS — MHSNTaxClass.razor.css   (Masters → HSN Tax Class grid, page-scoped)
   Shared "mu-"/"uf-" grid + modal styles live in wwwroot/CSS/masters-forms.css.
   Only HSN-Tax-Class-page-specific rules remain here.
   ===================================================================== */

/* Same footer-pinning pattern used on BSPL / Daybook / TB / MLogin / MGroup /
   MItemGroup: .mu-page becomes a full-height flex column; .mu-card grows to
   fill the remaining space, and the footer sits below it at the true bottom. */
.mu-page[b-gjtx99ctg5] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

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

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

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

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

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

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

    .mu-foot-info[b-gjtx99ctg5] {
        display: none;
    }
}
/* /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/MLedgerCCGroup.razor.rz.scp.css */
/* =====================================================================
   GAINS — MLedgerCCGroup.razor.css   (Masters → Ledger CC Group, page-scoped)
   Shared "mu-"/"uf-" grid + checkbox styles live in wwwroot/CSS/masters-forms.css.
   This page adds the two-panel master/detail split and its small extras
   (filter row, branch-checkbox row, link-count badge, checklist header).
   ===================================================================== */

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

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

/* ── "Update all child site(s)" row — sits above the split, like the old page ── */
.lcg-branch-row[b-mpb8b37t8i] {
    padding: 0 20px 12px;
    flex-shrink: 0;
}

.lcg-branch-check[b-mpb8b37t8i] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
}

/* ── Master/detail split — left = ledgers, right = CC group checklist ── */
.lcg-split[b-mpb8b37t8i] {
    flex: 1;
    display: flex;
    gap: 16px;
    min-height: 0;
    padding: 0 20px;
}

.lcg-left[b-mpb8b37t8i],
.lcg-right[b-mpb8b37t8i] {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

    .lcg-left .mu-table-wrap[b-mpb8b37t8i],
    .lcg-right .mu-table-wrap[b-mpb8b37t8i] {
        flex: 1;
        overflow: auto;
        min-height: 0;
    }

/* ── Left panel filter row: Group select + Ledger input + GO button ── */
.lcg-filter-row[b-mpb8b37t8i] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.lcg-group-select[b-mpb8b37t8i] {
    flex: 0 0 140px;
}

.lcg-ledger-input[b-mpb8b37t8i] {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    color: #0f172a;
    background: #fff;
}

    .lcg-ledger-input:focus[b-mpb8b37t8i] {
        outline: none;
        border-color: #1ab99a;
        box-shadow: 0 0 0 3px rgba(26, 185, 154, 0.12);
    }

.lcg-go-btn[b-mpb8b37t8i] {
    flex-shrink: 0;
    padding: 8px 16px;
}

/* ── Selected ledger row on the left ── */
.lcg-row-active td[b-mpb8b37t8i] {
    background: #e8f8f4 !important;
}

/* ── Right panel header: "Ledger Name :" + "# of CC Categories :" ── */
.lcg-right-header[b-mpb8b37t8i] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.lcg-ledger-name[b-mpb8b37t8i] {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.lcg-ledger-name-label[b-mpb8b37t8i] {
    font-weight: 700;
    color: #0f172a;
    margin-right: 4px;
}

.lcg-count-line[b-mpb8b37t8i] {
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
}

/* ── Left panel "Count" column/badge ── */
.lcg-count-col[b-mpb8b37t8i] {
    text-align: center;
    width: 70px;
}

.lcg-count-badge[b-mpb8b37t8i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e8f8f4;
    color: #0f766e;
    font-size: 11px;
    font-weight: 700;
}

/* ── Checkbox column on the right (checklist) ── */
.lcg-chk-col[b-mpb8b37t8i] {
    width: 40px;
    text-align: center;
}

/* ── Mobile: stack the two panels, filter row wraps ── */
@media (max-width: 900px) {
    .lcg-split[b-mpb8b37t8i] {
        flex-direction: column;
        padding: 0 10px;
        gap: 12px;
    }

    .lcg-left[b-mpb8b37t8i],
    .lcg-right[b-mpb8b37t8i] {
        flex: 1 1 auto;
        min-height: 260px;
    }

    .lcg-branch-row[b-mpb8b37t8i] {
        padding: 0 10px 12px;
    }
}

@media (max-width: 600px) {
    .lcg-filter-row[b-mpb8b37t8i] {
        flex-wrap: wrap;
    }

    .lcg-group-select[b-mpb8b37t8i] {
        flex: 1 1 100%;
    }

    .lcg-ledger-input[b-mpb8b37t8i] {
        flex: 1 1 auto;
    }
}

@media (max-width: 767px) {
    .lcg-foot .mu-btn-label[b-mpb8b37t8i] {
        display: none;
    }

    .lcg-foot .mu-btn[b-mpb8b37t8i] {
        padding: 8px 10px;
        gap: 0;
    }
}
/* /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/MMachine.razor.rz.scp.css */
/* =====================================================================
   GAINS — MMachine.razor.css   (Masters → Machine grid, page-scoped)
   Shared "mu-" grid/page styles live in wwwroot/CSS/masters-forms.css
   (same file MItemGroup.razor.css / MCustType.razor.css use) — only
   page-specific rules here.
   ===================================================================== */

/* =====================================================================
   Page-end footer pinning — same pattern used on ItemGroup / CustType /
   BSPL / Daybook / TB / MLogin / MGroup.
   ===================================================================== */
.mu-page[b-alhxkervuh] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

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

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

/* ── Row layout: Sr# / Active / Name / Code / Type / Date / Desc / delete action ── */
.mu-th-idx[b-alhxkervuh],
.mu-idx[b-alhxkervuh] {
    width: 50px;
    text-align: left;
    color: #64748b;
}

.mu-th-active[b-alhxkervuh],
.mu-active-cell[b-alhxkervuh] {
    width: 60px;
    text-align: center;
}

.mu-date-cell[b-alhxkervuh] {
    white-space: nowrap;
    color: #475569;
    font-size: 12.5px;
}

.mu-desc-cell[b-alhxkervuh] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #64748b;
}

.mu-th-act[b-alhxkervuh],
.mu-act-cell[b-alhxkervuh] {
    width: 44px;
    text-align: right;
}

.mu-del[b-alhxkervuh] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f1c4c4;
    border-radius: 6px;
    background: #fff;
    color: #b91c1c;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

    .mu-del:hover[b-alhxkervuh] {
        background: #fee2e2;
        border-color: #e58585;
    }

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

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

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

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

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

    .mu-desc-cell[b-alhxkervuh] {
        max-width: 120px;
    }
}
/* /Components/Pages/Masters/MMachineEdit.razor.rz.scp.css */
/* =====================================================================
   GAINS — MMachineEdit.razor.css   (edit Machine modal)
   Shared "uf-" modal styles live in wwwroot/CSS/masters-forms.css.
   Only Machine-edit-specific rules — the field spacing convention already
   used by MItemGroupEdit/MCustTypeEdit, plus the Active on/off switch,
   which no other Masters edit form has needed yet.
   ===================================================================== */

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

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

/* ── Active on/off switch ── */
.uf-toggle-row[b-576xrhr1y2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}

.uf-switch[b-576xrhr1y2] {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}

    .uf-switch input[b-576xrhr1y2] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.uf-switch-slider[b-576xrhr1y2] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background 0.15s;
}

    .uf-switch-slider[b-576xrhr1y2]::before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        left: 3px;
        top: 3px;
        background: #fff;
        border-radius: 50%;
        transition: transform 0.15s;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

.uf-switch input:checked + .uf-switch-slider[b-576xrhr1y2] {
    background: #15803d;
}

    .uf-switch input:checked + .uf-switch-slider[b-576xrhr1y2]::before {
        transform: translateX(16px);
    }

.uf-switch-label[b-576xrhr1y2] {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

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

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

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

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

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

.mot-name[b-9dseczsg3p] {
    font-weight: 500;
}

.mot-total-badge[b-9dseczsg3p] {
    margin-left: 8px;
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef1f6;
    color: #475569;
    font-size: 11.5px;
    font-weight: 600;
}

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

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

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

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

    .mu-foot-info[b-9dseczsg3p] {
        display: none;
    }
}
/* /Components/Pages/Masters/MModeOfTravelEdit.razor.rz.scp.css */
/* =====================================================================
   GAINS — MModeOfTravelEdit.razor.css   (add/edit Mode of Travel modal)
   Shared "uf-" modal styles live in wwwroot/CSS/masters-forms.css.
   Only Mode-of-Travel-edit-specific overrides remain here.
   ===================================================================== */

.uf-modal-sm[b-78jdn1psen] { max-width: 420px; }

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

@media (max-width: 540px) {
    .uf-field[b-78jdn1psen] { grid-template-columns: 1fr; gap: 4px; }
    .uf-field > label[b-78jdn1psen] { padding-top: 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/MProcess.razor.rz.scp.css */
/* =====================================================================
   GAINS — MProcess.razor.css   (Masters → Process grid, page-scoped)
   Shared "mu-" grid/page styles live in wwwroot/CSS/masters-forms.css.
   Only Process-page-specific rules remain here.
   ===================================================================== */

/* =====================================================================
   Page-end footer pinning — same pattern used on ItemGroup / 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-4yqx7qt8ft] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

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

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

/* Priority column reads more naturally right-aligned, like a number. */
.mu-table td:nth-last-child(2)[b-4yqx7qt8ft] {
    text-align: right;
}

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

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

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

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

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

.uf-modal-sm[b-50delwa6ng] { max-width: 420px; }

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

/* Priority is a short numeric field — no need for it to stretch full width. */
.uf-field input[type="number"][b-50delwa6ng] {
    max-width: 120px;
}

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

/* =====================================================================
   Page-end footer pinning — same pattern used on Item Group / 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-ck5tf51ked] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

.uf-modal-sm[b-fgc0phyair] { max-width: 420px; }

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

@media (max-width: 540px) {
    .uf-field[b-fgc0phyair] { grid-template-columns: 1fr; gap: 4px; }
    .uf-field > label[b-fgc0phyair] { padding-top: 0; }
}
/* /Components/Pages/Masters/MRole.razor.rz.scp.css */
/* MRole.razor.css — scoped styles for the Role Master list page */

/* Flex-fill layout — page fills DashboardLayout's .gains-content (which
   already flex/overflow-scrolls) and only the table body scrolls. Use
   height:100% here, never 100vh (see SchemeGrid.razor.css for the prior
   regression that caused). */
.mu-page[b-3h4jqrnnti] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

/* 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/MRoleTask.razor.rz.scp.css */
/* =====================================================================
   GAINS — MRoleTask.razor.css   (Masters → Role Task grid, page-scoped)
   Shared "mu-"/"uf-"/"le-" styles live in wwwroot/CSS/masters-forms.css.
   Only Role-Task-specific rules remain here.
   ===================================================================== */

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

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

.mu-table-wrap[b-s2wpgs0exw] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}
.mu-table_[b-s2wpgs0exw] {
    border-collapse: collapse;
    font-size: 13px;
}
.mu-foot[b-s2wpgs0exw] {
    flex-shrink: 0;
}

/* ── Toolbar: Role/Module selects on the left, search on the right ── */
.rt-toolbar[b-s2wpgs0exw] {
    flex-wrap: wrap;
    gap: 14px;
}

.rt-filters[b-s2wpgs0exw] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.rt-fld[b-s2wpgs0exw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .rt-fld > label[b-s2wpgs0exw] {
        font-size: 11.5px;
        font-weight: 600;
        color: #64748b;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

.rt-select[b-s2wpgs0exw] {
    min-width: 190px;
    padding: 8px 11px;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    font-size: 13px;
    color: #1a2537;
    font-family: inherit;
    background: #fff;
    outline: none;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}

    .rt-select:hover[b-s2wpgs0exw] {
        border-color: #c3ccdb;
    }

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

/* ── Allow column ── */
.rt-th-allow[b-s2wpgs0exw] {
    width: 90px;
    text-align: center;
}

.rt-allow-cell[b-s2wpgs0exw] {
    text-align: center;
}

.rt-chk[b-s2wpgs0exw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .rt-chk input[b-s2wpgs0exw] {
        width: 17px;
        height: 17px;
    }

        .rt-chk input:disabled[b-s2wpgs0exw] {
            opacity: 0.5;
            cursor: not-allowed;
        }

@media (max-width: 720px) {
    .rt-filters[b-s2wpgs0exw] {
        width: 100%;
    }

    .rt-fld[b-s2wpgs0exw] {
        flex: 1 1 140px;
    }

    .rt-select[b-s2wpgs0exw] {
        min-width: 0;
        width: 100%;
    }

    .mu-search[b-s2wpgs0exw] {
        width: 100%;
        flex: 1 1 100%;
    }
}
/* /Components/Pages/Masters/Msettings.razor.rz.scp.css */
/* =====================================================================
   GAINS — MSettings.razor.css  (Masters → Settings, page-scoped)
   Shared "mu-"/"bspl-" styles live in wwwroot/CSS/masters-forms.css.
   ===================================================================== */

.st-page[b-u04olbf61x] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 12px;
}

/* ── Tab bar ── */
.st-tabs[b-u04olbf61x] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

.st-tab[b-u04olbf61x] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    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;
    white-space: nowrap;
}

    .st-tab i[b-u04olbf61x] {
        font-size: 13px;
        opacity: 0.8;
    }

    .st-tab:hover[b-u04olbf61x] {
        background: #f1f5f9;
    }

    .st-tab.active[b-u04olbf61x] {
        background: #1a56a7;
        border-color: #1a56a7;
        color: #fff;
    }

        .st-tab.active i[b-u04olbf61x] {
            opacity: 1;
        }

/* ── Card + scroll body ── */
.st-card[b-u04olbf61x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.st-body[b-u04olbf61x] {
    flex: 1;
    overflow: auto;
    padding: 18px 20px;
    min-height: 0;
}

/* ── Field grid ── */
.st-grid[b-u04olbf61x] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 28px;
}

.st-field[b-u04olbf61x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    min-height: 40px;
}

.st-label[b-u04olbf61x] {
    font-size: 13px;
    color: #334155;
    font-weight: 500;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.st-note[b-u04olbf61x] {
    color: #1a56a7;
    cursor: help;
    margin-left: 4px;
    font-size: 12px;
}

.st-control[b-u04olbf61x] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Inputs / selects reuse the teal-focus look from the shared uf-input. */
.st-input[b-u04olbf61x] {
    padding: 7px 10px;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    font-family: inherit;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
    min-width: 200px;
}

    .st-input:focus[b-u04olbf61x] {
        border-color: #1ab99a;
        box-shadow: 0 0 0 3px rgba(26, 185, 154, 0.16);
    }

.st-num[b-u04olbf61x] {
    min-width: 110px;
    width: 110px;
    text-align: right;
}

/* ── Toggle switch ── */
.st-switch[b-u04olbf61x] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

    .st-switch input[b-u04olbf61x] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.st-slider[b-u04olbf61x] {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #cbd5e1;
    border-radius: 24px;
    transition: background 0.15s;
}

    .st-slider[b-u04olbf61x]::before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background: #fff;
        border-radius: 50%;
        transition: transform 0.15s;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

.st-switch input:checked + .st-slider[b-u04olbf61x] {
    background: #1ab99a;
}

    .st-switch input:checked + .st-slider[b-u04olbf61x]::before {
        transform: translateX(20px);
    }

/* ── Set Ledger autocomplete ── */
.st-ledrow[b-u04olbf61x] {
    align-items: flex-start;
}

.st-led-control[b-u04olbf61x] {
    position: relative;
    display: block;
}

.st-auto[b-u04olbf61x] {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    left: auto;
    min-width: 240px;
    max-height: 220px;
    overflow: auto;
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    z-index: 20;
}

.st-auto-item[b-u04olbf61x] {
    padding: 8px 11px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

    .st-auto-item:hover[b-u04olbf61x] {
        background: #f3fcf9;
    }

.st-auto-code[b-u04olbf61x] {
    color: #94a3b8;
    font-size: 11.5px;
}

/* ── Warning banner (unconfirmed mapping) ── */
.st-flag[b-u04olbf61x] {
    margin-bottom: 14px;
    padding: 9px 13px;
    background: #fff8e6;
    border: 1px solid #f5d98a;
    border-radius: 8px;
    color: #92610a;
    font-size: 12px;
    line-height: 1.4;
}

/* ── Email tab: single column ── */
.st-email .st-field[b-u04olbf61x] {
    max-width: 520px;
}

/* ── Footer save bar ── */
.st-foot[b-u04olbf61x] {
    flex-shrink: 0;
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .st-grid[b-u04olbf61x] {
        grid-template-columns: 1fr;
    }

    .st-input[b-u04olbf61x] {
        min-width: 150px;
    }

    .st-tab span[b-u04olbf61x] {
        display: none;
    }

    .st-tab[b-u04olbf61x] {
        padding: 8px 11px;
    }
}
/* /Components/Pages/Masters/MState.razor.rz.scp.css */
/* =====================================================================
   GAINS — MState.razor.css   (Masters → State grid, page-scoped)
   Shared "mu-" grid/page styles + the filter drawer live in
   wwwroot/CSS/masters-forms.css. Only State-page-specific rules
   remain here.
   ===================================================================== */

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

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

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

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

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

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

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

/* ── Mobile: keep the Filters button top-right, icon-first ── */
@media (max-width: 767px) {
    .bspl-title-actions[b-zz6ab7qe63] {
        margin-left: auto;
    }

    .mu-foot-info[b-zz6ab7qe63] {
        display: none;
    }
}
/* /Components/Pages/Masters/MTask.razor.rz.scp.css */
/* MTask.razor.css — scoped styles for the Task Master page.
   Two mu-table-wrap panels sit side by side (Task list + Module counts)
   below a module-filter toolbar, all inside a single ".mu-card row"
   container (the "row" class comes from Bootstrap on the markup).

   Flex-fill layout — same rule as the other Masters pages: .mu-page fills
   DashboardLayout's .gains-content (which already flex/overflow-scrolls),
   and only the two table bodies scroll internally. Use height:100% here,
   never 100vh (see SchemeGrid.razor.css for the prior regression that
   mistake caused).

   Bootstrap's .row relies on flex-wrap, and flex-wrap's multi-line stretch
   can't target "only the panel line" while leaving the toolbar line at its
   natural height — so .mu-card is switched to CSS Grid instead: an "auto"
   row for the toolbar and a "1fr" row for the two panels. The two
   .mu-table-wrap panels auto-place into that second row (Loader's overlay
   is position:absolute, so it never participates in the grid). */
.mu-page[b-5hspfebopp] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mu-card[b-5hspfebopp] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
    flex: 1;
    min-height: 0;
}

.mu-toolbar[b-5hspfebopp] {
    grid-column: 1 / -1;
    flex-shrink: 0;
}

/* Each panel flex/grid-fills its cell and scrolls internally — was a fixed
   540px (shared masters-forms.css default) and a Bootstrap col-xl-4
   max-width that would otherwise cap the panel at 33% of a 50/50 grid
   track. */
.mu-table-wrap[b-5hspfebopp] {
    height: auto;
    max-width: none;
    width: auto;
    overflow: auto;
    min-height: 0;
}

.mu-foot[b-5hspfebopp] {
    flex-shrink: 0;
}
/* /Components/Pages/Masters/MTaskRole.razor.rz.scp.css */
/* =====================================================================
   GAINS — MTaskRole.razor.css   (Masters → XTask Role, page-scoped)
   Shared "mu-"/"uf-"/"bspl-" styles live in wwwroot/CSS/masters-forms.css.
   Only the two-panel (Task list / Role "Allow" checklist) layout that's
   specific to this page lives here — same convention already used by
   MItemGroup.razor.css and MItemEdit.razor.css.
   ===================================================================== */

.tr-card[b-6nidxwhebt] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tr-panels[b-6nidxwhebt] {
    display: flex;
    align-items: stretch;
    min-height: 0;
}

.tr-panel[b-6nidxwhebt] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tr-panel-tasks[b-6nidxwhebt] {
    flex: 1 1 55%;
    border-right: 1px solid #eef2f7;
}

.tr-panel-roles[b-6nidxwhebt] {
    flex: 1 1 45%;
}

.tr-panel-hdr[b-6nidxwhebt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #eef2f7;
}

.tr-panel-tasks .tr-panel-hdr .mu-search[b-6nidxwhebt] {
    flex: 1 1 200px;
}

.tr-panel-title[b-6nidxwhebt] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

    .tr-panel-title > span:first-child[b-6nidxwhebt] {
        font-size: 13.5px;
        font-weight: 700;
        color: #1a2537;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.tr-panel-sub[b-6nidxwhebt] {
    font-size: 11.5px;
    color: #64748b;
}

.tr-role-search[b-6nidxwhebt] {
    flex: 0 1 200px;
}

/* Fixed-height scroll area for each panel's table — keeps both panels the
   same height regardless of row counts, same pattern as .mu-table-wrap. */
.tr-panel-body[b-6nidxwhebt] {
    position: relative;
    height: 480px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #b6e8db transparent;
}

    .tr-panel-body[b-6nidxwhebt]::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .tr-panel-body[b-6nidxwhebt]::-webkit-scrollbar-track {
        background: transparent;
    }

    .tr-panel-body[b-6nidxwhebt]::-webkit-scrollbar-thumb {
        background: #b6e8db;
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

        .tr-panel-body[b-6nidxwhebt]::-webkit-scrollbar-thumb:hover {
            background: #1ab99a;
            background-clip: content-box;
        }

/* Selected task row — a persistent highlight distinct from the plain
   :hover state .mu-row-click already gives every row. */
.tr-row-selected td[b-6nidxwhebt] {
    background: #eafaf4 !important;
    box-shadow: inset 3px 0 0 #1ab99a;
}

/* ── "Allow" column (role checklist) ── */
.tr-th-allow[b-6nidxwhebt] {
    width: 80px;
    text-align: center !important;
}

.tr-allow-hdr[b-6nidxwhebt] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #fff;
}

.tr-allow-cell[b-6nidxwhebt] {
    text-align: center;
}

    .tr-allow-cell .uf-check[b-6nidxwhebt] {
        display: inline-flex;
        justify-content: center;
    }

    .tr-allow-hdr input:disabled[b-6nidxwhebt],
    .tr-allow-cell input:disabled[b-6nidxwhebt] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* Custom "Allow" checkbox — solid blue square with a white tick when
   checked, matching the reference XTask Role Master screenshot. Applies
   to both the per-row checkboxes and the header "select all" checkbox. */
    .tr-allow-hdr input[type="checkbox"][b-6nidxwhebt],
    .tr-allow-cell input[type="checkbox"][b-6nidxwhebt] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        margin: 0;
        flex-shrink: 0;
        border: 1.5px solid #cbd2db;
        border-radius: 4px;
        background: #fff;
        cursor: pointer;
        position: relative;
        transition: background-color .15s ease, border-color .15s ease;
    }

/* The header checkbox sits on a dark/teal bar, so its unchecked state
   needs a lighter border to stay visible. */
.tr-allow-hdr input[type="checkbox"][b-6nidxwhebt] {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.12);
}

    .tr-allow-hdr input[type="checkbox"]:hover[b-6nidxwhebt],
    .tr-allow-cell input[type="checkbox"]:hover[b-6nidxwhebt] {
        border-color: #2f6fed;
    }

    .tr-allow-hdr input[type="checkbox"]:checked[b-6nidxwhebt],
    .tr-allow-cell input[type="checkbox"]:checked[b-6nidxwhebt] {
        background: #2f6fed;
        border-color: #2f6fed;
    }

        .tr-allow-hdr input[type="checkbox"]:checked[b-6nidxwhebt]::after,
        .tr-allow-cell input[type="checkbox"]:checked[b-6nidxwhebt]::after {
            content: "";
            position: absolute;
            left: 5px;
            top: 1px;
            width: 5px;
            height: 9px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

    .tr-allow-hdr input[type="checkbox"]:disabled[b-6nidxwhebt],
    .tr-allow-cell input[type="checkbox"]:disabled[b-6nidxwhebt] {
        cursor: not-allowed;
    }

    .tr-allow-hdr input[type="checkbox"]:focus-visible[b-6nidxwhebt],
    .tr-allow-cell input[type="checkbox"]:focus-visible[b-6nidxwhebt] {
        outline: 2px solid #2f6fed;
        outline-offset: 2px;
    }

/* ── Footer ── */
.tr-foot[b-6nidxwhebt] {
    justify-content: space-between;
}

@media (max-width: 860px) {
    .tr-panels[b-6nidxwhebt] {
        flex-direction: column;
    }

    .tr-panel-tasks[b-6nidxwhebt] {
        border-right: none;
        border-bottom: 1px solid #eef2f7;
    }

    .tr-panel-body[b-6nidxwhebt] {
        height: 320px;
    }
}

@media (max-width: 540px) {
    .tr-panel-hdr[b-6nidxwhebt] {
        flex-direction: column;
        align-items: stretch;
    }

    .tr-panel-tasks .tr-panel-hdr .mu-search[b-6nidxwhebt],
    .tr-role-search[b-6nidxwhebt] {
        flex: 1 1 auto;
    }
}
/* /Components/Pages/Masters/MTaxClass.razor.rz.scp.css */
/* MTaxClass.razor.css — scoped styles for the Tax Class list page */

/* Flex-fill layout — page fills DashboardLayout's .gains-content (which
   already flex/overflow-scrolls) and only the table body scrolls. Use
   height:100% here, never 100vh (see SchemeGrid.razor.css for the prior
   regression that caused). */
.mu-page[b-sw1iltx63w] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

/* 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/MTDS.razor.rz.scp.css */
/* =====================================================================
   GAINS — MTDS.razor.css   (Masters → TDS grid, page-scoped)
   Shared "mu-"/"uf-" grid + modal styles live in wwwroot/CSS/masters-forms.css.
   Only TDS-page-specific rules remain here: the is-TCS / is-Turnover-YTD
   flag columns.
   ===================================================================== */

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

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

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

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

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

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

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

/* ── "is TCS" / "is Turnover YTD" read-only flag columns ── */
.tds-flag-col[b-zgnhpqkwbj] {
    text-align: center;
    width: 90px;
}

    .tds-flag-col i[b-zgnhpqkwbj] {
        font-size: 13px;
    }

.tds-flag-yes[b-zgnhpqkwbj] {
    color: #0f766e;
}

.tds-flag-no[b-zgnhpqkwbj] {
    color: #cbd5e1;
}

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

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

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

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

    .mu-foot-info[b-zgnhpqkwbj] {
        display: none;
    }
}
/* /Components/Pages/Masters/MTDSType.razor.rz.scp.css */
/* =====================================================================
   GAINS — MTDSType.razor.css   (Masters → TDS Type grid, page-scoped)
   Shared "mu-" grid/page styles live in wwwroot/CSS/masters-forms.css.
   The old BSTDSType.aspx rendered this as a narrow single-column grid
   (col-xl-2, ~1 field) — .tdst-card caps the width to echo that instead
   of stretching a 2-column table across the full page.
   ===================================================================== */

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

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

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

/* ── Narrow card, matching the old page's col-xl-2 grid ── */
.tdst-card[b-rsmzqc9zkp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 420px;
}

/* ── Read-only note in the toolbar (no search box needed — old page had none) ── */
.tdst-toolbar[b-rsmzqc9zkp] {
    display: flex;
    justify-content: flex-end;
}

.tdst-readonly-note[b-rsmzqc9zkp] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #e11d48;
}

    .tdst-readonly-note i[b-rsmzqc9zkp] {
        font-size: 12px;
    }

/* ── Mobile: Export button — icon only, stays top-right; card goes full width ── */
@media (max-width: 767px) {
    .tdst-card[b-rsmzqc9zkp] {
        max-width: none;
    }

    .bspl-title-actions[b-rsmzqc9zkp] {
        margin-left: auto;
    }

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

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

    .bspl-title-actions .mu-btn i[b-rsmzqc9zkp] {
        font-size: 15px;
    }
}
/* /Components/Pages/Masters/MTransporter.razor.rz.scp.css */
/* =====================================================================
   GAINS — MTransporter.razor.css   (Masters → Transporter grid, page-scoped)
   Shared "mu-" grid/page styles live in wwwroot/CSS/masters-forms.css.
   Only Transporter-page-specific rules remain here.
   ===================================================================== */

/* ── Page-end footer pinning — same pattern used on Item Group / BSPL /
   Daybook / TB / MLogin / MGroup. .mu-page becomes a full-height flex
   column; .mu-card 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-etsvbszpnz] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Read-only State row — same look MItemGroupEdit uses for its read-only Depth row */
.uf-depth[b-cpxsih6m9b] { display: flex; align-items: center; gap: 12px; padding-top: 7px; }
.uf-depth-val[b-cpxsih6m9b] { font-size: 14px; font-weight: 600; color: #1e293b; }

/* "Update all child site(s)" checkbox row */
.uf-check[b-cpxsih6m9b] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    user-select: none;
}

/* Address textarea shares .uf-input's look but needs its own resize/height rules */
textarea.uf-input[b-cpxsih6m9b] {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    line-height: 1.4;
}

@media (max-width: 540px) {
    .uf-field[b-cpxsih6m9b] { grid-template-columns: 1fr; gap: 4px; }
    .uf-field > label[b-cpxsih6m9b] { padding-top: 0; }
}
/* /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/Mvouchertnc.razor.rz.scp.css */
/* =====================================================================
   GAINS — MVoucherTnc.razor.css  (Masters → Voucher Terms & Conditions,
   page-scoped). Shared "mu-"/"uf-" styles live in
   wwwroot/CSS/masters-forms.css. Only page-specific rules remain here.
   ===================================================================== */

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

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

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

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

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

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

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

/* ── Edit/Add modal: a touch wider to give the content editor room ── */
.vtc-modal[b-7e53b6ti8a] {
    max-width: 860px;
}

/* Shared .uf-field has no bottom margin (set per form) — space them here. */
.vtc-field[b-7e53b6ti8a] {
    margin-bottom: 14px;
}

    .vtc-field:last-child[b-7e53b6ti8a] {
        margin-bottom: 0;
    }

/* Native <select> styled to match .uf-input (keep the OS caret). */
.vtc-select[b-7e53b6ti8a] {
    height: 37px;
    cursor: pointer;
    background: #fff;
}

/* ── Content field (HTML terms) ── */
.vtc-field-terms > label[b-7e53b6ti8a] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vtc-terms[b-7e53b6ti8a] {
    min-height: 220px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
}

.vtc-preview[b-7e53b6ti8a] {
    border: 1px solid #dde3ec;
    border-radius: 8px;
    padding: 12px 14px;
    min-height: 220px;
    max-height: 340px;
    overflow: auto;
    background: #fff;
    font-size: 13px;
    color: #1e293b;
    line-height: 1.5;
}

    /* Tidy spacing for common tags inside the preview. */
    .vtc-preview p[b-7e53b6ti8a] {
        margin: 0 0 8px;
    }

    .vtc-preview ul[b-7e53b6ti8a],
    .vtc-preview ol[b-7e53b6ti8a] {
        margin: 0 0 8px;
        padding-left: 20px;
    }

/* Small text toggle that lives on the Content label row. */
.vtc-preview-toggle[b-7e53b6ti8a] {
    margin-left: auto;
    background: none;
    border: none;
    color: #0f766e;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    font-family: inherit;
}

    .vtc-preview-toggle:hover[b-7e53b6ti8a] {
        text-decoration: underline;
    }

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

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

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

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

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

    /* Stack the label above the control so the wide fields fit. */
    .vtc-field[b-7e53b6ti8a] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

        .vtc-field > label[b-7e53b6ti8a] {
            padding-top: 0;
        }
}
/* /Components/Pages/Masters/MVoucherType.razor.rz.scp.css */
/* =====================================================================
   GAINS — MVoucherType.razor.css   (Masters → Voucher Type, page-scoped)
   Shared "mu-"/"uf-" grid + modal styles live in wwwroot/CSS/masters-forms.css.
   Only Voucher-Type-page-specific rules remain here: the tab bar, the
   read-only banner on the Voucher Type tab, and the color swatch.
   ===================================================================== */

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

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

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

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

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

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

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

/* ── Tab bar — Voucher Type / Sub Type / Order Sub Type ── */
.vt-tabs[b-iw3mwts9uz] {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e7ebf2;
    flex-shrink: 0;
}

.vt-tab[b-iw3mwts9uz] {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.12s, border-color 0.12s;
}

    .vt-tab:hover[b-iw3mwts9uz] {
        color: #0f766e;
    }

    .vt-tab.active[b-iw3mwts9uz] {
        color: #0f766e;
        border-bottom-color: #1ab99a;
    }

/* ── Voucher Type tab — Tag filter + read-only banner sit in the toolbar row ── */
.vt-toolbar-readonly[b-iw3mwts9uz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.vt-tag-filter select[b-iw3mwts9uz] {
    min-width: 160px;
}

.vt-readonly-note[b-iw3mwts9uz] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #e11d48;
}

    .vt-readonly-note i[b-iw3mwts9uz] {
        font-size: 12px;
    }

/* ── Color swatch (WColor) in the Voucher Type grid ── */
.vt-swatch[b-iw3mwts9uz] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    vertical-align: middle;
    margin-right: 8px;
}

.vt-swatch-hex[b-iw3mwts9uz] {
    font-size: 12px;
    color: #475569;
    vertical-align: middle;
}

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

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

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

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

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

    .vt-tabs[b-iw3mwts9uz] {
        padding: 0 10px;
        overflow-x: auto;
    }

    .vt-tab[b-iw3mwts9uz] {
        padding: 10px 10px;
        white-space: nowrap;
    }
}
/* /Components/Pages/Masters/MXSRRate.razor.rz.scp.css */
/* =====================================================================
   GAINS — MXSRRate.razor.css   (Masters → XSR Rate grid, page-scoped)
   Shared "mu-" grid/page styles + filter bar/toggle live in
   wwwroot/CSS/masters-forms.css. Only XSRRate-page-specific rules remain here.
   ===================================================================== */

/* =====================================================================
   Page-end footer pinning — same pattern used on BSPL / Daybook / TB /
   MLogin / MGroup / MItemGroup. .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-crbvgu9yf0] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

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

/* ── Mobile: "New rate" button — icon only, stays top-right next to Filters ── */
@media (max-width: 767px) {
    .bspl-title-actions .mu-btn-label[b-crbvgu9yf0] {
        display: none;
    }

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

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

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

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

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

@media (max-width: 540px) {
    .uf-field[b-rx8keas2v1] { grid-template-columns: 1fr; gap: 4px; }
    .uf-field > label[b-rx8keas2v1] { padding-top: 0; }
}
/* /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/PPMargin.razor.rz.scp.css */
/* =====================================================================
   GAINS — MPPMargin.razor.css   (Masters → Price Point Margin, page-scoped)
   Shared "mu-"/"uf-"/"bspl-" styles live in wwwroot/CSS/masters-forms.css.
   Only Price-Point-Margin-page-specific rules remain here.
   ===================================================================== */

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

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

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

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

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

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

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

/* ── Filter bar (item group + date) ── */
.ppm-toolbar[b-irlpkl7rie] {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
}

.ppm-field[b-irlpkl7rie] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .ppm-field label[b-irlpkl7rie] {
        font-size: 12px;
        font-weight: 600;
        color: #475569;
    }

.ppm-select[b-irlpkl7rie] {
    min-width: 200px;
}

.ppm-date[b-irlpkl7rie] {
    height: 36px;
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    color: #0f172a;
    background: #fff;
}

    .ppm-date:focus[b-irlpkl7rie] {
        outline: none;
        border-color: #0f9d8a;
        box-shadow: 0 0 0 3px rgba(15, 157, 138, 0.12);
    }

/* ── Pivot grid ── */
.ppm-table thead th[b-irlpkl7rie] {
    position: sticky;
    top: 0;
    z-index: 2;
}

.ppm-th-pp[b-irlpkl7rie] {
    text-align: center;
    white-space: nowrap;
    min-width: 120px;
    padding: 0 10px;
}

.ppm-name[b-irlpkl7rie] {
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
}

.ppm-rate-cell[b-irlpkl7rie],
.ppm-pp-cell[b-irlpkl7rie] {
    text-align: center;
    vertical-align: top;
    padding: 6px 8px;
}

.ppm-input[b-irlpkl7rie] {
    width: 78px;
    text-align: right;
    padding: 5px 7px;
    font-size: 13px;
}

/* derived price shown under each margin input */
.ppm-derived[b-irlpkl7rie] {
    margin-top: 3px;
    height: 14px;
    font-size: 11px;
    font-weight: 600;
    text-align: right;
    color: #0f9d8a;
    width: 78px;
}

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

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

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

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

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

    .ppm-toolbar[b-irlpkl7rie] {
        gap: 12px;
    }

    .ppm-select[b-irlpkl7rie] {
        min-width: 150px;
    }
}
/* /Components/Pages/Masters/PricePoint.razor.rz.scp.css */
/* =====================================================================
   GAINS — MPricePoint.razor.css   (Masters → Price Point grid, page-scoped)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only Price-Point-page-specific rules remain here.
   ===================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

.mu-login[b-vez7y59n81] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .mu-login:hover[b-vez7y59n81] {
        text-decoration: underline;
    }

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

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

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

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

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

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

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

.uf-footer-right[b-vez7y59n81] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.uf-field + .uf-field[b-vez7y59n81] {
    margin-top: 16px;
}

/* Map/AddLed row buttons — neutral variant of mu-del (icon-only, no red hover) */
.mu-icon-btn[b-vez7y59n81] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: #4b5563;
    cursor: pointer;
    border-radius: 6px;
    text-decoration: none;
}

    .mu-icon-btn:hover[b-vez7y59n81] {
        background: #eef2f7;
        color: #1a56a7;
    }

/* Assign Ledgers modal — wider than the standard uf-modal, filter row + grid */
.uf-modal-lg[b-vez7y59n81] {
    width: min(920px, 92vw);
}

.ral-filters[b-vez7y59n81] {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

    .ral-filters .uf-input[b-vez7y59n81] {
        flex: 1 1 160px;
    }

.ral-table-wrap[b-vez7y59n81] {
    max-height: 420px;
    overflow: auto;
}

@media (max-width: 767px) {
    .bspl-title-actions[b-vez7y59n81] {
        margin-left: auto;
    }

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

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

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

    .mu-foot-info[b-vez7y59n81] {
        display: none;
    }
}
/* /Components/Pages/Masters/SalesRep.razor.rz.scp.css */
/* Small accents on top of the shared mu-* grid/toolbar styling (masters-forms.css). */

/* Flex-fill layout — page fills DashboardLayout's .gains-content (which
   already flex/overflow-scrolls) and only the grid (rendered by the child
   SalesRepGrid component) scrolls. Use height:100% here, never 100vh
   (see SchemeGrid.razor.css for the prior regression that caused). The
   child's own root (.mu-table-wrap) gets its matching flex:1/overflow:auto
   rule in SalesRepGrid.razor.css. */
.mu-page[b-k8lp5k90ot] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

.sr-xls[b-k8lp5k90ot] {
    width: 34px;
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #1ab99a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sr-xls:hover[b-k8lp5k90ot] {
    background: #eefaf7;
    border-color: #1ab99a;
}

.sr-del-btn[b-k8lp5k90ot] {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

.sr-del-btn:hover[b-k8lp5k90ot] {
    background: #b91c1c;
}

.sr-filter-chip[b-k8lp5k90ot] {
    background: #fff7ed;
    border-color: #fdba74;
    color: #b45309;
}

.sr-info-strip[b-k8lp5k90ot] {
    font-size: .82rem;
    color: #64748b;
}

.sr-foot-left[b-k8lp5k90ot] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Filters button — classic Gains green, overriding ".mu-btn.primary"'s
   default blue (a shared class used by other pages, so it's not edited;
   this extra class scopes the override to this button only). Selector
   uses two classes to match ".mu-btn.primary"'s specificity so the
   override actually takes effect. */
.mu-btn.sr-filters-btn[b-k8lp5k90ot] {
    background: #27AE60;
    border-color: #27AE60;
}

    .mu-btn.sr-filters-btn:hover[b-k8lp5k90ot] {
        background: #23923e;
        border-color: #23923e;
    }
/* /Components/Pages/Masters/SalesRepEdit.razor.rz.scp.css */
/* SALES PERSON entry — classic mint-green ERP theme, matching the old
   SalesRep screen. Field grid uses CSS Grid (.srx-fgrid/.srx-fcell):
   4 columns desktop, 2 tablet, 1 mobile. Bindings/ids/events in the
   .razor markup are untouched — this file only reskins colors, sizing
   and layout.

   Palette:
     Main background    #F5F7F8
     Popup background   #FFFFFF
     Accordion header   #EAF8F4 (flat)
     Accordion border   #BFE7DA
     Accordion hover    #E2F5EE
     Primary accent     #27AE60
     Header/title text  #0F6B58 (dark green)
     Normal text        #2C3E50
     Secondary text     #6B7280
     Input border       #D5DDE5
     Input focus        #27AE60
     Popup border       #D9E4EC
     Overlay            rgba(20,30,40,.45)
     Save               #28A745
     Delete             #DC3545
     Info/Grid/New      white bg, gray border, dark text                */

/* ═════════════════════════════════════════════════════════════════════
   Popup shell — centered modal, grid visible behind a dark overlay.
   Reuses the global uf-overlay/uf-modal/uf-header/uf-body/uf-footer
   classes from masters-forms.css as the structural base (position,
   dark dimmed backdrop, flex layout) — this file overrides their visual
   values via the extra srx-popup-* classes so nothing shared is edited. */

.srx-popup-overlay[b-ie4yu14ccd] {
    align-items: center;
    padding: 24px 16px;
    background: rgba(20, 30, 40, .45);
    backdrop-filter: none;
}

.srx-popup-modal[b-ie4yu14ccd] {
    width: 75%;
    max-width: 1400px;
    max-height: 90vh;
    min-height: 0;
    border-radius: 10px;
    border: 1px solid #D9E4EC;
    box-shadow: 0 10px 30px rgba(20, 30, 40, .18);
    background: #ffffff;
    animation: srxModalIn-b-ie4yu14ccd .18s ease-out;
}

@keyframes srxModalIn-b-ie4yu14ccd {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 992px) {
    .srx-popup-modal[b-ie4yu14ccd] { width: 90%; }
}

@media (max-width: 576px) {
    .srx-popup-overlay[b-ie4yu14ccd] { padding: 0; align-items: stretch; }
    .srx-popup-modal[b-ie4yu14ccd]   { width: 100%; max-width: 100%; max-height: 100vh; border-radius: 0; margin: 0; }
}

/* Header — soft mint theme matching the old ERP's SalesRep screen. */
.srx-popup-header[b-ie4yu14ccd] {
    background: #EAF8F4;
    border-bottom: 1px solid #BFE7DA;
}

    .srx-popup-header[b-ie4yu14ccd]::before {
        display: none;
    }

    .srx-popup-header .uf-title > span:first-child[b-ie4yu14ccd] {
        color: #0F6B58;
        font-weight: 700;
        letter-spacing: .3px;
    }

    .srx-popup-header .uf-title-sub[b-ie4yu14ccd] {
        color: #6B7280;
        font-size: 13px;
    }

.srx-popup-close[b-ie4yu14ccd] {
    background: #ffffff;
    color: #27AE60;
    border-radius: 50%;
    transition: background .2s, color .2s;
}

    .srx-popup-close:hover[b-ie4yu14ccd] {
        background: #27AE60;
        color: #ffffff;
    }

/* Form fills the space between header and footer; only its body scrolls. */
.srx-popup-form[b-ie4yu14ccd] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.srx-popup-body[b-ie4yu14ccd] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    background: #F5F7F8;
}

.srx-popup-footer[b-ie4yu14ccd] {
    flex-shrink: 0;
}

/* FooterToolbar renders its own scoped ".ft-bar" wrapper (see that
   component's .razor.css) — reach into it with ::deep so the sticky
   footer picks up the new palette without editing the shared component. */
.srx-popup-footer[b-ie4yu14ccd]  .ft-bar {
    position: static;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 24px;
    background: #ffffff;
    border-top: 1px solid #D9E4EC;
    box-shadow: none;
}

/* CollapsibleCard is shared with other master edit forms (e.g. SiteMaster)
   — restyle it with ::deep scoped under this page's own body wrapper only,
   so its look matches the new palette everywhere else is unaffected. The
   component's expand/collapse behavior is untouched. */
.srx-popup-body[b-ie4yu14ccd]  .cc-card {
    border: 1px solid #BFE7DA;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 107, 88, .04);
    margin-bottom: 20px;
    overflow: hidden;
}

    .srx-popup-body[b-ie4yu14ccd]  .cc-card:last-child {
        margin-bottom: 0;
    }

/* Every accordion strip identical: same mint bg, same 42px height, same
   16px left padding, same border, same title size/weight, same arrow. */
.srx-popup-body[b-ie4yu14ccd]  .cc-header {
    height: 42px;
    padding: 0 16px;
    background: #EAF8F4;
    background-image: none;
    border-bottom: 1px solid #BFE7DA;
    transition: background .2s;
}

    .srx-popup-body[b-ie4yu14ccd]  .cc-header:hover {
        background: #E2F5EE;
    }

.srx-popup-body[b-ie4yu14ccd]  .cc-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #0F6B58;
}

.srx-popup-body[b-ie4yu14ccd]  .cc-caret {
    color: #27AE60;
    font-size: .8rem;
    transition: transform .15s ease;
}

.srx-popup-body[b-ie4yu14ccd]  .cc-body {
    padding: 20px;
    background: #ffffff;
    animation: srxAccordionIn-b-ie4yu14ccd .16s ease-out;
}

@keyframes srxAccordionIn-b-ie4yu14ccd {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Field grid: 4 columns desktop / 2 tablet / 1 mobile ─────────────── */

.srx-fgrid[b-ie4yu14ccd] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
    row-gap: 20px;
}

.srx-fcell[b-ie4yu14ccd] {
    min-width: 0;
}

.srx-fspan-2[b-ie4yu14ccd] {
    grid-column: span 2;
}

.srx-fspan-full[b-ie4yu14ccd] {
    grid-column: 1 / -1;
}

@media (max-width: 992px) {
    .srx-fgrid[b-ie4yu14ccd] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .srx-fgrid[b-ie4yu14ccd] { grid-template-columns: 1fr; }
    .srx-fspan-2[b-ie4yu14ccd] { grid-column: span 1; }
}

/* ── Fields (label left, input right) ─────────────────────────────────  */

/* Fixed-width label column (not a %) — this is what actually guarantees
   pixel alignment: a % width makes the label wider inside a wider cell
   (e.g. Full Name's 2-column-span cell), which shifts its textbox's start
   position away from every 1-column field's textbox above/below it. A
   fixed px width is identical no matter how wide the containing cell is,
   so every input in every column starts at the exact same offset. */
.srx-field-h[b-ie4yu14ccd] {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 0;
}

.srx-field-h.smx-field-top[b-ie4yu14ccd] {
    align-items: flex-start;
}

.srx-field-h .srx-label[b-ie4yu14ccd] {
    flex: 0 0 90px;
    width: 90px;
    max-width: 90px;
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.srx-field-h .srx-input-wrap[b-ie4yu14ccd] {
    flex: 1 1 auto;
    min-width: 0;
}

.srx-field-h .srx-input-wrap .smx-input[b-ie4yu14ccd] {
    width: 100%;
}

@media (max-width: 480px) {
    .srx-field-h[b-ie4yu14ccd] {
        flex-wrap: wrap;
    }

    .srx-field-h .srx-label[b-ie4yu14ccd] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .srx-field-h .srx-input-wrap[b-ie4yu14ccd] {
        flex: 1 1 100%;
    }
}

.smx-input[b-ie4yu14ccd],
.srx-field textarea[b-ie4yu14ccd],
.srx-field select[b-ie4yu14ccd] {
    height: 40px;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid #D5DDE5;
    border-radius: 6px;
    background: #ffffff;
    color: #2C3E50;
    transition: border-color .12s, box-shadow .12s, background .12s;
}

.smx-input:hover[b-ie4yu14ccd],
.srx-field textarea:hover[b-ie4yu14ccd],
.srx-field select:hover[b-ie4yu14ccd] {
    background: #F8FCFA;
    border-color: #BFE7DA;
}

.smx-input:focus[b-ie4yu14ccd],
.srx-field textarea:focus[b-ie4yu14ccd],
.srx-field select:focus[b-ie4yu14ccd] {
    outline: none;
    border-color: #27AE60;
    box-shadow: 0 0 0 3px rgba(39, 174, 96, .16);
}

textarea.smx-input[b-ie4yu14ccd] {
    height: auto;
    min-height: 72px;
    resize: vertical;
}

/* QgDatePicker is a shared component with its own box (border/radius/
   padding) that doesn't match .smx-input by default — override it with
   ::deep, scoped to this popup only, so date fields sit at the exact same
   height/border as every other textbox in the same row. */
.srx-input-wrap[b-ie4yu14ccd]  .qgdp-wrap {
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid #D5DDE5;
    border-radius: 6px;
}

    .srx-input-wrap[b-ie4yu14ccd]  .qgdp-wrap:hover {
        background: #F8FCFA;
        border-color: #BFE7DA;
    }

.smx-field-top[b-ie4yu14ccd] {
    justify-content: flex-start;
}

.srx-readonly[b-ie4yu14ccd] {
    background: #F5F7F8;
    color: #6B7280;
}

.srx-err[b-ie4yu14ccd] {
    font-size: .7rem;
    color: #DC3545;
    font-weight: 500;
}

/* ── Checkboxes ────────────────────────────────────────────────────── */

.srx-check[b-ie4yu14ccd] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
}

.srx-check .form-check-input[b-ie4yu14ccd] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #27AE60;
}

.srx-check .form-check-label[b-ie4yu14ccd] {
    font-size: 13px;
    color: #2C3E50;
}

/* ── Mobile prefix + number combo ─────────────────────────────────── */

.srx-mobile-row[b-ie4yu14ccd] {
    display: flex;
    gap: 6px;
}

.srx-prefix[b-ie4yu14ccd] {
    width: 68px;
    flex: 0 0 68px;
}

.srx-mobile-row input[b-ie4yu14ccd] {
    flex: 1;
    min-width: 0;
}

/* ── Photo section ─────────────────────────────────────────────────── */

.srx-photo-row[b-ie4yu14ccd] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}

.smx-logo-box[b-ie4yu14ccd] {
    position: relative;
    width: 96px;
    height: 96px;
    border: 1px dashed #D5DDE5;
    border-radius: 8px;
    background: #F5F7F8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 96px;
}

.smx-logo-img[b-ie4yu14ccd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.smx-logo-placeholder[b-ie4yu14ccd] {
    font-size: .68rem;
    color: #6B7280;
    text-align: center;
    line-height: 1.25;
}

.smx-logo-remove[b-ie4yu14ccd] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: #DC3545;
    color: #ffffff;
    font-size: .62rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.srx-photo-actions[b-ie4yu14ccd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
    font-size: 13px;
}

.srx-photo-hint[b-ie4yu14ccd] {
    font-size: .7rem;
    color: #6B7280;
}

/* ── Footer toolbar buttons (declared here — see FooterToolbar.razor.css
   note on CSS-isolation scoping) — 40px tall, equal size, 12px spacing.
   INFO/GRID/NEW stay white/gray-border/dark-text per spec; hover turns
   them light-green to match the rest of the theme. ───────────────────── */

.smx-btn[b-ie4yu14ccd] {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 0 18px;
    border: 1px solid #D5DDE5;
    border-radius: 6px;
    background: #ffffff;
    color: #2C3E50;
    cursor: pointer;
    transition: background .2s, border-color .2s, box-shadow .2s;
}

.smx-btn:hover[b-ie4yu14ccd] {
    background: #E2F5EE;
    border-color: #27AE60;
}

.smx-btn:disabled[b-ie4yu14ccd] {
    opacity: .65;
    cursor: default;
}

.smx-btn-save[b-ie4yu14ccd] {
    background: #28A745;
    border-color: #28A745;
    color: #ffffff;
}

.smx-btn-save:hover[b-ie4yu14ccd] {
    background: #23923e;
}

.srx-btn-del[b-ie4yu14ccd] {
    background: #DC3545;
    border-color: #DC3545;
    color: #ffffff;
}

.srx-btn-del:hover[b-ie4yu14ccd] {
    background: #c02233;
}

.smx-btn-grid[b-ie4yu14ccd] {
    background: #ffffff;
}

.srx-info-strip[b-ie4yu14ccd] {
    font-size: .75rem;
    color: #6B7280;
    margin-left: auto;
}

@media (max-width: 576px) {
    .srx-photo-row[b-ie4yu14ccd] {
        flex-direction: column;
    }

    .srx-popup-footer[b-ie4yu14ccd]  .ft-bar {
        justify-content: center;
    }

    .srx-info-strip[b-ie4yu14ccd] {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}
/* /Components/Pages/Masters/SalesRepFilterPanel.razor.rz.scp.css */
/* Small accents on top of the shared mu-drawer styling (masters-forms.css). */

.sr-drawer-actions[b-rzg7wp2wnd] {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
}

.sr-clear-btn[b-rzg7wp2wnd] {
    background: #ffffff;
    color: #64748b;
}

/* Party field uses the shared <LedgerAutofill> component (same one the AR/AP
   form and QLedger use). Its own lga-* CSS defaults to a plain blue-hover
   list; overridden here via ::deep (component file itself untouched) to the
   classic Gains green theme — green focus ring on the box, green "top pick"
   highlight on the first row + on hover/keyboard-active, single-line
   ellipsis instead of wrapping. (AR/AP's own picker already copies this
   exact look from this file — see ARAP.razor.css's comment.) */
[b-rzg7wp2wnd] .lga-wrap input.mu-input:focus {
    border-color: #27AE60;
    box-shadow: 0 0 0 3px rgba(39, 174, 96, .16);
}

[b-rzg7wp2wnd] .lga-suggest li {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-rzg7wp2wnd] .lga-suggest li:first-child:not(.lga-empty) {
    background: #27AE60;
    color: #fff;
}

[b-rzg7wp2wnd] .lga-suggest li:hover:not(.lga-empty),
[b-rzg7wp2wnd] .lga-suggest li.active:not(.lga-empty) {
    background: #27AE60;
    color: #fff;
}
/* /Components/Pages/Masters/SalesRepGrid.razor.rz.scp.css */
/* Small accents on top of the shared mu-table styling (masters-forms.css). */

/* Flex-fill — this component's own root element (.mu-table-wrap) grows to
   fill the remaining height of the parent's .mu-card flex column and
   scrolls internally, instead of the shared masters-forms.css fixed
   540px height. The parent (SalesRep.razor.css) supplies the
   .mu-page{height:100%} / .mu-card{flex:1;...} half of the chain. */
.mu-table-wrap[b-9nlezsp5p3] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.sr-ok[b-9nlezsp5p3] {
    color: #16a34a;
}

.sr-no[b-9nlezsp5p3] {
    color: #dc2626;
}

/* SRCode/Name render as plain link-style buttons — only these two open the
   entry popup; the rest of the row just selects (see ToggleRowSelected). */
.sr-link[b-9nlezsp5p3] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 600;
    color: #1a56a7;
    cursor: pointer;
    text-align: left;
}

.sr-link:hover[b-9nlezsp5p3] {
    text-decoration: underline;
}

.sr-date[b-9nlezsp5p3] {
    white-space: nowrap;
    color: #64748b;
}

.sr-active[b-9nlezsp5p3] {
    text-align: center;
}

/* Classic Gains green theme accents on top of the shared .mu-table (dark
   header, sticky freeze, alternating rows, scrollbar are all inherited
   from masters-forms.css) — only the hover/selected tint is shifted from
   the default blue to green here, scoped to this table only. */
.sr-table tbody tr:hover td[b-9nlezsp5p3] {
    background: #E2F5EE;
}

.sr-row-selected td[b-9nlezsp5p3] {
    background: #DDF3E8 !important;
}

    .sr-row-selected:hover td[b-9nlezsp5p3] {
        background: #CDECDD !important;
    }
/* /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/Masters/ScheduleLedger.razor.rz.scp.css */
/* =====================================================================
   GAINS — ScheduleLedger.razor.css   (Masters → Schedule-Ledger, XmShdlr)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only this page's specific rules remain here.
   ===================================================================== */

.mu-login[b-hpaxu29nkd] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .mu-login:hover[b-hpaxu29nkd] {
        text-decoration: underline;
    }

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

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

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

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

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

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

.uf-footer-right[b-hpaxu29nkd] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* "# of selected Ledger" count in the modal header */
.sl-selected-count[b-hpaxu29nkd] {
    font-size: 13px;
    font-weight: 600;
    color: #1a7a4c;
    margin-left: auto;
    margin-right: 12px;
    white-space: nowrap;
}

/* Ledger checklist — bounded scroll, comfortable checkbox target */
.sl-scroll[b-hpaxu29nkd] {
    max-height: 380px;
    overflow-y: auto;
}

    .sl-scroll td:nth-child(2)[b-hpaxu29nkd] {
        text-align: center;
        width: 48px;
    }

    .sl-scroll input[type="checkbox"][b-hpaxu29nkd] {
        width: 17px;
        height: 17px;
        cursor: pointer;
        accent-color: #1a7a4c;
        vertical-align: middle;
    }

    .sl-scroll td[b-hpaxu29nkd],
    .sl-scroll th[b-hpaxu29nkd] {
        padding: 8px 12px;
    }

/* Ledger checklist's own pagination footer, inside the modal body */
.sl-inner-footer[b-hpaxu29nkd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #6b7280;
}

.sl-inner-pager[b-hpaxu29nkd] {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* /Components/Pages/Masters/SchemeEdit.razor.rz.scp.css */
[b-qsgwfedjyd] .se-hdr-card {
    padding: 18px 20px;
    margin-bottom: 4px;
}

[b-qsgwfedjyd] .se-hdr-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 520px;
}

    [b-qsgwfedjyd] .se-hdr-body .uf-field {
        grid-template-columns: 130px 1fr;
    }

[b-qsgwfedjyd] .se-comments {
    min-height: 60px;
    resize: vertical;
}

[b-qsgwfedjyd] .se-grid-card {
    padding: 0;
}

[b-qsgwfedjyd] .se-grid-wrap {
    height: 360px;
}

/* Footer — sticky, not fixed. Sticky respects the content column's own
   width (sidebar excluded automatically) and adds no phantom height, so
   it can't force the whole page into an unwanted scroll the way
   min-height:100vh did, and it won't float mid-page either — it locks
   to the viewport bottom once you scroll past it. */
[b-qsgwfedjyd] .se-pgfoot {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: #fff;
    border-top: 1px solid #dde3ed;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}

[b-qsgwfedjyd] .se-footer-actions {
    display: flex;
    gap: 8px;
}

/* Row-edit popup: two-column field grid instead of the stacked
   label/input layout uf-field normally uses, so it matches the
   dense WebForms "EDIT SCHEME" popup layout. */
[b-qsgwfedjyd] .se-row-modal .uf-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    max-height: calc(100vh - 260px);
}

[b-qsgwfedjyd] .se-row-field {
    grid-template-columns: 90px 1fr;
    position: relative;
}

[b-qsgwfedjyd] .se-row-modal .uf-form-error {
    grid-column: 1 / -1;
}
/* /Components/Pages/Masters/SchemeGrid.razor.rz.scp.css */
[b-plsnuvr3mm] .sg-th-chk {
    width: 40px;
    text-align: center;
}

    [b-plsnuvr3mm] .sg-th-chk input[type="checkbox"] {
        width: 15px;
        height: 15px;
        accent-color: #1ab99a;
        cursor: pointer;
    }

[b-plsnuvr3mm] .sg-view-toggle {
    display: flex;
    gap: 10px;
}

[b-plsnuvr3mm] .sg-view-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #dde3ed;
    background: #fff;
    color: #475569;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

    [b-plsnuvr3mm] .sg-view-btn:hover {
        border-color: #1ab99a;
        color: #1ab99a;
    }

    [b-plsnuvr3mm] .sg-view-btn.active {
        background: #1a56a7;
        border-color: #1a56a7;
        color: #fff;
    }

/* Act/InAct + Set Date action popups — single-column stacked fields */
[b-plsnuvr3mm] .sg-action-modal {
    max-width: 460px;
}

[b-plsnuvr3mm] .sg-action-field {
    grid-template-columns: 110px 1fr;
    margin-bottom: 14px;
    position: relative;
}

/* Footer — sticky, not fixed: stays inside the content column (no
   sidebar overlap) and adds no phantom page height (no forced whole-page
   scroll), same fix already proven on the other Scheme pages. */
/* Footer — sticky, not the flex/min-height:100vh chain. That approach
   (matching QLedger's own CSS) forces .mu-page to be at least 100vh tall
   measured from ITS OWN top — but mu-page sits below DashboardLayout's
   header, so total document height ends up header-height + 100vh,
   exceeding the real viewport and forcing an unwanted whole-page scroll
   (same failure mode already hit on GenerateScheme). Sticky avoids it:
   no phantom height added, still pinned to the bottom once you scroll
   past it, and stays inside the content column (no sidebar overlap). */
[b-plsnuvr3mm] .sg-pgfoot {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: #fbfcfe;
}
/* /Components/Pages/Masters/SiteList.razor.rz.scp.css */
/* SiteList.razor.css — scoped styles for the Site Master grid page.
   Grid/table/pagination chrome (.mu-*), title block (.bspl-*) and footer
   already come from wwwroot/CSS/masters-forms.css — nothing else
   page-specific needed beyond this file existing for future tweaks. */

/* Flex-fill layout — page fills DashboardLayout's .gains-content (which
   already flex/overflow-scrolls) and only the table body scrolls. Use
   height:100% here, never 100vh (see SchemeGrid.razor.css for the prior
   regression that caused). */
.mu-page[b-mwg0eb1fj8] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

.mu-foot[b-mwg0eb1fj8] {
    flex-shrink: 0;
}
/* /Components/Pages/Masters/SiteMaster.razor.rz.scp.css */
/* SiteMaster.razor.css — original Site Master format (unchanged): default
   CollapsibleCard look, 130px-label field grid, two-column row/col-xl-6
   layout, teal accent, plain SAVE/GRID footer. The ONLY thing this file
   adds beyond the original is popup sizing (.smm-overlay/.smm-modal/
   .smm-body) — the shell itself (dark backdrop, centered card, radius,
   shadow) comes from the shared uf-overlay/uf-modal system in
   wwwroot/CSS/masters-forms.css. */

/* ── Title bar — old Site Master font/colors: plain white strip, light
   uppercase teal title (not the mint/bold uf-header default). ── */
.uf-header[b-j78nag58oz] {
    background: #ffffff;
    border-bottom: 1px solid #e7eaec;
}

.uf-header[b-j78nag58oz]::before {
    display: none;
}

.uf-title > span:first-child[b-j78nag58oz] {
    font-size: 19px;
    font-weight: 300;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #1ab394;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Popup shell sizing only — desktop 70-80% / tablet 90% / mobile 100%
   with overlay padding (so the modal never touches the screen edge). ── */
.smm-overlay[b-j78nag58oz] {
    align-items: center;
    padding: 24px 16px;
}

.smm-modal[b-j78nag58oz] {
    width: 75%;
    max-width: 1100px;
    max-height: 85vh;
}

.smm-body[b-j78nag58oz] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    max-height: none;
}

/* Equalize card padding on every side (default CollapsibleCard.razor.css
   uses 20px 18px — uneven); scoped to this popup only via ::deep so the
   shared component's look elsewhere is untouched. */
.smm-body[b-j78nag58oz]  .cc-body {
    padding: 20px;
}

@media (max-width: 991px) {
    /* Tablet */
    .smm-modal[b-j78nag58oz] {
        width: 90%;
    }
}

@media (max-width: 576px) {
    /* Mobile */
    .smm-overlay[b-j78nag58oz] {
        padding: 10px;
    }

    .smm-modal[b-j78nag58oz] {
        width: 100%;
        max-height: 92vh;
    }
}

/* ── Original page content, unchanged ── */
.smx-sitename[b-j78nag58oz] {
    max-width: 440px;
    margin-bottom: 22px;
    font-size: 15px;
    padding: 9px 14px;
}

.smx-row[b-j78nag58oz] {
    --bs-gutter-x: 42px;
}

/* Each smx-cardrow holds exactly 2 cards (Registration/Address,
   Contact Details/Miscellaneous Details, Other Details/Logo) that must
   line up — align-items:stretch (row default) makes both columns the
   same height; stretching the CollapsibleCard itself (not just the
   column) to fill that height is what actually makes the card borders/
   bottoms line up horizontally, matching the old UI. */
.smx-cardrow[b-j78nag58oz] {
    align-items: stretch;
}

.smx-cardrow > .smx-col[b-j78nag58oz] {
    display: flex;
}

.smx-cardrow > .smx-col[b-j78nag58oz]  .cc-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.smx-cardrow > .smx-col[b-j78nag58oz]  .cc-body {
    flex: 1;
}

/* ── Form fields (label left, control right) ── */
.smx-field[b-j78nag58oz] {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 0 4px;
}

.smx-field:last-child[b-j78nag58oz] {
    margin-bottom: 4px;
}

.smx-field > label[b-j78nag58oz] {
    color: #455a64;
    font-size: 13.5px;
}

.smx-field-top[b-j78nag58oz] {
    align-items: start;
}

.smx-field-top > label[b-j78nag58oz] {
    padding-top: 8px;
}

.smx-static[b-j78nag58oz] {
    padding: 7px 2px;
    color: #37474f;
}

.smx-input[b-j78nag58oz],
.form-control.smx-input[b-j78nag58oz],
.form-select.smx-input[b-j78nag58oz] {
    height: 36px;
    box-sizing: border-box;
    font-size: 14px;
    color: #37474f;
    border: 1px solid #cfd6dd;
    border-radius: 6px;
    padding: 7px 12px;
    box-shadow: none;
    background-color: #fff;
}

textarea.smx-input[b-j78nag58oz] {
    height: auto;
}

.form-control.smx-input:focus[b-j78nag58oz],
.form-select.smx-input:focus[b-j78nag58oz] {
    border-color: #2aa198;
    box-shadow: 0 0 0 3px rgba(42, 161, 152, 0.12);
    outline: none;
}

.form-control.smx-input[readonly][b-j78nag58oz] {
    background-color: #fff;
}

.smx-divider[b-j78nag58oz] {
    border: 0;
    border-top: 1px solid #e4e9ed;
    margin: 18px 4px;
    opacity: 1;
}

/* ── Gray panel (TCS / TDS block) ── */
.smx-graypanel[b-j78nag58oz] {
    background: #cfcfcf;
    border-radius: 6px;
    padding: 16px 18px 20px;
    margin: 20px 4px 4px;
}

.smx-check[b-j78nag58oz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.smx-check .form-check-input[b-j78nag58oz] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #1ab99a;
    cursor: pointer;
}

.smx-check .form-check-label[b-j78nag58oz] {
    color: #37474f;
    font-size: 14px;
    cursor: pointer;
}

.smx-tds-row[b-j78nag58oz] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.smx-btn-tds[b-j78nag58oz] {
    height: 36px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    background: #6d6d6d;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0 20px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.smx-btn-tds:hover[b-j78nag58oz] {
    background: #5a5a5a;
}

.smx-btn-tds.on[b-j78nag58oz] {
    background: #1ab99a;
}

.smx-tds-label[b-j78nag58oz] {
    font-weight: 600;
    color: #37474f;
}

/* ── Logo card ── */
.smx-logo-toolbar[b-j78nag58oz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.smx-btn-upload[b-j78nag58oz] {
    height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    background: #1ab99a;
    color: #fff;
    border-radius: 6px;
    padding: 0 18px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.smx-btn-upload:hover[b-j78nag58oz] {
    background: #149c81;
}

.smx-file-hidden[b-j78nag58oz] {
    display: none;
}

.smx-logo-remove[b-j78nag58oz] {
    background: none;
    border: none;
    color: #546e7a;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.smx-logo-remove:hover[b-j78nag58oz] {
    color: #b91c1c;
}

.smx-logo-box[b-j78nag58oz] {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.smx-logo-placeholder[b-j78nag58oz] {
    color: #c9a227;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    line-height: 1.5;
}

.smx-logo-img[b-j78nag58oz] {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
}

/* ── Footer buttons (ChildContent of FooterToolbar — scoped here, see
   FooterToolbar.razor.css comment) — fixed height so every button
   (Info/Grid/New/Save/Delete) lines up identically. ── */
.smx-btn[b-j78nag58oz] {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: 5px;
    padding: 0 22px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.smx-btn:disabled[b-j78nag58oz] {
    opacity: 0.65;
    cursor: default;
}

.smx-btn-save[b-j78nag58oz] {
    background: #1ab99a;
    color: #fff;
    border-color: #1ab99a;
}

.smx-btn-save:hover[b-j78nag58oz] {
    background: #149c81;
    border-color: #149c81;
}

.smx-btn-grid[b-j78nag58oz] {
    background: #ffffff;
    color: #546e7a;
    border-color: #c4ccd2;
}

.smx-btn-grid:hover[b-j78nag58oz] {
    background: #f5f7f8;
    border-color: #1ab99a;
}

.smx-btn-del[b-j78nag58oz] {
    background: #ffffff;
    color: #dc2626;
    border-color: #f3d0d6;
}

.smx-btn-del:hover[b-j78nag58oz] {
    background: #fee2e2;
    border-color: #f1aab2;
}

.smx-info-strip[b-j78nag58oz] {
    font-size: 12.5px;
    color: #6b7280;
    margin-left: auto;
    align-self: center;
}

.smx-save-msg[b-j78nag58oz] {
    color: #149c81;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 576px) {
    .smx-info-strip[b-j78nag58oz] {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

/* ── Responsive (field grid — unchanged from before) ── */
@media (max-width: 991px) {
    .smx-field[b-j78nag58oz] {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-bottom: 14px;
    }

    .smx-field-top > label[b-j78nag58oz] {
        padding-top: 0;
    }
}
/* /Components/Pages/Masters/TagMasterPage.razor.rz.scp.css */
/* TagMasterPage.razor.css — scoped styles for the Tag1/Tag2/Tag3 grid page */

/* Layout scaffolding — mirrors MUOM.razor.css so the search toolbar and the
   pagination footer sit correctly around the scrollable grid. */
.mu-page[b-kmz8t6t39g] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

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

/* Single-pill pagination (page-size | divider | prev 1 2 3 next), all inside
   one continuous rounded/bordered capsule — matches the reference screenshot.
   Scoped to this component only (Blazor CSS isolation), so it can't affect
   MUOM or any other page that also uses .mu-pager/.mu-pagesize/.mu-nav. */
.mu-pager[b-kmz8t6t39g] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 3px;
    background: #fff;
    border: 1px solid #dde3ed;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.mu-pagesize-wrap[b-kmz8t6t39g] {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-right: 10px;
    margin-right: 8px;
    border-right: 1px solid #e2e8f0;
}

.mu-pagesize[b-kmz8t6t39g] {
    border: none;
    background: transparent;
    padding: 5px 22px 5px 8px;
    border-radius: 0;
}

    .mu-pagesize:focus[b-kmz8t6t39g] {
        border: none;
        box-shadow: none;
    }

.mu-pagesize-caret[b-kmz8t6t39g] {
    right: 4px;
}

.mu-pages[b-kmz8t6t39g] {
    gap: 2px;
}

.mu-nav[b-kmz8t6t39g],
.mu-pagenum[b-kmz8t6t39g] {
    min-width: 28px;
    height: 28px;
    border: none;
    border-radius: 7px;
    background: transparent;
}

    .mu-nav:hover:not(:disabled)[b-kmz8t6t39g],
    .mu-pagenum:hover[b-kmz8t6t39g] {
        background: #eef4fb;
    }

    .mu-nav:disabled[b-kmz8t6t39g] {
        background: transparent;
    }

    .mu-pagenum.active[b-kmz8t6t39g] {
        box-shadow: none;
    }

/* Blue "link" look for the Tag cell, matching GST/CC Group reference */
.tag-link[b-kmz8t6t39g] {
    color: #1a56a7;
    font-weight: 600;
}

.tag-count[b-kmz8t6t39g] {
    font-size: 12.5px;
    color: #64748b;
    white-space: nowrap;
}

/* Responsive grid — horizontal scroll on narrow viewports */
.tag-table-wrap[b-kmz8t6t39g] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.tag-table[b-kmz8t6t39g] {
    min-width: 420px;
}

/* Delete-confirmation dialog reuses the .uf-modal shell */
.tag-confirm-modal[b-kmz8t6t39g] {
    max-width: 420px;
}

.tag-confirm-text[b-kmz8t6t39g] {
    font-size: 14px;
    color: #334155;
    margin: 0;
}

.tag-btn-delete[b-kmz8t6t39g] {
    background: #e5484d;
    border-color: #e5484d;
    color: #fff;
}

    .tag-btn-delete:hover[b-kmz8t6t39g] {
        background: #c8393d;
    }

    .tag-btn-delete:disabled[b-kmz8t6t39g] {
        opacity: 0.65;
        cursor: default;
    }

@media (max-width: 640px) {
    .tag-table[b-kmz8t6t39g] {
        min-width: 360px;
    }
}
/* /Components/Pages/Masters/TaxClass.razor.rz.scp.css */
/* TaxClass.razor.css — scoped styles for the TaxClass Master page shell */

/* Flex-fill layout — page fills DashboardLayout's .gains-content (which
   already flex/overflow-scrolls) and only the grid (rendered by the child
   TaxClassGrid component) scrolls. Use height:100% here, never 100vh
   (see SchemeGrid.razor.css for the prior regression that caused). This
   page uses .tcm-toolbar/.tcm-foot instead of .mu-toolbar/.mu-foot, so
   those are the classes that need flex-shrink:0. The child's own root
   (.mu-table-wrap) gets its matching flex:1/overflow:auto rule in
   TaxClassGrid.razor.css. */
.mu-page[b-midw88ko7x] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

/* Legacy screenshot: the card (search+grid box) is a fixed ~800px-wide box
   with blank space to its right — not stretched full page width like the
   rest of the app's Masters pages. Title bar and footer still span full
   width; vertical flex-fill (grid scrolls, card fills remaining height)
   is untouched — this only caps the horizontal width. */
.tcm-card[b-midw88ko7x] {
    width: 100%;
    max-width: 820px;
}

.tcm-toolbar[b-midw88ko7x] {
    flex-shrink: 0;
    padding: 14px 16px 10px;
}

.tcm-count[b-midw88ko7x] {
    font-size: 12px;
    color: #555;
}

.tcm-new-btn[b-midw88ko7x] {
    display: inline-flex;
    align-items: center;
    padding: 5px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: #333;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
}

    .tcm-new-btn:hover[b-midw88ko7x] {
        background: #e9e9e9;
    }

.tcm-foot[b-midw88ko7x] {
    flex-shrink: 0;
    justify-content: flex-start;
}

@media (max-width: 767px) {
    .tcm-toolbar[b-midw88ko7x] {
        padding: 10px 10px 6px;
    }
}
/* /Components/Pages/Masters/TaxClassGrid.razor.rz.scp.css */
/* TaxClassGrid.razor.css — scoped styles for the TaxClass Master grid */

/* Flex-fill — this component's own root element (.mu-table-wrap /
   .tcm-table-wrap) grows to fill the remaining height of the parent's
   .mu-card flex column and scrolls internally, instead of a fixed 460px
   height. The parent (TaxClass.razor.css) supplies the
   .mu-page{height:100%} / .mu-card{flex:1;...} half of the chain. */
.tcm-table-wrap[b-7as6gktfdg] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.tcm-link[b-7as6gktfdg] {
    color: #1a56a7;
    cursor: pointer;
}

    .tcm-link:hover[b-7as6gktfdg] {
        text-decoration: underline;
    }

.tcm-th-perc[b-7as6gktfdg] {
    text-align: right;
}

.tcm-th-addled[b-7as6gktfdg] {
    width: 70px;
    text-align: center;
}

.tcm-add-cell[b-7as6gktfdg] {
    text-align: center;
}

.tcm-add-led[b-7as6gktfdg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: #333;
    cursor: pointer;
    border-radius: 4px;
}

    .tcm-add-led:hover[b-7as6gktfdg] {
        background: #eef2f7;
        color: #1ab99a;
    }

    .tcm-add-led i[b-7as6gktfdg] {
        font-size: 14px;
    }

/* Mobile: allow horizontal scroll instead of column stacking, per spec */
@media (max-width: 640px) {
    .tcm-table[b-7as6gktfdg] {
        min-width: 620px;
    }
}
/* /Components/Pages/Masters/TaxClassPopup.razor.rz.scp.css */
/* TaxClassPopup.razor.css — plain white modal matching the legacy
   TaxClass edit/add popup exactly (no gradient banner, no section box). */

.tcp-overlay[b-4eqi9i3tyj] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}

.tcp-modal[b-4eqi9i3tyj] {
    width: 100%;
    max-width: 500px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    animation: tcp-in-b-4eqi9i3tyj 0.18s ease-out;
}

.tcp-header[b-4eqi9i3tyj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.tcp-title[b-4eqi9i3tyj] {
    font-size: 17px;
    font-weight: 600;
    color: #1ab99a;
}

.tcp-close[b-4eqi9i3tyj] {
    background: none;
    border: none;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
}

    .tcp-close:hover[b-4eqi9i3tyj] {
        color: #1a2537;
    }

.tcp-body[b-4eqi9i3tyj] {
    padding: 20px 24px;
}

.tcp-field[b-4eqi9i3tyj] {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

    .tcp-field:last-of-type[b-4eqi9i3tyj] {
        margin-bottom: 0;
    }

    .tcp-field > label[b-4eqi9i3tyj] {
        font-size: 13.5px;
        color: #333;
    }

.tcp-input[b-4eqi9i3tyj] {
    width: 100%;
    max-width: 260px;
    padding: 7px 10px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    font-size: 13px;
    color: #1a2537;
    font-family: inherit;
    background: #fff;
    outline: none;
    box-sizing: border-box;
}

    .tcp-input:focus[b-4eqi9i3tyj] {
        border-color: #1ab99a;
        box-shadow: 0 0 0 3px rgba(26,185,154,0.15);
    }

.tcp-invalid[b-4eqi9i3tyj] {
    border-color: #e11d48 !important;
}

.tcp-err[b-4eqi9i3tyj] {
    color: #e11d48;
    font-size: 11px;
    margin-top: 4px;
}

.tcp-form-error[b-4eqi9i3tyj] {
    margin-top: 14px;
    padding: 9px 12px;
    border-radius: 6px;
    background: #fff5f6;
    border: 1px solid #f7cdd4;
    color: #be123c;
    font-size: 12.5px;
}

.tcp-footer[b-4eqi9i3tyj] {
    display: flex;
    gap: 10px;
    padding: 14px 24px 20px;
}

.tcp-btn[b-4eqi9i3tyj] {
    padding: 7px 22px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
}

.tcp-btn-save[b-4eqi9i3tyj] {
    background: #16a765;
}

    .tcp-btn-save:hover[b-4eqi9i3tyj] {
        background: #128a54;
    }

    .tcp-btn-save:disabled[b-4eqi9i3tyj] {
        opacity: 0.65;
        cursor: default;
    }

.tcp-btn-delete[b-4eqi9i3tyj] {
    background: #e5484d;
}

    .tcp-btn-delete:hover[b-4eqi9i3tyj] {
        background: #c8393d;
    }

    .tcp-btn-delete:disabled[b-4eqi9i3tyj] {
        opacity: 0.65;
        cursor: default;
    }

@keyframes tcp-in-b-4eqi9i3tyj {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 540px) {
    .tcp-modal[b-4eqi9i3tyj] {
        max-width: 95%;
    }

    .tcp-field[b-4eqi9i3tyj] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .tcp-input[b-4eqi9i3tyj] {
        max-width: 100%;
    }

    .tcp-footer[b-4eqi9i3tyj] {
        flex-wrap: wrap;
    }

        .tcp-footer .tcp-btn[b-4eqi9i3tyj] {
            flex: 1;
        }
}
/* /Components/Pages/Masters/XDepoLedger.razor.rz.scp.css */
/* =====================================================================
   GAINS — MXDepoLedger.razor.css   (Masters → XDepoLedger, page-scoped)
   Shared "mu-"/"uf-"/"bspl-" styles live in wwwroot/CSS/masters-forms.css.
   Only XDepoLedger-page-specific rules remain here.
   ===================================================================== */

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

/* ── Two side-by-side panels (depot | ledger) ── */
.xdl-cols[b-auraw6ets8] {
    flex: 1;
    display: flex;
    gap: 16px;
    min-height: 0;
}

.xdl-depot[b-auraw6ets8] {
    flex: 1 1 40%;
    display: flex;
    min-width: 0;
}

.xdl-ledger[b-auraw6ets8] {
    flex: 1 1 60%;
    display: flex;
    min-width: 0;
}

    /* Each card fills its column so its pager footer sits at the bottom. */
    .xdl-depot > .mu-card[b-auraw6ets8],
    .xdl-ledger > .mu-card[b-auraw6ets8] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

.mu-toolbar[b-auraw6ets8] {
    flex-shrink: 0;
    gap: 10px;
}

/* Table scroll area fills the space between toolbar and footer
   (override the global fixed 540px height). */
.mu-table-wrap[b-auraw6ets8] {
    height: auto;
    flex: 1;
    overflow: auto;
    min-height: 0;
}

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

/* Pager text should match the app rather than the global tiny grey footer text. */
.bspl-footer-right[b-auraw6ets8] {
    font-size: inherit;
    color: inherit;
}

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

/* ── Selected depot row highlight ── */
.xdl-active[b-auraw6ets8],
.xdl-active:hover[b-auraw6ets8] {
    background: #e6f7f2 !important;
}

    .xdl-active td:first-child[b-auraw6ets8] {
        box-shadow: inset 3px 0 0 #1ab99a;
    }

/* ── Selected-depot label in the ledger toolbar ── */
.xdl-sel[b-auraw6ets8] {
    font-size: 12.5px;
    color: #0f766e;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.xdl-sel-none[b-auraw6ets8] {
    color: #94a3b8;
    font-weight: 500;
}

/* ── Save group (pending badge + Save button) on the ledger toolbar ── */
.xdl-save-group[b-auraw6ets8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.xdl-pending[b-auraw6ets8] {
    font-size: 11.5px;
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}

/* ── Numeric depot columns (Active / Linked) ── */
.xdl-num[b-auraw6ets8] {
    width: 72px;
    text-align: center;
}

/* ── Ledger "Linked" checkbox column ── */
.mu-th-chk[b-auraw6ets8] {
    width: 64px;
    text-align: center;
}

.xdl-chk-cell[b-auraw6ets8] {
    text-align: center;
}

    .xdl-chk-cell input[b-auraw6ets8] {
        width: 15px;
        height: 15px;
        accent-color: #1ab99a;
        /* Toggling is driven by the whole-row click, so the box is display-only. */
        pointer-events: none;
    }

/* Rows with an unsaved checkbox change get a subtle marker. */
.xdl-dirty td:first-child[b-auraw6ets8] {
    box-shadow: inset 3px 0 0 #f59e0b;
}

/* ── Mobile: stack the two panels, cap the scroll height ── */
@media (max-width: 900px) {
    .mu-page[b-auraw6ets8] {
        height: auto;
    }

    .xdl-cols[b-auraw6ets8] {
        flex-direction: column;
    }

    .mu-table-wrap[b-auraw6ets8] {
        height: 420px;
        flex: none;
    }

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

    .xdl-sel[b-auraw6ets8] {
        max-width: 120px;
    }

    .xdl-save-group .mu-btn-label[b-auraw6ets8] {
        display: none;
    }
}
/* /Components/Pages/Masters/XDepoLogin.razor.rz.scp.css */
/* =====================================================================
   GAINS — MXDepoLogin.razor.css   (Masters → XDepo-Login, page-scoped)
   Shared "mu-"/"uf-"/"bspl-" styles live in wwwroot/CSS/masters-forms.css.
   Only XDepoLogin-page-specific rules remain here.
   ===================================================================== */

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

/* ── Two side-by-side panels (depot | login) ── */
.xdpl-cols[b-acox71qjwc] {
    flex: 1;
    display: flex;
    gap: 16px;
    min-height: 0;
}

.xdpl-depot[b-acox71qjwc] {
    flex: 1 1 50%;
    display: flex;
    min-width: 0;
}

.xdpl-login[b-acox71qjwc] {
    flex: 1 1 50%;
    display: flex;
    min-width: 0;
}

    /* Each card fills its column so its pager footer sits at the bottom. */
    .xdpl-depot > .mu-card[b-acox71qjwc],
    .xdpl-login > .mu-card[b-acox71qjwc] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

.mu-toolbar[b-acox71qjwc] {
    flex-shrink: 0;
    gap: 10px;
}

/* Table scroll area fills the space between toolbar and footer
   (override the global fixed 540px height). */
.mu-table-wrap[b-acox71qjwc] {
    height: auto;
    flex: 1;
    overflow: auto;
    min-height: 0;
}

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

/* Pager text should match the app rather than the global tiny grey footer text. */
.bspl-footer-right[b-acox71qjwc] {
    font-size: inherit;
    color: inherit;
}

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

/* ── Selected depot row highlight ── */
.xdpl-active[b-acox71qjwc],
.xdpl-active:hover[b-acox71qjwc] {
    background: #e6f7f2 !important;
}

    .xdpl-active td:first-child[b-acox71qjwc] {
        box-shadow: inset 3px 0 0 #1ab99a;
    }

/* ── Selected-depot label in the login toolbar ── */
.xdpl-sel[b-acox71qjwc] {
    font-size: 12.5px;
    color: #0f766e;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.xdpl-sel-none[b-acox71qjwc] {
    color: #94a3b8;
    font-weight: 500;
}

/* ── Save group (assigned-count hint + Save button) ── */
.xdpl-save-group[b-acox71qjwc] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.xdpl-count[b-acox71qjwc] {
    font-size: 11.5px;
    color: #0f766e;
    background: #eafaf4;
    border: 1px solid #cdeee4;
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}

/* ── Depot columns ── */
.xdpl-abbr[b-acox71qjwc] {
    width: 90px;
}

.xdpl-num[b-acox71qjwc] {
    width: 72px;
    text-align: center;
}

/* ── Login grid checkbox columns ── */
.mu-th-chk[b-acox71qjwc] {
    width: 64px;
    text-align: center;
}

.mu-th-def[b-acox71qjwc] {
    width: 80px;
    text-align: center;
}

/* Header "select all" for the Assigned column. */
.xdpl-chkall[b-acox71qjwc] {
    width: 15px;
    height: 15px;
    accent-color: #fff;
    cursor: pointer;
    vertical-align: middle;
}

.xdpl-chk-cell[b-acox71qjwc],
.xdpl-def-cell[b-acox71qjwc] {
    text-align: center;
}

    .xdpl-chk-cell input[b-acox71qjwc] {
        width: 15px;
        height: 15px;
        accent-color: #1ab99a;
        cursor: pointer;
    }

    /* Default box uses the blue accent to read differently from Assigned. */
    .xdpl-def-cell input[b-acox71qjwc] {
        width: 15px;
        height: 15px;
        accent-color: #1a56a7;
        cursor: pointer;
    }

        .xdpl-def-cell input:disabled[b-acox71qjwc] {
            cursor: not-allowed;
            opacity: 0.45;
        }

/* Rows with an unsaved change get a subtle marker. */
.xdpl-dirty td:first-child[b-acox71qjwc] {
    box-shadow: inset 3px 0 0 #f59e0b;
}

/* ── Mobile: stack the two panels, cap the scroll height ── */
@media (max-width: 900px) {
    .mu-page[b-acox71qjwc] {
        height: auto;
    }

    .xdpl-cols[b-acox71qjwc] {
        flex-direction: column;
    }

    .mu-table-wrap[b-acox71qjwc] {
        height: 420px;
        flex: none;
    }

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

    .xdpl-sel[b-acox71qjwc] {
        max-width: 120px;
    }

    .xdpl-abbr[b-acox71qjwc] {
        display: none;
    }

    .xdpl-save-group .mu-btn-label[b-acox71qjwc] {
        display: none;
    }
}
/* /Components/Pages/Masters/XItemLogin.razor.rz.scp.css */
/* =====================================================================
   GAINS — MXItemLogin.razor.css   (Masters → xItemLogin, page-scoped)
   Shared "mu-"/"uf-"/"bspl-" styles live in wwwroot/CSS/masters-forms.css.
   Only xItemLogin-page-specific rules remain here.
   ===================================================================== */

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

/* ── Two side-by-side panels (depot | item) ── */
.xil-cols[b-j3mdcpvrue] {
    flex: 1;
    display: flex;
    gap: 16px;
    min-height: 0;
}

.xil-depot[b-j3mdcpvrue] {
    flex: 1 1 38%;
    display: flex;
    min-width: 0;
}

.xil-item[b-j3mdcpvrue] {
    flex: 1 1 62%;
    display: flex;
    min-width: 0;
}

    .xil-depot > .mu-card[b-j3mdcpvrue],
    .xil-item > .mu-card[b-j3mdcpvrue] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

.mu-toolbar[b-j3mdcpvrue] {
    flex-shrink: 0;
    gap: 10px;
}

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

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

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

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

/* ── Selected depot row highlight ── */
.xil-active[b-j3mdcpvrue],
.xil-active:hover[b-j3mdcpvrue] {
    background: #e6f7f2 !important;
}

    .xil-active td:first-child[b-j3mdcpvrue] {
        box-shadow: inset 3px 0 0 #1ab99a;
    }

/* ── Selected-depot label in the item toolbar ── */
.xil-sel[b-j3mdcpvrue] {
    font-size: 12.5px;
    color: #0f766e;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.xil-sel-none[b-j3mdcpvrue] {
    color: #94a3b8;
    font-weight: 500;
}

/* ── Save group ── */
.xil-save-group[b-j3mdcpvrue] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.xil-pending[b-j3mdcpvrue] {
    font-size: 11.5px;
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}

/* ── Depot linked column ── */
.xil-num[b-j3mdcpvrue] {
    width: 72px;
    text-align: center;
}

/* ── Item grid: checkbox + OB value + Dr/Cr columns ── */
.mu-th-chk[b-j3mdcpvrue] {
    width: 52px;
    text-align: center;
}

.xil-ob-h[b-j3mdcpvrue] {
    width: 120px;
    text-align: right;
}

.xil-drcr-h[b-j3mdcpvrue] {
    width: 80px;
    text-align: center;
}

.xil-chkall[b-j3mdcpvrue] {
    width: 15px;
    height: 15px;
    accent-color: #fff;
    cursor: pointer;
    vertical-align: middle;
}

.xil-chk-cell[b-j3mdcpvrue] {
    text-align: center;
}

    .xil-chk-cell input[b-j3mdcpvrue] {
        width: 15px;
        height: 15px;
        accent-color: #1ab99a;
        cursor: pointer;
    }

.xil-ob-cell[b-j3mdcpvrue] {
    text-align: right;
}

.xil-ob-input[b-j3mdcpvrue] {
    width: 108px;
    padding: 4px 8px;
    border: 1px solid #d7dde3;
    border-radius: 6px;
    font-size: 12.5px;
    text-align: right;
    background: #fff;
}

    .xil-ob-input:focus[b-j3mdcpvrue] {
        outline: none;
        border-color: #1ab99a;
        box-shadow: 0 0 0 2px rgba(26, 185, 154, 0.15);
    }

    .xil-ob-input:disabled[b-j3mdcpvrue] {
        background: #f4f6f8;
        color: #9aa5b1;
    }

.xil-drcr-cell[b-j3mdcpvrue] {
    text-align: center;
}

.xil-drcr-input[b-j3mdcpvrue] {
    width: 66px;
    padding: 4px 6px;
    border: 1px solid #d7dde3;
    border-radius: 6px;
    font-size: 12.5px;
    background: #fff;
    cursor: pointer;
}

    .xil-drcr-input:focus[b-j3mdcpvrue] {
        outline: none;
        border-color: #1ab99a;
        box-shadow: 0 0 0 2px rgba(26, 185, 154, 0.15);
    }

    .xil-drcr-input:disabled[b-j3mdcpvrue] {
        background: #f4f6f8;
        color: #9aa5b1;
        cursor: default;
    }

/* Rows with an unsaved change get a subtle marker. */
.xil-dirty td:first-child[b-j3mdcpvrue] {
    box-shadow: inset 3px 0 0 #f59e0b;
}

/* ── Mobile: stack the two panels, cap the scroll height ── */
@media (max-width: 900px) {
    .mu-page[b-j3mdcpvrue] {
        height: auto;
    }

    .xil-cols[b-j3mdcpvrue] {
        flex-direction: column;
    }

    .mu-table-wrap[b-j3mdcpvrue] {
        height: 420px;
        flex: none;
    }

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

    .xil-sel[b-j3mdcpvrue] {
        max-width: 120px;
    }

    .xil-save-group .mu-btn-label[b-j3mdcpvrue] {
        display: none;
    }
}

/* ── OB Value read-only (sum of batch quantities) ── */
.xil-ob-ro[b-j3mdcpvrue] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #334155;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Batches column + button ── */
.xil-batch-h[b-j3mdcpvrue] {
    width: 74px;
    text-align: center;
}

.xil-batch-cell[b-j3mdcpvrue] {
    text-align: center;
}

.xil-batch-btn[b-j3mdcpvrue] {
    width: 28px;
    height: 26px;
    border: 1px solid #cdeee4;
    background: #eafaf4;
    color: #0f766e;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s;
}

    .xil-batch-btn:hover[b-j3mdcpvrue] {
        background: #d5f3e9;
        border-color: #1ab99a;
    }

/* ── Batch modal ── */
.xil-batch-modal[b-j3mdcpvrue] {
    width: min(880px, 96vw);
    max-height: 90vh;
}

.xil-batch-form[b-j3mdcpvrue] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: flex-end;
    padding-bottom: 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eef1f4;
}

.xil-bf[b-j3mdcpvrue] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 150px;
    min-width: 120px;
}

.xil-bf-sm[b-j3mdcpvrue] {
    flex: 0 1 110px;
    min-width: 90px;
}

.xil-bf label[b-j3mdcpvrue] {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
}

.xil-bf-actions[b-j3mdcpvrue] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.xil-batch-list[b-j3mdcpvrue] {
    position: relative;
    max-height: 46vh;
    overflow: auto;
}

    .xil-batch-list .mu-table thead th[b-j3mdcpvrue] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

.xil-bt-num[b-j3mdcpvrue] {
    text-align: right;
    width: 90px;
    font-variant-numeric: tabular-nums;
}

.xil-bt-date[b-j3mdcpvrue] {
    width: 110px;
    text-align: center;
    white-space: nowrap;
}

.xil-bt-unit[b-j3mdcpvrue] {
    width: 80px;
}

.xil-bt-editing[b-j3mdcpvrue],
.xil-bt-editing:hover[b-j3mdcpvrue] {
    background: #fff7ed !important;
}

.xil-bt-empty[b-j3mdcpvrue] {
    text-align: center;
    color: #94a3b8;
    padding: 22px 0;
}

.xil-bt-total[b-j3mdcpvrue] {
    font-size: 12.5px;
    color: #334155;
}

    .xil-bt-total strong[b-j3mdcpvrue] {
        color: #0f766e;
    }
/* /Components/Pages/Masters/Xledgerdepot.razor.rz.scp.css */
/* =====================================================================
   GAINS — MXLedgerDepot.razor.css   (Masters → XLedgerDepot, page-scoped)
   Shared "mu-"/"uf-"/"bspl-" styles live in wwwroot/CSS/masters-forms.css.
   Only XLedgerDepot-page-specific rules remain here.
   ===================================================================== */

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

/* ── Two side-by-side panels (ledger | depot) ── */
.xld-cols[b-o21po4oxsl] {
    flex: 1;
    display: flex;
    gap: 16px;
    min-height: 0;
}

.xld-led[b-o21po4oxsl] {
    flex: 1 1 55%;
    display: flex;
    min-width: 0;
}

.xld-depot[b-o21po4oxsl] {
    flex: 1 1 45%;
    display: flex;
    min-width: 0;
}

    /* Each card fills its column so its pager footer sits at the bottom. */
    .xld-led > .mu-card[b-o21po4oxsl],
    .xld-depot > .mu-card[b-o21po4oxsl] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

.mu-toolbar[b-o21po4oxsl] {
    flex-shrink: 0;
    gap: 10px;
}

/* Table scroll area fills the space between toolbar and footer
   (override the global fixed 540px height). */
.mu-table-wrap[b-o21po4oxsl] {
    height: auto;
    flex: 1;
    overflow: auto;
    min-height: 0;
}

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

/* Pager text should match the app rather than the global tiny grey footer text. */
.bspl-footer-right[b-o21po4oxsl] {
    font-size: inherit;
    color: inherit;
}

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

/* ── Selected ledger row highlight ── */
.xld-active[b-o21po4oxsl],
.xld-active:hover[b-o21po4oxsl] {
    background: #e6f7f2 !important;
}

    .xld-active td:first-child[b-o21po4oxsl] {
        box-shadow: inset 3px 0 0 #1ab99a;
    }

/* ── Selected-ledger label in the depot toolbar ── */
.xld-sel[b-o21po4oxsl] {
    font-size: 12.5px;
    color: #0f766e;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.xld-sel-none[b-o21po4oxsl] {
    color: #94a3b8;
    font-weight: 500;
}

/* ── Save group (pending badge + Save button) on the depot toolbar ── */
.xld-save-group[b-o21po4oxsl] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.xld-pending[b-o21po4oxsl] {
    font-size: 11.5px;
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}

/* ── Numeric ledger column (Linked) ── */
.xld-num[b-o21po4oxsl] {
    width: 72px;
    text-align: center;
}

/* ── Depot "linked" checkbox column ── */
.mu-th-chk[b-o21po4oxsl] {
    width: 64px;
    text-align: center;
}

/* Header "select all" — interactive (unlike the display-only row boxes). */
.xld-chkall[b-o21po4oxsl] {
    width: 15px;
    height: 15px;
    accent-color: #fff;
    cursor: pointer;
    vertical-align: middle;
}

.xld-chk-cell[b-o21po4oxsl] {
    text-align: center;
}

    .xld-chk-cell input[b-o21po4oxsl] {
        width: 15px;
        height: 15px;
        accent-color: #1ab99a;
        /* Toggling is driven by the whole-row click, so the box is display-only. */
        pointer-events: none;
    }

/* Rows with an unsaved checkbox change get a subtle marker. */
.xld-dirty td:first-child[b-o21po4oxsl] {
    box-shadow: inset 3px 0 0 #f59e0b;
}

/* ── Mobile: stack the two panels, cap the scroll height ── */
@media (max-width: 900px) {
    .mu-page[b-o21po4oxsl] {
        height: auto;
    }

    .xld-cols[b-o21po4oxsl] {
        flex-direction: column;
    }

    .mu-table-wrap[b-o21po4oxsl] {
        height: 420px;
        flex: none;
    }

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

    .xld-sel[b-o21po4oxsl] {
        max-width: 120px;
    }

    .xld-save-group .mu-btn-label[b-o21po4oxsl] {
        display: none;
    }
}
/* /Components/Pages/Masters/XLedgerItemname.razor.rz.scp.css */
/* =====================================================================
   GAINS — LedgerItem.razor.css   (Masters → Ledger-Item, APIxLedgerItems)
   Shared "mu-"/"uf-" styles live in wwwroot/CSS/masters-forms.css.
   Only this page's specific rules remain here.
   ===================================================================== */

.mu-login[b-np7mksab7e] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .mu-login:hover[b-np7mksab7e] {
        text-decoration: underline;
    }

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

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

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

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

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

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

.uf-footer-right[b-np7mksab7e] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Ledger / GO / CF / Frequently Ordered toolbar */
.li-toolbar[b-np7mksab7e] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.li-field[b-np7mksab7e] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
}

    .li-field span[b-np7mksab7e] {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #6b7280;
    }

    .li-field input[type="text"][b-np7mksab7e] {
        height: 36px;
        padding: 0 10px;
        border: 1.5px solid #d1d5db;
        border-radius: 8px;
        font-size: 12.5px;
        font-family: inherit;
        background: #f8fafc;
        color: #111827;
        outline: none;
        transition: .12s;
        width: 100%;
        min-width: 0;
    }

        .li-field input[type="text"]:focus[b-np7mksab7e] {
            border-color: #1a7a4c;
            background: #fff;
        }

.li-checkbox-label[b-np7mksab7e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    white-space: nowrap;
    padding-bottom: 8px;
}

    .li-checkbox-label input[type="checkbox"][b-np7mksab7e] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #1a7a4c;
    }

/* Wider modal — has a filter row + paged item grid */
.li-modal-lg[b-np7mksab7e] {
    width: min(760px, 92vw);
}

.li-selected-count[b-np7mksab7e] {
    font-size: 13px;
    font-weight: 600;
    color: #1a7a4c;
    margin-left: auto;
    margin-right: 12px;
    white-space: nowrap;
}

.li-group-row[b-np7mksab7e] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

    .li-group-row span[b-np7mksab7e] {
        font-size: 13px;
        color: #374151;
        white-space: nowrap;
    }

    .li-group-row select[b-np7mksab7e] {
        flex: 1 1 220px;
    }

/* Item checklist — uses appearance:none so :checked keeps its color even
   while the row above stays interactive (learned from the disabled-gray
   checkbox issue on LedgerSalesRep — same fix applied proactively here) */
.li-scroll[b-np7mksab7e] {
    max-height: 380px;
    overflow-y: auto;
}

    .li-scroll td:nth-child(2)[b-np7mksab7e] {
        text-align: center;
        width: 48px;
    }

    .li-scroll input[type="checkbox"][b-np7mksab7e] {
        appearance: none;
        -webkit-appearance: none;
        width: 17px;
        height: 17px;
        border: 1.5px solid #9ca3af;
        border-radius: 4px;
        cursor: pointer;
        vertical-align: middle;
        position: relative;
        background: #fff;
        margin: 0;
    }

        .li-scroll input[type="checkbox"]:checked[b-np7mksab7e] {
            background: #1a56a7;
            border-color: #1a56a7;
        }

            .li-scroll input[type="checkbox"]:checked[b-np7mksab7e]::after {
                content: "";
                position: absolute;
                left: 5px;
                top: 1px;
                width: 4px;
                height: 9px;
                border: solid #fff;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

    .li-scroll td[b-np7mksab7e],
    .li-scroll th[b-np7mksab7e] {
        padding: 8px 12px;
    }

/* Item checklist's own pagination footer, inside the modal body */
.li-inner-footer[b-np7mksab7e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #6b7280;
}

.li-inner-pager[b-np7mksab7e] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* /Components/Pages/Masters/XLoginDepo.razor.rz.scp.css */
/* =====================================================================
   GAINS — MXLoginDepo.razor.css   (Masters → XLogin-Depo, page-scoped)
   Shared "mu-"/"uf-"/"bspl-" styles live in wwwroot/CSS/masters-forms.css.
   Only XLoginDepo-page-specific rules remain here.
   ===================================================================== */

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

/* ── Two side-by-side panels (login | depot) ── */
.xlp-cols[b-cyi9fyvzhw] {
    flex: 1;
    display: flex;
    gap: 16px;
    min-height: 0;
}

.xlp-login[b-cyi9fyvzhw] {
    flex: 1 1 50%;
    display: flex;
    min-width: 0;
}

.xlp-depot[b-cyi9fyvzhw] {
    flex: 1 1 50%;
    display: flex;
    min-width: 0;
}

    /* Each card fills its column so its pager footer sits at the bottom. */
    .xlp-login > .mu-card[b-cyi9fyvzhw],
    .xlp-depot > .mu-card[b-cyi9fyvzhw] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

.mu-toolbar[b-cyi9fyvzhw] {
    flex-shrink: 0;
    gap: 10px;
}

/* Table scroll area fills the space between toolbar and footer
   (override the global fixed 540px height). */
.mu-table-wrap[b-cyi9fyvzhw] {
    height: auto;
    flex: 1;
    overflow: auto;
    min-height: 0;
}

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

/* Pager text should match the app rather than the global tiny grey footer text. */
.bspl-footer-right[b-cyi9fyvzhw] {
    font-size: inherit;
    color: inherit;
}

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

/* ── Selected login row highlight ── */
.xlp-active[b-cyi9fyvzhw],
.xlp-active:hover[b-cyi9fyvzhw] {
    background: #e6f7f2 !important;
}

    .xlp-active td:first-child[b-cyi9fyvzhw] {
        box-shadow: inset 3px 0 0 #1ab99a;
    }

/* ── Selected-login label in the depot toolbar ── */
.xlp-sel[b-cyi9fyvzhw] {
    font-size: 12.5px;
    color: #0f766e;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.xlp-sel-none[b-cyi9fyvzhw] {
    color: #94a3b8;
    font-weight: 500;
}

/* ── Save group (pending badge + Save button) on the depot toolbar ── */
.xlp-save-group[b-cyi9fyvzhw] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.xlp-pending[b-cyi9fyvzhw] {
    font-size: 11.5px;
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}

/* ── Numeric login column (Linked) ── */
.xlp-num[b-cyi9fyvzhw] {
    width: 72px;
    text-align: center;
}

/* ── Depot "linked" checkbox column ── */
.mu-th-chk[b-cyi9fyvzhw] {
    width: 64px;
    text-align: center;
}

/* Header "select all" — interactive (unlike the display-only row boxes). */
.xlp-chkall[b-cyi9fyvzhw] {
    width: 15px;
    height: 15px;
    accent-color: #fff;
    cursor: pointer;
    vertical-align: middle;
}

.xlp-chk-cell[b-cyi9fyvzhw] {
    text-align: center;
}

    .xlp-chk-cell input[b-cyi9fyvzhw] {
        width: 15px;
        height: 15px;
        accent-color: #1ab99a;
        /* Toggling is driven by the whole-row click, so the box is display-only. */
        pointer-events: none;
    }

/* Rows with an unsaved checkbox change get a subtle marker. */
.xlp-dirty td:first-child[b-cyi9fyvzhw] {
    box-shadow: inset 3px 0 0 #f59e0b;
}

/* ── Mobile: stack the two panels, cap the scroll height ── */
@media (max-width: 900px) {
    .mu-page[b-cyi9fyvzhw] {
        height: auto;
    }

    .xlp-cols[b-cyi9fyvzhw] {
        flex-direction: column;
    }

    .mu-table-wrap[b-cyi9fyvzhw] {
        height: 420px;
        flex: none;
    }

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

    .xlp-sel[b-cyi9fyvzhw] {
        max-width: 120px;
    }

    .xlp-save-group .mu-btn-label[b-cyi9fyvzhw] {
        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 must stay above the fixed filter drawer/overlay (drawer z-index
   1200, overlay 1190) — otherwise the drawer, which starts at top:0, paints
   over the AR/AP + FILTERS buttons on the right side of this row. */
.bspl-title-block[b-hh3n09puyr] {
    position: relative;
    z-index: 1300;
}

/* No dim behind the drawer — cards stay exactly as-is (matching the
   no-filter view) when FILTERS is open, per explicit request. */
.mu-drawer-overlay[b-hh3n09puyr] {
    background: transparent;
}

/* ── 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;
}

/* Ledger picker dropdown restyle, scoped to this page only via ::deep
   (LedgerAutofill.razor.css is shared with QLedger — untouched there).
   Matches the SalesRepFilterPanel reference: single-line ellipsis instead
   of wrapping to 2-3 lines, first row always green (not tied to keyboard
   active-index, just a visual "top pick" cue like the reference). */
[b-hh3n09puyr] .lga-suggest li {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-hh3n09puyr] .lga-suggest li:first-child:not(.lga-empty) {
    background: #27AE60;
    color: #fff;
}

[b-hh3n09puyr] .lga-suggest li:hover:not(.lga-empty),
[b-hh3n09puyr] .lga-suggest li.active:not(.lga-empty) {
    background: #27AE60;
    color: #fff;
}

.arap-led-input-wrap[b-hh3n09puyr] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

    .arap-led-input-wrap .uf-input[b-hh3n09puyr] {
        width: 100%;
        box-sizing: border-box;
    }

/* 3x-Enter inline suggestion list — dropdown under the quick-search box */
.arap-led-suggest[b-hh3n09puyr] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dde3ed;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

    .arap-led-suggest li[b-hh3n09puyr] {
        padding: 7px 12px;
        font-size: 13px;
        color: #1a2537;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .arap-led-suggest li:hover[b-hh3n09puyr],
    .arap-led-suggest li.active[b-hh3n09puyr] {
        background: #1ab99a;
        color: #fff;
    }

.arap-led-suggest-error[b-hh3n09puyr] {
    padding: 10px 12px;
    font-size: 12px;
    color: #dc2626;
}

    .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;
    cursor: pointer;
}

    .arap-vnum:hover[b-hh3n09puyr] {
        text-decoration: underline;
    }

.arap-vtype[b-hh3n09puyr] {
    font-weight: 500;
    font-size: 13px;
    color: #1a2537;
}

/* ── Dashboard (landing) — AR/AP stat cards ── */
.arap-dash[b-hh3n09puyr] {
    padding: 14px;
    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 1fr;
    grid-auto-rows: 250px;
    gap: 24px;
    width: 100%;
    max-width: 1100px;
}

.arap-dash-card[b-hh3n09puyr] {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15,23,42,0.14);
    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: 16px 24px 10px;
    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 2px 8px rgba(15,23,42,0.14);
    background: #fff;
}

    .arap-dash-imgpanel img[b-hh3n09puyr] {
        width: 100%;
        height: 100%;
        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;
}

/* ── Pager — reuses the shared global .mu-pager/.mu-nav/.mu-pagenum component
   (masters-forms.css), same one UOM/QL/QG already use, so this page already
   matches structurally. Only real visual gap vs. the reference: the active
   page number there is a filled circle, while the shared CSS makes every
   pager button (active or not) an 8px rounded square. Overriding just the
   circle shape here, scoped to this page only — not touching the shared
   class, so UOM/QL/QG's own pagers are unaffected either way. ── */
.mu-pagenum.active[b-hh3n09puyr] {
    border-radius: 50%;
}

/* ── 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. */
/* Small gap between the CLIENTWISE/INVOICES/PIVOT cluster and
   DETAILS/ABRIDGED/SEARCH — all 6 sit in one row (reverted from the
   earlier two-row layout per the latest reference). */
.arap-ls-tabs-gap[b-hh3n09puyr] {
    width: 20px;
}

.arap-ls-tab[b-hh3n09puyr] {
    height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 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;
    white-space: nowrap;
}

    .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 2px 8px rgba(15,23,42,0.14);
}

.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 2px 8px rgba(15,23,42,0.14);
}

.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;
}
/* ── AP Invoices ("Show Invoice") panel — legacy Account Payables look ── */
.arap-ap-panel[b-hh3n09puyr] {
    margin: 20px;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15,23,42,0.14);
}

.arap-ap-panel-hdr[b-hh3n09puyr] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 14px;
    color: #1a2537;
    background-image: linear-gradient(to left, rgba(126,179,148,0.25), rgba(130,202,215,0.15));
}

.arap-ap-pay-btn[b-hh3n09puyr] {
    opacity: 0.7;
    cursor: not-allowed;
    padding: 5px 14px;
    font-size: 13px;
    border-radius: 6px;
}

/* Cards reduced ~35-40% (was ~65-70px, target 50-60px): tighter padding,
   nowrap on the amount so long parenthesised numbers ("(6,76,83,268.66)")
   don't wrap to a 2nd line — that wrap was the main source of the extra
   height, not the font sizes themselves. */
.arap-ap-stats[b-hh3n09puyr] {
    display: inline-flex;
    gap: 1px;
    background: #eef2f7;
    width: auto;
}

.arap-ap-stat[b-hh3n09puyr] {
    height: 32px;
    width: 130px;
    flex: 0 0 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    color: #fff;
    text-align: center;
    line-height: 1.05;
    box-sizing: border-box;
}

.arap-ap-stat-lbl[b-hh3n09puyr] {
    font-size: 9.5px;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.arap-ap-stat-val[b-hh3n09puyr] {
    font-size: 12.5px;
    font-weight: 700;
    margin-top: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.arap-ap-stat.vamt[b-hh3n09puyr] {
    background: #1565a5;
}

.arap-ap-stat.cleared[b-hh3n09puyr] {
    background: #2e93c9;
}

.arap-ap-stat.due[b-hh3n09puyr] {
    background: #e8a33d;
}

.arap-ap-stat.ytd[b-hh3n09puyr] {
    background: #c0392b;
}

.arap-ap-stat.unadj[b-hh3n09puyr] {
    background: #1ab99a;
}

.arap-ap-table-wrap[b-hh3n09puyr] {
    max-height: 480px;
}

/* Fixed column widths (via <colgroup> in markup) instead of auto-distributed
   equal/browser-default widths — auto layout was stretching narrow-content
   columns (Type/Date, Invoice #, DueDate/DueDays) into big empty gaps to
   fill the full-width table. table-layout:fixed makes the colgroup widths
   authoritative, scoped to this table only. */
.arap-ap-table[b-hh3n09puyr] {
    table-layout: fixed;
}

.arap-ap-table td[b-hh3n09puyr],
.arap-ap-table th[b-hh3n09puyr] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Compact header/rows, scoped to this table only (global .mu-table stays
   as-is for Vouchers/other grids). Target row height ~40-45px. */
.arap-ap-table thead th[b-hh3n09puyr] {
    padding: 6px 10px;
    font-size: 12px;
}

.arap-ap-table tbody td[b-hh3n09puyr] {
    height: 42px;
    padding: 4px 10px;
    box-sizing: border-box;
}

.arap-ap-table tbody tr[b-hh3n09puyr] {
    height: 42px;
}

.arap-ap-chk[b-hh3n09puyr] {
    width: 30px;
    text-align: center;
}

.arap-ap-stack[b-hh3n09puyr] {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.arap-ap-sub[b-hh3n09puyr] {
    font-size: 11px;
    color: #64748b;
}

/* Due Days badge — smaller than the global .arap-dd-badge (used elsewhere
   at full size), scoped to this table only. */
.arap-ap-table .arap-dd-badge[b-hh3n09puyr] {
    min-width: 30px;
    padding: 2px 6px;
    font-size: 11px;
}


@media (max-width: 900px) {
    .arap-ap-stats[b-hh3n09puyr] {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .arap-ap-stat[b-hh3n09puyr] {
        flex: 1 1 45%;
        width: auto;
    }
}
/* /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/DayBook/ItemBrandEdit.razor.rz.scp.css */
/* ItemBrandEdit.razor.css — scoped styles for the Item Brand Master modal */

.uf-modal-sm[b-ifgya1iuhu] { max-width: 480px; }

.uf-field.itembrand-field[b-ifgya1iuhu] { margin-bottom: 16px; }
.uf-field.itembrand-field:last-of-type[b-ifgya1iuhu] { margin-bottom: 0; }
.uf-field.itembrand-field > label[b-ifgya1iuhu] { font-size: 13px; padding-top: 9px; }

.uf-footer-right[b-ifgya1iuhu] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Solid red DELETE button — matches GST's filled delete treatment */
.itembrand-btn-delete[b-ifgya1iuhu] {
    background: #e5484d;
    border-color: #e5484d;
    color: #fff;
}

    .itembrand-btn-delete:hover[b-ifgya1iuhu] {
        background: #c8393d;
    }

    .itembrand-btn-delete:disabled[b-ifgya1iuhu] {
        opacity: 0.65;
        cursor: default;
    }

@media (max-width: 540px) {
    .uf-field.itembrand-field[b-ifgya1iuhu] { grid-template-columns: 1fr; gap: 4px; }
    .uf-field.itembrand-field > label[b-ifgya1iuhu] { padding-top: 0; }
}
/* /Components/Pages/Transactions/DayBook/TagEdit.razor.rz.scp.css */
/* TagEdit.razor.css — scoped styles for the Tag Master modal */

.uf-modal-sm[b-0bk6q6ntq2] { max-width: 420px; }

.uf-field.tag-field[b-0bk6q6ntq2] { margin-bottom: 16px; }
.uf-field.tag-field:last-of-type[b-0bk6q6ntq2] { margin-bottom: 0; }
.uf-field.tag-field > label[b-0bk6q6ntq2] { font-size: 13px; padding-top: 9px; }

.uf-footer-right[b-0bk6q6ntq2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Solid red DELETE button — matches GST's filled delete treatment */
.tag-btn-delete[b-0bk6q6ntq2] {
    background: #e5484d;
    border-color: #e5484d;
    color: #fff;
}

    .tag-btn-delete:hover[b-0bk6q6ntq2] {
        background: #c8393d;
    }

    .tag-btn-delete:disabled[b-0bk6q6ntq2] {
        opacity: 0.65;
        cursor: default;
    }

@media (max-width: 540px) {
    .uf-field.tag-field[b-0bk6q6ntq2] { grid-template-columns: 1fr; gap: 4px; }
    .uf-field.tag-field > label[b-0bk6q6ntq2] { padding-top: 0; }
}
/* /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;
}

/* ── Document preview popup — matches legacy myModal look: id/date top-left,
   zoom+close/size top-right, colored ext badge, big centered image,
   Previous/Next only (no side arrows). ── */
.dg-preview-overlay[b-tyvb7jqz8m] {
    position: fixed;
    inset: 0;
    background: rgba(15,20,30,.55);
    z-index: 1200;
}

.dg-preview-modal[b-tyvb7jqz8m] {
    position: fixed;
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, 94vw);
    height: 88vh;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
    z-index: 1201;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dg-preview-hdr[b-tyvb7jqz8m] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 14px 6px;
    flex-shrink: 0;
}

.dg-preview-hdr-left[b-tyvb7jqz8m] {
    display: flex;
    flex-direction: column;
}

.dg-preview-vnum[b-tyvb7jqz8m] {
    font-size: 14px;
    font-weight: 700;
    color: #1a73c7;
}

.dg-preview-date[b-tyvb7jqz8m] {
    font-size: 11.5px;
    color: #64748b;
}

.dg-preview-hdr-right[b-tyvb7jqz8m] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.dg-preview-icons[b-tyvb7jqz8m] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .dg-preview-icons i[b-tyvb7jqz8m] {
        cursor: pointer;
        color: #6b7280;
        font-size: 15px;
    }

        .dg-preview-icons i:hover[b-tyvb7jqz8m] {
            color: #1a56a7;
        }

        .dg-preview-icons i.dg-preview-x:hover[b-tyvb7jqz8m] {
            color: #c0392b;
        }

.dg-preview-size[b-tyvb7jqz8m] {
    font-size: 11.5px;
    color: #64748b;
}

.dg-preview-badge[b-tyvb7jqz8m] {
    align-self: flex-end;
    margin: 0 14px;
    padding: 2px 10px;
    background: #1ab394;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    border-radius: 2px;
}

.dg-preview-stage[b-tyvb7jqz8m] {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    min-height: 0;
}

.dg-preview-img[b-tyvb7jqz8m] {
    max-width: 100%;
    max-height: 100%;
    transition: transform .12s;
}

.dg-preview-frame[b-tyvb7jqz8m] {
    width: 100%;
    height: 100%;
    border: none;
}

.dg-preview-noimg[b-tyvb7jqz8m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #64748b;
    font-size: 13px;
}

    .dg-preview-noimg i[b-tyvb7jqz8m] {
        font-size: 48px;
        color: #1a56a7;
    }

.dg-preview-ftr[b-tyvb7jqz8m] {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid #e7eaec;
    flex-shrink: 0;
}

.dg-preview-pn[b-tyvb7jqz8m] {
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    background: #fff;
    color: #444;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    cursor: pointer;
}

    .dg-preview-pn:hover:not(:disabled)[b-tyvb7jqz8m] {
        background: #f5f5f5;
    }

    .dg-preview-pn:disabled[b-tyvb7jqz8m] {
        opacity: .4;
        cursor: not-allowed;
    }

@media (max-width: 767px) {
    .dg-preview-modal[b-tyvb7jqz8m] {
        width: 96vw;
        height: 92vh;
        top: 3%;
    }
}

/* ── 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;
}

/* ── VNum cell — two separate click targets:
   • .ch-vnum-dot (small colored square, colored by wColor) opens the
     voucher report popup.
   • .ch-vnum-text (the VNum itself) redirects to ChallanEntry for edit. ── */
.ch-vnum-dot[b-d5exzse6n8] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 7px;
    vertical-align: middle;
    cursor: pointer;
}

    .ch-vnum-dot:hover[b-d5exzse6n8] {
        opacity: 0.7;
    }

.ch-vnum-text[b-d5exzse6n8] {
    cursor: pointer;
}

    .ch-vnum-text:hover[b-d5exzse6n8] {
        color: #16a085;
    }

/* ── Voucher report popup — opened from the VNum dot in the details grid. Same
   fixed-overlay + centered-panel convention as QItem.razor's .ql-voucher-modal*. ── */
.ch-voucher-modal-overlay[b-d5exzse6n8] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1000;
}

.ch-voucher-modal[b-d5exzse6n8] {
    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;
}

.ch-voucher-modal-hdr[b-d5exzse6n8] {
    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;
}

.ch-voucher-modal-x[b-d5exzse6n8] {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #888;
}

.ch-voucher-modal-body[b-d5exzse6n8] {
    padding: 14px 16px;
}

/* ── 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;
}

.ch-party-link[b-d5exzse6n8] {
    cursor: pointer;
}

    .ch-party-link:hover[b-d5exzse6n8] {
        color: #16a085;
    }

/* ── 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;
}
    .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;
}

.itb-grid-table[b-e1uf9e3hb8] {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    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;
    }
}

.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%;*/
    min-width: 200px;
}

.itb-grid-table td.num[b-e1uf9e3hb8],
.itb-grid-table tfoot td.num[b-e1uf9e3hb8] {
    white-space: nowrap;
}

@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) ── */

.ql-summary-table thead tr:first-child th.num[b-grsw0ihapw] {
    text-align: center !important;
}

.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;
}

/* ── Summary 1/2/3 grid (api/qi/items/summary) — # · Party/Ledger · however
   many transaction-type groups (PUR/SLS/DRN/CRN/OTR, or any future one) the
   API actually returns, each with whatever sub-columns it sent (usually
   Qty/Rate/Amt). Column count is NOT fixed at compile time, so unlike
   .ql-monthly-table/.ql-ledgersum-table above this can't use nth-child for
   widths or separators — widths come from the <colgroup> emitted in the
   markup (computed from however many groups/sub-columns exist that render),
   and separators use an explicit "ql-grp-end" class applied to the last
   sub-column of every group instead. Same sticky 2-row header + compact
   padding as the other dynamic-ish grids on this page, so the visual style
   matches even though the column set can't be. ── */
.ql-summary-table[b-grsw0ihapw] {
    table-layout: fixed;
}

.ql-summary-table thead th.num[b-grsw0ihapw] {
    text-align: center; /* group label row */
}

.ql-summary-table thead tr:last-child th.num[b-grsw0ihapw] {
    text-align: right; /* Qty/Rate/Amt sub-headers */
}

.ql-summary-table tbody td.ql-ledger-name[b-grsw0ihapw] {
    white-space: normal;
}

.ql-summary-table thead th[b-grsw0ihapw],
.ql-summary-table tbody td[b-grsw0ihapw] {
    padding: 4px 10px;
}

.ql-summary-table thead tr:first-child th[b-grsw0ihapw] {
    top: 0;
    z-index: 2;
}

.ql-summary-table thead tr:last-child th[b-grsw0ihapw] {
    top: 26px;
    z-index: 1;
}

/* Silver separators: after # and Party/Ledger (fixed columns, so nth-child
   is safe here), and after the last sub-column of every group (the
   "ql-grp-end" class applied in the markup, since group boundaries are
   dynamic). :last-child strips the line at the true right edge either way. */
.ql-summary-table thead th:nth-child(1)[b-grsw0ihapw],
.ql-summary-table thead th:nth-child(2)[b-grsw0ihapw],
.ql-summary-table tbody td:nth-child(1)[b-grsw0ihapw],
.ql-summary-table tbody td:nth-child(2)[b-grsw0ihapw],
.ql-summary-table tfoot td:first-child[b-grsw0ihapw] {
    border-right: 1px solid silver;
}

.ql-summary-table .ql-grp-end[b-grsw0ihapw] {
    border-right: 1px solid silver;
}

.ql-summary-table thead th:last-child[b-grsw0ihapw],
.ql-summary-table tbody td:last-child[b-grsw0ihapw],
.ql-summary-table tfoot td:last-child[b-grsw0ihapw] {
    border-right: none;
}

/* 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;
}


.ql-bal-label[b-grsw0ihapw] {
    font-weight: 700;
}

.ql-summary-table tfoot[b-grsw0ihapw] {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

    .ql-summary-table tfoot td[b-grsw0ihapw] {
        font-weight: 700;
    }

.ql-summary-table[b-grsw0ihapw] {
    border-collapse: separate;
    border-spacing: 0;
}

    /* Both header rows stay together */
    .ql-summary-table thead[b-grsw0ihapw] {
        position: sticky;
        top: 0;
        z-index: 10;
    }

        /* Header cells */
        .ql-summary-table thead th[b-grsw0ihapw] {
            position: static;
        }

@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.
   ===================================================================== */

/* mu-pager sits inside .bspl-footer-right — 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,
   same override as QLedger.razor.css. */
.bspl-footer-right[b-bgzookcsj0] {
    font-size: inherit;
    color: inherit;
}

/* ── 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: #1ab99a;
    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: #1ab99a;
    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: #1ab99a;
    border-color: #1ab99a;
    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: #eafaf6;
        color: #1ab99a;
        border-color: #1ab99a;
    }

/* ── 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;
    font-size: 12px;
}

.mu-table thead th.qg-drcr[b-bgzookcsj0] {
    color: #fff;
}

.mu-table tbody td.qg-drcr[b-bgzookcsj0] {
    color: #64748b;
}

/* 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: #fbfcfe;
    border: 1px solid #dde3ed;
    border-radius: 6px;
    font-size: 13px;
    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-btn[b-bgzookcsj0] {
    display: inline-flex;
    width: 10px;
    height: 10px;
    min-width: 10px;
    background-color: #1ab99a !important;
    border: none;
    border-radius: 2px;
    flex: 0 0 10px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 0;
    appearance: none;
    -webkit-appearance: none;
}

    .qg-vsquare-btn:hover[b-bgzookcsj0] {
        opacity: 0.75;
    }

.qg-vnum[b-bgzookcsj0] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #1a56a7;
    text-decoration: none;
    font-weight: 500;
}

    .qg-vnum:hover[b-bgzookcsj0] {
        text-decoration: underline;
    }

/* Type badge — colour set inline per-row via TypeColor() */
.qg-vtype[b-bgzookcsj0] {
    font-weight: 500;
    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: card, header, toggle, table — matches QLedger's
   .ql-balance treatment (flat card, no shadow, sizes to its own content
   instead of stretching to match the main card's height). ── */
.qg-balance[b-bgzookcsj0] {
    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%;
}

.qg-bal-hdr[b-bgzookcsj0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
}

.qg-bal-toggle[b-bgzookcsj0] {
    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;
}

    .qg-bal-toggle:hover[b-bgzookcsj0] {
        background: #f1f5f9;
    }

    .qg-bal-toggle svg[b-bgzookcsj0] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        transition: transform 0.15s;
    }

.qg-bal-table[b-bgzookcsj0] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .qg-bal-table th[b-bgzookcsj0],
    .qg-bal-table td[b-bgzookcsj0] {
        padding: 10px 12px;
        white-space: nowrap;
        overflow: visible;
        font-size: 13px;
        border-bottom: 1px solid #eee;
        background: #fff;
    }

    .qg-bal-table th[b-bgzookcsj0] {
        text-align: left;
        color: #6b7280;
        font-weight: 500;
        background: #fafafa;
    }

        .qg-bal-table th.num[b-bgzookcsj0], .qg-bal-table td.num[b-bgzookcsj0] {
            text-align: right;
            font-variant-numeric: tabular-nums;
            width: 34%;
        }

    .qg-bal-table td:first-child[b-bgzookcsj0] {
        width: 32%;
    }

        .qg-bal-table td.cr[b-bgzookcsj0] {
            color: #800000;
        }

.qg-bal-closing td[b-bgzookcsj0] {
    font-weight: 700;
    background: #fff;
    border-top: 2px solid #dcdcdc;
    border-bottom: none;
}

/* 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: #1ab99a;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* GO TO quick-action item — matches QLedger's .ql-qa-item flat menu-row
   treatment (no border/background until hover) instead of a boxed button. */
.qg-goto-item[b-bgzookcsj0] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
    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;
}

    .qg-goto-item:hover[b-bgzookcsj0] {
        background: #f1f5f9;
    }

    .qg-goto-item i[b-bgzookcsj0] {
        width: 16px;
        text-align: center;
        color: #64748b;
        font-size: 13px;
    }

.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: #1ab99a;
    }

    .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: #1ab99a;
    }

    .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] {
    display: flex;
    flex-direction: column;
    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;
    }

/* Sticky header — column headers stay pinned at the top of
   .mu-table-wrap instead of scrolling away with the rows, matching
   QLedger's grid behaviour. Needs an opaque background (set per-table
   via the global .mu-table thead th rule) since content scrolls under it. */
.mu-table thead th[b-bgzookcsj0] {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Ensure wide tables scroll inside the card, never the page. */
.mu-table-wrap[b-bgzookcsj0] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 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: #1ab99a;
    font-size: 20px;
    font-weight: 100;
}

.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;
}

/* Added by Gaurav for padding fix — same block as QLedger.razor.css. */
.gains-layout[b-bgzookcsj0] { /* wrapper holding sidebar + page */
    display: flex;
}

.gains-sidebar[b-bgzookcsj0] {
    flex: 0 0 auto; /* own width */
}

.gains-content[b-bgzookcsj0] { /* where @Body renders */
    flex: 1 1 auto;
    min-width: 0; /* IMPORTANT — lets tables shrink instead of overflow */
}

/* =====================================================================
   RESPONSIVE PATCH — phones & small tablets. Mirrors QLedger's phone
   breakpoint: bigger touch targets, wrapping tabs/sections, mobile-safe
   popups (balance popup + advanced group search popup are QG-specific
   affordances QLedger doesn't have, so they get their own mobile rules
   here instead of a 1:1 class copy).
   ===================================================================== */
@media (max-width: 640px) {
    /* Tabs/sections: allow wrap, bigger touch */
    .qg-tabs[b-bgzookcsj0] {
        flex-wrap: wrap;
    }

    .qg-tab[b-bgzookcsj0],
    .qg-section[b-bgzookcsj0] {
        min-height: 44px;
        padding: 10px 14px;
    }

    /* Balance toggle: finger-size */
    .qg-bal-toggle[b-bgzookcsj0] {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        align-items: center;
    }

    .qg-bal-table th[b-bgzookcsj0],
    .qg-bal-table td[b-bgzookcsj0] {
        padding: 8px 8px;
        font-size: 12px;
    }

    /* Balance panel header title smaller page title */
    .qg-title[b-bgzookcsj0] {
        font-size: 20px;
    }

    /* "..." balance popup: full-width on small screens */
    .qg-bal-popup[b-bgzookcsj0] {
        width: calc(100vw - 24px);
    }

    /* "G" advanced group search popup: full-width, stack the alpha
       filters and the list/tree panes instead of side-by-side. */
    .qg-gp-popup[b-bgzookcsj0] {
        max-width: calc(100vw - 16px);
        max-height: 92vh;
    }

    .qg-gp-filters[b-bgzookcsj0] {
        flex-wrap: wrap;
    }

        .qg-gp-filters .uf-input[b-bgzookcsj0] {
            width: auto;
            flex: 1 1 100%;
        }

    .qg-gp-panes[b-bgzookcsj0] {
        flex-direction: column;
        max-height: none;
    }

    .qg-gp-tree[b-bgzookcsj0] {
        border-left: none;
        border-top: 1px solid #e2e8f0;
    }
}

/* ── Print: clean grid-only output, matching QLedger's print rules ── */
@media print {
    .mu-hdr-actions[b-bgzookcsj0],
    .qg-sections[b-bgzookcsj0],
    .mu-toolbar[b-bgzookcsj0],
    .mu-drawer-overlay[b-bgzookcsj0],
    .uf-overlay[b-bgzookcsj0],
    .mu-foot[b-bgzookcsj0],
    .bspl-foot-btn[b-bgzookcsj0],
    .qg-bal-toggle[b-bgzookcsj0] {
        display: none !important;
    }

    .qg-body[b-bgzookcsj0] {
        display: block;
    }

    .qg-balance[b-bgzookcsj0] {
        width: 100%;
        margin-top: 12px;
        page-break-inside: avoid;
    }

    .mu-table-wrap[b-bgzookcsj0] {
        max-height: none !important;
        overflow: visible !important;
    }

    .mu-table thead th[b-bgzookcsj0] {
        position: static !important;
    }

    .mu-table tfoot td[b-bgzookcsj0] {
        position: static !important;
    }

    .mu-card[b-bgzookcsj0] {
        border: none;
        box-shadow: none;
    }
}
/* /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-btn[b-gba25bxpef] {
    display: inline-flex;
    width: 10px;
    height: 10px;
    min-width: 10px;
    background-color: #1ab99a !important;
    border: none;
    border-radius: 2px;
    flex: 0 0 10px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 0;
    appearance: none;
    -webkit-appearance: none;
}

    .ql-vsquare-btn:hover[b-gba25bxpef] {
        opacity: 0.75;
    }

.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;
        }
/* ── Graph tab (Highcharts) — dark card matching old CB/Trans chart ── */
.ql-graph-card[b-gba25bxpef] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 20px;
}

.ql-graph-title[b-gba25bxpef] {
    color: #1a2537;
}

/* ── Ledger Print tab (in-page PDF viewer) — was referenced in markup but
   never actually added to this file, so the <iframe> had zero matching CSS
   and fell back to the browser's default 300x150px size. ── */
.ql-ledgerprint-wrap[b-gba25bxpef] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 60vh;
}

.ql-ledgerprint-toolbar[b-gba25bxpef] {
    padding: 10px 14px;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcfe;
}

.ql-ledgerprint-frame[b-gba25bxpef] {
    flex: 1;
    width: 100%;
    border: none;
    min-height: 65vh;
}
.ql-vsquare-btn[b-gba25bxpef] {
    display: inline-flex;
    width: 10px;
    height: 10px;
    min-width: 10px;
    background-color: #1ab99a; /* fallback if VColor missing — no longer !important */
    border: none;
    border-radius: 2px;
    flex: 0 0 10px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 0;
    appearance: none;
    -webkit-appearance: none;
}

    .ql-vsquare-btn:hover[b-gba25bxpef] {
        opacity: 0.75;
    }
/* /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 */
}

.ql-vnum-cell[b-j7xjuzm8zh] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ql-vsquare-btn[b-j7xjuzm8zh] {
    display: inline-flex;
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.mu-table td:has(.ql-vnum-cell)[b-j7xjuzm8zh] {
    vertical-align: middle;
}

/* /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/Accounting/AccVoucher.razor.rz.scp.css */
/* =====================================================
   AccVoucher.razor.css

   Rebuilt to match the "Voucher entry form creation" chat's shared,
   restored GAINS-theme mockup (voucher_entry_form_gains_restored.html) —
   a clean two-pane card layout (collapsible Recent-vouchers sidebar +
   dark-green header + underline tabs + inset TDS/GST blocks + a plain
   line-items grid), not the earlier dense ERP-grid look this file
   previously matched. Class names below mirror the mockup's own
   gfield/ginput/gbal-toggle/etc. naming 1:1 (just under an "avc-" prefix,
   since Blazor CSS isolation scopes classes per-file) so the two stay easy
   to compare side by side.
   ===================================================== */

.avc-page[b-1ovu5oocw6] {
    --avc-accent: #1AB99A;
    --avc-accent-dark: #0ea384;
    --avc-accent-bg: #f0fdf9;
    --avc-accent-border: #a7f3d0;
    --avc-header-bg: #0a2a1e;
    --avc-border: #e5e7eb;
    --avc-border-soft: #f3f4f6;
    --avc-text: #111827;
    --avc-muted: #6b7280;
    --avc-muted-light: #9ca3af;
    --avc-danger: #b91c1c;
    --avc-danger-bg: #fef2f2;
    --avc-danger-border: #fecaca;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: var(--avc-text);
    padding: 16px;
}

.avc-shell[b-1ovu5oocw6] {
    max-width: 1300px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 20px;
    border: 0.5px solid var(--avc-border);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

/* ── Left: collapsible Recent vouchers sidebar ── */
.avc-sidebar[b-1ovu5oocw6] {
    width: 250px;
    flex-shrink: 0;
    background: #fafafa;
    border-right: 0.5px solid var(--avc-border);
    display: flex;
    flex-direction: column;
    transition: width .18s ease;
}

.avc-sidebar-collapsed[b-1ovu5oocw6] {
    width: 56px;
}

.avc-sidebar-hdr[b-1ovu5oocw6] {
    padding: 1rem 1.1rem .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.avc-sidebar-label[b-1ovu5oocw6] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--avc-muted);
    white-space: nowrap;
    overflow: hidden;
}

.avc-sidebar-toggle[b-1ovu5oocw6] {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: 1px solid var(--avc-border);
    border-radius: 7px;
    background: #fff;
    color: var(--avc-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
}

    .avc-sidebar-toggle:hover[b-1ovu5oocw6] {
        color: var(--avc-accent);
        border-color: var(--avc-accent);
    }

.avc-recent-list[b-1ovu5oocw6] {
    flex: 1;
    overflow-y: auto;
    padding: 0 .6rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--avc-accent) #f3f4f6;
}

    .avc-recent-list[b-1ovu5oocw6]::-webkit-scrollbar {
        width: 4px;
    }

    .avc-recent-list[b-1ovu5oocw6]::-webkit-scrollbar-track {
        background: #f3f4f6;
        border-radius: 4px;
    }

    .avc-recent-list[b-1ovu5oocw6]::-webkit-scrollbar-thumb {
        background: var(--avc-accent);
        border-radius: 4px;
    }

.avc-recent-empty[b-1ovu5oocw6] {
    color: var(--avc-muted-light);
    font-size: 13px;
    padding: 1rem .25rem;
    text-align: center;
}

.avc-recent-card[b-1ovu5oocw6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #ffffff;
    border: 0.5px solid var(--avc-border);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
    margin-bottom: 6px;
}

    .avc-recent-card:hover[b-1ovu5oocw6],
    .avc-recent-card.active[b-1ovu5oocw6] {
        border-color: var(--avc-accent);
        background: var(--avc-accent-bg);
    }

.avc-avatar[b-1ovu5oocw6] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.avc-avatar-tint[b-1ovu5oocw6] {
    background: var(--avc-accent-bg);
    border: 0.5px solid var(--avc-accent-border);
    color: #065f46;
}

.avc-avatar-solid[b-1ovu5oocw6] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--avc-accent);
    color: #fff;
    font-size: 14px;
}

.avc-recent-main[b-1ovu5oocw6] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.avc-recent-vno[b-1ovu5oocw6] {
    font-size: 12px;
    font-weight: 600;
    color: var(--avc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avc-recent-sub[b-1ovu5oocw6] {
    font-size: 10px;
    color: var(--avc-muted-light);
}

.avc-status-badge[b-1ovu5oocw6] {
    flex-shrink: 0;
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
}

.avc-status-approved[b-1ovu5oocw6] {
    background: var(--avc-accent-bg);
    color: #065f46;
    border: 0.5px solid var(--avc-accent-border);
}

.avc-status-pending[b-1ovu5oocw6] {
    background: #fffbeb;
    color: #92400e;
    border: 0.5px solid #fde68a;
}

.avc-status-draft[b-1ovu5oocw6] {
    background: #f3f4f6;
    color: #374151;
    border: 0.5px solid var(--avc-border);
}

.avc-status-rejected[b-1ovu5oocw6] {
    background: var(--avc-danger-bg);
    color: var(--avc-danger);
    border: 0.5px solid var(--avc-danger-border);
}

/* ── Main column ── */
.avc-main[b-1ovu5oocw6] {
    flex: 1;
    min-width: 0;
}

.avc-gains-header[b-1ovu5oocw6] {
    background: var(--avc-header-bg);
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 14px;
}

.avc-gains-icon[b-1ovu5oocw6] {
    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: var(--avc-accent);
    flex-shrink: 0;
}

.avc-gains-eyebrow[b-1ovu5oocw6] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--avc-accent);
    margin-bottom: 4px;
}

.avc-gains-title[b-1ovu5oocw6] {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.avc-gains-vid[b-1ovu5oocw6] {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, .6);
}

/* ── Tabs (Entry / View / Audit / Documents / CrossLink) — underline style ── */
.avc-gains-tabs[b-1ovu5oocw6] {
    display: flex;
    gap: 4px;
    padding: 0 1.25rem;
    border-bottom: 0.5px solid var(--avc-border-soft);
    background: #fafafa;
    /* No horizontal scroll on desktop/web — all 5 tabs fit on one line at
       normal widths. Scrolling is re-enabled only under the 900px mobile
       breakpoint below, where narrow viewports genuinely need it. */
    overflow-x: visible;
}

.avc-gains-tab[b-1ovu5oocw6] {
    border: none;
    background: none;
    padding: 12px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    color: var(--avc-muted-light);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: .12s;
}

    .avc-gains-tab:hover[b-1ovu5oocw6] {
        color: var(--avc-header-bg);
    }

    .avc-gains-tab.active[b-1ovu5oocw6] {
        color: var(--avc-header-bg);
        border-bottom-color: var(--avc-accent);
    }

.avc-gains-body[b-1ovu5oocw6] {
    padding: 1.75rem 2rem;
}

.avc-panel-lead[b-1ovu5oocw6] {
    font-size: 13px;
    color: var(--avc-muted);
    margin: 0 0 16px;
}

.avc-empty-block[b-1ovu5oocw6] {
    color: var(--avc-muted-light);
    font-size: 14px;
    padding: 2rem 0;
    text-align: center;
}

/* ── Field grid (Voucher type/no/date/reference, Audit/Documents fields) ── */
.avc-gfield-grid[b-1ovu5oocw6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.avc-gfield[b-1ovu5oocw6] {
    display: block;
    margin-bottom: 1.1rem;
}

.avc-gfield-grid .avc-gfield[b-1ovu5oocw6] {
    margin-bottom: 0;
}

.avc-gfield-block:last-child[b-1ovu5oocw6] {
    margin-bottom: 0;
}

.avc-gfield span[b-1ovu5oocw6] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--avc-muted);
    margin-bottom: 7px;
}

.avc-ginput[b-1ovu5oocw6] {
    width: 100%;
    height: 44px;
    border: 1.5px solid var(--avc-border);
    border-radius: 12px;
    font-size: 14px;
    color: var(--avc-text);
    background: #f9fafb;
    outline: none;
    font-family: inherit;
    padding: 0 12px;
    box-sizing: border-box;
}

.avc-ginput:hover[b-1ovu5oocw6] {
    border-color: #d1d5db;
}

.avc-ginput:focus[b-1ovu5oocw6] {
    border-color: var(--avc-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26, 185, 154, .12);
}

/* VoucherTypeDropdown renders its own <select> inside a CHILD component's
   template, so a plain (scoped) ".avc-ginput" rule here would never reach
   it — Blazor's CSS isolation only auto-scopes elements written directly
   in THIS .razor file. ::deep is required to style anything rendered by a
   child component (same reasoning DepotDropdown's own
   ".avc-depot-inline ::deep select" rule elsewhere in this app needs it). */
.avc-vtype-field[b-1ovu5oocw6]  select {
    width: 100%;
    height: 44px;
    border: 1.5px solid var(--avc-border);
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--avc-text);
    background: #f9fafb;
    outline: none;
    padding: 0 12px;
    box-sizing: border-box;
}

    .avc-vtype-field[b-1ovu5oocw6]  select:hover {
        border-color: #d1d5db;
    }

    .avc-vtype-field[b-1ovu5oocw6]  select:focus {
        border-color: var(--avc-accent);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(26, 185, 154, .12);
    }

.avc-ginput-white[b-1ovu5oocw6] {
    background: #fff;
}

.avc-ginput[type="number"][b-1ovu5oocw6]::-webkit-inner-spin-button,
.avc-ginput[type="number"][b-1ovu5oocw6]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.avc-ginput[type="number"][b-1ovu5oocw6] {
    -moz-appearance: textfield;
}

.avc-gtextarea[b-1ovu5oocw6] {
    width: 100%;
    border: 1.5px solid var(--avc-border);
    border-radius: 12px;
    font-size: 14px;
    color: var(--avc-text);
    background: #f9fafb;
    padding: 10px 12px;
    font-family: inherit;
    resize: none;
    outline: none;
    box-sizing: border-box;
}

.avc-gtextarea:focus[b-1ovu5oocw6] {
    border-color: var(--avc-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26, 185, 154, .12);
}

/* ── Inset TDS / GST blocks ── */
.avc-inset-block[b-1ovu5oocw6] {
    background: #f9fafb;
    border: 0.5px solid var(--avc-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.avc-inset-hdr[b-1ovu5oocw6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.avc-inset-title[b-1ovu5oocw6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--avc-text);
}

    .avc-inset-title i[b-1ovu5oocw6] {
        font-size: 16px;
        color: var(--avc-accent);
    }

.avc-pill-group[b-1ovu5oocw6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.avc-pill-label[b-1ovu5oocw6] {
    font-size: 12px;
    color: var(--avc-muted-light);
    margin-right: 2px;
}

.avc-pill[b-1ovu5oocw6] {
    border: 1px solid var(--avc-border);
    background: #fff;
    color: var(--avc-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
}

    .avc-pill.active[b-1ovu5oocw6] {
        background: var(--avc-accent);
        color: #fff;
        border-color: var(--avc-accent);
    }

.avc-inset-grid[b-1ovu5oocw6] {
    display: grid;
    gap: 12px;
}

.avc-inset-grid-3[b-1ovu5oocw6] {
    grid-template-columns: 1.5fr 1fr 1fr;
}

.avc-readout[b-1ovu5oocw6] {
    height: 44px;
    border: 1.5px solid var(--avc-border);
    border-radius: 12px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--avc-text);
    box-sizing: border-box;
}

.avc-readout-muted[b-1ovu5oocw6] {
    color: var(--avc-muted-light);
}

.avc-readout-err[b-1ovu5oocw6] {
    color: var(--avc-danger);
}

.avc-inset-note[b-1ovu5oocw6] {
    font-size: 11px;
    color: var(--avc-muted-light);
    margin-top: 8px;
}

/* ── Forex checkbox (HSN/GST block header) ── */
.avc-forex-check[b-1ovu5oocw6] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--avc-muted);
    cursor: pointer;
    white-space: nowrap;
}

    .avc-forex-check input[type="checkbox"][b-1ovu5oocw6] {
        width: 14px;
        height: 14px;
        cursor: pointer;
    }

/* ── Documents tab — attached-files section (info strip / Tag File /
   Choose File / grid) — same fields as ChallanEntry.razor's own che-doc-*
   block, restyled to this page's own avc-* theme instead of sharing CSS.
   The info strip itself now reuses .avc-audit-strip/-cell/-divider (see
   below) rather than its own one-off layout. */

.avc-doc-tagrow[b-1ovu5oocw6] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.avc-doc-tag-hint[b-1ovu5oocw6] {
    font-size: 12px;
    color: var(--avc-accent-dark);
    font-style: italic;
}

.avc-doc-uploadrow[b-1ovu5oocw6] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.avc-doc-file-btn[b-1ovu5oocw6] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    background: #fff;
    border: 1.5px solid var(--avc-border);
    border-radius: 8px;
    padding: 8px 14px;
    color: var(--avc-text);
    cursor: pointer;
    white-space: nowrap;
}

    .avc-doc-file-btn:hover[b-1ovu5oocw6] {
        border-color: var(--avc-accent);
        color: var(--avc-accent-dark);
    }

    /* InputFile renders its own <input type="file"> inside a CHILD
       component's template, so this needs ::deep — same reasoning
       .avc-vtype-field ::deep select above needs it for VoucherTypeDropdown. */
    .avc-doc-file-btn[b-1ovu5oocw6]  input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
    }

.avc-doc-file-name[b-1ovu5oocw6] {
    font-size: 12px;
    color: var(--avc-muted);
}

/* DocumentTypeDropdown renders its own <select class="dtd-select @CssClass">
   inside a child component too — reaching it by CssClass alone (no local
   ancestor element of ours to hang ::deep off) needs a standalone ::deep
   rule, same as ChallanEntry.razor.css's own "::deep .che-doc-type". */
[b-1ovu5oocw6] .avc-doc-type-select {
    width: 100%;
    height: 44px;
    border: 1.5px solid var(--avc-border);
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--avc-text);
    background: #fff;
    outline: none;
    padding: 0 12px;
    box-sizing: border-box;
}

.avc-doc-save-btn[b-1ovu5oocw6] {
    width: 100%;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--avc-accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

    .avc-doc-save-btn:hover[b-1ovu5oocw6] {
        background: var(--avc-accent-dark);
    }

    .avc-doc-save-btn:disabled[b-1ovu5oocw6] {
        opacity: .5;
        cursor: not-allowed;
    }

.avc-doc-msg[b-1ovu5oocw6] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
}

.avc-doc-msg-ok[b-1ovu5oocw6] {
    color: #065f46;
    background: var(--avc-accent-bg);
}

.avc-doc-msg-err[b-1ovu5oocw6] {
    color: var(--avc-danger);
    background: var(--avc-danger-bg);
}

/* Documents grid — a "proper", fully-bordered table with a solid navy
   header band, matching the legacy screen's own grid look (and the same
   #306B9C convention Daybook's grid already uses for ".db-table th" in
   masters-forms.css) rather than the softer borderless .avc-lines-table
   style used for the Debit/Credit rows above. */
.avc-doc-table[b-1ovu5oocw6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 4px;
}

    .avc-doc-table th[b-1ovu5oocw6] {
        background: #306B9C;
        color: #fff;
        font-weight: 600;
        font-size: 12px;
        text-align: left;
        padding: 8px 10px;
        border: 1px solid #285a82;
    }

    .avc-doc-table td[b-1ovu5oocw6] {
        padding: 8px 10px;
        border: 1px solid var(--avc-border);
        color: var(--avc-text);
    }

    .avc-doc-table tbody tr:nth-child(even)[b-1ovu5oocw6] {
        background: #f9fafb;
    }

    .avc-doc-table .avc-icon-btn[b-1ovu5oocw6] {
        height: 30px;
        width: 30px;
    }

/* ── Line items grid ── */
.avc-lines-section[b-1ovu5oocw6] {
    border-top: 0.5px solid var(--avc-border-soft);
    padding-top: 20px;
    margin-bottom: 20px;
}

.avc-lines-toolbar[b-1ovu5oocw6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.avc-lines-title[b-1ovu5oocw6] {
    font-size: 13px;
    font-weight: 600;
    color: var(--avc-text);
}

/* Caps the line-items table's own height so adding rows scrolls inside this
   box instead of growing the whole page — otherwise the page keeps getting
   taller with every row and the sticky Save bar at the bottom needs the
   entire page scrolled to reach, defeating the point of it being sticky. */
.avc-lines-scroll[b-1ovu5oocw6] {
    max-height: 290px;
    overflow-y: auto;
}

.avc-lines-table[b-1ovu5oocw6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}

    .avc-lines-table thead th[b-1ovu5oocw6] {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 1;
    }

    .avc-lines-table th[b-1ovu5oocw6] {
        text-align: left;
        font-weight: 600;
        font-size: 11px;
        color: var(--avc-muted);
        padding: 0 8px 10px;
    }

    .avc-lines-table td[b-1ovu5oocw6] {
        padding: 8px 8px;
        border-bottom: 0.5px solid var(--avc-border-soft);
    }

.avc-lines-input[b-1ovu5oocw6],
.avc-lines-table[b-1ovu5oocw6]  .avc-lines-input {
    width: 100%;
    height: 42px;
    border: 1.5px solid var(--avc-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--avc-text);
    background: #f9fafb;
    outline: none;
    font-family: inherit;
    padding: 0 10px;
    box-sizing: border-box;
}

    .avc-lines-input:focus[b-1ovu5oocw6],
    .avc-lines-table[b-1ovu5oocw6]  .avc-lines-input:focus {
        border-color: var(--avc-accent);
        background: #fff;
        box-shadow: 0 0 0 2px rgba(26, 185, 154, .12);
    }

.avc-lines-input[type="number"][b-1ovu5oocw6]::-webkit-inner-spin-button,
.avc-lines-input[type="number"][b-1ovu5oocw6]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.avc-lines-input[type="number"][b-1ovu5oocw6] {
    -moz-appearance: textfield;
}

.avc-icon-btn[b-1ovu5oocw6] {
    height: 42px;
    width: 42px;
    border: 1.5px solid var(--avc-border);
    border-radius: 8px;
    background: #fff;
    color: var(--avc-muted-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .avc-icon-btn:hover[b-1ovu5oocw6] {
        color: var(--avc-danger);
        border-color: var(--avc-danger-border);
    }

.avc-closing-muted[b-1ovu5oocw6] {
    color: var(--avc-muted-light);
}

.avc-closing-neg[b-1ovu5oocw6] {
    color: var(--avc-danger);
    font-weight: 600;
}

.avc-lines-hint[b-1ovu5oocw6] {
    font-size: 11px;
    color: var(--avc-muted-light);
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Totals bar ── */
.avc-totals-bar[b-1ovu5oocw6] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    border-top: 0.5px solid var(--avc-border-soft);
    padding-top: 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #374151;
    flex-wrap: wrap;
}

    .avc-totals-bar strong[b-1ovu5oocw6] {
        color: var(--avc-text);
        font-weight: 700;
    }

.avc-balance-pill[b-1ovu5oocw6] {
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}

.avc-balance-ok[b-1ovu5oocw6] {
    background: var(--avc-accent-bg);
    color: #065f46;
    border: 0.5px solid var(--avc-accent-border);
}

.avc-balance-bad[b-1ovu5oocw6] {
    background: var(--avc-danger-bg);
    color: var(--avc-danger);
    border: 0.5px solid var(--avc-danger-border);
}

.avc-validation-msg[b-1ovu5oocw6] {
    margin: -6px 0 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--avc-danger);
}

/* ── Buttons ── */
/* Save + New/Delete voucher — New/Delete only render for a voucher that
   already exists on the backend (edit mode), see the Entry tab markup. */
/* Now a persistent bar shown on every tab (not just Entry) — sticky to the
   bottom of the viewport and kept compact (38px buttons instead of the old
   48px) so it doesn't eat into the tab content above it while still being
   reachable without scrolling. */
.avc-action-row[b-1ovu5oocw6] {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: #fff;
    padding: 10px 2rem;
    border-top: 1px solid var(--avc-border);
    box-shadow: 0 -2px 8px rgba(15, 23, 42, .06);
}

    .avc-action-row .avc-primary-btn[b-1ovu5oocw6] {
        flex: 1;
        width: auto;
        height: 38px;
        font-size: 13.5px;
    }

    .avc-action-row .avc-outline-btn[b-1ovu5oocw6] {
        height: 38px;
        padding: 0 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    .avc-action-row .avc-danger-btn[b-1ovu5oocw6] {
        height: 38px;
        padding: 0 14px;
        font-size: 13px;
    }

.avc-danger-btn[b-1ovu5oocw6] {
    height: 48px;
    padding: 0 18px;
    border: 1.5px solid var(--avc-danger-border);
    border-radius: 12px;
    background: #fff;
    color: var(--avc-danger);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    white-space: nowrap;
}

    .avc-danger-btn:hover[b-1ovu5oocw6] {
        background: var(--avc-danger-bg);
    }

    .avc-danger-btn:disabled[b-1ovu5oocw6] {
        opacity: .6;
        cursor: not-allowed;
    }

.avc-primary-btn[b-1ovu5oocw6] {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 12px;
    background: var(--avc-accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
}

    .avc-primary-btn:hover[b-1ovu5oocw6] {
        background: var(--avc-accent-dark);
    }

    .avc-primary-btn:active[b-1ovu5oocw6] {
        transform: scale(.99);
    }

    .avc-primary-btn:disabled[b-1ovu5oocw6] {
        opacity: .7;
        cursor: not-allowed;
    }

.avc-outline-btn[b-1ovu5oocw6] {
    height: 38px;
    padding: 0 14px;
    border: 1.5px solid var(--avc-border);
    border-radius: 10px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

    .avc-outline-btn:hover[b-1ovu5oocw6] {
        background: #f9fafb;
        border-color: var(--avc-accent);
    }

/* ── View tab — saved-voucher cards ── */
.avc-view-card[b-1ovu5oocw6] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #ffffff;
    border: 0.5px solid var(--avc-border);
    border-radius: 10px;
    margin-bottom: 10px;
}

.avc-view-card-main[b-1ovu5oocw6] {
    flex: 1;
    min-width: 0;
}

.avc-view-card-top[b-1ovu5oocw6] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    gap: 8px;
}

    .avc-view-card-top strong[b-1ovu5oocw6] {
        font-size: 14px;
        color: var(--avc-text);
    }

.avc-view-card-meta[b-1ovu5oocw6] {
    font-size: 11px;
    color: var(--avc-muted-light);
    white-space: nowrap;
}

.avc-view-lines[b-1ovu5oocw6] {
    width: 100%;
    font-size: 12px;
    margin-bottom: 6px;
    border-collapse: collapse;
}

    .avc-view-lines td[b-1ovu5oocw6] {
        padding: 3px 4px;
    }

    .avc-view-lines td:first-child[b-1ovu5oocw6] {
        color: var(--avc-muted);
    }

.avc-view-narration[b-1ovu5oocw6] {
    font-size: 12px;
    color: var(--avc-muted);
    margin-bottom: 6px;
}

/* Wraps the embedded <VHtml> voucher report (Daybook/ChallanGrid/QItem's own
   real print report, not a hand-rolled summary) so it stays contained and
   scrollable inside its View-tab card instead of sprawling full-page-width. */
.avc-view-report[b-1ovu5oocw6] {
    border: 0.5px solid var(--avc-border);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
    max-height: 480px;
    overflow: auto;
    background: #fff;
}

.avc-view-chips[b-1ovu5oocw6] {
    margin-bottom: 4px;
}

.avc-chip[b-1ovu5oocw6] {
    display: inline-block;
    background: var(--avc-accent-bg);
    color: #065f46;
    border: 0.5px solid var(--avc-accent-border);
    border-radius: 20px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    margin: 2px 4px 2px 0;
}

.avc-view-tax-line[b-1ovu5oocw6] {
    font-size: 11px;
    color: var(--avc-accent);
    margin-top: 2px;
}

.avc-view-card-footer[b-1ovu5oocw6] {
    font-size: 11px;
    color: var(--avc-muted-light);
    margin-top: 4px;
}

/* ── Audit tab strip ── */
.avc-audit-strip[b-1ovu5oocw6] {
    display: flex;
    gap: 0;
    background: #f9fafb;
    border: 0.5px solid var(--avc-border);
    border-radius: 10px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.avc-audit-cell[b-1ovu5oocw6] {
    flex: 1;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .avc-audit-cell i[b-1ovu5oocw6] {
        font-size: 16px;
        color: var(--avc-accent);
        flex-shrink: 0;
    }

    .avc-audit-cell > div:last-child[b-1ovu5oocw6] {
        min-width: 0;
    }

.avc-audit-divider[b-1ovu5oocw6] {
    width: 0.5px;
    background: var(--avc-border);
}

.avc-audit-label[b-1ovu5oocw6] {
    font-size: 10px;
    font-weight: 600;
    color: var(--avc-muted-light);
}

.avc-audit-value[b-1ovu5oocw6] {
    font-size: 12px;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Shared utilities ── */
.text-end[b-1ovu5oocw6] {
    text-align: right;
}

.text-center[b-1ovu5oocw6] {
    text-align: center;
}

/* ── Mobile ── */
@media (max-width: 900px) {
    .avc-shell[b-1ovu5oocw6] {
        flex-direction: column;
        border-radius: 14px;
    }

    .avc-sidebar[b-1ovu5oocw6] {
        width: 100% !important;
        border-right: none;
        border-bottom: 0.5px solid var(--avc-border);
    }

    .avc-sidebar-collapsed .avc-sidebar-hdr[b-1ovu5oocw6] {
        justify-content: flex-end;
    }

    .avc-gfield-grid[b-1ovu5oocw6] {
        grid-template-columns: 1fr;
    }

    .avc-inset-grid-3[b-1ovu5oocw6] {
        grid-template-columns: 1fr;
    }

    .avc-gains-body[b-1ovu5oocw6] {
        padding: 1.25rem;
    }

    .avc-action-row[b-1ovu5oocw6] {
        padding: 10px 1.25rem;
    }

    .avc-gains-tabs[b-1ovu5oocw6] {
        overflow-x: auto;
    }
}
/* /Components/Pages/Transactions/Voucher/Inventory/ChallanEntry.razor.rz.scp.css */
/* =====================================================
   ChallanEntry.razor.css
   Re-skinned to match InvVoucher.razor.css's design system
   (GAINS teal palette, rounded cards, uppercase field labels,
   pill tabs, fixed bottom action bar).
   ===================================================== */

.che-page[b-hl6fddptrl] {
    --che-accent: #1AB99A;
    --che-accent-dark: #0d9480;
    --che-accent-bg: #eafbf6;
    --che-bg: #ffffff;
    --che-border: #e2e8f0;
    --che-border-strong: #cbd5e1;
    --che-text: #1e293b;
    --che-muted: #64748b;
    --che-muted-light: #94a3b8;
    --che-danger: #dc2626;
    --che-danger-bg: #fef2f2;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: var(--che-text);
    background: var(--che-bg);
    padding: 12px 12px 76px;
    font-size: 13px;
}

/* ── Tabs (Voucher / aUdit / dOcuments / ...) — underline style ── */
.che-tabs[b-hl6fddptrl] {
    display: flex;
    gap: 4px;
    margin: 10px 0 12px;
    border-bottom: 2px solid var(--che-border);
}

.che-tab[b-hl6fddptrl] {
    padding: 9px 18px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .2px;
    background: transparent;
    color: var(--che-muted);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: .12s;
}

    .che-tab:hover[b-hl6fddptrl] {
        color: var(--che-accent-dark);
    }

    .che-tab.active[b-hl6fddptrl] {
        color: var(--che-accent-dark);
        border-bottom-color: var(--che-accent);
    }

/* ── Title-bar rail toggles (Recent/Photo hide-show) ── */
.che-rail-toggle[b-hl6fddptrl] {
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    background: #fff;
    color: var(--che-text);
    border: 1.5px solid var(--che-border-strong);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: .12s;
}

    .che-rail-toggle:hover[b-hl6fddptrl] {
        border-color: var(--che-accent);
        color: var(--che-accent-dark);
    }

/* ── Collapsed-rail "show" tab — thin strip that reopens a hidden panel ── */
.che-rail-show-tab[b-hl6fddptrl] {
    flex: 0 0 18px;
    background: #f8fafc;
    border: 1.5px solid var(--che-border);
    border-radius: 8px;
    color: var(--che-muted-light);
    cursor: pointer;
}

    .che-rail-show-tab:hover[b-hl6fddptrl] {
        border-color: var(--che-accent);
        color: var(--che-accent-dark);
    }

/* ── Body: 3-pane layout ── */
.che-body[b-hl6fddptrl] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* ── Right rail: Recent Voucher + Photo/CB stacked ── */
.che-right-rail[b-hl6fddptrl] {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Recent rail ── */
.che-recent[b-hl6fddptrl] {
    background: #fff;
    border: 1.5px solid var(--che-border);
    border-radius: 12px;
    overflow-y: auto;
    max-height: 340px;
    padding: 10px;
}

.che-recent-hdr[b-hl6fddptrl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--che-muted);
    padding: 2px 4px 10px;
}

.che-recent-expand[b-hl6fddptrl] {
    background: none;
    border: none;
    color: var(--che-muted-light);
    cursor: pointer;
}

    .che-recent-expand:hover[b-hl6fddptrl] {
        color: var(--che-accent-dark);
    }

.che-recent-item[b-hl6fddptrl] {
    padding: 8px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: .12s;
}

    .che-recent-item:hover[b-hl6fddptrl] {
        background: var(--che-accent-bg);
    }

.che-recent-num[b-hl6fddptrl] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--che-accent-dark);
}

.che-recent-type[b-hl6fddptrl] {
    font-size: 11px;
    color: var(--che-danger);
    font-weight: 600;
}

.che-recent-date[b-hl6fddptrl] {
    font-size: 10.5px;
    color: var(--che-muted-light);
}

.che-recent-amt[b-hl6fddptrl] {
    font-size: 11.5px;
    color: var(--che-text);
    font-weight: 600;
}

/* ── Main form + grid ── */
.che-main[b-hl6fddptrl] {
    flex: 1;
    min-width: 0;
}

.che-placeholder[b-hl6fddptrl] {
    padding: 40px;
    text-align: center;
    color: var(--che-muted-light);
    font-size: 13px;
}

.che-card[b-hl6fddptrl] {
    background: #fff;
    border: 1.5px solid var(--che-border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 14px;
}

.che-form-grid[b-hl6fddptrl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1.5px solid var(--che-border);
}

.che-field[b-hl6fddptrl] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}

.che-field-wide[b-hl6fddptrl] {
    grid-column: span 2;
}

.che-field span[b-hl6fddptrl] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--che-muted);
}

.che-field input[type="text"][b-hl6fddptrl],
.che-field input[type="date"][b-hl6fddptrl],
.che-field input:not([type])[b-hl6fddptrl],
.che-field select[b-hl6fddptrl],
.che-field textarea[b-hl6fddptrl] {
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid var(--che-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    background: #f8fafc;
    color: var(--che-text);
    outline: none;
    transition: .12s;
    width: 100%;
}

.che-field textarea[b-hl6fddptrl] {
    height: auto;
    min-height: 44px;
    padding: 8px 10px;
    resize: vertical;
}

    .che-field input:focus[b-hl6fddptrl],
    .che-field select:focus[b-hl6fddptrl],
    .che-field textarea:focus[b-hl6fddptrl] {
        border-color: var(--che-accent);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(26,185,154,.12);
    }

/* Depot/SalesRep dropdowns and LedgerAutofill's input render inside a child
   component's own markup — ::deep reaches past that boundary so they pick
   up the same look without needing their param contracts changed. */
.che-field[b-hl6fddptrl]  select,
.che-field[b-hl6fddptrl]  input {
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid var(--che-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    background: #f8fafc;
    color: var(--che-text);
    outline: none;
    transition: .12s;
    width: 100%;
    box-sizing: border-box;
}

    .che-field[b-hl6fddptrl]  select:focus,
    .che-field[b-hl6fddptrl]  input:focus {
        border-color: var(--che-accent);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(26,185,154,.12);
    }

.che-autofill[b-hl6fddptrl] {
    position: relative;
}

.che-autofill-list[b-hl6fddptrl] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--che-border);
    border-radius: 10px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 10px 28px rgba(15,23,42,.12);
}

.che-autofill-opt[b-hl6fddptrl] {
    padding: 8px 12px;
    font-size: 12.5px;
    cursor: pointer;
}

    .che-autofill-opt:hover[b-hl6fddptrl] {
        background: var(--che-accent-bg);
    }

/* LedgerAutofill / ItemAutofill (Components/Shared) render their own markup
   (lga-*/ ia-*) inside a child component — need[b-hl6fddptrl]  to reach it. */
::deep .lga-wrap {
    position: relative;
    display: block;
}

[b-hl6fddptrl] .lga-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--che-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 0;
}

    [b-hl6fddptrl] .lga-suggest li {
        padding: 8px 12px;
        cursor: pointer;
        font-size: 12.5px;
    }

        [b-hl6fddptrl] .lga-suggest li:hover,
        [b-hl6fddptrl] .lga-suggest li.active {
            background: var(--che-accent-bg);
        }

/* ── Item grid toolbar: label left, Add item button right ── */
.che-grid-toolbar[b-hl6fddptrl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.che-grid-toolbar-label[b-hl6fddptrl] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--che-muted);
}

/* ── Item grid ── */
.che-grid-wrap[b-hl6fddptrl] {
    overflow: auto;
}

.che-item-table[b-hl6fddptrl] {
    width: 100%;
    border-collapse: collapse;
}

    .che-item-table thead th[b-hl6fddptrl] {
        background: #f8fafc;
        color: var(--che-muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        padding: 8px;
        border-bottom: 1.5px solid var(--che-border);
        text-align: left;
    }

    .che-item-table td[b-hl6fddptrl] {
        padding: 8px;
        font-size: 12.5px;
        border-bottom: 1px solid var(--che-border);
    }

.che-row-clickable[b-hl6fddptrl] {
    cursor: pointer;
    transition: background .12s;
}

    .che-row-clickable:hover[b-hl6fddptrl] {
        background: var(--che-accent-bg);
    }

.che-add-item-btn[b-hl6fddptrl] {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1.5px dashed var(--che-border-strong);
    color: var(--che-accent-dark);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}

    .che-add-item-btn:hover[b-hl6fddptrl] {
        background: var(--che-accent-bg);
        border-color: var(--che-accent);
    }

.che-row-actions[b-hl6fddptrl] {
    text-align: center;
}

    .che-row-actions button[b-hl6fddptrl] {
        background: none;
        border: none;
        color: var(--che-muted);
        cursor: pointer;
        font-size: 13px;
        padding: 3px 5px;
    }

        .che-row-actions button:hover[b-hl6fddptrl] {
            color: var(--che-danger);
        }

.che-empty[b-hl6fddptrl] {
    text-align: center;
    color: var(--che-muted-light);
    font-size: 12.5px;
    padding: 20px !important;
}

.che-totals-row[b-hl6fddptrl] {
    background: var(--che-accent-bg);
    color: var(--che-accent-dark);
    font-weight: 700;
}

    .che-totals-row td[b-hl6fddptrl] {
        border: none !important;
        padding: 10px 8px !important;
    }

/* ── Photo/CB panel ── */
.che-photo-panel[b-hl6fddptrl] {
    background: #fff;
    border: 1.5px solid var(--che-border);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.che-photo-panel-hdr[b-hl6fddptrl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--che-muted);
    padding: 2px 4px 4px;
}

.che-photo-box[b-hl6fddptrl] {
    background: #fff;
    border: 1.5px solid var(--che-border);
    border-radius: 12px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .che-photo-box img[b-hl6fddptrl] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.che-photo-empty[b-hl6fddptrl] {
    color: var(--che-border-strong);
    font-size: 40px;
}

.che-cb-box[b-hl6fddptrl] {
    background: #f8fafc;
    border: 1.5px solid var(--che-border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--che-muted);
}

    .che-cb-box span[b-hl6fddptrl] {
        font-weight: 700;
        color: var(--che-accent-dark);
        font-size: 13px;
    }

.che-request-photo[b-hl6fddptrl] {
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    background: none;
    border: 1.5px dashed var(--che-border-strong);
    border-radius: 8px;
    color: var(--che-muted);
    cursor: pointer;
}

    .che-request-photo:hover[b-hl6fddptrl] {
        border-color: var(--che-accent);
        color: var(--che-accent-dark);
        background: var(--che-accent-bg);
    }

/* ── Explicit input class passed to child components (ItemAutofill) so
   their internally-rendered <input> matches che-field's look without
   relying on ::deep reaching into them. ── */
.che-input[b-hl6fddptrl] {
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid var(--che-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    background: #f8fafc;
    color: var(--che-text);
    outline: none;
    transition: .12s;
    width: 100%;
    box-sizing: border-box;
}

    .che-input:focus[b-hl6fddptrl] {
        border-color: var(--che-accent);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(26,185,154,.12);
    }

.text-right[b-hl6fddptrl] {
    text-align: right;
}

/* ── Item add/edit modal — matches InvVoucher's iv-modal ── */
.che-overlay[b-hl6fddptrl] {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.5);
    z-index: 100;
}

.che-modal[b-hl6fddptrl] {
    --che-accent: #1AB99A;
    --che-accent-dark: #0d9480;
    --che-accent-bg: #eafbf6;
    --che-border: #e2e8f0;
    --che-border-strong: #cbd5e1;
    --che-text: #1e293b;
    --che-muted: #64748b;
    --che-muted-light: #94a3b8;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 640px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 13px;
}

.che-modal-head[b-hl6fddptrl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid var(--che-border);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

    .che-modal-head span[b-hl6fddptrl] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--che-text);
    }

        .che-modal-head span i[b-hl6fddptrl] {
            color: var(--che-accent);
        }

.che-modal-body[b-hl6fddptrl] {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.che-modal-grid[b-hl6fddptrl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.che-modal-linetotal[b-hl6fddptrl] {
    grid-column: span 2;
    background: var(--che-accent-bg);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: var(--che-accent-dark);
}

.che-modal-error[b-hl6fddptrl] {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--che-danger);
    background: var(--che-danger-bg);
    border-radius: 8px;
    padding: 8px 12px;
}

.che-modal-actions[b-hl6fddptrl] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--che-border);
    flex-shrink: 0;
}

/* ── Fixed bottom action bar — matches InvVoucher's iv-footer-bar ── */
.che-footer-bar[b-hl6fddptrl] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1.5px solid var(--che-border);
    box-shadow: 0 -6px 20px rgba(15,23,42,.08);
    z-index: 50;
    padding: 6px 12px;
}

.che-footer-inner[b-hl6fddptrl] {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.che-btn[b-hl6fddptrl] {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1.5px solid var(--che-border-strong);
    background: #fff;
    color: var(--che-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: .12s;
}

    .che-btn:hover[b-hl6fddptrl] {
        border-color: var(--che-accent);
        color: var(--che-accent-dark);
    }

.che-btn-primary[b-hl6fddptrl] {
    background: var(--che-accent);
    color: #fff;
    border-color: var(--che-accent);
}

    .che-btn-primary:hover[b-hl6fddptrl] {
        background: var(--che-accent-dark);
        color: #fff;
    }

.che-btn:disabled[b-hl6fddptrl] {
    opacity: .6;
    cursor: not-allowed;
}

.che-save-msg[b-hl6fddptrl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    margin-left: 4px;
}

.che-save-ok[b-hl6fddptrl] {
    color: var(--che-accent-dark);
}

.che-save-err[b-hl6fddptrl] {
    color: var(--che-danger);
}

/* ── Mobile ── */
@media (max-width: 900px) {
    .che-body[b-hl6fddptrl] {
        flex-direction: column;
    }

    .che-right-rail[b-hl6fddptrl],
    .che-recent[b-hl6fddptrl],
    .che-photo-panel[b-hl6fddptrl] {
        flex: none;
        width: 100%;
    }

    .che-form-grid[b-hl6fddptrl] {
        grid-template-columns: repeat(2, 1fr);
    }

    .che-field-wide[b-hl6fddptrl] {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .che-form-grid[b-hl6fddptrl] {
        grid-template-columns: 1fr;
    }

    .che-field-wide[b-hl6fddptrl] {
        grid-column: span 1;
    }

    .che-footer-inner[b-hl6fddptrl] {
        gap: 6px;
    }
}

/* Small-font batch/lot summary shown under the Item field (popup) and
   under the item name in the cart grid — set via BatchLotQtyModal (setting 137). */
/* Base: cart-grid usage (under item name in the table cell) — plain, no box. */
span.che-batchlot-note[b-hl6fddptrl] {
    display: block;
    font-size: 9px;
    color: #888888;
    margin-top: 2px;
}

/* Popup usage (opposite Rate) — looks like the sibling input boxes (base
   .che-field input:not([type]) rule already gives it that), click reopens
   BatchLotQtyModal so the user can re-edit. */
.che-batchlot-input[b-hl6fddptrl] {
    font-size: 11px;
    color: #888888;
    cursor: pointer;
}

    .che-batchlot-input:hover[b-hl6fddptrl] {
        border-color: #1AB99A;
    }

/* ── Toast — shown when a tab (Audit/Documents/View/Cross Links/Cost
   Center) is clicked before the challan has a ChallanId (i.e. not yet
   saved / not opened via ?CID=). Fixed top-center, auto-dismisses. ── */
.che-toast[b-hl6fddptrl] {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a2537;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    z-index: 2000;
    animation: che-toast-in-b-hl6fddptrl .15s ease-out;
}

@keyframes che-toast-in-b-hl6fddptrl {
    from {
        opacity: 0;
        transform: translate(-50%, -8px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
/* /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/Transactions/Voucher/Order/OrderEntry.razor.rz.scp.css */
/* =====================================================
   OrderEntry.razor.css

   Rebuilt to visually match AccVoucher.razor.css's own rendered look (the
   "Voucher entry" mockup: collapsible Recent sidebar, dark-green header,
   underline tabs, 2-col field grid, inset Yes/No toggle blocks, a plain
   lines-table item grid, totals bar, full-width Save + outline New action
   row) — same avc-* structure, just under an "oe-" prefix since Blazor CSS
   isolation scopes classes per-file, and with the Order-specific fields
   (item grid / tax-expense grid) swapped in for AccVoucher's own Dr/Cr
   ledger lines.
   ===================================================== */

.oe-page[b-he2j1s9hod] {
    --oe-accent: #1AB99A;
    --oe-accent-dark: #0ea384;
    --oe-accent-bg: #f0fdf9;
    --oe-accent-border: #a7f3d0;
    --oe-header-bg: #0a2a1e;
    --oe-border: #e5e7eb;
    --oe-border-soft: #f3f4f6;
    --oe-text: #111827;
    --oe-muted: #6b7280;
    --oe-muted-light: #9ca3af;
    --oe-danger: #b91c1c;
    --oe-danger-bg: #fef2f2;
    --oe-danger-border: #fecaca;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: var(--oe-text);
    padding: 16px;
}

.oe-shell[b-he2j1s9hod] {
    max-width: 1300px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 20px;
    border: 0.5px solid var(--oe-border);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

/* ── Autofill suggestion dropdowns (LedgerAutofill / CustomerAutofill /
   VoucherLedgerItemAutofill — Party, Customer, and every Item/Ledger cell
   on this page) — these components render their own "lga-*" markup inside
   their own template with NO base styling of their own (by design, so each
   host page skins them); page-wide, not scoped to one field, since Party/
   Customer/grid autofills all share the same lga-wrap/lga-suggest markup. ── */
[b-he2j1s9hod] .lga-wrap {
    position: relative;
    display: block;
}

[b-he2j1s9hod] .lga-suggest {
    /* Baseline position:absolute (relative to the ::deep .lga-wrap above) —
       CustomerAutofill has no JS positioning of its own and needs this to
       overlay rather than push content down. LedgerAutofill /
       VoucherLedgerItemAutofill DO set their own inline position:fixed +
       top/left/width via gainsWatchDropdown once open, which simply
       overrides this at runtime — no conflict either way. */
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--oe-border);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--oe-border) transparent;
    z-index: 200;
    list-style: none;
    margin: 4px 0 0;
    padding: 4px 0;
}

[b-he2j1s9hod] .lga-suggest-hidden {
    visibility: hidden;
}

[b-he2j1s9hod] .lga-suggest li,
[b-he2j1s9hod] .lga-empty {
    padding: 8px 12px;
    font-size: 12.5px;
    color: var(--oe-text);
}

[b-he2j1s9hod] .lga-suggest li {
    cursor: pointer;
}

    [b-he2j1s9hod] .lga-suggest li:hover,
    [b-he2j1s9hod] .lga-suggest li.active {
        background: var(--oe-accent-bg);
    }

[b-he2j1s9hod] .lga-empty {
    color: var(--oe-muted-light);
    cursor: default;
}

[b-he2j1s9hod] .lga-spin {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--oe-muted-light);
    font-size: 12px;
}

/* ── Left: collapsible Recent orders sidebar ── */
.oe-sidebar[b-he2j1s9hod] {
    width: 250px;
    flex-shrink: 0;
    background: #fafafa;
    border-right: 0.5px solid var(--oe-border);
    display: flex;
    flex-direction: column;
    transition: width .18s ease;
}

.oe-sidebar-collapsed[b-he2j1s9hod] {
    width: 56px;
}

.oe-sidebar-hdr[b-he2j1s9hod] {
    padding: 1rem 1.1rem .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.oe-sidebar-label[b-he2j1s9hod] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--oe-muted);
    white-space: nowrap;
    overflow: hidden;
}

.oe-sidebar-toggle[b-he2j1s9hod] {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: 1px solid var(--oe-border);
    border-radius: 7px;
    background: #fff;
    color: var(--oe-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
}

    .oe-sidebar-toggle:hover[b-he2j1s9hod] {
        color: var(--oe-accent);
        border-color: var(--oe-accent);
    }

.oe-recent-list[b-he2j1s9hod] {
    flex: 1;
    overflow-y: auto;
    padding: 0 .6rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--oe-border) transparent;
}

.oe-recent-empty[b-he2j1s9hod] {
    color: var(--oe-muted-light);
    font-size: 13px;
    padding: 1rem .25rem;
    text-align: center;
}

.oe-recent-card[b-he2j1s9hod] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #ffffff;
    border: 0.5px solid var(--oe-border);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
    margin-bottom: 6px;
}

    .oe-recent-card:hover[b-he2j1s9hod] {
        border-color: var(--oe-accent);
        background: var(--oe-accent-bg);
    }

.oe-avatar[b-he2j1s9hod] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.oe-avatar-tint[b-he2j1s9hod] {
    background: var(--oe-accent-bg);
    border: 0.5px solid var(--oe-accent-border);
    color: #065f46;
}

.oe-recent-main[b-he2j1s9hod] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.oe-recent-vno[b-he2j1s9hod] {
    font-size: 12px;
    font-weight: 600;
    color: var(--oe-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oe-recent-sub[b-he2j1s9hod] {
    font-size: 10px;
    color: var(--oe-muted-light);
}

/* ── Main column ── */
.oe-main[b-he2j1s9hod] {
    flex: 1;
    min-width: 0;
}

.oe-gains-header[b-he2j1s9hod] {
    background: var(--oe-header-bg);
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 14px;
}

.oe-gains-icon[b-he2j1s9hod] {
    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: var(--oe-accent);
    flex-shrink: 0;
}

.oe-gains-eyebrow[b-he2j1s9hod] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--oe-accent);
    margin-bottom: 4px;
}

.oe-gains-title[b-he2j1s9hod] {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.oe-gains-vid[b-he2j1s9hod] {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, .6);
}

/* ── Tabs (ORDER / Comments / xLinks / Documents / View) — underline style ── */
.oe-gains-tabs[b-he2j1s9hod] {
    display: flex;
    gap: 4px;
    padding: 0 1.25rem;
    border-bottom: 0.5px solid var(--oe-border-soft);
    background: #fafafa;
    /* overflow-x: auto lets the tab row scroll horizontally if there isn't
       room for every tab — but per the CSS spec, setting only overflow-x
       (leaving overflow-y at its default "visible") makes the browser
       silently compute overflow-y as "auto" too, the instant either it or
       overflow-x is non-visible. That's what was putting a vertical
       scrollbar on this row itself (the one from the screenshot) — fixed by
       pinning overflow-y to hidden explicitly. */
    overflow-x: auto;
    overflow-y: hidden;
}

.oe-gains-tab[b-he2j1s9hod] {
    border: none;
    background: none;
    padding: 12px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    color: var(--oe-muted-light);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: .12s;
}

    .oe-gains-tab:hover[b-he2j1s9hod] {
        color: var(--oe-header-bg);
    }

    .oe-gains-tab.active[b-he2j1s9hod] {
        color: var(--oe-header-bg);
        border-bottom-color: var(--oe-accent);
    }

.oe-gains-body[b-he2j1s9hod] {
    padding: 1.75rem 2rem;
}

.oe-empty-block[b-he2j1s9hod] {
    color: var(--oe-muted-light);
    font-size: 14px;
    padding: 2rem 0;
    text-align: center;
}

/* ── Field grid (Status/VType, Ref code/Depot, dates, Party/Customer) ── */
.oe-gfield-grid[b-he2j1s9hod] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.oe-gfield[b-he2j1s9hod] {
    display: block;
}

.oe-gfield span[b-he2j1s9hod] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--oe-muted);
    margin-bottom: 7px;
}

.oe-ginput[b-he2j1s9hod] {
    width: 100%;
    height: 44px;
    border: 1.5px solid var(--oe-border);
    border-radius: 12px;
    font-size: 14px;
    color: var(--oe-text);
    background: #f9fafb;
    outline: none;
    font-family: inherit;
    padding: 0 12px;
    box-sizing: border-box;
}

    .oe-ginput:hover[b-he2j1s9hod] {
        border-color: #d1d5db;
    }

    .oe-ginput:focus[b-he2j1s9hod] {
        border-color: var(--oe-accent);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(26, 185, 154, .12);
    }

/* Shared components (DepotDropdown/SalesRepDropdown/GlobalDatepicker/
   LedgerAutofill/CustomerAutofill) render their own markup inside a child
   component's boundary — ::deep reaches past that so they still pick up
   this page's field look without their param contracts changing. */
.oe-gfield[b-he2j1s9hod]  select,
.oe-gfield[b-he2j1s9hod]  input {
    width: 100%;
    height: 44px;
    border: 1.5px solid var(--oe-border);
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--oe-text);
    background: #f9fafb;
    outline: none;
    padding: 0 12px;
    box-sizing: border-box;
}

    .oe-gfield[b-he2j1s9hod]  select:hover,
    .oe-gfield[b-he2j1s9hod]  input:hover {
        border-color: #d1d5db;
    }

    .oe-gfield[b-he2j1s9hod]  select:focus,
    .oe-gfield[b-he2j1s9hod]  input:focus {
        border-color: var(--oe-accent);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(26, 185, 154, .12);
    }

[b-he2j1s9hod] .gdp-wrap {
    width: 100%;
    height: 44px;
    border: 1.5px solid var(--oe-border);
    border-radius: 12px;
    background: #f9fafb;
    box-sizing: border-box;
}

.oe-customer-row[b-he2j1s9hod] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .oe-customer-row > *:first-child[b-he2j1s9hod] {
        flex: 1;
    }

.oe-inline-add[b-he2j1s9hod] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

    .oe-inline-add .oe-ginput[b-he2j1s9hod] {
        flex: 1;
    }

/* ── Inset Quotation? / Rate inclusive of GST? blocks — same as AccVoucher's
   "TDS applicable?" inset block ── */
.oe-inset-block[b-he2j1s9hod] {
    background: #f9fafb;
    border: 0.5px solid var(--oe-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.oe-inset-hdr[b-he2j1s9hod] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.oe-inset-title[b-he2j1s9hod] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--oe-text);
}

    .oe-inset-title i[b-he2j1s9hod] {
        font-size: 16px;
        color: var(--oe-accent);
    }

.oe-pill-group[b-he2j1s9hod] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.oe-pill[b-he2j1s9hod] {
    border: 1px solid var(--oe-border);
    background: #fff;
    color: var(--oe-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
}

    .oe-pill.active[b-he2j1s9hod] {
        background: var(--oe-accent);
        color: #fff;
        border-color: var(--oe-accent);
    }

/* ── Item / expense line grids ── */
.oe-lines-section[b-he2j1s9hod] {
    border-top: 0.5px solid var(--oe-border-soft);
    padding-top: 20px;
    margin-bottom: 20px;
}

.oe-lines-toolbar[b-he2j1s9hod] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.oe-lines-title[b-he2j1s9hod] {
    font-size: 13px;
    font-weight: 600;
    color: var(--oe-text);
}

.oe-grid-toolbar-row[b-he2j1s9hod] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

/* "Proper" bordered grid table — solid header/total band, full cell
   borders — same convention already established elsewhere in the app
   (Daybook's .db-table, AccVoucher's own avc-doc-table comment) for a
   grid that should read like the legacy screen's own table, rather than
   the softer borderless style used for the Debit/Credit rows on
   AccVoucher's Entry tab. Two colour variants (navy for the item grid,
   muted-gray for the ledger/expense grid) mirror the two distinct header
   shades in the original screenshot while staying inside this page's own
   palette instead of copying the screenshot's exact hues. */
.oe-grid-wrap[b-he2j1s9hod] {
    border: 1px solid var(--oe-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

/* Fixed-height item grid / Tax Class grid — both can grow to many rows as
   lines are added, which was pushing the whole page (Save button included)
   further down with every line. Capping the height and scrolling inside
   instead — same "fixed height + overflow:auto + sticky thead" convention
   masters-forms.css's .mu-table-wrap already uses elsewhere in the app —
   keeps the rest of the form in a stable position. Not applied to the Add
   Expenses grid (plain .oe-grid-wrap, no modifier), which is hand-populated
   a few rows at a time rather than growing unbounded. */
.oe-grid-wrap-scroll[b-he2j1s9hod] {
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--oe-accent-border) transparent;
}

    .oe-grid-wrap-scroll[b-he2j1s9hod]::-webkit-scrollbar {
        width: 8px;
    }

    .oe-grid-wrap-scroll[b-he2j1s9hod]::-webkit-scrollbar-thumb {
        background: var(--oe-accent-border);
        border-radius: 8px;
    }

    .oe-grid-wrap-scroll thead th[b-he2j1s9hod] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

.oe-grid-table[b-he2j1s9hod] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .oe-grid-table th[b-he2j1s9hod] {
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        text-align: left;
        padding: 8px 10px;
        border: 1px solid rgba(255, 255, 255, .18);
    }

    .oe-grid-table td[b-he2j1s9hod] {
        padding: 6px 8px;
        border: 1px solid var(--oe-border);
        color: var(--oe-text);
    }

    .oe-grid-table tbody tr:nth-child(even)[b-he2j1s9hod] {
        background: #f9fafb;
    }

.oe-grid-navy th[b-he2j1s9hod] {
    background: #306B9C;
}

.oe-grid-muted th[b-he2j1s9hod] {
    background: var(--oe-muted);
}

.oe-grid-total-row td[b-he2j1s9hod] {
    color: #fff;
    font-weight: 700;
    border-color: rgba(255, 255, 255, .18);
}

.oe-grid-navy .oe-grid-total-row td[b-he2j1s9hod] {
    background: #306B9C;
}

.oe-grid-muted .oe-grid-total-row td[b-he2j1s9hod] {
    background: var(--oe-muted);
}

/* ── Grand total bar — item total + net tax, below the Tax Class table.
   Right-aligned card rather than another table row since it rolls up the
   item grid's total alongside this table's own Cr/Dr total. ── */
.oe-grandtotal-bar[b-he2j1s9hod] {
    margin-top: 12px;
    margin-left: auto;
    width: 100%;
    max-width: 280px;
    border: 1px solid var(--oe-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.oe-grandtotal-row[b-he2j1s9hod] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--oe-muted);
    border-bottom: 1px solid var(--oe-border-soft);
}

.oe-grandtotal-row:last-child[b-he2j1s9hod] {
    border-bottom: none;
}

.oe-grandtotal-grand[b-he2j1s9hod] {
    background: var(--oe-accent-bg);
    color: var(--oe-text);
    font-weight: 700;
    font-size: 14px;
}

    .oe-grandtotal-grand span:first-child[b-he2j1s9hod] {
        color: var(--oe-accent-dark);
    }

/* ── Rectangular "Tax Class / Add Expenses" tab pair — same adjoining-tab
   look as the legacy screen, kept in this page's own accent colour rather
   than the screenshot's navy so it stays consistent with every other
   active-state control (oe-pill.active, oe-gains-tab.active) on this page. ── */
.oe-subtab-group[b-he2j1s9hod] {
    display: flex;
    margin-bottom: 12px;
}

.oe-subtab[b-he2j1s9hod] {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 18px;
    border: 1px solid var(--oe-border);
    background: #fff;
    color: var(--oe-muted);
    cursor: pointer;
    transition: .12s;
}

    .oe-subtab:first-child[b-he2j1s9hod] {
        border-radius: 8px 0 0 8px;
    }

    .oe-subtab:last-child[b-he2j1s9hod] {
        border-radius: 0 8px 8px 0;
        border-left: none;
    }

    .oe-subtab:hover[b-he2j1s9hod] {
        color: var(--oe-accent-dark);
    }

    .oe-subtab.active[b-he2j1s9hod] {
        background: var(--oe-accent-dark);
        border-color: var(--oe-accent-dark);
        color: #fff;
    }

.oe-lines-input[b-he2j1s9hod] {
    width: 100%;
    height: 38px;
    border: 1.5px solid var(--oe-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--oe-text);
    background: #f9fafb;
    outline: none;
    font-family: inherit;
    padding: 0 10px;
    box-sizing: border-box;
}

.oe-grid-wrap[b-he2j1s9hod]  input {
    width: 100%;
    height: 38px;
    border: 1.5px solid var(--oe-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--oe-text);
    background: #f9fafb;
    outline: none;
    font-family: inherit;
    padding: 0 10px;
    box-sizing: border-box;
}

    .oe-lines-input:focus[b-he2j1s9hod],
    .oe-grid-wrap[b-he2j1s9hod]  input:focus {
        border-color: var(--oe-accent);
        background: #fff;
        box-shadow: 0 0 0 2px rgba(26, 185, 154, .12);
    }

.oe-cell-static[b-he2j1s9hod] {
    font-weight: 600;
    color: var(--oe-text);
    padding-right: 10px !important;
}

.oe-empty-cell[b-he2j1s9hod] {
    text-align: center;
    color: var(--oe-muted-light);
    padding: 20px !important;
}

.oe-icon-btn[b-he2j1s9hod] {
    height: 34px;
    width: 34px;
    border: 1.5px solid var(--oe-border);
    border-radius: 8px;
    background: #fff;
    color: var(--oe-muted-light);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .oe-icon-btn:hover[b-he2j1s9hod] {
        color: var(--oe-danger);
        border-color: var(--oe-danger-border);
    }

/* ── Quick-add item row — the "Item [+] / Quantity / Rate / Amount"
   toolbar above the item grid. Real textboxes (not toggles): filling these
   in and clicking "+" commits a new line into the grid below.

   Free Qty / Free Qty1 / Quantity1 are hidden for now (see OrderEntry.razor)
   — this grid was 6 tracks (Item, +, Free Qty, Quantity, Rate, Amount) plus
   a second row for Free Qty1/Quantity1; with those three fields removed
   from the markup it's just the one 5-track row below. Restoring the
   hidden fields is a markup-only change; widen this back to 6 columns and
   reinstate the second-row rules if that CSS is needed again. ── */
.oe-quickadd-row[b-he2j1s9hod] {
    display: grid;
    grid-template-columns: 2fr 32px repeat(3, 1fr);
    gap: 10px;
    align-items: end;
    margin-bottom: 16px;
}

.oe-quickadd-field[b-he2j1s9hod] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .oe-quickadd-field span[b-he2j1s9hod] {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--oe-muted);
    }

/* Sits inside .oe-quickadd-btn-field below, matching every sibling field's
   own "label span + 44px content" shape (see .oe-quickadd-field) — this is
   the 44px content slot, so the button centers on exactly the same
   vertical band the adjacent 44px textboxes occupy, rather than being
   grid-bottom-aligned against them (which looked off once the button
   shrank to 20px). */
.oe-quickadd-btn-slot[b-he2j1s9hod] {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oe-quickadd-add-btn[b-he2j1s9hod] {
    height: 20px;
    width: 20px;
    flex-shrink: 0;
    border: none;
    border-radius: 5px;
    background: var(--oe-accent);
    color: #fff;
    font-size: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .oe-quickadd-add-btn:hover[b-he2j1s9hod] {
        background: var(--oe-accent-dark);
    }

/* InvItemAutofill (Item field) renders its own <input> inside a CHILD
   component's template, so the plain "oe-ginput" class passed via
   InputClass never actually receives this file's scoped styling (Blazor
   CSS isolation only auto-scopes elements written directly in THIS .razor
   file) — that's what left the Item textbox looking unstyled/"disturbed"
   next to its own siblings back when this row used VoucherLedgerItemAutofill.
   ::deep reaches past the component boundary to size and border it exactly
   like every other .oe-ginput on this row; InvItemAutofill.razor.css's own
   ::deep input fallback loses to this rule's higher specificity, and its
   .ia-suggest dropdown is already self-styled so no extra ::deep is needed
   for that part. */
.oe-quickadd-row[b-he2j1s9hod]  input {
    width: 100%;
    height: 44px;
    border: 1.5px solid var(--oe-border);
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--oe-text);
    background: #f9fafb;
    outline: none;
    padding: 0 12px;
    box-sizing: border-box;
}

    .oe-quickadd-row[b-he2j1s9hod]  input:hover {
        border-color: #d1d5db;
    }

    .oe-quickadd-row[b-he2j1s9hod]  input:focus {
        border-color: var(--oe-accent);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(26, 185, 154, .12);
    }

/* Save/error messages now use the app-wide .mu-toast (masters-forms.css,
   loaded globally) instead of an inline banner — see OrderEntry.razor's
   ShowToast(). */

/* ── Buttons ── */
.oe-action-row[b-he2j1s9hod] {
    display: flex;
    gap: 10px;
}

    .oe-action-row .oe-primary-btn[b-he2j1s9hod] {
        flex: 1;
        width: auto;
    }

    .oe-action-row .oe-outline-btn[b-he2j1s9hod] {
        height: 48px;
        padding: 0 18px;
        font-size: 14px;
        white-space: nowrap;
    }

.oe-primary-btn[b-he2j1s9hod] {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 12px;
    background: var(--oe-accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
}

    .oe-primary-btn:hover[b-he2j1s9hod] {
        background: var(--oe-accent-dark);
    }

    .oe-primary-btn:active[b-he2j1s9hod] {
        transform: scale(.99);
    }

    .oe-primary-btn:disabled[b-he2j1s9hod] {
        background: var(--oe-muted-light);
        cursor: not-allowed;
    }

.oe-outline-btn[b-he2j1s9hod] {
    height: 38px;
    padding: 0 14px;
    border: 1.5px solid var(--oe-border);
    border-radius: 10px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

    .oe-outline-btn:hover[b-he2j1s9hod] {
        background: #f9fafb;
        border-color: var(--oe-accent);
    }

.oe-btn-sm[b-he2j1s9hod] {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
}

.text-end[b-he2j1s9hod] {
    text-align: right;
}

.text-center[b-he2j1s9hod] {
    text-align: center;
}

/* ── Mobile ── */
@media (max-width: 900px) {
    .oe-shell[b-he2j1s9hod] {
        flex-direction: column;
        border-radius: 14px;
    }

    .oe-sidebar[b-he2j1s9hod] {
        width: 100% !important;
        border-right: none;
        border-bottom: 0.5px solid var(--oe-border);
    }

    .oe-sidebar-collapsed .oe-sidebar-hdr[b-he2j1s9hod] {
        justify-content: flex-end;
    }

    .oe-gfield-grid[b-he2j1s9hod] {
        grid-template-columns: 1fr;
    }

    .oe-gains-body[b-he2j1s9hod] {
        padding: 1.25rem;
    }

    .oe-gains-tabs[b-he2j1s9hod] {
        overflow-x: auto;
        overflow-y: hidden;
    }
}
/* /Components/Pages/Transactions/Voucher/VoucherCrossLink.razor.rz.scp.css */
/* VoucherCrossLink.razor.css
   Scoped styles for the common cross-link panel. Blazor CSS isolation means
   the global .mu-card/.mu-table/.mu-empty rules (wwwroot/CSS/masters-forms.css)
   still apply automatically, but component-scoped classes from other pages
   (che-*, xl-*, le-toptab, etc.) do not carry over here — so, following the
   same pattern already used by CrossLink.razor.css (see its own "must be
   redefined here" comments), the handful of look-alike bits (tab strip,
   right-aligned numeric cells) are redefined locally with a "vcl-" prefix. */

.vcl-root[b-y8uj7vi9re] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: Arial;
}

/* ── Category tab strip (Account / Inventory / Order / PUR) ── */
.vcl-tabs[b-y8uj7vi9re] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.vcl-tab[b-y8uj7vi9re] {
    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;
}

    .vcl-tab:hover[b-y8uj7vi9re] {
        background: #f5f5f5;
    }

    .vcl-tab.active[b-y8uj7vi9re] {
        background: #1ab99a;
        color: #fff;
        border-color: #1ab99a;
        font-weight: 700;
    }

/* ── Panel card ── */
.vcl-panel[b-y8uj7vi9re] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Containing block for the shared <Loader> overlay (position:absolute)
       above, so it covers just this panel rather than the whole page. */
    position: relative;
}

/* ── Header rows ── */
.vcl-hdr-row[b-y8uj7vi9re] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #1a2537;
    font-weight: 600;
}

.vcl-hdr-vnum[b-y8uj7vi9re] {
    color: #1a56a7;
}

.vcl-hdr-date[b-y8uj7vi9re] {
    margin-left: auto;
}

/* ── Account tab's small ledger summary box (LedgerName/Amount, Linked, Balance) ── */
.vcl-summary-table[b-y8uj7vi9re] {
    width: 320px;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .vcl-summary-table td[b-y8uj7vi9re] {
        padding: 6px 10px;
        border-bottom: 1px solid #eef2f7;
    }

    .vcl-summary-table td.num[b-y8uj7vi9re] {
        text-align: right;
    }

    .vcl-summary-table .vcl-summary-total td[b-y8uj7vi9re] {
        font-weight: 700;
        border-bottom: none;
        border-top: 1px solid #d6dbe0;
    }

/* ── Section headers ("Already Linked" / "Linked" / "Yet to Link") ── */
.vcl-section-hdr[b-y8uj7vi9re] {
    font-size: 12px;
    font-weight: 700;
    color: #1a2537;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vcl-yet-hdr i[b-y8uj7vi9re] {
    cursor: pointer;
    color: #64748b;
    font-size: 13px;
}

    .vcl-yet-hdr i:hover[b-y8uj7vi9re] {
        color: #1a56a7;
    }

/* ── Grids ── */
.vcl-table td[b-y8uj7vi9re],
.vcl-table th[b-y8uj7vi9re] {
    white-space: nowrap;
}

.vcl-table .num[b-y8uj7vi9re] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Already Linked / Linked and Yet to Link grids both capped at 300px with
   their own scroll (mu-table-wrap's global default is a fixed 540px) —
   overridden here via scoped CSS isolation rather than touching
   masters-forms.css. */
.vcl-linked-wrap[b-y8uj7vi9re],
.vcl-yet-wrap[b-y8uj7vi9re] {
    max-height: 300px;
}

.vcl-th-delink[b-y8uj7vi9re],
.vcl-th-chk[b-y8uj7vi9re] {
    width: 60px;
    text-align: center;
}

.vcl-td-chk[b-y8uj7vi9re] {
    text-align: center;
}

/* Delink action on the Already Linked/Linked grids — same small square
   icon-button-with-trash-icon convention used everywhere else in the app for
   row delete/remove (AccVoucher's own .avc-icon-btn, OrderEntry's
   .oe-icon-btn, InvVoucher's .iv-icon-btn), just sized down to fit this
   grid's tighter row height. Redefined locally rather than reused directly
   because Blazor CSS isolation scopes each component's own stylesheet. */
.vcl-icon-btn[b-y8uj7vi9re] {
    height: 26px;
    width: 26px;
    border: 1.5px solid #d6dbe0;
    border-radius: 6px;
    background: #fff;
    color: #9aa3af;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
}

    .vcl-icon-btn:hover[b-y8uj7vi9re] {
        color: #dc2626;
        border-color: #fca5a5;
        background: #fef2f2;
    }

.vcl-th-sub[b-y8uj7vi9re] {
    font-size: 11px;
    color: #64748b;
    font-weight: 400;
}

.vcl-vnum-link[b-y8uj7vi9re] {
    color: #1565c0;
    cursor: pointer;
}

    .vcl-vnum-link:hover[b-y8uj7vi9re] {
        text-decoration: underline;
    }

.vcl-cross-in[b-y8uj7vi9re] {
    width: 90px;
    padding: 3px 6px;
    border: 1px solid #d6dbe0;
    border-radius: 4px;
    text-align: right;
    font-size: 12.5px;
    font-family: inherit;
}

/* ── Footer row (Account tab's save icon / record count / totals) ──
   Sticky to the bottom of the viewport so Save stays reachable without
   scrolling all the way down past the grids above it. */
.vcl-footer-row[b-y8uj7vi9re] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 10px;
    background: #f2f2f2;
    border-top: 1px solid #d6dbe0;
    border-radius: 0 0 6px 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #1a2537;
    position: sticky;
    bottom: 0;
    z-index: 5;
    box-shadow: 0 -2px 6px rgba(15, 23, 42, .06);
}

    .vcl-footer-row .num[b-y8uj7vi9re] {
        text-align: right;
        min-width: 90px;
    }

.vcl-footer-sigma[b-y8uj7vi9re] {
    margin-left: auto;
    color: #64748b;
}

.vcl-records-count[b-y8uj7vi9re] {
    color: #64748b;
    font-weight: 600;
}

/* Save button — matches the same primary-button look used by the other
   voucher forms' own Save buttons (ChallanEntry's che-btn-primary,
   CrossLink.razor's xl-btn.primary, AccVoucher's avc-primary-btn): teal
   fill, white text/icon, same padding/radius/weight. Redefined locally
   (rather than referencing those classes directly) because Blazor CSS
   isolation scopes each component's own stylesheet — see
   CrossLink.razor.css's identical "must be redefined here" notes for
   .le-toptabs/.itb-page. */
.vcl-save-btn[b-y8uj7vi9re] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2px;
    background: #1ab99a;
    color: #fff;
    border: 1px solid #1ab99a;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}

    .vcl-save-btn:hover[b-y8uj7vi9re] {
        background: #159a80;
        border-color: #159a80;
    }

    .vcl-save-btn i[b-y8uj7vi9re] {
        font-size: 13px;
    }

/* Wraps the standalone Save button on the Inventory/Order/PUR tabs (the
   Account tab's own Save sits inside .vcl-footer-row instead) — same sticky
   treatment so it stays reachable without scrolling. */
.vcl-save-sticky[b-y8uj7vi9re] {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-top: 6px;
    z-index: 5;
}

/* ── Inventory/Order/PUR: item-summary (left) + Linked/Yet-to-Link (right) split ── */
.vcl-split[b-y8uj7vi9re] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.vcl-split-left[b-y8uj7vi9re] {
    flex: 0 0 320px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vcl-split-right[b-y8uj7vi9re] {
    flex: 1 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 900px) {
    .vcl-split-left[b-y8uj7vi9re],
    .vcl-split-right[b-y8uj7vi9re] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/Transactions/Voucher/VoucherDocumentsPanel.razor.rz.scp.css */
/* =====================================================
   VoucherDocumentsPanel.razor.css
   Extracted from ChallanEntry's dOcuments tab — kept its own
   --vdp-* custom properties (same values ChallanEntry used under
   --che-*) rather than depending on the host page's vars, so this
   renders correctly no matter which voucher page (Challan, InvVoucher,
   AccVoucher, OrderEntry, ...) drops it in.
   ===================================================== */

.vdp-card[b-qgo9x34ykl] {
    --vdp-accent: #1AB99A;
    --vdp-accent-dark: #0d9480;
    --vdp-accent-bg: #eafbf6;
    --vdp-border: #e2e8f0;
    --vdp-border-strong: #cbd5e1;
    --vdp-text: #1e293b;
    --vdp-muted: #64748b;
    --vdp-muted-light: #94a3b8;
    --vdp-danger: #dc2626;
    --vdp-danger-bg: #fef2f2;
    font-size: 13px;
    color: var(--vdp-text);
    background: #fafbfc;
    border: 1px solid var(--vdp-border);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.vdp-title[b-qgo9x34ykl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--vdp-text);
    margin-bottom: 16px;
}

    .vdp-title i[b-qgo9x34ykl] {
        color: var(--vdp-accent-dark);
    }

.vdp-infobar[b-qgo9x34ykl] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.vdp-info-box[b-qgo9x34ykl] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--vdp-border);
    border-radius: 8px;
    padding: 10px 16px;
    flex: 1 1 160px;
    min-width: 140px;
}

.vdp-info-icon[b-qgo9x34ykl] {
    color: var(--vdp-accent-dark);
    font-size: 15px;
    flex-shrink: 0;
}

.vdp-active-chk[b-qgo9x34ykl] {
    width: 16px;
    height: 16px;
    accent-color: var(--vdp-muted-light);
}

.vdp-info-label[b-qgo9x34ykl] {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--vdp-muted-light);
    margin-bottom: 1px;
}

.vdp-info-val[b-qgo9x34ykl] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vdp-text);
}

.vdp-tagfile-row[b-qgo9x34ykl] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.vdp-tagfile-btn[b-qgo9x34ykl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--vdp-border-strong);
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vdp-text);
    cursor: pointer;
    white-space: nowrap;
}

    .vdp-tagfile-btn:hover[b-qgo9x34ykl] {
        border-color: var(--vdp-accent);
    }

    .vdp-tagfile-btn i[b-qgo9x34ykl] {
        color: var(--vdp-accent-dark);
    }

.vdp-tagfile-hint[b-qgo9x34ykl] {
    font-size: 12px;
    font-style: italic;
    color: var(--vdp-accent-dark);
}

.vdp-choosefile-row[b-qgo9x34ykl] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.vdp-fields-row[b-qgo9x34ykl] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.vdp-field[b-qgo9x34ykl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 220px;
    min-width: 160px;
}

.vdp-field-type[b-qgo9x34ykl] {
    flex: 0 1 200px;
}

.vdp-field-label[b-qgo9x34ykl] {
    font-size: 12px;
    color: var(--vdp-muted);
    font-weight: 600;
}

.vdp-upload[b-qgo9x34ykl] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vdp-file-btn[b-qgo9x34ykl] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--vdp-border-strong);
    border-radius: 8px;
    padding: 9px 16px;
    color: var(--vdp-text);
    cursor: pointer;
    white-space: nowrap;
    transition: .12s;
}

    .vdp-file-btn:hover[b-qgo9x34ykl] {
        border-color: var(--vdp-accent);
        color: var(--vdp-accent-dark);
    }

    .vdp-file-btn[b-qgo9x34ykl]  input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
    }

.vdp-file-name[b-qgo9x34ykl] {
    font-size: 12.5px;
    color: var(--vdp-muted);
}

.vdp-desc[b-qgo9x34ykl] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--vdp-border-strong);
    border-radius: 8px;
    font-size: 13px;
}

[b-qgo9x34ykl] .vdp-type {
    width: 100%;
}

.vdp-save-btn[b-qgo9x34ykl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 200px;
    min-width: 160px;
    height: 42px;
    background: var(--vdp-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .12s;
}

    .vdp-save-btn:hover:not(:disabled)[b-qgo9x34ykl] {
        background: var(--vdp-accent-dark);
    }

    .vdp-save-btn:disabled[b-qgo9x34ykl] {
        background: #9fdcce;
        cursor: not-allowed;
    }

.vdp-cancel-btn[b-qgo9x34ykl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: #fff;
    color: var(--vdp-muted);
    border: 1px solid var(--vdp-border-strong);
    border-radius: 8px;
    cursor: pointer;
    transition: .12s;
}

    .vdp-cancel-btn:hover[b-qgo9x34ykl] {
        border-color: var(--vdp-danger);
        color: var(--vdp-danger);
    }

.vdp-msg[b-qgo9x34ykl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
}

.vdp-msg-ok[b-qgo9x34ykl] {
    color: var(--vdp-accent-dark);
    background: var(--vdp-accent-bg);
}

.vdp-msg-err[b-qgo9x34ykl] {
    color: var(--vdp-danger);
    background: var(--vdp-danger-bg);
}

.vdp-msg-info[b-qgo9x34ykl] {
    color: var(--vdp-muted);
    background: #f1f5f9;
}

.vdp-file-btn-disabled[b-qgo9x34ykl] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

.vdp-grid-wrap[b-qgo9x34ykl] {
    border: 1px solid var(--vdp-border);
    border-radius: 10px;
    overflow: auto;
}

.vdp-table[b-qgo9x34ykl] {
    width: 100%;
    border-collapse: collapse;
}

    .vdp-table thead th[b-qgo9x34ykl] {
        background: #306B9C;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        padding: 10px 8px;
        text-align: left;
    }

    .vdp-table td[b-qgo9x34ykl] {
        padding: 8px;
        font-size: 12.5px;
        border-bottom: 1px solid var(--vdp-border);
    }

.vdp-filename[b-qgo9x34ykl] {
    color: var(--vdp-accent-dark);
    font-weight: 600;
}

.vdp-view-btn[b-qgo9x34ykl] {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .vdp-view-btn:hover[b-qgo9x34ykl] {
        text-decoration: underline;
    }

    .vdp-view-btn i[b-qgo9x34ykl] {
        color: var(--vdp-muted-light);
    }

.vdp-row-actions[b-qgo9x34ykl] {
    text-align: center;
}

    .vdp-row-actions button[b-qgo9x34ykl] {
        background: none;
        border: none;
        color: var(--vdp-muted);
        cursor: pointer;
        font-size: 13px;
        padding: 3px 5px;
    }

        .vdp-row-actions button:hover[b-qgo9x34ykl] {
            color: var(--vdp-danger);
        }

.vdp-empty[b-qgo9x34ykl] {
    text-align: center;
    color: var(--vdp-muted-light);
    font-size: 12.5px;
    padding: 20px !important;
}

/* ── Document preview popup — overlay+centered-panel, same convention as
   the other modals across the voucher pages. ── */
.vdp-prev-overlay[b-qgo9x34ykl] {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 30, .55);
    z-index: 1300;
}

.vdp-prev-modal[b-qgo9x34ykl] {
    position: fixed;
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: min(700px, 94vw);
    height: 88vh;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
    z-index: 1301;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vdp-prev-hdr[b-qgo9x34ykl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #306B9C;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}

.vdp-prev-x[b-qgo9x34ykl] {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.vdp-prev-body[b-qgo9x34ykl] {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    min-height: 0;
}

.vdp-prev-img[b-qgo9x34ykl] {
    max-width: 100%;
    max-height: 100%;
}

.vdp-prev-frame[b-qgo9x34ykl] {
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 767px) {
    .vdp-prev-modal[b-qgo9x34ykl] {
        width: 96vw;
        height: 92vh;
        top: 3%;
    }
}
/* /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/Autofill/InvItemAutofill.razor.rz.scp.css */
/* Components/Shared/InvItemAutofill.razor.css
   Self-contained tokens (doesn't rely on the host page defining --che-*/--iv-*
   vars) since this is a shared component used from multiple pages. */

.ia-wrap[b-948ollbsmo] {
    position: relative;
    display: block;
}

[b-948ollbsmo] input {
    /* Host pages normally pass InputClass to control this, but this is the
       fallback so the box never renders unstyled if InputClass is omitted. */
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    background: #f8fafc;
    color: #1e293b;
    outline: none;
    transition: .12s;
    width: 100%;
    box-sizing: border-box;
}

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

    [b-948ollbsmo] input:disabled {
        background: #f1f5f9;
        color: #94a3b8;
        cursor: not-allowed;
    }

.ia-spin[b-948ollbsmo] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
}

/* position:absolute here is only a pre-JS fallback (avoids a totally
   unstyled flash before script runs) — app.js's gainsWatchDropdown
   immediately overrides this to position:fixed with real pixel coordinates
   via inline style once OnAfterRenderAsync runs, which is what actually
   lets the list escape a scrollable/overflow ancestor or a CSS Grid/flex
   layout that would otherwise misplace a plain position:absolute dropdown
   (e.g. it rendering pinned to the bottom of the whole page inside
   OrderEntry's quick-add toolbar). Inline styles always win over these
   rules regardless of specificity. */
.ia-suggest[b-948ollbsmo] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 10px 28px rgba(15,23,42,.12);
}

/* Hidden until app.js has computed the fixed top/left/width, so the list
   never flashes at its pre-JS fallback position for a frame. */
.ia-suggest-hidden[b-948ollbsmo] {
    visibility: hidden;
}

    .ia-suggest li[b-948ollbsmo] {
        padding: 8px 12px;
        cursor: pointer;
        font-size: 12.5px;
        color: #1e293b;
    }

        .ia-suggest li:hover[b-948ollbsmo],
        .ia-suggest li.active[b-948ollbsmo] {
            background: #eafbf6;
        }

    .ia-suggest li.ia-empty[b-948ollbsmo] {
        color: #94a3b8;
        cursor: default;
        font-style: italic;
    }

        .ia-suggest li.ia-empty:hover[b-948ollbsmo] {
            background: transparent;
        }

.ia-name[b-948ollbsmo] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Shared/Autofill/SchemeAutofill.razor.rz.scp.css */
[b-tc41x24y03] .ia-wrap {
    position: relative;
    width: 100%;
}

[b-tc41x24y03] .ia-spin {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
}

/* Normal document flow (not absolute/fixed) — sits right under the input
   as the next element, so it can never be clipped by a scrollable
   ancestor (e.g. a filter drawer's overflow-y:auto) and never ends up
   positioned somewhere disconnected from the input. Pushes whatever
   comes after it down while open, which is an acceptable trade for
   being simple and always correct. */
[b-tc41x24y03] .ia-suggest {
    margin: 4px 0 0;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    padding: 4px;
    list-style: none;
}

    [b-tc41x24y03] .ia-suggest li {
        display: block;
        width: 100%;
        text-align: left;
        padding: 7px 10px;
        font-size: 12.5px;
        color: #1a2537;
        cursor: pointer;
        border-radius: 5px;
    }

        [b-tc41x24y03] .ia-suggest li:hover,
        [b-tc41x24y03] .ia-suggest li.active {
            background: #f3fcf9;
        }

[b-tc41x24y03] .ia-empty {
    padding: 8px 10px;
    font-size: 12px;
    color: #94a3b8;
    cursor: default;
}

    [b-tc41x24y03] .ia-empty:hover {
        background: none;
    }
/* /Components/Shared/Autofill/VoucherLedgerItemAutofill.razor.rz.scp.css */
.lga-wrap[b-i5fvkffxjg] {
    position: relative;
    width: 100%;
}

.lga-spin[b-i5fvkffxjg] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
    pointer-events: none;
}

/* position:absolute here is only a pre-JS fallback (avoids a totally
   unstyled flash before script runs) — app.js's gainsWatchDropdown
   immediately overrides this to position:fixed with real pixel
   coordinates via inline style, which is what actually lets the list
   escape a scrollable/overflow ancestor (e.g. a table wrapper). Inline
   styles always win over these rules regardless of specificity. */
.lga-suggest[b-i5fvkffxjg] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 500;
    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;
}

/* Hidden until app.js has computed the fixed top/left/width, so the list
   never flashes at its pre-JS fallback position for a frame. */
.lga-suggest-hidden[b-i5fvkffxjg] {
    visibility: hidden;
}

.lga-suggest li[b-i5fvkffxjg] {
    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-i5fvkffxjg],
.lga-suggest li.active[b-i5fvkffxjg] {
    background: #eef4fb;
}

.lga-suggest li.lga-empty[b-i5fvkffxjg] {
    cursor: default;
    color: #94a3b8;
    font-size: 12.5px;
}

.lga-suggest li.lga-empty:hover[b-i5fvkffxjg] {
    background: transparent;
}

.lga-name[b-i5fvkffxjg] {
    font-weight: 500;
}
/* /Components/Shared/BatchLotQtyModal.razor.rz.scp.css */
.blq-overlay[b-hr624q4nxj] {
    --blq-header-bg: #306B9C;
    --blq-border: #d7dde3;
    --blq-row-alt: #f4f6f8;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    align-items: flex-start;
    justify-content: center;
    z-index: 1050;
}

.blq-modal[b-hr624q4nxj] {
    background: #fff;
    width: 760px;
    max-width: 95vw;
    margin-top: 6vh;
    max-height: 82vh;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.blq-header[b-hr624q4nxj] {
    background: var(--blq-header-bg);
    color: #fff;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    flex-shrink: 0;
}

.blq-close[b-hr624q4nxj] {
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.blq-grid[b-hr624q4nxj] {
    width: 100%;
    border-collapse: collapse;
    flex: 1;
    overflow: auto;
    min-height: 0;
}

    .blq-grid thead th[b-hr624q4nxj] {
        background: var(--blq-header-bg);
        color: #fff;
        text-align: left;
        padding: 6px 8px;
        font-size: 13px;
        position: sticky;
        top: 0;
    }

    .blq-grid tbody td[b-hr624q4nxj] {
        padding: 6px 8px;
        border-bottom: 1px solid var(--blq-border);
        font-size: 13px;
    }

    .blq-grid tbody tr:nth-child(even)[b-hr624q4nxj] {
        background: var(--blq-row-alt);
    }

.blq-in[b-hr624q4nxj] {
    width: 100%;
    box-sizing: border-box;
    padding: 3px 5px;
    border: 1px solid var(--blq-border);
    border-radius: 3px;
    font-size: 13px;
}

.blq-num[b-hr624q4nxj] {
    text-align: right;
}

.blq-in:disabled[b-hr624q4nxj] {
    background: #eee;
    color: #888;
}

.blq-row-del[b-hr624q4nxj] {
    border: none;
    background: transparent;
    color: #c0392b;
    cursor: pointer;
    font-weight: 700;
}

.blq-add-btn[b-hr624q4nxj] {
    border: 1px solid var(--blq-header-bg);
    background: #fff;
    color: var(--blq-header-bg);
    border-radius: 3px;
    padding: 6px 14px;
    cursor: pointer;
}

.blq-loading[b-hr624q4nxj] {
    padding: 20px;
    text-align: center;
    color: #666;
}

.blq-footer[b-hr624q4nxj] {
    padding: 10px 12px;
    border-top: 1px solid var(--blq-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.blq-set-btn[b-hr624q4nxj] {
    background: var(--blq-header-bg);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 6px 28px;
    cursor: pointer;
    font-weight: 600;
    margin-left: auto;
}

.blq-error[b-hr624q4nxj] {
    color: #b91c1c;
    font-size: 12.5px;
    padding: 4px 12px 0;
    flex-shrink: 0;
}

/* ?? Header/body column alignment � headers were always left-aligned
   regardless of column type, so numeric columns (Qty/Qty1/Batch Qty/
   Batch Qty1) drifted left of their right-aligned data below them.
   th.blq-num needed (".blq-grid thead th" beats plain ".blq-num" on
   specificity otherwise, same reason ChallanGrid needed .db-table-th.ch-num). ?? */
.blq-grid thead th.blq-num[b-hr624q4nxj] {
    text-align: right;
}

.blq-center[b-hr624q4nxj] {
    text-align: center;
}

/* Right-align text typed into numeric inputs so it lines up under the
   right-aligned header/label cells beside it. */
.blq-num .blq-in[b-hr624q4nxj] {
    text-align: right;
}
/* /Components/Shared/CollapsibleCard.razor.rz.scp.css */
/* Compact ERP-style collapsible section card — gradient header, chevron. */

.cc-card[b-3spza5bpf9] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    margin-bottom: 10px;
    overflow: hidden;
}

.cc-header[b-3spza5bpf9] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    padding: 0 14px;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    background-image: linear-gradient(to left, rgba(126,179,148,.2), rgba(126,179,148,0), rgba(126,179,148,0), rgba(130,202,215,.2));
    cursor: pointer;
    text-align: left;
}

.cc-header:focus-visible[b-3spza5bpf9] {
    outline: 2px solid #1ab99a;
    outline-offset: -2px;
}

.cc-title[b-3spza5bpf9] {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: .8rem;
    font-weight: 600;
    color: #234;
    letter-spacing: .01em;
}

.cc-caret[b-3spza5bpf9] {
    color: #64748b;
    font-size: .72rem;
    transition: transform .15s ease;
}

.cc-body[b-3spza5bpf9] {
    padding: 12px 14px;
}
/* /Components/Shared/Dropdown/DocumentTypeDropdown.razor.rz.scp.css */
/* Components/Shared/Dropdown/DocumentTypeDropdown.razor.css */

.dtd-select[b-mluhdlvwq2] {
    width: 100%;
    padding: 8px 30px 8px 10px;
    font-size: 12.5px;
    font-family: inherit;
    color: #1e293b;
    background: #fff;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;

    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

    .dtd-select:hover[b-mluhdlvwq2] {
        border-color: #94a3b8;
    }

    .dtd-select:focus[b-mluhdlvwq2] {
        outline: none;
        border-color: #14b8a6;
        box-shadow: 0 0 0 3px rgba(20, 184, 166, .15);
    }

    .dtd-select:disabled[b-mluhdlvwq2] {
        background-color: #f1f5f9;
        color: #94a3b8;
        cursor: not-allowed;
        opacity: .8;
    }
/* /Components/Shared/FooterToolbar.razor.rz.scp.css */
/* Sticky bottom action bar shell. Buttons declared in the calling page get
   styled there (see SalesRepEdit.razor.css) — CSS isolation scopes them to
   that file, not this one. */

.ft-bar[b-skqp3yi2l7] {
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -2px 6px rgba(15, 23, 42, .05);
}

@media (max-width: 576px) {
    .ft-bar[b-skqp3yi2l7] {
        justify-content: center;
    }
}
/* /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;
}

/* position:absolute here is only a pre-JS fallback (avoids a totally
   unstyled flash before script runs) — app.js's gainsWatchDropdown
   immediately overrides this to position:fixed with real pixel
   coordinates via inline style, which is what actually lets the list
   escape a scrollable/overflow ancestor (e.g. a table wrapper). Inline
   styles always win over these rules regardless of specificity. */
.lga-suggest[b-ao5khswua8] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 500;
    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;
}

/* Hidden until app.js has computed the fixed top/left/width, so the list
   never flashes at its pre-JS fallback position for a frame. */
.lga-suggest-hidden[b-ao5khswua8] {
    visibility: hidden;
}

.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;
}


.ql-vnum-cell[b-dj50c8u2oa] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ql-vsquare-btn[b-dj50c8u2oa] {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

    .ql-vsquare-btn:hover[b-dj50c8u2oa] {
        outline: 2px solid rgba(0, 0, 0, 0.15);
        outline-offset: 1px;
    }

.spr-voucher-modal[b-dj50c8u2oa] {
    width: min(360px, 90vw);
}

.spr-voucher-body[b-dj50c8u2oa] {
    display: flex;
    flex-direction: column;
    padding: 8px 22px 18px;
}

.spr-voucher-row[b-dj50c8u2oa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #eef2f7;
    font-size: 13px;
}

    .spr-voucher-row:last-child[b-dj50c8u2oa] {
        border-bottom: none;
    }

    .spr-voucher-row span[b-dj50c8u2oa] {
        color: #64748b;
    }

    .spr-voucher-row strong[b-dj50c8u2oa] {
        color: #1a2537;
        text-align: right;
    }
/* /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/SearchBar.razor.rz.scp.css */
/* SearchBar.razor.css — plain textbox + teal GO button, matches the legacy
   TaxClass Master search box exactly (no icon, no live search). */

.tcm-search[b-3elzq7u522] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tcm-search-input[b-3elzq7u522] {
    width: 220px;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
    color: #333;
    font-family: inherit;
    outline: none;
    background: #fff;
}

    .tcm-search-input:focus[b-3elzq7u522] {
        border-color: #1ab99a;
        box-shadow: 0 0 0 3px rgba(26,185,154,0.15);
    }

.tcm-go-btn[b-3elzq7u522] {
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #1ab99a;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

    .tcm-go-btn:hover[b-3elzq7u522] {
        background: #159a80;
    }

@media (max-width: 480px) {
    .tcm-search[b-3elzq7u522] {
        flex-wrap: wrap;
    }

    .tcm-search-input[b-3elzq7u522] {
        width: 100%;
    }
}
/* /Components/Shared/UntaggedFilesPopup.razor.rz.scp.css */
.uf-overlay[b-b4k774xcuw] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3vh 16px;
    z-index: 2000;
}

.uf-modal[b-b4k774xcuw] {
    --uf-accent: #1AB99A;
    --uf-accent-dark: #0d9480;
    --uf-danger: #dc2626;
    --uf-text: #1e293b;
    --uf-muted: #64748b;
    width: 720px;
    max-width: 100%;
    max-height: 90vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 13px;
    color: var(--uf-text);
}

.uf-hdr[b-b4k774xcuw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--uf-accent), var(--uf-accent-dark));
    color: #fff;
    flex-shrink: 0;
}

.uf-hdr-title[b-b4k774xcuw] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15.5px;
    font-weight: 700;
}

.uf-close[b-b4k774xcuw] {
    background: rgba(255,255,255,.18);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: .12s;
}
.uf-close:hover[b-b4k774xcuw] { background: rgba(255,255,255,.32); }

.uf-body[b-b4k774xcuw] {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.uf-filters[b-b4k774xcuw] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.uf-field[b-b4k774xcuw] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.uf-field label[b-b4k774xcuw] {
    font-size: 11px;
    font-weight: 700;
    color: var(--uf-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.uf-field-grow[b-b4k774xcuw] { flex: 1 1 220px; }

.uf-daterow[b-b4k774xcuw] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.uf-clear-c-btn[b-b4k774xcuw] {
    width: 34px;
    height: 34px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 9px;
    font-weight: 700;
    color: var(--uf-muted);
    cursor: pointer;
    flex-shrink: 0;
}
.uf-clear-c-btn:hover[b-b4k774xcuw] { border-color: var(--uf-accent); color: var(--uf-accent-dark); }

.uf-input[b-b4k774xcuw] {
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 13px;
    background: #f8fafc;
    transition: .12s;
}
.uf-input:focus[b-b4k774xcuw] {
    outline: none;
    border-color: var(--uf-accent);
    background: #fff;
}

.uf-searchbox[b-b4k774xcuw] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 8px 12px;
    background: #f8fafc;
}
.uf-searchbox i[b-b4k774xcuw] { color: var(--uf-muted); font-size: 12px; }
.uf-searchbox input[b-b4k774xcuw] {
    border: none;
    background: none;
    outline: none;
    font-size: 13px;
    flex: 1;
}

.uf-chk-inline[b-b4k774xcuw] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--uf-muted);
    white-space: nowrap;
    padding-bottom: 8px;
}

.uf-toolbar[b-b4k774xcuw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.uf-segmented[b-b4k774xcuw] {
    display: flex;
    background: #f1f5f9;
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
}
.uf-segmented button[b-b4k774xcuw] {
    border: none;
    background: none;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--uf-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: .12s;
}
.uf-seg-active[b-b4k774xcuw] {
    background: #fff !important;
    color: var(--uf-accent-dark) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.uf-toolbar-right[b-b4k774xcuw] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.uf-choosefile-btn[b-b4k774xcuw] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #f1f5f9;
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--uf-text);
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}
.uf-choosefile-btn input[type=file][b-b4k774xcuw] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.uf-choosefile-name[b-b4k774xcuw] {
    font-size: 12px;
    color: var(--uf-muted);
    white-space: nowrap;
}

.uf-uploadbtn[b-b4k774xcuw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    background: var(--uf-accent-dark);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: .12s;
}
.uf-uploadbtn:hover:not(:disabled)[b-b4k774xcuw] { background: #0b7d6a; }
.uf-uploadbtn:disabled[b-b4k774xcuw] { opacity: .6; cursor: not-allowed; }

.uf-clearbtn[b-b4k774xcuw], .uf-searchbtn[b-b4k774xcuw] {
    border: none;
    border-radius: 9px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    transition: .12s;
}
.uf-clearbtn[b-b4k774xcuw] {
    background: #f1f5f9;
    color: var(--uf-text);
}
.uf-clearbtn:hover[b-b4k774xcuw] { background: #e2e8f0; }

.uf-searchbtn[b-b4k774xcuw] {
    background: var(--uf-accent);
    color: #fff;
    padding: 8px 12px;
}
.uf-searchbtn:hover[b-b4k774xcuw] { background: var(--uf-accent-dark); }

.uf-msg[b-b4k774xcuw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
}
.uf-msg-err[b-b4k774xcuw] { background: #fef2f2; color: var(--uf-danger); }
.uf-msg-ok[b-b4k774xcuw] { background: #eafbf6; color: var(--uf-accent-dark); }

.uf-listwrap[b-b4k774xcuw] {
    border: 1px solid #eef2f6;
    border-radius: 12px;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.uf-state[b-b4k774xcuw] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--uf-muted);
    font-size: 13px;
    padding: 40px;
}
.uf-state-empty[b-b4k774xcuw] { flex-direction: column; }
.uf-state-empty i[b-b4k774xcuw] { font-size: 28px; color: #cbd5e1; }

.uf-table[b-b4k774xcuw] {
    width: 100%;
    border-collapse: collapse;
}
.uf-table thead th[b-b4k774xcuw] {
    background: #f8fafc;
    color: var(--uf-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-align: left;
    padding: 10px 14px;
    position: sticky;
    top: 0;
    border-bottom: 1px solid #eef2f6;
}
.uf-th-chk[b-b4k774xcuw] { width: 40px; text-align: center !important; }
.uf-th-num[b-b4k774xcuw] { text-align: right !important; width: 90px; }

.uf-table tbody tr[b-b4k774xcuw] {
    cursor: pointer;
    transition: .1s;
}
.uf-table tbody td[b-b4k774xcuw] {
    padding: 10px 14px;
    font-size: 13px;
    border-bottom: 1px solid #f4f6f8;
}
.uf-table tbody tr:hover[b-b4k774xcuw] { background: #f8fafc; }
.uf-row-sel[b-b4k774xcuw] { background: #eafbf6 !important; }

.uf-fname-cell[b-b4k774xcuw] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.uf-fname-cell i[b-b4k774xcuw] { color: var(--uf-muted); font-size: 14px; }

.uf-fname-link[b-b4k774xcuw] {
    color: var(--uf-text);
    font-weight: 600;
    cursor: pointer;
}
.uf-fname-link:hover[b-b4k774xcuw] { color: var(--uf-accent-dark); text-decoration: underline; }

.uf-tiles[b-b4k774xcuw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
}

.uf-tile[b-b4k774xcuw] {
    position: relative;
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    padding: 8px 8px 10px;
    text-align: center;
    cursor: pointer;
    transition: .12s;
}
.uf-tile:hover[b-b4k774xcuw] { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.uf-tile-sel[b-b4k774xcuw] {
    border-color: var(--uf-accent) !important;
    background: #eafbf6;
}

.uf-tile-thumbwrap[b-b4k774xcuw] {
    position: relative;
    width: 100%;
    height: 92px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    margin-bottom: 8px;
}

.uf-tile-chk[b-b4k774xcuw] {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
}

.uf-tile-ext[b-b4k774xcuw] {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    background: var(--uf-accent-dark);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 2px 6px;
    border-radius: 5px;
}

.uf-tile-thumb[b-b4k774xcuw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.uf-tile-thumb-pdf[b-b4k774xcuw] {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    background: #fff;
}

.uf-tile-fallback[b-b4k774xcuw] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uf-tile-fallback i[b-b4k774xcuw] {
    font-size: 32px;
    color: var(--uf-accent-dark);
}

.uf-tile-name[b-b4k774xcuw] {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.uf-tile-name:hover[b-b4k774xcuw] { color: var(--uf-accent-dark); }

.uf-tile-meta[b-b4k774xcuw] {
    font-size: 10.5px;
    color: var(--uf-muted);
}

.uf-foot[b-b4k774xcuw] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    background: #f8fafc;
    border-top: 1px solid #eef2f6;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.uf-foot-left[b-b4k774xcuw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.uf-iconbtn[b-b4k774xcuw] {
    width: 34px;
    height: 34px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 9px;
    color: var(--uf-muted);
    cursor: pointer;
    transition: .12s;
}
.uf-iconbtn:hover:not(:disabled)[b-b4k774xcuw] { border-color: #cbd5e1; color: var(--uf-text); }
.uf-iconbtn:disabled[b-b4k774xcuw] { opacity: .4; cursor: not-allowed; }
.uf-iconbtn-danger:hover:not(:disabled)[b-b4k774xcuw] { border-color: var(--uf-danger); color: var(--uf-danger); }

.uf-count[b-b4k774xcuw] {
    font-size: 12px;
    color: var(--uf-muted);
    white-space: nowrap;
}

.uf-pager[b-b4k774xcuw] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.uf-pager-label[b-b4k774xcuw] {
    font-size: 12.5px;
    color: var(--uf-muted);
    padding: 0 6px;
    white-space: nowrap;
}
.uf-pager button[b-b4k774xcuw] {
    width: 28px;
    height: 28px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 7px;
    cursor: pointer;
    font-size: 11px;
    color: var(--uf-muted);
}
.uf-pager button:hover:not(:disabled)[b-b4k774xcuw] { border-color: #cbd5e1; color: var(--uf-text); }
.uf-pager button:disabled[b-b4k774xcuw] { opacity: .4; cursor: not-allowed; }

.uf-savebtn[b-b4k774xcuw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--uf-accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .12s;
    white-space: nowrap;
}
.uf-savebtn:hover:not(:disabled)[b-b4k774xcuw] { background: var(--uf-accent-dark); }
.uf-savebtn:disabled[b-b4k774xcuw] { background: #cbd5e1; cursor: not-allowed; }

@media (max-width: 700px) {
    .uf-modal[b-b4k774xcuw] { border-radius: 12px; max-height: 94vh; }
    .uf-foot[b-b4k774xcuw] { flex-direction: column; align-items: stretch; }
    .uf-pager[b-b4k774xcuw] { margin-left: 0; justify-content: center; }
    .uf-savebtn[b-b4k774xcuw] { justify-content: center; }
}

/* In-app file preview — opened from clicking a filename in list/tiles. */
.uf-prev-overlay[b-b4k774xcuw] {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 30, .6);
    z-index: 2100;
}

.uf-prev-modal[b-b4k774xcuw] {
    --uf-accent: #1AB99A;
    --uf-accent-dark: #0d9480;
    --uf-text: #1e293b;
    --uf-muted: #64748b;
    position: fixed;
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: min(720px, 94vw);
    height: 88vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    z-index: 2101;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.uf-prev-hdr[b-b4k774xcuw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--uf-accent), var(--uf-accent-dark));
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    flex-shrink: 0;
}

.uf-prev-hdr span[b-b4k774xcuw] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uf-prev-x[b-b4k774xcuw] {
    background: rgba(255,255,255,.18);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: .12s;
}
.uf-prev-x:hover[b-b4k774xcuw] { background: rgba(255,255,255,.32); }

.uf-prev-body[b-b4k774xcuw] {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 0;
    background: #f1f5f9;
}

.uf-prev-img[b-b4k774xcuw] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

.uf-prev-frame[b-b4k774xcuw] {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 6px;
    background: #fff;
}

.uf-prev-foot[b-b4k774xcuw] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 18px;
    border-top: 1px solid #eef2f6;
    background: #fff;
    flex-shrink: 0;
}

.uf-prev-close-btn[b-b4k774xcuw] {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: var(--uf-text);
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.uf-prev-close-btn:hover[b-b4k774xcuw] { border-color: #cbd5e1; }

@media (max-width: 767px) {
    .uf-prev-modal[b-b4k774xcuw] {
        width: 96vw;
        height: 92vh;
        top: 3%;
    }
}
/* /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;
}