around each component caps the
space Blazor gives that subtree in the grid layout.
2) That alone still isn't guaranteed to shrink the
INSIDE
LedgerAutofill/ItemAutofill — those are separate components with their
own CSS-isolation scope, so a plain selector like ".lga-wrap" or
".lga-wrap input" written here never matches them at all (regardless of
!important — !important only wins a specificity fight AFTER a selector
matches; it does nothing if the selector never matches in the first
place). ::deep is the Blazor-supported escape hatch for exactly this:
it tells the compiler not to require its own scope attribute on
everything after it, so the rule reaches into the child's rendered DOM.
This is the piece that was actually missing before. ── */
.mu-filter-grid .mu-narrow-fld[b-xwc522vz9z] {
max-width: 160px !important;
width: 100%;
}
.mu-filter-grid[b-xwc522vz9z] .lga-wrap,
.mu-filter-grid[b-xwc522vz9z] .ia-wrap {
max-width: 160px !important;
width: 100% !important;
}
.mu-filter-grid[b-xwc522vz9z] .lga-wrap input,
.mu-filter-grid[b-xwc522vz9z] .ia-wrap input {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
/* ── #4: toaster strip — sits flush against the filter block's bottom edge
(zero top margin/gap) so it reads as an extension of the filter card
rather than a separate floating box. Auto-hides itself after a few
seconds (see ShowToast/AutoHideToastAsync in the .razor). ── */
.mu-toast[b-xwc522vz9z] {
margin: 0;
padding: 10px 16px;
font-size: 13px;
border-top: 1px solid transparent;
}
.mu-toast-error[b-xwc522vz9z] {
background: #fef2f2;
color: #b91c1c;
border-top-color: #fca5a5;
}
.mu-toast-info[b-xwc522vz9z] {
background: #eff6ff;
color: #1d4ed8;
border-top-color: #93c5fd;
}
/* ── header colour + numeric-column alignment + sortable headers.
!important throughout this block — a prior pass without it rendered as the
theme's default dark header, so something in the global masters-forms.css
cascade (load order or a more specific rule) was beating a page-scoped
override; forcing it removes the ambiguity. If it's STILL not blue after
this, the browser is very likely serving a cached
.styles.css
bundle — hard-refresh (Ctrl+F5) after the rebuild, since Blazor's scoped
CSS is bundled at build time, not hot-served per file. ── */
.mu-table thead th[b-xwc522vz9z] {
background: #306B9C !important;
color: #fff !important;
}
/* #5: no hover effect on header cells — force the same colour on hover so
whatever hover rule masters-forms.css defines for thead th can't turn it
white/grey on mouseover. */
.mu-table thead th:hover[b-xwc522vz9z],
.mu-th-sort:hover[b-xwc522vz9z] {
background: #306B9C !important;
color: #fff !important;
}
.mu-th-sort[b-xwc522vz9z] {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.mu-sort-ic[b-xwc522vz9z] {
display: inline-block;
min-width: 10px;
margin-left: 4px;
font-size: 10px;
}
/* #3: numeric columns (amounts/ids) right-align — data cell AND its header,
text columns stay left-aligned. Column "numeric-ness" is computed per
page in IsNumericColumn() since the schema varies by ReportType. */
.mu-table td.num[b-xwc522vz9z],
.mu-table thead th.num[b-xwc522vz9z] {
text-align: right !important;
font-variant-numeric: tabular-nums;
}
/* #7: GO button in the house blue, matching the header. */
.mu-go-btn[b-xwc522vz9z] {
background: #306B9C !important;
border-color: #306B9C !important;
color: #fff !important;
}
.mu-go-btn:hover:not(:disabled)[b-xwc522vz9z] {
background: #275a83;
border-color: #275a83;
}
.mu-pager[b-xwc522vz9z] {
display: flex;
align-items: center;
gap: 8px;
}
.mu-pager-size[b-xwc522vz9z] {
max-width: 120px;
width: auto;
}
.mu-pager-info[b-xwc522vz9z] {
font-size: 12.5px;
color: #64748b;
white-space: nowrap;
}
@media (max-width: 900px) {
.mu-filter-grid[b-xwc522vz9z] {
grid-template-columns: auto 1fr;
}
.mu-filter-grid .uf-input[b-xwc522vz9z],
.mu-filter-grid select.uf-input[b-xwc522vz9z],
.mu-filter-grid .mu-narrow-fld[b-xwc522vz9z] {
max-width: none !important;
width: auto;
}
.mu-filter-grid[b-xwc522vz9z] .lga-wrap,
.mu-filter-grid[b-xwc522vz9z] .ia-wrap {
max-width: none !important;
}
.mu-pager[b-xwc522vz9z] {
flex-wrap: wrap;
}
}
/* /Components/Pages/Others/CustomizedBSPL.razor.rz.scp.css */
/* =====================================================================
CustomizedBSPL.razor.css
Page-scoped styling
===================================================================== */
/* =====================================================================
MAIN TABLE AREA
===================================================================== */
[b-t5e4b6fdei] .mu-table-wrap {
height: calc(100vh - 300px);
min-height: 300px;
overflow: auto;
}
[b-t5e4b6fdei] .cbspl-card {
overflow: visible;
}
[b-t5e4b6fdei] .cbspl-table {
width: 100%;
min-width: 1180px;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
}
/* =====================================================================
COLUMN WIDTHS
===================================================================== */
[b-t5e4b6fdei] .cbspl-col-row {
width: 55px;
}
[b-t5e4b6fdei] .cbspl-col-tag {
width: 105px;
}
[b-t5e4b6fdei] .cbspl-col-group {
width: 155px;
}
[b-t5e4b6fdei] .cbspl-col-schedule {
width: 165px;
}
[b-t5e4b6fdei] .cbspl-col-ledger {
width: 220px;
}
[b-t5e4b6fdei] .cbspl-col-text {
width: 190px;
}
[b-t5e4b6fdei] .cbspl-col-cal {
width: 145px;
}
[b-t5e4b6fdei] .cbspl-col-drcr {
width: 80px;
}
[b-t5e4b6fdei] .cbspl-col-action {
width: 100px;
}
/* =====================================================================
HEADER
===================================================================== */
[b-t5e4b6fdei] .cbspl-table thead th {
height: 42px;
padding: 8px 9px;
vertical-align: middle;
white-space: nowrap;
}
/* =====================================================================
TABLE CELLS
===================================================================== */
[b-t5e4b6fdei] .cbspl-table tbody td {
height: 48px;
padding: 6px 8px;
vertical-align: middle;
font-size: 13px;
}
[b-t5e4b6fdei] .cbspl-table tbody tr {
vertical-align: middle;
}
/* =====================================================================
ADD ROW
===================================================================== */
[b-t5e4b6fdei] .cbspl-new-row {
background: #f8fafc;
}
[b-t5e4b6fdei] .cbspl-new-row td {
height: 58px;
vertical-align: middle !important;
}
[b-t5e4b6fdei] .cbspl-new-row:hover {
background: #f8fafc;
}
/* =====================================================================
EDIT ROW
===================================================================== */
[b-t5e4b6fdei] .cbspl-edit-row {
background: #f8fbff;
}
[b-t5e4b6fdei] .cbspl-edit-row td {
height: 58px;
vertical-align: middle !important;
}
/* =====================================================================
PENDING ROW
===================================================================== */
[b-t5e4b6fdei] .cbspl-pending-row {
background: #fffdf4;
}
[b-t5e4b6fdei] .cbspl-pending-row:hover {
background: #fff9df;
}
/* =====================================================================
ROW NUMBER
===================================================================== */
[b-t5e4b6fdei] .cbspl-row-number {
text-align: center !important;
color: #667085;
font-weight: 600;
white-space: nowrap;
}
/* =====================================================================
ALL INPUTS
===================================================================== */
[b-t5e4b6fdei] .cbspl-control {
display: block;
width: 100%;
height: 36px;
min-height: 36px;
box-sizing: border-box;
margin: 0;
padding: 6px 10px;
border: 1px solid #cfd7e3;
border-radius: 5px;
background: #ffffff;
color: #253247;
font-family: inherit;
font-size: 13px;
line-height: 22px;
outline: none;
box-shadow: none;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* =====================================================================
SELECT / DROPDOWN
===================================================================== */
[b-t5e4b6fdei] select.cbspl-control {
height: 36px !important;
min-height: 36px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
line-height: 24px !important;
vertical-align: middle;
cursor: pointer;
background-color: #fff;
}
[b-t5e4b6fdei] select.cbspl-control option {
padding: 6px;
font-size: 13px;
color: #253247;
background: #fff;
}
/* Default option */
[b-t5e4b6fdei] select.cbspl-control option[value="0"] {
color: #7d8795;
}
/* =====================================================================
INPUT FOCUS
===================================================================== */
[b-t5e4b6fdei] .cbspl-control:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, .10);
}
/* =====================================================================
DISABLED INPUT
===================================================================== */
[b-t5e4b6fdei] .cbspl-control:disabled {
background-color: #f1f4f8 !important;
color: #8a94a3 !important;
border-color: #d9dee7 !important;
cursor: not-allowed;
opacity: 1;
}
/* =====================================================================
PLACEHOLDER
===================================================================== */
[b-t5e4b6fdei] .cbspl-control::placeholder {
color: #9aa4b2 !important;
opacity: 1 !important;
}
/* =====================================================================
TEXT CELL
===================================================================== */
[b-t5e4b6fdei] .cbspl-text-cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =====================================================================
AMOUNT / DRCR
===================================================================== */
[b-t5e4b6fdei] .bre-amt {
text-align: right !important;
white-space: nowrap;
}
[b-t5e4b6fdei] .bre-drcr {
text-align: center !important;
white-space: nowrap;
}
/* =====================================================================
ACTION AREA
===================================================================== */
[b-t5e4b6fdei] .cbspl-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
white-space: nowrap;
}
/* =====================================================================
ACTION BUTTONS
===================================================================== */
[b-t5e4b6fdei] .obcb-act-btn {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid transparent;
border-radius: 5px;
font-size: 12px;
line-height: 1;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
[b-t5e4b6fdei] .obcb-act-btn i {
font-size: 12px;
}
[b-t5e4b6fdei] .obcb-act-btn:active {
transform: translateY(1px);
}
/* =====================================================================
EDIT BUTTON
===================================================================== */
[b-t5e4b6fdei] .obcb-edit {
color: #1769d1;
background: #eef5ff;
border-color: #bcd5f5;
}
[b-t5e4b6fdei] .obcb-edit:hover {
color: #0d58b7;
background: #dcecff;
border-color: #9fc2ee;
}
/* =====================================================================
DELETE BUTTON
===================================================================== */
[b-t5e4b6fdei] .obcb-del {
color: #dc3545;
background: #fff1f1;
border-color: #f2b8bd;
}
[b-t5e4b6fdei] .obcb-del:hover {
color: #b42330;
background: #ffe0e2;
border-color: #e9999f;
}
/* =====================================================================
SAVE BUTTON
===================================================================== */
[b-t5e4b6fdei] .obcb-save {
color: #218838;
background: #edf9f0;
border-color: #b9dfc1;
}
[b-t5e4b6fdei] .obcb-save:hover {
color: #176b2b;
background: #d9f2df;
border-color: #96cda1;
}
/* =====================================================================
CANCEL BUTTON
===================================================================== */
[b-t5e4b6fdei] .obcb-cancel {
color: #59636f;
background: #f1f3f5;
border-color: #d5dae0;
}
[b-t5e4b6fdei] .obcb-cancel:hover {
color: #343a40;
background: #e5e8eb;
border-color: #c5cbd2;
}
/* =====================================================================
ADD ROW BUTTON
===================================================================== */
[b-t5e4b6fdei] .cbspl-add-btn {
height: 36px;
min-width: 92px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 14px;
border: 1px solid #1769d1;
border-radius: 5px;
background: #1769d1;
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
[b-t5e4b6fdei] .cbspl-add-btn i {
font-size: 11px;
}
[b-t5e4b6fdei] .cbspl-add-btn:hover {
background: #0f5bb8;
border-color: #0f5bb8;
}
[b-t5e4b6fdei] .cbspl-add-btn:active {
transform: translateY(1px);
}
/* =====================================================================
LEDGER PICKER
===================================================================== */
[b-t5e4b6fdei] .cbspl-picker-wrap {
position: relative;
width: 100%;
min-width: 0;
}
/* If picker exposes this wrapper */
[b-t5e4b6fdei] .cbspl-ledpick {
position: relative;
width: 100%;
}
/* Picker input */
[b-t5e4b6fdei] .cbspl-ledpick input {
width: 100%;
height: 36px;
min-height: 36px;
box-sizing: border-box;
margin: 0;
padding: 6px 10px;
border: 1px solid #cfd7e3;
border-radius: 5px;
background: #fff;
color: #253247;
font-size: 13px;
line-height: 22px;
outline: none;
}
[b-t5e4b6fdei] .cbspl-ledpick input:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, .10);
}
[b-t5e4b6fdei] .cbspl-ledpick input:disabled {
background: #f1f4f8 !important;
color: #8a94a3 !important;
border-color: #d9dee7 !important;
}
/* =====================================================================
LEDGER SUGGESTION LIST
===================================================================== */
[b-t5e4b6fdei] .cbspl-ledpick-list {
position: absolute;
top: calc(100% + 3px);
left: 0;
right: 0;
z-index: 1000;
margin: 0;
padding: 4px 0;
list-style: none;
background: #fff;
border: 1px solid #d5dce6;
border-radius: 5px;
box-shadow: 0 8px 20px rgba(20, 30, 50, .15);
max-height: 220px;
overflow-y: auto;
}
[b-t5e4b6fdei] .cbspl-ledpick-list li {
min-height: 32px;
display: flex;
align-items: center;
padding: 6px 10px;
color: #263548;
font-size: 12.5px;
line-height: 18px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[b-t5e4b6fdei] .cbspl-ledpick-list li:hover {
background: #f3f7fc;
}
[b-t5e4b6fdei] .cbspl-ledpick-list .cbspl-ledpick-msg {
color: #94a3b8;
cursor: default;
}
[b-t5e4b6fdei] .cbspl-ledpick-list .cbspl-ledpick-msg:hover {
background: transparent;
}
/* =====================================================================
BS / PL SELECTOR
===================================================================== */
[b-t5e4b6fdei] .cbspl-bspl-selector {
display: flex;
align-items: center;
gap: 28px;
margin: 5px 0 12px 5px;
padding: 0;
min-height: 32px;
}
[b-t5e4b6fdei] .cbspl-check {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
padding: 0;
color: #263548;
font-size: 13px;
font-weight: 600;
line-height: 20px;
cursor: pointer;
}
[b-t5e4b6fdei] .cbspl-check input {
width: 16px;
height: 16px;
margin: 0;
padding: 0;
cursor: pointer;
accent-color: #1769d1;
}
/* =====================================================================
FOOTER
===================================================================== */
[b-t5e4b6fdei] .bspl-footer {
display: flex;
align-items: center;
min-height: 52px;
}
[b-t5e4b6fdei] .bspl-footer-left {
display: flex;
align-items: center;
gap: 10px;
}
[b-t5e4b6fdei] .cbspl-footer-btn {
min-height: 34px;
}
[b-t5e4b6fdei] .mu-foot-info {
margin-left: 4px;
color: #7b8794;
font-size: 12px;
}
/* =====================================================================
NO RECORDS
===================================================================== */
[b-t5e4b6fdei] .cbspl-no-records {
height: 180px;
text-align: center;
vertical-align: middle !important;
}
/* =====================================================================
RESPONSIVE
===================================================================== */
@media (max-width: 1200px) {
[b-t5e4b6fdei] .cbspl-table {
min-width: 1150px;
}
}
@media (max-width: 900px) {
[b-t5e4b6fdei] .mu-table-wrap {
height: calc(100vh - 280px);
min-height: 280px;
}
[b-t5e4b6fdei] .cbspl-table {
min-width: 1100px;
}
[b-t5e4b6fdei] .cbspl-bspl-selector {
gap: 18px;
}
}
/* /Components/Pages/Others/Employee.razor.rz.scp.css */
/* ============================================================
GAINS EMPLOYEE PAGE
Bootstrap-style Employee Registration
============================================================ */
.employee-page[b-jju5p5jr9a] {
height: 100%;
display: flex;
flex-direction: column;
}
/* ============================================================
GRID
============================================================ */
.employee-grid-card[b-jju5p5jr9a] {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.employee-table[b-jju5p5jr9a] {
min-width: 1050px;
}
.employee-link[b-jju5p5jr9a] {
background: transparent;
border: 0;
padding: 0;
color: #1a56a7;
cursor: pointer;
font: inherit;
}
.employee-link:hover[b-jju5p5jr9a] {
text-decoration: underline;
}
/* ============================================================
FORM WRAPPER
============================================================ */
.employee-form-wrapper[b-jju5p5jr9a] {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #ced4da;
border-radius: 4px;
overflow: hidden;
}
/* ============================================================
FORM HEADER
============================================================ */
.employee-form-header[b-jju5p5jr9a] {
min-height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
background: #376091;
color: #fff;
}
.employee-form-header h2[b-jju5p5jr9a] {
margin: 0;
font-size: 15px;
font-weight: 600;
}
.employee-form-header span[b-jju5p5jr9a] {
font-size: 11px;
opacity: .85;
}
.employee-header-info[b-jju5p5jr9a] {
display: flex;
gap: 30px;
align-items: center;
}
.employee-header-info div[b-jju5p5jr9a] {
display: flex;
flex-direction: column;
}
.employee-header-info span[b-jju5p5jr9a] {
font-size: 10px;
opacity: .75;
}
.employee-header-info strong[b-jju5p5jr9a] {
font-size: 12px;
font-weight: 600;
}
/* ============================================================
FORM BODY
============================================================ */
.employee-form-body[b-jju5p5jr9a] {
flex: 1;
min-height: 0;
display: flex;
background: #fff;
}
/* ============================================================
LEFT SIDEBAR
============================================================ */
.employee-sidebar[b-jju5p5jr9a] {
width: 180px;
flex-shrink: 0;
border-right: 1px solid #dee2e6;
background: #f8f9fa;
padding: 8px 0;
overflow-y: auto;
}
.employee-tab[b-jju5p5jr9a] {
width: 100%;
min-height: 35px;
display: flex;
align-items: center;
gap: 9px;
padding: 7px 12px;
border: 0;
border-bottom: 1px solid #dee2e6;
background: transparent;
color: #343a40;
text-align: left;
font-size: 12px;
cursor: pointer;
transition: background .15s ease;
}
.employee-tab i[b-jju5p5jr9a] {
width: 16px;
text-align: center;
color: #6c757d;
}
.employee-tab:hover[b-jju5p5jr9a] {
background: #e9ecef;
}
.employee-tab.active[b-jju5p5jr9a] {
background: #376091;
color: #fff;
font-weight: 600;
}
.employee-tab.active i[b-jju5p5jr9a] {
color: #fff;
}
/* ============================================================
FORM CONTENT
============================================================ */
.employee-content[b-jju5p5jr9a] {
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.employee-section[b-jju5p5jr9a] {
flex: 1;
min-height: 0;
padding: 16px 20px;
overflow-y: auto;
}
.employee-section-title[b-jju5p5jr9a] {
font-size: 13px;
font-weight: 600;
color: #376091;
border-bottom: 1px solid #dee2e6;
padding-bottom: 7px;
margin-bottom: 16px;
}
/* ============================================================
BOOTSTRAP FORM OVERRIDES
============================================================ */
.employee-section .form-label[b-jju5p5jr9a] {
margin-bottom: 4px;
font-size: 12px;
font-weight: 500;
color: #343a40;
}
.employee-section .form-control[b-jju5p5jr9a],
.employee-section .form-select[b-jju5p5jr9a] {
min-height: 32px;
padding: 5px 8px;
font-size: 12px;
border-color: #ced4da;
border-radius: 3px;
}
.employee-section textarea.form-control[b-jju5p5jr9a] {
min-height: 75px;
resize: vertical;
}
.employee-section .form-control:focus[b-jju5p5jr9a],
.employee-section .form-select:focus[b-jju5p5jr9a] {
border-color: #80bdff;
box-shadow: 0 0 0 .15rem rgba(13,110,253,.12);
}
.employee-readonly[b-jju5p5jr9a] {
background-color: #f5f5f5;
}
/* ============================================================
SUB CARDS
============================================================ */
.employee-sub-card[b-jju5p5jr9a] {
margin-top: 18px;
padding: 14px;
border: 1px solid #dee2e6;
border-radius: 4px;
background: #fafafa;
}
.employee-sub-title[b-jju5p5jr9a] {
margin-bottom: 12px;
font-size: 12px;
font-weight: 600;
color: #376091;
}
/* ============================================================
FORM FOOTER
============================================================ */
.employee-form-footer[b-jju5p5jr9a] {
flex-shrink: 0;
min-height: 48px;
display: flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
border-top: 1px solid #dee2e6;
background: #f8f9fa;
}
.employee-form-footer .btn[b-jju5p5jr9a] {
font-size: 12px;
padding: 5px 12px;
}
.employee-form-footer .btn i[b-jju5p5jr9a] {
margin-right: 4px;
}
/* ============================================================
TOAST
============================================================ */
.employee-page .mu-toast[b-jju5p5jr9a] {
z-index: 2000;
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 767px) {
.employee-form-header[b-jju5p5jr9a] {
align-items: flex-start;
gap: 10px;
}
.employee-header-info[b-jju5p5jr9a] {
display: none;
}
.employee-form-body[b-jju5p5jr9a] {
flex-direction: column;
}
.employee-sidebar[b-jju5p5jr9a] {
width: 100%;
display: flex;
overflow-x: auto;
overflow-y: hidden;
border-right: 0;
border-bottom: 1px solid #dee2e6;
padding: 0;
}
.employee-tab[b-jju5p5jr9a] {
flex: 0 0 auto;
width: auto;
min-width: 110px;
justify-content: center;
border-bottom: 0;
border-right: 1px solid #dee2e6;
padding: 9px 12px;
}
.employee-tab span[b-jju5p5jr9a] {
white-space: nowrap;
}
.employee-section[b-jju5p5jr9a] {
padding: 12px;
}
.employee-form-footer[b-jju5p5jr9a] {
flex-wrap: wrap;
}
.employee-form-footer .ms-auto[b-jju5p5jr9a] {
margin-left: 0 !important;
}
}
.employee-grid-container[b-jju5p5jr9a] {
height: calc(100vh - 180px);
min-height: 400px;
display: flex;
flex-direction: column;
border: 1px solid #ddd;
background: #fff;
}
.employee-table-wrapper[b-jju5p5jr9a] {
flex: 1;
min-height: 0;
overflow: auto;
}
.employee-table[b-jju5p5jr9a] {
width: 100%;
border-collapse: collapse;
}
.employee-table thead th[b-jju5p5jr9a] {
position: sticky;
top: 0;
z-index: 10;
background: #f5f5f5;
border-bottom: 1px solid #ddd;
padding: 10px 12px;
text-align: left;
white-space: nowrap;
}
.employee-table tbody td[b-jju5p5jr9a] {
padding: 9px 12px;
border-bottom: 1px solid #eee;
white-space: nowrap;
}
.employee-table tbody tr:hover[b-jju5p5jr9a] {
background: #f8f8f8;
}
/* Bottom footer */
.employee-grid-footer[b-jju5p5jr9a] {
flex-shrink: 0;
min-height: 52px;
padding: 8px 14px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #ddd;
background: #fff;
}
.footer-left[b-jju5p5jr9a] {
display: flex;
align-items: center;
}
.footer-right[b-jju5p5jr9a] {
display: flex;
align-items: center;
gap: 10px;
}
.page-size-select[b-jju5p5jr9a] {
height: 32px;
min-width: 65px;
padding: 3px 8px;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
}
.page-btn[b-jju5p5jr9a] {
width: 32px;
height: 32px;
border: 1px solid #ccc;
background: #fff;
border-radius: 4px;
cursor: pointer;
}
.page-btn:hover:not(:disabled)[b-jju5p5jr9a] {
background: #f2f2f2;
}
.page-btn:disabled[b-jju5p5jr9a] {
opacity: 0.45;
cursor: not-allowed;
}
.page-number[b-jju5p5jr9a] {
min-width: 90px;
text-align: center;
}
.employee-grid-row[b-jju5p5jr9a] {
cursor: pointer;
transition: background-color 0.15s ease;
}
.employee-grid-row:hover[b-jju5p5jr9a] {
background-color: #f3f6fa;
}
.mu-page[b-jju5p5jr9a] {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
/* =========================================================
CARD
========================================================= */
.mu-card[b-jju5p5jr9a] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
background: #fff;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
}
/* =========================================================
TOOLBAR
========================================================= */
.mu-toolbar[b-jju5p5jr9a] {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: #fff;
border-bottom: 1px solid #dee2e6;
}
/* Search */
.mu-search[b-jju5p5jr9a] {
position: relative;
width: 320px;
max-width: 100%;
}
.mu-search i[b-jju5p5jr9a] {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
pointer-events: none;
}
.mu-search input[b-jju5p5jr9a] {
padding-left: 36px;
height: 38px;
border: 1px solid #ced4da;
border-radius: 0.375rem;
font-size: 14px;
}
.mu-search input:focus[b-jju5p5jr9a] {
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
}
/* =========================================================
TABLE CONTAINER
========================================================= */
.mu-table-wrap[b-jju5p5jr9a] {
flex: 1;
overflow: auto;
min-height: 0;
}
/* =========================================================
TABLE
========================================================= */
.employee-table[b-jju5p5jr9a] {
width: 100%;
min-width: 1100px;
margin-bottom: 0;
font-size: 14px;
}
/* Header */
.employee-table thead th[b-jju5p5jr9a] {
position: sticky;
top: 0;
z-index: 5;
padding: 10px 14px;
background: #f8f9fa;
color: #495057;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
border-bottom: 1px solid #dee2e6;
}
/* Body */
.employee-table tbody td[b-jju5p5jr9a] {
padding: 10px 14px;
vertical-align: middle;
white-space: nowrap;
border-bottom: 1px solid #edf0f2;
}
/* =========================================================
ROW
========================================================= */
.employee-row[b-jju5p5jr9a] {
cursor: pointer;
transition: background-color .15s ease, box-shadow .15s ease;
}
.employee-row:hover[b-jju5p5jr9a] {
background-color: #f8f9fa !important;
}
/* Employee ID */
.employee-id[b-jju5p5jr9a] {
font-weight: 600;
color: #0d6efd;
}
/* =========================================================
FOOTER
========================================================= */
.mu-foot[b-jju5p5jr9a] {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 52px;
padding: 8px 16px;
background: #fff;
border-top: 1px solid #dee2e6;
}
.footer-left[b-jju5p5jr9a] {
color: #6c757d;
font-size: 13px;
}
.footer-left strong[b-jju5p5jr9a] {
color: #212529;
}
.footer-right[b-jju5p5jr9a] {
display: flex;
align-items: center;
}
.mu-pager[b-jju5p5jr9a] {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: #6c757d;
}
/* Page size */
.page-size-select[b-jju5p5jr9a] {
width: 75px;
height: 32px;
font-size: 13px;
}
/* Page buttons */
.mu-pager .btn[b-jju5p5jr9a] {
width: 32px;
height: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Page number */
.page-number[b-jju5p5jr9a] {
white-space: nowrap;
color: #495057;
}
/* =========================================================
LOADING
========================================================= */
.employee-table .spinner-border[b-jju5p5jr9a] {
vertical-align: middle;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mu-toolbar[b-jju5p5jr9a] {
padding: 10px;
}
.mu-search[b-jju5p5jr9a] {
width: 100%;
}
.mu-foot[b-jju5p5jr9a] {
padding: 8px 10px;
}
.mu-foot-info[b-jju5p5jr9a] {
display: none;
}
.mu-pager[b-jju5p5jr9a] {
gap: 6px;
}
.mu-pager > span:first-child[b-jju5p5jr9a] {
display: none;
}
.employee-table[b-jju5p5jr9a] {
min-width: 1100px;
}
}
/* /Components/Pages/Others/FrmGST.razor.rz.scp.css */
/* =====================================================================
GST.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 ITB.
Only GST-specific bits (dashboard tiles, checklist cards, status
groups, numeric column alignment) live here.
===================================================================== */
/* Page-end footer pinning — same pattern as ITB/MLedger/MGroup/Daybook/BSPL. */
.gst-page[b-bzwnqhqljm] {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden; /* keep footer/pagination pinned in view — only .mu-table-wrap scrolls */
}
.gst-toptabs[b-bzwnqhqljm] {
flex-shrink: 0;
padding: 8px 16px 0;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
/* Tab button look — defined here (not relying on a shared "le-toptab" style, which turned out
to carry no visuals of its own; ITB's tabs only looked right because ITB.razor.css styled
".itb-toptabs button" directly, and Blazor's CSS isolation scopes that rule to ITB alone). */
.gst-toptab[b-bzwnqhqljm] {
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;
}
.gst-toptab i[b-bzwnqhqljm] {
font-size: 12px;
}
.gst-toptab:hover[b-bzwnqhqljm] {
background: #f5f5f5;
}
.gst-toptab.active[b-bzwnqhqljm] {
background: #1ab99a;
color: #fff;
border-color: #1ab99a;
font-weight: 700;
}
/* UPLOAD / FILE — visible, faded, not clickable (no backing endpoint yet). */
.gst-toptab-disabled[b-bzwnqhqljm] {
opacity: .45;
cursor: not-allowed;
}
.gst-toptab-disabled:hover[b-bzwnqhqljm] {
background: #fff;
}
.gst-page .mu-card[b-bzwnqhqljm] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
margin: 0 16px;
}
.gst-page .mu-table-wrap[b-bzwnqhqljm] {
flex: 1;
overflow: auto;
min-height: 200px;
}
/* bspl-footer (Total Records + pager) is a direct child of .gst-page, after the flexed
.mu-card — pin it, don't let it get squeezed/pushed out of view. */
.gst-page .bspl-footer[b-bzwnqhqljm] {
flex-shrink: 0;
position: relative;
z-index: 5; /* sit above the drawer overlay strip, see .mu-drawer override below */
}
/* BUG FIX: pager was rendering (DOM had it) but sat visually UNDER the open filter drawer —
.mu-drawer is a full-height (top:0/bottom:0) fixed panel from the shared masters-forms.css,
so it covered the page's bottom-right corner, exactly where the pager lives. Trimming the
drawer's bottom edge to clear the footer strip (~46px) fixes it without touching the shared
CSS file. If the shared drawer height/z-index changes later this may need re-checking —
I don't have that source, only what's inferable from ITB/this page's rendered behavior.
Only kicks in on the drawer, override is scoped to this page. */
.mu-drawer[b-bzwnqhqljm] {
bottom: 46px;
/* BUG: was z-index:3 — sat BELOW the shared .mu-drawer-overlay backdrop (its own z-index,
from masters-forms.css, is higher), so clicks anywhere on the drawer — OTHERS tab,
radios, selects, everything — actually landed on the overlay behind it, which closes
the drawer on click. Bumped high enough to clear any reasonable overlay z-index; the
bottom:46px trim above is what keeps the footer/pager clear, unrelated to this. */
z-index: 1000;
}
.mu-drawer-overlay[b-bzwnqhqljm] {
z-index: 999;
}
.gst-nopager-note[b-bzwnqhqljm] {
font-size: 11.5px;
color: #8a93a3;
}
/* ── "Page No :" pager, ITB-style box+arrow instead of "Page X of Y" text.
Defined locally (not relying on shared .mu-pager/.mu-nav carrying this look) — same
isolation lesson as .gst-toptab above: this markup is rendered by THIS component, so a
local rule is guaranteed to apply regardless of what the shared CSS does or doesn't style. ── */
.gst-pager[b-bzwnqhqljm] {
display: flex;
align-items: center;
gap: 8px;
}
.gst-pageno-label[b-bzwnqhqljm] {
font-size: 12px;
color: #555;
white-space: nowrap;
}
.gst-pageno-input[b-bzwnqhqljm] {
width: 52px;
padding: 4px 6px;
border: 1px solid #d6dbe0;
border-radius: 4px;
text-align: center;
font-family: inherit;
font-size: 12.5px;
color: #1a2537;
}
.gst-pageno-input:focus[b-bzwnqhqljm] {
outline: none;
border-color: #1ab99a;
box-shadow: 0 0 0 3px rgba(26,185,154,0.12);
}
.gst-pager .mu-nav[b-bzwnqhqljm] {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d6dbe0;
border-radius: 4px;
background: #fff;
color: #555;
cursor: pointer;
}
.gst-pager .mu-nav:disabled[b-bzwnqhqljm] {
opacity: .45;
cursor: not-allowed;
}
.gst-pager .mu-nav:not(:disabled):hover[b-bzwnqhqljm] {
background: #f5f5f5;
border-color: #1ab99a;
color: #1ab99a;
}
/* ── "FILTERS (n)" button turns red once a filter is active — same red badge as ITB's
FILTERS button. Rendered by this component (bspl-title-actions), so styled locally same
as the tab/pager fixes above rather than trusting the shared button class to carry it. ── */
.bspl-filter-toggle.has-filter[b-bzwnqhqljm] {
background: #c0392b !important;
border-color: #c0392b !important;
color: #fff !important;
}
.bspl-filter-toggle.has-filter:hover[b-bzwnqhqljm] {
background: #a83226 !important;
border-color: #a83226 !important;
}
.gst-otp-raw[b-bzwnqhqljm] {
margin: 6px 0 0;
padding: 8px;
background: #1a2537;
color: #b7e6d9;
font-size: 10.5px;
font-family: Consolas, monospace;
border-radius: 4px;
max-height: 120px;
overflow: auto;
white-space: pre-wrap;
word-break: break-all;
}
.gst-error[b-bzwnqhqljm] {
margin: 12px 16px 0;
padding: 10px 14px;
background: #fdf3f3;
border-left: 4px solid #c0392b;
color: #c0392b;
font-size: 13px;
flex-shrink: 0;
}
/* ── Toolbar row (month picker on Dashboard tab, exception-type picker on Exceptions tab) ── */
.gst-toolbar[b-bzwnqhqljm] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
font-size: 12.5px;
color: #555;
flex-shrink: 0;
}
.gst-select[b-bzwnqhqljm] {
padding: 5px 10px;
border: 1px solid #d6dbe0;
border-radius: 4px;
font-family: inherit;
color: #333;
}
.gst-select:focus[b-bzwnqhqljm] {
outline: none;
border-color: #1ab99a;
box-shadow: 0 0 0 3px rgba(26,185,154,0.12);
}
/* ── Numeric column alignment (not defined globally in masters-forms.css) ── */
.mu-table thead th.num[b-bzwnqhqljm],
.gst-dyn-table thead th.num[b-bzwnqhqljm] {
text-align: right;
}
.mu-table td.num[b-bzwnqhqljm],
.gst-dyn-table td.num[b-bzwnqhqljm] {
text-align: right;
font-variant-numeric: tabular-nums;
}
.gst-total-row td[b-bzwnqhqljm] {
font-weight: 700;
background: #f5f8f7;
}
/* ── Dashboard tab: summary tiles ── */
.gst-dash-card[b-bzwnqhqljm] {
padding: 16px;
overflow: auto;
gap: 16px;
}
/* .gst-tile-row/.gst-tile* removed — Status tab's top tiles now use the Dash-style
.gst-dash-stat table (.gst-status-topstat below) instead. */
/* ── Dashboard tab: legacy-style layout — 3 GSTR cards left, stat grid right ── */
.gst-dash-layout[b-bzwnqhqljm] {
display: flex;
gap: 18px;
align-items: flex-start;
}
.gst-dash-left[b-bzwnqhqljm] {
flex: 1 1 66%;
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.gst-gstr-card[b-bzwnqhqljm] {
border: 1px solid #e5e8ec;
border-radius: 5px;
background: #fff;
overflow: hidden;
}
.gst-gstr-hdr[b-bzwnqhqljm] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background-image: linear-gradient(to left, rgba(126,179,148,0.25), rgba(126,179,148,0.05), rgba(126,179,148,0.05), rgba(130,202,215,0.25));
font-size: 13.5px;
font-weight: 600;
color: #1a2537;
white-space: pre;
}
.gst-gstr-hdr i[b-bzwnqhqljm] {
font-size: 12px;
color: #8a93a3;
}
.gst-gstr-body[b-bzwnqhqljm] {
padding: 4px 16px;
}
.gst-gstr-row[b-bzwnqhqljm] {
display: flex;
align-items: center;
gap: 14px;
padding: 9px 0;
border-bottom: 1px solid #f1f2f4;
font-size: 13px;
color: #333;
}
.gst-gstr-row:last-child[b-bzwnqhqljm] {
border-bottom: none;
}
.gst-gstr-idx[b-bzwnqhqljm] {
width: 18px;
color: #8a93a3;
flex-shrink: 0;
}
.gst-gstr-label[b-bzwnqhqljm] {
flex: 1;
min-width: 0;
}
.gst-gstr-status[b-bzwnqhqljm] {
color: #f8ac59;
font-weight: 600;
flex-shrink: 0;
width: 70px;
}
.gst-gstr-due[b-bzwnqhqljm] {
color: #f8ac59;
flex-shrink: 0;
width: 110px;
text-align: right;
}
.gst-dash-right[b-bzwnqhqljm] {
flex: 0 0 340px;
display: flex;
gap: 14px;
}
.gst-dash-stat[b-bzwnqhqljm] {
flex: 1;
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
.gst-dash-stat td[b-bzwnqhqljm] {
padding: 9px 4px;
border-bottom: 1px solid #f1f2f4;
color: #333;
}
.gst-dash-stat td.num[b-bzwnqhqljm] {
text-align: right;
font-variant-numeric: tabular-nums;
}
.gst-dash-stat-total td[b-bzwnqhqljm] {
background: #eef0f0;
font-weight: 700;
}
@media (max-width: 991px) {
.gst-dash-layout[b-bzwnqhqljm] {
flex-direction: column;
}
.gst-dash-right[b-bzwnqhqljm] {
flex: 1 1 auto;
}
}
/* ── Summary tab ── */
.gst-summary-table td[b-bzwnqhqljm],
.gst-vtype-table td[b-bzwnqhqljm] {
font-size: 12.5px;
}
/* ── Exceptions tab: site details strip ── */
.gst-sitecard[b-bzwnqhqljm] {
flex-direction: row !important;
flex-wrap: wrap;
gap: 16px;
padding: 12px 16px;
margin: 0 16px 12px;
flex: 0 0 auto !important;
}
.gst-sitefield[b-bzwnqhqljm] {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 120px;
}
.gst-sitefield-label[b-bzwnqhqljm] {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .3px;
color: #8a93a3;
}
.gst-sitefield-value[b-bzwnqhqljm] {
font-size: 12.5px;
color: #1a2537;
}
/* ── Status tab ── */
.gst-status-card[b-bzwnqhqljm] {
padding: 16px;
overflow: auto;
}
/* Top stat-grid, Dash-style — wraps a (that class's rules live
above, shared with the Dash tab) so both tabs' summary numbers look like one system. */
.gst-status-topstat[b-bzwnqhqljm] {
max-width: 420px;
margin-bottom: 18px;
}
/* GstStatusGroup used to be a separate component (with its own .razor.css, since a page's
.razor.css can't reach a child component's markup — CSS isolation). Folded inline into
FrmGST.razor now, so these rules apply directly, no separate file needed. Card look matches
the Dash tab's gst-gstr-card (gradient header + bordered row list) — one visual language
across tabs. */
.gst-statusgroup[b-bzwnqhqljm] {
margin-top: 16px;
}
.gst-statusgroup-title[b-bzwnqhqljm] {
margin: 0 0 8px;
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .3px;
color: #1ab99a;
}
.gst-statusgroup-empty[b-bzwnqhqljm] {
font-size: 12px;
color: #8a93a3;
}
.gst-statusgroup-grid[b-bzwnqhqljm] {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.gst-statuscard[b-bzwnqhqljm] {
flex: 1 1 220px;
min-width: 200px;
border: 1px solid #e5e8ec;
border-radius: 5px;
background: #fff;
overflow: hidden;
}
.gst-statuscard-hdr[b-bzwnqhqljm] {
padding: 8px 14px;
background-image: linear-gradient(to left, rgba(126,179,148,0.25), rgba(126,179,148,0.05), rgba(126,179,148,0.05), rgba(130,202,215,0.25));
font-size: 12.5px;
font-weight: 600;
color: #1a2537;
}
.gst-statuscard-body[b-bzwnqhqljm] {
padding: 4px 14px;
}
.gst-statuscard-row[b-bzwnqhqljm] {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 11.5px;
color: #555;
padding: 6px 0;
border-bottom: 1px solid #f1f2f4;
}
.gst-statuscard-row:last-child[b-bzwnqhqljm] {
border-bottom: none;
}
/* ── Drawer header: "GST FILTERS" / "OTHERS" tab pair, matches legacy shell ── */
.mu-drawer-hdr[b-bzwnqhqljm] {
gap: 6px;
}
.gst-hdr-tab[b-bzwnqhqljm] {
font-size: 11px;
font-weight: 700;
padding: 5px 10px;
border: 1px solid #d5d5d5;
border-radius: 4px;
background: #f4f6f7;
color: #555;
cursor: pointer;
}
.gst-hdr-tab.active[b-bzwnqhqljm] {
background: #1ab99a;
color: #fff;
border-color: #1ab99a;
}
.gst-hdr-tab:last-of-type[b-bzwnqhqljm] {
margin-right: auto;
}
/* ── OTHERS drawer body: EXCEL export grid + EXCEPTION buttons ── */
.gst-others-section-title[b-bzwnqhqljm] {
font-size: 11px;
font-weight: 700;
letter-spacing: .4px;
color: #8a93a3;
margin: 14px 0 8px;
}
.gst-others-section-title:first-child[b-bzwnqhqljm] {
margin-top: 0;
}
.gst-others-btn-grid[b-bzwnqhqljm] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.gst-others-btn-grid-wide[b-bzwnqhqljm] {
grid-template-columns: 1fr;
}
.gst-others-btn[b-bzwnqhqljm] {
padding: 8px 10px;
font-size: 11.5px;
font-weight: 600;
border: 1px solid #d5d5d5;
border-radius: 4px;
background: #f4f6f7;
color: #555;
cursor: pointer;
}
.gst-others-btn:hover[b-bzwnqhqljm] {
background: #e9f7f4;
border-color: #1ab99a;
}
.gst-others-btn.active[b-bzwnqhqljm] {
background: #1ab99a;
border-color: #1ab99a;
color: #fff;
}
.gst-others-btn:disabled[b-bzwnqhqljm] {
opacity: .55;
cursor: not-allowed;
}
/* Grid footer's "Excel" button + "no paging" note, section mode only. */
.gst-section-footer[b-bzwnqhqljm] {
gap: 10px;
}
.gst-others-hint[b-bzwnqhqljm] {
font-size: 11px;
color: #8a93a3;
margin: -6px 0 10px;
}
/* Collapsed-by-default MasterGST/OTP section — /, no JS needed. */
.gst-others-advanced[b-bzwnqhqljm] {
margin: 14px 0;
border: 1px solid #e5e8ec;
border-radius: 5px;
background: #fafbfb;
padding: 2px 10px;
}
.gst-others-advanced summary[b-bzwnqhqljm] {
cursor: pointer;
font-size: 11px;
font-weight: 700;
letter-spacing: .3px;
color: #8a93a3;
padding: 8px 0;
list-style: none;
}
.gst-others-advanced summary[b-bzwnqhqljm]::-webkit-details-marker {
display: none;
}
.gst-others-advanced summary[b-bzwnqhqljm]::before {
content: "▸ ";
}
.gst-others-advanced[open] summary[b-bzwnqhqljm]::before {
content: "▾ ";
}
.gst-others-advanced[open][b-bzwnqhqljm] {
padding-bottom: 10px;
}
.gst-others-btn-exc[b-bzwnqhqljm] {
background: #fdf3f3;
border-color: #e7c6c6;
color: #c0392b;
text-align: left;
}
.gst-others-btn-exc:hover[b-bzwnqhqljm] {
background: #fbe4e4;
border-color: #c0392b;
}
.gst-others-btn-exc.active[b-bzwnqhqljm] {
background: #c0392b;
border-color: #c0392b;
color: #fff;
}
/* ── Badge + "Back to Invoices" row above the grid, when showing Exceptions/OTHERS-section
data — badge left, back button pushed to the far right. ── */
.gst-grid-toolbar[b-bzwnqhqljm] {
justify-content: space-between;
}
.gst-back-btn[b-bzwnqhqljm] {
margin-left: auto;
}
.gst-exc-badge[b-bzwnqhqljm] {
font-size: 11.5px;
font-weight: 700;
color: #c0392b;
text-transform: uppercase;
letter-spacing: .3px;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.gst-page .mu-card[b-bzwnqhqljm] {
margin: 0 10px;
}
.gst-sitecard[b-bzwnqhqljm] {
margin: 0 10px 12px;
}
.gst-toolbar[b-bzwnqhqljm] {
flex-wrap: wrap;
}
.gst-others-btn-grid[b-bzwnqhqljm] {
grid-template-columns: 1fr;
}
}
/* Click-to-sort grid headers — replaces the old drawer "Sort By"/"Sort Order" fields.
Plain clickable text only: no hover-highlight, no icon, no header cell divider — those
came from the shared mu-table th border/hover rule (meant for light-background tables)
fighting with this table's dark header, so they're killed off explicitly, scoped to just
this table via CSS isolation (only .gst-dyn-table on THIS page is affected). */
.gst-dyn-table thead th[b-bzwnqhqljm] {
border-right: none;
border-left: none;
}
.gst-th-sort[b-bzwnqhqljm] {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.gst-dyn-table thead th:hover[b-bzwnqhqljm],
.gst-dyn-table thead th.gst-th-sort:hover[b-bzwnqhqljm] {
background-color: inherit;
}
/* /Components/Pages/Others/MBillsPending.razor.rz.scp.css */
/* =====================================================================
GAINS — MBillsPending.razor.css (Transactions → Bills Pending, page-scoped)
Shared "mu-"/"bspl-" chrome lives in wwwroot/CSS/masters-forms.css; .t-page
on the root wrapper gives this the transaction blue header treatment.
The db-table/ch-* classes below are redeclared verbatim from
ChallanGrid.razor.css — Blazor CSS isolation means that file's rules
can't reach this page, so every transaction-grid page keeps its own
copy (same convention already established there).
===================================================================== */
.bp-page[b-8vo7um1myz] {
display: flex;
flex-direction: column;
height: 100%;
}
.bp-page .mu-card[b-8vo7um1myz] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.bp-page .mu-toolbar[b-8vo7um1myz] {
flex-shrink: 0;
}
.bp-page .mu-table-wrap[b-8vo7um1myz] {
flex: 1;
overflow: auto;
min-height: 0;
}
.mu-foot[b-8vo7um1myz] {
flex-shrink: 0;
}
.mu-pager[b-8vo7um1myz] {
display: flex;
align-items: center;
gap: 12px;
}
/* ── Toolbar: search + totals chips ── */
.bp-toolbar[b-8vo7um1myz] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.bp-totals[b-8vo7um1myz] {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.bp-total-chip[b-8vo7um1myz] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: 999px;
background: #f1f5f9;
color: #475569;
font-size: 11.5px;
font-weight: 600;
}
.bp-total-chip strong[b-8vo7um1myz] {
color: #0f172a;
font-weight: 700;
}
.bp-total-net[b-8vo7um1myz] {
background: #e8f8f4;
color: #0f766e;
}
.bp-total-net strong[b-8vo7um1myz] {
color: #0f766e;
}
/* ── Table density/striping — copied verbatim from ChallanGrid.razor.css's .db-table ── */
.db-table[b-8vo7um1myz] {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.db-table th[b-8vo7um1myz] {
text-align: left;
padding: 8px 10px;
border-bottom: 1px solid #ddd;
position: sticky;
top: 0;
z-index: 3;
/* background: #fff;*/
}
.db-table td[b-8vo7um1myz] {
padding: 6px 10px;
border-bottom: 1px solid #f2f2f2;
}
.db-table tfoot td[b-8vo7um1myz] {
position: sticky;
bottom: 0;
z-index: 3;
background: #e8e8e8;
}
.db-row-even[b-8vo7um1myz] {
background: #ffffff;
}
.db-row-odd[b-8vo7um1myz] {
background: #f5fafa;
}
.db-table tbody tr:hover[b-8vo7um1myz] {
background: #e8f5f0;
}
/* ── Numeric columns — right-aligned, tabular figures. The .db-table-th
override matches ChallanGrid's own specificity fix (".db-table th" beats
plain ".ch-num" otherwise, silently left-aligning header cells). ── */
.ch-num[b-8vo7um1myz] {
text-align: right;
font-variant-numeric: tabular-nums;
}
.db-table th.ch-num[b-8vo7um1myz] {
text-align: right;
}
/* ── Type badge (wType/wTypeAlias, colored via wColor from the API) ── */
.ch-type-badge[b-8vo7um1myz] {
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-8vo7um1myz] {
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Grand/page total row — sticky to the bottom of the scroll area ── */
.ch-total-row[b-8vo7um1myz] {
position: sticky;
bottom: 0;
z-index: 3;
background: #eef4fb;
font-weight: 700;
color: #1a2537;
}
.ch-total-row td[b-8vo7um1myz] {
border-top: 2px solid #306B9C;
}
@media (max-width: 767px) {
.bp-page .mu-toolbar[b-8vo7um1myz] {
flex-wrap: wrap;
}
.ch-party[b-8vo7um1myz] {
max-width: 120px;
}
}
.ql-lp-search-row[b-8vo7um1myz] {
display: flex;
align-items: center;
gap: 12px;
}
.ql-lp-search-row .uf-input[b-8vo7um1myz] {
flex: 1;
min-width: 0;
}
.ql-lp-search-row .mu-btn[b-8vo7um1myz] {
flex: 0 0 auto;
white-space: nowrap;
}
.theadebg[b-8vo7um1myz] {
background-color: #306B9C;
color: #fff;
}
.ql-led-btn[b-8vo7um1myz] {
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;
}
.gcp-trigger[b-8vo7um1myz] {
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-8vo7um1myz] {
background: #f5f5f5;
border-color: #bbb;
}
.gcp-icon[b-8vo7um1myz] {
width: 16px;
height: 16px;
object-fit: contain;
display: block;
}
/* /Components/Pages/Others/MCostCenterGrid.razor.rz.scp.css */
/* =====================================================================
GAINS — MCostCenterGrid.razor.css (Transactions → Cost Center Grid, page-scoped)
Shared "mu-"/"bspl-" chrome lives in wwwroot/CSS/masters-forms.css; .t-page
on the root wrapper gives this the transaction blue header treatment.
The db-table/ch-* classes below are redeclared verbatim from
ChallanGrid.razor.css / MBillsPending.razor.css — Blazor CSS isolation
means those files' rules can't reach this page.
===================================================================== */
.cc-page[b-3mjh8tw3lh] {
display: flex;
flex-direction: column;
height: 100%;
}
.cc-page .mu-card[b-3mjh8tw3lh] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.cc-page .mu-toolbar[b-3mjh8tw3lh] {
flex-shrink: 0;
}
.cc-page .mu-table-wrap[b-3mjh8tw3lh] {
flex: 1;
overflow: auto;
min-height: 0;
}
.mu-foot[b-3mjh8tw3lh] {
flex-shrink: 0;
}
.mu-pager[b-3mjh8tw3lh] {
display: flex;
align-items: center;
gap: 12px;
}
/* ── Toolbar: search + record count ── */
.cc-toolbar[b-3mjh8tw3lh] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
/* ── Details / Pivot toggle buttons inside the filter drawer ── */
.cc-mode-toggle[b-3mjh8tw3lh] {
display: flex;
gap: 8px;
}
.cc-mode-btn[b-3mjh8tw3lh] {
flex: 1;
background: #fff;
border: 1px solid #d5d5d5;
color: #555;
padding: 7px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
transition: all .12s;
}
.cc-mode-btn:hover[b-3mjh8tw3lh] {
background: #f5f5f5;
}
.cc-mode-btn.active[b-3mjh8tw3lh] {
background: #1ab394;
color: #fff;
border-color: #1ab394;
}
/* ── Table density/striping — copied verbatim from MBillsPending.razor.css's .db-table ── */
.db-table[b-3mjh8tw3lh] {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.db-table th[b-3mjh8tw3lh] {
text-align: left;
padding: 8px 10px;
border-bottom: 1px solid #ddd;
position: sticky;
top: 0;
z-index: 3;
/*background: #fff;*/
}
.db-table td[b-3mjh8tw3lh] {
padding: 6px 10px;
border-bottom: 1px solid #f2f2f2;
}
.db-table tfoot td[b-3mjh8tw3lh] {
position: sticky;
bottom: 0;
z-index: 3;
background: #e8e8e8;
}
.db-row-even[b-3mjh8tw3lh] {
background: #ffffff;
}
.db-row-odd[b-3mjh8tw3lh] {
background: #f5fafa;
}
.db-table tbody tr:hover[b-3mjh8tw3lh] {
background: #e8f5f0;
}
.ch-num[b-3mjh8tw3lh] {
text-align: right;
font-variant-numeric: tabular-nums;
}
.db-table th.ch-num[b-3mjh8tw3lh] {
text-align: right;
}
.ch-type-badge[b-3mjh8tw3lh] {
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-3mjh8tw3lh] {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ch-total-row[b-3mjh8tw3lh] {
position: sticky;
bottom: 0;
z-index: 3;
background: #eef4fb;
font-weight: 700;
color: #1a2537;
}
.ch-total-row td[b-3mjh8tw3lh] {
border-top: 2px solid #306B9C;
}
/* ── "C" clear-dates button next to To Date — copied verbatim from ChallanGrid.razor.css ── */
.ch-date-clear-btn[b-3mjh8tw3lh] {
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-3mjh8tw3lh] {
background: #f5f5f5;
border-color: #1ab394;
color: #1ab394;
}
@media (max-width: 767px) {
.cc-page .mu-toolbar[b-3mjh8tw3lh] {
flex-wrap: wrap;
}
.ch-party[b-3mjh8tw3lh] {
max-width: 120px;
}
}
.gcp-trigger[b-3mjh8tw3lh] {
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-3mjh8tw3lh] {
background: #f5f5f5;
border-color: #bbb;
}
.gcp-icon[b-3mjh8tw3lh] {
width: 16px;
height: 16px;
object-fit: contain;
display: block;
}
/* /Components/Pages/Others/MCustomerEntry.razor.rz.scp.css */
/* =====================================================================
GAINS — MCustomerEntry.razor.css (Customer Profile entry page)
Shared "uf-" field/button styles live in wwwroot/CSS/masters-forms.css
(normally used inside edit modals) — reused here directly on the page
since this form is big enough to warrant its own full page rather than
a modal. Section headers, two-column layout, and address/photo blocks
are page-specific and defined here.
===================================================================== */
.mu-page[b-1jlxszipsx] {
display: flex;
flex-direction: column;
height: 100%;
}
.cust-card[b-1jlxszipsx] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.cust-body[b-1jlxszipsx] {
flex: 1;
overflow-y: auto;
padding: 20px 24px;
}
/* ── Top row: Customer Type / GSTIN / Date, and Is Active / Grade / Rating ── */
.cust-top-row[b-1jlxszipsx] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 14px;
}
.cust-readonly-date .cust-static[b-1jlxszipsx] {
padding: 9px 12px;
color: #64748b;
font-size: 14px;
}
.cust-checkbox-fld label[b-1jlxszipsx] {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
color: #334155;
padding-top: 26px;
}
.cust-checkbox-fld input[type="checkbox"][b-1jlxszipsx] {
width: 16px;
height: 16px;
}
/* ── Section header bars ── */
.cust-section-hdr[b-1jlxszipsx] {
background: #2f5f8a;
color: #fff;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.02em;
padding: 8px 14px;
border-radius: 6px;
margin: 22px 0 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
.cust-dispatch-hdr .cust-same-as[b-1jlxszipsx] {
display: flex;
align-items: center;
gap: 6px;
font-weight: 400;
font-size: 13px;
}
.cust-same-as input[type="checkbox"][b-1jlxszipsx] {
width: 14px;
height: 14px;
}
/* ── Two-column field grid (Personal Info / Marital Info) ── */
.cust-2col[b-1jlxszipsx] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
}
.cust-2col .uf-field[b-1jlxszipsx] {
margin-bottom: 0;
}
/* Mobile number: fixed-width ISD code + number, side by side */
.cust-mobile-wrap[b-1jlxszipsx] {
display: flex;
gap: 8px;
}
.cust-isd[b-1jlxszipsx] {
max-width: 60px;
flex-shrink: 0;
text-align: center;
}
/* ── Address / Dispatch Address: textarea left, stacked fields right ── */
.cust-addr-row[b-1jlxszipsx] {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 24px;
}
.cust-addr-textarea textarea[b-1jlxszipsx] {
resize: vertical;
min-height: 120px;
}
.cust-addr-fields[b-1jlxszipsx] {
display: flex;
flex-direction: column;
gap: 10px;
}
.cust-addr-fields .uf-field[b-1jlxszipsx] {
margin-bottom: 0;
}
/* ── Upload Photo ── */
.cust-photo-row[b-1jlxszipsx] {
display: flex;
align-items: center;
gap: 20px;
}
.cust-photo-input[b-1jlxszipsx] {
flex: 1;
}
.cust-photo-preview[b-1jlxszipsx] {
width: 120px;
height: 120px;
border: 1px dashed #cbd5e1;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
background: #f8fafc;
color: #94a3b8;
font-size: 12px;
overflow: hidden;
flex-shrink: 0;
}
.cust-photo-preview img[b-1jlxszipsx] {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ── Mobile: stack everything to one column ── */
@media (max-width: 767px) {
.cust-top-row[b-1jlxszipsx],
.cust-2col[b-1jlxszipsx],
.cust-addr-row[b-1jlxszipsx] {
grid-template-columns: 1fr;
}
.bspl-title-actions .mu-btn-label[b-1jlxszipsx] {
display: none;
}
}
/* /Components/Pages/Others/MCustomerGrid.razor.rz.scp.css */
/* =====================================================================
GAINS — MCustomerGrid.razor.css (Customer grid, page-scoped)
Shared "mu-" grid/page styles + the filter drawer live in
wwwroot/CSS/masters-forms.css. Only Customer-page-specific rules
remain here.
===================================================================== */
.mu-page[b-lj3ii0ahrf] {
display: flex;
flex-direction: column;
height: 100%;
}
.mu-card[b-lj3ii0ahrf] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.mu-toolbar[b-lj3ii0ahrf] {
flex-shrink: 0;
}
.mu-table-wrap[b-lj3ii0ahrf] {
flex: 1;
overflow: auto;
min-height: 0;
}
.mu-foot[b-lj3ii0ahrf] {
flex-shrink: 0;
}
.bspl-footer-right[b-lj3ii0ahrf] {
font-size: inherit;
color: inherit;
}
.mu-pager[b-lj3ii0ahrf] {
display: flex;
align-items: center;
gap: 12px;
}
/* Wide grid (13 columns) — let it scroll horizontally on narrow viewports
instead of squeezing every column unreadably thin. */
.mu-table[b-lj3ii0ahrf] {
min-width: 1100px;
}
/* ── Mobile: icon-only title buttons ── */
@media (max-width: 767px) {
.bspl-title-actions[b-lj3ii0ahrf] {
margin-left: auto;
display: flex;
gap: 8px;
}
.bspl-title-actions .mu-btn-label[b-lj3ii0ahrf],
.bspl-title-actions .bspl-filter-label[b-lj3ii0ahrf] {
display: none;
}
.bspl-title-actions .mu-btn[b-lj3ii0ahrf] {
padding: 8px 10px;
gap: 0;
}
.mu-foot-info[b-lj3ii0ahrf] {
display: none;
}
}
/* /Components/Pages/Others/MPhysicalStock.razor.rz.scp.css */
/* =====================================================================
GAINS — MPhysicalStock.razor.css (Masters → Physical Stock)
Shared "mu-"/"uf-"/"bspl-" page, table, button and modal styles live in
wwwroot/CSS/masters-forms.css — only Physical-Stock-specific rules
(the filter bar and the editable grid's own input styling) live here.
===================================================================== */
.ps-page[b-yb05wosydk] {
gap: 14px;
}
/* ── Filter card (Stock taking Date / Item Group / toggles) ── */
.ps-filter-card[b-yb05wosydk] {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.ps-filter-row[b-yb05wosydk] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.ps-filter-field[b-yb05wosydk] {
display: flex;
align-items: center;
gap: 8px;
}
.ps-filter-field > label[b-yb05wosydk] {
font-size: 13px;
font-weight: 600;
color: #334155;
white-space: nowrap;
}
.ps-group-select[b-yb05wosydk] {
padding: 6px 10px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 13px;
font-family: inherit;
color: #1a2537;
background: #fff;
min-width: 220px;
outline: none;
}
.ps-group-select:focus[b-yb05wosydk] {
border-color: #1a56a7;
box-shadow: 0 0 0 3px rgba(26,86,167,0.12);
}
.ps-book-toggle[b-yb05wosydk] {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #334155;
cursor: pointer;
user-select: none;
}
.ps-book-toggle input[b-yb05wosydk] {
width: 15px;
height: 15px;
accent-color: #1ab99a;
cursor: pointer;
}
.ps-book-toggle em[b-yb05wosydk] {
font-style: italic;
font-weight: 600;
}
.ps-go-btn[b-yb05wosydk] {
margin-left: auto;
}
.ps-summary-btn i[b-yb05wosydk],
.ps-go-btn i[b-yb05wosydk] {
font-size: 14px;
}
/* ── Grid card ── */
.ps-grid-card[b-yb05wosydk] {
position: relative;
min-height: 260px;
}
.ps-table-wrap[b-yb05wosydk] {
height: 560px;
}
.ps-table thead th[b-yb05wosydk] {
white-space: nowrap;
}
.ps-num-col[b-yb05wosydk] {
text-align: right;
width: 110px;
}
td.ps-num-col[b-yb05wosydk] {
font-variant-numeric: tabular-nums;
}
.ps-chk-col[b-yb05wosydk] {
width: 40px;
text-align: center;
}
.ps-chk-col input[b-yb05wosydk] {
width: 15px;
height: 15px;
accent-color: #1ab99a;
cursor: pointer;
}
.ps-qty-col[b-yb05wosydk] {
width: 130px;
}
.ps-inp[b-yb05wosydk] {
width: 100%;
box-sizing: border-box;
padding: 6px 8px;
border: 1px solid #cbd5e1;
border-radius: 5px;
font-size: 13px;
font-family: inherit;
color: #1a2537;
background: #fff;
outline: none;
}
.ps-inp:focus[b-yb05wosydk] {
border-color: #1a56a7;
box-shadow: 0 0 0 3px rgba(26,86,167,0.12);
}
.ps-qty-inp[b-yb05wosydk] {
text-align: right;
min-width: 90px;
}
.ps-comment-inp[b-yb05wosydk] {
min-width: 160px;
}
/* ── Footer ── */
.ps-foot-left[b-yb05wosydk],
.ps-foot-right[b-yb05wosydk] {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.ps-goto[b-yb05wosydk] {
width: 62px;
padding: 6px 8px;
}
.ps-genvoucher-btn:disabled[b-yb05wosydk] {
opacity: 0.55;
cursor: not-allowed;
}
/* ── Compare / Summary popups — reuse the shared uf-modal chrome, just widen it ── */
.ps-cmp-modal[b-yb05wosydk] {
max-width: 640px;
}
.ps-cmp-body[b-yb05wosydk] {
padding: 0;
max-height: calc(100vh - 220px);
}
.ps-cmp-table[b-yb05wosydk] {
font-size: 12.5px;
}
.ps-cmp-table thead th[b-yb05wosydk] {
position: sticky;
top: 0;
}
.ps-diff-neg[b-yb05wosydk] {
color: #b91c1c;
font-weight: 700;
}
.ps-diff-pos[b-yb05wosydk] {
color: #15803d;
font-weight: 700;
}
@media (max-width: 860px) {
.ps-filter-row[b-yb05wosydk] {
gap: 10px;
}
.ps-go-btn[b-yb05wosydk] {
margin-left: 0;
}
.ps-group-select[b-yb05wosydk] {
min-width: 0;
flex: 1 1 180px;
}
}
@media (max-width: 640px) {
.ps-summary-btn .mu-btn-label[b-yb05wosydk],
.ps-go-btn .mu-btn-label[b-yb05wosydk] {
display: none;
}
.ps-summary-btn[b-yb05wosydk],
.ps-go-btn[b-yb05wosydk] {
padding: 8px 10px;
gap: 0;
}
.ps-foot-left[b-yb05wosydk],
.ps-foot-right[b-yb05wosydk] {
width: 100%;
justify-content: space-between;
}
}
.ps-summary-modal[b-yb05wosydk] {
width: 95vw;
max-width: 1200px;
}
.ps-summary-wrap[b-yb05wosydk] {
overflow-x: auto;
max-width: 100%;
}
.ps-summary-wrap table[b-yb05wosydk] {
min-width: 1400px; /* forces real horizontal scroll instead of squishing 31 columns to fit */
}
.ps-summary-wrap th[b-yb05wosydk],
.ps-summary-wrap td[b-yb05wosydk] {
white-space: nowrap;
}
@media (max-width: 480px) {
.ps-qty-col[b-yb05wosydk] {
width: 100px;
}
.ps-comment-inp[b-yb05wosydk] {
min-width: 120px;
}
}
/* /Components/Pages/Others/Sr_collection.razor.rz.scp.css */
/* =====================================================================
SR_Collection.razor.css
Header (bspl-title-block), footer (bspl-footer), pager (mu-pager/
mu-nav) and table wrapper (mu-card/mu-table-wrap) all come from the
shared common-page-chrome.css / masters-forms.css — same as ITB.
Page now follows the ITB structural pattern: single .mu-card wrapping
the grid, a page-bottom .bspl-footer holding Total Records + actions
(left) and the dropdown pager (right). Only SR-Collection-specific
bits (toolbar fields, grid columns, move/delete icons, Add dialog)
live here.
===================================================================== */
.src-page[b-8imz113g9b] {
display: flex;
flex-direction: column;
height: 100%;
}
.src-error[b-8imz113g9b] {
margin: 12px 16px 0;
padding: 10px 14px;
background: #fdf3f3;
border-left: 4px solid #c0392b;
color: #c0392b;
font-size: 13px;
flex-shrink: 0;
}
/* ── Section heading above the toolbar, naming the grid below (the page has
only one grid now — "Assigned Voucher List" — so this replaces the old
blue .src-pane-hdr title bar that used to sit directly on the grid). ── */
.src-section-hdr[b-8imz113g9b] {
flex-shrink: 0;
padding: 8px 16px 0;
font-size: 13px;
font-weight: 700;
letter-spacing: .3px;
text-transform: uppercase;
color: #306b9c;
}
/* ── Top toolbar — Party/Ledger, Sales Rep, Assign Date (formerly the filter
drawer's only fields; drawer removed, these now sit above the grid).
Flat bar, no card/border — matches ITB's .itb-toolbar look. ── */
.src-toolbar[b-8imz113g9b] {
flex-shrink: 0;
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 16px;
padding: 8px 16px;
font-size: 12.5px;
color: #555;
}
/* Assign Date — native renders its text in the browser's
own locale format (dd-mm-yyyy on this machine); overlay a dd-MMM-yyyy span
on top of it (input's own text made transparent) so the value/handler stay
completely native while the display reads dd-MMM-yyyy everywhere. */
.src-date-box[b-8imz113g9b] {
position: relative;
display: inline-flex;
}
.src-date-native[b-8imz113g9b] {
color: transparent;
}
.src-date-native[b-8imz113g9b]::-webkit-datetime-edit,
.src-date-native[b-8imz113g9b]::-webkit-datetime-edit-fields-wrapper,
.src-date-native[b-8imz113g9b]::-webkit-datetime-edit-text,
.src-date-native[b-8imz113g9b]::-webkit-datetime-edit-day-field,
.src-date-native[b-8imz113g9b]::-webkit-datetime-edit-month-field,
.src-date-native[b-8imz113g9b]::-webkit-datetime-edit-year-field {
color: transparent;
}
.src-date-display[b-8imz113g9b] {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
font-size: 13px;
color: #333;
white-space: nowrap;
}
.src-toolbar-actions[b-8imz113g9b] {
display: flex;
gap: 8px;
margin-left: auto;
}
/* Party/Ledger field only — wider so ledger names/values display properly.
.src-toolbar already has flex-wrap: wrap, so other fields reflow to the
next line on narrow screens instead of overlapping this one. */
.src-fld-ledger[b-8imz113g9b] {
flex: 1 1 320px;
min-width: 260px;
}
/* ── Grid area — page now uses the shared .mu-card/.mu-table-wrap wrapper
(see ITB.razor.css) directly instead of a bespoke pane structure. The
card fills remaining vertical space and the page-bottom .bspl-footer
(below) sits outside it, so there's no "big empty gap" regardless of
row count — no empty-state class juggling needed any more. ── */
.mu-table-wrap[b-8imz113g9b] {
min-height: 200px;
}
.src-table-wrap[b-8imz113g9b] {
flex: 1;
overflow: auto;
min-height: 200px;
}
.src-grid-table[b-8imz113g9b] {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.src-grid-table thead th[b-8imz113g9b] {
position: sticky;
top: 0;
z-index: 10;
background: #306b9c;
text-align: left;
font-size: 11.5px;
font-weight: 700;
line-height: 1.15; /* was browser default (~1.4-1.5) — compacts 2/3-line headers like "VID / Date" */
padding: 4px 8px; /* was 6px 8px */
border: none !important; /* ITB pattern — thead carries no border, body/tfoot cells box themselves */
box-shadow: none !important;
outline: none !important;
}
.src-grid-table tbody td[b-8imz113g9b],
.src-grid-table tfoot td[b-8imz113g9b] {
border-left: 1px solid #eef0f2;
border-right: 1px solid #eef0f2;
border-bottom: 1px solid #eef0f2;
border-top: 0;
}
.src-grid-table tbody td[b-8imz113g9b] {
padding: 6px 8px;
vertical-align: top;
font-size: 12.5px;
}
.src-grid-table tbody tr:hover[b-8imz113g9b] {
background: #f8fafc;
}
.src-row-collected[b-8imz113g9b] {
background: whitesmoke;
font-weight: 600;
}
.src-th-sort[b-8imz113g9b] {
cursor: pointer;
user-select: none;
}
.src-chk[b-8imz113g9b] {
width: 28px;
text-align: center;
}
.src-del-col[b-8imz113g9b] {
width: 32px;
text-align: center;
}
.src-vid[b-8imz113g9b] {
color: #2f8fd1;
font-weight: 600;
cursor: pointer;
}
.src-sub[b-8imz113g9b] {
color: #64748b;
font-size: 11px;
}
.src-party[b-8imz113g9b] {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.src-remarks[b-8imz113g9b] {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11.5px;
color: #64748b;
}
.src-grid-table td.num[b-8imz113g9b],
.src-grid-table th.num[b-8imz113g9b] {
text-align: right;
font-variant-numeric: tabular-nums;
}
.src-del-btn[b-8imz113g9b] {
background: none;
border: none;
color: #c0392b;
cursor: pointer;
padding: 2px 6px;
font-size: 13px;
}
.src-del-btn:disabled[b-8imz113g9b] {
color: #cbd5e1;
cursor: not-allowed;
}
/* ── Table footer (Total row) — inside the table itself so it lines up with
the header columns exactly, regardless of column widths. Sticky to stay
visible while the body scrolls, same idea as the sticky thead — same
fixed-height/background treatment as ITB's tfoot. Conditionally rendered
only when there are rows (see SR_Collection.razor), matching ITB. ── */
.src-total-row td[b-8imz113g9b] {
position: sticky;
bottom: 0;
z-index: 15;
background: #E1EAF1;
height: 40px;
min-height: 30px;
max-height: 30px;
padding: 4px 8px;
box-sizing: border-box;
font-size: 12px;
font-weight: 700;
}
.src-total-label[b-8imz113g9b] {
color: #64748b;
text-align: right;
}
.src-total-amounts[b-8imz113g9b] {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
font-variant-numeric: tabular-nums;
}
/* ── Page-bottom footer — .bspl-footer/.bspl-footer-left/.bspl-footer-right
are shared (common-page-chrome.css), same bar ITB uses. Left side holds
Total Records + Add + Reconcile; right side holds the dropdown pager,
shown only when there are rows (see SR_Collection.razor). ── */
.src-pageno[b-8imz113g9b] {
padding: 3px 8px;
border: 1px solid #d6dbe0;
border-radius: 4px;
font-family: inherit;
color: #333;
}
.src-pageno:focus[b-8imz113g9b] {
outline: none;
border-color: #1ab99a;
box-shadow: 0 0 0 3px rgba(26,185,154,0.12);
}
/* Wraps the Add-dialog's own pager, directly under its table — replaces
the old .src-pane-footer that used to hold it. */
.src-modal-pager[b-8imz113g9b] {
flex-shrink: 0;
display: flex;
justify-content: flex-end;
padding: 8px 0 0;
border-top: 1px solid #e3e6ea;
margin-top: 8px;
}
.src-add-btn[b-8imz113g9b] {
background: #2f8f4e;
color: #fff;
border: none;
border-radius: 3px;
padding: 5px 12px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.src-reconcile-btn[b-8imz113g9b] {
background: #0B648E;
color: #fff;
border: none;
border-radius: 3px;
padding: 5px 12px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.src-reconcile-btn:disabled[b-8imz113g9b] {
opacity: .6;
cursor: not-allowed;
}
.src-page-current[b-8imz113g9b] {
font-size: 11.5px;
color: #64748b;
margin: 0 4px;
}
/* ── Add-voucher dialog — wraps the unassigned "Voucher List" grid, opened by
the Add button under Assigned Voucher List. Plain CSS modal (no dialog
component to reference yet — see chat re: the confirm() replacement, same
situation). ── */
.src-modal-overlay[b-8imz113g9b] {
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
z-index: 1000;
}
.src-modal[b-8imz113g9b] {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(900px, 92vw);
max-height: 85vh;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 6px;
box-shadow: 0 10px 40px rgba(0,0,0,.25);
z-index: 1001;
overflow: hidden;
}
.src-modal-hdr[b-8imz113g9b] {
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: #306b9c;
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: .3px;
text-transform: uppercase;
}
.src-modal-close[b-8imz113g9b] {
background: none;
border: none;
color: #fff;
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.src-modal-body[b-8imz113g9b] {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding: 10px 14px;
overflow: auto;
}
.src-modal-body .src-table-wrap[b-8imz113g9b] {
max-height: 55vh;
}
.src-modal-foot[b-8imz113g9b] {
flex-shrink: 0;
padding: 10px 14px;
border-top: 1px solid #e3e6ea;
display: flex;
justify-content: flex-end;
}
.src-move-btn-wide[b-8imz113g9b] {
background: #5c6d20;
color: #fff;
border: none;
padding: 8px 20px;
border-radius: 4px;
font-weight: 700;
font-size: 13px;
cursor: pointer;
}
.src-move-btn-wide:disabled[b-8imz113g9b] {
opacity: .6;
cursor: not-allowed;
}
/* ── Mobile ── */
@media (max-width: 900px) {
.src-toolbar[b-8imz113g9b] {
flex-direction: column;
align-items: stretch;
}
.bspl-footer[b-8imz113g9b] {
flex-wrap: wrap;
gap: 8px;
}
}
/* /Components/Pages/Reports/COA.razor.rz.scp.css */
/* Components/Pages/Reports/COA.razor.css
Scoped to the Chart of Accounts report page. Reuses the app's teal/navy
accents (see masters-forms.css / common-page-chrome.css conventions)
without depending on che-* transaction-page classes, since this is a
read-only report page, not a voucher entry page. */
.coa-page[b-g4g9shsguj] {
display: flex;
flex-direction: column;
height: 100%;
}
/* ── Header badges ─────────────────────────────────────────────── */
.coa-badge[b-g4g9shsguj] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
}
.coa-badge-ok[b-g4g9shsguj] {
background: #e6f7ed;
color: #157347;
}
.coa-badge-warn[b-g4g9shsguj] {
background: #fff4e5;
color: #b45309;
}
.coa-badge-danger[b-g4g9shsguj] {
background: #fdeaea;
color: #b42318;
}
/* ── Toast ──────────────────────────────────────────────────────── */
.coa-toast[b-g4g9shsguj] {
position: fixed;
top: 70px;
right: 24px;
z-index: 60;
background: #1f2937;
color: #fff;
padding: 10px 18px;
border-radius: 8px;
font-size: 13px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
animation: coa-toast-in-b-g4g9shsguj .15s ease-out;
}
@keyframes coa-toast-in-b-g4g9shsguj {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ── Body layout: tree + main ─────────────────────────────────────── */
.coa-body[b-g4g9shsguj] {
display: flex;
flex: 1;
min-height: 0;
gap: 14px;
padding: 12px 16px 16px;
}
.coa-tree-panel[b-g4g9shsguj] {
width: 300px;
flex-shrink: 0;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e3e7ee;
border-radius: 10px;
overflow: hidden;
}
.coa-tree-tabs[b-g4g9shsguj] {
display: flex;
border-bottom: 1px solid #e3e7ee;
}
.coa-tree-tab[b-g4g9shsguj] {
flex: 1;
border: none;
background: #f7f8fa;
padding: 10px 6px;
font-size: 12.5px;
font-weight: 600;
color: #5b6472;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: background .12s ease, color .12s ease;
}
.coa-tree-tab:hover[b-g4g9shsguj] {
background: #eef1f5;
}
.coa-tree-tab.active[b-g4g9shsguj] {
background: #fff;
color: #175e82;
border-bottom-color: #175e82;
}
.coa-tree-search[b-g4g9shsguj] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid #eef0f3;
color: #9aa3af;
}
.coa-tree-search input[b-g4g9shsguj] {
flex: 1;
border: none;
outline: none;
font-size: 13px;
color: #1f2937;
}
.coa-tree-search-clear[b-g4g9shsguj] {
border: none;
background: transparent;
color: #9aa3af;
cursor: pointer;
padding: 2px;
}
.coa-tree-search-clear:hover[b-g4g9shsguj] {
color: #1f2937;
}
.coa-tree-scroll[b-g4g9shsguj] {
flex: 1;
overflow: auto;
min-height: 0;
padding: 6px 4px;
}
.coa-tree-root[b-g4g9shsguj] {
list-style: none;
margin: 0;
padding: 0;
}
[b-g4g9shsguj] .coa-node-children {
list-style: none;
margin: 0;
padding: 0;
}
[b-g4g9shsguj] .coa-node-row {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
color: #33404f;
}
[b-g4g9shsguj] .coa-node-row:hover {
background: #f2f5f8;
}
[b-g4g9shsguj] .coa-node-row.selected {
background: #dce9f5;
color: #10405e;
font-weight: 600;
}
[b-g4g9shsguj] .coa-node-row:focus-visible {
outline: 2px solid #175e82;
outline-offset: -2px;
}
[b-g4g9shsguj] .coa-node-toggle,
[b-g4g9shsguj] .coa-node-menu-btn {
border: none;
background: transparent;
color: #8a94a1;
width: 18px;
flex-shrink: 0;
cursor: pointer;
font-size: 11px;
}
[b-g4g9shsguj] .coa-node-toggle-spacer {
width: 18px;
flex-shrink: 0;
}
[b-g4g9shsguj] .coa-node-icon {
font-size: 12px;
color: #b0894f;
flex-shrink: 0;
}
[b-g4g9shsguj] .coa-node-icon.fa-file-lines {
color: #6b8fb5;
}
[b-g4g9shsguj] .coa-node-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
[b-g4g9shsguj] .coa-node-code {
color: #97a2b0;
margin-left: 4px;
font-size: 11.5px;
}
[b-g4g9shsguj] .coa-node-menu-btn {
margin-left: auto;
width: 22px;
}
[b-g4g9shsguj] .coa-node-menu-btn:hover {
color: #175e82;
}
/* ── Main panel ─────────────────────────────────────────────────── */
.coa-main[b-g4g9shsguj] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.coa-toolbar[b-g4g9shsguj] {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 12px;
background: #fff;
border: 1px solid #e3e7ee;
border-radius: 10px;
padding: 12px 16px;
}
.coa-toolbar-left[b-g4g9shsguj] {
min-width: 260px;
}
.coa-node-header[b-g4g9shsguj] {
font-size: 14px;
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.coa-node-header-empty[b-g4g9shsguj] {
color: #8a94a1;
font-style: italic;
}
.coa-node-kind[b-g4g9shsguj] {
color: #8a94a1;
font-weight: 600;
}
.coa-node-name[b-g4g9shsguj] {
font-weight: 700;
color: #1f2937;
}
.coa-breadcrumb[b-g4g9shsguj] {
font-size: 12px;
color: #8a94a1;
}
.coa-node-obcb[b-g4g9shsguj] {
margin-top: 4px;
display: flex;
gap: 18px;
font-size: 12.5px;
color: #4b5563;
}
.coa-adjustment-note[b-g4g9shsguj] {
margin-top: 6px;
font-size: 12px;
color: #b45309;
}
.coa-toolbar-right[b-g4g9shsguj] {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.coa-date-range[b-g4g9shsguj] {
display: flex;
align-items: center;
gap: 6px;
background: #f7f8fa;
border: 1px solid #e3e7ee;
border-radius: 8px;
padding: 6px 8px;
}
.coa-date-label[b-g4g9shsguj] {
display: none;
}
.coa-date-input[b-g4g9shsguj] {
width: 108px;
border: 1px solid #d7dde5;
border-radius: 6px;
padding: 5px 7px;
font-size: 12.5px;
text-align: center;
}
.coa-date-swap[b-g4g9shsguj] {
color: #9aa3af;
font-size: 11px;
}
.coa-period-toggle[b-g4g9shsguj] {
display: flex;
background: #f7f8fa;
border: 1px solid #e3e7ee;
border-radius: 8px;
overflow: hidden;
}
.coa-period-toggle button[b-g4g9shsguj] {
border: none;
background: transparent;
width: 34px;
height: 32px;
font-weight: 700;
font-size: 12.5px;
color: #5b6472;
cursor: pointer;
border-right: 1px solid #e3e7ee;
}
.coa-period-toggle button:last-child[b-g4g9shsguj] {
border-right: none;
}
.coa-period-toggle button:hover[b-g4g9shsguj] {
background: #eef1f5;
}
.coa-period-toggle button.active[b-g4g9shsguj] {
background: #175e82;
color: #fff;
}
/* ── Buttons ────────────────────────────────────────────────────── */
.coa-btn[b-g4g9shsguj] {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 7px;
padding: 7px 14px;
font-size: 13px;
font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
transition: background .12s ease, opacity .12s ease;
}
.coa-btn-sm[b-g4g9shsguj] {
padding: 5px 10px;
font-size: 12.5px;
}
.coa-btn-primary[b-g4g9shsguj] {
background: #175e82;
color: #fff;
}
.coa-btn-primary:hover[b-g4g9shsguj] {
background: #124b69;
}
.coa-btn-ghost[b-g4g9shsguj] {
background: #fff;
border-color: #d7dde5;
color: #33404f;
}
.coa-btn-ghost:hover[b-g4g9shsguj] {
background: #f2f5f8;
}
.coa-btn-danger[b-g4g9shsguj] {
background: #b42318;
color: #fff;
}
.coa-btn-danger:hover[b-g4g9shsguj] {
background: #921c14;
}
.coa-btn:disabled[b-g4g9shsguj] {
opacity: .5;
cursor: not-allowed;
}
/* ── Grid ───────────────────────────────────────────────────────── */
.coa-grid-wrap[b-g4g9shsguj] {
flex: 1;
min-height: 0;
overflow: auto;
background: #fff;
border: 1px solid #e3e7ee;
border-radius: 10px;
}
.coa-grid[b-g4g9shsguj] {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
.coa-grid thead th[b-g4g9shsguj] {
position: sticky;
top: 0;
z-index: 2;
background: #306b9c;
color: #fff;
text-align: left;
font-weight: 600;
padding: 6px 10px;
white-space: nowrap;
}
/* Amount-column headers (OB/Dr/Cr/Nett Trans/CB/T-Dr/T-Cr) need to win over
the .coa-grid thead th rule above — same class alone loses on specificity
(0,1,0 vs 0,1,2), so it's qualified with the element selectors here too. */
.coa-grid thead th.coa-col-amt[b-g4g9shsguj] {
text-align: right;
}
.coa-grid tbody td[b-g4g9shsguj] {
padding: 4px 10px;
line-height: 1.3;
border-bottom: 1px solid #eef0f3;
color: #33404f;
}
.coa-grid tbody tr:nth-child(even)[b-g4g9shsguj] {
background: #fafbfc;
}
.coa-row-clickable[b-g4g9shsguj] {
cursor: pointer;
}
.coa-row-clickable:hover td[b-g4g9shsguj] {
background: #eef4fa;
}
.coa-col-num[b-g4g9shsguj] {
width: 44px;
color: #9aa3af;
}
.coa-col-amt[b-g4g9shsguj] {
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.coa-col-narr[b-g4g9shsguj] {
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.coa-vtype-badge[b-g4g9shsguj] {
display: inline-block;
background: #eef1f5;
color: #5b6472;
border-radius: 5px;
padding: 2px 6px;
font-size: 11px;
font-weight: 600;
}
/* ── Footer bar ─────────────────────────────────────────────────── */
.coa-footer-bar[b-g4g9shsguj] {
display: flex;
align-items: center;
gap: 24px;
background: #eef4fa;
border: 1px solid #dce9f5;
border-radius: 8px;
padding: 10px 16px;
font-size: 13px;
color: #1f2937;
flex-wrap: wrap;
}
.coa-footer-spacer[b-g4g9shsguj] {
flex: 1;
}
.coa-goto-page[b-g4g9shsguj] {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: #5b6472;
}
.coa-goto-page select[b-g4g9shsguj] {
border: 1px solid #d7dde5;
border-radius: 6px;
padding: 4px 6px;
font-size: 12.5px;
}
/* ── Empty / error / loading states ───────────────────────────────── */
.coa-empty[b-g4g9shsguj],
.coa-inline-error[b-g4g9shsguj] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
padding: 24px 16px;
color: #8a94a1;
font-size: 13px;
}
.coa-empty-lg[b-g4g9shsguj],
.coa-inline-error-lg[b-g4g9shsguj] {
height: 100%;
padding: 60px 20px;
}
.coa-empty i[b-g4g9shsguj],
.coa-inline-error i[b-g4g9shsguj] {
font-size: 26px;
color: #c3cad3;
}
.coa-inline-error i[b-g4g9shsguj] {
color: #d68a86;
}
.coa-empty p[b-g4g9shsguj],
.coa-inline-error p[b-g4g9shsguj] {
margin: 0;
font-weight: 600;
color: #4b5563;
}
.coa-empty span[b-g4g9shsguj] {
color: #9aa3af;
font-size: 12.5px;
}
.coa-skel[b-g4g9shsguj] {
padding: 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.coa-skel-grid[b-g4g9shsguj] {
padding: 14px;
}
.coa-skel-row[b-g4g9shsguj] {
height: 16px;
border-radius: 5px;
background: linear-gradient(90deg, #edf0f3 25%, #f7f8fa 37%, #edf0f3 63%);
background-size: 400% 100%;
animation: coa-shimmer-b-g4g9shsguj 1.4s ease infinite;
}
@keyframes coa-shimmer-b-g4g9shsguj {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
@media (prefers-reduced-motion: reduce) {
.coa-skel-row[b-g4g9shsguj] {
animation: none;
}
.coa-toast[b-g4g9shsguj] {
animation: none;
}
}
/* ── Modals: drill-menu popover + reset confirm ───────────────────── */
.coa-modal-backdrop[b-g4g9shsguj] {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, .35);
display: flex;
align-items: center;
justify-content: center;
z-index: 70;
}
.coa-drill-menu[b-g4g9shsguj] {
background: #fff;
border-radius: 10px;
box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
padding: 10px;
min-width: 200px;
}
.coa-drill-menu-title[b-g4g9shsguj] {
font-size: 12px;
color: #8a94a1;
padding: 6px 10px;
font-weight: 600;
}
.coa-drill-menu button[b-g4g9shsguj] {
display: block;
width: 100%;
text-align: left;
border: none;
background: transparent;
padding: 9px 10px;
border-radius: 6px;
font-size: 13.5px;
color: #33404f;
cursor: pointer;
}
.coa-drill-menu button:hover[b-g4g9shsguj] {
background: #eef4fa;
color: #175e82;
}
.coa-confirm-dialog[b-g4g9shsguj] {
background: #fff;
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
padding: 22px 24px;
max-width: 380px;
}
.coa-confirm-dialog h3[b-g4g9shsguj] {
margin: 0 0 8px;
font-size: 16px;
color: #1f2937;
}
.coa-confirm-dialog p[b-g4g9shsguj] {
margin: 0 0 18px;
font-size: 13px;
color: #5b6472;
line-height: 1.5;
}
.coa-confirm-actions[b-g4g9shsguj] {
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* ── Responsive ────────────────────────────────────────────────────
Desktop-first — this report is built for wide screens, but folds down
gracefully: tree panel goes full-width above the grid on narrow
viewports rather than squeezing to unusable widths. */
@media (max-width: 900px) {
.coa-body[b-g4g9shsguj] {
flex-direction: column;
}
.coa-tree-panel[b-g4g9shsguj] {
width: 100%;
max-height: 260px;
}
.coa-toolbar[b-g4g9shsguj] {
flex-direction: column;
align-items: stretch;
}
.coa-toolbar-right[b-g4g9shsguj] {
justify-content: space-between;
}
}
/* /Components/Pages/Reports/Drcrregister.razor.rz.scp.css */
/* Base page-flex layout — must be redefined here, CSS isolation means
ITB/CrossLinks' identical rules don't apply outside those components.
Matches ITB exactly: the card fills all remaining viewport height and the
table area scrolls internally (sticky stays put) instead of
growing the page — Total Records + the pager live in .bspl-footer, OUTSIDE
this card, so they stay pinned right below it regardless of row count and
never get shoved down to the bottom of an oversized box. Same fix as
item-print.razor.css. */
.itb-page[b-5t38xzxzj5] {
display: flex;
flex-direction: column;
height: 100%;
}
.itb-page .mu-card[b-5t38xzxzj5] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
margin: 12px 16px;
}
.itb-page .mu-table-wrap[b-5t38xzxzj5] {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.dc-table[b-5t38xzxzj5] {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
.dc-table thead th[b-5t38xzxzj5] {
position: sticky;
top: 0;
z-index: 5;
padding: 8px 10px;
text-align: left;
}
.dc-table thead th.num[b-5t38xzxzj5], .dc-table thead th.mu-th-idx[b-5t38xzxzj5] {
text-align: right;
}
.dc-table tbody td[b-5t38xzxzj5] {
padding: 7px 10px;
font-size: 12px;
border-bottom: 1px solid #eef0f2;
vertical-align: middle;
}
.dc-table tbody td.num[b-5t38xzxzj5] {
text-align: right;
font-variant-numeric: tabular-nums;
}
.dc-loading-row[b-5t38xzxzj5] {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px;
color: #64748b;
font-size: 12.5px;
}
.dc-spinner[b-5t38xzxzj5] {
width: 16px;
height: 16px;
border: 2px solid #d6dbe0;
border-top-color: #1ab99a;
border-radius: 50%;
animation: dc-spin-b-5t38xzxzj5 0.7s linear infinite;
}
@keyframes dc-spin-b-5t38xzxzj5 {
to {
transform: rotate(360deg);
}
}
.dc-pager-btns[b-5t38xzxzj5] {
display: flex;
align-items: center;
gap: 10px;
}
.dc-sortdir-group[b-5t38xzxzj5] {
display: flex;
gap: 14px;
}
/* /Components/Pages/Reports/Itemprint.razor.rz.scp.css */
/* Base page-flex layout — must be redefined here, CSS isolation means
ITB/CrossLinks' identical rules don't apply outside those components.
Matches ITB exactly: the card fills all remaining viewport height and the
table area scrolls internally (sticky stays put) instead of
growing the page — Total Records + the pager live in .bspl-footer, OUTSIDE
this card, so they stay pinned right below it regardless of row count and
never get shoved down to the bottom of an oversized box. */
.itb-page[b-zd2rawhdb0] {
display: flex;
flex-direction: column;
height: 100%;
}
.itb-page .mu-card[b-zd2rawhdb0] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
margin: 12px 16px;
}
.itb-page .mu-table-wrap[b-zd2rawhdb0] {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.ip-table[b-zd2rawhdb0] {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
.ip-table thead th[b-zd2rawhdb0] {
position: sticky;
top: 0;
z-index: 5;
padding: 8px 10px;
text-align: left;
}
.ip-table thead th.num[b-zd2rawhdb0], .ip-table thead th.mu-th-idx[b-zd2rawhdb0] {
text-align: right;
}
.ip-table tbody td[b-zd2rawhdb0] {
padding: 7px 10px;
font-size: 12px;
border-bottom: 1px solid #eef0f2;
vertical-align: middle;
}
.ip-table tbody td.num[b-zd2rawhdb0] {
text-align: right;
font-variant-numeric: tabular-nums;
}
.ip-loading-row[b-zd2rawhdb0] {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px;
color: #64748b;
font-size: 12.5px;
}
.ip-spinner[b-zd2rawhdb0] {
width: 16px;
height: 16px;
border: 2px solid #d6dbe0;
border-top-color: #1ab99a;
border-radius: 50%;
animation: ip-spin-b-zd2rawhdb0 0.7s linear infinite;
}
@keyframes ip-spin-b-zd2rawhdb0 {
to {
transform: rotate(360deg);
}
}
.ip-pager-btns[b-zd2rawhdb0] {
display: flex;
align-items: center;
gap: 10px;
}
.ip-rtype-group[b-zd2rawhdb0] {
display: flex;
flex-direction: column;
gap: 6px;
}
/* /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;
}
/* Modals (Ledger picker, Send Mail) use the shared .uf-overlay/.uf-modal
chrome, which only carries z-index:1000 globally — that put them behind
this page's header once it was bumped to 1300 above. Page-scoped bump so
modals render above everything here without touching the shared file. */
.uf-overlay[b-hh3n09puyr] {
z-index: 1400;
}
/* VoucherViewPopup (Components/Pages/Transactions/DayBook/VoucherViewPopup.razor)
ships its own inline