/* ================================
   GLOBAL LAYOUT
================================ */

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

/* CUSTOM FONT */

@font-face {
    font-family: 'GreatVibes-Regular';

    src: url('/fonts/GreatVibes-Regular.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DSEG7-Classic';

    src: url('/fonts/DSEG7Classic-Bold.woff2') format('woff2');

    font-weight: normal;
    font-style: normal;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;

    background-image: url('images/background.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;

    background-color: #f4f6f9;
}

/* optional overlay for readability (recommended) */
body::before {
    display: none;
}


/* make sure app content sits above overlay */
#app, .page, main {
    position: relative;
    z-index: 1;
}


/* ================================
   TOP APP BAR
   NOTE: the old repeating-stripe background override that used to
   live here has been removed — MainLayout.razor.css now owns the App
   Bar's styling entirely via the scoped `.esm-header` class. Having
   BOTH this global, unscoped `.mud-appbar` rule AND the scoped one
   fighting over the exact same element is what caused the striped
   background to bleed through on part of the bar (each stylesheet was
   winning in different spots depending on how MudBlazor's internal
   DOM structure applied them). If the App Bar ever needs a global
   (not page-specific) style tweak again, it belongs in
   Components/Layout/MainLayout.razor.css, not here.
================================ */

/* ================================
   DASHBOARD
================================ */

.dashboard-container {
    padding: 2rem;
    max-width: 1200px;
    margin: auto;
}

.hero {
    text-align: center;
    margin-bottom: 2rem;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.hero p {
    color: #666;
}

/* STATS GRID */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

/* CARD BASE */
.card {
    background: white;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.big-number {
    font-size: 2rem;
    font-weight: bold;
    margin: 0.5rem 0;
}

.muted {
    color: #777;
    font-size: 0.9rem;
}

/* ACTION BUTTONS */
.action-card button {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.btn {
    background: #1e88e5;
    color: white;
}

.btn.secondary {
    background: #555;
}

/* ================================
   TEAM + PLAYER GRIDS
================================ */

.section-title {
    margin: 2rem 0 1rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.team-grid,
.player-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.team-card,
.player-card {
    background: white;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.team-name,
.player-name {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.player-rating {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #1e88e5;
}

/* ================================
   NAV MENU
================================ */

.nav-item {
    margin: 0;
}

.nav-link {
    padding: 6px 10px;
    border-radius: 8px;
    margin: 1px 6px;
    line-height: 1.2;
}

.nav-link:hover {
    background: rgba(255,255,255,0.08);
}

/* ================================
   HOME PAGE
================================ */

.home-container {
    padding: 2rem;
    max-width: 1000px;
    margin: auto;
}

.hero {
    text-align: center;
    margin-bottom: 2rem;
}

.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
}

.hero p {
    color: #666;
}

/* STATUS CARDS */
.status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.status-card {
    background: linear-gradient(135deg, #f6e6a8, #d4af37);

    padding: 1.5rem;

    border-radius: 16px;

    text-align: center;

    color: #1a1a1a;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.15);
}

.big {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 0.5rem;
}

/* ACTIONS */
.actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
}

.btn-primary,
.btn-secondary {
    padding: 12px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
}

.btn-primary {
    background: #1e88e5;
    color: white;
}

.btn-secondary {
    background: #444;
    color: white;
}

/* INFO BOX */
.info-box {
    background: linear-gradient(135deg, #f6e6a8, #d4af37);

    padding: 1.5rem;

    border-radius: 16px;

    margin-top: 2rem;

    color: #1a1a1a;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.15);
}

/* ================================
   ⚽ MATCH DAY TILES
================================ */

.tile-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 2rem;
}

.match-tile {
    background: linear-gradient(135deg, #f6e6a8, #d4af37);
    border-radius: 16px;
    padding: 14px;
    min-height: 180px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

    display: flex;
    flex-direction: column;
    color: #1a1a1a;
}

.tile-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 14px;
    text-transform: capitalize;
}

.match-line {
    background: rgba(255, 255, 255, 0.35);
    padding: 6px 8px;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.fixture-home,
.fixture-away {
    flex: 1;
    text-align: center;
}

.fixture-home a,
.fixture-away a {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 600;
}

.fixture-home a:hover,
.fixture-away a:hover {
    text-decoration: underline;
}

.fixture-score {
    min-width: 60px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.no-match {
    opacity: 0.7;
    font-style: italic;
    font-size: 13px;
}

.match-tile.today {
    transform: scale(1.03);
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

/* ================================
   ELITE LEAGUE TABLE
================================ */

.league-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;

    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.25);
}

.league-table th {
    background: linear-gradient(
        135deg,
        #4c1d95,
        #6d28d9,
        #7c3aed
    );

    color: white;

    padding: 14px;

    text-align: center;

    font-weight: 600;

    border: none;
}

.league-table td {
    padding: 12px;

    text-align: center;

    color: white;

    background: rgba(45, 27, 78, 0.92);

    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.league-table tbody tr:hover td {
    background: rgba(90, 55, 150, 0.95);

    transition: 0.15s ease-in-out;
}

/* Champion */

.position-1 td {
    background: linear-gradient(
        135deg,
        #ffd700,
        #f4c430
    ) !important;

    color: #111 !important;

    font-weight: bold;
}

/* Champions League */

.position-2 td {
    background: rgba(0, 180, 90, 0.95) !important;

    font-weight: bold;
}

.position-3 td {
    background: rgba(0, 150, 75, 0.95) !important;

    font-weight: bold;
}

/* Relegation */

.relegation td {
    background: rgba(180, 30, 30, 0.95) !important;
}

/* Team column */

.league-table td:nth-child(2) {
    text-align: left;

    font-weight: 600;

    padding-left: 18px;
}

/* Points column */

.league-table td:last-child {
    font-size: 1.05rem;
    font-weight: bold;
}

/* Matchday badge */

.matchday-badge {
    display: inline-block;

    margin-bottom: 16px;

    padding: 10px 18px;

    border-radius: 999px;

    background: linear-gradient(
        135deg,
        #4c1d95,
        #7c3aed
    );

    color: white;

    font-weight: bold;
}

body.player-profile-active {
    background-image: none !important;
    background-color: #000 !important;
}

.form-floating > label {
    color: #555 !important;
}

.form-control {
    color: #333 !important;
}

/* ================================
   RESPONSIVE GRIDS
================================ */

@media (max-width: 900px) {
    .stats-grid,
    .team-grid,
    .player-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .status-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tile-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

@media (max-width: 480px) {
    .stats-grid,
    .team-grid,
    .player-grid,
    .status-grid {
        grid-template-columns: 1fr;
    }

    .tile-grid {
        grid-template-columns: 1fr;
    }
}
/* ================================
   ACCOUNT SETTINGS
================================ */

.manage-page {
    max-width: 1400px;
    margin: 30px auto;
    padding: 0 25px;
}

.manage-header {
    margin-bottom: 25px;
}

.manage-header h1 {
    color: white;
    font-size: 2rem;
    margin-bottom: 4px;
}

.manage-header p {
    color: rgba(255,255,255,.7);
    margin: 0;
}

.manage-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
}

.manage-sidebar,
.manage-content {
    background: rgba(18,22,30,.78);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    backdrop-filter: blur(10px);
    padding: 24px;
}

.manage-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.manage-nav li + li {
    margin-top: 10px;
}

.manage-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 16px;

    color: white;
    text-decoration: none;

    border-radius: 12px;

    transition: .2s;
}

.manage-nav-link:hover {
    background: rgba(255,255,255,.08);
}

.manage-nav-link.active {
    background: #1e88e5;
}

.manage-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
}

.manage-card h3 {
    color: white;
    margin-bottom: 20px;
}

.manage-label {
    display: block;
    color: #bbb;
    margin-bottom: 6px;
    font-size: .9rem;
}

.manage-input {
    width: 100%;
    padding: 12px 14px;

    border-radius: 10px;

    border: 1px solid rgba(255,255,255,.12);

    background: rgba(255,255,255,.06);

    color: white;
}

.manage-input:focus {
    outline: none;
    border-color: #1e88e5;
}

.manage-info {
    color: white;
    margin-bottom: 18px;
}

.manage-info strong {
    display: block;
    color: #999;
    font-size: .85rem;
}

.manage-button {
    background: #1e88e5;
    color: white;

    border: none;

    border-radius: 10px;

    padding: 12px 22px;

    cursor: pointer;

    transition: .2s;
}

.manage-button:hover {
    background: #1976d2;
}

/* ===========================
   EUROPE MAP
=========================== */

#europe-map-container svg {
    width: 100%;
    height: auto;
}

#europe-map-container path {
    transition: fill .2s ease,
                filter .2s ease,
                transform .2s ease;
}

#europe-map-container .country {
    fill: #2B313C !important;
    stroke: #58616C !important;
    stroke-width: 1.2;
}

#europe-map-container .disabled {
    fill: #232932 !important;
}

#europe-map-container .playable {
    cursor: pointer;
}

#europe-map-container .playable:hover {
    fill: #42A5F5 !important;
    filter: drop-shadow(0 0 10px rgba(66,165,245,.9));
}

#europe-map-container .selected {
    fill: #39D98A !important;
    filter: drop-shadow(0 0 12px rgba(57,217,138,.9));
}
.league-selection-page{

    padding:40px;

    min-height:100vh;

}

.league-selection-page h3{

    color:white;

    font-weight:700;

}