@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@300;400;500;600&family=Barlow+Condensed:wght@600;700&display=swap');



/* ── Variables ───────────────────────────────────────────── */

:root {

    --navy:          #0a1628;

    --navy-mid:      #132038;

    --navy-light:    #1e3a5f;

    --blue:          #1d6fc4;

    --blue-light:    #e8f0fb;

    --blue-mid:      #155fa0;

    --red:           #e63946;

    --red-light:     #fdecea;

    --silver:        #c0c8d8;

    --silver-light:  #f0f2f5;

    --white:         #ffffff;

    --bg:            #f5f6f8;

    --gray-100:      #f0f2f5;

    --gray-200:      #e2e6ec;

    --gray-400:      #9aa3b0;

    --gray-600:      #5a6475;

    --gray-900:      #1a2030;

    --danger:        #e63946;

    --danger-light:  #fdecea;

    --success:       #1a7a4a;

    --success-light: #edf7f2;

    --warning:       #d4860a;

    --warning-light: #fef3e2;



    --font-display:  'Bebas Neue', sans-serif;

    --font-heading:  'Barlow Condensed', sans-serif;

    --font-body:     'Barlow', sans-serif;



    --radius-sm:     6px;

    --radius-md:     10px;

    --radius-lg:     16px;



    --shadow-sm:     0 1px 3px rgba(0,0,0,0.08);

    --shadow-md:     0 4px 16px rgba(0,0,0,0.10);

    --shadow-lg:     0 8px 32px rgba(0,0,0,0.16);



    --nav-height:    56px;

    --sidebar-width: 210px;



    --transition:    0.2s ease;

}



/* ── Reset ───────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {

    font-family: var(--font-body);

    color: var(--gray-900);

    background: var(--bg);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

}

a { color: var(--blue); text-decoration: none; }

a:hover { color: var(--blue-mid); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }



/* ── Typography ──────────────────────────────────────────── */

h1, h2, h3, h4 {

    font-family: var(--font-heading);

    font-weight: 700;

    letter-spacing: 0.03em;

    text-transform: uppercase;

    line-height: 1.2;

    color: var(--gray-900);

}

h1 { font-size: 28px; }

h2 { font-size: 22px; }

h3 { font-size: 18px; }

h4 { font-size: 15px; }



/* ── Navigation ──────────────────────────────────────────── */

.nav {

    background: var(--navy);

    height: var(--nav-height);

    display: flex;

    align-items: center;

    padding: 0 24px;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;

    box-shadow: 0 2px 8px rgba(0,0,0,0.3);

}

.nav-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-right: 32px;

    text-decoration: none;

}

.nav-logo img {

    height: 38px;

    width: auto;

}

.nav-logo-text {

    font-family: var(--font-display);

    font-size: 24px;

    color: var(--white);

    letter-spacing: 0.06em;

    line-height: 1;

}

.nav-logo-dot {

    width: 8px;

    height: 8px;

    background: var(--red);

    border-radius: 50%;

    flex-shrink: 0;

}

.nav-links {

    display: flex;

    align-items: center;

    height: var(--nav-height);

    gap: 2px;

}

.nav-link {

    font-family: var(--font-heading);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    color: rgba(255,255,255,0.55);

    padding: 0 14px;

    height: var(--nav-height);

    display: flex;

    align-items: center;

    border-bottom: 3px solid transparent;

    transition: color var(--transition), border-color var(--transition);

    text-decoration: none;

}

.nav-link:hover {

    color: rgba(255,255,255,0.85);

    text-decoration: none;

}

.nav-link.active {

    color: var(--white);

    border-bottom-color: var(--blue);

}

.nav-right {

    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 10px;

}

.nav-notif {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: rgba(255,255,255,0.08);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    position: relative;

    transition: background var(--transition);

    border: none;

}

.nav-notif:hover { background: rgba(255,255,255,0.15); }

.nav-notif-dot {

    width: 8px;

    height: 8px;

    background: var(--red);

    border-radius: 50%;

    position: absolute;

    top: 4px;

    right: 4px;

    border: 1.5px solid var(--navy);

}

.nav-avatar {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: var(--blue);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 600;

    color: var(--white);

    cursor: pointer;

    border: 2px solid rgba(255,255,255,0.2);

    transition: border-color var(--transition);

}

.nav-avatar:hover { border-color: rgba(255,255,255,0.5); }



/* ── Page Layout ─────────────────────────────────────────── */

.page-wrap {

    margin-top: var(--nav-height);

    display: flex;

    min-height: calc(100vh - var(--nav-height));

}

.sidebar {

    width: var(--sidebar-width);

    background: var(--white);

    border-right: 0.5px solid var(--gray-200);

    padding: 20px 12px;

    position: fixed;

    top: var(--nav-height);

    bottom: 0;

    overflow-y: auto;

    flex-shrink: 0;

}

.sidebar-section-header:hover {
    background: var(--gray-100);
    border-radius: var(--radius-sm);
}
.sidebar-section-header span:first-child {
    padding: 0;
}

.sidebar-section {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--gray-400);

    padding: 12px 10px 4px;

}

.sidebar-link {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 9px 10px;

    border-radius: var(--radius-sm);

    font-size: 13px;

    font-weight: 500;

    color: var(--gray-600);

    text-decoration: none;

    transition: background var(--transition), color var(--transition);

    margin-bottom: 2px;

}

.sidebar-link:hover {

    background: var(--gray-100);

    color: var(--gray-900);

    text-decoration: none;

}

.sidebar-link.active {

    background: var(--blue-light);

    color: var(--blue);

}

.sidebar-icon {

    width: 18px;

    height: 18px;

    border-radius: 4px;

    background: currentColor;

    opacity: 0.25;

    flex-shrink: 0;

}

.sidebar-link.active .sidebar-icon { opacity: 1; }

.main-content {

    margin-left: var(--sidebar-width);

    flex: 1;

    padding: 24px;

    max-width: 100%;

}

.content-grid {

    display: grid;

    grid-template-columns: 1fr 220px;

    gap: 20px;

    max-width: 960px;

}



/* ── Cards ───────────────────────────────────────────────── */

.card {

    background: var(--white);

    border: 0.5px solid var(--gray-200);

    border-radius: var(--radius-md);

    padding: 16px;

}

.card-title {

    font-family: var(--font-heading);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    color: var(--gray-600);

    margin-bottom: 12px;

    padding-bottom: 10px;

    border-bottom: 0.5px solid var(--gray-200);

}



/* ── Announcement Card ───────────────────────────────────── */

.announce-card {

    background: var(--navy);

    border-radius: var(--radius-md);

    padding: 16px 20px;

    margin-bottom: 12px;

}

.announce-tag {

    font-family: var(--font-heading);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--blue);

    margin-bottom: 6px;

}

.announce-title {

    font-family: var(--font-heading);

    font-size: 18px;

    font-weight: 700;

    color: var(--white);

    margin-bottom: 4px;

}

.announce-body {

    font-size: 13px;

    color: rgba(255,255,255,0.65);

    line-height: 1.5;

}



/* ── Post Cards ──────────────────────────────────────────── */

.post-card {

    background: var(--white);

    border: 0.5px solid var(--gray-200);

    border-radius: var(--radius-md);

    padding: 16px;

    margin-bottom: 12px;

    transition: box-shadow var(--transition);

}

.post-card:hover { box-shadow: var(--shadow-sm); }

.post-header {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

}

.avatar {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: var(--blue);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 600;

    color: var(--white);

    flex-shrink: 0;

    text-transform: uppercase;

}

.avatar-sm {

    width: 28px;

    height: 28px;

    font-size: 10px;

}

.avatar-lg {

    width: 72px;

    height: 72px;

    font-size: 22px;

}

.avatar-navy { background: var(--navy); }

.avatar-red { background: var(--red); }

.avatar-blue { background: var(--blue); }

.post-meta { flex: 1; min-width: 0; }

.post-name {

    font-size: 14px;

    font-weight: 600;

    color: var(--gray-900);

    display: flex;

    align-items: center;

    gap: 6px;

    flex-wrap: wrap;

}

.post-time {

    font-size: 12px;

    color: var(--gray-400);

}

.post-body {

    font-size: 14px;

    color: var(--gray-900);

    line-height: 1.6;

    margin-bottom: 12px;

}

.post-actions {

    display: flex;

    gap: 20px;

    padding-top: 10px;

    border-top: 0.5px solid var(--gray-200);

}

.post-action {

    font-size: 13px;

    font-weight: 500;

    color: var(--gray-400);

    cursor: pointer;

    transition: color var(--transition);

    border: none;

    background: none;

    padding: 0;

    font-family: var(--font-body);

}

.post-action:hover { color: var(--blue); }



/* ── Badges ──────────────────────────────────────────────── */

.badge {

    display: inline-block;

    font-size: 10px;

    font-weight: 700;

    font-family: var(--font-heading);

    letter-spacing: 0.05em;

    text-transform: uppercase;

    padding: 2px 8px;

    border-radius: 20px;

}

.badge-blue { background: var(--blue-light); color: var(--blue); }

.badge-red { background: var(--red-light); color: var(--red); }

.badge-navy { background: var(--navy); color: var(--white); }

.badge-gray { background: var(--gray-100); color: var(--gray-600); }

.badge-success { background: var(--success-light); color: var(--success); }

.badge-warning { background: var(--warning-light); color: var(--warning); }



/* ── Buttons ─────────────────────────────────────────────── */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    font-family: var(--font-heading);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    padding: 10px 22px;

    border-radius: var(--radius-sm);

    border: none;

    cursor: pointer;

    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);

    text-decoration: none;

    line-height: 1;

}

.btn:hover { transform: translateY(-1px); text-decoration: none; }

.btn:active { transform: translateY(0); }

.btn-primary { background: var(--blue); color: var(--white); }

.btn-primary:hover { background: var(--blue-mid); color: var(--white); }

.btn-navy { background: var(--navy); color: var(--white); }

.btn-navy:hover { background: var(--navy-mid); color: var(--white); }

.btn-outline { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }

.btn-outline:hover { background: var(--blue-light); color: var(--blue); }

.btn-danger { background: var(--red); color: var(--white); }

.btn-danger:hover { background: #c1232f; color: var(--white); }

.btn-ghost { background: transparent; color: var(--gray-600); border: 1.5px solid var(--gray-200); }

.btn-ghost:hover { background: var(--gray-100); color: var(--gray-900); }

.btn-sm { padding: 6px 14px; font-size: 12px; }

.btn-lg { padding: 13px 30px; font-size: 16px; }

.btn-full { width: 100%; }



/* ── Forms ───────────────────────────────────────────────── */

.form-group {

    display: flex;

    flex-direction: column;

    gap: 6px;

    margin-bottom: 16px;

}

.form-group:last-child { margin-bottom: 0; }

label {

    font-size: 13px;

    font-weight: 600;

    color: var(--gray-600);

    letter-spacing: 0.01em;

}

input[type="text"],

input[type="email"],

input[type="password"],

input[type="number"],

input[type="date"],

input[type="tel"],

select,

textarea {

    width: 100%;

    padding: 10px 14px;

    border: 1.5px solid var(--gray-200);

    border-radius: var(--radius-sm);

    font-family: var(--font-body);

    font-size: 14px;

    color: var(--gray-900);

    background: var(--white);

    transition: border-color var(--transition), box-shadow var(--transition);

    outline: none;

    appearance: none;

}

input:focus,

select:focus,

textarea:focus {

    border-color: var(--blue);

    box-shadow: 0 0 0 3px rgba(29,111,196,0.12);

}

input::placeholder,

textarea::placeholder { color: var(--gray-400); }

textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

select {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239aa3b0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 12px center;

    padding-right: 36px;

}

.form-hint {

    font-size: 12px;

    color: var(--gray-400);

    margin-top: 2px;

}

.form-error {

    font-size: 12px;

    color: var(--red);

    margin-top: 2px;

}



/* ── Flash Messages ──────────────────────────────────────── */

.flash {

    padding: 12px 16px;

    border-radius: var(--radius-sm);

    font-size: 14px;

    margin-bottom: 16px;

    font-weight: 500;

    border-left: 4px solid;

}

.flash--error {

    background: var(--danger-light);

    color: var(--danger);

    border-left-color: var(--danger);

}

.flash--success {

    background: var(--success-light);

    color: var(--success);

    border-left-color: var(--success);

}

.flash--warning {

    background: var(--warning-light);

    color: var(--warning);

    border-left-color: var(--warning);

}



/* ── Tables ──────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }

table {

    width: 100%;

    border-collapse: collapse;

    font-size: 14px;

}

thead th {

    font-family: var(--font-heading);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--gray-400);

    padding: 10px 14px;

    border-bottom: 1.5px solid var(--gray-200);

    text-align: left;

    white-space: nowrap;

}

tbody td {

    padding: 12px 14px;

    border-bottom: 0.5px solid var(--gray-200);

    color: var(--gray-900);

}

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

tbody tr:hover { background: var(--gray-100); }

.table-rank {

    font-family: var(--font-heading);

    font-weight: 700;

    color: var(--gray-400);

}

.table-rank.first { color: var(--blue); }



/* ── Widget Cards (right column) ─────────────────────────── */

.widget { margin-bottom: 14px; }

.widget-title {

    font-family: var(--font-heading);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--gray-400);

    margin-bottom: 12px;

}

.standing-row {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 6px 0;

    border-bottom: 0.5px solid var(--gray-200);

    font-size: 13px;

}

.standing-row:last-child { border-bottom: none; }

.standing-rank { width: 18px; font-weight: 700; color: var(--gray-400); font-family: var(--font-heading); }

.standing-rank.top { color: var(--blue); }

.standing-team { flex: 1; font-weight: 500; }

.standing-rec { color: var(--gray-400); font-size: 12px; }

.game-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 8px 0;

    border-bottom: 0.5px solid var(--gray-200);

    font-size: 13px;

}

.game-row:last-child { border-bottom: none; }

.game-teams { display: flex; flex-direction: column; gap: 1px; }

.game-team { font-weight: 500; }

.game-info { font-size: 11px; color: var(--gray-400); text-align: right; line-height: 1.6; }



/* ── Auth Layout ─────────────────────────────────────────── */

.auth-body {

    min-height: 100vh;

    height: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    background: var(--navy);

    padding: 40px 16px;

    position: relative;

    overflow-y: auto;

}

.auth-body::before {

    content: '';

    position: absolute;

    top: -100px;

    right: -100px;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    background: rgba(29,111,196,0.08);

    pointer-events: none;

}

.auth-body::after {

    content: '';

    position: absolute;

    bottom: -80px;

    left: -80px;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background: rgba(230,57,70,0.05);

    pointer-events: none;

}

.auth-wrap {

    width: 100%;

    max-width: 420px;

    position: relative;

    z-index: 1;

}

.auth-card {

    background: var(--white);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);

    padding: 40px 36px;

}

.auth-brand {

    text-align: center;

    margin-bottom: 28px;

}

.auth-logo {

    max-height: 80px;

    width: auto;

    margin: 0 auto 12px;

}

.auth-logo-text {

    font-family: var(--font-display);

    font-size: 32px;

    letter-spacing: 0.06em;

    color: var(--navy);

    line-height: 1;

    margin-bottom: 4px;

}

.auth-tagline {

    font-size: 13px;

    color: var(--gray-400);

    font-style: italic;

    font-weight: 400;

}

.auth-divider {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 20px 0;

}

.auth-divider::before,

.auth-divider::after {

    content: '';

    flex: 1;

    height: 0.5px;

    background: var(--gray-200);

}

.auth-divider span {

    font-size: 12px;

    color: var(--gray-400);

    white-space: nowrap;

}

.auth-links {

    margin-top: 16px;

    text-align: center;

    font-size: 13px;

    color: var(--gray-400);

}

.auth-links a { color: var(--blue); font-weight: 500; }

.auth-footer {

    margin-top: 24px;

    text-align: center;

    font-size: 13px;

    color: rgba(255,255,255,0.4);

}

.auth-footer a { color: rgba(255,255,255,0.7); font-weight: 500; }

.auth-footer a:hover { color: var(--white); }



/* ── Footer ──────────────────────────────────────────────── */

.footer {

    background: var(--navy);

    color: rgba(255,255,255,0.5);

    text-align: center;

    padding: 20px 24px;

    font-size: 13px;

    margin-top: auto;

}

.footer strong { color: rgba(255,255,255,0.8); }

.footer a { color: rgba(255,255,255,0.6); }

.footer a:hover { color: var(--white); }



/* ── Utility ─────────────────────────────────────────────── */

.text-center { text-align: center; }

.text-right  { text-align: right; }

.text-muted  { color: var(--gray-400); }

.text-danger { color: var(--red); }

.text-success{ color: var(--success); }

.mt-1 { margin-top: 8px; }

.mt-2 { margin-top: 16px; }

.mt-3 { margin-top: 24px; }

.mb-1 { margin-bottom: 8px; }

.mb-2 { margin-bottom: 16px; }

.mb-3 { margin-bottom: 24px; }

.flex { display: flex; }

.flex-between { display: flex; justify-content: space-between; align-items: center; }

.flex-center  { display: flex; justify-content: center; align-items: center; }

.gap-1 { gap: 8px; }

.gap-2 { gap: 16px; }

.w-full { width: 100%; }

#mobile-menu-btn {
    display: none;
}

@media (max-width: 768px) {
    /* Sidebar — hidden off screen, slides in on toggle */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        width: 260px !important;
        height: 100vh !important;
        z-index: 200 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        transition: left 0.3s ease !important;
        padding-top: 60px !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3) !important;
    }

    .sidebar.mobile-open {
        left: 0 !important;
    }

    /* Page layout */
    .page-wrap {
        overflow: visible !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 16px;
    }

    /* Nav */
    .nav-links { display: none; }
    .nav-logo img { height: 30px; }

    /* Grids */
    .content-grid { grid-template-columns: 1fr; }
    .layout-grid { grid-template-columns: 1fr !important; }

    /* Auth */
    .auth-card { padding: 28px 20px; }

    /* Mobile menu button */
    #mobile-menu-btn {
        display: flex !important;
    }
}