/* ------------------------------------------------------------------
   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 — was one long unbroken wall of tables/dropdowns with only
   <hr> as separation, making the page read as cluttered with no hierarchy
   (owner: "fix that ui also looking very worst"). Each logical group now
   sits in its own bordered card-within-a-card, closer in spacing to how a
   dashboard groups widgets than a single continuous settings form. */
.vas-providers-body .vas-section {
    background: #fafbfd;
    border: 1px solid #eef1f6;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.vas-providers-body .vas-section-last { margin-bottom: 1rem; }
.vas-providers-body .vas-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; }
.vas-providers-body .vas-section-title { font-weight: 600; color: #1f2a3d; margin-bottom: .5rem; }
.vas-providers-body .vas-table thead th { background: #f4f6fa; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #6b7488; border-bottom: none; }
.vas-providers-body .vas-table tbody tr:not(:last-child) td { border-bottom: 1px solid #eef1f6; }
.vas-providers-body details summary { cursor: pointer; user-select: none; }
.vas-providers-body details summary:hover { color: #2f6bd6; }
.vas-providers-body .vas-footnote { border-top: 1px solid #eef1f6; padding-top: .9rem; margin-bottom: 0; }

/* 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;
}