/* =====================================================================
   CRICKET CLUB - PLAYER PANEL THEME
   Palette: deep pitch green -> emerald gradient, gold/amber accent
   ===================================================================== */

:root {
    --pitch-dark: #05341f;
    --pitch: #0b6b3a;
    --pitch-light: #12a150;
    --gold: #f4b41a;
    --gold-dark: #d99a06;
    --cream: #fff8ea;
    --ink: #0e2b1e;
}

body {
    background: linear-gradient(180deg, #f3fbf6 0%, #eef6f1 100%);
    font-family: 'Poppins', 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--ink);
}

/* ---------------------------------------------------------------------
   NAVBAR - gradient pitch-green with gold accents
   --------------------------------------------------------------------- */
.site-navbar {
    background: linear-gradient(100deg, var(--pitch-dark) 0%, var(--pitch) 55%, var(--pitch-light) 100%) !important;
    border-bottom: 3px solid var(--gold);
}

.site-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--cream) !important;
}

.site-navbar .navbar-brand i { color: var(--gold); }

.site-navbar .nav-link {
    color: rgba(255,255,255,.88) !important;
    font-weight: 500;
    transition: color .15s ease;
}

.site-navbar .nav-link:hover { color: var(--gold) !important; }

.site-navbar .btn-cta {
    background: var(--gold);
    color: var(--ink) !important;
    font-weight: 600;
    border-radius: 999px;
    padding: .4rem 1.1rem;
}

.site-navbar .btn-cta:hover { background: var(--gold-dark); }

/* ---------------------------------------------------------------------
   HERO BANNER (landing page)
   --------------------------------------------------------------------- */
.hero-banner {
    background: linear-gradient(120deg, var(--pitch-dark) 0%, var(--pitch) 60%, var(--pitch-light) 100%);
    border-radius: 1rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(11,107,58,.25);
}

.hero-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 20%, rgba(244,180,26,.25), transparent 45%);
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   CARDS
   --------------------------------------------------------------------- */
.card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(11,107,58,.08);
    transition: transform .15s ease, box-shadow .15s ease;
}

.card:hover { box-shadow: 0 8px 24px rgba(11,107,58,.14); }

.card-header {
    border-radius: 1rem 1rem 0 0 !important;
    font-weight: 600;
    border-bottom: none;
}

.card-header.bg-success,
.card-header.theme-header {
    background: linear-gradient(90deg, var(--pitch-dark), var(--pitch)) !important;
}

/* ---------------------------------------------------------------------
   PROFILE HERO (dashboard header with circular photo)
   --------------------------------------------------------------------- */
.profile-hero {
    background: linear-gradient(120deg, var(--pitch-dark) 0%, var(--pitch) 65%, var(--pitch-light) 100%);
    border-radius: 1rem;
    color: #fff;
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(11,107,58,.25);
}

.profile-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 90% 10%, rgba(244,180,26,.3), transparent 50%);
    pointer-events: none;
}

.avatar-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--gold);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    background: #fff;
}

.avatar-circle-placeholder {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 4px solid var(--gold);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    background: var(--cream);
    color: var(--pitch);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------------
   STAT BOXES
   --------------------------------------------------------------------- */
.stat-box {
    background: #fff;
    border-radius: 1rem;
    padding: 1.3rem 1rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(11,107,58,.08);
    border-top: 4px solid var(--gold);
    transition: transform .15s ease;
}

.stat-box:hover { transform: translateY(-3px); }

.stat-box h3 {
    margin: 0;
    font-weight: 800;
    font-size: 1.9rem;
    background: linear-gradient(90deg, var(--pitch), var(--pitch-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-box small {
    color: #5b6b62;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   BADGES / BUTTONS
   --------------------------------------------------------------------- */
.badge-category {
    font-size: .85rem;
    padding: .45em .8em;
    background: var(--gold) !important;
    color: var(--ink) !important;
    font-weight: 600;
}

.btn-success {
    background: linear-gradient(90deg, var(--pitch), var(--pitch-light));
    border: none;
}

.btn-success:hover {
    background: linear-gradient(90deg, var(--pitch-dark), var(--pitch));
}

.btn-outline-success {
    color: var(--pitch);
    border-color: var(--pitch);
}

.btn-outline-success:hover {
    background: var(--pitch);
    border-color: var(--pitch);
}

.education-row {
    border: 1px solid #e2ece5;
    border-radius: .75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fbfdfc;
}

/* ---------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------- */
footer.site-footer {
    background: linear-gradient(100deg, var(--pitch-dark), var(--pitch)) !important;
}

/* ---------------------------------------------------------------------
   RESPONSIVE HELPERS
   --------------------------------------------------------------------- */
@media (max-width: 576px) {
    .table-responsive-stack td { display: block; text-align: right; }
    .table-responsive-stack td::before { content: attr(data-label); float: left; font-weight: 600; }
    .avatar-circle, .avatar-circle-placeholder { width: 84px; height: 84px; font-size: 2rem; }
    .profile-hero { text-align: center; }
}