/* ======================================================================== TEME APLIKACIJE ======================================================================== Korisnik bira temu u Moje postavke. Theme se primjenjuje preko data-theme="..." atributa na elementu. Default je 'dark' (postojeci izgled). Sve teme prevazilaze postojece hardkodirane boje kroz vrlo specificne selektore. AIO tema ima dodatne animacije i efekte. ======================================================================== */ /* ====================== DARK (default - postojeci izgled) ============== */ /* Nista ne dirati - default je sto vec postoji u style.css */ /* ====================== LIGHT MODE ===================================== */ /* Light tema treba da prevazidje 300+ hardkodiranih `color:#fff` i 75+ tamnih pozadina u style.css. Pristup: 1) Univerzalni !important override koji preokreće osnovne boje 2) Specificni override-i za elemente sa gradijentima/branding-om 3) Whitelist za elemente koji moraju ostati bijeli (gradient buttons, active nav, badges, FAB-ovi). */ html[data-theme="light"] body{background:#f1f5f9 !important;color:#0f172a !important} /* === STEP 1: Universal text color override === Sve sto ima bijeli tekst (color:#fff, rgba(255,255,255,...)) postaje tamno. Izuzeci kroz :not() za elemente koji MORAJU ostati bijeli. */ html[data-theme="light"] *:not(.btn-primary):not(.btn-primary *):not(.btn-save):not(.btn-save *):not(.btn-ig):not(.btn-ig *):not(.btn-settings):not(.btn-settings *):not(.btn-publish-version):not(.btn-publish-version *):not(.mp-btn-primary):not(.mp-btn-primary *):not(.btn-yt):not(.btn-yt *):not(.btn-add):not(.btn-add *):not(.btn-yt-add):not(.btn-yt-add *):not(.nav-item.active):not(.nav-item.active *):not(.btn-logout):not(.btn-logout *):not(.user-sa-badge):not(.user-mgr-badge):not(.user-op-badge):not(.user-me-badge):not(.app-version-modal-btn-primary):not(.app-version-modal-btn-primary *):not(.gp-alert):not(.gp-alert *):not(.error):not(.error *):not(.theme-option.active):not(.theme-option.active *):not(.theme-option-badge):not(.pwa-install-fab):not(.pwa-install-fab *):not(.push-enable-fab):not(.push-enable-fab *):not(.nav-badge):not(.btn-rezv-approve):not(.btn-rezv-approve *):not(.btn-rezv-reject):not(.btn-rezv-reject *):not(.rezv-status-pending):not(.rezv-status-active):not(.btn-delete):not(.btn-delete *):not(.gp-pending-num):not(.app-version-modal-icon):not(.app-version-modal-icon *):not(.ai-mod-indicator):not(.ai-mod-indicator *):not(.toast):not(.toast *):not(.rezv-toast):not(.rezv-toast *){ color:#0f172a; } /* === STEP 2: Tamne pozadine -> svijetle === Univerzalni override za sve tamne pozadine. Selektor je vrlo specifican da prevazidje hardkodirane stilove. Bijelu pozadinu (#fff) dobijaju svi kontejneri osim onih koji moraju ostati gradient/colored (dugmad, FAB-ovi). */ html[data-theme="light"] .card, html[data-theme="light"] .mp-card, html[data-theme="light"] .settings-box, html[data-theme="light"] .ig-box, html[data-theme="light"] .yt-box, html[data-theme="light"] .yt-add-box, html[data-theme="light"] .yt-current, html[data-theme="light"] .yt-settings-box, html[data-theme="light"] .yt-playlist-item, html[data-theme="light"] .yt-help, html[data-theme="light"] .user-card, html[data-theme="light"] .vj-card, html[data-theme="light"] .vj-text-card, html[data-theme="light"] .volume-box, html[data-theme="light"] .livedj-current, html[data-theme="light"] .livedj-card, html[data-theme="light"] .livedj-qi, html[data-theme="light"] .livedj-search-result, html[data-theme="light"] .livedj-playlist-item, html[data-theme="light"] .livedj-history-item, html[data-theme="light"] .strobe-box, html[data-theme="light"] .ig-status, html[data-theme="light"] .ai-mod-status-box, html[data-theme="light"] .gp-photo-card, html[data-theme="light"] .gp-modal-content, html[data-theme="light"] .gp-pending-card, html[data-theme="light"] .rezv-modal, html[data-theme="light"] .rezv-modal-content, html[data-theme="light"] .rezv-loc-card, html[data-theme="light"] .rezv-loc-card-active, html[data-theme="light"] .rezv-pending-card, html[data-theme="light"] .rezv-pending-banner, html[data-theme="light"] .rezv-details-row, html[data-theme="light"] .rezv-hol-item, html[data-theme="light"] .rezv-tv-set-toggle-row, html[data-theme="light"] .cjenik-category-card, html[data-theme="light"] .cjenik-item-card, html[data-theme="light"] .cjenik-modal-content, html[data-theme="light"] .activity-item, html[data-theme="light"] .activity-card, html[data-theme="light"] .app-version-modal, html[data-theme="light"] .app-version-box{background:#fff !important;border-color:rgba(15,23,42,.08) !important;box-shadow:0 1px 3px rgba(15,23,42,.06)} /* Nav menu - bijeli na svijetlom backgroundu sa diskretnom sjenom */ html[data-theme="light"] .nav-menu{background:#fff !important;box-shadow:0 2px 12px rgba(15,23,42,.08);border:1px solid rgba(15,23,42,.06)} html[data-theme="light"] .nav-item{color:#475569 !important;background:transparent} html[data-theme="light"] .nav-item:hover{background:rgba(15,23,42,.04)} html[data-theme="light"] .nav-item.active{background:linear-gradient(135deg,#3b82f6,#2563eb) !important;color:#fff !important} html[data-theme="light"] .nav-item.active svg{color:#fff !important} html[data-theme="light"] .nav-item.active *{color:#fff !important} /* Inputs - svijetle pozadine sa tamnim tekstom */ html[data-theme="light"] textarea, html[data-theme="light"] input[type="text"], html[data-theme="light"] input[type="number"], html[data-theme="light"] input[type="password"], html[data-theme="light"] input[type="email"], html[data-theme="light"] input[type="tel"], html[data-theme="light"] input[type="date"], html[data-theme="light"] input[type="url"], html[data-theme="light"] input[type="search"], html[data-theme="light"] select, html[data-theme="light"] .ig-input, html[data-theme="light"] .ig-input-small, html[data-theme="light"] .yt-add-input, html[data-theme="light"] .yt-input, html[data-theme="light"] .settings-input, html[data-theme="light"] .user-input, html[data-theme="light"] .mp-input, html[data-theme="light"] .vj-text-input, html[data-theme="light"] .livedj-search-input, html[data-theme="light"] .cjenik-input, html[data-theme="light"] .activity-filter-input{ background:#fff !important; color:#0f172a !important; border-color:rgba(15,23,42,.15) !important; } html[data-theme="light"] textarea:focus, html[data-theme="light"] input:focus, html[data-theme="light"] select:focus{border-color:#3b82f6 !important;background:#fff !important} html[data-theme="light"] textarea::placeholder, html[data-theme="light"] input::placeholder{color:rgba(15,23,42,.4) !important;opacity:1} /* Header */ html[data-theme="light"] .header h1{color:#0f172a !important} html[data-theme="light"] .header-left .menu-icon{color:#0f172a !important} html[data-theme="light"] .btn-logout{background:rgba(239,68,68,.08) !important;color:#dc2626 !important;border-color:#dc2626 !important} /* Login screen */ html[data-theme="light"] .login-logo h1{color:#d97706 !important;-webkit-text-fill-color:#d97706} html[data-theme="light"] .login-logo p{color:#475569 !important} html[data-theme="light"] .login-box{background:transparent} /* Instagram gradient - ostaje gradient za branding */ html[data-theme="light"] .ig-title, html[data-theme="light"] .card-title.instagram{ background:linear-gradient(90deg,#dc2743,#bc1888) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; } /* Info boxovi i help */ html[data-theme="light"] .info-box{background:rgba(59,130,246,.06) !important;color:#475569 !important;border-color:rgba(59,130,246,.18) !important} html[data-theme="light"] .info-box strong{color:#2563eb !important} html[data-theme="light"] .yt-help, html[data-theme="light"] .rezv-tv-set-info, html[data-theme="light"] .rezv-hol-info{background:rgba(15,23,42,.04) !important;color:#475569 !important;border-color:rgba(15,23,42,.08) !important} html[data-theme="light"] .yt-help strong, html[data-theme="light"] .rezv-tv-set-info strong, html[data-theme="light"] .rezv-hol-info strong{color:#0f172a !important} /* Labels i sekundarni tekst */ html[data-theme="light"] .mp-card-desc, html[data-theme="light"] .mp-status-label, html[data-theme="light"] .ig-label, html[data-theme="light"] .settings-label, html[data-theme="light"] .yt-label, html[data-theme="light"] .yt-current-label, html[data-theme="light"] .yt-add-title, html[data-theme="light"] .yt-current-none, html[data-theme="light"] .mp-label, html[data-theme="light"] .user-date, html[data-theme="light"] .char-count, html[data-theme="light"] .toggle-label, html[data-theme="light"] .ig-unit, html[data-theme="light"] .vj-page-info, html[data-theme="light"] .vj-text-card-effect, html[data-theme="light"] .activity-meta, html[data-theme="light"] .rezv-cal-day-name, html[data-theme="light"] .rezv-cal-empty, html[data-theme="light"] .rezv-status-text, html[data-theme="light"] .livedj-qi-dur, html[data-theme="light"] .livedj-empty, html[data-theme="light"] .form-group label{color:#475569 !important} html[data-theme="light"] .user-name, html[data-theme="light"] .card-title, html[data-theme="light"] .mp-card-title, html[data-theme="light"] .settings-title, html[data-theme="light"] .yt-title, html[data-theme="light"] .yt-settings-title, html[data-theme="light"] .yt-current-title, html[data-theme="light"] .yt-playlist-name, html[data-theme="light"] .gp-pending-title, html[data-theme="light"] .gp-pending-title span, html[data-theme="light"] .livedj-current-title, html[data-theme="light"] .vj-card-title, html[data-theme="light"] .volume-title, html[data-theme="light"] .strobe-title, html[data-theme="light"] .rezv-loc-name, html[data-theme="light"] .rezv-modal-title, html[data-theme="light"] .cjenik-category-title, html[data-theme="light"] .cjenik-item-name{color:#0f172a !important;-webkit-text-fill-color:#0f172a} /* Status / pomocni elementi */ html[data-theme="light"] .mp-status-row{background:rgba(15,23,42,.04) !important;border-color:rgba(15,23,42,.06) !important} html[data-theme="light"] .mp-btn-secondary{background:rgba(15,23,42,.06) !important;color:#0f172a !important;border-color:rgba(15,23,42,.12) !important} html[data-theme="light"] .mp-btn-secondary:hover{background:rgba(15,23,42,.1) !important} /* Sub-tabovi u Postavkama */ html[data-theme="light"] .postavke-tabs{background:rgba(15,23,42,.04) !important;border-color:rgba(15,23,42,.06) !important} html[data-theme="light"] .postavke-tab{color:#475569 !important;background:transparent} html[data-theme="light"] .postavke-tab:hover{background:rgba(15,23,42,.05) !important;color:#0f172a !important} html[data-theme="light"] .postavke-tab.active{background:rgba(59,130,246,.12) !important;color:#2563eb !important;box-shadow:inset 0 0 0 1px rgba(59,130,246,.3)} /* Modal-ovi - app version, gp modal, rezv modal */ html[data-theme="light"] .app-version-modal-title, html[data-theme="light"] .app-version-modal-text{color:#0f172a !important} html[data-theme="light"] .app-version-modal-btn-secondary{background:rgba(15,23,42,.06) !important;color:#0f172a !important;border-color:rgba(15,23,42,.12) !important} /* Modal overlay (backdrop) - svjetliji u light teme */ html[data-theme="light"] .gp-modal, html[data-theme="light"] .rezv-modal-overlay, html[data-theme="light"] .cjenik-modal, html[data-theme="light"] .app-version-modal-overlay{background:rgba(15,23,42,.45) !important} /* Footer */ html[data-theme="light"] .footer{color:#64748b !important} html[data-theme="light"] .footer a{color:#2563eb !important} /* Toggle slider - default tip */ html[data-theme="light"] .toggle-slider{background:rgba(15,23,42,.18) !important} html[data-theme="light"] .toggle-slider::before{background:#fff} html[data-theme="light"] .toggle input:checked + .toggle-slider{background:#22c55e !important} /* User/Admin toggle slideri */ html[data-theme="light"] .user-mgr-toggle-slider, html[data-theme="light"] .user-sa-toggle-slider, html[data-theme="light"] .user-op-toggle-slider{background:rgba(15,23,42,.18) !important} html[data-theme="light"] .user-mgr-toggle-slider::before, html[data-theme="light"] .user-sa-toggle-slider::before, html[data-theme="light"] .user-op-toggle-slider::before{background:#fff} /* Theme picker - name vidljiv u light tema */ html[data-theme="light"] .theme-option-name{color:#0f172a !important} html[data-theme="light"] .theme-option.active{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb,0 4px 16px rgba(37,99,235,.2)} /* Color helpers - blue/purple klase iz card-title-a treba ostati u boji */ html[data-theme="light"] .card-title.blue{color:#2563eb !important} html[data-theme="light"] .card-title.purple{color:#7c3aed !important} /* Strobe boxes - imaju tamnu pozadinu po dizajnu, neka ostane suptilno */ html[data-theme="light"] .strobe-color-btn, html[data-theme="light"] .strobe-speed-btn{background:#fff !important;color:#0f172a !important;border-color:rgba(15,23,42,.12) !important} html[data-theme="light"] .strobe-speed-btn.active{background:#3b82f6 !important;color:#fff !important;border-color:#3b82f6 !important} /* Border na svim svjetlim kontejnerima - blagi border umjesto sjene gdje treba */ html[data-theme="light"] .yt-current, html[data-theme="light"] .yt-add-box, html[data-theme="light"] .yt-settings-box, html[data-theme="light"] .yt-playlist-item, html[data-theme="light"] .activity-item{border:1px solid rgba(15,23,42,.08) !important} /* ====================== MIDNIGHT PURPLE =============================== */ html[data-theme="midnight"] body{background:radial-gradient(ellipse at top,#1e1b4b 0%,#0f0a2e 60%,#050217 100%);min-height:100vh;color:#f1f5f9} html[data-theme="midnight"] .nav-menu{background:rgba(30,27,75,.6);border:1px solid rgba(168,85,247,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} html[data-theme="midnight"] .nav-item{color:rgba(241,245,249,.55)} html[data-theme="midnight"] .nav-item:hover{color:rgba(241,245,249,.9)} html[data-theme="midnight"] .nav-item.active{background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff;box-shadow:0 4px 14px rgba(168,85,247,.4)} html[data-theme="midnight"] .card{background:rgba(30,27,75,.4);border:1px solid rgba(168,85,247,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} html[data-theme="midnight"] .btn-primary{background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff} html[data-theme="midnight"] .btn-save{background:linear-gradient(135deg,#a855f7,#7c3aed)} html[data-theme="midnight"] .login-logo h1{color:#a855f7} html[data-theme="midnight"] textarea:focus, html[data-theme="midnight"] .form-group input:focus, html[data-theme="midnight"] .mp-input:focus, html[data-theme="midnight"] .ig-input:focus{border-color:#a855f7} html[data-theme="midnight"] .info-box{background:rgba(168,85,247,.08);border-color:rgba(168,85,247,.2);color:rgba(241,245,249,.8)} html[data-theme="midnight"] .info-box strong{color:#a855f7} html[data-theme="midnight"] .mp-card{background:rgba(30,27,75,.4);border-color:rgba(168,85,247,.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} html[data-theme="midnight"] .mp-card-icon{color:#a855f7} html[data-theme="midnight"] .mp-btn-primary{background:linear-gradient(135deg,#a855f7,#7c3aed);box-shadow:0 4px 14px rgba(168,85,247,.3)} html[data-theme="midnight"] .mp-btn-primary:hover{box-shadow:0 6px 18px rgba(168,85,247,.45)} html[data-theme="midnight"] .postavke-tabs{background:rgba(30,27,75,.4);border-color:rgba(168,85,247,.12)} html[data-theme="midnight"] .postavke-tab.active{background:rgba(168,85,247,.2);color:#a855f7;box-shadow:inset 0 0 0 1px rgba(168,85,247,.4)} html[data-theme="midnight"] .settings-box, html[data-theme="midnight"] .ig-box, html[data-theme="midnight"] .yt-box{background:rgba(30,27,75,.35);border-color:rgba(168,85,247,.15)} html[data-theme="midnight"] .header h1{background:linear-gradient(90deg,#a855f7,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800} /* ====================== AIO (AI-OPTIMIZED) ============================ */ /* Najnaprednija tema - futuristicki neon, glass morphism, animacije */ html[data-theme="aio"] body{ background:#000814; min-height:100vh; color:#e0f2fe; position:relative; overflow-x:hidden; } /* Animirani gradient background */ html[data-theme="aio"] body::before{ content:''; position:fixed; inset:0; z-index:-2; background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(0,212,255,.18) 0%, transparent 50%), radial-gradient(ellipse 80% 60% at 100% 0%, rgba(139,92,246,.18) 0%, transparent 50%), radial-gradient(ellipse 80% 60% at 50% 100%, rgba(236,72,153,.15) 0%, transparent 50%), #000814; animation:aioGradient 20s ease-in-out infinite alternate; } /* Floating particles overlay (CSS-only, lagano) */ html[data-theme="aio"] body::after{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image: radial-gradient(circle at 20% 30%, rgba(0,212,255,.06) 0%, transparent 8%), radial-gradient(circle at 70% 60%, rgba(139,92,246,.06) 0%, transparent 8%), radial-gradient(circle at 40% 80%, rgba(236,72,153,.06) 0%, transparent 8%), radial-gradient(circle at 90% 20%, rgba(34,197,94,.05) 0%, transparent 8%); animation:aioParticles 30s ease-in-out infinite alternate; } @keyframes aioGradient{ 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(20deg)} } @keyframes aioParticles{ 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-20px,-20px) scale(1.05)} } /* Nav menu - glass morphism */ html[data-theme="aio"] .nav-menu{ background:rgba(15,23,42,.4); border:1px solid rgba(0,212,255,.15); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); box-shadow:0 8px 32px rgba(0,212,255,.08),inset 0 1px 0 rgba(255,255,255,.05) } html[data-theme="aio"] .nav-item{color:rgba(224,242,254,.5);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative} html[data-theme="aio"] .nav-item::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(0,212,255,.2),rgba(139,92,246,.2)); opacity:0; transition:opacity .3s ease; pointer-events:none; } html[data-theme="aio"] .nav-item:hover{color:#fff;transform:translateY(-1px)} html[data-theme="aio"] .nav-item:hover::after{opacity:.5} html[data-theme="aio"] .nav-item.active{ background:linear-gradient(135deg,#06b6d4 0%,#3b82f6 50%,#8b5cf6 100%); color:#fff; box-shadow:0 4px 20px rgba(0,212,255,.4),0 0 0 1px rgba(0,212,255,.3),inset 0 1px 0 rgba(255,255,255,.2); text-shadow:0 0 8px rgba(255,255,255,.3) } /* Header */ html[data-theme="aio"] .header h1{ background:linear-gradient(90deg,#06b6d4,#8b5cf6,#ec4899); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; animation:aioShimmer 3s linear infinite } @keyframes aioShimmer{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} } html[data-theme="aio"] .btn-logout{ background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.4); color:#fca5a5; box-shadow:0 0 12px rgba(239,68,68,.15) } html[data-theme="aio"] .btn-logout:hover{background:rgba(239,68,68,.18);box-shadow:0 0 20px rgba(239,68,68,.3)} /* Cards i kontejneri - glass morphism */ html[data-theme="aio"] .card, html[data-theme="aio"] .mp-card, html[data-theme="aio"] .settings-box, html[data-theme="aio"] .ig-box, html[data-theme="aio"] .yt-box{ background:rgba(15,23,42,.5); border:1px solid rgba(0,212,255,.12); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04); transition:border-color .3s ease,box-shadow .3s ease } html[data-theme="aio"] .card:hover, html[data-theme="aio"] .mp-card:hover{ border-color:rgba(0,212,255,.3); box-shadow:0 12px 40px rgba(0,212,255,.1),inset 0 1px 0 rgba(255,255,255,.06) } /* Inputs - clean futuristic */ html[data-theme="aio"] textarea, html[data-theme="aio"] .mp-input, html[data-theme="aio"] .ig-input, html[data-theme="aio"] .yt-add-input, html[data-theme="aio"] .settings-input, html[data-theme="aio"] .user-input, html[data-theme="aio"] .ig-input-small, html[data-theme="aio"] .form-group input{ background:rgba(0,8,20,.6); border:1px solid rgba(0,212,255,.15); color:#e0f2fe; transition:all .3s ease } html[data-theme="aio"] textarea:focus, html[data-theme="aio"] .mp-input:focus, html[data-theme="aio"] .ig-input:focus, html[data-theme="aio"] .yt-add-input:focus, html[data-theme="aio"] .settings-input:focus, html[data-theme="aio"] .user-input:focus, html[data-theme="aio"] .form-group input:focus{ border-color:#06b6d4; background:rgba(0,8,20,.8); box-shadow:0 0 0 4px rgba(6,182,212,.1),0 0 20px rgba(6,182,212,.2) } /* Dugmad - glow effect */ html[data-theme="aio"] .mp-btn-primary, html[data-theme="aio"] .btn-primary, html[data-theme="aio"] .btn-save, html[data-theme="aio"] .btn-ig, html[data-theme="aio"] .btn-settings, html[data-theme="aio"] .btn-yt, html[data-theme="aio"] .btn-add{ background:linear-gradient(135deg,#06b6d4 0%,#3b82f6 50%,#8b5cf6 100%); background-size:200% 100%; color:#fff; box-shadow:0 4px 20px rgba(6,182,212,.3),0 0 0 1px rgba(6,182,212,.2),inset 0 1px 0 rgba(255,255,255,.2); transition:all .3s ease; text-shadow:0 0 8px rgba(255,255,255,.2); position:relative; overflow:hidden } html[data-theme="aio"] .mp-btn-primary:hover, html[data-theme="aio"] .btn-primary:hover, html[data-theme="aio"] .btn-save:hover, html[data-theme="aio"] .btn-ig:hover, html[data-theme="aio"] .btn-settings:hover{ background-position:100% 0; box-shadow:0 8px 30px rgba(6,182,212,.5),0 0 0 1px rgba(6,182,212,.4),inset 0 1px 0 rgba(255,255,255,.3); transform:translateY(-1px) } /* Sub-tabs */ html[data-theme="aio"] .postavke-tabs{ background:rgba(15,23,42,.5); border-color:rgba(0,212,255,.12); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px) } html[data-theme="aio"] .postavke-tab{color:rgba(224,242,254,.5)} html[data-theme="aio"] .postavke-tab:hover{background:rgba(0,212,255,.06);color:#06b6d4} html[data-theme="aio"] .postavke-tab.active{ background:linear-gradient(135deg,rgba(6,182,212,.2),rgba(139,92,246,.2)); color:#06b6d4; box-shadow:inset 0 0 0 1px rgba(6,182,212,.4),0 0 12px rgba(6,182,212,.15) } /* Info box */ html[data-theme="aio"] .info-box{ background:linear-gradient(135deg,rgba(6,182,212,.06),rgba(139,92,246,.06)); border:1px solid rgba(6,182,212,.2); color:rgba(224,242,254,.85) } html[data-theme="aio"] .info-box strong{color:#06b6d4;text-shadow:0 0 8px rgba(6,182,212,.3)} /* Status values */ html[data-theme="aio"] .mp-status-row{ background:rgba(0,8,20,.6); border:1px solid rgba(0,212,255,.1) } html[data-theme="aio"] .mp-status-value.ok{color:#22d3ee;text-shadow:0 0 8px rgba(34,211,238,.4)} html[data-theme="aio"] .mp-status-value.err{color:#fb7185;text-shadow:0 0 8px rgba(251,113,133,.4)} /* App version modal */ html[data-theme="aio"] .app-version-modal{ background:rgba(15,23,42,.95); border:1px solid rgba(6,182,212,.3); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(6,182,212,.15) } html[data-theme="aio"] .app-version-modal-icon{ background:linear-gradient(135deg,#06b6d4,#8b5cf6); box-shadow:0 0 30px rgba(6,182,212,.4) } html[data-theme="aio"] .app-version-modal-btn-primary{ background:linear-gradient(135deg,#06b6d4,#8b5cf6); box-shadow:0 4px 20px rgba(6,182,212,.3) } /* PWA install + push enable FAB-ovi */ html[data-theme="aio"] .pwa-install-fab{ background:linear-gradient(135deg,#06b6d4,#3b82f6); box-shadow:0 4px 24px rgba(6,182,212,.4),0 0 40px rgba(6,182,212,.15) } html[data-theme="aio"] .push-enable-fab{ background:linear-gradient(135deg,#f59e0b,#dc2626); box-shadow:0 4px 24px rgba(245,158,11,.4) } /* ====================== Theme picker u Moje postavke ================== */ .theme-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:6px} .theme-option{position:relative;cursor:pointer;border-radius:12px;padding:0;border:2px solid transparent;background:none;font-family:inherit;transition:all .2s ease;display:block;text-align:left} .theme-option:focus-visible{outline:2px solid #3b82f6;outline-offset:2px} .theme-option.active{border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6,0 4px 16px rgba(59,130,246,.2)} .theme-option-preview{height:80px;border-radius:10px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:8px} .theme-option-preview::after{content:'';position:absolute;left:8px;right:8px;bottom:8px;height:6px;border-radius:3px;background:rgba(255,255,255,.3)} .theme-option[data-theme="dark"] .theme-option-preview{background:#0f172a;border:1px solid rgba(255,255,255,.08)} .theme-option[data-theme="dark"] .theme-option-preview::after{background:linear-gradient(90deg,#3b82f6,#2563eb)} .theme-option[data-theme="light"] .theme-option-preview{background:#f1f5f9;border:1px solid rgba(15,23,42,.1)} .theme-option[data-theme="light"] .theme-option-preview::after{background:linear-gradient(90deg,#3b82f6,#2563eb)} .theme-option[data-theme="midnight"] .theme-option-preview{background:radial-gradient(ellipse at top,#1e1b4b 0%,#0f0a2e 60%,#050217 100%);border:1px solid rgba(168,85,247,.2)} .theme-option[data-theme="midnight"] .theme-option-preview::after{background:linear-gradient(90deg,#a855f7,#7c3aed)} .theme-option[data-theme="aio"] .theme-option-preview{ background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(0,212,255,.3) 0%, transparent 50%), radial-gradient(ellipse 80% 60% at 100% 100%, rgba(139,92,246,.3) 0%, transparent 50%), #000814; border:1px solid rgba(6,182,212,.3); box-shadow:inset 0 0 12px rgba(6,182,212,.15) } .theme-option[data-theme="aio"] .theme-option-preview::after{ background:linear-gradient(90deg,#06b6d4,#8b5cf6,#ec4899); box-shadow:0 0 8px rgba(6,182,212,.5) } .theme-option-name{display:block;padding:8px 6px 6px;font-size:13px;font-weight:600;color:rgba(255,255,255,.85)} .theme-option-badge{display:inline-block;font-size:9px;font-weight:700;padding:2px 6px;border-radius:6px;background:linear-gradient(135deg,#06b6d4,#8b5cf6);color:#fff;margin-left:6px;vertical-align:1px;letter-spacing:.5px;animation:aioBadgePulse 2s ease-in-out infinite} @keyframes aioBadgePulse{0%,100%{box-shadow:0 0 0 0 rgba(6,182,212,.4)}50%{box-shadow:0 0 0 6px rgba(6,182,212,0)}} /* Light tema mora promijeniti i ovaj label */ html[data-theme="light"] .theme-option-name{color:rgba(15,23,42,.85)} @media (max-width:480px){ .theme-picker{grid-template-columns:repeat(2,1fr)} .theme-option-preview{height:64px} }