/* =============================================================
   THEME 1: VEGAS DARK  (currently active)
   Inspired by DraftKings — near-black background, gold accents,
   bright-green CTAs.

   TO SWITCH THEMES: In base.html, replace the <link> that loads
   this file with one of the alternatives below:
     • style-theme-action-blue.css  (FanDuel-inspired, navy + orange)
     • style-theme-sports-pro.css   (BetMGM/Caesars-inspired, dark + red)
   ============================================================= */

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

/* ── Base ── */
body {
    background: #0d0f14;
    color: #e2e8f0;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ── Navbar ── */
.site-navbar {
    background: #0a0c10;
    box-shadow: 0 2px 0 rgba(245, 197, 24, 0.25), 0 4px 16px rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid #f5c518;
}

.site-navbar .navbar-brand,
.site-navbar .nav-link,
.site-navbar .navbar-text,
.site-navbar .dropdown-toggle {
    color: #fff !important;
    font-weight: 600;
}

.site-navbar .navbar-brand {
    color: #f5c518 !important;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.site-navbar .site-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.15rem;
    height: 2.1rem;
    padding: 0;
}

.site-navbar .site-logo-ball {
    position: absolute;
    inset: 0;
    background-image: url('../favicon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.42;
}

.site-navbar .site-logo-text {
    position: relative;
    z-index: 1;
    font-size: 1.02rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    line-height: 1;
}

.site-navbar .site-logo:hover .site-logo-ball,
.site-navbar .site-logo:focus .site-logo-ball {
    opacity: 0.6;
}

.site-navbar .nav-link:hover,
.site-navbar .navbar-brand:hover,
.site-navbar .dropdown-toggle:hover {
    color: #f5c518 !important;
}

.site-navbar .navbar-toggler {
    border-color: #f5c518;
}

.site-navbar .dropdown-menu {
    background: #181b23;
    border: 1px solid rgba(245, 197, 24, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.site-navbar .dropdown-item {
    color: #e2e8f0;
}

.site-navbar .dropdown-item:hover {
    background: rgba(245, 197, 24, 0.1);
    color: #f5c518;
}

.site-navbar .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1);
}

/* ── Layout ── */
.page-shell {
    max-width: 1200px;
}

/* ── Headings ── */
h1,
h2,
h3,
.title {
    color: #e2e8f0;
}

/* ── Hero banner ── */
.hero-banner-title {
    color: #f5c518;
    text-shadow:
        0 2px 8px rgba(245, 197, 24, 0.35),
        0 0 40px rgba(245, 197, 24, 0.12);
    letter-spacing: 0.02em;
    font-weight: 800;
}

.site-hero-banner {
    background: linear-gradient(135deg, #0a0c10 0%, #0d1520 55%, #0f1a0f 100%);
    color: #fff;
    border-radius: 0.5rem;
    border: 1px solid rgba(245, 197, 24, 0.15);
    box-shadow: 0 0 60px rgba(0, 183, 74, 0.08), inset 0 1px 0 rgba(245, 197, 24, 0.1);
}

.site-hero-subtitle {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: none;
}

/* ── Cards & boxes ── */
.box,
.card,
.table-responsive,
.alert {
    border-radius: 0.75rem;
}

.box {
    background: #181b23;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    margin-bottom: 1rem;
}

.card {
    background: #181b23;
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.card-header {
    background: #1f2330 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

.card-footer {
    background: #181b23 !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Auth panel ── */
.column.is-4.is-offset-4,
.auth-panel {
    max-width: 720px;
    margin: 2rem auto;
}

/* ── Form fields ── */
.field {
    margin-bottom: 1rem;
}

.control input,
.control select,
.control textarea,
.field input,
.field select,
.field textarea {
    width: 100%;
}

.form-control {
    background: #242836;
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.form-control:focus {
    background: #2a2f40;
    color: #e2e8f0;
    border-color: #f5c518;
    box-shadow: 0 0 0 0.2rem rgba(245, 197, 24, 0.2);
}

.form-control::placeholder {
    color: #64748b;
}

/* ── Custom buttons ── */
.button,
button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    border: 0;
    border-radius: 0.4rem;
    background: #00b74a;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
    transition: background 0.15s ease, transform 0.1s ease;
}

.button:hover,
button.button:hover {
    background: #009940;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.button.is-link,
.button.is-info {
    background: #00b74a;
}

.button.is-light {
    background: rgba(0, 183, 74, 0.15);
    color: #00b74a;
    border: 1px solid rgba(0, 183, 74, 0.3);
}

.button.is-light:hover {
    background: rgba(0, 183, 74, 0.25);
    color: #00b74a;
}

.button.is-small {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

.button.is-fullwidth,
.button.is-block {
    width: 100%;
}

/* Bootstrap button overrides */
.btn-primary {
    background-color: #00b74a !important;
    border-color: #00b74a !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #009940 !important;
    border-color: #009940 !important;
}

.btn-warning {
    background-color: #f5c518 !important;
    border-color: #f5c518 !important;
    color: #000 !important;
    font-weight: 700 !important;
}

.btn-outline-light {
    border-color: #f5c518 !important;
    color: #f5c518 !important;
}

.btn-outline-light:hover {
    background: #f5c518 !important;
    color: #000 !important;
}

.btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* ── Flash messages ── */
.flash-stack {
    position: relative;
    z-index: 10;
}

.flash-alert {
    border: 0;
    padding: 1rem 1.25rem;
}

.flash-alert .close {
    position: absolute;
    top: 0.6rem;
    right: 0.85rem;
}

.flash-icon {
    font-size: 1.15rem;
    line-height: 1.25rem;
}

.flash-title {
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.flash-message {
    line-height: 1.4;
}

/* ── Admin cards ── */
.admin-summary-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    background: #181b23;
}

/* ── Tables ── */
.table {
    color: #e2e8f0;
}

.table td,
.table th {
    vertical-align: middle;
    border-color: rgba(255, 255, 255, 0.07);
}

.table-bordered {
    border-color: rgba(255, 255, 255, 0.07);
}

.thead-light th {
    background: #1f2330 !important;
    color: #f5c518 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.table-hover tbody tr:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #e2e8f0;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.025);
}

.table-warning td,
.table-warning th,
tr.table-warning {
    background: rgba(245, 197, 24, 0.12) !important;
    color: #f5c518 !important;
}

/* Shared dark table treatment for user-facing pages still using Bootstrap light tables. */
.dark-data-table {
    background: #171b24;
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.08);
}

.dark-data-table thead th,
.dark-data-table thead.thead-light th,
.dark-data-table thead.thead-dark th {
    background: #1b2230 !important;
    color: #e9edf5 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(245, 197, 24, 0.24) !important;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.dark-data-table tbody td {
    background: #171b24;
    color: #e2e8f0;
}

.dark-data-table tbody tr:nth-of-type(even) td {
    background: #1c2230;
}

.dark-data-table.table-hover tbody tr:hover td,
.dark-data-table tbody tr:hover td {
    background: inherit !important;
    color: inherit !important;
}

.dark-data-table .text-muted,
.dark-data-table small.text-muted {
    color: #b1bdcd !important;
}

.dark-data-table tr.table-success td,
.dark-data-table tr.table-success th {
    background: rgba(0, 183, 74, 0.18) !important;
    color: #dbffe8 !important;
}

.dark-data-table tr.table-danger td,
.dark-data-table tr.table-danger th {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #ffe2e2 !important;
}

.dark-data-table tr.table-secondary td,
.dark-data-table tr.table-secondary th {
    background: rgba(100, 116, 139, 0.22) !important;
    color: #ecf3fb !important;
}

.dark-data-table tr.table-primary td,
.dark-data-table tr.table-primary th {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #e5f0ff !important;
}

.dark-data-table tr.table-warning td,
.dark-data-table tr.table-warning th {
    background: rgba(245, 197, 24, 0.18) !important;
    color: #fff2bf !important;
}

/* ── Modals ── */
.modal-content {
    background: #181b23;
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.modal-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Standardize warning-copy contrast for picks-related dark modals. */
#incompletePicksModal .modal-body .text-dark,
#entryFeeModal .modal-body .text-dark {
    color: #dbe6f5 !important;
}

/* ── Badges ── */
.badge-success {
    background-color: #00b74a !important;
}

.badge-secondary {
    background-color: #475569 !important;
}

.badge-warning {
    background-color: #f5c518 !important;
    color: #000 !important;
}

.badge-danger {
    background-color: #ef4444 !important;
}

/* ── Utility ── */
.text-muted {
    color: #94a3b8 !important;
}

/* ── Footer ── */
.site-footer {
    background: #0a0c10;
    color: rgba(255, 255, 255, 0.6);
    border-top: 2px solid #f5c518;
    font-size: 0.875rem;
}

.site-footer-brand {
    font-weight: 800;
    font-size: 1rem;
    color: #f5c518;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-footer-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    margin: 0 0.2rem;
    transition: color 0.15s ease;
}

.site-footer-link:hover {
    color: #f5c518;
    text-decoration: none;
}

.site-footer-sep {
    color: rgba(255, 255, 255, 0.25);
    margin: 0 0.15rem;
}

.site-footer-copy {
    color: rgba(255, 255, 255, 0.4);
}