/* ========== المعاملات + الفلتر ========== */
.transactions-list { padding: 0 20px; }

.transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--card);
    border: 1.5px solid var(--card-border);
    border-radius: 16px;
    margin-bottom: 10px;
    transition: all 0.2s;
}
.transaction-item:hover { border-color: var(--border-light); }

.transaction-left { display: flex; align-items: center; gap: 14px; }

.tx-icon {
    width: 44px; height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tx-icon.deposit { background: var(--success-bg); color: var(--success); }
.tx-icon.withdraw { background: var(--error-bg); color: var(--error); }
.tx-icon.bank-withdraw { background: rgba(251,191,36,0.1); color: #FBBF24; }
.tx-icon.transfer { background: var(--primary-glow); color: var(--primary); }

.tx-info h4 { font-size: 14px; font-weight: 500; }
.tx-info p { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

.tx-amount { font-size: 15px; font-weight: 700; }
.tx-positive { color: var(--success); }
.tx-negative { color: var(--error); }

.tx-status {
    font-size: 10px;
    padding: 3px 10px;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 5px;
    display: inline-block;
}
.status-completed { background: var(--success-bg); color: var(--success); }
.status-pending { background: var(--warning-bg); color: var(--warning); }

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.empty-state .empty-icon {
    width: 80px; height: 80px;
    background: var(--bg-light);
    border: 1.5px solid var(--card-border);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    color: var(--text-muted);
}

.filter-bar {
    display: flex;
    gap: 8px;
    padding: 0 20px;
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }

.filter-btn {
    padding: 9px 20px;
    background: var(--card);
    border: 1.5px solid var(--card-border);
    border-radius: 24px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.filter-btn:hover, .filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* ========== بطاقة إشعار المعاملات ========== */
.tx-notify-card {
    background: var(--card);
    border: 1.5px solid var(--card-border);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}
.tx-notify-receive {
    border-color: rgba(74,222,128,0.3);
}
.tx-notify-send {
    border-color: rgba(248,113,113,0.3);
}
.tx-notify-arrow {
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tx-notify-receive .tx-notify-arrow { background: rgba(74,222,128,0.08); }
.tx-notify-send .tx-notify-arrow { background: rgba(248,113,113,0.08); }

.tx-notify-arrow-inner {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tx-notify-receive .tx-notify-arrow-inner { color: #4ADE80; }
.tx-notify-send .tx-notify-arrow-inner { color: #F87171; }
.tx-notify-arrow-dir {
    margin-top: 2px;
}

.tx-notify-body {
    flex: 1;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.tx-notify-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.tx-notify-key {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.tx-notify-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    direction: ltr;
    font-family: monospace;
    text-align: left;
}
.tx-notify-val.tx-positive { color: var(--success); }
.tx-notify-val.tx-negative { color: var(--error); }

.tx-notify-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.tx-notify-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 16px 14px 0;
}
.tx-notify-id {
    font-size: 10px;
    color: var(--text-muted);
    font-family: monospace;
}