/* ======================================================
   4) MINA SIDOR (protected/mypages.html)
   ====================================================== */
/* ------------------------------------------------------
   🎨 Gemensam stil för kort (cards) på Mina sidor
------------------------------------------------------ */
.card {
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 193, 7, 0.6);
    border-radius: 0.6rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.9);
    padding: 1.25rem 1.5rem;
    width: 90%;
    max-width: 800px;
    margin: 1.25rem auto;
    font-family: 'Inter', sans-serif;
    color: #ffc107;
    backdrop-filter: blur(4px);
}

    /* Rubriker i kort */
    .card h2, .card h3 {
        text-align: center;
        margin-top: 0;
        color: #ffc107;
        text-shadow: 0 0 10px rgba(255,193,7,0.5), 0 0 20px rgba(255,193,7,0.2);
    }

.page-title {
    font-size: 2rem;
    color: #ffc107;
    text-align: center;
    margin-bottom: 0.5rem;
}

.notifications-intro {
    max-width: 42rem;
    margin: 0 auto 1.5rem;
    padding: 0 1rem;
    color: #c9b77d;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
}

.favorites-summary,
.notification-status-note,
.notification-empty-state {
    color: #c9b77d;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
}

.favorites-summary,
.notification-empty-state {
    text-align: center;
}

.notification-empty-state .btn {
    display: inline-block;
    margin-top: 0.5rem;
}

#favorites-table .favorites-empty-row td {
    padding: 1.5rem 1rem;
    color: #c9b77d;
    line-height: 1.6;
    text-align: center;
    white-space: normal;
}

.favorites-empty-row .btn {
    display: inline-block;
    margin-top: 0.75rem;
}

#favorites-table .favorites-empty-row td {
    width: auto;
}

#favorites-table .favorites-empty-row td a {
    display: inline-block;
    overflow: visible;
    white-space: normal;
}

.favorites-header {
    flex-wrap: wrap;
}

.favorites-header .btn {
    max-width: 100%;
    white-space: normal;
}

.mypages-container,
.mypages-container .card {
    box-sizing: border-box;
}

/* ------------------------------------------------------
   🔔 Notifieringshjälp och status
------------------------------------------------------ */
.help-card {
    background-color: rgba(20, 20, 20, 0.8);
}

.notification-status-box {
    background-color: rgba(10, 10, 10, 0.85);
    border: 1px solid rgba(255, 193, 7, 0.6);
    border-radius: 0.6rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.9);
    color: #eee;
    font-family: 'Inter', sans-serif;
    backdrop-filter: blur(4px);
}

    .notification-status-box h3 {
        color: #ffc107;
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 1.4rem;
        text-align: center;
        text-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.8);
        border-bottom: 1px solid rgba(255, 193, 7, 0.3);
        padding-bottom: 0.5rem;
    }

/* Varje notifikationsblock */
.status-block {
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

    .status-block:last-child {
        border-bottom: none;
    }

/* Översta raden */
.status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.status-icon {
    flex: 0 0 2rem;
    text-align: center;
    font-size: 1.25rem;
}

.status-label {
    flex: 1 1 auto;
    color: #ffc107;
    font-weight: 600;
    text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.6);
}

.status-last {
    flex: 0 0 auto;
    font-family: monospace;
    color: #8bc34a;
}

/* Andra raden */
.status-sub {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.9rem;
    font-family: monospace;
}

.status-next-time {
    color: #03a9f4;
}

.status-status-text {
    font-weight: 600;
}

.status-ok {
    color: #4caf50;
}

.status-wait {
    color: #ff9800;
}

.status-none {
    color: #aaa;
    font-style: italic;
}

/* Hover-effekt */
.status-block:hover {
    background-color: rgba(255, 193, 7, 0.05);
    transition: background-color 0.25s ease;
}

/* Glow för tillåtet */
@keyframes readyGlowOnce {
    0% {
        text-shadow: 0 0 4px #4caf50, 0 0 10px rgba(76,175,80,0.6);
    }

    50% {
        text-shadow: 0 0 14px #7fff7f, 0 0 24px rgba(76,255,120,0.9);
    }

    100% {
        text-shadow: 0 0 6px #4caf50, 0 0 12px rgba(76,175,80,0.7);
    }
}

.status-ok .status-status-text {
    color: #4caf50;
    font-weight: 700;
    text-shadow: 0 0 6px #4caf50, 0 0 12px rgba(76,175,80,0.7);
    animation: readyGlowOnce 5s ease-in-out 1;
}

/* ------------------------------------------------------
   ⭐ Favoriter
------------------------------------------------------ */
.favorites-card {
    background-color: rgba(15,15,15,0.8);
}

#favorites-table {
    font-family: 'Inter', sans-serif;
    width: 100%;
    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, #favorites-table td {
        padding: 0.75rem 1rem;
        border: 1px solid rgba(255,255,255,0.15);
        text-align: left;
    }

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

    #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.15);
    }

    #favorites-table a:hover {
        color: #ffc107;
        text-decoration: underline;
    }

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

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

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

/* Låsta favoriter */
.locked-favorite {
    opacity: 0.5;
    filter: grayscale(1);
    pointer-events: auto;
}

/* ------------------------------------------------------
   ➕ Lägg till favorit / sökfält
------------------------------------------------------ */
.add-fav-card input,
.add-fav-card button {
    font-family: 'Inter', sans-serif;
}

/* ------------------------------------------------------
   ⚙️ Settings-overlay
------------------------------------------------------ */
#settings-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;
}

    #settings-overlay.hidden {
        display: none;
    }

.settings-card {
    position: relative;
    background-color: rgba(25,25,25,0.9);
    border: 1px solid rgba(255,193,7,0.7);
    border-radius: 0.6rem;
    padding: 1.5rem;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

    .settings-card h2 {
        text-align: center;
        color: #ffc107;
        margin-top: 0;
        margin-bottom: 1rem;
    }

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* ------------------------------------------------------
   🪄 Input- och select-fält i settings-overlay
------------------------------------------------------ */
.settings-card input[type="number"],
.settings-card select {
    background-color: rgba(20, 20, 20, 0.9);
    border: 1px solid rgba(255, 193, 7, 0.6);
    color: #ffc107;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.3rem;
    outline: none;
    transition: all 0.2s ease-in-out;
}

    .settings-card input[type="number"]:focus,
    .settings-card select:focus {
        border-color: #ffd740;
        box-shadow: 0 0 6px rgba(255, 215, 64, 0.8);
        background-color: rgba(30, 30, 30, 0.95);
    }

.settings-card select {
    cursor: pointer;
}

/* Gör att input och select står snyggt bredvid varandra */
.settings-card .threshold-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Förminska labelavstånd om du har label före fälten */
.settings-card label[for="threshold_rank"] {
    margin-right: 0.5rem;
}
/* ------------------------------------------------------
   Spacing mellan Save och Remove i settings-overlay
------------------------------------------------------ */
.settings-card #notif-form [type="submit"] {
    margin-right: 0.5rem; /* horisontellt mellanrum om de hamnar på samma rad */
}

.settings-card #delete-favorite {
    margin-top: 0.5rem; /* vertikalt mellanrum om Remove hamnar under */
    margin-left: 0.5rem; /* liten buffert om de hamnar på samma rad */
}

/* ------------------------------------------------------
   Knappavstånd i settings-overlay
------------------------------------------------------ */
.settings-card button + button {
    margin-left: 0.5rem; /* lite luft mellan Save och Remove */
}

.settings-card .btn-yellow {
    margin-right: 0.5rem; /* luft mellan Save och Remove */
}
/* ------------------------------------------------------
   📱 Responsiv justering
------------------------------------------------------ 
@media (max-width: 700px) {
    .card {
        padding: 1rem;
    }

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

    .status-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .status-sub {
        justify-content: flex-start;
    }
}
    */

.player-link {
    color: #ffc107;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .player-link:hover {
        color: #fff;
        text-shadow: 0 0 6px rgba(255,193,7,0.8);
    }

/* ----------------------------------------------
   Fix för långa textfält i favorites-tabellen
---------------------------------------------- */
#favorites-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 9rem; /* justera efter smak */
}

    /* Tillåt radbrytning för bara vissa kolumner (t.ex. mode) */
    #favorites-table td.mode-column {
        white-space: normal;
        word-break: break-word;
        max-width: 8rem;
    }

@media (min-width: 768px) {
    #favorites-table th,
    #favorites-table td {
        padding: 0.75rem 0.6rem;
    }

    #favorites-table th:nth-child(4),
    #favorites-table td.mode-column {
        white-space: nowrap;
        word-break: normal;
    }
}

    /* Tooltip vid hover */
    #favorites-table td[title] {
        position: relative;
    }

        #favorites-table td[title]:hover::after {
            content: attr(title);
            position: absolute;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.85);
            color: #ffd740;
            font-family: 'Inter', sans-serif;
            font-size: 0.8rem;
            padding: 0.4rem 0.6rem;
            border: 1px solid rgba(255, 193, 7, 0.6);
            border-radius: 0.3rem;
            white-space: nowrap;
            z-index: 10;
        }


.favorites-header {
    width: 90%;
    max-width: 800px;
    margin: 0 auto 0.75rem auto; /* samma centrering som boxarna */
    display: flex;
    justify-content: flex-start; /* vänsterjusterad */
}

/* 🔔 Glow runt kugghjulen när Quick Action används */
.notif-gear-glow {
    position: relative;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.8), 0 0 14px rgba(255, 215, 0, 0.6);
    border-radius: 50%; /* rund glöd runt knappen */
    animation: notifGearGlowPulse 0.9s ease-in-out infinite;
    z-index: 2; /* så glöden inte hamnar under annat */
}

@keyframes notifGearGlowPulse {
    0%, 100% {
        box-shadow: 0 0 4px rgba(255, 215, 0, 0.7), 0 0 10px rgba(255, 215, 0, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 10px rgba(255, 255, 150, 0.95), 0 0 20px rgba(255, 215, 0, 0.85);
        transform: scale(1.08);
    }
}
/* 🟡 Stapla knapparna i favorit-headern */
.favorites-header {
    display: flex;
    flex-direction: column; /* vertikal layout */
    gap: 10px; /* mellanrum mellan knapparna */
    align-items: flex-start; /* vänsterjustera knapparna */
}

/* 🔔 Auto-hint tooltip vid kugghjulet (Scenario C) */
.notif-gear-tooltip-anchor {
    position: relative; /* gör att tooltipen kan positioneras relativt kugghjulet */
}

.notif-tooltip {
    position: absolute;
    bottom: 130%; /* ovanför kugghjulet */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #ffd740;
    border: 1px solid rgba(255, 193, 7, 0.8);
    border-radius: 0.35rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
    z-index: 25;
    opacity: 0;
    animation: notifTooltipFadeIn 0.2s ease-out forwards;
}

    /* Liten pil som pekar mot kugghjulet */
    .notif-tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
    }

/* Enkel fade-in-animation (fade-out sköter vi genom att ta bort elementet i JS) */
@keyframes notifTooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

#notification-quick-modal {
    width: 90%;
    max-width: 800px;
    margin: 1.25rem auto;
    box-sizing: border-box;
}

#notification-quick-modal .favorite-modal-backdrop {
    display: none;
}

#notification-quick-modal .favorite-modal-box {
    width: 100%;
    padding: 1.25rem 1.5rem;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(255, 193, 7, 0.6);
    border-radius: 0.6rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.9);
    color: #ffc107;
    backdrop-filter: blur(4px);
}

#notification-quick-modal .favorite-modal-box h2,
#notification-quick-modal .favorite-modal-box p {
    color: #ffc107;
}

@media (max-width: 767px) {
    #notification-quick-modal {
        width: 100%;
    }

    .mypages-container {
        width: 100%;
        padding: 0 1rem;
        box-sizing: border-box;
    }

    .card {
        width: 100%;
        padding: 1rem;
        box-sizing: border-box;
    }

    .favorites-header {
        width: 100%;
        box-sizing: border-box;
    }

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

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

    .settings-card {
        width: calc(100% - 2rem);
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
        box-sizing: border-box;
    }

        .settings-card .threshold-row {
            flex-wrap: wrap;
        }

        .settings-card input[type="number"],
        .settings-card select {
            max-width: 100%;
            box-sizing: border-box;
        }

    .status-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .status-sub {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    #notification-quick-modal .favorite-modal-box {
        padding: 1rem;
    }

    .table-responsive {
        width: 100%;
        overflow-x: hidden;
    }

    #favorites-table {
        width: 100%;
        table-layout: fixed;
    }

    #favorites-table th,
    #favorites-table td {
        padding: 0.4rem 0.3rem;
        font-size: 0.82rem;
        box-sizing: border-box;
    }

        #favorites-table th:nth-child(1),
        #favorites-table td:nth-child(1) {
            width: 42%;
        }

        #favorites-table th:nth-child(2),
        #favorites-table td:nth-child(2) {
            width: 20%;
        }

        #favorites-table th:nth-child(3),
        #favorites-table td:nth-child(3) {
            width: 16%;
        }

        #favorites-table th:nth-child(7),
        #favorites-table td:nth-child(7) {
            width: 22%;
            text-align: center;
        }

        #favorites-table td:first-child a {
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
}