/* Billing page transaction-log rebuild */
        .billing-action-grid-single {
            grid-template-columns: 1fr;
        }

        .billing-action-grid-single .billing-topup-card {
            min-height: 162px;
        }

        .billing-transactions-card {
            padding: 22px 24px 18px;
            margin-top: 18px;
        }

        .billing-transaction-table {
            min-width: 1120px;
        }

        .billing-transaction-table th:nth-child(1),
        .billing-transaction-table td:nth-child(1) { width: 150px; }

        .billing-transaction-table th:nth-child(2),
        .billing-transaction-table td:nth-child(2) { width: 170px; }

        .billing-transaction-table th:nth-child(4),
        .billing-transaction-table td:nth-child(4) { width: 160px; }

        .billing-transaction-table th:nth-child(5),
        .billing-transaction-table td:nth-child(5) { width: 150px; }

        .billing-transaction-table th:nth-child(6),
        .billing-transaction-table td:nth-child(6) { width: 120px; }

        .billing-transaction-table th:nth-child(7),
        .billing-transaction-table td:nth-child(7) { width: 140px; }

        .billing-transaction-type {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .billing-transaction-type strong {
            color: #111827;
            font-weight: 700;
            white-space: nowrap;
        }

        .billing-transaction-icon {
            width: 25px;
            height: 25px;
            border-radius: 7px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }

        .billing-transaction-icon.topup {
            color: #168a2f;
            background: rgba(56, 184, 3, .12);
            border: 1px solid rgba(56, 184, 3, .16);
        }

        .billing-transaction-icon.box-payment {
            color: #0b74de;
            background: rgba(59, 130, 246, .10);
            border: 1px solid rgba(59, 130, 246, .14);
        }

        .billing-transaction-description {
            display: block;
            color: #111827;
            line-height: 1.35;
        }

        .billing-transaction-helper {
            display: block;
            margin-top: 3px;
            color: #0b74de;
            font-size: 12px;
            line-height: 1.25;
        }

        .billing-transaction-amount {
            white-space: nowrap;
            font-weight: 800;
        }

        .billing-transaction-amount.positive {
            color: #0c8a22;
        }

        .billing-transaction-amount.negative {
            color: #111827;
        }

        .billing-transaction-status {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 5px 10px;
            border-radius: 999px;
            font-size: 12px;
            line-height: 1.1;
            font-weight: 750;
            white-space: nowrap;
        }

        .billing-transaction-status.completed,
        .billing-transaction-status.paid {
            color: #147a21;
            background: rgba(56, 184, 3, .12);
            border: 1px solid rgba(56, 184, 3, .22);
        }

        .billing-transaction-status.pending {
            color: #d97706;
            background: rgba(245, 158, 11, .13);
            border: 1px solid rgba(245, 158, 11, .24);
        }

        .billing-mobile-summary {
            display: none;
        }

        @media (max-width: 768px) {
            .billing-transactions-card {
                padding: 18px 16px !important;
            }

            .billing-transaction-table-wrap {
                overflow: visible !important;
                border: 0 !important;
            }

            .billing-transaction-table,
            .billing-transaction-table tbody,
            .billing-transaction-table tr,
            .billing-transaction-table td {
                display: block;
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            .billing-transaction-table thead {
                display: none;
            }

            .billing-transaction-table tr {
                border: 1px solid #e5e7eb;
                border-radius: 16px;
                background: #fff;
                margin-bottom: 12px;
                padding: 14px;
                box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035);
            }

            .billing-transaction-table td {
                border: 0 !important;
                padding: 8px 0 !important;
            }

            .billing-transaction-table td::before {
                display: block;
                margin-bottom: 5px;
                color: #6b7280;
                font-size: 11px;
                font-weight: 750;
                text-transform: uppercase;
                letter-spacing: .04em;
            }

            .billing-transaction-table td:nth-child(1)::before { content: 'Date & Time'; }
            .billing-transaction-table td:nth-child(2)::before { content: 'Type'; }
            .billing-transaction-table td:nth-child(3)::before { content: 'Description'; }
            .billing-transaction-table td:nth-child(4)::before { content: 'Box / Invoice ID'; }
            .billing-transaction-table td:nth-child(5)::before { content: 'Payment Method'; }
            .billing-transaction-table td:nth-child(6)::before { content: 'Amount'; }
            .billing-transaction-table td:nth-child(7)::before { content: 'Status'; }

            .billing-invoice-data-row,
            .billing-transaction-data-row {
                padding: 10px 12px !important;
                border-radius: 14px !important;
                overflow: hidden !important;
            }

            .billing-invoice-data-row > td:first-child,
            .billing-transaction-data-row > td:first-child {
                padding: 0 !important;
            }

            .billing-invoice-data-row > td:first-child::before,
            .billing-transaction-data-row > td:first-child::before {
                display: none !important;
            }

            .billing-invoice-data-row:not(.is-mobile-expanded) > td:not(:first-child),
            .billing-transaction-data-row:not(.is-mobile-expanded) > td:not(:first-child) {
                display: none !important;
            }

            .billing-invoice-data-row.is-mobile-expanded > td:not(:first-child),
            .billing-transaction-data-row.is-mobile-expanded > td:not(:first-child) {
                display: block !important;
                padding: 8px 0 !important;
            }

            .billing-invoice-data-row.is-mobile-expanded > td:nth-child(2),
            .billing-transaction-data-row.is-mobile-expanded > td:nth-child(2) {
                margin-top: 10px;
                padding-top: 12px !important;
                border-top: 1px solid #edf0f2 !important;
            }

            .billing-mobile-summary {
                width: 100%;
                min-width: 0;
                min-height: 54px;
                border: 0;
                padding: 0;
                background: transparent;
                color: #111827;
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto 18px;
                align-items: center;
                gap: 8px;
                text-align: left;
                font: inherit;
                cursor: pointer;
            }

            .billing-mobile-summary:focus-visible {
                outline: 3px solid rgba(56, 184, 3, .22);
                outline-offset: 3px;
                border-radius: 9px;
            }

            .billing-mobile-summary-leading {
                min-width: 0;
                display: flex;
                align-items: center;
                gap: 9px;
            }

            .billing-mobile-summary-copy {
                min-width: 0;
                display: grid;
                gap: 4px;
            }

            .billing-mobile-summary-copy strong {
                min-width: 0;
                color: #111827;
                font-size: 13px;
                line-height: 1.25;
                font-weight: 700;
                overflow-wrap: anywhere;
            }

            .billing-mobile-summary-copy small {
                min-width: 0;
                color: #6b7280;
                font-size: 10.5px;
                line-height: 1.25;
                font-weight: 500;
                overflow-wrap: anywhere;
            }

            .billing-mobile-summary-meta {
                min-width: 0;
                display: grid;
                justify-items: end;
                gap: 5px;
            }

            .billing-mobile-summary-meta > strong {
                color: #111827;
                font-size: 13px;
                line-height: 1.15;
                font-weight: 750;
                white-space: nowrap;
            }

            .billing-mobile-summary-meta .billing-due-badge,
            .billing-mobile-summary-meta .billing-transaction-status {
                max-width: 112px;
                padding: 3px 7px;
                font-size: 10px;
                line-height: 1.15;
                text-align: center;
                white-space: normal;
            }

            .billing-mobile-summary-caret {
                width: 18px;
                height: 18px;
                color: #6b7280;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                transition: transform 160ms ease;
            }

            .billing-invoice-data-row.is-mobile-expanded .billing-mobile-summary-caret,
            .billing-transaction-data-row.is-mobile-expanded .billing-mobile-summary-caret {
                transform: rotate(180deg);
            }

            .billing-mobile-primary-detail,
            .billing-transaction-date-value {
                display: none !important;
            }
        }

        /* Dedicated billing cards are mobile-only; desktop keeps its existing tables. */
        .billing-mobile-invoice-list,
        .billing-mobile-transaction-list {
            display: none;
        }

        @media (max-width: 768px) {
            .billing-invoices-head {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: stretch;
            }

            .billing-table-controls {
                width: 100%;
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) auto auto !important;
                gap: 8px;
            }

            .billing-search-box {
                grid-column: 1 / -1;
                width: 100%;
                min-width: 0;
            }

            .billing-invoices-card .billing-invoice-table-wrap,
            .billing-transactions-card .billing-transaction-table-wrap {
                display: none !important;
            }

            .billing-mobile-invoice-list,
            .billing-mobile-transaction-list {
                width: 100%;
                min-width: 0;
                display: grid;
                gap: 9px;
            }

            .billing-mobile-invoice-card {
                min-width: 0;
                padding: 12px;
                border: 1px solid #e2e7e3;
                border-radius: 13px;
                background: #fff;
                box-shadow: 0 5px 15px rgba(15, 23, 42, 0.04);
            }

            .billing-mobile-invoice-head {
                min-width: 0;
                display: grid;
                grid-template-columns: 38px minmax(0, 1fr) auto;
                align-items: center;
                gap: 10px;
            }

            .billing-mobile-invoice-icon {
                width: 38px;
                height: 38px;
                border-radius: 10px;
                background: #edf8eb;
                color: #168a32;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .billing-mobile-invoice-identity {
                min-width: 0;
                display: grid;
                gap: 4px;
            }

            .billing-mobile-invoice-identity strong {
                min-width: 0;
                color: #138331;
                font-size: 13.5px;
                line-height: 1.25;
                font-weight: 650;
                overflow-wrap: anywhere;
            }

            .billing-mobile-invoice-identity span {
                min-width: 0;
                color: #526075;
                font-size: 11.5px;
                line-height: 1.3;
                font-weight: 450;
                overflow-wrap: anywhere;
            }

            .billing-mobile-invoice-amount-wrap {
                display: flex;
                align-items: center;
                gap: 4px;
            }

            .billing-mobile-invoice-amount-wrap > strong {
                color: #172033;
                font-size: 15px;
                font-weight: 700;
                white-space: nowrap;
            }

            .billing-mobile-invoice-caret,
            .billing-mobile-transaction-caret {
                width: 28px;
                height: 28px;
                padding: 0;
                border: 0;
                background: transparent;
                color: #657285;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                transition: transform 160ms ease;
                cursor: pointer;
            }

            .billing-mobile-invoice-card.is-expanded .billing-mobile-invoice-caret,
            .billing-mobile-transaction-row.is-expanded .billing-mobile-transaction-caret {
                transform: rotate(180deg);
            }

            .billing-mobile-invoice-due {
                margin: 10px 0 0 48px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
            }

            .billing-mobile-invoice-due small {
                min-width: 0;
                color: #526075;
                font-size: 11px;
                line-height: 1.3;
                text-align: right;
            }

            .billing-mobile-invoice-extra {
                margin: 10px 0 0 48px;
                padding: 9px 10px;
                border-radius: 9px;
                background: #f7f9f8;
                display: grid;
                gap: 3px;
            }

            .billing-mobile-invoice-extra span {
                color: #6b7280;
                font-size: 10px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.035em;
            }

            .billing-mobile-invoice-extra strong {
                color: #172033;
                font-size: 11.5px;
                font-weight: 600;
                overflow-wrap: anywhere;
            }

            .billing-mobile-invoice-actions {
                margin-top: 11px;
                padding-top: 10px;
                border-top: 1px solid #edf0ee;
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 7px;
            }

            .billing-mobile-invoice-actions .billing-action-btn,
            .billing-mobile-invoice-actions .billing-pay-btn {
                width: 100%;
                min-width: 0;
                min-height: 42px;
                height: auto;
                padding: 7px 5px;
                border-radius: 8px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
                font-size: 10.5px;
                line-height: 1.2;
                font-weight: 600;
                text-align: center;
                white-space: normal;
                overflow-wrap: anywhere;
            }

            .billing-mobile-invoice-actions .billing-pay-btn {
                background: #24a844 !important;
                background-image: none !important;
                box-shadow: none !important;
            }

            .billing-mobile-transaction-row {
                min-width: 0;
                border: 1px solid #e2e7e3;
                border-radius: 13px;
                background: #fff;
                overflow: hidden;
            }

            .billing-mobile-transaction-main {
                width: 100%;
                min-width: 0;
                padding: 11px;
                border: 0;
                background: #fff;
                color: #172033;
                display: grid;
                grid-template-columns: 34px minmax(0, 1fr) auto 18px;
                grid-template-rows: auto auto;
                align-items: center;
                column-gap: 9px;
                row-gap: 7px;
                text-align: left;
                cursor: pointer;
            }

            .billing-mobile-transaction-date {
                grid-column: 1 / -1;
                grid-row: 1;
                color: #687588;
                font-size: 10.5px;
                line-height: 1.2;
                font-weight: 450;
            }

            .billing-mobile-transaction-main > .billing-transaction-icon {
                grid-column: 1;
                grid-row: 2;
                width: 34px;
                height: 34px;
                border-radius: 10px;
            }

            .billing-mobile-transaction-copy {
                grid-column: 2;
                grid-row: 2;
                min-width: 0;
                display: grid;
                gap: 2px;
            }

            .billing-mobile-transaction-copy strong {
                min-width: 0;
                color: #172033;
                font-size: 12.5px;
                line-height: 1.25;
                font-weight: 650;
                overflow-wrap: anywhere;
            }

            .billing-mobile-transaction-copy > span,
            .billing-mobile-transaction-copy small {
                min-width: 0;
                color: #526075;
                font-size: 10.5px;
                line-height: 1.3;
                font-weight: 450;
                overflow-wrap: anywhere;
            }

            .billing-mobile-transaction-copy small {
                color: #6b7280;
            }

            .billing-mobile-transaction-meta {
                grid-column: 3;
                grid-row: 2;
                min-width: 0;
                display: grid;
                justify-items: end;
                gap: 6px;
            }

            .billing-mobile-transaction-meta .billing-transaction-amount {
                font-size: 13px;
                font-weight: 700;
            }

            .billing-mobile-transaction-meta .billing-transaction-status {
                max-width: 104px;
                padding: 4px 7px;
                font-size: 9.5px;
                font-weight: 600;
                text-align: center;
                white-space: normal;
            }

            .billing-mobile-transaction-caret {
                grid-column: 4;
                grid-row: 2;
                width: 18px;
                height: 18px;
            }

            .billing-mobile-transaction-extra {
                padding: 10px 12px 12px 54px;
                border-top: 1px solid #edf0ee;
                background: #fafcfb;
                display: grid;
                gap: 8px;
            }

            .billing-mobile-transaction-extra > span {
                min-width: 0;
                display: grid;
                gap: 2px;
            }

            .billing-mobile-transaction-extra small {
                color: #6b7280;
                font-size: 10px;
            }

            .billing-mobile-transaction-extra strong {
                color: #172033;
                font-size: 11.5px;
                font-weight: 600;
                overflow-wrap: anywhere;
            }

            .billing-mobile-empty {
                padding: 17px;
                border: 1px solid #e2e7e3;
                border-radius: 13px;
                background: #fff;
                color: #687588;
                font-size: 13px;
                text-align: center;
            }

            .billing-transactions-card {
                padding: 17px 14px !important;
            }

            .billing-table-footer {
                margin-top: 12px;
                padding-left: 0;
                padding-right: 0;
            }
        }

        @media (max-width: 399px) {
            .billing-mobile-invoice-actions {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .billing-mobile-invoice-actions .billing-pay-btn {
                grid-column: 1 / -1;
            }

            .billing-mobile-transaction-main {
                grid-template-columns: 32px minmax(0, 1fr) auto 16px;
                column-gap: 7px;
                padding: 10px;
            }

            .billing-mobile-transaction-main > .billing-transaction-icon {
                width: 32px;
                height: 32px;
            }

            .billing-mobile-transaction-meta .billing-transaction-status {
                max-width: 84px;
                padding: 4px 5px;
                font-size: 9px;
            }
        }