/* wwwroot/css/site.css
   Tekken 8 FGC Tournament Theme
   Dark background + neon magenta / light blue accents
   No external CDNs — uses system font fallbacks */

/* ═══ BOOTSTRAP VARIABLE OVERRIDES ═══ */
/* These override Bootstrap's default :root variables.
   site.css loads AFTER bootstrap.min.css so these take priority. */
:root {
    --bs-body-bg:           #0a0b10;
    --bs-body-color:        #e0e0ea;
    --bs-body-color-rgb:    224, 224, 234;
    --bs-body-bg-rgb:       10, 11, 16;

    --bs-border-color:              #1e2038;
    --bs-border-color-translucent:  rgba(30, 32, 56, 0.8);

    --bs-link-color:        #00d4ff;
    --bs-link-color-rgb:    0, 212, 255;
    --bs-link-hover-color:  #fff;

    --bs-primary:           #ff2d78;
    --bs-primary-rgb:       255, 45, 120;

    --bs-secondary-color:   #8a8fa6;
    --bs-tertiary-bg:       #141627;
}

/* ═══ THEME CSS VARIABLES ═══ */
:root {
    --bg-deep:      #0a0b10;
    --bg-surface:   #111320;
    --bg-card:      #141627;
    --bg-card-alt:  #181a2e;
    --bg-hover:     #1c1f35;

    --neon-magenta: #ff2d78;
    --neon-blue:    #00d4ff;
    --neon-magenta-dim: rgba(255, 45, 120, 0.15);
    --neon-blue-dim:    rgba(0, 212, 255, 0.15);

    --text-primary:  #e0e0ea;
    --text-secondary:#8a8fa6;
    --text-muted:    #5c6080;

    --border:        #1e2038;
    --border-glow:   #2a2d4a;

    --success:       #00e676;
    --warning:       #ffab00;
    --danger:        #ff2d78;

    /* Font stacks — swap in local fonts if you install Rajdhani/Barlow in wwwroot/fonts */
    --font-heading: 'Rajdhani', 'Segoe UI', 'Trebuchet MS', Tahoma, sans-serif;
    --font-body:    'Barlow', 'Segoe UI', -apple-system, sans-serif;
}

/* ═══ BASE ═══ */
body {
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: var(--font-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Push footer to bottom */
footer {
    margin-top: auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.5px;
}

a {
    color: var(--neon-blue);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: #fff;
    text-shadow: 0 0 8px var(--neon-blue);
}

code {
    color: var(--neon-magenta);
    background: var(--neon-magenta-dim);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
}

::selection {
    background: var(--neon-magenta);
    color: #fff;
}

/* ═══ NAVBAR ═══ */
.navbar {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.4);
    padding: 0.6rem 0;
}

.navbar .navbar-brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff !important;
}

.navbar .navbar-brand .brand-noni {
    color: var(--neon-magenta);
    text-shadow: 0 0 10px rgba(255, 45, 120, 0.5);
}

.navbar .navbar-brand .brand-void {
    color: var(--neon-blue);
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.navbar .nav-link {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 4px;
    transition: all 0.2s;
    position: relative;
}

.navbar .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.04);
}

.navbar .nav-link.active {
    color: var(--neon-blue) !important;
}

.navbar .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: var(--neon-blue);
    box-shadow: 0 0 8px var(--neon-blue);
    border-radius: 1px;
}

.navbar-toggler {
    border-color: var(--border) !important;
}
.navbar-toggler-icon {
    filter: invert(0.7);
}

/* ═══ CARDS ═══ */
.card.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color: var(--neon-blue);
    --bs-card-subtitle-color: var(--text-secondary);
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: 6px;
    --bs-card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --bs-card-inner-border-radius: 5px;
    --bs-card-cap-padding-y: 0.75rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: var(--bg-card-alt);
    --bs-card-cap-color: var(--text-primary);
    --bs-card-height: auto;
    --bs-card-color: var(--text-primary);
    --bs-card-bg: var(--bg-card);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.card-header {
    background: var(--bg-card-alt);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-heading);
}

.card-footer {
    background: var(--bg-card-alt);
    border-top: 1px solid var(--border);
}

.card-hover:hover {
    border-color: var(--neon-blue);
    box-shadow: 0 0 15px var(--neon-blue-dim),
                inset 0 0 15px var(--neon-blue-dim);
    transition: all 0.3s;
}

/* ═══ TABLES ═══ */
.table {
    color: var(--text-primary);
    --bs-table-bg: transparent;
}

.table-dark,
.table-neon {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--bg-hover);
    --bs-table-hover-color: #fff;
}

.table thead th {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-bottom: 2px solid var(--neon-magenta) !important;
    padding: 0.75rem 1rem;
}

.table tbody td {
    padding: 0.7rem 1rem;
    border-color: var(--border);
    vertical-align: middle;
}

.table tbody tr {
    transition: background 0.15s;
}

.table-hover tbody tr:hover {
    background: var(--bg-hover) !important;
}

/* ═══ BUTTONS ═══ */
.btn-primary {
    background: var(--neon-magenta);
    border: none;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: #ff4590;
    box-shadow: 0 0 20px rgba(255, 45, 120, 0.4);
    transform: translateY(-1px);
}

.btn-primary:active {
    background: #e02468;
    transform: translateY(0);
}

.btn-outline-secondary {
    color: var(--text-secondary);
    border: 1px solid var(--border);
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s;
}

.btn-outline-secondary:hover {
    color: var(--neon-blue);
    border-color: var(--neon-blue);
    background: var(--neon-blue-dim);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.15);
}

/* ═══ FORMS ═══ */
.form-control {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    color: var(--text-primary);
    transition: all 0.2s;
}

.form-control:focus {
    background: var(--bg-deep);
    color: var(--text-primary);
    border-color: var(--neon-blue);
    box-shadow: 0 0 0 3px var(--neon-blue-dim),
                0 0 15px rgba(0, 212, 255, 0.1);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-label {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ═══ BADGES ═══ */
.badge-completed {
    background: var(--success) !important;
    color: #000;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.badge-pending {
    background: var(--text-muted) !important;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ═══ WINNER HIGHLIGHT ═══ */
.winner {
    color: var(--neon-blue);
    font-weight: 700;
    text-shadow: 0 0 6px rgba(0, 212, 255, 0.3);
}

/* ═══ ALERTS ═══ */
.alert-danger {
    background: rgba(255, 45, 120, 0.1);
    border: 1px solid var(--neon-magenta);
    color: var(--neon-magenta);
}

.alert-warning {
    background: rgba(255, 171, 0, 0.1);
    border: 1px solid var(--warning);
    color: var(--warning);
}

.alert .btn-close {
    filter: invert(0.6);
}

/* ═══ HR / DIVIDERS ═══ */
hr {
    border-color: var(--border) !important;
    opacity: 1;
}

/* ═══ FOOTER ═══ */
footer.footer {
    border-color: var(--border) !important;
    color: var(--text-muted);
}

footer a {
    color: var(--text-muted);
}
footer a:hover {
    color: var(--neon-blue);
}

/* ═══ TEXT UTILITIES ═══ */
.text-muted {
    color: var(--text-secondary) !important;
}

.text-neon-magenta {
    color: var(--neon-magenta);
}
.text-neon-blue {
    color: var(--neon-blue);
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
    background: var(--border-glow);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--neon-magenta);
}