/* =========================================

   ADMIN FINANCE PAGE

   Extends the shared Admin Products theme.

========================================= */



.finance-summary-grid .summary-card {

    align-items: flex-start;

}



.finance-summary-grid .summary-card > div {

    flex: 1;

}



.finance-summary-grid .summary-card small {

    margin-top: 6px;

    overflow: hidden;

    color: #8a99ad;

    font-size: 10px;

    font-weight: 650;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.finance-overview-panel,

.finance-register-panel {

    overflow: hidden;

    background: var(--admin-surface);

    border: 1px solid var(--admin-border);

    border-radius: var(--admin-radius-lg);

    box-shadow: var(--admin-shadow);

}



.finance-overview-panel {

    margin-bottom: 22px;

}



.finance-section-heading,

.finance-register-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 24px;

    padding: 24px 26px 21px;

}



.finance-section-heading h2,

.finance-register-header h2 {

    margin: 0;

    color: #0f172a;

    font-size: 22px;

}



.finance-section-heading > div:first-child > p:last-child,

.finance-register-header > div > p:last-child {

    max-width: 720px;

    margin: 7px 0 0;

    color: var(--admin-muted);

    font-size: 13px;

    line-height: 1.55;

}



.overview-heading-actions {

    display: flex;

    flex: 0 0 auto;

    align-items: center;

    gap: 10px;

}



.overview-generated-at {

    color: #8492a6;

    font-size: 10px;

    font-weight: 700;

    white-space: nowrap;

}



.overview-refresh-button {

    min-height: 38px;

    padding: 8px 11px;

    font-size: 10px;

}



/* =========================================

   OVERVIEW CARDS

========================================= */



.currency-overview-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;

    padding: 0 26px 18px;

}



.currency-overview-card {

    position: relative;

    min-width: 0;

    overflow: hidden;

    padding: 19px;

    background: #fbfdff;

    border: 1px solid #dce6f1;

    border-radius: 16px;

}



.currency-overview-card::after {

    position: absolute;

    top: -70px;

    right: -60px;

    width: 170px;

    height: 170px;

    background: rgba(37, 99, 235, 0.07);

    border-radius: 50%;

    content: "";

    pointer-events: none;

}



.currency-overview-card.usdt-card::after {

    background: rgba(5, 150, 105, 0.08);

}



.currency-overview-card > header {

    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    gap: 12px;

}



.currency-mark {

    display: grid;

    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    place-items: center;

    color: #1d4ed8;

    background: #dbeafe;

    border-radius: 12px;

    font-size: 18px;

    font-weight: 850;

}



.usdt-card .currency-mark {

    color: #047857;

    background: #d1fae5;

}



.currency-overview-card > header > div {

    display: flex;

    min-width: 0;

    flex-direction: column;

}



.currency-overview-card > header span:not(.currency-mark) {

    color: #8290a4;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.currency-overview-card > header strong {

    margin-top: 3px;

    color: #172033;

    font-size: 15px;

}



.metric-list {

    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin: 18px 0 0;

}



.metric-list > div {

    display: flex;

    min-width: 0;

    flex-direction: column;

    padding: 12px;

    background: rgba(255, 255, 255, 0.82);

    border: 1px solid #e6edf5;

    border-radius: 11px;

}



.metric-list dt {

    color: #7c8a9d;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 0.055em;

    text-transform: uppercase;

}



.metric-list dd {

    margin: 6px 0 0;

    overflow: hidden;

    color: #1e293b;

    font-size: 13px;

    font-weight: 800;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.metric-list .metric-total {

    border-color: #bfd3fb;

    box-shadow: inset 3px 0 0 #2563eb;

}



.usdt-card .metric-list .metric-total {

    border-color: #b7ead7;

    box-shadow: inset 3px 0 0 #059669;

}



.activity-overview-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 1px;

    background: var(--admin-border);

    border-top: 1px solid var(--admin-border);

}



.activity-card {

    display: flex;

    min-width: 0;

    align-items: center;

    gap: 12px;

    padding: 17px 20px;

    background: #ffffff;

}



.activity-icon {

    display: grid;

    flex: 0 0 38px;

    width: 38px;

    height: 38px;

    place-items: center;

    border-radius: 11px;

    font-size: 14px;

}



.activity-icon.recharge {

    color: #1d4ed8;

    background: #dbeafe;

}



.activity-icon.asset {

    color: #047857;

    background: #d1fae5;

}



.activity-icon.withdrawal {

    color: #b45309;

    background: #fef3c7;

}



.activity-icon.ledger {

    color: #475569;

    background: #e2e8f0;

}



.activity-card > div {

    display: flex;

    min-width: 0;

    flex-direction: column;

}



.activity-card span:not(.activity-icon) {

    color: #718096;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}



.activity-card strong,

.activity-card small {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.activity-card strong {

    margin-top: 4px;

    color: #1e293b;

    font-size: 12px;

}



.activity-card small {

    margin-top: 3px;

    color: #8a99ad;

    font-size: 9px;

    font-weight: 650;

}



/* =========================================

   REGISTER AND TABS

========================================= */



.read-only-badge,

.action-warning-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 34px;

    padding: 7px 11px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 800;

    white-space: nowrap;

}



.read-only-badge {

    color: #334155;

    background: #f1f5f9;

    border: 1px solid #dbe3ed;

}



.action-warning-badge {

    color: #9a3412;

    background: #fff7ed;

    border: 1px solid #fed7aa;

}



.finance-tabs {

    display: flex;

    gap: 8px;

    padding: 0 26px 17px;

    overflow-x: auto;

    scrollbar-width: thin;

}



.finance-tab {

    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 39px;

    padding: 8px 13px;

    color: #52637a;

    background: #f8fafc;

    border: 1px solid #dde5ef;

    border-radius: 10px;

    cursor: pointer;

    font-size: 11px;

    font-weight: 800;

    transition: 150ms ease;

}



.finance-tab:hover {

    color: #1d4ed8;

    border-color: #bfd3fb;

}



.finance-tab.active {

    color: #ffffff;

    background: linear-gradient(135deg, #2563eb, #1d4ed8);

    border-color: #2563eb;

    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.21);

}



/* =========================================

   FILTERS

========================================= */



.finance-toolbar {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 16px 26px;

    background: var(--admin-surface-soft);

    border-top: 1px solid #e7edf5;

    border-bottom: 1px solid #e7edf5;

}



.finance-search-control {

    flex: 1 1 290px;

    min-width: 220px;

}



.finance-toolbar .search-control input,

.finance-toolbar .filter-control,

.finance-toolbar .date-filter-control,

.category-filter-control {

    height: 44px;

}



.finance-toolbar .filter-control {

    flex: 0 1 185px;

    min-width: 150px;

}



.date-filter-control,

.category-filter-control {

    display: grid;

    align-items: center;

    gap: 8px;

    padding-left: 11px;

    background: #ffffff;

    border: 1px solid var(--admin-border);

    border-radius: 11px;

}



.date-filter-control {

    flex: 0 1 160px;

    grid-template-columns: auto minmax(0, 1fr);

    min-width: 140px;

}



.category-filter-control {

    flex: 0 1 190px;

    grid-template-columns: auto minmax(0, 1fr);

    min-width: 160px;

}



.date-filter-control > span,

.category-filter-control > span {

    color: var(--admin-muted);

    font-size: 9px;

    font-weight: 850;

    text-transform: uppercase;

}



.date-filter-control input,

.category-filter-control input {

    min-width: 0;

    width: 100%;

    height: 100%;

    padding: 0 8px 0 0;

    color: var(--admin-text);

    background: transparent;

    border: 0;

    outline: none;

    font-size: 11px;

    font-weight: 650;

}



.category-filter-control input::placeholder {

    color: #94a3b8;

}



.date-filter-control:focus-within,

.category-filter-control:focus-within {

    border-color: #76a0f8;

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11);

}



.finance-filter-actions {

    display: flex;

    flex: 0 0 auto;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

}



.finance-filter-actions .primary-button,

.finance-filter-actions .secondary-button {

    min-height: 44px;

    padding: 9px 13px;

    font-size: 11px;

}



.finance-refresh-button {

    flex: 0 0 44px;

    width: 44px;

    padding: 0 !important;

}



/* =========================================

   TABLE

========================================= */



.finance-table {

    min-width: 1120px;

}



.finance-table.table-wallets {

    min-width: 1160px;

}



.finance-table.table-recharges,

.finance-table.table-withdrawals {

    min-width: 1220px;

}



.finance-table.table-transactions {

    min-width: 1280px;

}



.finance-table th,

.finance-table td {

    padding-top: 16px;

    padding-bottom: 16px;

}



.finance-identity {

    display: flex;

    min-width: 215px;

    align-items: center;

    gap: 11px;

}



.finance-identity-icon {

    display: grid;

    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    place-items: center;

    color: #2563eb;

    background: #e8f0ff;

    border: 1px solid #d8e4fb;

    border-radius: 11px;

}



.finance-identity-icon.recharge {

    color: #047857;

    background: #d1fae5;

    border-color: #b7ead7;

}



.finance-identity-icon.withdrawal {

    color: #b45309;

    background: #fef3c7;

    border-color: #fde68a;

}



.finance-identity-icon.transaction {

    color: #6d28d9;

    background: #ede9fe;

    border-color: #ddd6fe;

}



.finance-identity-copy,

.finance-money-stack,

.finance-reference-stack,

.finance-user-stack,

.finance-balance-stack {

    display: flex;

    min-width: 0;

    flex-direction: column;

}



.finance-identity-copy strong,

.finance-user-stack strong,

.finance-money-stack strong,

.finance-balance-stack strong {

    overflow: hidden;

    color: #1e293b;

    font-size: 12px;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.finance-identity-copy strong {

    max-width: 250px;

}



.finance-identity-copy code,

.finance-reference-stack code {

    max-width: 250px;

    margin-top: 4px;

    overflow: hidden;

    color: #64748b;

    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    font-size: 9px;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.finance-identity-copy small,

.finance-user-stack small,

.finance-money-stack small,

.finance-reference-stack small,

.finance-balance-stack small {

    margin-top: 4px;

    overflow: hidden;

    color: #8492a6;

    font-size: 9px;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.finance-reference-stack .customer-reference-label {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 9px;

    color: #a16207;

    font-weight: 800;

}

.finance-reference-stack .customer-reference-value {

    color: #0f766e;

    font-weight: 750;

}

.finance-reference-stack .customer-reference-missing {

    margin-top: 9px;

    color: #94a3b8;

}



.finance-user-stack,

.finance-money-stack,

.finance-balance-stack {

    min-width: 125px;

}



.finance-reference-stack {

    min-width: 150px;

}



.currency-pill,

.direction-pill,

.balance-type-pill {

    display: inline-flex;

    width: fit-content;

    align-items: center;

    justify-content: center;

    min-height: 23px;

    padding: 4px 7px;

    border-radius: 7px;

    font-size: 9px;

    font-weight: 850;

    white-space: nowrap;

}



.currency-pill.inr {

    color: #1d4ed8;

    background: #dbeafe;

}



.currency-pill.usdt {

    color: #047857;

    background: #d1fae5;

}



.direction-pill.credit {

    color: #047857;

    background: #d1fae5;

}



.direction-pill.debit {

    color: #b91c1c;

    background: #fee2e2;

}



.balance-type-pill {

    color: #475569;

    background: #f1f5f9;

    border: 1px solid #e2e8f0;

}



.status-pill.pending,

.status-pill.processing {

    color: #a16207;

    background: #fef3c7;

}



.status-pill.successful,

.status-pill.credited,

.status-pill.approved {

    color: #047857;

    background: #d1fae5;

}



.status-pill.failed,

.status-pill.rejected,

.status-pill.cancelled,

.status-pill.expired {

    color: #b91c1c;

    background: #fee2e2;

}



.status-pill.frozen,

.status-pill.closed,

.status-pill.blocked,

.status-pill.suspended {

    color: #475569;

    background: #e2e8f0;

}



.finance-date-copy {

    display: flex;

    min-width: 135px;

    flex-direction: column;

    color: #334155;

    font-size: 10px;

    font-weight: 750;

    white-space: nowrap;

}



.finance-date-copy small {

    margin-top: 4px;

    color: #94a3b8;

    font-size: 9px;

    font-weight: 600;

}



.finance-pagination {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding: 16px 26px;

    color: #64748b;

    background: #fbfcfe;

    border-top: 1px solid #e8edf4;

    font-size: 11px;

    font-weight: 650;

}



.finance-pagination .secondary-button {

    min-height: 36px;

    padding: 8px 12px;

    font-size: 10px;

}



/* =========================================

   DETAIL MODAL

========================================= */



.finance-detail-modal {

    width: min(1160px, 100%);

}



.finance-detail-body {

    display: grid;

    gap: 16px;

    max-height: min(74vh, 820px);

    padding: 22px 26px;

    overflow-y: auto;

    overscroll-behavior: contain;

    background: #f8fafc;

}



.detail-loading-state,

.detail-error-state {

    display: flex;

    min-height: 320px;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    text-align: center;

}



.detail-loading-state i,

.detail-error-state > i {

    margin-bottom: 13px;

    color: #2563eb;

    font-size: 28px;

}



.detail-loading-state span {

    color: #64748b;

    font-size: 13px;

    font-weight: 750;

}



.detail-error-state > i {

    color: #dc2626;

}



.detail-error-state strong {

    color: #991b1b;

    font-size: 17px;

}



.detail-error-state p {

    max-width: 520px;

    margin: 7px 0 0;

    color: #64748b;

    font-size: 12px;

}



.finance-detail-hero {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 20px;

    color: #e2e8f0;

    background: linear-gradient(135deg, #101a2f, #1e3a6d);

    border-radius: 16px;

}



.detail-hero-identity {

    display: flex;

    min-width: 0;

    align-items: center;

    gap: 13px;

}



.detail-hero-icon {

    display: grid;

    flex: 0 0 48px;

    width: 48px;

    height: 48px;

    place-items: center;

    color: #ffffff;

    background: rgba(37, 99, 235, 0.82);

    border: 1px solid rgba(147, 197, 253, 0.36);

    border-radius: 13px;

    font-size: 18px;

}



.detail-hero-copy {

    display: flex;

    min-width: 0;

    flex-direction: column;

}



.detail-hero-copy span {

    color: #94a3b8;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.detail-hero-copy strong {

    margin-top: 5px;

    overflow-wrap: anywhere;

    color: #ffffff;

    font-size: 16px;

}



.detail-hero-copy small {

    margin-top: 5px;

    color: #bdc9db;

    font-size: 10px;

}



.detail-hero-meta {

    display: flex;

    flex: 0 0 auto;

    align-items: center;

    gap: 9px;

}



.detail-hero-meta .status-pill {

    border: 1px solid rgba(255, 255, 255, 0.18);

}



.finance-detail-metrics {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;

}



.finance-detail-metric {

    display: flex;

    min-width: 0;

    flex-direction: column;

    padding: 14px;

    background: #ffffff;

    border: 1px solid #e1e8f1;

    border-radius: 12px;

}



.finance-detail-metric span {

    color: #718096;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 0.055em;

    text-transform: uppercase;

}



.finance-detail-metric strong {

    margin-top: 7px;

    overflow: hidden;

    color: #172033;

    font-size: 13px;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.finance-detail-metric small {

    margin-top: 4px;

    color: #94a3b8;

    font-size: 9px;

}



.finance-detail-sections {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;

}



.finance-detail-section {

    min-width: 0;

    padding: 17px;

    background: #ffffff;

    border: 1px solid #e1e8f1;

    border-radius: 14px;

}



.finance-detail-section h3 {

    margin: 0 0 11px;

    color: #1e293b;

    font-size: 15px;

}

.customer-payment-claim {

    grid-column: 1 / -1;

    min-width: 0;

    padding: 18px;

    background: linear-gradient(135deg, #fffbeb, #ffffff);

    border: 1px solid #f6d98a;

    border-radius: 14px;

}

.customer-payment-claim.empty {

    background: #ffffff;

    border-color: #e1e8f1;

}

.customer-payment-claim-heading {

    display: flex;

    min-width: 0;

    align-items: center;

    gap: 11px;

}

.customer-payment-claim-heading > span:nth-child(2) {

    min-width: 0;

}

.customer-payment-claim-icon {

    display: grid;

    flex: 0 0 38px;

    width: 38px;

    height: 38px;

    place-items: center;

    color: #b45309;

    background: #fef3c7;

    border: 1px solid #fde68a;

    border-radius: 11px;

}

.customer-payment-claim-heading small {

    display: block;

    color: #a16207;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 0.055em;

    text-transform: uppercase;

}

.customer-payment-claim-heading h3 {

    margin: 4px 0 0;

    color: #1e293b;

    font-size: 14px;

}

.customer-payment-unverified {

    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;

    gap: 6px;

    margin-left: auto;

    padding: 6px 9px;

    color: #92400e;

    background: #fef3c7;

    border: 1px solid #f6d98a;

    border-radius: 999px;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 0.035em;

    text-transform: uppercase;

}

.customer-payment-reference-box {

    display: flex;

    min-width: 0;

    align-items: center;

    gap: 10px;

    margin-top: 14px;

    padding: 11px 12px;

    background: #ffffff;

    border: 1px solid #ead9a9;

    border-radius: 10px;

}

.customer-payment-reference-box code {

    min-width: 0;

    flex: 1;

    overflow-wrap: anywhere;

    color: #0f766e;

    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    font-size: 12px;

    font-weight: 800;

}

.customer-payment-copy-button {

    display: inline-flex;

    min-height: 32px;

    flex: 0 0 auto;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 7px 10px;

    color: #1d4ed8;

    background: #eff6ff;

    border: 1px solid #bfdbfe;

    border-radius: 8px;

    cursor: pointer;

    font: inherit;

    font-size: 10px;

    font-weight: 800;

}

.customer-payment-copy-button:hover {

    background: #dbeafe;

    border-color: #93c5fd;

}

.customer-payment-copy-button:focus-visible {

    outline: 3px solid rgba(37, 99, 235, 0.24);

    outline-offset: 2px;

}

.customer-payment-copy-button:disabled {

    cursor: wait;

    opacity: 0.65;

}

.customer-payment-claim-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: 10px;

    color: #7c6a3e;

    font-size: 9px;

    font-weight: 700;

}

.customer-payment-claim-meta span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

}

.customer-payment-claim.empty p {

    margin: 11px 0 0 49px;

    color: #64748b;

    font-size: 10px;

}



.finance-detail-list {

    margin: 0;

}



.finance-detail-list > div {

    display: grid;

    grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1.3fr);

    gap: 16px;

    padding: 10px 0;

    border-bottom: 1px solid #e8edf4;

}



.finance-detail-list > div:last-child {

    border-bottom: 0;

}



.finance-detail-list dt {

    color: #64748b;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}



.finance-detail-list dd {

    margin: 0;

    overflow-wrap: anywhere;

    color: #243147;

    font-size: 10px;

    font-weight: 700;

    text-align: right;

}



.finance-detail-list dd code {

    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    font-size: 9px;

}



.finance-action-panel {

    padding: 18px;

    background: #fffbeb;

    border: 1px solid #fde68a;

    border-radius: 14px;

}



.finance-action-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;

    margin-bottom: 15px;

}



.finance-action-heading h3 {

    margin: 0;

    color: #1e293b;

    font-size: 17px;

}



.finance-action-heading > div > p:last-child {

    margin: 6px 0 0;

    color: #64748b;

    font-size: 11px;

    line-height: 1.5;

}



.finance-action-panel .form-field + .form-field {

    margin-top: 13px;

}



.danger-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 42px;

    padding: 10px 15px;

    color: #ffffff;

    background: #dc2626;

    border-radius: 11px;

    cursor: pointer;

    font-weight: 750;

    line-height: 1;

    transition: 150ms ease;

}



.danger-button:hover {

    background: #b91c1c;

    box-shadow: 0 9px 20px rgba(220, 38, 38, 0.22);

    transform: translateY(-1px);

}



.danger-button:disabled {

    cursor: not-allowed;

    opacity: 0.65;

    transform: none;

}



.finance-safety-copy {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #64748b;

    font-size: 9px;

    font-weight: 650;

}



.finance-safety-copy i {

    color: #2563eb;

}



/* =========================================

   RESPONSIVE

========================================= */



@media (max-width: 1320px) {

    .finance-toolbar {

        flex-wrap: wrap;

    }



    .finance-search-control {

        flex-basis: calc(100% - 260px);

    }



    .finance-filter-actions {

        margin-left: auto;

    }

}



@media (max-width: 1180px) {

    .activity-overview-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .finance-detail-metrics {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (max-width: 900px) {

    .finance-section-heading,

    .finance-register-header {

        padding-right: 20px;

        padding-left: 20px;

    }



    .currency-overview-grid {

        padding-right: 20px;

        padding-left: 20px;

    }



    .finance-tabs,

    .finance-toolbar {

        padding-right: 20px;

        padding-left: 20px;

    }



    .finance-toolbar .filter-control,

    .date-filter-control,

    .category-filter-control {

        flex: 1 1 180px;

    }



    .finance-filter-actions {

        flex: 1 1 100%;

        justify-content: flex-start;

        margin-left: 0;

    }

}



@media (max-width: 720px) {

    .finance-section-heading,

    .finance-register-header {

        flex-direction: column;

        padding: 20px;

    }



    .overview-heading-actions {

        width: 100%;

        align-items: stretch;

        flex-direction: column;

    }



    .overview-generated-at {

        white-space: normal;

    }



    .overview-refresh-button,

    .read-only-badge {

        width: 100%;

    }



    .currency-overview-grid {

        grid-template-columns: 1fr;

        padding: 0 14px 14px;

    }



    .activity-overview-grid {

        grid-template-columns: 1fr;

    }



    .finance-tabs {

        padding: 0 20px 15px;

    }



    .finance-tab {

        min-height: 38px;

        font-size: 10px;

    }



    .finance-toolbar {

        padding: 14px 20px;

    }



    .finance-search-control,

    .finance-toolbar .filter-control,

    .date-filter-control,

    .category-filter-control {

        flex: 1 1 100%;

        min-width: 0;

    }



    .finance-filter-actions .primary-button,

    .finance-filter-actions .secondary-button {

        flex: 1 1 auto;

    }



    .finance-table-wrap {

        padding: 14px;

    }



    .finance-table,

    .finance-table.table-wallets,

    .finance-table.table-recharges,

    .finance-table.table-withdrawals,

    .finance-table.table-transactions {

        min-width: 0;

    }



    .finance-table tbody tr {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .finance-user-stack,

    .finance-money-stack,

    .finance-balance-stack,

    .finance-reference-stack {

        min-width: 0;

    }



    .finance-pagination {

        align-items: stretch;

        flex-direction: column;

        padding: 15px 20px;

        text-align: center;

    }



    .finance-pagination .secondary-button {

        width: 100%;

    }



    .finance-detail-body {

        max-height: none;

        padding: 16px 14px;

    }



    .finance-detail-hero {

        align-items: flex-start;

        flex-direction: column;

    }



    .detail-hero-meta {

        width: 100%;

        justify-content: space-between;

    }



    .finance-detail-sections {

        grid-template-columns: 1fr;

    }



    .customer-payment-claim-heading {

        align-items: flex-start;

        flex-wrap: wrap;

    }



    .customer-payment-unverified {

        margin-left: 49px;

    }



    .customer-payment-reference-box,

    .customer-payment-claim-meta {

        align-items: stretch;

        flex-direction: column;

    }



    .customer-payment-copy-button {

        width: 100%;

    }



    .customer-payment-claim.empty p {

        margin-left: 0;

    }



    .finance-action-heading {

        flex-direction: column;

    }



    .finance-action-heading .action-warning-badge {

        width: 100%;

    }



    .finance-detail-footer {

        align-items: stretch;

    }



    .finance-detail-footer .finance-safety-copy {

        justify-content: center;

        text-align: center;

    }

}



@media (max-width: 440px) {

    .metric-list,

    .finance-detail-metrics {

        grid-template-columns: 1fr;

    }



    .finance-filter-actions {

        flex-wrap: wrap;

    }



    .finance-filter-actions .primary-button,

    .finance-filter-actions .secondary-button {

        flex: 1 1 calc(50% - 8px);

    }



    .finance-filter-actions .finance-refresh-button {

        flex-basis: 44px;

        max-width: 44px;

    }



    .finance-table tbody tr {

        grid-template-columns: 1fr;

    }



    .finance-table td,

    .finance-table td:first-child,

    .finance-table td.actions-column {

        grid-column: 1 / -1;

    }



    .finance-detail-list > div {

        grid-template-columns: 1fr;

        gap: 5px;

    }



    .finance-detail-list dd {

        text-align: left;

    }



    .finance-detail-footer .finance-safety-copy {

        display: none;

    }



    .finance-detail-footer .modal-footer-actions {

        flex-direction: column-reverse;

    }



    .finance-detail-footer .modal-footer-actions button {

        width: 100%;

    }

}