/* =========================================================== */
/* POWER RADIO - REQUEST V7 THEME (ADMIN KLEUREN)             */
/* =========================================================== */
/* Overschrijft :root variabelen + hardcoded kleuren          */
/* Laadt NA request.css                                        */

:root {
    /* === Kleuren: Admin V3 palet === */
    --primary: #4f9dff;
    --primary-dark: #3d87e0;
    --primary-light: #7ab6ff;
    --accent: #7ab6ff;
    --accent-dark: #4f9dff;
    --success: #4ecb71;
    
    --bg-dark: #0f1115;
    --bg-card: #16181d;
    --bg-card-hover: #1c1f26;
    
    --text-light: #e8eaed;
    --text-muted: #b8becc;
    --text-dim: #7a8294;
    
    --border: #252830;
    --border-light: #2f3540;
    
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --glow: 0 0 15px rgba(79, 157, 255, 0.35);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== BODY / BACKGROUND ==================== */
body {
    background: linear-gradient(125deg, rgba(8, 10, 14, 0.90), rgba(8, 10, 14, 0.95)),
                url('https://www.powerradio.nl/images/Powerstudio2026c.png') fixed center/cover;
}

/* ==================== HEADER ==================== */
.power-header {
    background: rgba(10, 12, 16, 0.85);
    border-bottom: 1px solid var(--border);
}

/* Stationnaam gradient → blauw */
.station-name {
    background: linear-gradient(135deg, #4f9dff, #7ab6ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ==================== SEARCH BOX ==================== */
.search-input:focus {
    border-color: var(--primary);
    box-shadow: var(--glow);
}

.search-button {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.search-button:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    box-shadow: 0 0 20px rgba(79, 157, 255, 0.5);
}

/* ==================== SUGGESTIONS ==================== */
.suggestions-header h3 { color: var(--primary); }
.suggestions-header h3 i { color: var(--primary); }

.refresh-suggestions-btn {
    background: rgba(79, 157, 255, 0.1);
    color: var(--primary);
}
.refresh-suggestions-btn:hover {
    background: rgba(79, 157, 255, 0.2);
    border-color: var(--primary);
}

.suggestion-card:hover {
    border-color: var(--primary);
    box-shadow: var(--glow);
}

.suggestion-card-artist { color: var(--primary-light); }
.suggestion-card-year { color: var(--primary); }

.suggestion-card-request-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.suggestion-card-request-btn:hover {
    background: var(--primary-light);
    box-shadow: 0 2px 8px rgba(79, 157, 255, 0.4);
}

.suggestion-item:hover {
    border-color: var(--primary);
    box-shadow: var(--glow);
}
.suggestion-artist { color: var(--primary-light); }
.suggestion-request-count {
    color: var(--primary);
    background: rgba(79, 157, 255, 0.1);
}
.suggestion-request-btn {
    background: var(--primary);
}
.suggestion-request-btn:hover {
    background: var(--primary-light);
}

/* ==================== PENDING / RECENT ==================== */
.pending-section h3,
.recent-section h3 { color: var(--primary); }

.pending-item, .recent-item {
    border-left: 4px solid var(--primary);
}

.pending-item:hover,
.recent-item:hover {
    box-shadow: 0 10px 20px rgba(79, 157, 255, 0.15);
}

.pending-info strong,
.recent-info strong {
    color: var(--primary-light);
}

.pending-requester i,
.recent-requester i {
    color: var(--primary);
}

.pending-message, .recent-message {
    border-left: 3px solid var(--primary);
}
.pending-message i,
.recent-message i {
    color: var(--primary);
}

.playing-badge {
    background: var(--success);
    color: #fff;
}

/* ==================== LIVE SEARCH DROPDOWN ==================== */
.live-search-item:hover,
.live-search-card:hover {
    background: rgba(79, 157, 255, 0.1);
}

.live-search-artist { color: var(--primary-light); }
.live-search-year { color: var(--primary); }

.live-search-request-btn {
    background: var(--primary);
}
.live-search-request-btn:hover {
    background: var(--primary-light);
}

/* ==================== MODAL ==================== */
.modal-content h2 {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
}
.modal-content h2 i {
    color: #fff;
    text-shadow: none;
}

.selected-song-cover {
    border: 2px solid var(--primary);
}
.selected-song-cover i { color: var(--primary); }
.selected-song-details strong { color: var(--primary-light); }

.form-group label { color: var(--primary); }
.form-group label i { color: var(--primary); }

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 157, 255, 0.2);
}

.submit-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 2px 8px rgba(79, 157, 255, 0.3);
}
.submit-btn:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    box-shadow: 0 6px 20px rgba(79, 157, 255, 0.5);
}

.success-icon { color: var(--primary); }
#successModal h2 { color: var(--primary); }

.ok-btn {
    background: var(--primary);
    color: #fff;
}
.ok-btn:hover {
    background: var(--primary-light);
}

/* ==================== TICKER POPUP ==================== */
.ticker-modal-header {
    background: linear-gradient(135deg, rgba(79, 157, 255, 0.15), rgba(79, 157, 255, 0.06));
}

.ticker-modal-title i { color: var(--primary); }
.ticker-modal-title #popupSearchQuery { color: var(--primary); }

.ticker-modal-close:hover {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.loading-spinner {
    border: 3px solid rgba(79, 157, 255, 0.2);
    border-top-color: var(--primary);
}

.ticker-artist-group:hover {
    border-color: rgba(79, 157, 255, 0.3);
}

.ticker-artist-header {
    background: linear-gradient(135deg, rgba(79, 157, 255, 0.12), rgba(79, 157, 255, 0.05));
}

.ticker-artist-name { color: var(--primary-light); }

.ticker-song-count {
    background: rgba(79, 157, 255, 0.15);
    color: var(--primary);
    border: 1px solid rgba(79, 157, 255, 0.3);
}

.ticker-song-item:hover {
    background: rgba(79, 157, 255, 0.06);
}

.ticker-song-year {
    color: var(--primary);
    background: rgba(79, 157, 255, 0.1);
}

.ticker-request-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
}
.ticker-request-btn:hover {
    background: var(--primary-light);
    box-shadow: 0 4px 12px rgba(79, 157, 255, 0.4);
}

.ticker-count strong { color: var(--primary); }

.ticker-close-btn:hover {
    background: rgba(79, 157, 255, 0.15);
    border-color: var(--primary);
}

/* ==================== FOOTER ==================== */
.power-footer a { color: var(--primary); }
.power-footer a:hover { color: var(--primary-light); }

/* ==================== HEADER LIMITS ==================== */
.limit-badge-header i { color: var(--primary); }
.limit-badge-header strong { color: var(--primary); }

.home-button i, .popup-player-btn i { color: var(--primary); }
.home-button:hover, .popup-player-btn:hover {
    background: rgba(79, 157, 255, 0.15);
    border-color: var(--primary);
}
.pr-darkmode-toggle:hover {
    background: rgba(79, 157, 255, 0.15);
    border-color: var(--primary);
}

.header-quote a { color: var(--primary); }

/* ==================== LIGHT MODE ==================== */
body.light-mode {
    background: linear-gradient(125deg, rgba(250, 251, 253, 0.92), rgba(240, 243, 248, 0.95)),
                url('https://www.powerradio.nl/images/Powerstudio2026c.png') fixed center/cover;
}

body.light-mode .station-name {
    background: linear-gradient(135deg, #4f9dff, #3d87e0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.light-mode .suggestion-artist,
body.light-mode .suggestion-card-artist { color: var(--primary-dark); }

body.light-mode .pending-item strong,
body.light-mode .recent-item strong { color: var(--primary-dark); }

body.light-mode .live-search-artist { color: var(--primary-dark); }

body.light-mode .selected-song-details strong { color: var(--primary-dark); }

/* ==================== KLEINE REFINEMENTS ==================== */
/* Suggestieblokken verbergen tijdens zoeken (was al, blijft) */
body.search-active .suggestions-section {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Smooth hover op alle request-knoppen */
.suggestion-card-request-btn,
.suggestion-request-btn,
.live-search-request-btn,
.ticker-request-btn,
.submit-btn,
.ok-btn {
    transition: all 0.2s ease;
}