/* =====================================================================
   GAINS — masters-forms.css
   Shared, global styles for all Masters forms (Group, Ledger, Login and
   their edit modals). Consolidates the duplicated "mu-" (grid/page) and
   "uf-" (modal/edit-form) rule sets that used to be repeated inside each
   component's own .razor.css scoped stylesheet.

   Loaded once, globally, from Components/App.razor — every Masters page
   still applies these classes; they no longer need to redefine them.
   ===================================================================== */

/* ── Common font for every Masters form ── */
.mu-page,
.uf-overlay,
.le-inline {
    font-family: Arial;
}

/* =====================================================================
   "mu-" system — used by MGroup, MLedger, MLogin (grid pages)
   ===================================================================== */

.mu-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Clickable grid row — shared/global so ANY page can use it just by adding
   class="mu-row-click" to a row. Gives a pointer cursor everywhere, plus a
   self-contained hover highlight for use outside a .mu-table. Inside a
   .mu-table, the table's own tr:hover rule provides the visible highlight. */
.mu-row-click {
    cursor: pointer;
    transition: background 0.12s;
}

    .mu-row-click:hover {
        background: #f3fcf9;
    }

/* ── Page header (title + info line, shared look across all Masters pages) ── */
.mu-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.mu-title {
    font-size: 22px;
    font-weight: 100;
    color: #0f9d8a;
    margin: 0;
}

.mu-sub {
    font-size: 13px;
    color: #64748b;
    margin: 4px 0 0;
}

.mu-hdr-actions {
    display: flex;
    gap: 8px;
}

/* ── Shared button sizing — every Masters action button (mu-/uf-/le-)
   uses this same size/shape; only background/border/color vary per variant. ── */
.mu-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Same size as .bspl-filter-toggle (padding/font/radius) so New +
       Filters match in the page header. */
    padding: 5px 12px;
    border-radius: 3px;
    border: 1px solid #dde3ed;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: #1a2537;
    font-family: inherit;
    letter-spacing: 0.04em;
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
}

    .mu-btn:hover {
        background: #f1f5f9;
    }

    .mu-btn i {
        font-size: 14px;
    }

    .mu-btn.primary {
        background: #1a56a7;
        color: #fff;
        border-color: #1a56a7;
    }

        .mu-btn.primary:hover {
            background: #0f3d82;
        }

    .mu-btn.info {
        background: #1976d2;
        color: #fff;
        border-color: #1976d2;
    }

        .mu-btn.info:hover {
            background: #145ea8;
        }

    .mu-btn.success {
        background: #1ab394;
        color: #fff;
        border-color: #1ab394;
    }

        .mu-btn.success:hover {
            background: #159a80;
        }

/* ── Mobile: header action buttons (New / Filter) show icon only, stay right-aligned ── */
@media (max-width: 640px) {
    .mu-hdr-actions {
        margin-left: auto;
    }

        .mu-hdr-actions .mu-btn-label {
            display: none;
        }

        .mu-hdr-actions .mu-btn {
            padding: 8px 10px;
            gap: 0;
        }
}

/* ── Card ── */
.mu-card {
    position: relative;
    min-height: 260px;
    background: #fff;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* ── Toolbar ── */
.mu-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #eef2f7;
}

.mu-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 320px;
}

    .mu-search i {
        position: absolute;
        left: 11px;
        color: #94a3b8;
        font-size: 16px;
        pointer-events: none;
    }

    /* Same look as the entry-form textboxes (MLedgerEdit.razor's .le-inp:
       border color, radius, font) — border/radius/vertical padding only;
       the extra left padding stays so the icon above has room to sit
       inside the box without overlapping the typed text. */
    .mu-search input {
        width: 100%;
        padding: 6px 12px 6px 34px;
        border: 1px solid #cbd5e1;
        border-radius: 5px;
        font-size: 13px;
        color: #1a2537;
        font-family: inherit;
        background: #fff;
        outline: none;
        transition: border-color 0.12s, box-shadow 0.12s;
    }

        .mu-search input:focus {
            border-color: #1a56a7;
            box-shadow: 0 0 0 3px rgba(26,86,167,0.12);
        }

        .mu-search input:disabled {
            background: #f1f5f9;
            color: #64748b;
            cursor: not-allowed;
        }

/* ── Top-tabs strip search box (MLedger.razor / MItem.razor — sits inside
   .le-toptabs, beside the tab buttons). Same look as .mu-search's input
   and MLedgerEdit.razor's .le-inp entry-form textboxes: same border
   color, radius and focus ring, just built as a bordered wrapper (icon +
   borderless input inside) instead of an absolutely-positioned icon.
   Defined once here so every page that has one of these strips shares it
   instead of redefining it per page; a page only needs its own
   page-scoped CSS for layout choices (e.g. MItem.razor.css centering
   this in the remaining strip width). ── */
.le-toptabs-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    width: 260px;
    transition: border-color 0.12s, box-shadow 0.12s;
}

    .le-toptabs-search:focus-within {
        border-color: #1a56a7;
        box-shadow: 0 0 0 3px rgba(26,86,167,0.12);
    }

    .le-toptabs-search i {
        color: #94a3b8;
        font-size: 12px;
        flex-shrink: 0;
    }

    .le-toptabs-search input {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        font-size: 13px;
        font-family: inherit;
        color: #1a2537;
        background: transparent;
    }

    .le-toptabs-search input::placeholder {
        color: #b4b4b4;
    }

.mu-count {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

/* ── Table ── */
/* Fixed height (not max-height) so the scroll area stays the same size no
   matter how many rows a search/filter leaves. This keeps the pagination
   footer anchored in place instead of riding up when results shrink. */
.mu-table-wrap {
    height: 540px;
    overflow: auto;
}

/* Themed scrollbars (teal accent, matches the app) */
.mu-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: #b6e8db transparent;
}

    .mu-table-wrap::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .mu-table-wrap::-webkit-scrollbar-track {
        background: transparent;
    }

    .mu-table-wrap::-webkit-scrollbar-thumb {
        background: #b6e8db;
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

        .mu-table-wrap::-webkit-scrollbar-thumb:hover {
            background: #1ab99a;
            background-clip: content-box;
        }

    .mu-table-wrap::-webkit-scrollbar-corner {
        background: transparent;
    }

/* Dashboard scrolling tables/lists use the same slim, neutral scrollbar as
   the sidebar (.sb-nav) and page (.gains-content) instead of the browser's
   default arrowed one. 6px (not their 3-4px) so the horizontal bar stays easy to grab. */
.gd-grid-scroll,
.gd-arap-list,
.gd-dash1-list {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .gd-grid-scroll::-webkit-scrollbar,
    .gd-arap-list::-webkit-scrollbar,
    .gd-dash1-list::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .gd-grid-scroll::-webkit-scrollbar-track,
    .gd-arap-list::-webkit-scrollbar-track,
    .gd-dash1-list::-webkit-scrollbar-track,
    .gd-grid-scroll::-webkit-scrollbar-corner,
    .gd-arap-list::-webkit-scrollbar-corner,
    .gd-dash1-list::-webkit-scrollbar-corner {
        background: transparent;
    }

    .gd-grid-scroll::-webkit-scrollbar-thumb,
    .gd-arap-list::-webkit-scrollbar-thumb,
    .gd-dash1-list::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 6px;
    }

        .gd-grid-scroll::-webkit-scrollbar-thumb:hover,
        .gd-arap-list::-webkit-scrollbar-thumb:hover,
        .gd-dash1-list::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.mu-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .mu-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #306b9c;
        color: #fff;
        text-align: left;
        font-weight: 600;
        font-size: 12.5px;
        padding: 12px 14px;
        white-space: nowrap;
        border-bottom: 1px solid #3f4754;
    }
/* Transaction pages override the master header color centrally here.
   Add ".t-page" to the root wrapper div of every transaction form
   (alongside its existing page-specific class) — no CSS edits needed
   for new pages going forward.
   Also covers page-specific table classes that don't reuse .mu-table:
   .tb2-table (GAINS_TB), .db-table (Daybook). */
.t-page .mu-table thead th,
.t-page .tb2-table thead th,
.t-page .db-table th {
    background: #306B9C;
    color: #fff;
}

.mu-th-idx {
    width: 56px;
}

.mu-th-sort {
    cursor: pointer;
    user-select: none;
}

    .mu-th-sort:hover {
        background: #3f4754;
    }

    .mu-th-sort i {
        font-size: 14px;
        margin-left: 6px;
        opacity: 0.75;
        vertical-align: -2px;
    }

    .mu-th-sort span {
        vertical-align: middle;
    }

.mu-table tbody td {
    padding: 10px 14px;
    color: #1a2537;
    border-bottom: 1px solid #eef2f7;
    white-space: nowrap;
}

.mu-table tbody tr:nth-child(even) td {
    background: #f7f9fc;
}

.mu-table tbody tr:hover td {
    background: #eef4fb;
}

.mu-idx {
    color: #1a56a7;
    font-weight: 600;
}

.mu-empty {
    text-align: center;
    color: #94a3b8;
    padding: 28px 0;
    font-size: 13px;
}

/* ── Class badge (isPLBS): round letter chip ── */
.mu-plbs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
/* Blue: Assets (A), Income (I) */
.mu-plbs-blue {
    background: #dbeafe;
    color: #1a56a7;
}
/* Maroon: Liability (L), Expense (E) */
.mu-plbs-maroon {
    background: #f5d9dd;
    color: #8b1e3f;
}

/* ── Footer / pagination ── */
.mu-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid #eef2f7;
    background: #fbfcfe;
    flex-wrap: wrap;
}

.mu-foot-info {
    font-size: 12.5px;
    color: #64748b;
}

.mu-pager {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.mu-pagesize-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.mu-pagesize {
    appearance: none;
    -webkit-appearance: none;
    height: 32px;
    box-sizing: border-box;
    padding: 6px 30px 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    font-size: 13px;
    color: #1a2537;
    font-family: inherit;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}

    .mu-pagesize:hover {
        border-color: #94a3b8;
    }

    .mu-pagesize:focus {
        outline: none;
        border-color: #1a56a7;
        box-shadow: 0 0 0 3px rgba(26,86,167,0.12);
    }

.mu-pagesize-caret {
    position: absolute;
    right: 10px;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #94a3b8;
    pointer-events: none;
}

.mu-pages {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mu-nav, .mu-pagenum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

    .mu-nav i {
        font-size: 14px;
    }

    .mu-nav:hover:not(:disabled), .mu-pagenum:hover {
        background: #eef4fb;
        border-color: #c3d4ec;
        color: #1a56a7;
    }

    .mu-nav:disabled {
        color: #cbd5e1;
        background: #f7f9fc;
        cursor: not-allowed;
    }

    .mu-pagenum.active {
        background: #1a56a7;
        border-color: #1a56a7;
        color: #fff;
        box-shadow: 0 1px 3px rgba(26,86,167,0.35);
    }

        .mu-pagenum.active:hover {
            background: #1a56a7;
            color: #fff;
        }

.mu-ellipsis {
    padding: 0 4px;
    color: #94a3b8;
    font-size: 13px;
    user-select: none;
}

/* ── Filter bar (inline, above the grid) — reusable on any Masters page ── */
.mu-filter {
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mu-alpha {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

    .mu-alpha button {
        min-width: 25px;
        height: 25px;
        padding: 0 5px;
        border: 1px solid #dde3ed;
        background: #fff;
        border-radius: 5px;
        font-size: 11.5px;
        font-family: inherit;
        color: #334155;
        cursor: pointer;
        transition: background 0.12s, color 0.12s, border-color 0.12s;
    }

        .mu-alpha button:hover {
            background: #eef4fb;
            border-color: #c3d4ec;
            color: #1a56a7;
        }

        .mu-alpha button.active {
            background: #1a56a7;
            border-color: #1a56a7;
            color: #fff;
        }

.mu-filter-grid {
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr) auto minmax(160px, 1fr);
    gap: 10px 14px;
    align-items: center;
}

    .mu-filter-grid > label {
        font-size: 12px;
        font-weight: 600;
        color: #475569;
        white-space: nowrap;
    }

    .mu-filter-grid input,
    .mu-filter-grid select {
        width: 100%;
        padding: 7px 9px;
        border: 1px solid #dde3ed;
        border-radius: 6px;
        font-size: 12.5px;
        font-family: inherit;
        color: #1a2537;
        background: #fff;
        outline: none;
        transition: border-color 0.12s, box-shadow 0.12s;
    }

        .mu-filter-grid input:focus,
        .mu-filter-grid select:focus {
            border-color: #1a56a7;
            box-shadow: 0 0 0 3px rgba(26,86,167,0.12);
        }

.mu-filter-pair {
    display: flex;
    gap: 8px;
}

    .mu-filter-pair .mu-ob-op {
        flex: 0 0 72px;
    }

.mu-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .mu-filter-grid {
        grid-template-columns: auto 1fr;
    }
}

/* ── Filter drawer (right side) — reusable on any Masters page ── */
.mu-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: transparent;
}

.mu-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1200;
    width: 320px;
    max-width: 90vw;
    height: 100vh;
    background: #fff;
    box-shadow: -8px 0 30px rgba(15, 23, 42, 0.22);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}

    .mu-drawer.open {
        transform: translateX(0);
    }

.mu-drawer-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #eef2f7;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: #1a2537;
}

.mu-drawer-x {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

    .mu-drawer-x:hover {
        opacity: 0.8;
    }

.mu-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #fff;
}

/* Green section bar (demarcator) inside a .mu-drawer filter panel —
   same look as BSPL's / ARAP's drawer section bars (#1ab99a, white
   uppercase text). Usage: <div class="mu-drawer-section">Title</div> as a
   direct child of .mu-drawer-body. Negative side margins cancel
   .mu-drawer-body's 18px padding so the bar runs edge to edge across the
   drawer; negative bottom margin tightens the gap to the field below
   (body gap is 16px). */
.mu-drawer-section {
    margin: 0 -18px -6px;
    padding: 6px 18px;
    background: #1ab99a;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mu-fld {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .mu-fld > label {
        font-size: 12px;
        font-weight: 600;
        color: #1a2537;
    }

    /* Same look as the master .uf-input (MLedgerEdit style) */
    .mu-fld input:not([type="checkbox"]):not([type="radio"]), .mu-fld select {
        width: 100%;
        height: 32px;
        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;
        transition: border-color 0.12s, box-shadow 0.12s;
    }

        .mu-fld input:focus, .mu-fld select:focus {
            border-color: #1a56a7;
            box-shadow: 0 0 0 3px rgba(26,86,167,0.12);
        }

        .mu-fld input:disabled, .mu-fld select:disabled {
            background: #f1f5f9;
            color: #64748b;
            cursor: not-allowed;
        }

.mu-drawer-foot {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 18px;
    border-top: 1px solid #eef2f7;
    background: #fff;
}

    .mu-drawer-foot .mu-btn {
        flex: 1;
        justify-content: center;
    }

/* ── Toast (save confirmation) ── */
/* =====================================================================
   Standard application toast — ONE shared look for every form.
   Colour by action (CSS variables, so a variant only swaps colours):
     created / updated / ok (and plain .mu-toast) -> green
     deleted / del / error / err                  -> red
     warning / warn                               -> yellow
     info                                          -> blue
   Pages that render their own `mu-toast` / `mu-toast-err` markup pick
   this up automatically. ToastService (Services/ToastService.cs) and
   window.gainsToast (app.js) render the same classes, stacked inside
   .mu-toast-host so several can show at once.
   ===================================================================== */
.mu-toast {
    --mt-bg: #f0fdf4;
    --mt-border: #86efac;
    --mt-accent: #16a34a;
    --mt-text: #14532d;
    position: fixed;
    right: 28px;
    top: 28px;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 320px;
    max-width: 420px;
    padding: 16px 16px 16px 18px;
    border-radius: 8px;
    background: var(--mt-bg);
    color: var(--mt-text);
    border: 1px solid var(--mt-border);
    border-left: 5px solid var(--mt-accent);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    animation: mu-toast-in 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

    .mu-toast i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        color: #fff;
        background: var(--mt-accent);
        border-radius: 50%;
        font-size: 15px;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
    }

/* Insert / Create, Update / Edit — green (same as plain .mu-toast) */
.mu-toast-created,
.mu-toast-updated,
.mu-toast-ok {
    --mt-bg: #f0fdf4;
    --mt-border: #86efac;
    --mt-accent: #16a34a;
    --mt-text: #14532d;
}

/* Delete, Error — red */
.mu-toast-deleted,
.mu-toast-del,
.mu-toast-error,
.mu-toast-err {
    --mt-bg: #fef2f2;
    --mt-border: #fca5a5;
    --mt-accent: #dc2626;
    --mt-text: #7f1d1d;
}

/* Warning — yellow */
.mu-toast-warning,
.mu-toast-warn {
    --mt-bg: #fefce8;
    --mt-border: #fde047;
    --mt-accent: #ca8a04;
    --mt-text: #713f12;
}

/* Information — blue */
.mu-toast-info {
    --mt-bg: #eff6ff;
    --mt-border: #93c5fd;
    --mt-accent: #2563eb;
    --mt-text: #1e3a8a;
}

/* Stack used by ToastService / gainsToast: newest on top, above every popup */
.mu-toast-host {
    position: fixed;
    top: 28px;
    right: 28px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

    .mu-toast-host .mu-toast {
        position: static;
        min-width: 0;
        max-width: none;
        pointer-events: auto;
    }

.mu-toast-out {
    animation: mu-toast-out 0.2s ease-in forwards;
}

@keyframes mu-toast-out {
    to { opacity: 0; transform: translateX(16px); }
}

@media (max-width: 576px) {
    .mu-toast-host {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}

.mu-toast span {
    flex: 1;
}

.mu-toast-x {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    margin-left: 4px;
}

    .mu-toast-x:hover {
        color: #475569;
    }

@keyframes mu-toast-in {
    from {
        opacity: 0;
        transform: translateY(-16px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Delete action (also used by Ledger's .le-del) ── */
.mu-th-act {
    width: 48px;
}

.mu-act-cell {
    text-align: center;
}

.mu-del, .le-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid #f3d0d6;
    background: #fff;
    color: #dc2626;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

    .mu-del i, .le-del i {
        font-size: 14px;
    }

    .mu-del:hover, .le-del:hover {
        background: #fee2e2;
        border-color: #f1aab2;
    }

/* ── Status/flag icons: shared sizing across all Masters pages ── */
.mu-check, .mu-cross, .le-chk-ok, .le-chk-no {
    font-size: 16px;
    vertical-align: -3px;
}

.mu-check, .le-chk-ok {
    color: #16a34a;
}

/* ── Delete confirmation dialog (also used by Ledger's .le-cfm-*) ── */
.mu-confirm-overlay, .le-cfm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.mu-confirm, .le-cfm {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 6px;
    padding: 26px 24px 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    text-align: center;
    animation: mu-confirm-in 0.2s ease-out;
}

.mu-confirm-icon, .le-cfm-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fee2e2;
    color: #dc2626;
}

    .mu-confirm-icon i, .le-cfm-icon i {
        font-size: 26px;
    }

.mu-confirm-title, .le-cfm-title {
    font-size: 17px;
    font-weight: 650;
    color: #1a2537;
    margin-bottom: 6px;
}

.mu-confirm-text, .le-cfm-text {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 22px;
}

    .mu-confirm-text strong, .le-cfm-text strong {
        color: #1a2537;
    }

.mu-confirm-actions, .le-cfm-actions {
    display: flex;
    gap: 10px;
}

    .mu-confirm-actions button, .le-cfm-actions button {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 7px 13px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
        letter-spacing: 0.04em;
        white-space: nowrap;
        user-select: none;
        transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
    }

        .mu-confirm-actions button i, .le-cfm-actions button i {
            font-size: 14px;
        }

.mu-confirm-cancel, .le-cfm-cancel {
    background: #fff;
    color: #334155;
    border: 1px solid #dde3ed;
}

    .mu-confirm-cancel:hover, .le-cfm-cancel:hover {
        background: #f1f5f9;
    }

.mu-confirm-del, .le-cfm-del {
    background: #dc2626;
    color: #fff;
    border: 1px solid #dc2626;
}

    .mu-confirm-del:hover, .le-cfm-del:hover {
        background: #b91c1c;
    }

    .mu-confirm-del:disabled {
        opacity: 0.65;
        cursor: default;
    }

/* Green variant — used to repurpose ConfirmationDialog for non-destructive
   confirmations such as the "force login" prompt. */
.mu-confirm-icon-green {
    background: #dcfce7;
    color: #16a34a;
}

.mu-confirm-login {
    background: #16a34a;
    color: #fff;
    border: 1px solid #16a34a;
}

    .mu-confirm-login:hover {
        background: #15803d;
    }

    .mu-confirm-login:disabled {
        opacity: 0.65;
        cursor: default;
    }

/* ConfirmationDialog with the optional green uf-header (HeaderTitle set):
   header spans the card edge-to-edge, body keeps the usual padding. */
.mu-confirm.mu-confirm-headed {
    padding: 0;
    overflow: hidden;
}

    .mu-confirm.mu-confirm-headed .uf-header {
        text-align: left;
    }

    .mu-confirm.mu-confirm-headed .mu-confirm-body {
        padding: 22px 24px 20px;
    }

.mu-confirm-head-icon {
    margin-right: 8px;
}

@keyframes mu-confirm-in {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(6px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* =====================================================================
   "uf-" system — used by MGroupEdit, MLoginEdit (modal edit forms)
   ===================================================================== */

.uf-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px;
    overflow-y: auto;
}

.uf-modal {
    width: 100%;
    max-width: 780px;
    background: #ffffff;
    border: 1px solid #e7ebf2;
    border-radius: 6px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header — light green gradient (matches the section headers) */
.uf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: linear-gradient(90deg, #f3fcf9 0%, #d6f2ea 100%);
    border-bottom: 1px solid #cdeee4;
    position: relative;
    overflow: hidden;
}

    .uf-header::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #1ab99a;
    }

.uf-title {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    position: relative;
    z-index: 1;
}

    .uf-title > span:first-child {
        font-size: 16px;
        font-weight: 650;
        color: #0f766e;
        letter-spacing: 0.2px;
    }

.uf-title-sub {
    font-size: 11.5px;
    color: #5b8a82;
    margin-top: 3px;
}

.uf-close {
    background: transparent;
    border: none;
    color: #0f766e;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
}

    .uf-close:hover {
        background: transparent;
    }

    .uf-close i {
        font-size: 16px;
    }

/* Body */
.uf-body {
    padding: 20px 22px;
    max-height: calc(100vh - 230px);
    overflow-y: auto;
}

.uf-field {
    display: grid;
    grid-template-columns: 112px 1fr;
    align-items: start;
    gap: 10px;
}

    .uf-field > label {
        font-size: 12.5px;
        color: #475569;
        font-weight: 500;
        padding-top: 8px;
    }
/* Note: margin-bottom on .uf-field (and any :last-child reset) differs
   slightly per form, so it's set locally in each page's own stylesheet. */
.uf-req {
    color: #e11d48;
    margin-left: 2px;
}

/* =====================================================================
   MASTER FORM CONTROLS — text box / dropdown / textarea / checkbox / radio
   One look for every form, taken from Masters > Ledger edit (MLedgerEdit):
   #cbd5e1 border, 5px radius, 6px/8px padding, 13px text, blue focus ring,
   grey disabled/read-only. Pages should use these classes and NOT restyle
   inputs locally — only layout (width, grid columns) belongs in page CSS.

     <input  class="uf-input" />          text / number / email / date
     <select class="uf-input">            dropdown
     <textarea class="uf-input">          multi-line
     size helpers:  uf-sm (short), uf-xs (tiny, e.g. Dr/Cr), uf-amt (amount,
                    right-aligned), uf-cell (inside a grid/table cell)
     uf-nospin      hide number spinners
     uf-readonly    read-only look on an input that isn't [readonly]
     uf-invalid     validation error (defined below)
     <label class="uf-chk"><input type="checkbox" /> Text</label>
     <label class="uf-chk"><input type="radio" /> Text</label>
     wrap a form in  uf-compact  for MLedgerEdit-style natural-width fields
     (auto width, max 320px) instead of full-width fields.
   ===================================================================== */
.uf-input {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    font-size: 13px;
    color: #1a2537;
    font-family: inherit;
    background: #fff;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}

    .uf-input::placeholder {
        color: #94a3b8;
    }

    .uf-input:focus {
        border-color: #1a56a7;
        box-shadow: 0 0 0 3px rgba(26, 86, 167, 0.12);
    }

    .uf-input:disabled,
    .uf-input[readonly],
    .uf-input.uf-readonly {
        background: #f1f5f9;
        color: #64748b;
    }

    .uf-input:disabled,
    .uf-input.uf-readonly {
        cursor: not-allowed;
    }

select.uf-input {
    cursor: pointer;
}

textarea.uf-input {
    height: auto;
    resize: none;
}

/* Size helpers (MLedgerEdit sizes) */
.uf-input.uf-sm {
    max-width: 180px;
}

.uf-input.uf-xs {
    width: 64px;
    max-width: 64px;
    flex: 0 0 auto;
}

.uf-input.uf-amt {
    width: 130px;
    max-width: 130px;
    text-align: right;
}

/* Grid / table cell input — a little tighter */
.uf-input.uf-cell {
    padding: 5px 6px;
}

/* Hide number spinners */
.uf-nospin::-webkit-outer-spin-button,
.uf-nospin::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.uf-nospin {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Natural-width fields, MLedgerEdit style (opt-in per form) */
.uf-compact .uf-input {
    width: auto;
    max-width: 320px;
}

.uf-compact .uf-input.uf-sm {
    max-width: 180px;
}

.uf-compact .uf-input.uf-xs {
    width: 64px;
    max-width: 64px;
}

.uf-compact .uf-input.uf-amt {
    width: 130px;
    max-width: 130px;
}

.uf-compact textarea.uf-input {
    width: 100%;
}

@media (max-width: 720px) {
    .uf-compact .uf-input {
        width: 100%;
        max-width: 100%;
    }

        .uf-compact .uf-input.uf-sm,
        .uf-compact .uf-input.uf-xs,
        .uf-compact .uf-input.uf-amt {
            width: auto;
            max-width: none;
            flex: 1 1 80px;
        }
}

/* Checkbox / radio — every checkbox and radio in the app gets the same size
   and accent. :where() keeps specificity at zero so any purpose-built
   control (toggle switch, hidden input, etc.) still overrides it. */
:where(input[type="checkbox"], input[type="radio"]) {
    width: 15px;
    height: 15px;
    accent-color: #1ab99a;
    cursor: pointer;
    vertical-align: middle;
}

    :where(input[type="checkbox"], input[type="radio"]):disabled {
        cursor: not-allowed;
    }

/* Label wrapping a checkbox / radio + its text */
.uf-chk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1a2537;
    cursor: pointer;
}

.uf-invalid {
    border-color: #e11d48 !important;
    background: #fff5f6;
}

.uf-err {
    color: #e11d48;
    font-size: 11px;
    margin-top: 4px;
}

/* Section header — subtle strip */
.uf-section {
    /* margin-top differs per form — set locally in each page's stylesheet */
    padding: 9px 14px;
    background: linear-gradient(90deg, #f3fcf9 0%, #d6f2ea 100%);
    color: #0f766e;
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: 0.8px;
    border: 1px solid #cdeee4;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
}

.uf-sec-body {
    border: 1px solid #e9edf5;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 16px 14px;
    background: #fcfdfe;
}

.uf-form-error {
    margin-top: 16px;
    padding: 10px 13px;
    border-radius: 9px;
    background: #fff5f6;
    border: 1px solid #f7cdd4;
    color: #be123c;
    font-size: 12.5px;
}

/* Footer */
.uf-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 15px 22px;
    border-top: 1px solid #eef1f6;
    background: #ffffff;
}

.uf-footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.uf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /* Fixed height + normalised line-height so Save (with icon) and New /
       Cancel (with or without icon) always render at the same height. */
    height: 34px;
    box-sizing: border-box;
    line-height: 1;
    padding: 0 13px;
    border-radius: 6px;
    border: 1px solid transparent;
    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, color 0.15s;
}

    .uf-btn i, .le-btn i {
        font-size: 14px;
    }

    .uf-btn i {
        line-height: 1;
    }

    /* Generic disabled state for every uf-btn variant (New / Delete /
       Cancel etc.); .uf-btn-save keeps its own rule below. */
    .uf-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.uf-btn-save {
    background: #15803d;
    border-color: #15803d;
    color: #fff;
    box-shadow: 0 1px 3px rgba(21, 128, 61, 0.35);
}

    .uf-btn-save:hover {
        background: #116630;
    }

    .uf-btn-save:disabled {
        opacity: 0.65;
        cursor: default;
    }

/* ── Password field eye-toggle (uf- edit modals) — reusable on any Masters edit form ── */
.uf-pwd {
    position: relative;
    display: block;
}

    .uf-pwd .uf-input {
        padding-right: 38px;
    }

.uf-eye {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #6b7280;
}

    .uf-eye i {
        font-size: 16px;
    }

    .uf-eye:hover {
        color: #1ab99a;
    }

/* ── Checkbox inputs (uf- and le- forms) — shared sizing/accent so any
   future form's checkboxes look consistent without redefining this ── */
.uf-check input, .le-chk input {
    width: 15px;
    height: 15px;
    accent-color: #1ab99a;
    cursor: pointer;
}

/* ── Secondary button variants (uf- edit-modal footers) — reusable on any
   Masters edit form that needs a plain/"ghost", "new", or "delete" action
   button alongside the primary Save button ── */
.uf-btn-ghost {
    padding: 7px 15px;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

    .uf-btn-ghost:hover {
        background: #f6f8fb;
        border-color: #c7d0dd;
    }

.uf-btn-new {
    background: #fff;
    color: #475569;
    border-color: #dde3ec;
}

    .uf-btn-new:hover {
        background: #f1f5f9;
    }

.uf-btn-del {
    background: #fff;
    color: #e11d48;
    border-color: #f3d0d6;
}

    .uf-btn-del:hover {
        background: #fff5f6;
    }











/* =====================================================================
   GAINS — common-page-chrome.css
   Shared styles for: page GAINS-toggle button, page header/title block,
   page footer, and the Filters button.

   USAGE:
   Add this file's link tag to App.razor,
   e.g. <link rel="stylesheet" href="css/common-page-chrome.css" />

   Every page (BSPL, GainsLanding, and any future migrated page) then
   just needs to reuse these exact class names in its markup — no need
   to redefine them per-page in that page's own .razor.css.

   Class names deliberately kept as "bspl-*" so existing pages (BSPL)
   need zero markup changes; new pages should simply adopt the same
   class names shown in the HTML SKELETON section at the bottom.
   ===================================================================== */


/* ══════════════════════════════════════════════════════
   PAGE GAINS-TOGGLE BUTTON
   (Green pill, hamburger + "GAINS". Hidden while the sidebar is
   expanded — the sidebar's own toggle handles that. Appears once the
   sidebar collapses, so there's still a way to reopen it from any page.)
   ══════════════════════════════════════════════════════ */
.bspl-gains-toggle,
.gl-gains-toggle {
    display: none;
    align-items: center;
    gap: 7px;
    background: #1ab99a;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    letter-spacing: 0.04em;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 6px rgba(26,185,154,0.3);
    flex-shrink: 0;
}

    .bspl-gains-toggle:hover,
    .gl-gains-toggle:hover {
        background: #0e9e83;
    }

    .bspl-gains-toggle i,
    .gl-gains-toggle i {
        font-size: 15px;
    }

.gains-shell.sb-collapsed .bspl-gains-toggle,
.gains-shell.sb-collapsed .gl-gains-toggle {
    display: flex;
}

/* Wrapper that sits the toggle button beside the page title */
.bspl-title-left,
.gl-site-strip-left-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}


/* ══════════════════════════════════════════════════════
   PAGE HEADER / TITLE BLOCK
   ══════════════════════════════════════════════════════ */
.bspl-title-block {
    flex-shrink: 0;
    padding: 14px 16px 8px;
    background: #fff;
    border-bottom: 1px solid #e7eaec;
}

.bspl-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.bspl-title-block h1 {
    margin: 0 0 2px 0;
    font-size: 22px;
    font-weight: 100;
    color: #1ab394;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.1;
}

.bspl-title-block .bspl-subtitle {
    font-size: 12px;
    color: #999;
    font-weight: 400;
}

.bspl-title-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .bspl-title-actions {
        gap: 4px;
    }
}

/* ── Masters grid pages (.mu-page: MLedger, MLogin, MGroup, MItem,
   MItemGroup) — title + subtitle look like BSPL's.
   The rest of the Masters page is Arial, which has no thin weight, so the
   weight-100 title drew bold. Only the title/subtitle use Segoe UI (its
   Light face is what BSPL's thin title renders in); everything else on the
   page stays Arial. Scoped to .mu-page so BSPL and other pages are untouched. ── */
.mu-page .bspl-title-block h1,
.mu-page .bspl-title-block .bspl-subtitle {
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* Mobile: title-bar buttons (e.g. "New user") icon-only, kept top-right —
   moved here from each Masters grid page's own .razor.css. */
@media (max-width: 767px) {
    .mu-page .bspl-title-actions {
        margin-left: auto;
    }

        .mu-page .bspl-title-actions .mu-btn-label {
            display: none;
        }

        .mu-page .bspl-title-actions .mu-btn {
            padding: 8px 10px;
            gap: 0;
        }

            .mu-page .bspl-title-actions .mu-btn i {
                font-size: 15px;
            }
}


/* ══════════════════════════════════════════════════════
   FILTERS BUTTON
   ══════════════════════════════════════════════════════ */
.bspl-filter-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    background: #1ab99a;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

    .bspl-filter-toggle:hover {
        background: #1467a0;
    }

    .bspl-filter-toggle.has-filter {
        background: #d9534f;
    }


/* ══════════════════════════════════════════════════════
   PAGE FOOTER
   ══════════════════════════════════════════════════════ */
.bspl-footer,
.gl-footer {
    flex-shrink: 0;
    margin-top: auto;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #f5f5f5;
    border-top: 1px solid #e7eaec;
    gap: 10px;
}

.gl-footer {
    justify-content: flex-end;
    font-size: 11px;
    color: #999;
}

.bspl-footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bspl-footer-right {
    margin-left: auto;
    font-size: 11px;
    color: #999;
}

.bspl-foot-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
}

    .bspl-foot-btn.pdf {
        color: #c0392b;
    }

    .bspl-foot-btn.xls {
        color: #1e8449;
    }

    .bspl-foot-btn.doc {
        color: #2980b9;
    }

    .bspl-foot-btn.pdf2 {
        color: #c0392b;
    }


/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVE (≤ 767px)
   Applies to toggle, title, and filter button together
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .bspl-title-block h1 {
        font-size: 16px;
    }

    .bspl-subtitle {
        font-size: 11px;
    }

    .bspl-toggle-label,
    .gl-toggle-label {
        display: none;
    }

    .bspl-gains-toggle,
    .gl-gains-toggle {
        padding: 8px 10px;
    }

    .bspl-filter-label {
        display: none;
    }

    .bspl-filter-toggle {
        padding: 0;
        width: 32px;
        height: 32px;
        justify-content: center;
        gap: 0;
        border-radius: 6px;
        flex: 0 0 auto;
    }

        .bspl-filter-toggle i {
            font-size: 16px;
        }

    .bspl-footer,
    .gl-footer {
        padding: 0 10px;
    }

    .bspl-foot-btn {
        font-size: 17px;
    }
}


/* ══════════════════════════════════════════════════════
   HTML SKELETON — copy this structure into any new page,
   inside its own component markup (adjust bindings as needed)
   ══════════════════════════════════════════════════════

<div class="bspl-title-block">
    <div class="bspl-title-row">
        <div class="bspl-title-left">
            <button class="bspl-gains-toggle" onclick="gainsToggleSidebar()" aria-label="Toggle sidebar" title="Toggle menu">
                <i class="fa-solid fa-bars"></i><span class="bspl-toggle-label"> GAINS</span>
            </button>
            <div>
                <h1>@PageTitle</h1>
                <span class="bspl-subtitle">@SubtitleLabel</span>
            </div>
        </div>
        <div class="bspl-title-actions">
            <button class="bspl-filter-toggle @(SidebarOpen ? "has-filter" : "")" @onclick="ToggleSidebar">
                <i class="fa-solid fa-filter"></i><span class="bspl-filter-label"> FILTERS</span>
            </button>
        </div>
    </div>
</div>

... page content (make this flex:1; overflow-y:auto so only it scrolls) ...

<div class="bspl-footer">
    <div class="bspl-footer-left">
        <button class="bspl-foot-btn xls" title="Excel" @onclick="..."><i class="fa-solid fa-file-excel"></i></button>
        <button class="bspl-foot-btn pdf" title="PDF" @onclick="..."><i class="fa-solid fa-file-pdf"></i></button>
    </div>
    <div class="bspl-footer-right">
        <span>Last updated at ...</span>
    </div>
</div>

   NOTE: the parent page container needs:
     display: flex; flex-direction: column; height: 100%;
   so the header/footer stay pinned and only the middle content scrolls.
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   GlobalDatepicker (shared) — used via <GlobalDatepicker @bind-Value="..." />
   on QG, QLedger, and any other page needing the boxed calendar-icon +
   "d/MMM/yyyy" date field. Defined once here so every page matches;
   the component itself carries no scoped CSS.
   ═══════════════════════════════════════════════════════════════════ */
.gdp-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px;
    border: 1px solid #dde3ed;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #1a2537;
    user-select: none;
    box-sizing: border-box;
    transition: border-color 0.12s, box-shadow 0.12s;
}

    .gdp-wrap:hover {
        border-color: #1a56a7;
    }

.gdp-icon {
    color: #1a56a7;
    font-size: 14px;
    display: inline-flex;
}

.gdp-value {
    font-weight: 500;
}

.gdp-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: transparent;
}

.gdp-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1401;
    width: 240px;
    background: #fff;
    border: 1px solid #dde3ed;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
    padding: 10px;
    cursor: default;
}

.gdp-popup-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: #1a2537;
}

.gdp-nav {
    background: none;
    border: none;
    color: #64748b;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
}

    .gdp-nav:hover {
        background: #f1f5f9;
        color: #1a2537;
    }

    .gdp-nav:disabled {
        color: #d0d5dd;
        cursor: not-allowed;
        background: none;
    }

.gdp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 4px;
}

.gdp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.gdp-day {
    background: none;
    border: none;
    border-radius: 4px;
    padding: 6px 0;
    font-size: 12.5px;
    color: #1a2537;
    cursor: pointer;
    text-align: center;
}

    .gdp-day:hover {
        background: #f1f5f9;
    }

.gdp-day-muted {
    color: #cbd5e1;
}

.gdp-day-today {
    font-weight: 700;
    color: #1a56a7;
}

.gdp-day-selected,
.gdp-day-selected:hover {
    background: #1a56a7;
    color: #fff;
    font-weight: 600;
}

.gdp-day-disabled,
.gdp-day-disabled:hover {
    color: #d0d5dd;
    cursor: not-allowed;
    background: none;
}

.gdp-popup-foot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eef2f7;
    text-align: center;
}

.gdp-today-btn {
    background: none;
    border: none;
    color: #1a56a7;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
}

    .gdp-today-btn:hover {
        text-decoration: underline;
    }

.gdp-field-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    .gdp-field-row .gdp-field-block {
        flex: 1;
        min-width: 0;
    }

.gdp-field-block .gdp-wrap {
    width: 100%;
    box-sizing: border-box;
}

.gdp-valid-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

/* GlobalDatepicker (shared) — cross-field From/To validation state. */
.gdp-field-block {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.gdp-wrap.gdp-invalid {
    border-color: #c0392b;
}

.gdp-error-msg {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.3;
    color: #c0392b;
}

/* ================================================================
   GAINS Nav Loader (shared, global) — gn-nav-loader
   Plain HTML/CSS overlay (not a Blazor component) sitting in
   DashboardLayout.razor, toggled purely via JS (gainsShowNavLoader /
   gainsHideNavLoader in app.js) on sidebar-link click. Shows instantly
   the moment a nav link is clicked instead of waiting for the new
   page's own interactive circuit to boot before any loader can render.
   Visual style intentionally matches Loader.razor's gl-* look.
================================================================ */
.gn-nav-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

    .gn-nav-loader.gn-show {
        display: flex;
    }

    .gn-nav-loader .gn-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .gn-nav-loader .gn-spinner {
        position: relative;
        width: 96px;
        height: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gn-nav-loader .gn-ring {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 4px solid transparent;
        border-top-color: #2ec27e;
        border-right-color: #1ab99a;
        border-bottom-color: #2176c7;
        animation: gn-spin 0.9s linear infinite;
    }

    .gn-nav-loader .gn-logo {
        width: 56px;
        height: 56px;
        object-fit: contain;
        background: transparent;
        animation: gn-pulse 1.6s ease-in-out infinite;
    }

@keyframes gn-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes gn-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.92);
        opacity: 0.8;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gn-nav-loader .gn-ring {
        animation-duration: 2s;
    }

    .gn-nav-loader .gn-logo {
        animation: none;
    }
}

/* =====================================================================
   GainsDashboard — Sales tab DataTables re-skin.
   DataTables + its Buttons/JSZip/pdfmake extensions are loaded scoped to
   just Components/Pages/Dashboard/GainsDashboard.razor (via its own
   <HeadContent>), but the two Sales-tab <table> grids they enhance are
   built and injected via plain JS innerHTML (GainsDashboard.js's
   gainsRenderSalesSummaryGrid/gainsRenderSalesMonthlyGrid) rather than
   Razor markup — so Blazor's CSS Isolation scope attribute never reaches
   that content, and these rules have to live here globally instead of in
   GainsDashboard.razor.css. Only .gd-sales-card-body itself (the literal,
   Blazor-rendered container div) is styled from the scoped file; every
   class below is one DataTables itself generates. Matches the same light
   .mu-table look used by every other grid in this app (dark header band,
   white zebra-striped body) rather than a one-off dark theme.
   ===================================================================== */
.gd-sales-card-body .dataTables_wrapper {
    color: #1a2537;
    font-size: 12px;
    width: 100%;
}

/* Row look matches the Balance Sheet page (.bspl-row: 30px rows, 5px 10px
   padding, 1px #e7eaec bottom border) plus zebra stripes + hover. Targets
   .gd-sales-table (the class on the JS-built <table>) so it applies even when
   DataTables itself failed to load and the plain table is left as-is. */
.gd-sales-card-body table.gd-sales-table {
    background: #fff;
    color: #1a2537;
    border-collapse: collapse;
    width: 100% !important;
}

    .gd-sales-card-body table.gd-sales-table thead th {
        background: #4b5563;
        color: #fff;
        font-size: 12px;
        font-weight: 650;
        text-align: left;
        padding: 5px 10px;
        height: 30px;
        box-sizing: border-box;
        border-bottom: 1px solid #e7eaec;
    }

    .gd-sales-card-body table.gd-sales-table tbody td {
        border-bottom: 1px solid #e7eaec;
        padding: 5px 10px;
        height: 30px;
        box-sizing: border-box;
        font-size: 13px;
        color: #1a2537;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        transition: background .07s;
    }

    .gd-sales-card-body table.gd-sales-table tbody tr:nth-child(even) td {
        background: #f7f9fc;
    }

    .gd-sales-card-body table.gd-sales-table tbody tr:hover td {
        background: #e6f4f0;
    }

    .gd-sales-card-body table.gd-sales-table tfoot th {
        background: #f3fcf9;
        color: #0f766e;
        font-size: 13px;
        padding: 5px 10px;
        height: 30px;
        box-sizing: border-box;
        border-top: 2px solid #cdeee4;
        border-bottom: 1px solid #e7eaec;
        text-align: left;
    }

/* Scroll box for the Sales grids: fills the card; only the body scrolls
   vertically (header/footer sticky), all of it scrolls horizontally. */
.gd-sales-card-body-flush > div {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.gd-grid-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}
/* Full-width Monthly Detail card has no fixed height: cap the scroll box. */
.gd-sales-card-full .gd-grid-scroll { max-height: 440px; }
.gd-sales-card-body table.gd-sales-table {
    border-collapse: separate;
    border-spacing: 0;
}
.gd-sales-card-body table.gd-sales-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.gd-sales-card-body table.gd-sales-table tfoot th {
    position: sticky;
    bottom: 0;
    z-index: 2;
}
.gd-sales-card-body table.gd-sales-table tbody tr.gd-fill-row td {
    padding: 0;
    border: none;
    background: #fff;
}

/* Numeric columns (everything after the Item Name column) right-aligned,
   headers and footer totals included. */
.gd-sales-card-body table.gd-sales-table thead th:not(:first-child),
.gd-sales-card-body table.gd-sales-table tbody td:not(:first-child),
.gd-sales-card-body table.gd-sales-table tfoot th:not(:first-child) {
    text-align: right;
}

/* Table cards: no body padding so the table touches the card edges on all
   four sides (also set in the page's scoped CSS; repeated here so it doesn't
   depend on the scoped-CSS bundle being rebuilt). */
.gd-sales-card-body.gd-sales-card-body-flush { padding: 0 !important; }
.gd-sales-card-body-flush .dataTables_wrapper,
.gd-sales-card-body-flush .dataTables_scroll,
.gd-sales-card-body-flush .dataTables_scrollHead,
.gd-sales-card-body-flush .dataTables_scrollBody { margin: 0; padding: 0; }

/* Flush (edge-to-edge) table cards: keep the DataTables toolbar/footer
   controls off the card edge while the table itself stays full width. */
.gd-sales-card-body-flush .dataTables_filter,
.gd-sales-card-body-flush .dt-buttons,
.gd-sales-card-body-flush .dataTables_info,
.gd-sales-card-body-flush .dataTables_paginate {
    padding: 6px 12px;
}

/* Search box / length dropdown — same chrome as the Dashboard tab's own
   .gd-select (white pill, teal focus ring) rather than a bespoke dark input,
   so every clickable/editable control on this page looks consistent
   regardless of which tab it's on. */
.gd-sales-card-body .dataTables_filter input,
.gd-sales-card-body .dataTables_length select {
    background: #fff;
    border: 1px solid #dde3ed;
    color: #1a2537;
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 12px;
    font-family: inherit;
}

    .gd-sales-card-body .dataTables_filter input:focus,
    .gd-sales-card-body .dataTables_length select:focus {
        border-color: #1ab99a;
        outline: none;
    }

.gd-sales-card-body .dataTables_filter label,
.gd-sales-card-body .dataTables_length label,
.gd-sales-card-body .dataTables_info {
    color: #94a3b8;
    font-size: 11px;
}

/* Pagination — same pill treatment as the Dashboard tab's .gd-period-btn
   (white/teal-bordered, solid teal when active). */
.gd-sales-card-body .dataTables_paginate .paginate_button {
    min-width: 26px;
    height: 22px;
    line-height: 22px;
    padding: 0 7px !important;
    border-radius: 5px !important;
    border: 1px solid #cdeee4 !important;
    background: #fff !important;
    color: #0f766e !important;
    font-size: 11px;
    font-weight: 700;
}

    .gd-sales-card-body .dataTables_paginate .paginate_button.current {
        background: #1ab99a !important;
        border-color: #1ab99a !important;
        color: #fff !important;
    }

    .gd-sales-card-body .dataTables_paginate .paginate_button:hover:not(.current) {
        background: #eafaf4 !important;
        color: #0f766e !important;
    }

    .gd-sales-card-body .dataTables_paginate .paginate_button.disabled {
        opacity: 0.4;
        background: #fff !important;
        color: #0f766e !important;
    }

/* Export toolbar (Copy/CSV/Excel/PDF/Print) — same solid-teal action-button
   chrome as the Dashboard tab's .gd-display-btn. */
.gd-sales-card-body .dt-buttons {
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gd-sales-card-body .dt-button {
    background: #1ab99a !important;
    border: none !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: inherit;
    padding: 6px 16px !important;
    transition: background 0.12s;
}

    .gd-sales-card-body .dt-button:hover {
        background: #159a80 !important;
    }


/*voucher view open rect*/
.mu-vnum-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    margin-right: 6px;
    vertical-align: middle;
    padding: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
/* =====================================================================
   "fp-" system — filter-drawer sections (teal header bar + grouped body)
   Used by Daybook FiltersActionPanel; reusable on any filter drawer.
   ===================================================================== */
.fp-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fp-section-hdr {
    padding: 9px 12px;
    background: #1ab99a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 4px;
}

.fp-section-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 2px;
}
/* ── Filter drawer: voucher-type checkbox grid ── */
.fp-vtype-toolbar {
    display: flex;
    align-items: center;
    gap: 18px;
}

.fp-vtype-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 8px;
}

    .fp-vtype-toolbar .le-chk,
    .fp-vtype-grid .fp-vtype-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        cursor: pointer;
        white-space: nowrap;
    }

    .fp-vtype-grid .fp-vtype-item {
        font-weight: 600;
    }

        /* Beats .mu-fld input { width:100%; padding } for these checkboxes only */
        .fp-vtype-toolbar .le-chk input,
        .fp-vtype-grid .fp-vtype-item input {
            width: 15px;
            height: 15px;
            flex: 0 0 15px;
            margin: 0;
            padding: 0;
            accent-color: #1ab99a;
            cursor: pointer;
        }
/* =====================================================================
   GAINS master standard (opt-in) — one shared copy of the look the master
   forms were matched to one by one (Ledger Name box / MLedgerEdit .le-row +
   .le-inp, Login Master Save, Reset Password popup, 67.5px title bar).
   Forms opt in with these classes instead of repeating the rules in their
   own .razor.css:
     ms-page   on .mu-page              page fill, card spacing, green pager
     ms-title  on .bspl-title-block     title font + bar height (= sidebar)
     ms-pop    on a popup's backdrop    popup shell (uf-modal / mu-confirm)
     ms-form   on a form / popup        Ledger rows + boxes (max 320px)
     ms-box    on a container           Ledger box look only (own widths)
   ===================================================================== */

/* ── ms-page ── */
.mu-page.ms-page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .ms-page .mu-card {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        margin: 12px 16px 8px;
    }

    .ms-page .mu-table-wrap {
        flex: 1;
        overflow: auto;
        min-height: 0;
    }

    .ms-page .mu-toolbar,
    .ms-page .mu-foot {
        flex-shrink: 0;
    }

    .ms-page .bspl-footer .mu-pagenum.active,
    .ms-page .bspl-footer .mu-pagenum.active:hover {
        background: #16a085;
        border-color: #16a085;
        box-shadow: 0 1px 3px rgba(22,160,133,.35);
    }

    .ms-page .bspl-footer .mu-nav:hover:not(:disabled),
    .ms-page .bspl-footer .mu-pagenum:hover {
        background: #e8f5f0;
        border-color: #16a085;
        color: #16a085;
    }

/* ── ms-title — height = the sidebar's white GAINS strip in DashboardLayout
   (1px pad + 14px margin + 37.5px button + 14px margin + 1px pad = 67.5px),
   so the bar's bottom edge lines up with the dark sidebar. ── */
.bspl-title-block.ms-title {
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    min-height: 67.5px; /* grows instead of clipping if the row wraps */
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

    .ms-title .bspl-title-row {
        flex: 1;
        min-width: 0;
    }

    /* Title + subtitle in Segoe UI (thin Light face, same as BSPL); the rest
       of the bar stays Arial. */
    .ms-title h1,
    .ms-title .bspl-subtitle {
        font-family: 'Segoe UI', Arial, sans-serif;
    }

    .ms-title h1 {
        font-size: 20px;
        font-weight: 100 !important;
        color: #1ab99a;
        margin: 0;
    }

@media (max-width: 767px) {
    .bspl-title-block.ms-title {
        height: auto;
        min-height: 67.5px;
        padding-top: 14px;
        padding-bottom: 8px;
    }
}

/* ── ms-pop — same shell as the login page's Reset Password popup ── */
.ms-pop {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    align-items: center;
}

    .ms-pop .uf-modal,
    .ms-pop .mu-confirm {
        border: none;
        border-radius: 18px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }

    .ms-pop .uf-body,
    .ms-pop .mu-confirm {
        padding: 22px 24px;
    }

    .ms-pop .uf-footer {
        padding: 16px 24px;
        border-top: 1px solid #f1f5f9;
        background: #f8fafd;
    }

/* ── ms-form — rows exactly as Ledger's .le-row (140px label, 12px gap) ── */
.ms-form .uf-field {
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

    .ms-form .uf-field:last-of-type {
        margin-bottom: 0;
    }

    .ms-form .uf-field > label {
        font-size: 13px;
        color: #334155;
        font-weight: 400;
        padding-top: 0;
    }

/* ── ms-form / ms-box — boxes exactly as the Ledger Name textbox (.le-inp):
   6px 8px padding, 1px #cbd5e1 border, 5px radius, 13px text, line-height
   1.5 (~34px tall, no fixed height). ── */
.ms-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.gdp-input),
.ms-form select,
.ms-form textarea,
.ms-form .gdp-wrap,
.ms-box input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.gdp-input),
.ms-box select,
.ms-box textarea,
.ms-box .gdp-wrap {
    box-sizing: border-box;
    height: auto;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    color: #1a2537;
    background-color: #fff;
}

.ms-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.gdp-input),
.ms-form select,
.ms-form textarea,
.ms-form .gdp-wrap {
    width: 100%;
    max-width: 320px;
}

.ms-form select,
.ms-box select {
    padding-right: 28px;
}

.ms-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.gdp-input):focus,
.ms-form select:focus,
.ms-form textarea:focus,
.ms-box input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.gdp-input):focus,
.ms-box select:focus,
.ms-box textarea:focus {
    outline: none;
    border-color: #1a56a7;
    box-shadow: 0 0 0 3px rgba(26,86,167,0.12);
}

.ms-form input[type="number"]::-webkit-outer-spin-button,
.ms-form input[type="number"]::-webkit-inner-spin-button,
.ms-box input[type="number"]::-webkit-outer-spin-button,
.ms-box input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ms-form input[type="number"],
.ms-box input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

@media (max-width: 540px) {
    .ms-form .uf-field {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .ms-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.gdp-input),
    .ms-form select,
    .ms-form textarea,
    .ms-form .gdp-wrap {
        max-width: 100%;
    }
}

/* ms-form / ms-box — read-only and disabled boxes grey, as Ledger's
   .le-inp:disabled (same selector weight as the box rule above so it wins). */
.ms-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.gdp-input)[readonly],
.ms-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.gdp-input):disabled,
.ms-form select:disabled,
.ms-form textarea[readonly],
.ms-form textarea:disabled,
.ms-box input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.gdp-input)[readonly],
.ms-box input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.gdp-input):disabled,
.ms-box select:disabled,
.ms-box textarea[readonly],
.ms-box textarea:disabled {
    background-color: #f1f5f9;
    color: #64748b;
}
/* ── GlobalDatepicker: clickable title + month/year grids ──────────────
   APPEND to masters-forms.css, right after the existing "GlobalDatepicker (shared)" block. */
.gdp-title-btn {
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 600;
    color: inherit;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
}

    .gdp-title-btn:hover {
        background: rgba(26, 185, 154, .12);
        color: #11806b;
    }

    .gdp-title-btn:focus-visible {
        outline: 2px solid #1AB99A;
        outline-offset: 1px;
    }

.gdp-grid12 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 6px 2px;
}

    .gdp-grid12 .gdp-day.gdp-cell {
        width: auto;
        height: 38px;
        border-radius: 8px;
        font-size: 13px;
    }

/* ── pg-gap10 — opt-in page spacing: 10px between title bar / card / footer and
   10px on both sides of the card. Add to a page's root ".mu-page" element. ── */
/* Single source for the page gap — change --pg-gap here and every form using
   class "pg-gap10" (title bar / card / footer spacing) follows. */
.mu-page.pg-gap10 {
    --pg-gap: 10px;
    gap: var(--pg-gap);
}

    .mu-page.pg-gap10 > .mu-card {
        margin: 0 var(--pg-gap);
    }