/* --- MODERN DARK/NEON THEME --- */

:root {
    --bg-gradient: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    --primary-purple: #8e2de2;
    --primary-blue: #4a00e0;
    --dark-blue: #1a2a6c; /* Mörkare blå för knappar */
    --accent-cyan: #00c6ff;
    --success-green: #28a745; /* Den gröna färgen du ville ha */
    --text-light: #f8f9fa;
    --card-bg: rgba(25, 25, 45, 0.6);
    --player-bg: rgba(15, 12, 41, 0.95);
}

body {
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-light);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    padding-bottom: 100px;
}

/* --- KORT & PANELER --- */
.card {
    background-color: var(--card-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-light);
}

/* --- KNAPPAR --- */
.btn-primary {
    background: linear-gradient(45deg, var(--primary-blue), var(--primary-purple)) !important;
    border: none !important;
}

/* Din nya mörkblå knapp */
.btn-dark-blue {
    background-color: #0d47a1 !important;
    color: white !important;
    border: none !important;
}

    .btn-dark-blue:hover {
        background-color: #0a3d8d !important;
        color: #00c6ff !important;
    }

/* Den gröna knappen för "Klar" */
.btn-vibrant-green {
    background-color: var(--success-green) !important;
    color: white !important;
    border: none !important;
}

    .btn-vibrant-green:hover {
        filter: brightness(1.1);
        box-shadow: 0 0 15px rgba(40, 167, 69, 0.4);
    }

/* NAVBAR */
.navbar {
    background: rgba(15, 12, 41, 0.8) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.navbar-brand {
    font-weight: 800;
    background: -webkit-linear-gradient(45deg, var(--accent-cyan), var(--primary-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* TABELLER */
.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
}

/* FORMULÄR */
.form-control {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* GLOBAL SPELARE */
.global-player-bar {
    background: var(--player-bg) !important;
    border-top: 2px solid transparent !important;
    border-image: linear-gradient(to right, var(--primary-purple), var(--accent-cyan)) 1 !important;
}

audio {
    filter: invert(0.9) hue-rotate(180deg);
}