/* =====================================================
   Region NIR Medal Tally System — Custom Styles
   ===================================================== */

/* ── Medal color palette ──────────────────────────── */
:root {
    --gold:    #FFD700;
    --silver:  #C0C0C0;
    --bronze:  #CD7F32;
    --green-1: #1a7a3c;
    --green-2: #28a745;
    --green-3: #5cb85c;

    /* Override Bootstrap primary → green */
    --bs-primary:           #28a745;
    --bs-primary-rgb:       40, 167, 69;
    --bs-link-color:        #28a745;
    --bs-link-color-rgb:    40, 167, 69;
    --bs-link-hover-color:  #1a7a3c;
}

/* ── Medal summary cards ──────────────────────────── */
.medal-card {
    border-radius: 14px;
    transition: transform .18s ease, box-shadow .18s ease;
    border: 1px solid rgba(0,0,0,.08);
}
.medal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;
}
.medal-card.gold   { border-top: 5px solid var(--gold); }
.medal-card.silver { border-top: 5px solid var(--silver); }
.medal-card.bronze { border-top: 5px solid var(--bronze); }
.medal-card.total  { border-top: 5px solid var(--green-2); }

/* ── Medal icon circles ───────────────────────────── */
.medal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.15rem;
}
.medal-icon.gold   { background: #FFF8DC; color: #B8860B; }
.medal-icon.silver { background: #F5F5F5; color: #707070; }
.medal-icon.bronze { background: #FDF0E6; color: #8B4513; }

/* ── Tally table medal cells ──────────────────────── */
.gold-cell   { color: #B8860B; font-weight: 700; }
.silver-cell { color: #808080; font-weight: 700; }
.bronze-cell { color: #8B4513; font-weight: 700; }

.tally-table th { white-space: nowrap; font-size: .85rem; }
.tally-table td { vertical-align: middle; }

/* ── Rank badge ───────────────────────────────────── */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    background: #e9ecef;
    color: #495057;
}

/* ── Page hero banner ─────────────────────────────── */
.page-hero {
    background: linear-gradient(135deg, var(--green-1) 0%, var(--green-2) 60%, var(--green-3) 100%);
    color: #fff;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 15px rgba(26,122,60,.28);
}

/* ── Category pills ───────────────────────────────── */
.category-pills .nav-link {
    font-size: .82rem;
    padding: .3rem .85rem;
    border-radius: 20px;
}
.category-pills .nav-link:not(.active) {
    border: 1px solid #dee2e6;
}

/* ── Offcanvas nav active state ───────────────────── */
.offcanvas .nav-link.active {
    background: #e6f4ec;
    border-left: 4px solid var(--green-2);
    color: var(--green-1) !important;
    font-weight: 600;
}
.offcanvas .nav-link:not(.active):hover {
    background: #f4fbf6;
}

/* ── Medal type selector buttons ─────────────────── */
.medal-type-btn {
    min-width: 100px;
    transition: all .15s;
}
.medal-type-btn.active[data-medal="Gold"] {
    background: var(--gold);
    border-color: var(--gold);
    color: #333;
}
.medal-type-btn.active[data-medal="Silver"] {
    background: var(--silver);
    border-color: var(--silver);
    color: #333;
}
.medal-type-btn.active[data-medal="Bronze"] {
    background: var(--bronze);
    border-color: var(--bronze);
    color: #fff;
}
/* ── Bootstrap primary button overrides ─────────────── */
.btn-primary {
    --bs-btn-bg:                #28a745;
    --bs-btn-border-color:      #28a745;
    --bs-btn-hover-bg:          #1e9638;
    --bs-btn-hover-border-color:#1a7a3c;
    --bs-btn-active-bg:         #1a7a3c;
    --bs-btn-active-border-color:#155d27;
    --bs-btn-disabled-bg:       #28a745;
    --bs-btn-disabled-border-color:#28a745;
    --bs-btn-focus-shadow-rgb:  40, 167, 69;
}
.btn-outline-primary {
    --bs-btn-color:             #28a745;
    --bs-btn-border-color:      #28a745;
    --bs-btn-hover-bg:          #28a745;
    --bs-btn-hover-border-color:#28a745;
    --bs-btn-active-bg:         #1a7a3c;
    --bs-btn-active-border-color:#1a7a3c;
    --bs-btn-focus-shadow-rgb:  40, 167, 69;
}
.form-check-input:checked {
    background-color: #28a745;
    border-color:     #28a745;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #1a7a3c;
    border-top: 3px solid #28a745;
}
.nav-tabs .nav-link:hover:not(.active) {
    color: #28a745;
}
/* ── DataTables overrides ─────────────────────────── */
table.dataTable thead th {
    white-space: nowrap;
}
.dataTables_wrapper .dataTables_filter input {
    border-radius: 20px;
    padding-left: .75rem;
}
.dataTables_wrapper .dataTables_length select {
    border-radius: 8px;
}

/* ── Sticky navbar spacing ────────────────────────── */
body {
    padding-bottom: 2rem;
}

/* ── Responsive fixes for small screens ──────────── */
@media (max-width: 576px) {
    .page-hero          { padding: 1rem; }
    .page-hero h4       { font-size: 1.05rem; }
    .medal-card .display-6 { font-size: 1.8rem; }
    .category-pills .nav-link { font-size: .78rem; padding: .25rem .7rem; }
    .tally-table th,
    .tally-table td     { font-size: .8rem; padding: .4rem .35rem; }
    #levelTabs .nav-link { font-size: .82rem; padding: .4rem .6rem; }
}

/* ── Smooth tab transitions ───────────────────────── */
.tab-pane { animation: fadeInUp .2s ease; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}