/* =============================================
   AVC Beach Tour – Raja Ampat Open 2026
   Teams Page Stylesheet
   ============================================= */

/* Active nav highlight */
.nav-active{color:var(--orange-glow) !important}

/* ========================================
   PAGE HEADER — compact banner
   ======================================== */
.page-header{
    position:relative;
    padding:110px 0 50px;
    overflow:hidden;
    text-align:center;
}

.page-header-content{
    position:relative;
    z-index:2;
}

.page-header-icon{
    width:72px;height:72px;
    margin:0 auto 18px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.2);
    border:2px solid rgba(255,255,255,.25);
    backdrop-filter:blur(10px);
}
.page-header-icon i{
    font-size:1.6rem;
    color:var(--orange-glow);
}

.page-header-title{
    font-family:var(--font-hero);
    font-size:3.2rem;
    color:var(--white);
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:8px;
    text-shadow:0 4px 30px rgba(0,0,0,.3);
}

.page-header-sub{
    font-size:.92rem;
    color:rgba(255,255,255,.7);
    font-weight:500;
}

/* ========================================
   TEAMS MAIN
   ======================================== */
.teams-main{
    position:relative;
    background:#ffffff;
    padding:40px 0 80px;
    min-height:50vh;
}

/* ── Tabs ── */
.teams-tabs{
    display:flex;
    gap:8px;
    margin-bottom:28px;
    justify-content:center;
}

.tab-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 28px;
    font-family:var(--font-head);
    font-size:1rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#666;
    background:#f0f0f0;
    border:1px solid #ddd;
    border-radius:50px;
    cursor:pointer;
    transition:.3s var(--ease);
}

.tab-btn:hover:not([disabled]){
    color:#333;
    background:#e4e4e4;
}

.tab-btn.active{
    color:var(--white);
    background:linear-gradient(135deg, var(--orange) 0%, var(--orange-glow) 100%);
    border-color:var(--orange);
    box-shadow:0 4px 20px rgba(255,107,0,.3);
}

.tab-btn[disabled]{
    opacity:.35;
    cursor:not-allowed;
}

.tab-btn small{
    font-size:.65rem;
    opacity:.7;
    font-weight:400;
    letter-spacing:.02em;
}

/* ── Tab panels ── */
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeIn .4s var(--ease) both}

/* ── Summary bar ── */
.teams-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
    padding:12px 20px;
    background:#f8f9fa;
    border:1px solid #e9ecef;
    border-radius:var(--radius);
}

.teams-count{
    font-size:.88rem;
    font-weight:600;
    color:#555;
    display:flex;
    align-items:center;
    gap:8px;
}
.teams-count i{
    color:var(--orange-glow);
    font-size:.75rem;
}

/* ========================================
   DESKTOP TABLE
   ======================================== */
.teams-table-wrap{
    overflow-x:auto;
    border-radius:var(--radius-lg);
    border:1px solid #e0e0e0;
    background:#fff;
}

.teams-table{
    width:100%;
    border-collapse:collapse;
    font-size:.84rem;
    color:#333;
}

.teams-table thead{
    background:#003f7f;
}

.teams-table th{
    font-family:var(--font-head);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(255,255,255,.85);
    padding:14px 12px;
    text-align:left;
    white-space:nowrap;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.teams-table td{
    padding:12px;
    border-bottom:1px solid #eee;
    vertical-align:middle;
}

.teams-table tbody tr{
    transition:.2s var(--ease);
}

.teams-table tbody tr:hover{
    background:#f5f7fa;
}

.teams-table tbody tr:last-child td{
    border-bottom:none;
}

/* Columns */
.col-pos{
    text-align:center;
    font-family:var(--font-hero);
    font-size:1.1rem;
    color:#aaa;
    width:50px;
    white-space:nowrap;
}

.col-nf{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}

.flag{
    font-size:1.3rem;
    line-height:1;
}

.nf-code{
    font-weight:700;
    color:#555;
    font-size:.78rem;
    letter-spacing:.04em;
}

.col-team{
    font-weight:600;
    color:#222;
    white-space:normal;
    min-width:90px;
}

.col-player{
    color:#444;
    white-space:normal;
    word-break:break-word;
    min-width:120px;
    max-width:200px;
    line-height:1.35;
}

.col-pts{
    text-align:center;
    font-size:.82rem;
    color:#666;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.col-total{
    text-align:center;
    font-family:var(--font-hero);
    font-size:1.15rem;
    color:var(--orange-glow);
    white-space:nowrap;
}



/* ========================================
   MOBILE CARDS (hidden on desktop)
   ======================================== */
.teams-cards{display:none}

.team-card{
    background:#f8f9fa;
    border:1px solid #e0e0e0;
    border-radius:var(--radius-lg);
    margin-bottom:10px;
    overflow:hidden;
    transition:.2s var(--ease);
}

.team-card:hover{
    background:#f0f2f5;
    border-color:#ccc;
}

.team-card-header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
}

.team-rank{
    font-family:var(--font-hero);
    font-size:1.4rem;
    color:#bbb;
    min-width:30px;
    text-align:center;
}

.team-flag{
    font-size:1.8rem;
    line-height:1;
}

.team-card-info{
    flex:1;
    min-width:0;
}

.team-name{
    display:block;
    font-size:.92rem;
    color:#222;
    font-weight:700;
}

.team-nf{
    display:block;
    font-size:.72rem;
    color:#888;
    font-weight:500;
    margin-top:2px;
}

.team-total-pts{
    font-family:var(--font-hero);
    font-size:1.5rem;
    color:var(--orange-glow);
    line-height:1;
    text-align:right;
}

.team-total-pts small{
    display:block;
    font-family:var(--font);
    font-size:.55rem;
    color:#999;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:700;
    margin-top:2px;
}

.team-card-players{
    padding:0 16px 14px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.player-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 12px;
    background:#eef1f5;
    border-radius:8px;
}

.player-name{
    font-size:.82rem;
    color:#444;
    font-weight:500;
}

.player-name i{
    color:#bbb;
    margin-right:6px;
    font-size:.7rem;
}

.player-pts{
    font-size:.72rem;
    color:#777;
    font-weight:500;
    font-variant-numeric:tabular-nums;
}



/* ── Empty state ── */
.teams-empty{
    text-align:center;
    padding:80px 20px;
    color:#aaa;
}
.teams-empty i{
    font-size:2.5rem;
    margin-bottom:16px;
    display:block;
    color:#ccc;
}
.teams-empty p{
    font-size:1rem;
    font-weight:500;
}

/* ========================================
   FOOTER (reuse from coming-soon.css)
   ======================================== */
.cs-footer{
    position:relative;
    z-index:3;
    padding:14px 0;
    background:#f0f0f0;
    border-top:1px solid #ddd;
}

.cs-footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media(max-width:1024px){
    .teams-table .col-pts{font-size:.75rem;padding:10px 8px}
    .teams-table .col-player{font-size:.8rem}
}

@media(max-width:768px){
    .page-header{padding:100px 0 40px}
    .page-header-title{font-size:2.4rem}
    .page-header-icon{width:60px;height:60px}
    .page-header-icon i{font-size:1.3rem}

    /* Hide table, show cards */
    .teams-table-wrap{display:none}
    .teams-cards{display:block}

    .teams-main{padding:30px 0 60px}

    .cs-footer-inner{
        justify-content:center;
        text-align:center;
        flex-direction:column;
        gap:8px;
    }
}

@media(max-width:480px){
    .page-header-title{font-size:2rem}
    .tab-btn{padding:10px 20px;font-size:.88rem}
    .team-card-header{padding:12px 12px}
    .team-card-players{padding:0 12px 12px}
    .player-row{flex-direction:column;align-items:flex-start;gap:3px;padding:6px 10px}
}

/* ─────────────────────────────────────
   BREAKDOWN / EXPANDABLE DETAIL ROWS
   ───────────────────────────────────── */

/* ── Expand icon on team rows ── */
.expand-icon {
    font-size: .7rem;
    color: #aaa;
    margin-left: 6px;
    transition: transform .3s ease, color .3s ease;
}
.team-row:hover .expand-icon { color: #555; }
.team-row.expanded .expand-icon { transform: rotate(180deg); color: var(--orange); }

/* ── Desktop detail row ── */
.detail-row {
    display: none;
    background: #f5f7fa;
}
.detail-row.open {
    display: table-row;
}
.detail-row > td {
    padding: 0 !important;
    border-top: none !important;
}
.detail-inner {
    padding: 20px 24px;
    animation: bdSlideDown .35s ease;
}
@keyframes bdSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Grid for two players side by side ── */
.bd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ── Player block ── */
.bd-player {
    background: #eef1f5;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #dde1e6;
}
.bd-player-name {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #222;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bd-player-name i {
    color: var(--orange);
    font-size: .85rem;
}
.bd-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bd-section-head {
    font-family: 'Inter', sans-serif;
    font-size: .82rem;
    color: #555;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bd-label {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.bd-label-avc {
    background: var(--orange);
    color: #fff;
}
.bd-label-fivb {
    background: var(--sky);
    color: #fff;
}

/* ── Breakdown tables (inside detail) ── */
.bd-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    font-size: .78rem;
}
.bd-table thead th {
    background: #d9e2ec;
    color: #444;
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-bottom: 1px solid #c5cdd7;
}
.bd-table tbody td {
    padding: 5px 8px;
    color: #333;
    border-bottom: 1px solid #e8ecf0;
}
.bd-table tbody tr:last-child td {
    border-bottom: none;
}
.bd-table tbody tr:hover td {
    background: #e8ecf0;
}
.bd-center { text-align: center; }
.bd-pts { font-weight: 700; color: var(--orange); }
.bd-none {
    font-size: .8rem;
    color: #aaa;
    font-style: italic;
    margin: 4px 0 0;
}

/* ── Mobile card expand icon ── */
.card-expand-icon {
    font-size: .7rem;
    color: #aaa;
    transition: transform .3s ease;
    margin-left: 8px;
    flex-shrink: 0;
}
.team-card.card-open .card-expand-icon {
    transform: rotate(180deg);
    color: var(--orange);
}

/* ── Mobile card detail section ── */
.card-detail {
    display: none;
    padding: 0 14px 14px;
}
.team-card.card-open .card-detail {
    display: block;
    animation: bdSlideDown .35s ease;
}
.team-card.card-open {
    border-color: var(--orange);
    box-shadow: 0 0 20px rgba(255,107,0,.12);
}

/* ── Mobile breakdown grid stacks vertically ── */
@media(max-width:900px){
    .bd-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
@media(max-width:480px){
    .bd-player { padding: 12px; }
    .bd-table { font-size: .72rem; }
    .bd-table thead th { padding: 5px 6px; font-size: .68rem; }
    .bd-table tbody td { padding: 4px 6px; }
    .bd-player-name { font-size: .9rem; }
    .card-detail { padding: 0 10px 10px; }
}