/* =====================================================================
   Project look for the Admin, Distributor and SubDistributor panels
   (linked in the three layouts and in _LoginLayout).
   - Every standard page gets the Member Manager look: gradient glass
     header with an icon tile, white card, light table header.
   - Pop-ups and the login box: glass look.
   Button colours and designs are the original project ones.
   ===================================================================== */

/* ---------- Page background: plain, formal ---------- */
body.app .app-content {
    background: #f3f4f9;
}

/* Keep the page from scrolling sideways; wide tables scroll inside .table-responsive */
body.app .app-content {
    overflow-x: hidden;
    min-width: 0;
}

/* ---------- Cards: clean white (same as Member Manager) ---------- */
body.app .app-content .card {
    background: #fff;
    border: none !important;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(30, 34, 90, .08);
}

body.app .app-content .card > .card-header {
    position: relative;
}

/* =====================================================================
   Member Manager header on every standard page
   (pages that have their own design use a "*-page" section class and
   are not touched: mm-page, em-page, rp-page, db-page, sbx-page, ra-page)
   ===================================================================== */
body.app .app-content section.section:not([class*="-page"]) .card {
    overflow: hidden;
}

body.app .app-content section.section:not([class*="-page"]) .card > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 0;
    background: linear-gradient(135deg, #3b3fb6 0%, #5458b3 60%, #7b5cd6 100%);
    border: none;
    padding: 18px 22px;
}

/* Any title or text in the header is white on the gradient */
body.app .app-content section.section:not([class*="-page"]) .card > .card-header,
body.app .app-content section.section:not([class*="-page"]) .card > .card-header h1,
body.app .app-content section.section:not([class*="-page"]) .card > .card-header h2,
body.app .app-content section.section:not([class*="-page"]) .card > .card-header h3,
body.app .app-content section.section:not([class*="-page"]) .card > .card-header h5,
body.app .app-content section.section:not([class*="-page"]) .card > .card-header h6,
body.app .app-content section.section:not([class*="-page"]) .card > .card-header label {
    color: #fff;
    margin-bottom: 0;
}

/* Glossy glass shine on the header */
body.app .app-content section.section:not([class*="-page"]) .card > .card-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
    pointer-events: none;
}

body.app .app-content section.section:not([class*="-page"]) .card > .card-header > * {
    position: relative;
    z-index: 1;
}

/* Title left, buttons right */
body.app .app-content section.section:not([class*="-page"]) .card > .card-header > h4 {
    order: 1;
    display: flex;
    align-items: center;
    margin: 0;
    color: #fff;
    font-size: 19px;
    font-weight: 600;
}

body.app .app-content section.section:not([class*="-page"]) .card > .card-header > .float-right,
body.app .app-content section.section:not([class*="-page"]) .card > .card-header > h4 > .float-right,
body.app .app-content section.section:not([class*="-page"]) .card > .card-header > h4 > a[style*="float"] {
    order: 2;
    float: none !important;
    margin-left: auto;
}

body.app .app-content section.section:not([class*="-page"]) .card > .card-header > h4 > a[style*="float"] {
    margin-left: 16px;
}

/* Title takes the free space so a balance / buttons can sit on the right */
body.app .app-content section.section:not([class*="-page"]) .card > .card-header > h4 {
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px 0;
}

/* Wallet / stock balance shown in the header: white glass pill on the right */
body.app .app-content .card-header .header-balance {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 12px -6px rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* AFN (Afghani) currency tag in the header balance */
body.app .app-content .card-header .header-balance .cur {
    background: #ffe08a;
    color: #3b3fb6;
}

@media (max-width: 575px) {
    body.app .app-content .card-header .header-balance {
        margin-left: 0;
        font-size: 12.5px;
    }
}

/* Any other box of buttons in the header (for example Active / Deactive) goes to the right */
body.app .app-content section.section:not([class*="-page"]) .card > .card-header > div:not(.float-right) {
    order: 2;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Glass icon tile in front of the title */
body.app .app-content section.section:not([class*="-page"]) .card > .card-header > h4::before {
    content: "\f0ce";
    font-family: FontAwesome;
    font-weight: normal;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 14px;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(145deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .1));
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 6px 14px -4px rgba(0, 0, 0, .35);
}

/* Header buttons (Back, Pdf, CSV, Xlxs, Add ...): white with indigo text */
body.app .app-content section.section:not([class*="-page"]) .card > .card-header .btn {
    background: #fff !important;
    color: #3b3fb6 !important;
    border: none !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    padding: 7px 14px;
    margin: 2px 0 2px 6px !important;
    box-shadow: 0 4px 12px rgba(10, 21, 119, .25);
    width: auto;
    height: auto;
}

body.app .app-content section.section:not([class*="-page"]) .card > .card-header .btn:hover {
    background: #f1f2ff !important;
}

/* Header Active / Deactive buttons keep their meaning: green / red */
body.app .app-content section.section:not([class*="-page"]) .card > .card-header .btn.btn-success {
    background: #16a34a !important;
    color: #fff !important;
}

body.app .app-content section.section:not([class*="-page"]) .card > .card-header .btn.btn-danger {
    background: #dc2626 !important;
    color: #fff !important;
}

body.app .app-content section.section:not([class*="-page"]) .card > .card-header .btn.btn-success:hover {
    background: #12833c !important;
}

body.app .app-content section.section:not([class*="-page"]) .card > .card-header .btn.btn-danger:hover {
    background: #b91c1c !important;
}

@media (max-width: 575px) {
    body.app .app-content section.section:not([class*="-page"]) .card > .card-header {
        padding: 14px 16px;
    }

    body.app .app-content section.section:not([class*="-page"]) .card > .card-header > h4 {
        font-size: 16px;
    }

    body.app .app-content section.section:not([class*="-page"]) .card > .card-header > h4::before {
        width: 36px;
        height: 36px;
        font-size: 15px;
        margin-right: 10px;
    }
}

/* Header icon badge: glass tile */
body.app .mm-header-icon,
body.app .app-content .card-header .fa-2x {
    background: linear-gradient(145deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .1)) !important;
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 6px 14px -4px rgba(0, 0, 0, .35);
}

/* Buttons: the original project button design is kept (no glass/3D override here) */

/* ---------- Search buttons: same design on every page ----------
   (class "btn-search" is on every Search button of the project) */
body.app .btn-search {
    background: linear-gradient(135deg, #3b3fb6, #5458b3) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px;
    font-weight: 600;
    min-height: 40px;
    padding: 8px 22px;
    box-shadow: 0 4px 12px -4px rgba(59, 63, 182, .55);
    transition: box-shadow .15s ease, filter .15s ease;
}

body.app .btn-search:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 16px -4px rgba(59, 63, 182, .6);
}

/* Search icon in front of the text (skipped when the button already has an icon) */
body.app .btn-search:not(:has(.fa))::before {
    content: "\f002";
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 6px;
}

/* ---------- Reset buttons: same white design on every page ----------
   (id="btnreset", type="reset", and the other reset buttons of the project) */
body.app #btnreset,
body.app button[type="reset"].btn,
body.app #shiftDownlineReset,
body.app #resetBtn {
    min-height: 40px;
    padding: 8px 22px;
    background: #fff !important;
    color: #4a4e7a !important;
    border: 1px solid #d9dbee !important;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(30, 34, 90, .08);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body.app #btnreset:hover,
body.app button[type="reset"].btn:hover,
body.app #shiftDownlineReset:hover,
body.app #resetBtn:hover {
    background: #f4f5fc !important;
    border-color: #c3c6e6 !important;
    color: #3b3fb6 !important;
    box-shadow: 0 4px 12px rgba(30, 34, 90, .12);
}

/* Undo icon in front of the text (skipped when the button already has an icon) */
body.app #btnreset:not(:has(.fa))::before,
body.app button[type="reset"].btn:not(:has(.fa))::before,
body.app #shiftDownlineReset:not(:has(.fa))::before,
body.app #resetBtn:not(:has(.fa))::before {
    content: "\f0e2";
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 6px;
}

/* ---------- Textboxes, dropdowns and other input tools ----------
   Glass fields with an inset shadow, a soft hover and a glowing focus ring.
   Height and padding are not changed so every layout keeps its size. */
body.app .form-control,
body.app select.form-control,
body.app textarea.form-control {
    background-color: rgba(255, 255, 255, .9);
    border: 1px solid rgba(150, 156, 205, .5);
    border-radius: 8px;
    color: #2d2f5a;
    box-shadow:
        inset 0 2px 4px rgba(30, 34, 90, .08),
        0 1px 0 rgba(255, 255, 255, .9);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

body.app .form-control:hover:not(:disabled):not([readonly]) {
    border-color: rgba(84, 88, 179, .65);
}

body.app .form-control:focus {
    outline: none;
    background-color: #fff;
    border-color: #5458b3;
    color: #1f2150;
    box-shadow:
        inset 0 2px 4px rgba(30, 34, 90, .05),
        0 0 0 3px rgba(84, 88, 179, .2),
        0 6px 14px -6px rgba(84, 88, 179, .45);
}

body.app .form-control::placeholder {
    color: #9a9fc0;
    opacity: 1;
}

/* Read-only / disabled fields look flat and grey */
body.app .form-control:disabled,
body.app .form-control[readonly] {
    background-color: rgba(236, 238, 248, .9);
    color: #6b7094;
    box-shadow: inset 0 1px 2px rgba(30, 34, 90, .06);
}

/* Fields joined with an icon box keep straight inner corners */
body.app .input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body.app .input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Icon box in front of a field (calendar, search, etc.) */
body.app .input-group-addon,
body.app .input-group-text {
    background: linear-gradient(180deg, #ffffff, #eceefa);
    border: 1px solid rgba(150, 156, 205, .5);
    color: #5458b3;
    box-shadow: inset 0 1px 0 #fff;
}

body.app .input-group > .input-group-addon:first-child,
body.app .input-group-prepend > .input-group-text {
    border-radius: 8px 0 0 8px;
    border-right: none;
}

body.app .input-group:focus-within .input-group-addon,
body.app .input-group:focus-within .input-group-text {
    border-color: #5458b3;
    color: #3b3fb6;
}

/* Field labels */
body.app .app-content label,
body.app .modal label {
    color: #34375f;
    font-weight: 500;
}

body.app .app-content .col-form-label {
    font-weight: 600;
}

/* Checkboxes and radio buttons in the theme colour */
body.app input[type="checkbox"],
body.app input[type="radio"] {
    accent-color: #5458b3;
}

/* File chooser */
body.app input[type="file"].form-control {
    padding-top: 5px;
}

body.app input[type="file"]::-webkit-file-upload-button,
body.app input[type="file"]::file-selector-button {
    background: linear-gradient(180deg, #ffffff, #e6e8f7);
    border: 1px solid rgba(150, 156, 205, .6);
    border-radius: 6px;
    color: #3b3fb6;
    padding: 3px 10px;
    margin-right: 8px;
    cursor: pointer;
}

/* Select2 dropdowns (look like the other fields) */
body.app .select2-container--default .select2-selection--single,
body.app .select2-container--default .select2-selection--multiple {
    background-color: rgba(255, 255, 255, .9);
    border: 1px solid rgba(150, 156, 205, .5);
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(30, 34, 90, .08);
    transition: border-color .2s ease, box-shadow .2s ease;
}

body.app .select2-container--default.select2-container--focus .select2-selection--single,
body.app .select2-container--default.select2-container--focus .select2-selection--multiple,
body.app .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #5458b3;
    box-shadow: 0 0 0 3px rgba(84, 88, 179, .2);
}

body.app .select2-dropdown {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(150, 156, 205, .45);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 14px 30px -10px rgba(20, 24, 70, .4);
}

body.app .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #5458b3;
}

/* Date picker pop-up */
body .datepicker.dropdown-menu,
body .daterangepicker {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(150, 156, 205, .4);
    border-radius: 12px;
    box-shadow: 0 16px 34px -10px rgba(20, 24, 70, .45);
    padding: 6px;
}

body .datepicker table tr td.day:hover,
body .datepicker table tr td.focused {
    background: #eceefa;
    border-radius: 6px;
}

body .datepicker table tr td.active,
body .datepicker table tr td.active:hover,
body .datepicker table tr td.today {
    border-radius: 6px;
}

/* Search / filter panels */
body.app .mm-search {
}

body.app .mm-search {
    background: rgba(247, 248, 253, .7) !important;
    border: 1px solid rgba(255, 255, 255, .8) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 12px -8px rgba(30, 34, 90, .25);
}

/* ---------- Modals: glass pop-up ---------- */
body.app .modal-content {
    /* OLD: background: rgba(255, 255, 255, .86); - the page behind showed through and long text was hard to read */
    background: rgba(255, 255, 255, .98);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 24px 50px -12px rgba(20, 24, 70, .45);
}

body.app .modal-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
    border-bottom: 1px solid rgba(160, 166, 210, .3);
    border-radius: 14px 14px 0 0;
}

/* ---------- Pop-ups with long text from the server (operator response, comments, logs) ----------
   Long words / XML / codes wrap inside the pop-up instead of running out of it */
body.app .modal-body {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* "View Comment" pop-ups: the operator response is shown in a clear code box */
/* (not for the receipt pop-up, which also uses the id imgrec_1) */
body.app div#imgrec:not(:has(.receipt-container)),
body.app div#imgrec_1:not(:has(.receipt-container)):not(.receipt-container) {
    margin: 16px;
    padding: 14px 16px;
    max-height: 60vh;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    /* word-break: break-all;  OLD - split words in the middle */
    word-break: normal;
    tab-size: 2;
    text-align: left;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.65;
    color: #1f2150;
    background: #f4f5ff;
    border: 1px solid #d9dcf3;
    border-left: 4px solid #7b5cd6;
    border-radius: 10px;
}

/* Copy button in the header of the "View Comment" pop-up (added by Scripts/js/comment-view.js) */
body.app .modal-header .cv-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 12px;
    padding: 6px 16px;
    border: 1px solid #3b3fb6;
    border-radius: 20px;
    background: #fff;
    color: #3b3fb6;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 8px -4px rgba(59, 63, 182, .5);
    transition: background-color .15s ease, color .15s ease;
}

body.app .modal-header .cv-copy:hover {
    background: #3b3fb6;
    color: #fff;
}

body.app .modal-header .cv-copy.copied {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

body.app .modal-header:has(.cv-copy) {
    display: flex;
    align-items: center;
}

body.app .modal-header:has(.cv-copy) .close {
    margin: 0;
}

/* Wider and centred pop-up for these long responses */
body.app .modal-dialog:has(div#imgrec),
body.app .modal-dialog:has(div#imgrec_1) {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 575px) {
    body.app div#imgrec:not(:has(.receipt-container)),
    body.app div#imgrec_1:not(:has(.receipt-container)):not(.receipt-container) {
        margin: 10px;
        font-size: 11.5px;
    }
}

/* ---------- Receipt pop-up (showReceiptModal in Admin.js / Distributor.js / Subdistributor.js) ---------- */
body.app .modal-body:has(> .stm-receipt) {
    background: #f3f4f9;
    padding: 20px;
}

body.app .receipt-container.stm-receipt {
    max-width: 460px;
    margin: 0 auto;
    padding: 0 0 20px;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px -12px rgba(30, 34, 90, .35);
    font-family: "Segoe UI", Arial, sans-serif;
    color: #2d2f5a;
}

/* Header with the logo on the brand gradient */
body.app .stm-receipt .stm-rc-head {
    background: linear-gradient(135deg, #3b3fb6 0%, #5458b3 60%, #7b5cd6 100%);
    padding: 20px 20px 28px;
    text-align: center;
}

body.app .stm-receipt .stm-rc-logo {
    display: block;
    height: 64px;
    width: 64px;
    object-fit: contain;
    margin: 0 auto 8px;
    padding: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

body.app .stm-receipt .stm-rc-title {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .3px;
}

/* "Successful" status */
body.app .stm-receipt .stm-rc-status {
    width: max-content;
    margin: -14px auto 0;
    padding: 6px 16px;
    border-radius: 20px;
    background: #16a34a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 12px -4px rgba(22, 163, 74, .7);
    position: relative;
}

body.app .stm-receipt .stm-rc-tick {
    margin-right: 4px;
}

body.app .stm-receipt .stm-rc-msg {
    margin: 16px 22px 6px;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: #45496f;
}

/* Details table */
body.app .stm-receipt .stm-rc-table {
    width: calc(100% - 44px);
    margin: 10px 22px 0;
    border-collapse: collapse;
    font-size: 13.5px;
}

body.app .stm-receipt .stm-rc-table td {
    padding: 10px 4px;
    border-bottom: 1px dashed #dfe2f1;
}

body.app .stm-receipt .stm-rc-table td:first-child {
    color: #6b7094;
}

body.app .stm-receipt .stm-rc-table td:last-child {
    text-align: right;
    font-weight: 700;
    color: #1f2150;
}

body.app .stm-receipt .stm-rc-foot {
    margin: 16px 22px 0;
    text-align: center;
    font-size: 12px;
    color: #8a8fb3;
}

/* Download button */
body.app .stm-receipt .print-button-container {
    text-align: center;
    margin-top: 16px;
}

body.app .stm-receipt #printButton {
    padding: 9px 26px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #16a34a, #12833c);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 14px -6px rgba(22, 163, 74, .8);
}

body.app .stm-receipt #printButton:hover {
    filter: brightness(1.07);
}

body.app .stm-receipt .hide {
    display: none;
}

/* ---------- "Change Mobile Number" pop-up (Distributor / SubDistributor member manager) ----------
   Wider pop-up; each mobile number is a card row: number | operator | primary | buttons */
body.app #cMobileModal .modal-dialog {
    max-width: 860px;
}

body.app #cMobileModal .modal-body .form-group.row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #e6e8f2;
    border-radius: 12px;
    background: #fafbff;
}

body.app #cMobileModal .modal-body .form-group.row > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}

/* Mobile number and operator take the free space */
body.app #cMobileModal .modal-body .form-group.row > .col-md-4 {
    flex: 1 1 190px;
}

body.app #cMobileModal .modal-body .form-group.row > .col-md-3 {
    flex: 1 1 190px;
}

body.app #cMobileModal .modal-body .form-control {
    height: 40px;
}

/* "Primary" radio with its label */
body.app #cMobileModal .modal-body .form-group.row > .col-md-1:has(input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #dcdef7;
    border-radius: 20px;
    background: #fff;
    white-space: nowrap;
}

body.app #cMobileModal .modal-body .form-group.row > .col-md-1:has(input[type="radio"])::after {
    content: "Primary";
    font-size: 12.5px;
    font-weight: 600;
    color: #3b3fb6;
}

body.app #cMobileModal .modal-body input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Update / ADD / Remove buttons */
body.app #cMobileModal .modal-body .btn-action {
    min-width: 84px;
    height: 38px;
    padding: 0 14px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px;
    font-weight: 600;
    color: #fff !important;
    box-shadow: 0 4px 10px -4px rgba(20, 24, 70, .45);
}

body.app #cMobileModal .modal-body .btn-action.btn-primary { background: #3b3fb6 !important; }
body.app #cMobileModal .modal-body .btn-action.btn-danger  { background: #dc2626 !important; }

body.app #cMobileModal .modal-body .text-danger {
    display: block;
    font-size: 11.5px;
    margin-top: 2px;
}

/* Desktop: fixed columns so every row lines up, whatever buttons it has
   (number | operator | primary | Add or Update | Remove) */
@media (min-width: 768px) {
    body.app #cMobileModal .modal-body .form-group.row {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 132px 100px 100px;
        column-gap: 10px;
    }

    body.app #cMobileModal .modal-body .form-group.row > [class*="col-"] {
        grid-row: 1;
        width: 100%;
        min-width: 0;
    }

    body.app #cMobileModal .modal-body .form-group.row > .col-md-4 { grid-column: 1; }
    body.app #cMobileModal .modal-body .form-group.row > .col-md-3 { grid-column: 2; }
    body.app #cMobileModal .modal-body .form-group.row > .col-md-1:has(input[type="radio"]) { grid-column: 3; justify-self: start; }
    body.app #cMobileModal .modal-body .form-group.row > .col-md-1:has(button[onclick*="(1,"]),
    body.app #cMobileModal .modal-body .form-group.row > .col-md-1:has(button[onclick*="(2,"]) { grid-column: 4; }
    body.app #cMobileModal .modal-body .form-group.row > .col-md-1:has(button[onclick*="(3,"]) { grid-column: 5; }

    body.app #cMobileModal .modal-body .form-group.row .btn-action {
        width: 100%;
        min-width: 0;
    }
}

/* Small screens: the row wraps, fields full width */
@media (max-width: 767px) {
    body.app #cMobileModal .modal-body .form-group.row {
        flex-wrap: wrap;
    }

    body.app #cMobileModal .modal-body .form-group.row > .col-md-4,
    body.app #cMobileModal .modal-body .form-group.row > .col-md-3 {
        flex: 1 1 100%;
    }
}

/* ---------- "Authority Permissions" pop-up (Admin member manager) ---------- */
body.app #authorityPermissionModal .modal-dialog {
    max-width: 640px;
}

body.app #authorityModalBody {
    padding: 18px 22px;
}

body.app #authorityModalBody .table {
    margin: 0;
    border: 1px solid #e6e8f2 !important;
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 14px;
}

body.app #authorityModalBody .table th {
    text-align: left;
    background: #f1f2fb;
    color: #2d2f5a;
    font-weight: 700;
    border: none !important;
    border-bottom: 2px solid #e2e4f5 !important;
    padding: 12px 16px !important;
}

body.app #authorityModalBody .table td {
    border: none !important;
    border-bottom: 1px solid #eef0f7 !important;
    padding: 10px 16px !important;
    vertical-align: middle;
    color: #2d2f5a;
    font-weight: 600;
}

body.app #authorityModalBody .table tr:last-child td {
    border-bottom: none !important;
}

body.app #authorityModalBody .table tbody tr:hover td {
    background: #fafbff;
}

/* Status column on the right */
body.app #authorityModalBody .table th:last-child,
body.app #authorityModalBody .table td:last-child {
    width: 150px;
    text-align: center;
}

/* Active / Inactive: solid pills with a white dot (same as Member Manager) */
body.app #authorityModalBody .btn-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 100px;
    justify-content: center;
    padding: 5px 16px 5px 26px !important;
    border: none !important;
    border-radius: 20px !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff !important;
    box-shadow: 0 3px 8px -3px rgba(20, 24, 70, .45);
    transition: transform .15s ease, filter .15s ease;
}

body.app #authorityModalBody .btn-action::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

body.app #authorityModalBody .btn-action::after {
    display: none !important;
}

body.app #authorityModalBody .btn-action.btn-success { background: #16a34a !important; }
body.app #authorityModalBody .btn-action.btn-danger  { background: #dc2626 !important; }

body.app #authorityModalBody .btn-action:hover {
    transform: translateY(-1px);
    filter: brightness(.92);
}

/* Cancel button */
body.app #authorityPermissionModal .modal-footer .btn-default {
    background: #fff;
    color: #4a4e7a;
    border: 1px solid #d9dbee;
    border-radius: 8px;
    font-weight: 600;
    min-width: 100px;
}

/* ---------- "Upline Details" pop-up (_PartialTree): upline chain as a timeline ---------- */
body.app #TreeModal .modal-dialog {
    max-width: 520px;
}

body.app #TreeModal #adminUpline {
    position: relative;
    padding: 4px 0 4px 6px;
}

/* Vertical line joining the levels */
body.app #TreeModal #adminUpline::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: linear-gradient(180deg, #3b3fb6, #7b5cd6);
    border-radius: 2px;
}

/* One card per level (Admin, Distributor, Sub-Distributor ...) */
body.app #TreeModal #adminUpline .form-group.row {
    position: relative;
    display: block;
    margin: 0 0 14px 28px;
    padding: 12px 16px;
    border: 1px solid #e6e8f2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px -8px rgba(30, 34, 90, .35);
}

body.app #TreeModal #adminUpline .form-group.row:last-child {
    margin-bottom: 0;
    border-color: #bfe9d3;
    background: #f3fbf7;
}

/* Dot on the line */
body.app #TreeModal #adminUpline .form-group.row::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3b3fb6;
    box-shadow: 0 0 0 4px #e3e5fb;
}

body.app #TreeModal #adminUpline .form-group.row:last-child::before {
    background: #16a34a !important;
    box-shadow: 0 0 0 4px #d6f3e3;
}

/* Level name: label pill */
body.app #TreeModal #adminUpline .col-form-label {
    display: inline-block;
    margin: 0 0 8px;
    padding: 3px 12px;
    border-radius: 20px;
    background: #3b3fb6;
    color: #fff !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Each level its own colour: Admin, Distributor, Sub-Distributor, next levels */
body.app #TreeModal #adminUpline .form-group.row:nth-child(2) .col-form-label { background: #0d9488; }
body.app #TreeModal #adminUpline .form-group.row:nth-child(3) .col-form-label { background: #d97706; }
body.app #TreeModal #adminUpline .form-group.row:nth-child(n+4) .col-form-label { background: #7c3aed; }
body.app #TreeModal #adminUpline .form-group.row:nth-child(2)::before { background: #0d9488; }
body.app #TreeModal #adminUpline .form-group.row:nth-child(3)::before { background: #d97706; }
body.app #TreeModal #adminUpline .form-group.row:nth-child(n+4)::before { background: #7c3aed; }

/* The last card (direct upline) is green */
body.app #TreeModal #adminUpline .form-group.row:last-child .col-form-label {
    background: #16a34a !important;
}

body.app #TreeModal #adminUpline .col-md-12 {
    padding: 0;
    max-width: 100%;
    flex: none;
}

body.app #TreeModal #adminUpline p {
    margin: 0;
    padding: 2px 0;
    font-size: 14px;
    color: #2d2f5a;
    font-weight: 600;
}

body.app #TreeModal #adminUpline p + p {
    color: #6b7094;
    font-weight: 500;
}

/* ---------- "Subscription Response" pop-up (Esale / Iran Topup Report) ---------- */
body.app #subscriptionModal .modal-dialog {
    max-width: 760px;
}

body.app #subscriptionModal .modal-body {
    padding: 18px 22px !important;
}

body.app #subscriptionModal label {
    display: block;
    margin-bottom: 8px;
    color: #2d2f5a;
    font-size: 13px;
    font-weight: 700 !important;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* Operator response: light lavender code box, aligned by Scripts/js/subscription-response.js */
body.app #subscriptionModal #responseText {
    min-height: 230px;
    max-height: 50vh;
    padding: 14px 16px !important;
    border: 1px solid #d9dcf3 !important;
    border-left: 4px solid #7b5cd6 !important;
    border-radius: 10px !important;
    background: #f4f5ff !important;
    color: #1f2150 !important;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    tab-size: 2;
    resize: vertical;
    box-shadow: inset 0 2px 4px rgba(30, 34, 90, .06);
}

/* Copy button on the right of the "Response Text" label (does not cover the text) */
body.app #subscriptionModal #responseText + #copyToClipboardButton,
body.app #subscriptionModal #copyToClipboardButton {
    top: -34px !important;
    right: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px !important;
    border: 1px solid #3b3fb6 !important;
    border-radius: 20px !important;
    background: #fff !important;
    color: #3b3fb6 !important;
    font-size: 12.5px !important;
    font-weight: 700;
    box-shadow: 0 3px 8px -4px rgba(59, 63, 182, .5);
    transition: background-color .15s ease, color .15s ease;
}

body.app #subscriptionModal #copyToClipboardButton:hover {
    background: #3b3fb6 !important;
    color: #fff !important;
}

/* After copying: green "Copied" */
body.app #subscriptionModal #copyToClipboardButton.copied {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}

/* Message: highlighted info box */
body.app #subscriptionModal #responseMessage {
    position: relative;
    margin: 0;
    padding: 12px 14px 12px 42px;
    border: 1px solid #c9e3f7;
    border-left: 4px solid #0284c7;
    border-radius: 10px;
    background: #eef7fd;
    color: #0c4a6e;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

body.app #subscriptionModal #responseMessage::before {
    content: "\f05a";
    font-family: FontAwesome;
    font-weight: normal;
    position: absolute;
    left: 14px;
    top: 12px;
    font-size: 17px;
    color: #0284c7;
}

/* Failed message: red box with a warning icon */
body.app #subscriptionModal #responseMessage.msg-fail {
    border-color: #f6c8c9;
    border-left-color: #dc2626;
    background: #fdecec;
    color: #991b1b;
}

body.app #subscriptionModal #responseMessage.msg-fail::before {
    content: "\f071";
    color: #dc2626;
}

/* Successful message: green box with a tick icon */
body.app #subscriptionModal #responseMessage.msg-ok {
    border-color: #bfe9d3;
    border-left-color: #16a34a;
    background: #e7f8f0;
    color: #065f46;
}

body.app #subscriptionModal #responseMessage.msg-ok::before {
    content: "\f058";
    color: #16a34a;
}

body.app #subscriptionModal #responseMessage:empty {
    display: none;
}

body.app #subscriptionModal #modalOkButton {
    min-width: 110px;
    border-radius: 8px !important;
    font-weight: 600;
}

/* ---------- "Rollback Request" pop-up (Rollback Top Up pages): compact 2-column summary ---------- */
body.app .modal-dialog:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) {
    max-width: 660px;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    padding: 20px 22px;
    background: #f7f8fd;
}

/* the <form> around most fields does not break the grid */
body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-body > form {
    display: contents;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-body .form-group.row {
    display: block;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #e6e8f2;
    border-radius: 10px;
    background: #fff;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-body .form-group.row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: none;
    padding: 0;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-body .col-form-label {
    padding: 0 0 4px;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #6b7094 !important;
}

/* Read-only values shown as plain bold text, not as input boxes */
body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-body .form-control[readonly] {
    height: auto;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #1f2150 !important;
    font-size: 15px;
    font-weight: 700;
}

/* Amount and Deduct Amount stand out */
body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-body #amount,
body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-body #deduct_amount {
    font-size: 18px;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-body #amount {
    color: #16a34a !important;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-body #deduct_amount {
    color: #dc2626 !important;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-body .form-group.row:has(#amount) {
    border-color: #bfe9d3;
    background: #f3fbf7;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-body .form-group.row:has(#deduct_amount) {
    border-color: #f6c8c9;
    background: #fdf2f2;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-footer {
    gap: 8px;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-footer .btn {
    min-width: 110px;
    border-radius: 8px;
    font-weight: 600;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-footer .btn label {
    margin: 0;
    cursor: pointer;
    color: inherit !important;
    font-weight: 600 !important;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-footer .btn-default {
    background: #fff;
    color: #4a4e7a;
    border: 1px solid #d9dbee;
}

/* Accept (green) / Reject (red) / Rollback Complete (green) buttons, with icons */
body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-footer #btnrollback_INProcessA,
body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-footer #btnrollback_Complete {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-footer #btnrollback_INProcessR {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-footer #btnrollback_INProcessA::before,
body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-footer #btnrollback_Complete::before {
    content: "\f00c";
    font-family: FontAwesome;
    margin-right: 6px;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-footer #btnrollback_INProcessR::before {
    content: "\f00d";
    font-family: FontAwesome;
    margin-right: 6px;
}

/* Text inside the buttons: centred, white, no extra space under it */
body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-footer .btn label {
    margin: 0 !important;
    line-height: 1.2;
}

body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-footer .btn:not(.btn-default) label {
    color: #fff !important;
}

@media (max-width: 575px) {
    body.app .modal-content:has(#btnrollback, #btnrollback_INProcessA, #btnrollback_Complete) .modal-body {
        grid-template-columns: 1fr;
    }
}

/* ---------- Top bar and sidebar ---------- */
body.app .main-navbar {
    box-shadow: 0 6px 20px -8px rgba(20, 24, 70, .45);
}

body.app .side-menu__item.active,
body.app .side-menu__item:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .15),
        0 6px 14px -8px rgba(0, 0, 0, .5);
}

/* Toggle switch knob (User Rights page) */
body.app .ra-table .custom-control-label::after {
    background: linear-gradient(180deg, #fff, #e9ebf5) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35) !important;
}

/* ---------- Breadcrumb: formal white pill ---------- */
body.app .app-content .breadcrumb {
    background: #fff;
    border: 1px solid #e6e8f2;
    border-radius: 30px;
    padding: 8px 18px;
    box-shadow: 0 1px 4px rgba(30, 34, 90, .05);
}

/* ---------- Pagination: raised 3D pages ---------- */
body.app .pagination .page-link,
body.app .pagination li > a,
body.app .pagination li > span {
    border-radius: 8px !important;
    margin: 0 2px;
    border: 1px solid rgba(150, 156, 205, .45);
    box-shadow: inset 0 1px 0 #fff, 0 2px 5px -2px rgba(20, 24, 70, .3);
    transition: transform .12s ease;
}

body.app .pagination .page-link:hover,
body.app .pagination li > a:hover {
    transform: translateY(-1px);
}

/* ---------- Dropdown menus (notifications, profile) ---------- */
body.app .dropdown-menu {
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(150, 156, 205, .35);
    border-radius: 12px;
    box-shadow: 0 16px 34px -10px rgba(20, 24, 70, .4);
}

/* ---------- Badges, alerts and tabs ---------- */
body.app .badge {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 4px -1px rgba(0, 0, 0, .25);
}

body.app .app-content .alert {
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 14px -8px rgba(20, 24, 70, .3);
}

body.app .app-content .nav-tabs .nav-link.active,
body.app .app-content .nav-pills .nav-link.active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 12px -6px rgba(20, 24, 70, .45);
}

/* ---------- Scrollbars inside tables and pages ---------- */
body.app ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.app ::-webkit-scrollbar-thumb {
    background: rgba(84, 88, 179, .45);
    border-radius: 8px;
}

body.app ::-webkit-scrollbar-thumb:hover {
    background: rgba(84, 88, 179, .7);
}

body.app ::-webkit-scrollbar-track {
    background: rgba(220, 223, 240, .5);
}

/* =====================================================================
   Login, Forgot Password and OTP pages (_LoginLayout, body.bg-primary):
   glass login box; the page colours stay the same.
   ===================================================================== */
body.bg-primary .single-page .wrapper.wrapper2 {
    background: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 24px 50px -14px rgba(10, 14, 60, .55) !important;
}

/* =====================================================================
   Whole project: forms, filter rows, report pages and data tables
   ===================================================================== */

/* Required-field star */
body.app .asterikco {
    color: #dc2626;
    margin-left: 2px;
}

/* Validation messages */
body.app .field-validation-error,
body.app .text-danger {
    font-size: 12px;
}

/* Sub-Admin Stock Exchange pages (section class "stockx"): same colours as the other pages,
   only an exchange icon in the header (the teal colours were removed on request) */
body.app .app-content section.section.stockx .card > .card-header > h4::before {
    content: "\f0ec";
}

/* ---------- Report / list tables (same look as Member Manager) ---------- */
body.app .app-content .table:not(.walletTable):not(.mm-table) {
    font-size: 13px;
}

body.app .app-content .table:not(.walletTable):not(.mm-table) thead th,
body.app .app-content .table:not(.walletTable):not(.mm-table) tr:first-child > th {
    background: #f1f2fb;
    color: #2d2f5a;
    font-weight: 600;
    white-space: nowrap;
    border: none !important;
    border-bottom: 2px solid #e2e4f5 !important;
    padding: 12px 10px !important;
}

body.app .app-content .table:not(.walletTable):not(.mm-table) td {
    border: none !important;
    border-bottom: 1px solid #eef0f7 !important;
    padding: 11px 10px !important;
    vertical-align: middle;
}

body.app .app-content .table-striped:not(.walletTable):not(.mm-table) tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

body.app .app-content .table:not(.walletTable):not(.mm-table) tbody tr:hover > td {
    background-color: #fafbff;
}

/* =====================================================================
   Table buttons and status labels on every page (same look as Member Manager)
   - Icon buttons (edit, view, on/off ...): 34px rounded squares, solid colour, white icon
   - Text buttons (Active, Blacklisted, Deactivated ...): pills with a white dot
   - Status labels (Success / Failed / Pending / Inprocess): pills with an icon
   ===================================================================== */

/* Keep each cell on one line (dates, transaction ids); wide tables scroll sideways inside their box */
body.app .app-content .table:not(.mm-table):not(.walletTable) td {
    white-space: nowrap;
}

/* ---------- Icon buttons (btn-action or small btn with only an icon, e.g. Blacklist Manager) ---------- */
body.app .app-content .table:not(.mm-table):not(.walletTable) .btn:has(> .fa:only-child) {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    border: none !important;
    font-size: 15px;
    color: #fff !important;
    margin: 2px 2px;
    box-shadow: 0 4px 10px -4px rgba(20, 24, 70, .45);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

body.app .app-content .table:not(.mm-table):not(.walletTable) .btn:has(> .fa:only-child):hover {
    transform: translateY(-1px);
    filter: brightness(.92);
    box-shadow: 0 6px 14px -4px rgba(20, 24, 70, .5);
}

body.app .app-content .table:not(.mm-table):not(.walletTable) .btn:has(> .fa:only-child) > .fa {
    margin: 0 !important;
    transition: transform .2s ease;
}

body.app .app-content .table:not(.mm-table):not(.walletTable) .btn:has(> .fa:only-child):hover > .fa {
    transform: scale(1.15);
}

/* ---------- Text buttons: pills with a white dot ---------- */
body.app .app-content .table:not(.mm-table):not(.walletTable) .btn-action:not(:has(> .fa:only-child)) {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 20px !important;
    border: none !important;
    padding: 5px 14px 5px 24px !important;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .2px;
    color: #fff !important;
    margin: 2px 2px;
    box-shadow: 0 3px 8px -3px rgba(20, 24, 70, .4);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

body.app .app-content .table:not(.mm-table):not(.walletTable) .btn-action:not(:has(> .fa:only-child))::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

body.app .app-content .table:not(.mm-table):not(.walletTable) .btn-action:not(:has(> .fa:only-child)):hover {
    transform: translateY(-1px);
    filter: brightness(.93);
    box-shadow: 0 6px 12px -4px rgba(20, 24, 70, .45);
}

/* No shine effect on small table buttons */
body.app .app-content .table:not(.mm-table):not(.walletTable) .btn-action::after {
    display: none !important;
}

/* Solid colours (same palette as Member Manager) */
body.app .app-content .table:not(.mm-table):not(.walletTable) .btn.btn-primary:is(.btn-action, :has(> .fa:only-child)) { background: #3b3fb6 !important; }
body.app .app-content .table:not(.mm-table):not(.walletTable) .btn.btn-success:is(.btn-action, :has(> .fa:only-child)) { background: #16a34a !important; }
body.app .app-content .table:not(.mm-table):not(.walletTable) .btn.btn-danger:is(.btn-action, :has(> .fa:only-child))  { background: #dc2626 !important; }
body.app .app-content .table:not(.mm-table):not(.walletTable) .btn.btn-warning:is(.btn-action, :has(> .fa:only-child)) { background: #f59e0b !important; }
body.app .app-content .table:not(.mm-table):not(.walletTable) .btn.btn-info:is(.btn-action, :has(> .fa:only-child))    { background: #0891b2 !important; }
body.app .app-content .table:not(.mm-table):not(.walletTable) .btn.btn-secondary:is(.btn-action, :has(> .fa:only-child)) { background: #64748b !important; }

/* Own colour for common report actions (easier to tell apart) */
body.app .app-content .table:not(.mm-table):not(.walletTable) .btn-action.btcview      { background: #0d9488 !important; }  /* view details   - teal   */
body.app .app-content .table:not(.mm-table):not(.walletTable) .btn-action.rdetails     { background: #d97706 !important; }  /* dispute ticket - amber  */
body.app .app-content .table:not(.mm-table):not(.walletTable) .btn-action.sendTopupSMS { background: #2563eb !important; }  /* send SMS       - blue   */
body.app .app-content .table:not(.mm-table):not(.walletTable) .btn-action.btcrec       { background: #7c3aed !important; }  /* receipt        - violet */

/* ---------- Status labels (Success / Failed / Pending / Inprocess ...) ---------- */
body.app .app-content .table .badge {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 1.4;
    color: #fff !important;
    border: none;
}

body.app .app-content .table .badge::before {
    font-family: FontAwesome;
    font-weight: normal;
    font-size: 11px;
    margin-right: 5px;
}

/* Success: green with a tick */
body.app .app-content .table .badge.bg-success,
body.app .app-content .table .badge.badge-success {
    background: #16a34a !important;
    box-shadow: 0 3px 8px -3px rgba(22, 163, 74, .7);
}

body.app .app-content .table .badge.bg-success::before,
body.app .app-content .table .badge.badge-success::before {
    content: "\f00c";
}

/* Failed: red with a cross */
body.app .app-content .table .badge.bg-danger,
body.app .app-content .table .badge.badge-danger {
    background: #dc2626 !important;
    box-shadow: 0 3px 8px -3px rgba(220, 38, 38, .7);
}

body.app .app-content .table .badge.bg-danger::before,
body.app .app-content .table .badge.badge-danger::before {
    content: "\f00d";
}

/* Pending: blue with a clock */
body.app .app-content .table .badge.bg-info,
body.app .app-content .table .badge.badge-info {
    background: #0284c7 !important;
    box-shadow: 0 3px 8px -3px rgba(2, 132, 199, .7);
}

body.app .app-content .table .badge.bg-info::before,
body.app .app-content .table .badge.badge-info::before {
    content: "\f017";
}

/* In process: orange with an hourglass */
body.app .app-content .table .badge.bg-orange,
body.app .app-content .table .badge.bg-warning,
body.app .app-content .table .badge.badge-warning {
    background: #ea580c !important;
    box-shadow: 0 3px 8px -3px rgba(234, 88, 12, .7);
}

body.app .app-content .table .badge.bg-orange::before,
body.app .app-content .table .badge.bg-warning::before,
body.app .app-content .table .badge.badge-warning::before {
    content: "\f252";
}

/* Deactivated / other grey labels: slate with a ban icon */
body.app .app-content .table .badge.bg-secondary,
body.app .app-content .table .badge.badge-secondary {
    background: #64748b !important;
    box-shadow: 0 3px 8px -3px rgba(100, 116, 139, .7);
}

body.app .app-content .table .badge.bg-secondary::before,
body.app .app-content .table .badge.badge-secondary::before {
    content: "\f05e";
}

/* Success Without subscription: recharge OK but subscription pending - violet with tick + clock
   (OLD colour: teal #0e7490 - looked too close to the green Success) */
body.app .app-content .table .badge.bg-partial,
body.app .badge.bg-partial {
    background: #7c3aed !important;
    color: #fff !important;
    box-shadow: 0 3px 8px -3px rgba(124, 58, 237, .7);
    border: 1px dashed rgba(255, 255, 255, .7);
}

body.app .app-content .table .badge.bg-partial::before {
    content: "\f00c";
}

body.app .app-content .table .badge.bg-partial::after {
    content: "\f017";
    font-family: FontAwesome;
    font-weight: normal;
    font-size: 11px;
    margin-left: 6px;
    color: #ffe08a;
}

/* Other labels: indigo */
body.app .app-content .table .badge.bg-primary,
body.app .app-content .table .badge.badge-primary {
    background: #3b3fb6 !important;
    box-shadow: 0 3px 8px -3px rgba(59, 63, 182, .7);
}

/* ---------- Credit / Debit labels in report tables (added by Scripts/js/txn-highlight.js) ---------- */
body.app .txn-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.4;
    color: #fff;
}

body.app .txn-badge .fa {
    font-size: 12px;
}

/* Credit: money in - green */
body.app .txn-credit {
    background: #16a34a;
    box-shadow: 0 3px 8px -3px rgba(22, 163, 74, .7);
}

/* Debit: money out - red */
body.app .txn-debit {
    background: #dc2626;
    box-shadow: 0 3px 8px -3px rgba(220, 38, 38, .7);
}

/* ---------- Plain status words in tables (added by Scripts/js/txn-highlight.js) ---------- */
body.app .st-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.4;
    color: #fff;
    white-space: nowrap;
}

body.app .st-badge .fa {
    font-size: 11px;
}

body.app .st-ok   { background: #16a34a; box-shadow: 0 3px 8px -3px rgba(22, 163, 74, .7); }   /* Accept / Approved / Success */
body.app .st-bad  { background: #dc2626; box-shadow: 0 3px 8px -3px rgba(220, 38, 38, .7); }   /* Reject / Failed / Cancelled */
body.app .st-wait { background: #0284c7; box-shadow: 0 3px 8px -3px rgba(2, 132, 199, .7); }   /* Pending */
body.app .st-proc { background: #ea580c; box-shadow: 0 3px 8px -3px rgba(234, 88, 12, .7); }   /* In process */

/* ---------- User ID / Name / User Type / Balance columns (added by Scripts/js/txn-highlight.js) ---------- */
body.app .usr-id {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #3b3fb6;
    font-weight: 700;
}

body.app .usr-id .fa {
    color: #7b5cd6;
    font-size: 14px;
}

/* Receiver ID: teal */
body.app .usr-id.usr-rid {
    color: #0f766e;
}

body.app .usr-id.usr-rid .fa {
    color: #14b8a6;
}

/* Transaction amount: indigo bold chip */
body.app .usr-amt {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    background: #eef0ff;
    border: 1px solid #d6d9f7;
    color: #3b3fb6;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Zero amounts: muted, no chip */
body.app .usr-zero {
    color: #b3b7d3;
    font-weight: 600;
}

/* Net profit: green with an up arrow, loss red with a down arrow */
body.app .usr-profit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 8px;
    background: #e7f8ef;
    border: 1px solid #bfe9d3;
    color: #047857;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

body.app .usr-profit .fa {
    font-size: 11px;
}

body.app .usr-profit.usr-loss {
    background: #fdecec;
    border-color: #f6c8c9;
    color: #b91c1c;
}

/* Old amount (before the transaction): grey */
body.app .usr-oldamt {
    color: #8a8fb3;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

body.app .usr-name {
    color: #1f2150;
    font-weight: 600;
}

/* Transaction id: red highlighted id */
body.app .txn-id {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 8px;
    background: #fdecec;
    border: 1px solid #f6c8c9;
    color: #c81e1e;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
}

body.app .txn-id .fa {
    font-size: 11px;
    color: #e5484d;
}

/* "Total" row at the end of report tables */
body.app .app-content .table tr.row-total > td {
    background: #eef0ff !important;
    border-top: 2px solid #3b3fb6 !important;
    font-weight: 700;
    white-space: nowrap;
}

/* "Grand Total" label in any cell of the total row: purple and bold */
body.app .app-content .table tr.row-total > td {
    color: #3b3fb6 !important;
    font-weight: 800;
}

body.app .app-content .table tr.row-total .usr-name {
    color: #3b3fb6;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* The "Total" / "Total Balance" label is purple on the light row
   (the eMoney wallet tables had white text here, which was invisible) */
body.app .app-content .table tr.row-total > td:first-child {
    color: #3b3fb6 !important;
    font-size: 15px;
    font-weight: 800;
}

body.app .app-content .table tr.row-total h6,
body.app .app-content .table tr.row-total h5 {
    margin: 0;
    color: #3b3fb6 !important;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

body.app .app-content .table tr.row-total h6::before,
body.app .app-content .table tr.row-total h5::before {
    content: "\f1ec";
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 8px;
}

/* Total amount: solid indigo label */
body.app .total-amt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    background: #3b3fb6;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 10px -4px rgba(59, 63, 182, .7);
}

body.app .total-amt .cur {
    background: #ffe08a;
    color: #3b3fb6;
}

/* User type: solid label with its own colour */
body.app .usr-type {
    display: inline-block;
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
}

body.app .usr-type-admin     { background: #3b3fb6; }
body.app .usr-type-subadmin  { background: #7c3aed; }
body.app .usr-type-dist      { background: #0d9488; }
body.app .usr-type-subdist   { background: #d97706; }
body.app .usr-type-retailer  { background: #2563eb; }
body.app .usr-type-other     { background: #64748b; }

/* Wallet / balance amount */
body.app .usr-bal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 8px;
    background: #e7f7ef;
    border: 1px solid #bfe9d3;
    color: #047857;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* AFN (Afghani) currency tag in front of the amount */
body.app .cur {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1.4;
    background: #047857;
    color: #fff;
}

body.app .usr-bal.usr-bal-neg .cur {
    background: #b91c1c;
}

/* Negative balance: red */
body.app .usr-bal.usr-bal-neg {
    background: #fdecec;
    border-color: #f6c8c9;
    color: #b91c1c;
}

/* ---------- Browsers without blur: solid, readable cards ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.app .modal-content {
        background: #fff;
    }
}

/* ---------- Mobile: no blur (faster scrolling), keep the depth ---------- */
@media (max-width: 767px) {
    body.app .app-content {
        background-attachment: scroll;
    }

    body.app .modal-content,
    body.app .mm-search,
    body.app .rp-page .panelWrap,
    body.app .app-content .breadcrumb,
    body.app .dropdown-menu,
    body.app .app-content .alert {
    }

}

/* Respect users who turn animations off */
@media (prefers-reduced-motion: reduce) {
    body.app .app-content .card,
    body.app .btn {
        transition: none !important;
    }
}