/* ------------------------------------------------------------------
   FinDistro — UI polish layer (loaded AFTER Inspinia app.min.css).
   Keep overrides scoped and minimal so theme updates stay easy.
   ------------------------------------------------------------------ */

/* --- Scrollable modals whose header/body/footer are wrapped in a <form> ---
   Bootstrap's .modal-dialog-scrollable relies on .modal-content being a flex
   column whose DIRECT children are .modal-header/.modal-body/.modal-footer:
   header & footer get flex-shrink:0 (stay natural size), .modal-body gets
   flex:1 1 auto + overflow-y:auto and absorbs the shrinkage once total
   content exceeds .modal-content's max-height (that's what actually makes
   it scroll — the container clamps to max-height, and only .modal-body's
   overflow:auto lets it shrink below its content size to fit).
   When a <form> sits between .modal-content and modal-header/body/footer
   (needed so the Save button submits the whole modal), that <form> becomes
   the ONLY flex item instead of them. A bare <form> has no overflow/flex
   styling, so its automatic minimum size is its full content height — it
   never shrinks, grows past .modal-content's max-height, and everything
   past that point (the modal-footer, i.e. Cancel/Save) is silently clipped
   by .modal-content's overflow:hidden, with no scrollbar to reach it.
   Fix: make the <form> itself a flex column that can shrink (overflow:
   hidden + min-height:0 unlocks the same "shrinkable below content"
   behaviour .modal-body relies on), so header/body/footer — now the form's
   own flex children — lay out and scroll exactly as if the form weren't
   there. Scoped to modal-content's direct-child <form> only, so normal
   (formless) scrollable modals are untouched. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* --- Sidebar: tighter, cleaner menu density --- */
.sidenav-menu .side-nav .side-nav-link {
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.35;
    border-radius: 6px;
    transition: background-color .15s ease, color .15s ease;
}
.sidenav-menu .side-nav .menu-text {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidenav-menu .side-nav .menu-icon {
    font-size: 17px;
    min-width: 24px;
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidenav-menu .side-nav .menu-icon i { font-size: 17px; }
.sidenav-menu .side-nav .menu-arrow { font-size: 14px; }

/* Section headings: less gap, refined */
.sidenav-menu .side-nav .side-nav-title {
    font-size: 10px;
    padding: 4px 12px 2px;
    margin-top: 6px;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .55;
}

/* Item rhythm + submenu indent */
.sidenav-menu .side-nav .side-nav-item { margin: 1px 6px; }
.sidenav-menu .side-nav .sub-menu .side-nav-link {
    padding: 5px 12px 5px 40px;
    font-size: 12.5px;
}

/* Sidebar user block */
.sidenav-menu .sidenav-user { padding-top: 10px; padding-bottom: 10px; }
.sidenav-menu .sidenav-user-name { font-size: 13px; }

/* --- Cards: subtle, smooth --- */
.card { border-radius: 10px; }
.card .card-title { font-size: 15px; }
.page-title-box h4 { font-size: 17px; }

/* Smooth focus/hover on interactive controls */
.btn, .side-nav-link, .dropdown-item { transition: all .15s ease; }

/* --- Page title (no breadcrumb, full-width layout) --- */
.page-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #1d2939;
}
.breadcrumb-item + .breadcrumb-item { padding-left: .5rem; }
.breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";           /* › */
    padding-right: .5rem;
    color: var(--bs-tertiary-color, #adb5bd);
    font-weight: 600;
}
.breadcrumb-item a {
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.breadcrumb-item a:hover { color: var(--bs-primary, #1ab394); }
.breadcrumb-item.active { color: var(--bs-emphasis-color, #212529); font-weight: 600; }
.breadcrumb-item .ti-home-2 { font-size: 15px; }

/* --- Card depth / premium surfaces --- */
.card {
    border: 1px solid var(--theme-border-color, rgba(16, 24, 40, .08));
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--theme-border-color, rgba(16, 24, 40, .06));
    padding-top: .85rem;
    padding-bottom: .85rem;
}
.card .card-title { font-weight: 600; }

/* KPI stat cards: crisper icon + number rhythm */
.avatar-title { font-weight: 600; }

/* Full-width content layout (no max-width constraint) */

/* Tables: lighter header, comfortable rows */
.table-custom > thead th { font-weight: 600; letter-spacing: .03em; }

/* Nav tabs (detail pages) underline style refinement */
.nav-tabs.nav-bordered .nav-link.active { font-weight: 600; }

/* ==================================================================
   STAT TILES — KPI cards with colored icon + bottom accent
   ================================================================== */
.stat-tile {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--theme-border-color, #e7e9eb);
    border-radius: 10px;
    background: #fff;
    height: 100%;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .15s ease, transform .15s ease;
}
.stat-tile:hover { box-shadow: 0 6px 16px rgba(16, 24, 40, .08); transform: translateY(-1px); }
.stat-tile .stat-body { padding: 1rem 1.1rem 1.15rem; }
.stat-tile .stat-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a92a6; }
/* Kept deliberately modest: money tiles carry large figures (daily 30 cr+ volumes),
   so an oversized number would overflow a narrow tile. Reduced from 27px. */
.stat-tile .stat-value { font-size: 20px; font-weight: 700; color: #1d2939; line-height: 1.2; }
/* Neutralise the per-view fs-3 override (Bootstrap ~1.75rem) inside stat tiles so
   those tiles match — wallets, transactions, commission all used fs-3. */
.stat-tile .stat-value.fs-3 { font-size: 20px !important; }
.stat-tile .stat-icon {
    width: 46px; height: 46px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px; flex-shrink: 0;
}
.stat-tile .stat-foot { font-size: 12px; color: #98a2b3; margin-top: .5rem; display: flex; align-items: center; }
.stat-tile .stat-foot .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.stat-tile .stat-accent { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; }
.tile-teal   .stat-icon, .tile-teal   .stat-accent { background: #1ab394; } .tile-teal   .dot { background: #1ab394; }
.tile-blue   .stat-icon, .tile-blue   .stat-accent { background: #3a86ff; } .tile-blue   .dot { background: #3a86ff; }
.tile-cyan   .stat-icon, .tile-cyan   .stat-accent { background: #17c1d6; } .tile-cyan   .dot { background: #17c1d6; }
.tile-orange .stat-icon, .tile-orange .stat-accent { background: #f5a623; } .tile-orange .dot { background: #f5a623; }
.tile-red    .stat-icon, .tile-red    .stat-accent { background: #ef5350; } .tile-red    .dot { background: #ef5350; }
.tile-dark   .stat-icon, .tile-dark   .stat-accent { background: #3a4656; } .tile-dark   .dot { background: #3a4656; }
.tile-purple .stat-icon, .tile-purple .stat-accent { background: #7c5cff; } .tile-purple .dot { background: #7c5cff; }

/* Soft-icon tile variant — opt-in via .tile-soft (additive: no existing
   .stat-tile markup references this class, so every page currently using
   plain .stat-tile is completely unaffected). Swaps the solid-fill icon
   square for a light-tinted circle + colored icon, a lighter, more modern
   treatment for pages that choose it. */
.tile-soft .stat-icon { border-radius: 50%; }
.tile-soft.tile-teal   .stat-icon { background: #e3f8f3; color: #0f9c7c; }
.tile-soft.tile-blue   .stat-icon { background: #e8f0fe; color: #2f6bd6; }
.tile-soft.tile-cyan   .stat-icon { background: #e1f7fa; color: #128a9b; }
.tile-soft.tile-orange .stat-icon { background: #fdf1e3; color: #d5820a; }
.tile-soft.tile-red    .stat-icon { background: #fdeaea; color: #d64545; }
.tile-soft.tile-dark   .stat-icon { background: #eef0f3; color: #3a4656; }
.tile-soft.tile-purple .stat-icon { background: #efeaff; color: #6b4ee0; }

/* ==================================================================
   FILTER PANEL
   ================================================================== */
.filter-card .card-header { font-weight: 600; }
.filter-card .form-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #667085; margin-bottom: .25rem; }
.filter-actions .btn { min-width: 96px; }

/* ==================================================================
   DATA TABLE — dark header + tidy body (matches enterprise look)
   ================================================================== */
.table.table-dark-head > thead > tr > th {
    background: #26344a;
    color: #dfe5ee;
    border-color: #2f3e57;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .03em;
    text-transform: uppercase;
    vertical-align: middle;
    padding-top: .7rem; padding-bottom: .7rem;
}
.table.table-dark-head > thead > tr > th.dt-orderable-asc,
.table.table-dark-head > thead > tr > th.dt-orderable-desc { cursor: pointer; }
.table.table-dark-head > thead > tr > th .dt-column-title { color: #dfe5ee; }
.table.table-dark-head > tbody > tr > td { vertical-align: middle; }
.table.table-dark-head > tbody > tr:hover > td { background: #f7f9fc; }

/* Action buttons inside tables */
.table .btn-action { padding: .2rem .55rem; font-size: 12px; font-weight: 600; line-height: 1.4; }

/* ==================================================================
   TABLE-NEO — refined modern data table (All-Users directory etc.)
   ================================================================== */
/* Works WITH Bootstrap's .table (collapse borders) — no border-collapse override. */
.table.table-neo { --bs-table-bg: #ffffff; margin: 0; }
.table.table-neo > thead > tr > th {
    background: #eef1f6;
    color: #5b6472;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    /* All-caps labels have no descenders, so the browser's default ~1.5
       line-height (inherited body line-height applied to a 10.5px label)
       reserves descender space the text never uses — the visible glyphs
       end up sitting noticeably above true center of the cell even though
       the box itself is centered. Tightening line-height removes most of
       that unused space so the label reads as centered, not top-heavy. */
    line-height: 1.15;
    padding: .72rem 1rem;
    border-top: 0;
    border-bottom: 2px solid #e8ecf3;
    white-space: nowrap;
    vertical-align: middle;
}
/* The label text still reads as sitting in roughly the top third of the
   cell after the line-height fix above — an asymmetric-padding attempt at
   this (tried and reverted) undershot badly, confirming the residual bias
   is a glyph-ink/font-metrics effect, not something the box model alone
   explains. Correcting with a direct pixel shift on the content instead of
   more padding-ratio guessing, since it's a single, easy-to-retune number
   rather than a padding/line-height interaction. Applies to
   .dt-column-header specifically (the div DataTables JS wraps ALL header
   content in, sortable or not, once a table initializes) so it only moves
   the label, never the cell's own border/background. Owner-reported via
   zoomed screenshots as "70% toward the top" after a smaller attempt (a
   ~1.6px effective shift) barely moved it — this is a deliberately bigger
   correction; still a visual estimate, not a measured value, so treat as
   provisional until confirmed. */
.table.table-neo > thead > tr > th .dt-column-header { transform: translateY(7px); }
.table.table-neo > tbody > tr > td {
    padding: .8rem 1rem;
    border-top: 0;
    border-bottom: 1px solid #f0f2f6;
    vertical-align: middle;
    font-size: 13px;
    color: #3f4a5a;
}
.table.table-neo > tbody > tr:last-child > td { border-bottom: 0; }
.table.table-neo > tbody > tr:hover > td { background: #f7faff; }
.table-neo .u-name { font-weight: 600; color: #1f2a3d; text-decoration: none; }
.table-neo .u-name:hover { text-decoration: underline; }
.table-neo .u-sub { font-size: 11px; color: #98a2b3; display: block; margin-top: 1px; }
.table-neo .u-mobile { font-weight: 700; color: #1f2a3d; letter-spacing: .01em; }
.table-neo .u-amt { font-variant-numeric: tabular-nums; font-weight: 600; color: #1f2a3d; }
.table-neo .u-amt.muted { color: #c0c6d0; font-weight: 400; }
/* Caps a long primary-cell value (a raw reference id, a long name, a UPI-style
   customer id) to a fixed width with an ellipsis, instead of table-nowrap
   forcing the whole column — and the table with it — to the content's full
   length. Opt-in per cell (not folded into .u-name, which 38 other admin
   tables share and mostly don't need this); full value stays in `title` for
   a hover tooltip and in the link href / underlying data either way, so
   nothing is actually hidden, only the at-a-glance row height/width is. */
.table-neo .cell-trunc { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* Narrower id-column variant — opt-in per cell like .cell-trunc itself, so it
   only shrinks the columns that ask for it (Transactions' own reference id,
   which doesn't need .u-name's bold/dark treatment — it's an internal
   handle, not the row's headline value). */
.table-neo .cell-trunc-sm { max-width: 110px; }
.table-neo .id-link { font-size: 11px; font-weight: 500; color: #667085; text-decoration: none; }
.table-neo .id-link:hover { color: #1f2a3d; text-decoration: underline; }

/* /vas/providers — redesigned 2-Oct-2026 (owner: "please redesign this page, looks worst").
   The page had status and settings mixed on one narrow card, the same long vendor sentence in every row, and six columns of wrapped
   text. It is now: KPI tiles, then two tabs (Plan cache = monitoring, Vendors = settings), dense one-line rows with a health dot, and
   one sticky Save bar. Everything reads the ERP colour tokens (--erp-*), so light and dark follow the theme. Dots and chips never
   carry meaning by colour alone: each has a text alternative in the markup. */
.vas-providers-body { --vas-line: var(--erp-border, #e7e9eb); --vas-soft: var(--erp-subtle, #f6f7fb); --vas-mute: var(--erp-muted, #5e6879); }
.vas-providers-body .vas-tabs { border-bottom: 1px solid var(--vas-line); margin: 4px 0 14px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.vas-providers-body .vas-tabs .nav-link { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--vas-mute); white-space: nowrap; }
.vas-providers-body .vas-tabs .nav-link.active { color: var(--erp-purple, #6345b1); border-bottom-color: var(--erp-purple, #6345b1); }
/* The tab list clips its own overflow, so the focus ring is drawn INSIDE the tab. */
.vas-providers-body .vas-tabs .nav-link:focus-visible { outline: 2px solid var(--erp-accent, #5e6cc1); outline-offset: -3px; border-radius: 4px; }
.vas-providers-body .vas-banner { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; margin-bottom: 12px; font-size: 12px; line-height: 1.5; }
.vas-providers-body .vas-banner > i { font-size: 16px; line-height: 1.3; flex-shrink: 0; }
.vas-providers-body .vas-banner code { font-size: 11px; }
.vas-providers-body .vas-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.vas-providers-body .vas-how { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--vas-mute); }
.vas-providers-body .vas-how > summary { display: inline-flex; align-items: center; cursor: pointer; user-select: none; padding: 4px 0; color: var(--erp-blue, #2455a4); }
.vas-providers-body .vas-how p { margin: 6px 0 0; max-width: 78ch; line-height: 1.55; }
.vas-providers-body .vas-scroll { border: 1px solid var(--vas-line); border-radius: 8px; overflow-y: hidden; }
.vas-providers-body .vas-table { margin-bottom: 0; }
.vas-providers-body .vas-table thead th { background: var(--vas-soft); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--vas-mute); border-bottom: 1px solid var(--vas-line); padding: 8px 12px; white-space: nowrap; }
.vas-providers-body .vas-table tbody td { padding: 9px 12px; vertical-align: middle; border-bottom: 1px solid var(--vas-line); }
.vas-providers-body .vas-table tbody tr:last-child td { border-bottom: 0; }
.vas-providers-body .vas-cache tbody tr:not(.vas-group-row):hover td { background: color-mix(in srgb, var(--erp-accent, #5e6cc1) 4%, var(--erp-surface, #fff)); }
.vas-providers-body .vas-group-row td { background: var(--vas-soft); padding: 5px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--vas-mute); }
.vas-providers-body .vas-c-dot { width: 28px; padding-right: 0; text-align: center; }
.vas-providers-body .vas-cache td:nth-child(2) { font-weight: 600; white-space: nowrap; }
.vas-providers-body .vas-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; background: var(--vas-mute); }
.vas-providers-body .vas-dot-ok { background: var(--erp-positive, #08754f); }
.vas-providers-body .vas-dot-warn { background: #b87400; }   /* 3.8:1 on white (the old #d99a1c was 2.4:1) */
[data-bs-theme="dark"] .vas-providers-body .vas-dot-warn { background: var(--erp-caution, #f5cc85); }
.vas-providers-body .vas-dot-bad { background: var(--erp-negative, #ae2d2d); }
.vas-providers-body .vas-dot-none { background: transparent; box-shadow: inset 0 0 0 2px var(--vas-mute); }
.vas-providers-body .vas-chip { display: inline-block; padding: 2px 9px; border: 1px solid var(--vas-line); border-radius: 6px; background: var(--vas-soft); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.vas-providers-body .vas-sub { display: block; margin-top: 2px; font-size: 11px; line-height: 1.45; color: var(--vas-mute); }
.vas-providers-body .vas-sub-inline { font-size: 11px; color: var(--vas-mute); margin-left: 4px; }
.vas-providers-body .vas-line { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vas-providers-body .vas-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vas-providers-body .vas-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 340px; }
.vas-providers-body .vas-info { margin-left: 2px; font-size: 13px; vertical-align: -1px; color: var(--erp-blue, #2455a4); cursor: help; }
.vas-providers-body .vas-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 11px; color: var(--vas-mute); }
.vas-providers-body .vas-legend .vas-dot { margin-right: 4px; }

/* Vendors tab */
.vas-providers-body .vas-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12px; color: var(--vas-mute); }
.vas-providers-body .vas-chain-step { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--vas-line); border-radius: 999px; background: var(--vas-soft); color: var(--erp-text, #344054); font-weight: 600; }
.vas-providers-body .vas-chain-step b { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: var(--erp-purple, #6345b1); color: var(--erp-surface, #fff); font-size: 10px; }
.vas-providers-body .vas-chain-note { flex: 1 1 260px; }
.vas-providers-body .vas-panel { border: 1px solid var(--vas-line); border-radius: 8px; background: var(--erp-surface, #fff); margin-bottom: 14px; overflow: hidden; }
.vas-providers-body .vas-panel-head { padding: 11px 14px 9px; border-bottom: 1px solid var(--vas-line); background: var(--vas-soft); }
.vas-providers-body .vas-panel-head h6 { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--erp-text, #344054); }
.vas-providers-body .vas-panel-head p, .vas-providers-body .vas-panel-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--vas-mute); max-width: 96ch; }
.vas-providers-body .vas-panel-body { padding: 14px; }
.vas-providers-body .vas-panel .vas-scroll { border: 0; border-radius: 0; }
.vas-providers-body .vas-defaults { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.vas-providers-body .vas-defaults .form-label { margin-bottom: 4px; font-size: 12px; font-weight: 600; }
.vas-providers-body .vas-matrix tbody td:first-child { font-weight: 600; white-space: nowrap; position: sticky; left: 0; z-index: 1; background: var(--erp-surface, #fff); }
.vas-providers-body .vas-matrix .vas-group-row td:first-child { background: var(--vas-soft); }
.vas-providers-body .vas-matrix thead th:first-child { position: sticky; left: 0; z-index: 2; }
/* Higher specificity than the shell's ".erp-admin .table-responsive .form-select { min-width: 90px }", which would otherwise win and clip "(default: PlanAPI.in)". */
.vas-providers-body .vas-scroll .vas-matrix select.vas-sel { min-width: 170px; }
.vas-providers-body .vas-sel.is-set { border-color: var(--erp-purple, #6345b1); background-color: color-mix(in srgb, var(--erp-purple, #6345b1) 8%, var(--erp-surface, #fff)); font-weight: 600; }
.vas-providers-body .vas-sel.is-bad { border-color: var(--erp-negative, #ae2d2d); box-shadow: 0 0 0 1px var(--erp-negative, #ae2d2d); }
.vas-providers-body .vas-sel.is-bad:focus { border-color: var(--erp-negative, #ae2d2d); }
.vas-providers-body .vas-cannot { color: var(--erp-negative, #ae2d2d); font-weight: 600; white-space: nowrap; }
.vas-providers-body .vas-cannot i { font-size: 12px; vertical-align: -1px; }
/* The sticky Save bar and the sticky first column must never hide the box that has keyboard focus. */
.vas-providers-body .vas-sel, .vas-providers-body .btn, .vas-providers-body summary { scroll-margin-bottom: 88px; }
.vas-providers-body .vas-scroll { scroll-padding-inline-start: 150px; }
.vas-providers-body .vas-sel.is-changed { outline: 2px dashed var(--erp-caution, #8b5200); outline-offset: 1px; }
.vas-providers-body .vas-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; margin: 2px 0 14px; border: 1px solid var(--vas-line); border-radius: 8px; background: var(--erp-surface, #fff); box-shadow: 0 -6px 14px rgb(16 24 40 / 7%); }
.vas-providers-body .vas-savebar.is-dirty { border-color: var(--erp-caution, #8b5200); }
.vas-providers-body .vas-savebar-msg { font-size: 12px; font-weight: 600; color: var(--vas-mute); }
.vas-providers-body .vas-savebar.is-dirty .vas-savebar-msg { color: var(--erp-caution, #8b5200); }
.vas-providers-body .vas-savebar-actions { display: inline-flex; gap: 8px; }
.vas-providers-body .vas-panel-details > summary { cursor: pointer; user-select: none; padding: 11px 14px; font-size: 13px; font-weight: 700; color: var(--erp-text, #344054); }
.vas-providers-body .vas-panel-details > summary:hover { color: var(--erp-blue, #2455a4); }
.vas-providers-body .vas-panel-details[open] > summary { border-bottom: 1px solid var(--vas-line); background: var(--vas-soft); }
.vas-providers-body .vas-panel-details > .vas-panel-note { padding: 10px 14px 4px; }
.vas-providers-body .vas-panel-details > .vas-vendor-list { margin: 10px 14px 4px 30px; padding: 0; font-size: 12px; line-height: 1.6; }
.vas-providers-body .vas-panel-details > .vas-panel-note:last-child { padding-bottom: 12px; }
@media (max-width: 767.98px) {
    .vas-providers-body .vas-toolbar { flex-direction: column-reverse; align-items: stretch; }
    .vas-providers-body .vas-toolbar form .btn { width: 100%; }
    .vas-providers-body .vas-savebar { justify-content: center; }
}
@media print {
    .vas-providers-body .vas-savebar { position: static; box-shadow: none; }
}

/* Charge/Cashback stacks up to 3 lines (charge, commission, TDS) in one cell —
   tightened line-height + a capped width keeps that from reading as a
   disproportionately tall/wide column next to single-line neighbors. */
.table-neo .charge-stack { display: inline-block; max-width: 100px; line-height: 1.35; }
.table-neo .charge-stack > span { font-size: 11px; }

/* Distributor Earnings — money columns get tabular figures so ₹ amounts line
   up in a column instead of each row's digits drifting left/right, and the
   tfoot Total row gets a tinted background so the grand-total line reads as
   the answer to the page, not just one more row (owner: "looks worst"). */
.earnings-table td.text-end { font-variant-numeric: tabular-nums; }
.earnings-table tfoot tr { background: #f4f6fa; }
.earnings-table tfoot td { border-top: 2px solid #e3e7ee; }

/* ⚠️ VENDOR THEME BUG, FIXED HERE (app.css can't be hand-edited — the next
   template update overwrites it): every .btn-soft-*:disabled variant sets
   BOTH its icon/text color AND its background to the SAME solid theme color
   (e.g. .btn-soft-secondary: --theme-btn-disabled-color AND
   --theme-btn-disabled-bg both = var(--theme-secondary), #1c84c6) — a disabled
   button is therefore an icon rendered in the exact color of its own
   background, completely invisible. Confirmed live: the "Membership package —
   cannot be deleted" lock button on /commission/service/recharge (owner:
   "icon are not visible proply"). This affects every disabled .btn-soft-*
   anywhere in the admin, not just that one screen, so the fix is general
   rather than scoped to one page. findistro.css loads after app.min.css (see
   partials/head.php's own comment), so this wins at equal specificity via
   source order — no !important needed. */
.btn[class*="btn-soft-"]:disabled,
.btn[class*="btn-soft-"].disabled {
    color: #97a3b5;
    background-color: #eef1f6;
    border-color: transparent;
}

/* Commission rate card (/commission/packages/{id}) — the level-rate <td>s had
   no text-align at all while their <th>s were text-center, so every column of
   percentages sat left-aligned under a centered header (owner: "very worst").
   Fixed the missing class in package.php itself; this adds tabular figures so
   a scan down the column lines up digit-for-digit, same treatment already
   used on Distributor Earnings. Untouched: the real (hidden) rate[...] input
   this cell also carries — .js-rate-display is a span, this only affects its
   own text metrics, never the input-group's layout. */
.rate-table .js-rate-display { font-variant-numeric: tabular-nums; }

/* Soft pill badges — cleaner than default */
.pill { display: inline-block; font-size: 11px; font-weight: 600; padding: .22rem .6rem; border-radius: 999px; line-height: 1.4; white-space: nowrap; }
.pill-green  { background: #e6f7f1; color: #0a9d6e; }
.pill-blue   { background: #e8f0fe; color: #2f6bd6; }
.pill-info   { background: #e4f4fb; color: #1090b8; }
.pill-orange { background: #fdf1e3; color: #d5820a; }
.pill-red    { background: #fdeaea; color: #d64545; }
.pill-grey   { background: #eef1f5; color: #667085; }
.pill-purple { background: #efeaff; color: #6b4ee0; }

/* Compact row action buttons */
.act-btns { display: inline-flex; gap: .35rem; justify-content: flex-end; }
.act-btns .btn { padding: .3rem .7rem; font-size: 12px; font-weight: 600; border-radius: 7px; line-height: 1.3; }
/* Square icon-only row action (Credit / Debit / Edit). The label lives in
   title + aria-label, so the table reads as data, not as a wall of buttons. */
.act-btns .btn-icon {
    width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.act-btns .btn-icon i { font-size: 15px; line-height: 1; }

/* DataTables: keep the search/export toolbar tidy inside our card header */
.dt-toolbar .form-control-sm, .dt-toolbar .form-select-sm { min-height: 34px; }

/* DataTables chrome: search box + info + paging + export button */
div.dt-container .dt-search input {
    border: 1px solid #cfd4dc; border-radius: 6px; padding: .45rem .75rem .45rem 2rem; min-width: 240px; min-height: 38px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat .6rem center;
}
div.dt-container .dt-info { font-size: 12.5px; color: #667085; }
div.dt-container .dt-paging .dt-paging-button.current { background: #1ab394 !important; border-color: #1ab394 !important; color: #fff !important; border-radius: 6px; }
div.dt-container .dt-paging .dt-paging-button { border-radius: 6px; }
div.dt-container .dt-buttons .btn { border-radius: 6px; }

/* Paging sits at the RIGHT edge, opposite the "Showing x–y of z" on the left.
   Centred paging leaves the controls floating in the middle of a wide table with
   whitespace on both sides — and the eye has to travel to find them. This covers
   both the DataTables 2.x markup (.dt-paging) and the Bootstrap-5 integration's
   own <ul class="pagination">, which ships centred by default. App-wide. */
div.dt-container .dt-paging,
div.dt-container .dt-layout-cell:has(.dt-paging) {
    display: flex;
    justify-content: flex-end;
}
div.dt-container .pagination,
.card-body > .pagination,
.card-footer > .pagination,
nav[aria-label] > .pagination {
    justify-content: flex-end !important;
    margin-bottom: 0;
}
/* On a phone the two rows stack; keep them readable rather than jammed right. */
@media (max-width: 575.98px) {
    div.dt-container .dt-paging,
    div.dt-container .dt-layout-cell:has(.dt-paging),
    div.dt-container .pagination { justify-content: flex-start !important; }
}

/* ==================================================================
   FORMS — clean, clearly-bordered fields (the theme's default border
   is too faint for a data-entry app). Applies app-wide.
   ================================================================== */
.form-label {
    font-weight: 600;
    font-size: 12.5px;
    color: #344054;
    margin-bottom: .375rem;
}
.form-control,
.form-select {
    border: 1px solid #cfd4dc;
    background-color: #fff;
    color: #1d2939;
    border-radius: 6px;
    padding: .5rem .75rem;
    min-height: 40px;
    font-size: 13.5px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: #98a2b3; opacity: 1; }
.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: #b3bac5; }
.form-control:focus,
.form-select:focus {
    border-color: #1ab394;
    box-shadow: 0 0 0 3px rgba(26, 179, 148, .14);
    background-color: #fff;
    color: #1d2939;
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: #f2f4f7;
    color: #667085;
    border-color: #e4e7ec;
}
.form-control.is-invalid,
.form-select.is-invalid { border-color: #f04438; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(240, 68, 56, .12); }
.invalid-feedback { font-size: 12px; color: #d92d20; }
.form-text { font-size: 12px; color: #667085; }

/* Input group affixes (icons) sit flush and subtle */
.input-group-text {
    background-color: #f9fafb;
    border: 1px solid #cfd4dc;
    color: #667085;
}
.input-group > .form-control { border-left: 0; }
.input-group > .input-group-text + .form-control { padding-left: .625rem; }

/* File inputs */
.form-control[type=file] { padding: .35rem .6rem; }
.form-control[type=file]::file-selector-button {
    background-color: #f2f4f7;
    border: 0;
    border-right: 1px solid #cfd4dc;
    color: #344054;
    padding: .45rem .75rem;
    margin: -.35rem .6rem -.35rem -.6rem;
    border-radius: 0;
}

/* Checkboxes / switches accent */
.form-check-input:checked { background-color: #1ab394; border-color: #1ab394; }

/* ==================================================================
   WIZARD (onboarding) — clean numbered stepper + sectioned panes
   ================================================================== */
.onboard-steps { border-bottom: 1px solid #e4e7ec; gap: .25rem; }
.onboard-steps .nav-link {
    color: #667085;
    font-weight: 600;
    font-size: 13px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent !important;
    padding: .5rem .25rem 1rem;
}
.onboard-steps .nav-link.active { color: #1ab394; border-bottom-color: #1ab394; }
.onboard-steps .nav-link [data-step-badge] {
    width: 22px; height: 22px; line-height: 22px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.onboard-pane { padding-top: .25rem; }
.onboard-pane .form-label { margin-bottom: .3rem; }

/* ── Service / category tab bar (commission + catalog switchers) ───────── */
.svc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, #e4e7ec);
}
.svc-tabs .nav-item { margin-bottom: -1px; }
.svc-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    font-weight: 500;
    font-size: .9rem;
    line-height: 1.2;
    color: var(--bs-secondary-color, #667085);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.svc-tabs .nav-link i { font-size: 1.05rem; opacity: .9; }
.svc-tabs .nav-link:hover {
    color: var(--bs-emphasis-color, #1d2939);
    border-bottom-color: var(--bs-border-color, #cfd4dc);
}
.svc-tabs .nav-link.active {
    color: var(--bs-primary, #7c5cff);
    border-bottom-color: var(--bs-primary, #7c5cff);
    background: transparent;
}
@media (max-width: 575.98px) {
    .svc-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .svc-tabs .nav-link { padding: 10px 14px; }
}

/* ── Breathing room below the sticky topbar on EVERY page ──────────────── */
.content-page > .container-fluid {
    padding-top: 1.5rem;
    padding-bottom: 1.75rem;
}
@media (max-width: 767.98px) {
    .content-page > .container-fluid { padding-top: 1rem; }
}

/* ==================================================================
   HOUSE DESIGN STANDARD — underline tabs (2026-07 admin design system)
   Applies to existing `.nav-tabs.card-header-tabs` markup — no markup change.
   Used by Operator Details, API Code Details, and any future tabbed card.
   ================================================================== */
.card-header .nav-tabs.card-header-tabs { margin: 0 0 -1px; gap: .1rem; }
.nav-tabs.card-header-tabs { border-bottom: 1px solid var(--bs-border-color, #e7e9eb); }
.nav-tabs.card-header-tabs .nav-item { margin-bottom: 0; }
.nav-tabs.card-header-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    color: #667085; font-weight: 600; font-size: .875rem;
    padding: .7rem 1rem; margin-bottom: -1px; background: transparent;
    display: inline-flex; align-items: center; gap: .45rem;
}
.nav-tabs.card-header-tabs .nav-link:hover { color: #1d2939; border-bottom-color: #cbd2dd; }
.nav-tabs.card-header-tabs .nav-link.active {
    color: var(--bs-primary, #6366f1); background: transparent;
    border-color: transparent transparent var(--bs-primary, #6366f1);
}
.nav-tabs.card-header-tabs .nav-link .badge {
    font-size: .64rem; font-weight: 700; padding: .22em .5em; line-height: 1;
    background: var(--bs-tertiary-bg, #eef1f6); color: #667085; border-radius: 2rem;
}
.nav-tabs.card-header-tabs .nav-link.active .badge { background: var(--bs-primary, #6366f1); color: #fff; }
[data-bs-theme="dark"] .nav-tabs.card-header-tabs .nav-link { color: #9aa4b2; }
[data-bs-theme="dark"] .nav-tabs.card-header-tabs .nav-link:hover { color: #e5e9ef; }

/* ==================================================================
   RATE EDIT MODAL (Commission > Rate Card > per-operator Edit) — live
   total pill + circular level icons. Uses real theme tokens (not the
   generic var(--surface-1) etc. from an earlier mockup round) so this
   follows --theme-secondary-bg/--theme-border-color into dark mode
   automatically, no separate [data-bs-theme="dark"] block needed here.
   ================================================================== */
.rate-modal-total-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: var(--theme-tertiary-bg, #f6f7fb);
    border: 1px solid var(--theme-border-color, #e7e9eb);
    border-radius: 10px;
    padding: .55rem .9rem;
    margin-bottom: .9rem;
}
.rate-modal-total-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--bs-secondary-color, #667085);
}
.rate-modal-total-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--bs-emphasis-color, #1d2939);
    white-space: nowrap;
}
.rate-modal-level-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .375rem;
}
.rate-modal-level-icon {
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--theme-tertiary-bg, #f6f7fb);
    color: var(--bs-secondary-color, #667085);
    font-size: 13px;
}

/* --- DataTables pagination — every listing page in the panel shares this
   (partials/scripts.php's dom template), so it's styled once here rather
   than per-page. Bootstrap's stock .page-link is flush squares with a hard
   border; this softens it to match the house .btn-light/pill look
   (rounded, subtle border, quiet hover) instead of the raw default. */
.dataTables_wrapper .dataTables_info { font-size: 12px; color: var(--bs-secondary-color, #667085); }
.dataTables_wrapper .pagination { margin-bottom: 0; gap: 4px; }
.dataTables_wrapper .page-link {
    border-radius: .4rem;
    border-color: var(--bs-border-color, #e5e7eb);
    color: var(--bs-emphasis-color, #1d2939);
    font-size: 13px;
    padding: .3rem .65rem;
}
.dataTables_wrapper .page-link:hover { background: var(--theme-tertiary-bg, #f6f7fb); border-color: var(--bs-border-color, #e5e7eb); }
.dataTables_wrapper .page-item.active .page-link { background: #4f46e5; border-color: #4f46e5; }
.dataTables_wrapper .page-item.disabled .page-link { color: var(--bs-secondary-color, #98a2b3); opacity: .55; }

/* ── ECOBYTE wordmark sizing (2026-08-17) ────────────────────────────────────
   The segmented ECOBYTE mark is 6.04:1 — far wider per unit height than the
   lockup it replaced (5.18:1) — so at the theme's own heights it overran the
   sidenav rail and dominated the sign-in card.

   ⚠️ THE HTML height ATTRIBUTE ON THE <img> DOES NOTHING HERE. app.css sets
   `.logo-lg img{height:var(--theme-logo-lg-height)}` (24px) and then, LATER and
   at the SAME specificity, `.logo-dark img,.auth-brand .logo-light img{height:30px}`
   — so 30px was winning in the sidenav too, not the 24 the variable implies.
   Editing the attribute looks like it should work and silently does not; these
   rules carry an extra class to outrank both.

   ⚠️ `.logo-sm` IS DELIBERATELY NOT TOUCHED. That slot renders logo-mark.svg —
   a SQUARE badge for the condensed rail and the favicon. It is not wide and does
   not have this problem; shrinking it just makes the collapsed sidebar look thin. */
.logo-lg img,
.logo-dark .logo-lg img,
.logo-light .logo-lg img { height: 15px; }

.auth-brand .logo-dark img,
.auth-brand .logo-light img { height: 22px; }

/* ── Filter bars: action buttons match the input height ──────────────────────
 * The From/To date inputs render taller than a plain .btn-sm because the native
 * date control adds its own picker affordance, so a Filter button beside them
 * sat visibly short. Matching Bootstrap's small-control height and centring the
 * label keeps the row on one baseline.
 *
 * Two selectors, both narrow on purpose:
 *   .filter-card .btn  — the filter bars
 *   form.row .btn      — any form laid out as a row of inputs plus an action, which
 *                        is how Statement's month + View/Download bar is built. It
 *                        sits in a plain card, so the filter-card rule never reached
 *                        it and its buttons stayed short.
 *
 * NOT applied to .btn-sm globally. The mismatch comes from the theme's
 * `.btn-sm{line-height:normal}`, so every small button on the platform is short
 * next to an input — but changing all of them would move buttons on 98 ERP screens
 * nobody has reviewed. Fix it where inputs and buttons actually sit together.
 *
 * min-height rather than height so a wrapped label grows the button instead of
 * overflowing it.
 */
.filter-card .btn,
form.row .btn {
    /*
     * The EXACT expression the theme gives .form-control-sm:
     *   height: calc(1.5em + .625rem + calc(var(--theme-border-width) * 2))
     * Guessing .5rem + a flat 2px left the button visibly short. Both elements
     * share font-size .788rem, so 1.5em resolves identically on each.
     *
     * line-height must be forced back to 1.5: the theme sets .btn-sm{line-height:normal}
     * (~1.2), which shrinks the button box below the input even when the padding matches.
     */
    min-height: calc(1.5em + .625rem + calc(var(--theme-border-width) * 2));
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==================================================================
   ERP desk and mobile design standard — 2026-09-22.
   The shell opts in with .erp-admin: partner and client layouts keep their
   own design. Tokens follow Inspinia's theme-prefixed variables. Tables
   retain every column; their own scroll region absorbs wide content.
   ================================================================== */
.erp-admin {
    --erp-surface: var(--theme-secondary-bg, #fff);
    --erp-subtle: var(--theme-tertiary-bg, #f6f7fb);
    --erp-text: var(--theme-body-color, #344054);
    --erp-muted: #5e6879;
    --erp-border: var(--theme-border-color, #e7e9eb);
    --erp-field-border: #cbd2dc;
    --erp-check-border: #7e8694;
    --erp-accent: var(--theme-primary, #5e6cc1);
    --erp-positive: #08754f;
    --erp-caution: #8b5200;
    --erp-negative: #ae2d2d;
    --erp-info: #086782;
    --erp-blue: #2455a4;
    --erp-purple: #6345b1;
    --theme-link-color: var(--erp-blue);
    --theme-link-hover-color: var(--erp-blue);
    --theme-link-color-rgb: 36, 85, 164;
    --theme-link-hover-color-rgb: 36, 85, 164;
    --theme-secondary-color: var(--erp-muted);
    /* Existing view styles use Bootstrap's default prefix, while Inspinia
       exposes theme-prefixed tokens. Bridge them inside this shell only. */
    --bs-body-bg: var(--theme-body-bg);
    --bs-body-color: var(--erp-text);
    --bs-secondary-bg: var(--erp-surface);
    --bs-tertiary-bg: var(--erp-subtle);
    --bs-border-color: var(--erp-border);
    --bs-secondary-color: var(--erp-muted);
    --bs-emphasis-color: var(--erp-text);
    --bs-primary: var(--erp-accent);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--erp-accent) 12%, var(--erp-surface));
    --bs-danger-bg-subtle: color-mix(in srgb, var(--erp-negative) 8%, var(--erp-surface));
    --bs-warning-bg-subtle: color-mix(in srgb, var(--erp-caution) 8%, var(--erp-surface));
    --bs-success-bg-subtle: color-mix(in srgb, var(--erp-positive) 8%, var(--erp-surface));
    --bs-info-bg-subtle: color-mix(in srgb, var(--erp-info) 8%, var(--erp-surface));
    font-size: 13px;
    line-height: 1.5;
}
[data-bs-theme="dark"] .erp-admin {
    --erp-muted: #b0bac9;
    --erp-field-border: #526073;
    --erp-check-border: #8997ab;
    --erp-positive: #7ce0b2;
    --erp-caution: #f5cc85;
    --erp-negative: #ffaaa5;
    --erp-info: #7dd8ed;
    --erp-blue: #a4c4ff;
    --erp-purple: #c6b3ff;
    --theme-link-color-rgb: 164, 196, 255;
    --theme-link-hover-color-rgb: 164, 196, 255;
}
.erp-admin .content-page,
.erp-admin .content-page > .container-fluid,
.erp-admin .row > *,
.erp-admin .d-flex > *,
.erp-admin .card,
.erp-admin .card-body { min-width: 0; }
.erp-admin .content-page > .container-fluid { padding: 16px 20px 24px; }
.erp-admin .card {
    --theme-card-spacer-y: 14px;
    --theme-card-spacer-x: 16px;
    border-color: var(--erp-border);
    border-radius: 8px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgb(16 24 40 / 3%);
}
.erp-admin .card-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 11px 16px;
    border-color: var(--erp-border);
}
.erp-admin .card-header > .d-flex,
.erp-admin .card-footer > .d-flex { flex-wrap: wrap; }
.erp-admin .card-title { font-size: 14px; line-height: 1.45; }
.erp-admin .card-header .card-title { margin-bottom: 0; }
.erp-admin .page-title { color: var(--erp-text); }
/* Real-data detail tables and long provider references must stay inside cards. */
.erp-admin .card-body:has(> table) { overflow-x: auto; }
.erp-admin .log-node { min-width: 0; overflow-wrap: anywhere; }
.erp-admin .log-node .badge { white-space: normal; overflow-wrap: anywhere; }
.erp-admin .log-node time { flex-shrink: 0; }
@media (max-width: 575.98px) {
    .erp-admin .log-node > .d-flex { flex-direction: column; gap: 6px !important; }
    .erp-admin .op-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; }
    .erp-admin .op-row .op-bar { grid-column: 2; grid-row: 2; }
    .erp-admin .op-row .u-amt { grid-column: 2 / -1; justify-self: end; }
}
.erp-admin .amm-keep-pos,
.erp-admin .amm-best { color: var(--erp-positive); }
.erp-admin .amm-keep-neg { color: var(--erp-negative); }
.erp-admin details.amm-edit > summary { color: var(--erp-blue); }
.erp-admin .amm-scroll :is(td, th):first-child { background: var(--erp-surface); }
.erp-admin .bg-danger-subtle { background-color: var(--bs-danger-bg-subtle) !important; }
.erp-admin .text-warning-emphasis { color: var(--erp-caution) !important; }
.erp-admin :is(.amr-cell-live, .amr-cell-dead) .badge { white-space: normal; overflow-wrap: anywhere; text-align: left; }
.erp-admin :is(.amr-cell-live, .amr-cell-dead) .d-flex { flex-wrap: wrap; gap: 6px; }
.erp-admin .login-banner-preview { background-color: var(--erp-subtle); max-width: 100%; }
.erp-admin .card-footer { padding: 10px 16px; border-color: var(--erp-border); }
.erp-admin .card-body > .d-flex,
.erp-admin .card-body > form.d-flex { flex-wrap: wrap; }
.erp-admin .card-title,
.erp-admin .alert,
.erp-admin .form-text,
.erp-admin .card-body p,
.erp-admin .card-body dd { overflow-wrap: anywhere; }

/* The icon reserves space beside the label, never beside a long amount.
   Values use the tile's full width and are never ellipsized or hidden. */
.erp-admin .stat-tile { background: var(--erp-surface); border-color: var(--erp-border); border-radius: 8px; }
.erp-admin .stat-tile:hover { transform: none; box-shadow: 0 2px 6px rgb(16 24 40 / 7%); }
.erp-admin .stat-tile .stat-body { display: block !important; position: relative; padding: 12px; }
.erp-admin .stat-tile .stat-label { padding-right: 36px; min-height: 30px; margin-bottom: 5px !important; font-size: 10px; line-height: 1.45; letter-spacing: .035em; color: var(--erp-muted); overflow-wrap: anywhere; }
.erp-admin .stat-tile .stat-value,
.erp-admin .stat-tile .stat-value.fs-3 { font-size: clamp(16px, 1.4vw, 20px) !important; line-height: 1.4; color: var(--erp-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.erp-admin .stat-tile .stat-icon { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 7px; font-size: 17px; }
.erp-admin .stat-tile .stat-foot { font-size: 11px; line-height: 1.45; color: var(--erp-muted); margin-top: 4px; gap: 5px; align-items: baseline; overflow-wrap: anywhere; }
.erp-admin .stat-foot .dot { flex-shrink: 0; margin-right: 0; width: 5px; height: 5px; }
.erp-admin .stat-tile .stat-accent { height: 2px; }

/* Compact controls share a baseline. Native dates and Choices wrappers
   must be allowed to shrink inside Bootstrap columns. */
.erp-admin .form-label { color: var(--erp-text); font-size: 12px; line-height: 1.45; }
.erp-admin .filter-card .form-label { color: var(--erp-muted); font-size: 11px; letter-spacing: .03em; }
.erp-admin .filter-card .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 12px;
    margin: 0;
}
.erp-admin .filter-card .row > :is(.col, [class*="col-"]) { width: auto; min-width: 0; max-width: 100%; padding-inline: 0; margin-top: 0; }
.erp-admin .filter-card .row > :is(.col-12, .filter-actions):not(:has(.form-control, .form-select, .choices)) { grid-column: 1 / -1; }
.erp-admin .filter-actions > .d-flex { flex-wrap: wrap; gap: 8px !important; }
.erp-admin .filter-card .form-control,
.erp-admin .filter-card .form-select,
.erp-admin .filter-card .btn { min-height: 36px; }
.erp-admin .form-control,
.erp-admin .form-select { min-width: 0; max-width: 100%; min-height: 36px; font-size: 13px; padding: 7px 10px; border-color: var(--erp-field-border); color: var(--erp-text); background-color: var(--erp-surface); }
.erp-admin .form-control-sm,
.erp-admin .form-select-sm { min-height: 33px; font-size: 12px; padding: 6px 9px; }
.erp-admin .form-select { padding-right: 28px; }
.erp-admin .form-control:focus,
.erp-admin .form-select:focus { background-color: var(--erp-surface); color: var(--erp-text); border-color: var(--erp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--erp-accent) 16%, transparent); }
.erp-admin .form-control:disabled,
.erp-admin .form-control[readonly],
.erp-admin .form-select:disabled { background-color: var(--erp-subtle); color: var(--erp-muted); border-color: var(--erp-border); }
.erp-admin .form-control::placeholder { color: var(--erp-muted); }
/* Selection controls need a visible outline in both themes. Validation keeps
   the vendor's own colours; checked controls use the ERP success-button fill. */
.erp-admin .form-check-input:where(:not(:checked):not(:disabled):not(.is-valid):not(.is-invalid):not(.was-validated *)) { border-color: var(--erp-check-border); }
.erp-admin .form-check-input:where(:not(:disabled):not(.is-valid):not(.is-invalid):not(.was-validated *)):is(:checked,[type="checkbox"]:indeterminate) { background-color: #087f5b; border-color: #087f5b; }
.erp-admin .form-text,
.erp-admin .table-neo .u-sub { color: var(--erp-muted); }
.erp-admin .text-muted { color: var(--erp-muted) !important; }
/* ⚠️ THE SIDEBAR IS A DARK SURFACE IN BOTH THEMES — layouts/app.php ships
   data-menu-color="dark", so it stays dark even on a light screen. The blanket
   .text-muted rule above is a LIGHT-THEME ink (#5e6879) and lands on that dark panel at
   2.39:1, which is below AA. It hits the operator's own role label under their name in
   partials/sidenav.php, so it was wrong on 180 of 182 pages at once — the kind of defect
   that hides precisely because it is on every screen and therefore looks deliberate.
   Measured against the pre-change stylesheet: this was introduced here, not inherited.
   Keyed on data-menu-color so a light sidebar keeps the inherited treatment. */
[data-menu-color="dark"] .erp-admin .sidenav-menu .text-muted { color: #aab4c4 !important; }
/* The sidebar's own label ink misses AA by a tenth: #8495ab on the #23303c panel measures
   4.40:1 against a 4.50 floor. It is inherited from the theme, not introduced here, but it
   is every section heading and every menu item on every page, so it is one colour worth
   0.9 of a point rather than six thousand separate findings. Lifted within the same hue so
   the sidebar still reads as secondary to the active item. */
[data-menu-color="dark"] .erp-admin .sidenav-menu :is(.side-nav-title, .menu-text) { color: #93a3b8; }
/* Inline <code> keeps Bootstrap's default pink, #ff679b, which is 2.74:1 on white. These
   are not decorative: they are the config keys and command names an operator reads off
   the screen — PAYOUT_AUTH_STEPS, upicw:reconcile, wadh. Inherited, not introduced here.
   ⚠️ LIGHT ONLY. Dark already measures clean for this element, and an unscoped darkening
   would push it the wrong way there. */
[data-bs-theme="light"] .erp-admin code { color: #c2185b; }
.erp-admin .table-neo .u-sub { max-width: 28ch; white-space: normal; overflow-wrap: anywhere; }
.erp-admin .input-group { min-width: 0; max-width: 100%; }
.erp-admin .input-group-text { background: var(--erp-subtle); color: var(--erp-muted); border-color: var(--erp-field-border); }
.erp-admin .choices { min-width: 0; max-width: 100%; --choices-highlighted-color: var(--erp-subtle); }
.erp-admin .choices__inner { min-width: 0; min-height: 36px; background: var(--erp-surface); color: var(--erp-text); border-color: var(--erp-field-border); }
.erp-admin .choices__list--dropdown { background: var(--erp-surface); color: var(--erp-text); border-color: var(--erp-field-border); }
.erp-admin .choices.is-disabled .choices__inner { background: var(--erp-subtle); color: var(--erp-muted); border-color: var(--erp-border); }
.erp-admin .choices__input { background: var(--erp-surface); color: var(--erp-text); }
.erp-admin .choices[data-type] .choices__input { background-color: var(--erp-surface); color: var(--erp-text); border-color: var(--erp-field-border); }
.erp-admin .choices .choices__placeholder { opacity: 1; color: var(--erp-muted); }
.erp-admin .choices .choices__input::placeholder { opacity: 1; color: var(--erp-muted); }
.erp-admin .choices__list--dropdown .choices__item { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.erp-admin .choices.is-focused .choices__inner,
.erp-admin .choices.is-open .choices__inner { border-color: var(--erp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--erp-accent) 16%, transparent); }
.erp-admin .choices__list--dropdown .choices__item--selectable.is-highlighted,
.erp-admin .choices__list--dropdown .choices__item--selectable.is-selected { background: var(--erp-subtle); color: var(--erp-text); }
.erp-admin .filter-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.erp-admin .filter-actions .btn { min-width: 80px; }
.erp-admin form.row .btn { min-height: 33px; font-size: 12px; }
.erp-admin .filter-card .btn { min-height: 36px; font-size: 12px; }
.erp-admin .btn { white-space: normal; overflow-wrap: anywhere; }
.erp-admin .btn-success { background-color: #087f5b; border-color: #087f5b; }
.erp-admin .btn-success:hover { background-color: #066547; border-color: #066547; }
.erp-admin .btn-soft-primary { --erp-button-ink: var(--erp-purple); }
.erp-admin .btn-soft-success { --erp-button-ink: var(--erp-positive); }
.erp-admin .btn-soft-warning { --erp-button-ink: var(--erp-caution); }
.erp-admin .btn-soft-danger { --erp-button-ink: var(--erp-negative); }
.erp-admin .btn-soft-info { --erp-button-ink: var(--erp-info); }
.erp-admin .btn[class*="btn-soft-"]:not(:disabled):not(.disabled) {
    color: var(--erp-button-ink, var(--erp-text));
    background-color: color-mix(in srgb, var(--erp-button-ink, var(--erp-text)) 10%, var(--erp-surface));
}
.erp-admin .btn[class*="btn-soft-"]:not(:disabled):not(.disabled):hover {
    background-color: color-mix(in srgb, var(--erp-button-ink, var(--erp-text)) 18%, var(--erp-surface));
}
.erp-admin .btn:focus-visible,
.erp-admin a:focus-visible,
.erp-admin .table-responsive:focus-visible { outline: 2px solid var(--erp-accent); outline-offset: 3px; }

/* Scroll belongs to the table, never to the whole document. Preserve
   existing nowrap and responsive-extension decisions on individual tables. */
.erp-admin .table-responsive { min-width: 0; max-width: 100%; overscroll-behavior-x: contain; scrollbar-width: auto; scrollbar-color: #8d9bad var(--erp-subtle); }
.erp-admin .table-responsive::-webkit-scrollbar { width: 9px; height: 9px; }
.erp-admin .table-responsive::-webkit-scrollbar-thumb { background: #8d9bad; border: 2px solid var(--erp-subtle); border-radius: 8px; }
.erp-admin .table-responsive::-webkit-scrollbar-track { background: var(--erp-subtle); }
.erp-admin .table-responsive .form-control,
.erp-admin .table-responsive .form-select { min-width: 90px; }
.erp-admin :is(.table, table:has(> thead)) {
    --theme-table-bg: var(--erp-surface);
    --theme-table-color: var(--erp-text);
    --theme-table-border-color: var(--erp-border);
    --theme-table-striped-bg: var(--erp-subtle);
    --theme-table-striped-color: var(--erp-text);
    --theme-table-hover-bg: var(--erp-subtle);
    --theme-table-hover-color: var(--erp-text);
    --bs-table-bg: var(--erp-surface);
    font-size: 12px;
}
/* One header standard for plain, neo, dark-head and plugin-enhanced tables.
   Column widths, alignment, ordering and visibility stay with each table. */
.erp-admin :is(.table, table:has(> thead)) > thead > tr > th {
    /* Override vendor first/last-cell and table-sm padding as one system. */
    padding: 10px 12px !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .01em;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--erp-muted);
    background: var(--erp-subtle);
    border-color: var(--erp-border);
    border-bottom-width: 1px;
}
.erp-admin :is(.table, table:has(> thead)) > thead > tr > th .dt-column-header { transform: none; align-items: center; }
.erp-admin :is(.table, table:has(> thead)) > thead > tr > th .dt-column-title { color: inherit; }
/* Theme-colored chevrons replace the vendor's fixed dark SVG strokes. */
.erp-admin table.dataTable thead th span.dt-column-order { opacity: 1; }
.erp-admin table.dataTable thead th:is(.dt-orderable-asc,.dt-ordering-asc) span.dt-column-order::before,
.erp-admin table.dataTable thead th:is(.dt-orderable-desc,.dt-ordering-desc) span.dt-column-order::after {
    content: "";
    width: 6px;
    height: 6px;
    inset-inline-start: 3px;
    border: solid currentColor;
    transform: rotate(45deg);
    opacity: .7;
}
.erp-admin table.dataTable thead th:is(.dt-orderable-asc,.dt-ordering-asc) span.dt-column-order::before { border-width: 1.5px 0 0 1.5px; bottom: calc(50% + 1px); }
.erp-admin table.dataTable thead th:is(.dt-orderable-desc,.dt-ordering-desc) span.dt-column-order::after { border-width: 0 1.5px 1.5px 0; top: calc(50% + 1px); }
.erp-admin table.dataTable thead th.dt-ordering-asc span.dt-column-order::before,
.erp-admin table.dataTable thead th.dt-ordering-desc span.dt-column-order::after { opacity: 1; color: var(--erp-blue); }
.erp-admin .dt-column-order:focus-visible { outline: 2px solid var(--erp-blue); outline-offset: 3px; border-radius: 3px; }
.erp-admin :is(.table, table:has(> thead)) > tbody > tr > :is(td, th) { padding: 11px 12px; font-size: 12.5px; line-height: 1.5; color: var(--erp-text); border-color: var(--erp-border); vertical-align: middle; }
.erp-admin :is(.table, table:has(> thead)) > tbody > tr:hover > td { background-color: var(--theme-table-hover-bg, var(--erp-subtle)); }
.erp-admin :is(.table, table:has(> thead)) > tfoot > tr > :is(td, th) { padding: 10px 12px; background: var(--erp-subtle); color: var(--erp-text); border-color: var(--erp-border); font-weight: 600; }
.erp-admin .table-neo .u-name,
.erp-admin .table-neo .u-mobile,
.erp-admin .table-neo .u-amt { color: var(--erp-text); }
.erp-admin .table .u-amt,
.erp-admin .table td.text-end { font-variant-numeric: tabular-nums; }
/* margin-top: 0 cancels the vendor theme's `.dt-container { margin-top: -.75rem }` (app.min.css),
   which pulled every DataTable up into the card header above it. Owner, 2026-09-23: already
   live on production, recorded here so git matches it. */
.erp-admin .dt-container { min-width: 0; max-width: 100%; margin-top: 0; }
/* DataTables owns the inner scroller; its search/export/pager remain stationary. */
.erp-admin .table-responsive:has(> .dt-container) { overflow: visible; }
/*
 * Horizontal scroll ONLY (27-Sep hotfix). The first version of this rule also capped
 * height (max-height + overflow:auto both axes), which boxed every normal-length admin
 * table — 50, 100 rows, the common case — into a cramped ~640px scrolling pane with the
 * rest of the page's own scroll doing nothing, instead of letting the table flow with the
 * page like it always had. A table too WIDE for the viewport still scrolls sideways here;
 * a table with many ROWS just runs down the page, as before.
 */
.erp-admin .dt-table-scroll { width: 100%; overflow-x: auto; border-radius: 0; }
.erp-admin .dt-container > .row:first-child:has(.dt-search, .dt-buttons):not(:has(.dt-paging)) { margin: 0 !important; padding: 12px; row-gap: 8px; }
.erp-admin .dt-container > .row:first-child:has(.dt-search, .dt-buttons) > * { margin-top: 0; padding-inline: 0; }
.erp-admin .card-footer:has(.pagination, [data-ajax-link]) { gap: 10px; }
.erp-admin .card-footer:has(.pagination, [data-ajax-link]) .btn { min-height: 34px; white-space: nowrap; font-size: 12px; }
.erp-admin .card-footer .d-flex:has([data-ajax-link]) { flex-wrap: wrap; }
.erp-admin .dt-refreshing { cursor: progress; box-shadow: inset 0 3px var(--erp-accent); }
.erp-admin div.dt-container .dt-search input { min-width: 0; width: min(100%, 240px); min-height: 33px; color: var(--erp-text); background-color: var(--erp-surface); border-color: var(--erp-field-border); }
.erp-admin div.dt-container .dt-info { color: var(--erp-muted); font-size: 11px; white-space: normal; }
.erp-admin .pagination { flex-wrap: wrap; gap: 3px; }
.erp-admin .pagination .page-link { border-radius: 6px; min-width: 34px; min-height: 34px; padding: 7px 10px; font-size: 12px; text-align: center; }
.erp-admin .dt-toolbar { flex-wrap: wrap; min-width: 0; gap: 6px; }
/* Table controls are atomic: shrinking a column must never turn Review into
   a column of letters. Keep actions together and let the table scroll. */
.erp-admin :is(.table, table:has(> thead)) .btn {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1.5;
}
.erp-admin .table td:has(> .btn):not(:has(> .form-control, > .form-select)) { white-space: nowrap !important; }
.erp-admin .table td > .btn + .btn { margin-inline-start: 4px; }
.erp-admin .table td > .collapse.show { min-width: 260px; white-space: normal; }
.erp-admin .table td form.d-flex > .form-control { flex: 1 1 200px; min-width: 200px; }

/* A consistent title/toolbar band, followed by the table, then its footer.
   These selectors cover server-rendered and DataTables-generated controls. */
.erp-admin .card:has(table[data-datatable]) > .card-header { gap: 12px 16px; }
.erp-admin .card:has(table[data-datatable]) > .card-header > .d-flex { gap: 8px !important; }
.erp-admin .card:has(table[data-datatable]) > .card-header .btn { white-space: nowrap; overflow-wrap: normal; flex-shrink: 0; }
.erp-admin .card:has(table[data-datatable]) > .card-header .btn-group { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; }
.erp-admin .card-body > .alert.mb-0:has(+ .table-responsive) { margin-bottom: 12px !important; }
.erp-admin .card-body.p-0 > .alert { padding: 12px 16px; font-size: 12px !important; line-height: 1.65; }
.erp-admin .dt-container > .row:has(.dt-info, .dt-paging) {
    margin: 0 !important;
    padding: 10px 12px;
    border-top: 1px solid var(--erp-border);
    background: var(--erp-surface);
    row-gap: 8px;
}
.erp-admin .dt-container > .row:has(.dt-info, .dt-paging) > * { margin-top: 0; padding-inline: 0; }
.erp-admin .dt-container > .row:has(.dt-info, .dt-paging) .dt-info { padding-top: 0; }
.erp-admin .dt-container > .row:has(.dt-info, .dt-paging) .pagination { padding-top: 0; }
/* Both info and paging can be deliberately disabled by a server-paged view. */
.erp-admin .dt-container > .row:last-child:not(:has(.dt-info, .dt-paging, input, button, a)) { display: none; }
.erp-admin table.dataTable td.dt-empty { padding: 28px 16px !important; text-align: start !important; color: var(--erp-muted); }
.erp-admin .act-btns { flex-wrap: wrap; }
.erp-admin .pill-green { color: var(--erp-positive); background: color-mix(in srgb, var(--erp-positive) 10%, var(--erp-surface)); }
.erp-admin .pill-orange { color: var(--erp-caution); background: color-mix(in srgb, var(--erp-caution) 10%, var(--erp-surface)); }
.erp-admin .pill-red { color: var(--erp-negative); background: color-mix(in srgb, var(--erp-negative) 10%, var(--erp-surface)); }
.erp-admin .pill-info { color: var(--erp-info); background: color-mix(in srgb, var(--erp-info) 10%, var(--erp-surface)); }
.erp-admin .pill-blue { color: var(--erp-blue); background: color-mix(in srgb, var(--erp-blue) 10%, var(--erp-surface)); }
.erp-admin .pill-purple { color: var(--erp-purple); background: color-mix(in srgb, var(--erp-purple) 10%, var(--erp-surface)); }
.erp-admin .pill-grey { color: var(--erp-muted); background: var(--erp-subtle); }
.erp-admin .table .act-btns { flex-wrap: nowrap; }
.erp-admin .table .act-btns > * { flex-shrink: 0; }
.erp-admin .table-neo .cell-trunc { min-width: 140px; max-width: 240px; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.erp-admin .table-neo .cell-trunc-sm { min-width: 128px; max-width: 200px; }

/* Tabs and multistep forms keep their complete labels in a local scroller. */
.erp-admin .svc-tabs,
.erp-admin .onboard-steps,
.erp-admin .nav-tabs.card-header-tabs { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.erp-admin .svc-tabs > *,
.erp-admin .onboard-steps > *,
.erp-admin .nav-tabs.card-header-tabs > * { flex-shrink: 0; }
.erp-admin .svc-tabs .nav-link,
.erp-admin .nav-tabs.card-header-tabs .nav-link { padding: 10px 12px; font-size: 12px; color: var(--erp-muted); }
.erp-admin .svc-tabs .nav-link.active,
.erp-admin .nav-tabs.card-header-tabs .nav-link.active { color: var(--erp-purple); border-bottom-color: var(--erp-purple); }
.erp-admin .modal-title { font-size: 15px; }
.erp-admin .modal-header .btn-close { margin: 0 0 0 auto; flex-shrink: 0; }
.erp-admin .modal-body { overflow-wrap: anywhere; }
.erp-admin .modal-footer { gap: 6px; }
.erp-admin .modal-footer .btn { margin: 0; }
.erp-admin .footer { font-size: 11px; height: auto; min-height: 40px; }
.erp-admin .quad-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.erp-admin .cat-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.erp-admin .pipe-tile-name { color: var(--erp-text); }
.erp-admin .pipe-tile-sub { color: var(--erp-muted); }
.erp-admin .login-banner-preview { max-width: 100%; }
.erp-admin [data-banner-list] > .d-flex { flex-wrap: wrap; }

/* The theme's 50px auth gutter leaves only 180px for a phone's card. */
.erp-auth .auth-box { padding: 32px 16px; background-color: var(--theme-body-bg); }
.erp-auth .auth-box form > .d-flex { flex-wrap: wrap; gap: 10px; }
.erp-auth .auth-brand img { max-width: 100%; object-fit: contain; }

/* Semantic text, notices and status chips use the same readable palette in
   either theme. Vendor utility classes otherwise keep their light colors. */
.erp-admin .text-primary { color: var(--erp-purple) !important; }
.erp-admin .link-primary { color: var(--erp-purple) !important; }
.erp-admin .text-success { color: var(--erp-positive) !important; }
.erp-admin .text-warning { color: var(--erp-caution) !important; }
.erp-admin .text-danger { color: var(--erp-negative) !important; }
.erp-admin .vs-diff-ok { color: var(--erp-positive); }
.erp-admin .vs-diff-bad { color: var(--erp-negative); }
.erp-admin .text-info { color: var(--erp-info) !important; }
.erp-admin .text-secondary, .erp-admin .text-body-secondary { color: var(--erp-muted) !important; }
.erp-admin .text-dark { color: var(--erp-text) !important; }
.erp-admin :is(.alert-primary,.badge-soft-primary,.text-bg-primary,.badge.bg-primary,.btn-outline-primary) { --erp-tone: var(--erp-purple); }
.erp-admin :is(.alert-success,.badge-soft-success,.text-bg-success,.badge.bg-success,.btn-outline-success) { --erp-tone: var(--erp-positive); }
.erp-admin :is(.alert-warning,.badge-soft-warning,.text-bg-warning,.badge.bg-warning,.btn-outline-warning) { --erp-tone: var(--erp-caution); }
.erp-admin :is(.alert-danger,.badge-soft-danger,.text-bg-danger,.badge.bg-danger,.btn-outline-danger) { --erp-tone: var(--erp-negative); }
.erp-admin :is(.alert-info,.badge-soft-info,.text-bg-info,.badge.bg-info,.btn-outline-info) { --erp-tone: var(--erp-info); }
.erp-admin :is(.alert-secondary,.badge-soft-secondary,.text-bg-secondary,.badge.bg-secondary,.btn-outline-secondary) { --erp-tone: var(--erp-blue); }
.erp-admin .alert, .erp-admin .badge[class*="badge-soft-"] {
    color: var(--erp-tone, var(--erp-text));
    background-color: color-mix(in srgb, var(--erp-tone, var(--erp-muted)) 8%, var(--erp-surface));
    border-color: color-mix(in srgb, var(--erp-tone, var(--erp-muted)) 25%, var(--erp-surface));
}
.erp-admin .alert .alert-link { color: inherit; text-decoration: underline; }
.erp-admin .alert { padding: 12px 16px; border-radius: 8px; font-size: 13px; line-height: 1.65; }
.erp-admin .alert-dismissible { padding-inline-end: 46px; }
.erp-admin .alert-dismissible .btn-close { inset-block-start: 10px; inset-inline-end: 10px; padding: 9px; }
.erp-admin .fraud-alert > i { flex-shrink: 0; }
.erp-admin .fraud-alert > div { min-width: 0; overflow-wrap: anywhere; }
.erp-admin .toast-stack { top: calc(var(--theme-topbar-height, 70px) + 12px); max-height: calc(100dvh - 110px); overflow-y: auto; padding: 3px; }
.erp-admin .toast-item { background: var(--erp-surface); color: var(--erp-text); border-color: var(--erp-border); border-left-color: var(--toast-accent); }
.erp-admin .toast-item--success { --toast-accent: var(--erp-positive); }
.erp-admin .toast-item--error { --toast-accent: var(--erp-negative); }
.erp-admin .toast-item--info { --toast-accent: var(--erp-info); }
.erp-admin .toast-item__body { font-size: 13px; line-height: 1.6; }
.erp-admin .toast-item__close { width: 28px; height: 28px; padding: 0; opacity: 1; border-radius: 4px; }
.erp-admin .toast-item__close:focus-visible { outline: 2px solid var(--erp-accent); outline-offset: 2px; }
@media (max-width: 575.98px) {
    .erp-admin .toast-stack { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; right: 12px; width: auto; max-height: min(55dvh, 420px); }
}
.erp-admin :is(.badge[class*="text-bg-"],.badge.bg-primary,.badge.bg-success,.badge.bg-warning,.badge.bg-danger,.badge.bg-info,.badge.bg-secondary) { background-color: var(--erp-tone, var(--erp-muted)) !important; color: var(--erp-surface) !important; }
.erp-admin .btn[class*="btn-outline-"] { color: var(--erp-tone, var(--erp-text)); border-color: var(--erp-tone, var(--erp-field-border)); }
.erp-admin .btn[class*="btn-outline-"]:hover { color: var(--erp-surface); background: var(--erp-tone, var(--erp-text)); }
.erp-admin .btn-check:checked + .btn[class*="btn-outline-"],
.erp-admin .btn[class*="btn-outline-"]:is(.active,:active) { color: var(--erp-surface); background: var(--erp-tone, var(--erp-text)); border-color: var(--erp-tone, var(--erp-text)); }
.erp-admin .btn-danger { background-color: #b42318; border-color: #b42318; }
.erp-admin .btn-danger:hover { background-color: #912018; border-color: #912018; }
.erp-admin .btn-warning { background-color: #8b5200; border-color: #8b5200; color: #fff; }
.erp-admin .btn-warning:hover { background-color: #754600; border-color: #754600; }

/* ── Dark theme: the two solid button variants the theme never restated ──────────
   Measured across all 182 rendered pages with the theme baked into the markup, these
   were the only text-contrast failures left in dark mode. Both are inherited from the
   Inspinia theme rather than introduced here, and both are fixed in this layer because
   the vendor stylesheet is not ours to edit.

   .btn-light keeps its LIGHT-theme ink in dark mode: #313a46 on the #252630 surface is
   1.30:1, which is not "low contrast", it is an invisible button. It reads as a missing
   control, and on network-onboard the control is "Back".

   .btn-secondary paints white on #1c8de3 at 3.52:1. Darkening the fill rather than
   dimming the label keeps it legible without making the button look disabled.

   ⚠️ SCOPED TO DARK ONLY. Both variants already meet AA in the light theme, and an
   unscoped fix would change every light screen to repair two dark ones. */
[data-bs-theme="dark"] .erp-admin .btn-light {
    background-color: var(--erp-subtle);
    border-color: var(--erp-field-border);
    color: var(--erp-text);
}
[data-bs-theme="dark"] .erp-admin .btn-light:hover {
    background-color: var(--erp-surface);
    border-color: var(--erp-field-border);
    color: var(--erp-text);
}
[data-bs-theme="dark"] .erp-admin .btn-secondary {
    background-color: #12699f;
    border-color: #12699f;
    color: #fff;
}
[data-bs-theme="dark"] .erp-admin .btn-secondary:hover {
    background-color: #0f587f;
    border-color: #0f587f;
    color: #fff;
}
.erp-admin .nav-tabs .nav-link { color: var(--erp-muted); }
.erp-admin .nav-tabs .nav-link.active { color: var(--erp-purple); background-color: var(--erp-surface); }
.erp-admin .table-neo .id-link { color: var(--erp-blue); }
.erp-admin .table :is(.cell-sub,.mkt-sub,.mp-sub,.mu-sub,.mkt-geo,.mkt-nophoto) { color: var(--erp-muted); }
.erp-admin .table .mkt-nophoto-warn { color: var(--erp-caution); background: color-mix(in srgb, var(--erp-caution) 8%, var(--erp-surface)); border-color: var(--erp-caution); }
.erp-admin .slot-empty { color: var(--erp-muted); }
.erp-admin :is(.opd-step.primary,.api-chip-primary,.apc-pill-blue) { color: var(--erp-purple); background: color-mix(in srgb, var(--erp-purple) 10%, var(--erp-surface)); border-color: color-mix(in srgb, var(--erp-purple) 30%, var(--erp-surface)); }
.erp-admin .api-chip-code-missing { color: var(--erp-negative); }
.erp-admin .stat-fig .stat-label { color: var(--erp-muted); }
.erp-admin :is(.req-section-title,.req-row-label,.req-reject-label) { color: var(--erp-muted); }
.erp-admin .req-row-value { color: var(--erp-text); }
.erp-admin .req-row-icon { color: var(--erp-caution); }
.erp-admin .op-row .op-title, .erp-admin .sw-name, .erp-admin .sw-sub-name { color: var(--erp-text); }
.erp-admin .op-row .op-ico, .erp-admin .mp-bulkbar { background: var(--erp-subtle); color: var(--erp-muted); border-color: var(--erp-border); }
.erp-admin .sw-card { background: var(--erp-surface); border-color: var(--erp-border); }
.erp-admin .sw-card.is-off { background: color-mix(in srgb, var(--erp-negative) 6%, var(--erp-surface)); border-color: var(--erp-negative); }
.erp-admin .sw-card.sw-unwired { background: var(--erp-subtle); }
.erp-admin .sw-reason, .erp-admin .sw-card.sw-unwired .sw-name { color: var(--erp-muted); }
.erp-admin .sw-sub { border-color: var(--erp-border); }
.erp-admin .fraud-alert-danger { color: var(--erp-text); background: color-mix(in srgb, var(--erp-negative) 8%, var(--erp-surface)); border-color: var(--erp-negative); }
.erp-admin .fraud-alert-warning { color: var(--erp-text); background: color-mix(in srgb, var(--erp-caution) 8%, var(--erp-surface)); border-color: var(--erp-caution); }
.erp-admin .fraud-alert-danger > i { color: var(--erp-negative); }
.erp-admin .fraud-alert-warning > i { color: var(--erp-caution); }
.erp-admin .balance-command .nav-link { color: var(--erp-muted); }
.erp-admin .balance-command .nav-link.active { color: var(--erp-text); background: var(--erp-surface); }
.erp-admin .balance-note { color: var(--erp-muted); background: var(--erp-subtle); border-color: var(--erp-border); }
.erp-admin .balance-toolbar { background: var(--erp-subtle); border-color: var(--erp-border); }
.erp-admin .balance-primary { color: var(--erp-text); }
.erp-admin .balance-meta { color: var(--erp-muted); }
.erp-admin .rcpt .muted, .erp-admin .stat-tile .stat-exact { color: var(--erp-muted); }
.erp-admin .rcpt .box, .erp-admin .rcpt .tot td { border-color: var(--erp-border); }
.erp-admin .rcpt .box > .hd { background: var(--erp-subtle); color: var(--erp-text); border-color: var(--erp-border); }
.erp-admin .onboard-steps .nav-link { color: var(--erp-muted); }
.erp-admin .onboard-steps .nav-link.active { color: var(--erp-blue); border-bottom-color: var(--erp-blue); }
.erp-admin .nav-pills:not(.onboard-steps) .nav-link.active { color: var(--erp-purple); background: color-mix(in srgb, var(--erp-purple) 10%, var(--erp-surface)); }
.erp-admin .table-danger { --erp-row-tone: var(--erp-negative); }
.erp-admin .table-warning { --erp-row-tone: var(--erp-caution); }
.erp-admin .table-success { --erp-row-tone: var(--erp-positive); }
.erp-admin .table-info { --erp-row-tone: var(--erp-info); }
.erp-admin :is(.table-danger,.table-warning,.table-success,.table-info) {
    --theme-table-bg: color-mix(in srgb, var(--erp-row-tone) 8%, var(--erp-surface));
    --theme-table-striped-bg: color-mix(in srgb, var(--erp-row-tone) 12%, var(--erp-surface));
    --theme-table-hover-bg: color-mix(in srgb, var(--erp-row-tone) 14%, var(--erp-surface));
    --theme-table-color: var(--erp-text);
    --theme-table-striped-color: var(--erp-text);
    --theme-table-hover-color: var(--erp-text);
    --theme-table-border-color: var(--erp-border);
}
[data-bs-theme="dark"] .erp-admin .badge.bg-white { background-color: var(--erp-surface) !important; }
[data-bs-theme="dark"] .erp-admin :is(.bg-light,.table-light) { background-color: var(--erp-subtle) !important; --theme-table-bg: var(--erp-subtle); --theme-table-color: var(--erp-text); }
@media print {
    [data-bs-theme="dark"] .erp-admin .rcpt { --erp-text: #222; --erp-muted: #555; --erp-subtle: #f4f4f4; --erp-border: #ccc; color: #222; background: white; }
}

@media (max-width: 767.98px) {
    .erp-admin .content-page > .container-fluid { padding: 12px; }
    .erp-admin .card { --theme-card-spacer-x: 12px; --theme-card-spacer-y: 12px; }
    .erp-admin .card-header,
    .erp-admin .card-footer { padding: 10px 12px; }
    .erp-admin .card-header form,
    .erp-admin .card-header > .d-flex { flex-wrap: wrap; max-width: 100%; }
    .erp-admin .card-header input[data-dt-kind="search"] { flex: 1 1 140px; }
    .erp-admin .card-header select[data-dt-kind="length"] { flex: 0 1 auto; }
    .erp-admin .filter-card .row { --theme-gutter-x: 12px; --theme-gutter-y: 10px; }
    .erp-admin .modal-dialog { margin: 10px; }
    .erp-admin .footer .container-fluid { padding: 8px 12px; }
}
@media (max-width: 575.98px) {
    .erp-auth .auth-box .card.p-4 { padding: 20px !important; }
    .erp-auth .auth-box .auth-brand.px-4 { padding-left: 20px !important; padding-right: 20px !important; }
    .erp-admin .row > .col-4:has(> .stat-tile) { flex-basis: 50%; width: 50%; }
    .erp-admin .card-header > .d-flex { width: 100%; }
    .erp-admin .filter-card .filter-actions .btn { flex: 1 1 auto; }
    .erp-admin .stat-tile .stat-body { padding: 10px; }
    .erp-admin .stat-tile .stat-icon { top: 10px; right: 10px; width: 26px; height: 26px; font-size: 15px; }
    .erp-admin .stat-tile .stat-label { padding-right: 30px; }
    .erp-admin .badge:not(td .badge),
    .erp-admin .pill:not(td .pill) { white-space: normal; overflow-wrap: anywhere; text-align: start; }
    .erp-admin .dt-container .dt-layout-row:not(.dt-layout-table) { flex-wrap: wrap; gap: 8px; }
    .erp-admin .dt-container .dt-layout-cell { min-width: 0; }
    .erp-admin .btn-group:not(.table .btn-group) { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .erp-admin .btn,
    .erp-admin .stat-tile,
    .erp-admin .side-nav-link { transition: none; }
}
@media (max-width: 400px) {
    .erp-admin .stat-tile .stat-icon { display: none; }
    .erp-admin .stat-tile .stat-label { padding-right: 0; overflow-wrap: normal; }
}

/* October ERP review: readable details within the space each card owns. */
.erp-admin { --bs-font-monospace: ui-monospace, SFMono-Regular, Consolas, monospace; --bs-primary-text-emphasis: var(--erp-purple); --bs-link-color: var(--erp-blue); }
.erp-admin .filter-card .form-label { font-size: 12px; letter-spacing: .01em; text-transform: none; }
.erp-admin .alert { line-height: 1.65; }
.erp-admin .alert > .d-flex { flex-wrap: wrap; gap: 8px; }
/* Wizard actions move onto a new row instead of squeezing button labels. */
.erp-admin form .card-footer.d-flex,
.erp-admin form .card-footer.d-flex > .d-flex { flex-wrap: wrap; }
.erp-admin form .card-footer.d-flex .btn { flex-shrink: 0; overflow-wrap: normal; }
/* Keep dialogs distinct: the vendor's dark theme makes its backdrop pale grey. */
.erp-admin .modal-backdrop,
.erp-admin .offcanvas-backdrop {
    --theme-backdrop-bg: #0b1220;
    --theme-backdrop-opacity: .65;
    background-color: #0b1220;
}
.erp-admin .table .u-amt { white-space: nowrap; overflow-wrap: normal; }
/* A long memo must not add a screenful of width to every wallet ledger. */
.erp-admin :is(#main-ledger-table,#aeps-ledger-table) tbody td:nth-child(6) { min-width: 160px; max-width: 220px; white-space: normal; overflow-wrap: anywhere; }
.erp-admin :is(#main-ledger-table,#aeps-ledger-table) tbody td:nth-child(7),
.erp-admin #credit-ledger-table tbody td:nth-child(6) { min-width: 220px; max-width: 320px; white-space: normal; overflow-wrap: anywhere; }
.erp-admin :is(#main-ledger-table,#aeps-ledger-table,#credit-ledger-table) tbody td:last-child { min-width: 140px; max-width: 200px; white-space: normal; }
/* Distinguish the loaded slice's search count from the full server ledger total. */
.erp-admin .tab-pane:has(> .card-footer) .dt-container:has(#main-ledger-table,#aeps-ledger-table,#credit-ledger-table) .dt-info::before { content: "On this page · "; }
/* Full navigation labels in the expanded sidebar; condensed behavior is unchanged. */
.erp-admin .table .btn-icon-label,
.erp-admin .card-header .btn-icon-label[data-dt-kind="download"] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; min-width: 34px; height: 34px; min-height: 34px;
    padding: 0; font-size: 0 !important; line-height: 1; flex-shrink: 0;
}
.erp-admin .table .btn-icon-label > i,
.erp-admin .card-header .btn-icon-label[data-dt-kind="download"] > i { font-size: 17px !important; line-height: 1; margin: 0 !important; }
/* A row action takes the house icon-button size (.act-btns .btn-icon: 30px, 15px icon) at
   every width, so it lines up with the 30px icon buttons beside it in the same cell. */
.erp-admin .table .btn-icon-label { width: 30px; min-width: 30px; height: 30px; min-height: 30px; }
.erp-admin .table .btn-icon-label > i { font-size: 15px !important; }
/* Notifications: the message preview wraps inside its 360px cell instead of running under the
   Status pill, which keeps its "View full message" button inside the cell. !important beats
   the td:has(> .btn) nowrap rule above. */
.erp-admin #notifications-table > tbody > tr > td.notif-body-cell { white-space: normal !important; min-width: 300px; }
/* KYC queue: the larger shared cell type made the no-wrap Subject column push Review past the
   card edge at 1366px. 12px type and 10px side padding keep every column inside the card. */
.erp-admin #kyc-table > tbody > tr > td { font-size: 12px; }
.erp-admin #kyc-table > thead > tr > th,
.erp-admin #kyc-table > tbody > tr > td { padding-left: 10px !important; padding-right: 10px !important; }
/* KYC review page (owner: keep the KYC layout): its identity and checks tables keep the
   original uppercase 11px headers, matching their uppercase row labels, and the original
   cell spacing. */
.erp-admin :is(#kyc-identity-copies, #kyc-checks) .table > thead > tr > th { font-size: 11px; letter-spacing: .03em; text-transform: uppercase; }
.erp-admin :is(#kyc-identity-copies, #kyc-checks) .table > tbody > tr > :is(td, th) { padding: 9px 12px; font-size: 12px; }
[data-sidenav-size="default"] .erp-admin .sidenav-menu .menu-text { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
@media (max-width: 991.98px) {
    /* Keep the scrolled row in place and present its actions within the viewport. Only below
       992px, where the table scrolls: wider, the menu stays under the row that opened it. */
    .erp-admin #vaTableWrap.va-menu-open { overflow: auto; }
    .erp-admin #vaTableWrap .dropdown-menu.show {
        position: fixed !important;
        inset: auto 16px 16px auto !important;
        transform: none !important;
        width: 240px;
        max-width: calc(100vw - 32px);
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
        padding: 8px;
        border: 1px solid var(--erp-border);
        border-radius: 10px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, .22);
        background: var(--erp-surface);
    }
    .erp-admin #vaTableWrap .dropdown-item { min-height: 40px; border-radius: 6px; white-space: normal; }
}
@media (max-width: 575.98px) {
    .erp-admin .card-header .btn-icon-label[data-dt-kind="download"] { width: 38px; min-width: 38px; height: 38px; }
    .erp-admin .pagination .page-link { min-height: 38px; min-width: 36px; }
    /* Narrower DataTables page buttons (same 38px tap height), so a phone pager keeps its
       page numbers: seven buttons fit the pager box again. */
    .erp-admin div.dt-container .dt-paging .page-link { min-width: 32px; padding-left: 4px; padding-right: 4px; }
    .erp-admin .card-footer:has(.pagination,[data-ajax-link]) { align-items: flex-start !important; }
}