/* ===========================================
   RADIO GLOBE — FUTURISTIC tema ("kontrolna soba misije")
   Sve je pod body.futuristic-theme, pa ostale teme ništa od ovoga ne vide.
   Boje dolaze iz tema varijabli (js/themes.js → futuristic). Ponašanje
   (telemetrija, stanje play prstena) je u js/futuristic.js.
   =========================================== */

/* Signal crtice i telemetrija postoje u DOM-u za sve teme, ali vidljivi su samo ovdje */
.station-sig, .fx-tele { display: none; }

body.futuristic-theme {
    --fx-acc: var(--cyan);
    --fx-acc2: #00ffaa;
    --fx-warn: #ff5a6e;
    --fx-line: rgba(120, 220, 255, 0.16);
    --fx-line2: rgba(120, 220, 255, 0.34);
    --fx-panel: rgba(8, 14, 28, 0.78);
    --fx-mono: 'DM Mono', ui-monospace, monospace;
    --fx-cut: 12px;
}

/* ---------- HUD okvir: uglati kutovi umjesto zaobljene kartice ---------- */
body.futuristic-theme .glass-panel,
body.futuristic-theme .player-bar,
body.futuristic-theme .modal-content,
body.futuristic-theme .more-menu,
body.futuristic-theme .theme-picker {
    border-radius: 2px !important;
    background: var(--fx-panel) !important;
    border: 1px solid var(--fx-line) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(61, 242, 255, 0.03) !important;
}
body.futuristic-theme .glass-panel::before,
body.futuristic-theme .player-bar::before,
body.futuristic-theme .modal-content::before {
    /* zamijeni neonski gradijent prsten s dva kutna nosača */
    content: '' !important;
    position: absolute !important;
    inset: -1px !important;
    top: -1px !important; left: -1px !important;
    width: auto !important; height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(var(--fx-acc), var(--fx-acc)) top left / 16px 2px no-repeat,
        linear-gradient(var(--fx-acc), var(--fx-acc)) top left / 2px 16px no-repeat,
        linear-gradient(var(--fx-acc), var(--fx-acc)) bottom right / 16px 2px no-repeat,
        linear-gradient(var(--fx-acc), var(--fx-acc)) bottom right / 2px 16px no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 1 !important;
    animation: none !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
body.futuristic-theme .cyber-corner { display: none !important; }

/* ---------- Tipografija: brojke i oznake u monospaceu ---------- */
body.futuristic-theme .panel-brand,
body.futuristic-theme .more-section-title,
body.futuristic-theme .tab-btn,
body.futuristic-theme .tab-badge,
body.futuristic-theme .station-meta,
body.futuristic-theme .player-meta,
body.futuristic-theme .modal-header h2,
body.futuristic-theme .m-more-sec,
body.futuristic-theme .m-tab-lbl,
body.futuristic-theme .m-np-kicker,
body.futuristic-theme .m-sheet-title {
    font-family: var(--fx-mono) !important;
}
body.futuristic-theme .more-section-title,
body.futuristic-theme .m-more-sec {
    letter-spacing: 0.2em !important;
    text-transform: uppercase;
    color: var(--fx-acc) !important;
}
body.futuristic-theme .more-section-title::before,
body.futuristic-theme .m-more-sec::before { content: '// '; opacity: 0.6; }

/* ---------- Pretraga ---------- */
body.futuristic-theme .search-box,
body.futuristic-theme .space-search {
    border-radius: 2px !important;
    border: 1px solid var(--fx-line2) !important;
    background: rgba(0, 0, 0, 0.28) !important;
}
body.futuristic-theme .search-box:focus-within {
    border-color: var(--fx-acc) !important;
    box-shadow: 0 0 0 3px rgba(61, 242, 255, 0.14), 0 0 18px rgba(61, 242, 255, 0.18) !important;
}
body.futuristic-theme .search-shortcut { border-radius: 2px; color: var(--fx-acc); border-color: var(--fx-line2); }

/* ---------- Kartice (Stations / Favorites / ...) ---------- */
body.futuristic-theme .panel-tabs { border: 1px solid var(--fx-line) !important; gap: 0 !important; padding: 0 !important; margin: 4px 12px 8px; }
body.futuristic-theme .tab-btn {
    flex: 1 1 0; min-width: 0; border-radius: 0 !important; font-size: 10px !important;
    letter-spacing: 0.06em; text-transform: uppercase; justify-content: center;
    padding-left: 4px !important; padding-right: 4px !important; white-space: nowrap; overflow: hidden;
}
body.futuristic-theme .tab-btn.active {
    background: rgba(61, 242, 255, 0.10) !important;
    color: var(--fx-acc) !important;
    box-shadow: inset 0 -2px 0 var(--fx-acc) !important;
    border-color: transparent !important;
}
body.futuristic-theme .tab-btn.active::after { display: none !important; }
body.futuristic-theme .tab-badge { border-radius: 2px !important; }

/* ---------- Retci stanica ---------- */
body.futuristic-theme .station-item {
    border-radius: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(120, 220, 255, 0.06) !important;
    background: transparent !important;
    margin: 0 !important;
}
body.futuristic-theme .station-item:hover {
    background: rgba(61, 242, 255, 0.05) !important;
    outline: 1px solid var(--fx-line2);
    outline-offset: -1px;
}
body.futuristic-theme .station-item:focus-visible { outline: 2px solid var(--fx-acc); outline-offset: -2px; }
body.futuristic-theme .station-item.active {
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(61, 242, 255, 0.05) 3px 4px),
        linear-gradient(90deg, rgba(61, 242, 255, 0.16), rgba(61, 242, 255, 0) 85%) !important;
    border-left: 0 !important;
    box-shadow: inset 3px 0 0 var(--fx-acc), inset 14px 0 18px -14px var(--fx-acc) !important;
}
body.futuristic-theme .station-item.active .station-name { color: var(--fx-acc) !important; }
body.futuristic-theme .station-status { display: none !important; }
body.futuristic-theme .station-artwork,
body.futuristic-theme .station-artwork img,
body.futuristic-theme .station-artwork-placeholder {
    border-radius: 2px !important;
}
body.futuristic-theme .station-artwork { box-shadow: 0 0 0 1px var(--fx-line2); }
body.futuristic-theme .station-name { font-weight: 600; letter-spacing: 0.01em; }
body.futuristic-theme .station-meta { font-size: 10.5px !important; letter-spacing: 0.05em; text-transform: uppercase; }
body.futuristic-theme .station-country {
    border-radius: 0 !important; background: transparent !important;
    border: 1px solid var(--fx-line2); color: var(--fx-acc) !important;
}

body.futuristic-theme .station-sig {
    display: flex; gap: 2px; align-items: flex-end; height: 14px; flex: none; margin-left: auto;
}
body.futuristic-theme .station-sig i { width: 3px; background: rgba(127, 147, 173, 0.35); }
body.futuristic-theme .station-sig i:nth-child(1) { height: 4px; }
body.futuristic-theme .station-sig i:nth-child(2) { height: 7px; }
body.futuristic-theme .station-sig i:nth-child(3) { height: 10px; }
body.futuristic-theme .station-sig i:nth-child(4) { height: 14px; }
body.futuristic-theme .station-sig.s4 i,
body.futuristic-theme .station-sig.s3 i:nth-child(-n+3),
body.futuristic-theme .station-sig.s2 i:nth-child(-n+2) { background: var(--fx-acc2); box-shadow: 0 0 4px var(--fx-acc2); }
body.futuristic-theme .station-sig.s1 i:nth-child(1) { background: var(--fx-warn); box-shadow: 0 0 4px var(--fx-warn); }

/* ---------- Player ---------- */
body.futuristic-theme .player-artwork {
    border-radius: 2px !important;
    border: 1px solid var(--fx-line2) !important;
    background: var(--fx-panel) !important;
}
body.futuristic-theme .player-title { letter-spacing: 0.01em; }
body.futuristic-theme .player-meta { font-size: 11px !important; letter-spacing: 0.06em; }
body.futuristic-theme .player-nowplaying,
body.futuristic-theme .player-nowplaying .marquee { font-family: var(--fx-mono); color: var(--fx-acc) !important; }

body.futuristic-theme .fx-tele {
    display: flex; flex-wrap: wrap; gap: 0;
    font: 10.5px var(--fx-mono); letter-spacing: 0.06em; color: var(--text-dim);
    margin-top: 6px;
}
body.futuristic-theme .fx-tele:empty { display: none; }
body.futuristic-theme .fx-tele span { padding: 2px 8px; border: 1px solid var(--fx-line); margin-right: -1px; white-space: nowrap; }
body.futuristic-theme .fx-tele b { color: var(--text); font-weight: 400; }
body.futuristic-theme .fx-led {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px;
    background: var(--fx-acc2); box-shadow: 0 0 8px var(--fx-acc2);
}
body.futuristic-theme #fxTeleNP { justify-content: center; margin-top: 12px; }

body.futuristic-theme .ctrl-btn:not(.ctrl-play) {
    border-radius: 2px !important;
    border: 1px solid var(--fx-line2) !important;
    background: rgba(0, 0, 0, 0.25) !important;
    color: var(--fx-acc) !important;
}
body.futuristic-theme .ctrl-btn:not(.ctrl-play):hover { background: rgba(61, 242, 255, 0.12) !important; }
body.futuristic-theme #favBtn.active,
body.futuristic-theme #favBtn.is-fav { box-shadow: inset 0 0 12px rgba(61, 242, 255, 0.35) !important; }

/* Play: tamna jezgra sa svjetlećim prstenom. Dok se stream spaja prsten se vrti,
   dok svira mirno svijetli. Isto vrijedi za mobilni mini i now-playing gumb. */
body.futuristic-theme .ctrl-play,
body.futuristic-theme .m-np-play,
body.futuristic-theme .m-mini-play {
    position: relative;
    background: radial-gradient(circle, #0e3346, #06121c) !important;
    color: var(--fx-acc) !important;
    border: 1px solid var(--fx-acc) !important;
    box-shadow: 0 0 22px rgba(61, 242, 255, 0.35) !important;
    overflow: visible !important;
}
body.futuristic-theme .ctrl-play::after,
body.futuristic-theme .m-np-play::after,
body.futuristic-theme .m-mini-play::after {
    content: '';
    position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid rgba(61, 242, 255, 0.15);
    pointer-events: none;
}
body.futuristic-theme.fx-playing .ctrl-play::after,
body.futuristic-theme.fx-playing .m-np-play::after,
body.futuristic-theme.fx-playing .m-mini-play::after {
    border-color: var(--fx-acc);
    box-shadow: 0 0 12px rgba(61, 242, 255, 0.55);
}
body.futuristic-theme.fx-loading .ctrl-play::after,
body.futuristic-theme.fx-loading .m-np-play::after,
body.futuristic-theme.fx-loading .m-mini-play::after {
    border-color: rgba(61, 242, 255, 0.15);
    border-top-color: var(--fx-acc);
    border-right-color: var(--fx-acc);
    animation: fxSpin 0.9s linear infinite;
}
@keyframes fxSpin { to { transform: rotate(360deg); } }

body.futuristic-theme .volume-slider,
body.futuristic-theme #mNPVol { accent-color: var(--fx-acc); }

/* ---------- Izbornici (⋯ i postavke) ---------- */
body.futuristic-theme .more-item {
    border-radius: 0 !important;
    border-left: 2px solid transparent !important;
}
body.futuristic-theme .more-item:hover,
body.futuristic-theme .more-item:focus-visible {
    background: rgba(61, 242, 255, 0.08) !important;
    border-left-color: var(--fx-acc) !important;
}
body.futuristic-theme .more-item.active {
    border-left-color: var(--fx-acc2) !important;
    box-shadow: inset 0 0 18px rgba(0, 255, 170, 0.08);
}
body.futuristic-theme .more-item.active::after {
    content: 'ON'; margin-left: auto; padding: 1px 6px;
    font: 10px var(--fx-mono); letter-spacing: 0.15em;
    color: var(--fx-acc2); border: 1px solid var(--fx-acc2);
}

/* ---------- Modali ---------- */
body.futuristic-theme .modal-header {
    background: rgba(61, 242, 255, 0.05);
    border-bottom: 1px solid var(--fx-line) !important;
}
body.futuristic-theme .modal-header h2 { font-size: 13px !important; letter-spacing: 0.18em; text-transform: uppercase; }
body.futuristic-theme .modal-close {
    border-radius: 2px !important; border: 1px solid var(--fx-line) !important;
    font-family: var(--fx-mono);
}
body.futuristic-theme .modal.show .modal-content { animation: fxOpen 0.18s ease-out; }
@keyframes fxOpen { from { transform: scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }

body.futuristic-theme .space-card,
body.futuristic-theme .sat-action-btn,
body.futuristic-theme .mission-card,
body.futuristic-theme .theme-card { border-radius: 2px !important; }
body.futuristic-theme .space-card { border-color: var(--fx-line) !important; background: rgba(0, 0, 0, 0.2) !important; }
body.futuristic-theme .space-card b { font-family: var(--fx-mono); font-size: 13px; letter-spacing: 0.04em; }
body.futuristic-theme .space-card.active { border-color: rgba(0, 255, 170, 0.5) !important; box-shadow: inset 0 0 18px rgba(0, 255, 170, 0.08); }

/* ---------- Mobilna ljuska ---------- */
body.futuristic-theme .m-tabbar {
    background: rgba(4, 7, 14, 0.96) !important;
    border-top: 1px solid var(--fx-line) !important;
}
body.futuristic-theme .m-tab.active { color: var(--fx-acc) !important; }
body.futuristic-theme .m-tab.active .m-tab-ico { filter: drop-shadow(0 0 6px rgba(61, 242, 255, 0.6)); }
body.futuristic-theme .m-tab-lbl { text-transform: uppercase; letter-spacing: 0.08em; font-size: 9px !important; }

body.futuristic-theme .m-mini {
    border-radius: 2px !important;
    background: rgba(8, 14, 28, 0.96) !important;
    border: 1px solid var(--fx-line2) !important;
}
body.futuristic-theme .m-mini-art { border-radius: 2px !important; box-shadow: 0 0 0 1px var(--fx-line2); }
body.futuristic-theme .m-mini-sub { font-family: var(--fx-mono); font-size: 10.5px !important; letter-spacing: 0.05em; }

body.futuristic-theme #panel.glass-panel,
body.futuristic-theme .m-more { background: #050914 !important; }
body.futuristic-theme .m-sheet-title { font-size: 15px !important; letter-spacing: 0.22em !important; text-transform: uppercase; color: var(--fx-acc) !important; }
body.futuristic-theme .m-sheet-close,
body.futuristic-theme .m-np-icon,
body.futuristic-theme .m-np-tp { border-radius: 2px !important; border-color: var(--fx-line2) !important; color: var(--fx-acc) !important; }
body.futuristic-theme .m-more-row { border-top-color: rgba(120, 220, 255, 0.07) !important; }
body.futuristic-theme .m-more-row:active { background: rgba(61, 242, 255, 0.08) !important; }

body.futuristic-theme .m-np {
    background:
        radial-gradient(circle at 50% 38%, rgba(61, 242, 255, 0.10), transparent 60%),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(61, 242, 255, 0.04) 39px 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(61, 242, 255, 0.04) 39px 40px),
        #04060d !important;
}
body.futuristic-theme .m-np-glow { display: none; }
body.futuristic-theme .m-np-kicker { color: var(--fx-acc) !important; letter-spacing: 0.3em !important; }
body.futuristic-theme .m-np-art {
    border-radius: 2px !important;
    box-shadow: 0 0 0 1px var(--fx-line2), 0 0 60px rgba(61, 242, 255, 0.18) !important;
    position: relative;
}
body.futuristic-theme .m-np-art::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(var(--fx-acc), var(--fx-acc)) top left / 22px 2px no-repeat,
        linear-gradient(var(--fx-acc), var(--fx-acc)) top left / 2px 22px no-repeat,
        linear-gradient(var(--fx-acc), var(--fx-acc)) bottom right / 22px 2px no-repeat,
        linear-gradient(var(--fx-acc), var(--fx-acc)) bottom right / 2px 22px no-repeat,
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.12) 3px 4px);
}
body.futuristic-theme .m-np-sub { font-family: var(--fx-mono); color: var(--fx-acc) !important; font-size: 12.5px !important; }
body.futuristic-theme .m-np-eq i { background: linear-gradient(180deg, var(--fx-acc), rgba(0, 255, 170, 0.5)) !important; border-radius: 0 !important; box-shadow: 0 0 6px rgba(61, 242, 255, 0.35); }
body.futuristic-theme .m-np-act { font-family: var(--fx-mono); letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; }

/* ---------- Performanse i pristupačnost ---------- */
@media (max-width: 950px) {
    /* mobitel: bez sjaja na sitnim elementima, bez mreže i scanline slojeva —
       izgled ostaje isti, ali GPU crta manje dok se lista skrola i vizualizator radi */
    body.futuristic-theme .station-sig i { box-shadow: none !important; }
    body.futuristic-theme .station-item.active {
        background: linear-gradient(90deg, rgba(61, 242, 255, 0.16), rgba(61, 242, 255, 0) 85%) !important;
        box-shadow: inset 3px 0 0 var(--fx-acc) !important;
    }
    body.futuristic-theme .m-tab.active .m-tab-ico { filter: none; }
    body.futuristic-theme .m-np { background: radial-gradient(circle at 50% 38%, rgba(61, 242, 255, 0.10), transparent 60%), #04060d !important; }
    body.futuristic-theme .m-np-art::after {
        background:
            linear-gradient(var(--fx-acc), var(--fx-acc)) top left / 22px 2px no-repeat,
            linear-gradient(var(--fx-acc), var(--fx-acc)) top left / 2px 22px no-repeat,
            linear-gradient(var(--fx-acc), var(--fx-acc)) bottom right / 22px 2px no-repeat,
            linear-gradient(var(--fx-acc), var(--fx-acc)) bottom right / 2px 22px no-repeat;
    }
    body.futuristic-theme .m-np-eq i { box-shadow: none; }
}
@media (max-width: 768px) {
    /* mobitel: bez backdrop blura i teških sjena */
    body.futuristic-theme .glass-panel,
    body.futuristic-theme .player-bar,
    body.futuristic-theme .modal-content,
    body.futuristic-theme .more-menu {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.futuristic-theme.fx-loading .ctrl-play::after,
    body.futuristic-theme.fx-loading .m-np-play::after,
    body.futuristic-theme.fx-loading .m-mini-play::after { animation: none; border-color: var(--fx-acc); opacity: 0.6; }
    body.futuristic-theme .modal.show .modal-content { animation: none; }
}