/**
 * 배팅내역 페이지 스타일 - 테이블 기반 레이아웃
 */

/* ================= Tab Navigation ================= */
.details-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    background: var(--bg-card);
    padding: 0.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.tab-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.tab-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.tab-btn.active {
    background: var(--gold-primary);
    color: #000;
}

/* ================= Sub Tabs ================= */
.details-sub-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.sub-tab-btn {
    padding: 0.5rem 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s;
}

.sub-tab-btn:hover {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}

.sub-tab-btn.active {
    background: var(--gold-primary);
    border-color: var(--gold-primary);
    color: #000;
}

/* ================= Date Search ================= */
.date-search-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.date-search-box form {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.date-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-inputs input[type="date"] {
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.date-inputs span {
    color: var(--text-secondary);
}

.date-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-search {
    padding: 0.5rem 1rem;
    background: var(--gold-primary);
    border: none;
    border-radius: var(--radius-sm);
    color: #000;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.btn-reset {
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.btn-reset:hover {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}

/* ================= Empty Message ================= */
.empty-message {
    text-align: center;
    padding: 3rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}

.empty-message i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    display: block;
}

.empty-message p {
    font-size: 1rem;
}

/* ================= Betting List (테이블 기반) ================= */
.betting-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 상세보기 토글 버튼 */
.slip-toggle-btn {
    padding: 8px 15px;
    background: var(--gold-primary);
    color: #000;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.slip-toggle-btn:hover {
    background: var(--gold-hover);
}

.slip-toggle-btn i {
    transition: transform 0.3s;
}

.slip-toggle-btn.active i {
    transform: rotate(180deg);
}

/* 미니 배팅 요약 박스 */
.betting-mini-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-bottom: 10px;
}

.mini-bet-box {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    min-width: 40px;
    justify-content: center;
    border: 1px solid transparent;
}

.mini-bet-box.won {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: #22c55e;
}

.mini-bet-box.lost {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: #ef4444;
}

.mini-bet-box.pending {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: #3b82f6;
}

.mini-bet-box.void {
    background: rgba(234, 179, 8, 0.15);
    color: #facc15;
    border-color: #eab308;
}

.mini-bet-box.cancelled {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    border-color: #6b7280;
}

.mini-bet-box .status-icon {
    margin-left: 3px;
    font-weight: bold;
}

/* 상세 테이블 래퍼 */
.details-line3 {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 0;
    max-width: 100%;
    overflow: hidden;
}

.details-table-wrapper {
    margin-top: 10px;
    overflow-x: auto;
    max-width: 100%;
}

/* 상세 테이블 */
.details-table {
    width: 100%;
    border-collapse: collapse;
}

.details-table th,
.details-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    white-space: nowrap;
}

.details-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-secondary);
}

.details-table td {
    color: var(--text-primary);
}

.details-table tbody tr:hover {
    background: rgba(212, 175, 55, 0.05);
}

/* 팀 아이콘 */
.team-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin: 0 3px;
}

/* 배팅 타입 뱃지 */
.pick-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--gold-primary);
    color: #000;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
}

/* 결과 뱃지 */
.result-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.result-badge.status-pending {
    background: #3b82f6;
    color: #fff;
}

.result-badge.status-won {
    background: #22c55e;
    color: #fff;
}

.result-badge.status-lost {
    background: #ef4444;
    color: #fff;
}

.result-badge.status-void {
    background: #eab308;
    color: #000;
}

.result-badge.status-cancelled {
    background: #6b7280;
    color: #fff;
}

/* 보너스 행 */
.bonus-row {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
}

.bonus-row td {
    color: var(--gold-primary);
    font-weight: 600;
}

.bonus-row i {
    color: var(--gold-primary);
    margin-right: 5px;
}

/* ================= 배팅 정보 푸터 (details-line4) ================= */
.details-line4 {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 12px 15px;
    margin-top: -1px;
}

.details-line4 .info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.details-line4 .info-row:last-child {
    margin-bottom: 0;
}

.details-line4 .info-row span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.details-line4 strong {
    color: var(--text-primary);
}

.details-line4 strong.gold {
    color: var(--gold-primary);
}

.details-line4 .inplay-badge {
    background: #ff6600;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

/* 상태 버튼 */
.slip-status-btn {
    padding: 6px 15px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: default;
}

.slip-status-btn.status-pending {
    background: #3b82f6;
    color: #fff;
}

.slip-status-btn.status-won {
    background: #22c55e;
    color: #fff;
}

.slip-status-btn.status-lost {
    background: #ef4444;
    color: #fff;
}

.slip-status-btn.status-void {
    background: #eab308;
    color: #000;
}

.slip-status-btn.status-cancelled {
    background: #6b7280;
    color: #fff;
}

/* 액션 버튼 */
.actions-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-cancel {
    padding: 6px 12px;
    background: #3b82f6;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-cancel:hover {
    background: #2563eb;
}

.btn-delete {
    padding: 6px 12px;
    background: #ef4444;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-delete:hover {
    background: #dc2626;
}

/* 슬립 구분선 */
.slip-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 15px 0;
}

/* ================= Casino Table ================= */
.casino-list {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

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

.casino-table th,
.casino-table td {
    padding: 0.75rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.casino-table th {
    background: var(--bg-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.casino-table td {
    font-size: 0.85rem;
}

.casino-table .amount {
    font-weight: 600;
}

.casino-table .amount.bet { color: #3b82f6; }
.casino-table .amount.win { color: #22c55e; }
.casino-table .amount.profit { color: #22c55e; }
.casino-table .amount.loss { color: #ef4444; }

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.pending { background: #3b82f6; color: #fff; }
.status-badge.won { background: #22c55e; color: #fff; }
.status-badge.lost { background: #ef4444; color: #fff; }
.status-badge.void { background: #eab308; color: #000; }
.status-badge.cancelled { background: #6b7280; color: #fff; }

/* ================= Pagination ================= */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 1.5rem;
}

.page-btn {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s;
}

.page-btn:hover:not(.disabled) {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}

.page-btn.active {
    background: var(--gold-primary);
    border-color: var(--gold-primary);
    color: #000;
}

.page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ================= Responsive ================= */
@media (max-width: 768px) {
    .date-search-box form {
        flex-direction: column;
        align-items: stretch;
    }

    .date-inputs {
        justify-content: center;
    }

    .date-buttons {
        justify-content: center;
    }

    /* 모바일 - 테이블 wrapper에서 수평 스크롤 (bam-99.com 스타일) */
    .betting-list {
        max-width: 100%;
    }

    .details-line3 {
        max-width: 100%;
        overflow-x: auto;
        padding: 5px;
        border-radius: 0;
    }

    .details-table-wrapper {
        overflow-x: auto;
    }

    .details-table {
        min-width: 700px;
    }

    /* 푸터 정보 */
    .details-line4 .info-row {
        flex-direction: column;
        gap: 8px;
    }

    .actions-row {
        flex-wrap: wrap;
    }

    /* 카지노 테이블도 수평 스크롤 */
    .casino-list {
        overflow-x: auto;
    }

    .casino-table {
        min-width: 600px;
        font-size: 0.75rem;
    }

    .casino-table th,
    .casino-table td {
        padding: 0.5rem 0.25rem;
    }
}