/* --- PREMIUM PROFESSIONAL OVERRIDES --- */

/* App Background */
body {
    background: radial-gradient(circle at top center, #101828 0%, #0B0B0B 60%, #000000 100%) !important;
    background-attachment: fixed !important;
}

/* Glassmorphism Cards */
.card, .match-card, .stat-card {
    background: rgba(20, 25, 35, 0.4) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.card:hover, .match-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Match Card Headers */
.match-meta {
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.badge {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Forms and Inputs */
input, select, textarea {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    transition: all 0.2s ease !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(15, 77, 184, 0.2) !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

/* Prediction Buttons (The Draw Box and Winner Boxes) */
.prediction-options .pred-btn {
    background: linear-gradient(145deg, rgba(30, 35, 45, 0.6), rgba(20, 25, 35, 0.8)) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
    padding: 12px 8px !important;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.02), 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem !important;
}

.prediction-options .pred-btn:hover {
    background: linear-gradient(145deg, rgba(40, 45, 55, 0.8), rgba(30, 35, 45, 0.9)) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px);
}

.prediction-options .pred-btn.selected {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark)) !important;
    color: white !important;
    border-color: var(--accent) !important;
    box-shadow: 0 8px 16px rgba(15, 77, 184, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.2) !important;
}

/* Sidebar Styling */
.sidebar {
    background: rgba(10, 15, 25, 0.85) !important;
    backdrop-filter: blur(24px) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.nav-link {
    border-radius: 8px;
    margin: 4px 12px;
    padding: 12px 16px !important;
    border-left: none !important;
}

.nav-link.active {
    background: linear-gradient(90deg, rgba(15, 77, 184, 0.2), transparent) !important;
    border-left: 3px solid var(--accent) !important;
    color: white !important;
}

/* Tables */
.table-wrap {
    background: rgba(20, 25, 35, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

th {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #e2e8f0 !important;
}

tr:hover td {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Primary Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark)) !important;
    box-shadow: 0 4px 12px rgba(15, 77, 184, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.btn-primary:hover {
    box-shadow: 0 6px 16px rgba(15, 77, 184, 0.6) !important;
    filter: brightness(1.1);
}

/* Flag Sizes */
.team-flag { border-radius: 4px; box-shadow: 0 4px 8px rgba(0,0,0,0.4); vertical-align: middle; }
.flag-sm { width: 24px; height: 16px; }
.flag-md { width: 36px; height: 26px; }
.flag-lg { width: 56px; height: 40px; border-radius: 6px; }
.default-flag { font-size: 1.5em; }

/* Prediction Button Text Fit */
.prediction-options .pred-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.85rem; }