/* ============================================
   BNI Vinci — The Gangster League
   Light Theme Stylesheet
   ============================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f2f2f2;
    color: #1a1a1a;
    min-height: 100vh;
}

/* NAV */
nav {
    background: #1a1a1a;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 62px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    position: sticky;
    top: 0;
    z-index: 50;
}
nav .brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
nav .brand img { height:42px; object-fit:contain; }
nav .brand-fallback { color:#fff; font-size:1rem; font-weight:800; letter-spacing:.5px; }
nav .nav-links { display:flex; align-items:center; gap:2px; }
nav .nav-links a {
    color:#ccc; text-decoration:none; font-size:.85rem;
    padding:6px 13px; border-radius:4px; transition:all .15s;
}
nav .nav-links a:hover { background:#333; color:#fff; }
nav .nav-links a.active { background:#C8102E; color:#fff; }
nav .nav-links .logout { color:#ff6b6b; }
nav .nav-links .logout:hover { background:rgba(200,16,46,.2); }
nav .nav-user { color:#888; font-size:.8rem; display:flex; align-items:center; gap:8px; }

/* CONTAINER */
.container { max-width:1140px; margin:26px auto; padding:0 20px; }
.container-sm { max-width:440px; margin:60px auto; padding:0 20px; }

/* CARD */
.card {
    background:#fff; border-radius:10px; padding:24px;
    margin-bottom:20px; border:1px solid #e4e4e4;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.card h2 {
    font-size:.8rem; color:#C8102E; margin-bottom:16px;
    text-transform:uppercase; letter-spacing:1.5px; font-weight:700;
    border-bottom:2px solid #f4f4f4; padding-bottom:10px;
}

/* LOGIN */
.login-page {
    min-height:100vh; background:#1a1a1a;
    display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-card {
    background:#000000; border-radius:14px; padding:42px 38px;
    width:420px; max-width:100%;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
    text-align:center;
}
.login-logo { max-width:200px; height:auto; margin-bottom:6px; }
.login-tagline { font-size:.7rem; color:#aaa; letter-spacing:2px; text-transform:uppercase; margin-bottom:28px; }
.login-title { font-size:1rem; color:#444; margin-bottom:22px; font-weight:600; }

/* FORM */
.form-group { margin-bottom:15px; text-align:left; }
.form-group label {
    display:block; font-size:.75rem; color:#fff;
    margin-bottom:5px; text-transform:uppercase;
    letter-spacing:.5px; font-weight:600;
}
.form-group input,
.form-group select,
.form-group textarea {
    width:100%; padding:10px 13px;
    background:#fafafa; border:1.5px solid #ddd;
    border-radius:6px; color:#1a1a1a; font-size:.92rem;
    transition:border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline:none; border-color:#C8102E;
    box-shadow:0 0 0 3px rgba(200,16,46,.1);
    background:#fff;
}
.input-highlight input,
.input-highlight select { border-color:#C8102E; background:#fff9f9; }

/* BUTTONS */
.btn {
    display:inline-block; padding:10px 22px; border:none;
    border-radius:6px; cursor:pointer; font-size:.87rem;
    font-weight:600; text-decoration:none; transition:all .15s;
}
.btn:active { transform:scale(.98); }
.btn-primary { background:#C8102E; color:#fff; }
.btn-primary:hover { background:#a80d26; }
.btn-secondary { background:#f0f0f0; color:#444; border:1px solid #ddd; }
.btn-secondary:hover { background:#e4e4e4; }
.btn-danger { background:#e74c3c; color:#fff; }
.btn-danger:hover { background:#c0392b; }
.btn-dark { background:#1a1a1a; color:#fff; }
.btn-dark:hover { background:#333; }
.btn-sm { padding:5px 12px; font-size:.77rem; }
.btn-full { display:block; width:100%; text-align:center; padding:12px; }

/* ALERTS */
.alert { padding:11px 15px; border-radius:6px; margin-bottom:16px; font-size:.87rem; font-weight:500; }
.alert-error   { background:#fdf0f0; border:1px solid #f5c6cb; color:#c0392b; }
.alert-success { background:#f0fdf4; border:1px solid #b2dfdb; color:#1e7e34; }
.alert-info    { background:#fff8e1; border:1px solid #ffe082; color:#856404; }

/* STATS GRID */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:14px; margin-bottom:22px; }
.stat-card {
    background:#fff; border-radius:10px; padding:18px 14px;
    text-align:center; border:1px solid #e4e4e4;
    box-shadow:0 1px 4px rgba(0,0,0,.05);
    transition:transform .15s, box-shadow .15s;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
.stat-card .stat-value { font-size:1.85rem; font-weight:800; color:#C8102E; line-height:1.1; }
.stat-card .stat-label { font-size:.7rem; color:#888; margin-top:4px; text-transform:uppercase; letter-spacing:.8px; font-weight:600; }
.stat-card.highlight { background:#C8102E; border-color:#C8102E; }
.stat-card.highlight .stat-value,
.stat-card.highlight .stat-label { color:#fff; }
.stat-card.dark { background:#1a1a1a; border-color:#1a1a1a; }
.stat-card.dark .stat-value,
.stat-card.dark .stat-label { color:#fff; }
.stat-card.dark .stat-value { color:#C8102E; }

/* TABLE */
.table-wrap { overflow-x:auto; border-radius:8px; border:1px solid #e4e4e4; }
table { width:100%; border-collapse:collapse; font-size:.87rem; background:#fff; }
table th {
    background:#f7f7f7; padding:11px 14px; text-align:left;
    color:#666; font-size:.72rem; text-transform:uppercase;
    letter-spacing:.8px; font-weight:700;
    border-bottom:1px solid #e4e4e4;
}
table td { padding:11px 14px; border-bottom:1px solid #f2f2f2; color:#333; }
table tr:last-child td { border-bottom:none; }
table tr:hover td { background:#fafafa; }
.total-col { color:#C8102E !important; font-weight:700; }
.week-col  { color:#1a1a1a !important; font-weight:700; }

/* BADGES */
.badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:.71rem; font-weight:700; }
.badge-admin    { background:#fde8ec; color:#C8102E; }
.badge-user     { background:#e8f4fd; color:#1565c0; }
.badge-active   { background:#e8f8f0; color:#1e7e34; }
.badge-inactive { background:#f5f5f5; color:#888; }

/* RANKS */
.rank-wrap { display:inline-flex; align-items:center; gap:6px; }
.rank-badge { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; font-weight:800; font-size:.8rem; }
.rank-1 { background:#fff3cd; color:#856404; }
.rank-2 { background:#efefef; color:#555; }
.rank-3 { background:#fdebd0; color:#9c5c00; }
.rank-n { background:#f5f5f5; color:#999; }

/* SCORE FORM SECTIONS */
.section-header {
    background:#1a1a1a; color:#fff;
    padding:9px 16px; margin:20px 0 14px;
    border-radius:6px; font-weight:700;
    font-size:.77rem; text-transform:uppercase;
    letter-spacing:1.5px;
}
.section-header .icon { color:#C8102E; margin-right:4px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.rate-badge {
    display:inline-block; font-size:.69rem; color:#888;
    background:#f0f0f0; border-radius:4px;
    padding:1px 6px; margin-left:4px; font-weight:600;
}

/* PAGE HEADER */
.page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.page-title { font-size:1.35rem; font-weight:800; color:#1a1a1a; }
.page-subtitle { color:#888; font-size:.83rem; margin-top:3px; }

/* MODAL */
.modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; overflow-y:auto; padding:30px 20px; }
.modal-bg.open { display:block; }
.modal { background:#fff; border-radius:12px; padding:28px; width:700px; max-width:95vw; margin:0 auto; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.modal h3 { color:#C8102E; margin-bottom:18px; font-size:1rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; padding-bottom:12px; border-bottom:2px solid #f2f2f2; }

/* THANK YOU */
.thankyou-wrap { max-width:500px; margin:70px auto; text-align:center; padding:0 20px; }
.checkmark { font-size:5rem; margin-bottom:14px; animation:pop .4s ease; }
@keyframes pop { 0%{transform:scale(.5);opacity:0} 80%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
.thankyou-card { background:#fff; border:1px solid #e4e4e4; border-radius:14px; padding:36px 32px; box-shadow:0 4px 20px rgba(0,0,0,.08); }
.thankyou-card h1 { font-size:1.8rem; color:#27ae60; margin-bottom:6px; }
.thankyou-card .subtitle { color:#888; margin-bottom:22px; font-size:.88rem; }
.score-display { background:#1a1a1a; border-radius:10px; padding:20px; margin-bottom:24px; }
.score-display .label { color:#888; font-size:.73rem; text-transform:uppercase; letter-spacing:1px; }
.score-display .value { font-size:3rem; font-weight:800; color:#C8102E; margin:4px 0; }
.score-display .week-info { color:#666; font-size:.82rem; }
.btn-group { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* RESPONSIVE */
@media (max-width:640px) {
    .form-grid { grid-template-columns:1fr; }
    nav .nav-user { display:none; }
    nav .nav-links a { padding:6px 8px; font-size:.78rem; }
}