Spaces:
Sleeping
Sleeping
| /* ═══════════════════════════════════════════════════════════════ | |
| ADMIN WALLET CSS | |
| Styles specific to the wallet management section | |
| ═══════════════════════════════════════════════════════════════ */ | |
| /* ─── KPI Grid ───────────────────────────────────────────────*/ | |
| .wallet-kpi-grid-inline { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .wallet-kpi-card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| padding: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .wallet-kpi-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 30px var(--shadow-light); | |
| border-color: var(--primary-color); | |
| } | |
| .wallet-kpi-accent { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 4px; | |
| height: 100%; | |
| background: var(--primary-color); | |
| border-radius: 4px 0 0 4px; | |
| } | |
| .wallet-kpi-accent.balance { background: var(--success); } | |
| .wallet-kpi-accent.activity { background: var(--accent-color); } | |
| .wallet-kpi-accent.low-balance { background: var(--error); } | |
| .wallet-kpi-label { | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| margin-bottom: 8px; | |
| padding-left: 12px; | |
| } | |
| .wallet-kpi-value { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--text-color); | |
| padding-left: 12px; | |
| } | |
| /* ─── Controls Bar ───────────────────────────────────────────*/ | |
| .wallet-controls-inline { | |
| display: flex; | |
| gap: 15px; | |
| margin-bottom: 25px; | |
| flex-wrap: wrap; | |
| } | |
| .wallet-search-wrap-inline { | |
| flex: 1; | |
| min-width: 250px; | |
| position: relative; | |
| } | |
| .wallet-search-wrap-inline i { | |
| position: absolute; | |
| left: 15px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-muted); | |
| } | |
| .wallet-search-wrap-inline input { | |
| width: 100%; | |
| padding: 12px 15px 12px 40px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| background: var(--card-bg); | |
| color: var(--text-color); | |
| font-family: 'Outfit', sans-serif; | |
| transition: all 0.3s ease; | |
| } | |
| .wallet-search-wrap-inline input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1); | |
| } | |
| .wallet-filter-select, | |
| .wallet-sort-select { | |
| padding: 12px 35px 12px 15px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center/15px; | |
| color: var(--text-color); | |
| appearance: none; | |
| min-width: 150px; | |
| font-family: 'Outfit', sans-serif; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .wallet-filter-select:focus, | |
| .wallet-sort-select:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| } | |
| /* ─── Panel Head ─────────────────────────────────────────────*/ | |
| .wallet-panel-head { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0 0 20px 0; | |
| margin-bottom: 20px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .wallet-panel-head h3 { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 1.1rem; | |
| color: var(--text-color); | |
| } | |
| .wallet-panel-head h3 i { | |
| color: var(--primary-color); | |
| } | |
| #wallet-result-count { | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| background: var(--bg-color); | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| border: 1px solid var(--border-color); | |
| } | |
| /* ─── Wallet Cards Grid ──────────────────────────────────────*/ | |
| .wallet-cards-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 20px; | |
| align-items: start; | |
| } | |
| /* ─── Single Wallet User Card ────────────────────────────────*/ | |
| .wallet-user-card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .wallet-user-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, var(--primary-color), #3a0ca3); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .wallet-user-card:hover { | |
| border-color: var(--primary-color); | |
| box-shadow: 0 10px 30px var(--shadow-light); | |
| transform: translateY(-2px); | |
| } | |
| .wallet-user-card:hover::before { opacity: 1; } | |
| /* Expanded state — spans full grid width */ | |
| .wallet-user-card.expanded { | |
| grid-column: 1 / -1; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 12px 40px rgba(67, 97, 238, 0.15); | |
| transform: none; | |
| } | |
| .wallet-user-card.expanded::before { opacity: 1; } | |
| /* ─── Card Header ────────────────────────────────────────────*/ | |
| .wallet-card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .wallet-user-avatar { | |
| width: 46px; | |
| height: 46px; | |
| border-radius: 12px; | |
| background: linear-gradient(135deg, var(--primary-color), #3a0ca3); | |
| color: white; | |
| font-weight: 700; | |
| font-size: 1.2rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3); | |
| } | |
| .wallet-user-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .wallet-user-name { | |
| font-weight: 600; | |
| font-size: 1rem; | |
| color: var(--text-color); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .wallet-user-phone { | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| margin-top: 3px; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .wallet-user-phone i { | |
| color: var(--primary-color); | |
| font-size: 0.72rem; | |
| } | |
| /* ─── Balance Badge ──────────────────────────────────────────*/ | |
| .wallet-balance-badge { | |
| font-weight: 700; | |
| font-size: 0.95rem; | |
| padding: 6px 14px; | |
| border-radius: 20px; | |
| white-space: nowrap; | |
| flex-shrink: 0; | |
| } | |
| .wallet-balance-badge.balance-low { background: rgba(239,68,68,0.12); color: #ef4444; } | |
| .wallet-balance-badge.balance-medium { background: rgba(245,158,11,0.12); color: #d97706; } | |
| .wallet-balance-badge.balance-high { background: rgba(34,197,94,0.12); color: #16a34a; } | |
| /* ─── Card Meta Row ──────────────────────────────────────────*/ | |
| .wallet-card-meta { | |
| display: flex; | |
| gap: 16px; | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| flex-wrap: wrap; | |
| padding: 8px 0; | |
| border-top: 1px solid var(--border-color); | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .wallet-card-meta span { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .wallet-card-meta i { | |
| color: var(--primary-color); | |
| font-size: 0.72rem; | |
| } | |
| /* ─── Card Action Buttons ────────────────────────────────────*/ | |
| .wallet-card-actions { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .wallet-action-btn { | |
| flex: 1; | |
| padding: 10px; | |
| border-radius: 10px; | |
| border: 1px solid var(--border-color); | |
| background: transparent; | |
| color: var(--text-color); | |
| font-family: 'Outfit', sans-serif; | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| transition: all 0.3s ease; | |
| } | |
| .wallet-action-btn:hover { | |
| background: var(--bg-color); | |
| border-color: var(--primary-color); | |
| color: var(--primary-color); | |
| } | |
| .wallet-action-btn.primary { | |
| background: rgba(67, 97, 238, 0.1); | |
| border-color: rgba(67, 97, 238, 0.25); | |
| color: var(--primary-color); | |
| } | |
| .wallet-action-btn.primary:hover { | |
| background: var(--primary-color); | |
| color: white; | |
| box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════ | |
| EXPANDING CARD DETAIL PANEL | |
| ═══════════════════════════════════════════════════════════════ */ | |
| .wallet-expanded-area { | |
| overflow: hidden; | |
| max-height: 0; | |
| opacity: 0; | |
| transform: translateY(-10px); | |
| transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), | |
| opacity 0.3s ease, | |
| transform 0.3s ease, | |
| margin 0.3s ease, | |
| padding 0.3s ease; | |
| } | |
| .wallet-user-card.expanded .wallet-expanded-area { | |
| max-height: 2000px; /* Increased for long activity logs */ | |
| opacity: 1; | |
| transform: translateY(0); | |
| margin-top: 16px; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .wallet-detail-loading { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 20px; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| } | |
| /* ─── Detail Panel Container ─────────────────────────────────*/ | |
| .wallet-detail-panel { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| /* ─── Profile Strip ──────────────────────────────────────────*/ | |
| .wdp-profile { | |
| background: var(--bg-color); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| padding: 16px 20px; | |
| } | |
| .wdp-profile-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); | |
| gap: 14px; | |
| } | |
| .wdp-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| .wdp-label { | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.6px; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .wdp-label i { | |
| color: var(--primary-color); | |
| font-size: 0.75rem; | |
| } | |
| .wdp-value { | |
| font-size: 0.92rem; | |
| font-weight: 600; | |
| color: var(--text-color); | |
| } | |
| .wdp-balance { | |
| color: var(--primary-color); | |
| font-size: 1.1rem; | |
| } | |
| /* ─── History Tab Bar ────────────────────────────────────────*/ | |
| .wdp-tabs { | |
| display: flex; | |
| gap: 4px; | |
| border-bottom: 2px solid var(--border-color); | |
| } | |
| .wdp-tab { | |
| padding: 10px 18px; | |
| border: none; | |
| border-bottom: 3px solid transparent; | |
| margin-bottom: -2px; | |
| background: transparent; | |
| cursor: pointer; | |
| font-family: 'Outfit', sans-serif; | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| transition: all 0.25s ease; | |
| border-radius: 8px 8px 0 0; | |
| } | |
| .wdp-tab:hover { | |
| color: var(--primary-color); | |
| background: rgba(67, 97, 238, 0.05); | |
| } | |
| .wdp-tab.active { | |
| color: var(--primary-color); | |
| border-bottom-color: var(--primary-color); | |
| font-weight: 600; | |
| } | |
| .wdp-tab-badge { | |
| background: var(--border-color); | |
| color: var(--text-muted); | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| padding: 2px 7px; | |
| border-radius: 20px; | |
| transition: all 0.25s ease; | |
| } | |
| .wdp-tab.active .wdp-tab-badge { | |
| background: rgba(67, 97, 238, 0.15); | |
| color: var(--primary-color); | |
| } | |
| /* ─── Tab Content ────────────────────────────────────────────*/ | |
| .wdp-content { | |
| overflow-x: auto; | |
| } | |
| /* ─── History Table ──────────────────────────────────────────*/ | |
| .wh-table { | |
| width: 100%; | |
| border-collapse: separate; | |
| border-spacing: 0 4px; | |
| font-size: 0.85rem; | |
| } | |
| .wh-table th { | |
| text-align: left; | |
| padding: 12px 14px; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.8px; | |
| color: var(--text-muted); | |
| border-bottom: 2px solid var(--border-color); | |
| background: var(--bg-color); | |
| white-space: nowrap; | |
| } | |
| .wh-table tbody tr { | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| background: transparent; | |
| } | |
| .wh-table td { | |
| padding: 12px 14px; | |
| color: var(--text-color); | |
| vertical-align: middle; | |
| border-top: 1px solid transparent; | |
| border-bottom: 1px solid transparent; | |
| } | |
| .wh-table td:first-child { | |
| border-left: 1px solid transparent; | |
| border-radius: 8px 0 0 8px; | |
| } | |
| .wh-table td:last-child { | |
| border-right: 1px solid transparent; | |
| border-radius: 0 8px 8px 0; | |
| } | |
| /* Input-like row hover effect */ | |
| /* .wh-table tbody tr:hover { | |
| transform: translateX(4px); | |
| } */ | |
| .wh-table tbody tr:hover td { | |
| background: rgba(67, 97, 238, 0.03); | |
| border-top-color: var(--primary-color); | |
| border-bottom-color: var(--primary-color); | |
| } | |
| .wh-table tbody tr:hover td:first-child { | |
| border-left-color: var(--primary-color); | |
| } | |
| .wh-table tbody tr:hover td:last-child { | |
| border-right-color: var(--primary-color); | |
| } | |
| .wh-amount-credit { | |
| color: #16a34a; | |
| font-weight: 700; | |
| } | |
| .wh-amount-debit { | |
| color: #ef4444; | |
| font-weight: 700; | |
| } | |
| .wh-utr { | |
| font-family: 'Courier New', monospace; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| background: var(--bg-color); | |
| padding: 2px 8px; | |
| border-radius: 6px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .wh-empty { | |
| padding: 30px; | |
| text-align: center; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| .wh-empty i { | |
| font-size: 1.8rem; | |
| opacity: 0.4; | |
| } | |
| /* ─── Status Pills ───────────────────────────────────────────*/ | |
| .status-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 3px 10px; | |
| border-radius: 20px; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| letter-spacing: 0.4px; | |
| } | |
| .status-pill.status-approved, | |
| .status-pill.status-completed, | |
| .status-pill.status-success { background: rgba(34,197,94,0.12); color: #16a34a; } | |
| .status-pill.status-pending { background: rgba(245,158,11,0.12); color: #d97706; } | |
| .status-pill.status-rejected, | |
| .status-pill.status-failed { background: rgba(239,68,68,0.12); color: #ef4444; } | |
| .status-pill.status-masked { background: rgba(99,102,241,0.12); color: #6366f1; } | |
| .status-pill.status-normal { background: rgba(14,165,233,0.12); color: #0ea5e9; } | |
| .status-pill.status-credit { background: rgba(34,197,94,0.12); color: #16a34a; } | |
| .status-pill.status-debit { background: rgba(239,68,68,0.12); color: #ef4444; } | |
| /* ─── Manage Wallet Modal ────────────────────────────────────*/ | |
| #wallet-manage-modal, | |
| .wallet-modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(5, 10, 25, 0.7); | |
| z-index: 1002; | |
| align-items: center; | |
| justify-content: center; | |
| backdrop-filter: blur(6px); | |
| } | |
| .wallet-modal.manage { | |
| z-index: 1003; | |
| } | |
| .wallet-modal-head { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px 24px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .wallet-modal-head h3 { | |
| font-size: 1.1rem; | |
| color: var(--text-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .wallet-modal-close { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| font-size: 1.2rem; | |
| padding: 4px 8px; | |
| border-radius: 6px; | |
| transition: all 0.2s ease; | |
| } | |
| .wallet-modal-close:hover { | |
| background: var(--bg-color); | |
| color: var(--text-color); | |
| } | |
| .wallet-manage-modal { | |
| background: var(--card-bg); | |
| border-radius: 16px; | |
| border: 1px solid var(--border-color); | |
| max-width: 480px; | |
| width: 90%; | |
| overflow: hidden; | |
| } | |
| /* ─── Manage Fields ──────────────────────────────────────────*/ | |
| .wallet-manage-fields { | |
| display: grid; | |
| gap: 14px; | |
| padding: 20px 24px; | |
| } | |
| .wallet-manage-user { | |
| color: var(--text-color); | |
| font-weight: 600; | |
| font-size: 1rem; | |
| } | |
| .wallet-manage-balance { | |
| color: var(--primary-color); | |
| font-weight: 700; | |
| font-size: 0.95rem; | |
| } | |
| .wallet-manage-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 12px; | |
| } | |
| .wallet-manage-fields label { | |
| display: grid; | |
| gap: 6px; | |
| color: var(--text-muted); | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| } | |
| .wallet-manage-fields select, | |
| .wallet-manage-fields input, | |
| .wallet-manage-fields textarea { | |
| border: 1px solid var(--border-color); | |
| background: var(--bg-color); | |
| color: var(--text-color); | |
| border-radius: 10px; | |
| padding: 10px 14px; | |
| font-family: 'Outfit', sans-serif; | |
| font-size: 0.9rem; | |
| transition: all 0.3s ease; | |
| } | |
| .wallet-manage-fields select:focus, | |
| .wallet-manage-fields input:focus, | |
| .wallet-manage-fields textarea:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1); | |
| } | |
| .wallet-manage-fields textarea { | |
| min-height: 90px; | |
| resize: vertical; | |
| } | |
| .wallet-manage-feedback { | |
| min-height: 18px; | |
| margin: 0; | |
| font-size: 0.82rem; | |
| color: #ef4444; | |
| } | |
| .wallet-manage-feedback.success { | |
| color: #16a34a; | |
| } | |
| .wallet-manage-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 10px; | |
| padding-top: 4px; | |
| } | |