/* ============================================
   POBSI Ranking Tables
   Sporty & Clean Design — Bootstrap 5.1
============================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');

/* --- Variables --- */
:root {
    --r-red:        #8B0000;
    --r-gold:       #C9A227;
    --r-gold-light: rgba(201,162,39,0.09);
    --r-dark:       #111111;
    --r-white:      #ffffff;
    --r-gray:       #f5f5f5;
    --r-border:     rgba(0,0,0,0.07);
    --r-silver:     #9e9e9e;
    --r-shadow:     0 4px 24px rgba(0,0,0,0.08);
}

/* --- Page --- */
.ranking-page {
    background: #e8e8e8;
    min-height: 100vh;
}

/* --- Card --- */
.ranking-card {
    background: var(--r-white);
    box-shadow: var(--r-shadow);
    overflow: hidden;
    border-top: 4px solid var(--r-red);
    margin-bottom: 2rem;
}

/* --- Card Header --- */
.ranking-card-header {
    background: var(--r-dark);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.ranking-tbl-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--r-white);
    margin: 0;
    border-left: 4px solid var(--r-gold);
    padding-left: 14px;
    line-height: 1.2;
}

.ranking-update-tag {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.3);
    white-space: nowrap;
}

/* --- Table --- */
.ranking-tbl {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: var(--r-white);
}

/* thead */
.ranking-tbl thead th {
    background: #1a1a1a;
    color: rgba(255,255,255,0.55);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 11px 16px;
    border: none;
    white-space: nowrap;
}

.ranking-tbl thead th.th-no    { width: 36px; color: rgba(255,255,255,0.25); text-align: center; }
.ranking-tbl thead th.th-rank  { width: 50px; }
.ranking-tbl thead th.th-score { text-align: center; }
.ranking-tbl thead th.th-total { text-align: center; color: var(--r-gold); }

/* tbody rows */
.ranking-tbl tbody tr {
    border-bottom: 1px solid var(--r-border);
    transition: background 0.15s ease;
}

.ranking-tbl tbody tr:last-child { border-bottom: none; }
.ranking-tbl tbody tr:hover      { background: var(--r-gray) !important; }

.ranking-tbl tbody td {
    padding: 11px 16px;
    border: none;
    vertical-align: middle;
}

/* Row rank tints */
.tr-r1 { background: var(--r-gold-light); }
.tr-r2 { background: rgba(158,158,158,0.05); }
.tr-r3 { background: rgba(139,0,0,0.04); }

/* --- Rank Badge --- */
.r-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
}

.r-badge-1 { background: var(--r-gold);   color: var(--r-dark);  }
.r-badge-2 { background: var(--r-silver); color: var(--r-dark);  }
.r-badge-3 { background: var(--r-red);    color: var(--r-white); }
.r-badge-n { background: #e5e5e5;         color: #aaa;           }

/* --- Player Cell --- */
.td-player { min-width: 150px; }

.player-name {
    font-weight: 600;
    font-size: 0.87rem;
    color: var(--r-dark);
    line-height: 1.3;
    display: block;
}

.player-sub {
    font-size: 0.68rem;
    color: #bbb;
    font-weight: 500;
    display: block;
    margin-top: 1px;
}

/* --- No Cell --- */
.td-no {
    font-size: 0.72rem;
    color: #ccc;
    font-weight: 600;
    text-align: center;
    width: 36px;
}

/* --- Score Cell --- */
.td-score {
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #555;
    min-width: 80px;
}

.td-score.is-null { color: #d8d8d8; font-size: 0.8rem; }

/* --- Total Cell --- */
.td-total {
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--r-dark);
    min-width: 64px;
}

.tr-r1 .td-total { color: var(--r-gold); }

/* --- Country Cell (heyball) --- */
.td-country {
    font-size: 0.8rem;
    color: #888;
    font-weight: 500;
}

/* --- Heyball Section Label --- */
.category-label {
    display: inline-block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 3px 18px 3px 10px;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
}

.category-label-bg    { background: var(--r-red);   color: var(--r-white); }

/* --- Responsive --- */
@media (max-width: 576px) {
    .ranking-card-header  { padding: 12px 14px; }
    .ranking-tbl-title    { font-size: 1rem; letter-spacing: 2px; }
    .ranking-tbl thead th,
    .ranking-tbl tbody td { padding: 9px 10px; }
    .td-score, .td-total  { font-size: 0.85rem; }
    .player-name          { font-size: 0.82rem; }
    .r-badge              { min-width: 26px; height: 20px; font-size: 0.7rem; }
}

.table-responsive {
    padding: unset !important;
}