/* BankFlow - 테이블 컴포넌트 */

.table-wrap {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: var(--bf-space-3) var(--bf-space-4);
    text-align: left;
    border-bottom: 1px solid var(--bf-border);
    font-size: var(--bf-text-sm);
    white-space: nowrap;
}

.table th {
    font-weight: 600;
    color: var(--bf-text-secondary);
    background-color: var(--bf-bg-hover);
    font-size: var(--bf-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table tbody tr {
    transition: background-color var(--bf-transition);
}

.table tbody tr:hover {
    background-color: var(--bf-bg-hover);
}

/* 금액 정렬 (우측) */
.table .text-right {
    text-align: right;
}

.table .text-center {
    text-align: center;
}

/* 입금/출금 표시 */
.amount-deposit {
    color: var(--bf-deposit);
    font-weight: 600;
    font-family: var(--bf-font-mono);
}

.amount-withdrawal {
    color: var(--bf-withdrawal);
    font-weight: 600;
    font-family: var(--bf-font-mono);
}

/* 뱃지 */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--bf-space-2);
    font-size: var(--bf-text-xs);
    font-weight: 500;
    border-radius: var(--bf-radius-full);
    line-height: 1.5;
}

.badge-deposit {
    background-color: var(--bf-deposit-bg);
    color: var(--bf-deposit);
}

.badge-withdrawal {
    background-color: var(--bf-withdrawal-bg);
    color: var(--bf-withdrawal);
}

.badge-success {
    background-color: var(--bf-success-light);
    color: var(--bf-success);
}

.badge-warning {
    background-color: var(--bf-warning-light);
    color: var(--bf-warning);
}

.badge-danger {
    background-color: var(--bf-danger-light);
    color: var(--bf-danger);
}

.badge-info {
    background-color: var(--bf-info-light);
    color: var(--bf-info);
}

/* 빈 상태 */
.empty-state {
    text-align: center;
    padding: var(--bf-space-12) var(--bf-space-4);
    color: var(--bf-text-muted);
}

.empty-state svg {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--bf-space-4);
    opacity: 0.5;
}

.empty-state p {
    font-size: var(--bf-text-sm);
}