/*
    public/css/style.css
    
    ===============================
   ALLMÄN BASSTYLING OCH BAKGRUND
   =============================== */
canvas {
    touch-action: none;
}

body {
    font-family: "Arial", sans-serif;
    background-image: url('/images/bakgrund3.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    color: #fff;
    margin: 0;
    padding: 0;
}

/* Endast centrering på breda skärmar (desktop) */
@media (min-width: 768px) {
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }
}

/* ===============================
   LEADERBOARD INFO CONTAINER
   (Container för Topp xxxx och Senaste uppdatering)
   =============================== */
.leaderboard-info {
    width: 90%;
    margin: 1rem auto;
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 0.25rem;
    text-align: left;
}
/* ===============================
   LEADERBOARD-TABELL
   =============================== */

#leaderboard-table {
    font-family: 'Cinzel', serif;
    width: 90%;
    margin: 1.25rem auto; /* 20px → 1.25rem */
    border-collapse: collapse;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.8); /* 4px 10px */
}
/* Rubrik för leaderboard-sidan */
#leaderboard-title {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    color: #ffc107;
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.7); /* 2px 2px 4px */
    text-align: center;
    margin-bottom: 0.625rem; /* 10px */
}

/* Text för "Senaste uppdatering" */
#last-update {
    font-family: 'Cinzel', serif;
    color: #ffc107;
    font-size: 0.9rem;
    margin: 0; /* 10px 0 10px 20px */
    display: block;
    text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.7); /* 1px 1px 2px */
}

/* ===============================
   LEADERBOARD COUNT TEXT
   (Ny styling för att visa antal spelare på leaderboarden)
   =============================== */
#leaderboard-count {
    font-family: 'Cinzel', serif;
    color: #ffc107;
    font-size: 1.5rem;
    margin: 0;
    padding: 0.5rem 0;
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.7);
}

#leaderboard-table th,
#leaderboard-table td {
    padding: 0.75rem 0.9375rem; /* 12px 15px */
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: left;
}

#leaderboard-table th {
    background-color: rgba(255, 193, 7, 0.8);
    font-size: 1.1rem;
}

#leaderboard-table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.6);
}

#leaderboard-table tbody tr:hover {
    background-color: rgba(255, 193, 7, 0.2);
}

#leaderboard-table a {
    color: inherit;
    text-decoration: none;
    transition: background-color 0.3s;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

    #leaderboard-table a:hover {
        background-color: rgba(255, 193, 7, 0.3);
    }

/* Wrapper för att möjliggöra horisontell scroll på små skärmar */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* ===============================
   DROPDOWNS (REGION & SÄSONG)
   =============================== */

.filters select {
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    border: 1px solid rgba(255, 193, 7, 0.8);
    padding: 0.5rem 0.625rem; /* 8px 10px */
    margin: 0.625rem; /* 10px */
    /* För att få en extra vänstermarginal */
    margin-left: 1.25rem;
    border-radius: 0.25rem;
    font-family: 'Cinzel', serif;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ===============================
   SÖKFÄLT OCH SÖKKNAPP
   =============================== */

.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.9375rem; /* 15px */
}

    .search-container input[type="text"] {
        padding: 0.5rem 0.625rem; /* 8px 10px */
        border: 1px solid rgba(255, 193, 7, 0.8);
        border-radius: 0.25rem;
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        font-family: 'Cinzel', serif;
        outline: none;
        /* Extra vänstermarginal */
        margin-left: 1.25rem;
        min-width: 12.5rem; /* 200px */
    }

    .search-container button {
        background-color: rgba(255, 193, 7, 0.8);
        border: none;
        padding: 0.5rem 0.75rem; /* 8px 12px */
        margin-left: 1.25rem; /* Extra marginal */
        border-radius: 0.25rem;
        cursor: pointer;
        font-family: 'Cinzel', serif;
        transition: background-color 0.3s;
    }

        .search-container button:hover {
            background-color: rgba(255, 193, 7, 1);
        }

/* ===============================
   PAGINATION-KNAPPAR
   =============================== */

#pagination button {
    background-color: rgba(255, 193, 7, 0.8);
    color: #000;
    border: none;
    padding: 0.5rem 0.75rem; /* 8px 12px */
    margin: 0.3125rem; /* 5px */
    border-radius: 0.25rem;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    transition: background-color 0.3s;
}

    #pagination button:hover {
        background-color: rgba(255, 193, 7, 1);
    }

/* Centrera pagineringsknapparna */
#pagination {
    text-align: center;
}

/* ===============================
   GRAFSTYLING PÅ SPELARPROFILEN
   =============================== */

#player-chart-container {
    max-width: 50rem; /* 800px */
    height: 25rem; /* 400px */
    margin: 1.25rem auto; /* 20px auto */
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 193, 7, 0.8);
    border-radius: 0.25rem;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.8);
    padding: 0.625rem 0.625rem 2.5rem; /* 10px 10px 40px */
}

/* ===============================
   FÖRSTORA GRAF-OVERLAY
   =============================== */

#expanded-chart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

    #expanded-chart-overlay.active {
        visibility: visible;
        opacity: 1;
    }

#expanded-chart-container {
    background-color: #222;
    padding: 1.25rem;
    border-radius: 0.625rem;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.5);
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 37.5rem; /* 600px */
}

#expanded-chart-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-bottom: 0.625rem;
}

#expanded-player-name {
    color: #ffc107;
    font-size: 1.5rem;
    margin: 0;
}

#close-expanded-chart {
    background: #ff4d4d;
    color: white;
    border: none;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 0.3125rem;
    transition: background 0.3s;
}

    #close-expanded-chart:hover {
        background: #cc0000;
    }

#expanded-rank-chart {
    width: 100%;
    height: 100%;
}

/* ===============================
   SPELARPROFILENS SIDA (PLAYER.HTML)
   =============================== */

#player-name {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    color: #ffc107;
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.7);
    margin: 1.25rem 0 0.625rem;
}

#player-statistics {
    width: 90%;
    max-width: 50rem;
    margin: 0 auto 1.25rem;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 1.25rem;
    border: 1px solid rgba(255, 193, 7, 0.8);
    border-radius: 0.25rem;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.8);
}

/* ===============================
   SPRÅK-DROPDOWN (Övre högra hörnet)
   =============================== */

.language-dropdown {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

    .language-dropdown .dropdown-toggle {
        background-color: #ffc107;
        border: none;
        color: #000;
        padding: 0.5rem 0.75rem;
        border-radius: 0.25rem;
        cursor: pointer;
        font-family: 'Cinzel', serif;
    }

    .language-dropdown .dropdown-menu {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        right: 0;
        background-color: rgba(0, 0, 0, 0.8);
        border: 1px solid #ffc107;
        border-radius: 0.25rem;
        z-index: 1000;
    }

        .language-dropdown .dropdown-menu li a {
            display: block;
            padding: 0.5rem 0.75rem;
            color: #fff;
            text-decoration: none;
            font-family: 'Cinzel', serif;
        }

            .language-dropdown .dropdown-menu li a:hover {
                background-color: #ffc107;
                color: #000;
            }

#expand-chart-button:hover {
    background-color: rgba(255, 193, 7, 1);
    color: #000;
}

/* ===============================
   RESPONSIVA MEDIA QUERIES
   =============================== */

/* För små enheter (telefoner och surfplattor) */
@media (max-width: 767px) {
    body {
        padding: 0.9375rem;
    }

    header, footer {
        text-align: center;
    }

    #player-name {
        font-size: 2.2rem;
        margin: 0.9375rem 0 0.5rem;
    }

    .filters select {
        margin: 0.4375rem;
        padding: 0.4375rem 0.5625rem;
    }

    #leaderboard-table th,
    #leaderboard-table td {
        padding: 0.625rem 0.75rem;
        font-size: 1rem;
    }
}

/* Justera dropdown-knapparna (gamemode, region, säsong) */
.filters select {
    margin: 0.625rem 0.625rem 0.625rem 1.25rem;
    padding: 0.5rem 0.625rem;
}

.search-container {
    flex-direction: column;
}

    .search-container input[type="text"] {
        width: 100%;
        margin-left: 1.25rem;
        margin-bottom: 0.5rem;
        min-width: 12.5rem;
    }

    .search-container button {
        margin-left: 1.25rem;
    }

#leaderboard-table th,
#leaderboard-table td {
    padding: 0.5rem 0.625rem;
    font-size: 0.9rem;
}

/* Specifik media query för telefoner i porträttläge */
@media (max-width: 767px) and (orientation: portrait) {
    #leaderboard-table {
        width: 100%;
    }

        #leaderboard-table th,
        #leaderboard-table td {
            padding: 0.25rem 0.375rem;
            font-size: 0.7rem;
        }
}

/* ===============================
   PAGINATION-KNAPPAR (EXTRA STYLING)
   =============================== */
#pagination button.active {
    background-color: rgba(255, 193, 7, 1);
    font-weight: bold;
}

#pagination span {
    padding: 0.5rem 0.75rem;
    margin: 0.3125rem;
    color: #fff;
}

/* ===============================
   SPELARPROFILENS SPECIFIKA STYLING
   (Matchar övriga sidor: text, dropdowns och knappar)
   =============================== */
#player-statistics h2 {
    font-family: 'Cinzel', serif;
    color: #ffc107;
    margin-bottom: 0.9375rem;
    text-align: center;
}

#rank-progress {
    font-family: 'Cinzel', serif;
    color: #ffc107;
    font-size: 1.2rem;
    text-align: center;
    margin: 0.625rem 0;
}

#player-statistics .filter-container {
    margin: 0.625rem 0;
    text-align: center;
}

    #player-statistics .filter-container label {
        font-family: 'Cinzel', serif;
        color: #ffc107;
        margin-right: 0.3125rem;
    }

    #player-statistics .filter-container select {
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        border: 1px solid rgba(255, 193, 7, 0.8);
        padding: 0.5rem 0.625rem;
        border-radius: 0.25rem;
        font-family: 'Cinzel', serif;
        cursor: pointer;
        margin-right: 0.625rem;
    }

#expand-chart-button {
    background-color: rgba(255, 193, 7, 0.8);
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    transition: background-color 0.3s;
    margin: 0.625rem 0;
}

    #expand-chart-button:hover {
        background-color: rgba(255, 193, 7, 1);
        color: #000;
    }

/* ===============================
   Additional styling for portrait orientation using JS-detected class
   =============================== */
body.portrait #leaderboard-table th,
body.portrait #leaderboard-table td {
    padding: 0.25rem 0.375rem;
    font-size: 0.7rem;
}
/* Global knappstil för projektet */
.btn {
    background-color: rgba(255, 193, 7, 0.8);
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    transition: background-color 0.3s;
    color: #000;
}

    .btn:hover {
        background-color: rgba(255, 193, 7, 1);
    }
/* ===============================
   PROFIL-SIDA SPECIFIK STYLING
   (Matchar spelarsidans stil)
   =============================== */
#account-info h2,
#linked-accounts h2 {
    font-family: 'Cinzel', serif;
    color: #ffc107;
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.7);
}

#account-info p,
#account-info li,
#linked-accounts p,
#linked-accounts li,
#edit-profile-form label {
    font-family: 'Cinzel', serif;
    color: #ffc107;
}
/* NYTT: Lägg till styling för rubriker på profilsidan (My Account och Edit Profile) */
main h1,
#edit-profile-form h3 {
    font-family: 'Cinzel', serif;
    color: #ffc107;
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.7);
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Dölj alltid kolumnen "Raiting" för specifika gamemodes (både PC och mobil) */
.hide-rating {
    display: none !important;
}

/* Ny header styling */
#main-header {
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
    background-color: rgba(0,0,0,0.3);
    color: #fff;
}

.header-top {
    text-align: center;
    margin-bottom: 10px;
}

#leaderboard-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    color: #ffc107;
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.7);
}

.header-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.language-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* På bredare skärmar: placera rubrik och knappar sida vid sida */
@media (min-width: 768px) {
    #main-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .header-top {
        margin-bottom: 0;
    }
}
/* -----------------------------------------------------

   MINIMALT TILLÄGG: Placera footern längre ner på sidan

   ----------------------------------------------------- */

footer {
    margin-top: 3rem;
}

/* Stil för rubriker på kontakta oss-sidan */
.contact-us-header {
    color: #ffc107; /* Gul färg som matchar andra rubriker */
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    text-align: center;
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.7); /* Mjukt skuggad text */
    margin: 1.25rem 0; /* Ge lite extra luft runt rubriken */
}

/* Stil för brödtexten */
.contact-us-text {
    color: #fff;
    font-family: "Arial", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin: 1rem auto;
    max-width: 50rem; /* Begränsa bredden så det ser mer strukturerat ut */
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.6); /* Diskret bakgrundsfärg för läsbarhet */
    border-radius: 0.5rem;
}

    /* Stil för länkar */
    .contact-us-text a {
        color: #ffc107;
        text-decoration: none;
        font-weight: bold;
        transition: color 0.3s, text-shadow 0.3s;
    }

        .contact-us-text a:hover {
            color: #ffeb3b; /* Ljusare gul vid hover */
            text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.7);
        }

    /* Stil för listan */
    .contact-us-text ul {
        list-style: none; /* Ta bort standardpunkter */
        padding: 0;
        margin: 1rem 0;
    }

        .contact-us-text ul li {
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem; /* Lite avstånd mellan ikon och text */
        }

            /* Om du vill lägga till en enkel ikon (valfritt) */
            .contact-us-text ul li::before {
                content: "✉"; /* Exempelikon för mail */
                color: #ffc107;
                font-size: 1.2rem;
            }


/* Stil för rubriker på about-sidan */
.about-us-header {
    color: #ffc107; /* Gul färg som matchar andra rubriker */
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    text-align: center;
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.7); /* Mjukt skuggad text */
    margin: 1.25rem 0; /* Ge lite extra luft runt rubriken */
}

/* Stil för brödtexten */
.about-us-text {
    color: #fff;
    font-family: "Arial", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin: 1rem auto;
    max-width: 50rem; /* Begränsa bredden så det ser mer strukturerat ut */
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.6); /* Diskret bakgrundsfärg för läsbarhet */
    border-radius: 0.5rem;
}

/* Lägg till detta för att visa ett diskret meddelande för mobila enheter */
#mobile-tip {
    position: fixed;
    top: 400px; /* Flytta texten längre ner */
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffc107; /* Ljusgul bakgrund */
    color: #000; /* Svart text för kontrast */
    padding: 15px 20px; /* Lite större padding */
    border-radius: 10px; /* Mjukare hörn */
    z-index: 1000;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Subtil skugga */
    font-size: 1rem; /* Gör texten lite större */
    font-weight: bold; /* Gör texten lite fetare */
    text-align: center; /* Centrera texten */
    transition: opacity 1s, transform 0.3s ease-in-out;
    border: 3px solid red;
    animation: blink-border 2s infinite ease-in-out;
}

/* Skapa en blinkande effekt för ramen på mobile-tip */
@keyframes blink-border {
    0%, 100% {
        border-color: red;
    }

    50% {
        border-color: transparent;
    }
}
/* Donation ikon */
#donate-icon {
    font-size: 1.3rem;
    margin-left: 1rem;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s;
}

    #donate-icon:hover {
        opacity: 1;
    }

.footer-donate-link {
    color: #ffc107;
    font-size: 0.875rem;
    text-decoration: underline;
    font-family: 'Cinzel', serif;
}

    .footer-donate-link:hover {
        text-decoration: none;
        opacity: 0.9;
    }


.gold-text {
    color: #ffc107;
    font-family: 'Cinzel', serif;
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.7);
}

.donation-button {
    transition: all 0.3s ease;
    border-radius: 0.5rem;
    box-shadow: 0 0 6px rgba(255, 193, 7, 0.4); /* 🔸Liten glow alltid */
}

    .donation-button:hover,
    .donation-button:active {
        transform: scale(1.05);
        box-shadow: 0 0 15px rgba(255, 193, 7, 0.8);
    }

/* ===== Profil-dropdown ===== */
.profile-dropdown {
    position: relative;
    display: inline-block;
}

.avatar {
    width: 40px; /* byt till önskad bredd */
    height: 40px; /* byt till önskad höjd */
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s;
}

    .avatar:hover {
        transform: scale(1.1);
    }

.profile-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    padding: 0;
    list-style: none;
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid #ffc107;
    border-radius: 0.25rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

    .profile-dropdown .dropdown-menu li {
        margin: 0;
    }

        .profile-dropdown .dropdown-menu li a {
            display: block;
            padding: 0.5rem 0.75rem;
            text-decoration: none;
            color: #fff;
            font-family: 'Cinzel', serif;
            transition: background-color 0.3s, color 0.3s;
        }

            .profile-dropdown .dropdown-menu li a:hover {
                background-color: #ffc107;
                color: #000;
            }



/* ─── Notifieringspanel ────────────────────────────────────────── */
#settings-panel {
    display: flex;
    flex-direction: column;
}

    #settings-panel form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

        #settings-panel form label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        #settings-panel form div {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

    #settings-panel input[type="number"] {
        width: 4rem;
    }

/* ─── trendpilar till favoriter i mina sidor ─────────────── */

.player-trend.green {
    color: #00cc66;
}

.player-trend.red {
    color: #cc0033;
}

.player-trend.gray {
    color: #999999;
}

/* Hjälpklass för att dölja element */
.hidden {
    display: none !important;
}


/* För låsta favoriter */
.locked-favorite {
    opacity: 0.5;
    filter: grayscale(1);
    pointer-events: auto; /* Ändra till 'none' om du vill göra korten oklickbara */
}

    .locked-favorite .favorite-card-inner {
        background-color: #f0f0f0;
    }

/* Global Settings-sektion på profilsidan */
#global-settings-section h3,
#global-settings-section label,
#global-settings-section span {
    color: #ffc107;
    font-family: 'Cinzel', serif;
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.7);
}

#favorites-table th,
#favorites-table td {
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255,255,255,0.2);
    text-align: left;
}

#favorites-table tbody tr:nth-child(even) {
    background-color: rgba(0,0,0,0.6);
}

#favorites-table tbody tr:hover {
    background-color: rgba(255,193,7,0.2);
}


#favorites-table {
    font-family: 'Cinzel', serif;
    width: 90%;
    margin: 1.25rem auto;
    border-collapse: collapse;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.8);
}

    #favorites-table th {
        background-color: rgba(255, 193, 7, 0.8);
        font-size: 1.1rem;
        color: #000;
    }

    #favorites-table a {
        color: inherit;
        text-decoration: none;
        transition: background-color 0.3s;
        cursor: pointer;
        padding: 0.25rem;
        border-radius: 0.25rem;
    }

        #favorites-table a:hover {
            background-color: rgba(255, 193, 7, 0.3);
        }


.btn-red {
    background-color: #dc2626; /* Röd bakgrund */
    color: #000; /* Vit text */
}

    .btn-red:hover {
        background-color: #b91c1c; /* Mörkare röd vid hover */
    }


/* Stil för notifications-hjälprutan */
.notification-info-box {
    color: #fff;
    font-family: "Arial", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin: 1rem auto;
    max-width: 50rem;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 0.5rem;
}

.btn-locked {
    opacity: 0.6;
    cursor: pointer;
}

/* Responsiv ”container” för <main> och andra sidor */
.container {
    width: 100%;
    max-width: 800px; /* du kan öka till 900px om du vill */
    margin: 0 auto;
    padding: 1rem;
    /* tvingar flex‐item att fylla ut och ligga till vänster på mobil */
    align-self: flex-start;
}

@media (max-width: 767px) {
    .table-responsive {
        padding: 0 10px;
    }
}

/* göm overlay som default */
.hidden {
    display: none;
}
/* placera overlay över tabellen */
#loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
/* återanvänd din .spinner-klass eller definiera: */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Disabled “Lägg till”-knapp när maxgräns nådd ───────────────── */
button[data-action="add"]:disabled {
    opacity: 0.5; /* Gör knappen nedtonad */
    cursor: not-allowed; /* Visar “inte tillåtet”-cursor */
}
/* ─────────────────────────────────────────────────────────────────── */

#upgrade-button {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    margin-top: 0.5rem;
}

#premium-benefits {
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffc107;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    border-radius: 0.25rem;
    font-family: 'Cinzel', serif;
    text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.7);
}

.infobox {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 1rem;
    color: #856404;
    font-size: 0.9rem;
}

.form-warning {
    display: block;
    font-size: 0.75rem;
    color: #b71c1c;
    margin-top: 2px;
}

/* ===============================
   PROFIL-SIDA: Ta bort konto‑sektion
   =============================== */
#account-deletion {
    margin-top: 2rem;
}

/* Premium-sektionen på profilsidan */
#premium-section h3,
#premium-section p,
#premium-section span,
#premium-section strong {
    color: #ffc107; /* samma guld som övrigt */
    font-family: 'Cinzel', serif;
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.7);
}

    /* Rubrik och paragraf – matchar övriga profil‑rubriker */
    #account-deletion h3,
    #account-deletion p {
        font-family: 'Cinzel', serif;
        color: #ffc107;
        text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.7);
        margin: 0;
    }

    /* Lite mellanrum under rubrik och text */
    #account-deletion h3 {
        margin-bottom: 0.5rem;
    }

    #account-deletion p {
        margin-bottom: 1rem;
    }

/* Farlig knapp – bygger på .btn, men i rött */
.btn-danger {
    background-color: #cc0000;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-weight: normal;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 1rem;
}

    .btn-danger:hover {
        background-color: #990000;
    }

    .btn-danger:disabled {
        background-color: #d66;
        cursor: not-allowed;
    }

/* 🔔 Cookie-banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #222;
    color: #fff;
    padding: 12px;
    text-align: center;
    z-index: 1000;
    font-size: 14px;
}

    .cookie-banner a {
        color: #aaf;
        text-decoration: underline;
    }

    .cookie-banner button {
        margin-left: 10px;
        padding: 6px 12px;
        background-color: #44c767;
        border: none;
        color: white;
        cursor: pointer;
        border-radius: 4px;
    }

    .cookie-banner.hidden {
        display: none;
    }

/* ====== Dashboard specifik styling ====== */
body.dashboard {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 20px;
}

    body.dashboard main {
        max-width: 800px;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.7);
        padding: 20px;
        border: 1px solid rgba(255, 193, 7, 0.8);
        border-radius: 4px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    }

    body.dashboard .form-group {
        margin-bottom: 15px;
    }

        body.dashboard .form-group label {
            display: block;
            font-family: 'Cinzel', serif;
            margin-bottom: 5px;
            color: #ffc107;
        }

        body.dashboard .form-group select,
        body.dashboard .form-group input[type="number"],
        body.dashboard .form-group input[type="text"],
        body.dashboard .form-group input[type="datetime-local"] {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid rgba(255, 193, 7, 0.8);
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            font-family: 'Cinzel', serif;
        }

        body.dashboard .form-group input[type="checkbox"],
        body.dashboard .form-group input[type="radio"] {
            margin-right: 5px;
        }

    body.dashboard button[type="submit"] {
        background-color: rgba(255, 193, 7, 0.8);
        border: none;
        padding: 10px 15px;
        font-family: 'Cinzel', serif;
        font-size: 1rem;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

        body.dashboard button[type="submit"]:hover {
            background-color: rgba(255, 193, 7, 1);
            color: #000;
        }

    body.dashboard #status-section {
        margin-top: 30px;
    }

        body.dashboard #status-section h2 {
            font-family: 'Cinzel', serif;
            color: #ffc107;
            margin-bottom: 15px;
        }

    body.dashboard #job-status {
        background-color: rgba(0, 0, 0, 0.8);
        padding: 10px;
        border: 1px solid rgba(255, 193, 7, 0.8);
        border-radius: 4px;
        font-family: 'Cinzel', serif;
        color: #fff;
    }

    /* Notisrutan längst ner till höger */
    body.dashboard #notification {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: green;
        color: white;
        padding: 10px;
        border-radius: 4px;
        display: none;
        z-index: 1000;
    }

    /* Administrativt gränssnitt för säsongsmappning */
    body.dashboard #season-mapping-admin {
        margin-top: 40px;
        padding: 15px;
        background-color: rgba(0, 0, 0, 0.85);
        border: 1px solid rgba(255, 193, 7, 0.8);
        border-radius: 4px;
    }

        body.dashboard #season-mapping-admin h2 {
            font-family: 'Cinzel', serif;
            color: #ffc107;
            margin-bottom: 15px;
        }

        body.dashboard #season-mapping-admin table {
            width: 100%;
            border-collapse: collapse;
        }

        body.dashboard #season-mapping-admin table,
        body.dashboard #season-mapping-admin th,
        body.dashboard #season-mapping-admin td {
            border: 1px solid #ffc107;
        }

        body.dashboard #season-mapping-admin th,
        body.dashboard #season-mapping-admin td {
            padding: 8px;
            text-align: left;
            font-family: 'Cinzel', serif;
            color: #fff;
        }

        body.dashboard #season-mapping-admin input[type="text"],
        body.dashboard #season-mapping-admin input[type="number"] {
            width: 100%;
            padding: 5px;
            margin-bottom: 10px;
            border-radius: 4px;
            border: 1px solid #ffc107;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            font-family: 'Cinzel', serif;
        }

        body.dashboard #season-mapping-admin button {
            margin-right: 5px;
            padding: 5px 10px;
            font-family: 'Cinzel', serif;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background-color: rgba(255, 193, 7, 0.8);
            transition: background-color 0.3s;
        }

            body.dashboard #season-mapping-admin button:hover {
                background-color: rgba(255, 193, 7, 1);
                color: #000;
            }


/* ===============================
   FELSIDOR (404, Not Authorized)
   =============================== */
.error-container {
    max-width: 800px;
    margin: 40px auto;
    background-color: rgba(0, 0, 0, 0.75);
    padding: 30px;
    border: 1px solid rgba(255,193,7,0.5);
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.8);
    color: #fff;
    text-align: center;
}


/* ===============================
   PROFIL (protected/profile.html)
   Flytt av inline-styles + util-klasser
   =============================== */

/* Layout för sidans <main> (ersätter inline-style på <main>) */
.profile-main {
    max-width: 800px;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border: 1px solid rgba(255, 193, 7, 0.8);
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.8);
}

/* Profilbild: standardutseende + dold som default (JS visar vid behov) */
#profile-picture {
    max-width: 150px;
    border-radius: 50%;
    display: none;
}

/* Redigeringsformulär döljs som default (JS togglar) */
#edit-profile-form {
    display: none;
}

/* Global settings-varning för Discord (JS togglar) */
#discord-enable-warning {
    display: none;
}

/* Discord-sektionens marginal uppåt (ersätter inline margin-top) */
#discord-link-section {
    margin-top: 24px;
}

/* Statusraden i Discord-sektionen (ersätter inline margin-bottom) */
#discord-status {
    margin-bottom: 8px;
}

/* Inmatningsfältens maxbredd (ersätter inline max-width) */
#discord-id-input {
    max-width: 360px;
}

#discord-code-input {
    max-width: 200px;
}

/* Rader med knappar/inputs som hade style="margin-top:10px;" */
.discord-row {
    margin-top: 10px;
}

/* Hjälptexter och lista i Discord-sektionen (ersätter inline margin/line-height/padding-left) */
#discord-help {
    margin-top: 14px;
    line-height: 1.5;
}

    #discord-help ol {
        padding-left: 18px;
    }

/* ===============================
   Utility-klasser (ingen Tailwind)
   =============================== */
.text-sm {
    font-size: 0.875rem;
}
/* 14px ungefär */
.text-xs {
    font-size: 0.75rem;
}
/* 12px ungefär */
.mb-6 {
    margin-bottom: 1.5rem;
}
/* 24px */
.block {
    display: block;
}

.text-yellow-500 {
    color: #ffc107;
}
/* matchar sajtens guldton */
.text-red-600 {
    color: #ff4d4d;
}
/* matchar röd accent som redan används i din CSS */



/* === Gemensam toast-stil === */

/* Container-positionering (ersätter inline/Tailwind-liknande klasser i JS) */
.toast-container-fixed {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
}

/* Bas-stil: neutral bakgrund + liten skugga */
.toast {
    background-color: #ffffff; /* neutral bakgrund */
    color: #111827; /* neutral text */
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    font-size: 0.875rem;
    max-width: 20rem;
    margin-top: 0.5rem;
    border: 1px solid #e5e7eb; /* ljus kant */
    transition: opacity 200ms ease, transform 200ms ease;
    opacity: 1;
    transform: translateY(0);
}

/* Liten fade-ut animation vid auto-stäng */
.toast--hide {
    opacity: 0;
    transform: translateY(4px);
}

/* SUCCESS: Grön bakgrund, vit text */
.toast--success {
    background-color: #16a34a; /* grön */
    color: #ffffff; /* vit text */
    border-color: #16a34a;
}

/* ERROR/FAIL: Röd text, ljus/neutral bakgrund + röd kant */
.toast--error {
    background-color: #dc2626; /* röd bakgrund */
    color: #ffffff; /* ljus text */
    border-color: #dc2626; /* röd kant */
}


/* ===============================
   AVANCERAD SÖKNING (panel)
   =============================== */
#advanced-toggle {
    background-color: rgba(255, 193, 7, 0.8);
    border: none;
    padding: 0.5rem 0.75rem;
    margin-left: 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    transition: background-color 0.3s;
}

    #advanced-toggle:hover {
        background-color: rgba(255, 193, 7, 1);
    }

#advanced-panel {
    display: none;
    max-width: 1100px;
    margin: 0.5rem auto 1rem;
    padding: 0.75rem 1rem;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 193, 7, 0.6);
    border-radius: 0.5rem;
}

    #advanced-panel .adv-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
        align-items: center;
        justify-content: center;
        margin: 0.25rem 0;
    }

    #advanced-panel label {
        color: #ffc107;
        font-family: 'Cinzel', serif;
        font-size: 0.95rem;
    }

    #advanced-panel select {
        background-color: rgba(0, 0, 0, 0.8);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.8);
        padding: 0.4rem 0.5rem;
        border-radius: 0.25rem;
    }

    #advanced-panel input[type="radio"] {
        accent-color: #ffc107;
    }

    #advanced-panel span[data-i18n="nameMatchLabel"] {
        color: #ffc107;
        font-family: 'Cinzel', serif;
        font-size: 0.95rem;
        margin-right: 0.5rem;
    }

/* === Delningsmeny (Share Dropdown) — med smooth animation === */
.share-menu {
    background-color: rgba(0, 0, 0, 0.85);
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 6px;
    position: absolute;
    z-index: 2000;
    margin-top: 4px;
    /* Layout stays column ALWAYS */
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* 🌟 Animation setup */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

    .share-menu button {
        background: rgba(255, 193, 7, 0.8);
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-family: 'Cinzel', serif;
        cursor: pointer;
        transition: background 0.2s;
    }

        .share-menu button:hover {
            background: rgba(255, 193, 7, 1);
            box-shadow: 0 0 6px rgba(255, 193, 7, 0.7), 0 0 12px rgba(255, 193, 7, 0.4);
            transform: translateY(-1px);
        }
        .share-menu button:active {
            transform: translateY(1px) scale(0.97);
            box-shadow: 0 0 2px rgba(255, 193, 7, 0.6);
        }

    /* 🚫 No display:none — use opacity and pointer-events instead */
    .share-menu.hidden {
        opacity: 0;
        transform: translateY(-4px);
        pointer-events: none; /* prevent clicks when hidden */
    }

/* 📱 Mobile adjustment for share dropdown */
@media (max-width: 767px) {
    .share-menu {
        left: 50% !important;
        transform: translate(-50%, -4px) !important; /* keeps fade-down */
        width: auto;
        min-width: 180px; /* ensures readability on small screens */
    }

        .share-menu button {
            padding: 8px 10px; /* larger tap area for fingers */
        }
}