/* ============================================================ * CSS Cascade Layers Fázis 1+4 ÖSSZEVONT refaktor (2026-04-20). * * A korábbi v602-es Fázis 1 (csak modern.css @layer wrapper) * hibás volt, mert a dashboard.css unlayered maradt → a named * layer gyengébb lett a unlayered szabályoknál. * * Most mindkettő layer-be került: * @layer base — dashboard.css (alap UI) * @layer skin-modern — ez a fájl (Modern skin override) * @layer skin-override — egyedi per-tile override-ok (üres) * * A layer prioritás automatikusan base < skin-modern < skin-override, * emiatt az !important-ek jelentős része (603 → ~60) eltávolítható: * a layer priority már nagyobb prioritású mint a base !important. * ============================================================ */ @layer skin-modern { /* ============================================================ * Modern skin — CityDashboard * Spec: docs/citydashboard-skin-specification.md * * Két változat, `data-theme` attribútum az -en: * - data-theme="modern-dark" (ALAPÉRTELMEZETT) * - data-theme="modern-light" * * A klasszikus skin (`data-theme="classic"`) NEM kap override-ot — * a jelenlegi css/dashboard.css változatlanul érvényesül. * * B1 FÁZIS: infrastruktúra + alap színek + font override. * A részletes flat UI átalakítás (sidebar, header, csempe, splash, * login) a B2–B6 fázisokban kerül ide. * ============================================================ */ /* ══════════════════════════════════════════════════════════════ * 1. MODERN — DARK skin (alapértelmezett) * ══════════════════════════════════════════════════════════════ */ html[data-theme="modern-dark"] { /* Spec 2.2 — Dark paletta --color-text-muted a specben #666666, de sötét #111 háttéren csak 4.04:1 kontraszt (WCAG AA normál szövegre HATÁR). Sötétebbre emelve #7A7A7A — 5.07:1 kontraszt, WCAG AA-nak megfelel. A „finom meta/hint" szerepkört továbbra is betölti (a text-secondary #A1A1A1 még világosabb). */ --color-bg: #111111; --color-surface: #1A1A1A; --color-surface-alt: #222222; --color-border: #2A2A2A; --color-border-light: #242424; --color-text: #E5E5E5; --color-text-secondary: #A1A1A1; --color-text-muted: #7A7A7A; --color-primary: #3B82F6; --color-primary-hover: #2563EB; --color-primary-highlight: rgba(59, 130, 246, 0.12); --color-error: #EF4444; --color-warning: #F59E0B; --color-success: #10B981; --shadow-sm: 0 1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 2px 4px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.2); /* Modern skin logó fájl (splash, login, sidebar) */ --logo-url: url('../../img/logos/citydashboard-dark.png'); /* ── dashboard.css eredeti változóinak áthidalása ── * A dashboard.css rengeteg helyen `var(--bg-base)`, `var(--text-primary)` * stb. változókat használ. A B1 fázisban ezeket csak átirányítjuk * a Modern paletta értékeire — így már látható lesz a háttér- és * szöveg-színváltás váltáskor, glassmorphism megtartásával. * (A blur/prizma/inset-vonalak átírása a B2 fázis feladata.) */ --bg-base: var(--color-bg); --bg-darker: #0A0A0A; --bg-lighter: var(--color-surface); --bg-gradient: var(--color-bg); --text-primary: var(--color-text); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --accent-primary: var(--color-primary); --accent-primary-light: #60A5FA; --success: var(--color-success); --warning: var(--color-warning); --error: var(--color-error); } /* ══════════════════════════════════════════════════════════════ * 2. MODERN — LIGHT skin * ══════════════════════════════════════════════════════════════ */ html[data-theme="modern-light"] { /* Spec 2.1 — Light paletta --color-text-muted a specben #9CA3AF, de fehér háttéren 3.04:1 kontrasztot ad — nem felel meg WCAG 2.1 AA-nak (4.5:1). A kártya desc-k („Szavazások", „Karbantartás…", „Városi beruházások…", „Kísérleti…") emiatt túl halványak voltak. Sötétebbre cseréljük #6B7280-ra (= text-secondary szint, 4.87:1 kontraszt, AA-nak megfelel). A finomabb „meta/hint" szerepkört továbbra is betölti, csak olvashatóbb. */ --color-bg: #FFFFFF; --color-surface: #F9FAFB; --color-surface-alt: #F1F3F5; --color-border: #E5E7EB; --color-border-light: #F3F4F6; --color-text: #374151; --color-text-secondary: #6B7280; --color-text-muted: #6B7280; --color-primary: #2563EB; --color-primary-hover: #1D4ED8; --color-primary-highlight: #EFF6FF; --color-error: #DC2626; --color-warning: #D97706; --color-success: #059669; --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 2px 4px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.06); --logo-url: url('../../img/logos/citydashboard-light.png'); --bg-base: var(--color-bg); --bg-darker: var(--color-surface-alt); --bg-lighter: var(--color-surface); --bg-gradient: var(--color-bg); --text-primary: var(--color-text); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --accent-primary: var(--color-primary); --accent-primary-light: #60A5FA; --success: var(--color-success); --warning: var(--color-warning); --error: var(--color-error); } /* ══════════════════════════════════════════════════════════════ * 3. Közös Modern szabályok (mindkét Modern skinre) * ══════════════════════════════════════════════════════════════ */ html[data-theme="modern-dark"], html[data-theme="modern-light"] { /* Spec 1. — Outfit font, 15px alap */ --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; } html[data-theme="modern-dark"] body, html[data-theme="modern-light"] body { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; } /* ══════════════════════════════════════════════════════════════ * 4. Téma választó UI (közös — Klasszikus skinen is használható) * ══════════════════════════════════════════════════════════════ */ .theme-selector { display: flex; flex-direction: column; gap: 8px; } .theme-option { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-md, 10px); border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); cursor: pointer; transition: all 150ms ease; font-size: 13px; font-family: var(--font-family); text-align: left; width: 100%; } html[data-theme="modern-light"] .theme-option { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); } .theme-option:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); color: var(--text-primary); } html[data-theme="modern-light"] .theme-option:hover { background: var(--color-surface-alt); border-color: var(--color-primary); color: var(--color-text); } .theme-option.active { background: rgba(99, 102, 241, 0.15); border-color: var(--accent-primary, #3B82F6); color: var(--text-primary); } html[data-theme="modern-light"] .theme-option.active { background: var(--color-primary-highlight); border-color: var(--color-primary); color: var(--color-text); } /* Mini dashboard előnézet a téma opció mellett — vizuálisan közvetíti a skin karakterét (sidebar + tartalom-sáv), minden skin paletta szerinti valódi színeivel. Fekvő 44×28 képernyő-arány. */ .theme-option-swatch { width: 44px; height: 28px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; } /* ── Klasszikus swatch — sötét glassmorphism gradient ─────────── */ .theme-option-swatch.classic { background: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #1A1A2E 100%); border-color: rgba(96, 165, 250, 0.35); } .theme-option-swatch.classic::before { /* Sidebar csík — bal oldal, prizmás fényes */ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: linear-gradient(180deg, rgba(96, 165, 250, 0.18) 0%, rgba(139, 92, 246, 0.14) 100%); border-right: 1px solid rgba(255, 255, 255, 0.1); } .theme-option-swatch.classic::after { /* Tartalom csempe */ content: ''; position: absolute; left: 16px; top: 4px; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.05); border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.04); } /* ── Modern-sötét swatch — flat sötét paletta ─────────────────── */ .theme-option-swatch.modern-dark { background: #111111; border-color: #2A2A2A; } .theme-option-swatch.modern-dark::before { /* Sidebar csík */ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: #111111; border-right: 1px solid #2A2A2A; } .theme-option-swatch.modern-dark::after { /* Tartalom csempe + primary highlight pont */ content: ''; position: absolute; left: 16px; top: 4px; width: 20px; height: 20px; background: #1A1A1A; border: 1px solid #2A2A2A; border-radius: 2px; box-shadow: 4px 4px 0 -2px #3B82F6; /* kis primary pont belül */ } /* ── Modern-világos swatch — flat fehér paletta ───────────────── */ .theme-option-swatch.modern-light { background: #FFFFFF; border-color: #D1D5DB; /* kicsit sötétebb, hogy glassmorphism panelen is kivehető */ } .theme-option-swatch.modern-light::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: #FFFFFF; border-right: 1px solid #E5E7EB; } .theme-option-swatch.modern-light::after { content: ''; position: absolute; left: 16px; top: 4px; width: 20px; height: 20px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 2px; box-shadow: 4px 4px 0 -2px #2563EB; } .theme-option-text { display: flex; flex-direction: column; gap: 2px; flex: 1; } .theme-option-name { font-weight: 500; font-size: 13px; } .theme-option-desc { font-size: 11px; color: var(--text-muted); } /* ══════════════════════════════════════════════════════════════ * B2 FÁZIS — Modern skin flat UI (sidebar, header, alap layout) * Spec: docs/citydashboard-skin-specification.md 3.1–3.4 * * Minden Modern skin szabály a `html[data-theme^="modern"]` prefix * mögé kerül — így +1 specificitást ad a meglévő .sidebar/.header * szabályokhoz képest, garantálva a felülírást. * ══════════════════════════════════════════════════════════════ */ /* ── 5.1 Globális méretek (spec 3.1) ──────────────────────────── */ html[data-theme="modern-dark"], html[data-theme="modern-light"] { --sidebar-width: 240px; --header-height: 64px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 10px; /* Spec szerint mindenhol 10px a kártya-radius */ --radius-xl: 10px; } /* ── 5.2 Body/html alap ──────────────────────────────────────── */ /* A skinenkénti háttérszín — PWA safe-area-n áttűnő vékony csík megelőzésére (viewport-fit=cover mellett). Modern-sötét és Klasszikus esetén az alap #111111 a dashboard.css-ből megfelelő, Modern-világos esetén fehérre kell állítani. */ html[data-theme="modern-light"] { background-color: var(--color-bg); /* #FFFFFF */ } html[data-theme="modern-dark"] body, html[data-theme="modern-light"] body { background: var(--color-bg); color: var(--color-text); font-weight: 300; /* Spec: body weight 300 (light) */ font-size: 15px; /* Spec: alap font-size 15px */ line-height: 1.5; } /* App konténer — megszüntetjük a gradient háttereket */ html[data-theme^="modern"] .app { background: var(--color-bg); } /* ── 5.3 Glassmorphism kikapcsolás ────────────────────────────── */ html[data-theme^="modern"] .glass-tile-effect { backdrop-filter: none; -webkit-backdrop-filter: none; border-top-color: var(--color-border); border-left-color: var(--color-border); box-shadow: var(--shadow-sm); } /* ══════════════════════════════════════════════════════════════ * 6. SIDEBAR (spec 3.2) * ══════════════════════════════════════════════════════════════ */ html[data-theme^="modern"] .sidebar { width: 240px; background: var(--color-bg); /* Azonos a fő háttérrel! */ backdrop-filter: none; -webkit-backdrop-filter: none; border-right: none; /* Nincs végigfutó border */ overflow: visible; /* inset vonalhoz szükséges */ } /* Kikapcsoljuk a prizmás csíkokat és overlay-eket */ html[data-theme^="modern"] .sidebar::before, html[data-theme^="modern"] .sidebar::after { content: none; } /* Sidebar jobb oldali inset vonal — önálló pseudo-elem */ html[data-theme^="modern"] .sidebar { position: fixed; } html[data-theme^="modern"] .sidebar { /* A border-t inset vonallal helyettesítjük — background-image technika */ background-image: linear-gradient(var(--color-border), var(--color-border)); background-size: 1px calc(100% - 48px); background-position: right 24px; background-repeat: no-repeat; } /* ── 6.1 Sidebar header (spec 3.2) ────────────────────────────── */ html[data-theme^="modern"] .sidebar-header { height: 64px; padding: 0 20px; gap: 12px; background: transparent; border-bottom: none; position: relative; } html[data-theme^="modern"] .sidebar-header::after { content: ''; position: absolute; bottom: 0; left: 20px; right: 20px; height: 1px; background: var(--color-border); } html[data-theme^="modern"] .sidebar-header-icon { width: 36px; height: 36px; background: var(--color-primary); border-radius: 8px; color: #fff; box-shadow: none; } html[data-theme^="modern"] .sidebar-header-icon svg { width: 20px; height: 20px; color: #fff; } html[data-theme^="modern"] .sidebar-header-title { font-size: 16px; font-weight: 600; color: var(--color-text); letter-spacing: normal; } html[data-theme^="modern"] .sidebar-header-subtitle { font-size: 11px; color: var(--color-text-secondary); font-weight: 400; } /* ── 6.2 Sidebar navigáció (spec 3.2) ─────────────────────────── */ html[data-theme^="modern"] .sidebar-content { padding: 12px 12px; } html[data-theme^="modern"] .sidebar-section { margin-bottom: 0; } html[data-theme^="modern"] .sidebar-section-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 16px 12px 6px; color: var(--color-text-muted); font-weight: 500; } html[data-theme^="modern"] .sidebar-nav { gap: 2px; padding: 0; } html[data-theme^="modern"] .sidebar-nav-item { position: relative; padding: 8px 12px; gap: 10px; font-size: 13.5px; font-weight: 400; border-radius: var(--radius-sm); background: transparent; border: none; color: var(--color-text-secondary); transition: background 150ms ease, color 150ms ease; } html[data-theme^="modern"] .sidebar-nav-item svg, html[data-theme^="modern"] .sidebar-nav-item img { width: 18px; height: 18px; opacity: 0.5; transition: opacity 150ms ease; filter: none; } html[data-theme^="modern"] .sidebar-nav-item:hover { background: var(--color-surface-alt); color: var(--color-text); } html[data-theme="modern-dark"] .sidebar-nav-item:hover { background: #1F1F1F; /* Spec 2.2 dark hover */ } html[data-theme^="modern"] .sidebar-nav-item:hover svg, html[data-theme^="modern"] .sidebar-nav-item:hover img { opacity: 0.8; } html[data-theme^="modern"] .sidebar-nav-item.active { background: var(--color-primary-highlight); color: var(--color-primary); font-weight: 500; } html[data-theme^="modern"] .sidebar-nav-item.active svg, html[data-theme^="modern"] .sidebar-nav-item.active img { opacity: 1.0; color: var(--color-primary); } /* Aktív indikátor — bal oldali 3px × 20px primary csík */ html[data-theme^="modern"] .sidebar-nav-item.active::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--color-primary); border-radius: 0 3px 3px 0; } /* Badge — kis pill, primary/error háttér (spec 3.2) */ html[data-theme^="modern"] .sidebar-nav-badge, html[data-theme^="modern"] .sidebar-unread-badge, html[data-theme^="modern"] .sidebar-count-badge { padding: 1px 7px; border-radius: 99px; min-width: 18px; font-size: 10px; font-weight: 600; background: var(--color-error); color: #fff; border: none; line-height: 1.4; } /* ── 6.3 Sidebar footer + user (spec 3.2) ─────────────────────── */ html[data-theme^="modern"] .sidebar-footer { padding: 12px 16px; position: relative; border-top: none; background: transparent; } html[data-theme^="modern"] .sidebar-footer::before { content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: var(--color-border); } html[data-theme^="modern"] .sidebar-user { gap: 10px; padding: 8px; border-radius: var(--radius-sm); background: transparent; border: none; } html[data-theme^="modern"] .sidebar-user:hover { background: var(--color-surface-alt); } html[data-theme="modern-dark"] .sidebar-user:hover { background: #1F1F1F; } html[data-theme^="modern"] .sidebar-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } html[data-theme^="modern"] .sidebar-user-avatar svg { width: 16px; height: 16px; color: #fff; } html[data-theme^="modern"] .sidebar-user-name { font-size: 13px; font-weight: 500; color: var(--color-text); } html[data-theme^="modern"] .sidebar-user-role { font-size: 11px; color: var(--color-text-secondary); font-weight: 400; } /* Logó blokk a sidebar alján (opcionális branding) */ html[data-theme^="modern"] .sidebar-branding { padding: 16px 20px; position: relative; background: transparent; border-top: none; } html[data-theme^="modern"] .sidebar-branding::before { content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: var(--color-border); } html[data-theme^="modern"] .sidebar-branding img { width: 100%; padding: 0 8px; max-width: 180px; margin: 0 auto; display: block; } /* Presence indikátor (online users) */ html[data-theme^="modern"] .presence-indicator { font-size: 11px; color: var(--color-text-secondary); padding: 4px 12px; } html[data-theme^="modern"] .presence-dot { width: 6px; height: 6px; background: var(--color-success); border-radius: 50%; } /* ══════════════════════════════════════════════════════════════ * 7. HEADER (spec 3.3) * ══════════════════════════════════════════════════════════════ */ html[data-theme^="modern"] .main { margin-left: 240px; width: calc(100vw - 240px); max-width: calc(100vw - 240px); background: var(--color-bg); } html[data-theme^="modern"] .header { height: 64px; padding: 0 24px; background: var(--color-bg); /* Azonos a fő háttérrel */ backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; /* Nincs végigfutó border */ position: relative; } /* Alsó inset vonal (spec: left 24px, right 24px) */ html[data-theme^="modern"] .header::after { content: ''; position: absolute; bottom: 0; left: 24px; right: 24px; height: 1px; background: var(--color-border); } html[data-theme^="modern"] .header-left { gap: 12px; } html[data-theme^="modern"] .header-right { gap: 8px; } html[data-theme^="modern"] .header-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--color-text); } html[data-theme^="modern"] .header-subtitle { font-size: 12px; color: var(--color-text-secondary); font-weight: 400; } /* Header ikon gombok (36×36, flat) */ html[data-theme^="modern"] .header-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; padding: 0; transition: all 150ms ease; position: relative; } html[data-theme^="modern"] .header-btn svg { width: 18px; height: 18px; color: var(--color-text-secondary); } html[data-theme^="modern"] .header-btn:hover { background: var(--color-surface-alt); border-color: var(--color-primary); color: var(--color-text); } html[data-theme="modern-dark"] .header-btn:hover { background: #1F1F1F; } html[data-theme^="modern"] .header-btn:hover svg { color: var(--color-text); } /* Notification dot (spec 3.3) */ html[data-theme^="modern"] .header-btn .badge { width: 8px; height: 8px; padding: 0; min-width: 0; background: var(--color-error); border: 2px solid var(--color-bg); border-radius: 50%; position: absolute; box-shadow: 0 0 6px var(--color-error); /* v934: glow effect a Klasszikus mintáját követve */ top: 6px; right: 6px; color: transparent; font-size: 0; line-height: 0; } /* ══════════════════════════════════════════════════════════════ * 8. TARTALOM TERÜLET (spec 3.4) * ══════════════════════════════════════════════════════════════ */ html[data-theme^="modern"] .content { padding: 20px; background: var(--color-bg); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Scrollbar (spec 9) */ html[data-theme^="modern"] .content::-webkit-scrollbar { width: 6px; } html[data-theme^="modern"] .content::-webkit-scrollbar-track { background: transparent; } html[data-theme^="modern"] .content::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; } html[data-theme^="modern"] .content::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* ══════════════════════════════════════════════════════════════ * 9. SETTINGS PANEL — flat megjelenés a Modern skineken * ══════════════════════════════════════════════════════════════ */ html[data-theme^="modern"] .settings-panel { background: var(--color-bg); border-left: 1px solid var(--color-border); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow-md); } html[data-theme^="modern"] .settings-header { border-bottom: 1px solid var(--color-border); padding: 16px 20px; background: transparent; } html[data-theme^="modern"] .settings-section { border-bottom: 1px solid var(--color-border-light); padding: 16px 20px; } html[data-theme^="modern"] .settings-section-title { color: var(--color-text); font-weight: 500; font-size: 13px; } /* Téma választó opciók világos skinen */ html[data-theme="modern-light"] .theme-option { background: var(--color-surface); border-color: var(--color-border); } /* ══════════════════════════════════════════════════════════════ * B3 FÁZIS — Modern skin: csempék, ikonok, KPI, chart, térkép, * státusz dot-ok * Spec: docs/citydashboard-skin-specification.md 3.5–3.6, 4–9 * * Minden szabály a html[data-theme^="modern"] prefix mögött — * a Klasszikus skin (data-theme="classic") változatlan marad. * ══════════════════════════════════════════════════════════════ */ /* ── 10. Csempe container (spec 3.5) ──────────────────────────── */ /* Közös attribútum-szelektorral lefedjük az összes -tile osztályt */ html[data-theme^="modern"] .grid-stack-item-content[class*="-tile"], html[data-theme^="modern"] .weather-tile, html[data-theme^="modern"] .news-tile, html[data-theme^="modern"] .env-tile, html[data-theme^="modern"] .gov-tile, html[data-theme^="modern"] .battanet-tile, html[data-theme^="modern"] .transit-tile, html[data-theme^="modern"] .transport-links-tile, html[data-theme^="modern"] .traffic-flow-tile, html[data-theme^="modern"] .utinform-tile, html[data-theme^="modern"] .crosswalk-tile, html[data-theme^="modern"] .sxr-tile, html[data-theme^="modern"] .travel-time-tile, html[data-theme^="modern"] .mobility-map-tile, html[data-theme^="modern"] .page-map-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-top-color: var(--color-border); border-left-color: var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme^="modern"] .grid-stack-item-content[class*="-tile"]:hover { box-shadow: var(--shadow-md); transition: box-shadow 200ms ease; } /* Prizmás csíkok + overlay-ek kikapcsolása — minden tile ::before/::after */ html[data-theme^="modern"] .grid-stack-item-content[class*="-tile"]::before, html[data-theme^="modern"] .grid-stack-item-content[class*="-tile"]::after, html[data-theme^="modern"] .weather-tile::before, html[data-theme^="modern"] .weather-tile::after, html[data-theme^="modern"] .news-tile::before, html[data-theme^="modern"] .news-tile::after, html[data-theme^="modern"] .env-tile::before, html[data-theme^="modern"] .env-tile::after, html[data-theme^="modern"] .gov-tile::before, html[data-theme^="modern"] .gov-tile::after, html[data-theme^="modern"] .battanet-tile::before, html[data-theme^="modern"] .battanet-tile::after, html[data-theme^="modern"] .transit-tile::before, html[data-theme^="modern"] .transit-tile::after, html[data-theme^="modern"] .transport-links-tile::before, html[data-theme^="modern"] .transport-links-tile::after, html[data-theme^="modern"] .traffic-flow-tile::before, html[data-theme^="modern"] .traffic-flow-tile::after, html[data-theme^="modern"] .utinform-tile::before, html[data-theme^="modern"] .utinform-tile::after, html[data-theme^="modern"] .crosswalk-tile::before, html[data-theme^="modern"] .crosswalk-tile::after, html[data-theme^="modern"] .sxr-tile::before, html[data-theme^="modern"] .sxr-tile::after, html[data-theme^="modern"] .travel-time-tile::before, html[data-theme^="modern"] .travel-time-tile::after, html[data-theme^="modern"] .mobility-map-tile::before, html[data-theme^="modern"] .mobility-map-tile::after, html[data-theme^="modern"] .page-map-tile::before, html[data-theme^="modern"] .page-map-tile::after { content: none; background: none; display: none; } /* ── 11. Csempe header (spec 3.5) ─────────────────────────────── */ html[data-theme^="modern"] .tile-header, html[data-theme^="modern"] .weather-tile-header, html[data-theme^="modern"] .news-tile-header, html[data-theme^="modern"] .transit-tile-header, html[data-theme^="modern"] .env-tile .tile-header { padding: 14px 16px 12px; border-bottom: none; background: transparent; height: auto; min-height: auto; position: relative; } /* Csempe header inset alsó vonal — UNIVERZÁLIS szabály (spec 3.6). A .gs-drag-handle a GridStack húzófogantyú, ami MINDEN csempén a fejléc; a mini-widgetek (.mini-widget) kizárva. Így minden csempe-fejléc — a konkrét osztálynévtől függetlenül — egységes behúzott (left/right 16px) alsó vonalat kap, nem kell osztályonként felsorolni. */ html[data-theme^="modern"] .gs-drag-handle:not(.mini-widget) { border-bottom: none; position: relative; } html[data-theme^="modern"] .gs-drag-handle:not(.mini-widget)::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 1px; background: var(--color-border-light); pointer-events: none; } /* Csempe cím tipográfia (spec 1) */ html[data-theme^="modern"] .tile-header .tile-title, html[data-theme^="modern"] .weather-title, html[data-theme^="modern"] .env-tile .tile-header .tile-title { font-size: 13.5px; font-weight: 500; color: var(--color-text); gap: 10px; } /* ── 12. Csempe ikon (spec 3.5 + 4) ───────────────────────────── */ /* Alapméret 32×32, border-radius 8px */ html[data-theme^="modern"] .tile-title-icon { width: 32px; height: 32px; border-radius: 8px; } html[data-theme^="modern"] .tile-title-icon svg { width: 16px; height: 16px; } /* Alapértelmezett (color osztály nélkül): flat primary-highlight háttér */ html[data-theme^="modern"] .tile-title-icon:not(.yellow):not(.orange):not(.blue):not(.purple):not(.cyan):not(.sky):not(.forest):not(.violet):not(.lime):not(.pink):not(.red) { background: var(--color-primary-highlight); } html[data-theme^="modern"] .tile-title-icon:not(.yellow):not(.orange):not(.blue):not(.purple):not(.cyan):not(.sky):not(.forest):not(.violet):not(.lime):not(.pink):not(.red) svg { stroke: var(--color-primary); color: var(--color-primary); } /* Gradient osztályok változatlan — a spec 4 szerint pontosan: yellow #fbbf24→#f59e0b, orange #f97316→#ea580c, blue #3b82f6→#7c3aed, purple #8b5cf6→#7c3aed, cyan #22d3ee→#06b6d4, sky #38bdf8→#0ea5e9, forest #22c55e→#16a34a, violet #7c3aed→#6d28d9, lime #a3e635→#84cc16, pink #ec4899→#db2777, red #ef4444→#dc2626 */ html[data-theme^="modern"] .tile-title-icon.forest { background: linear-gradient(135deg, #22c55e, #16a34a); } html[data-theme^="modern"] .tile-title-icon.violet { background: linear-gradient(135deg, #7c3aed, #6d28d9); } html[data-theme^="modern"] .tile-title-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); } html[data-theme^="modern"] .tile-title-icon.pink { background: linear-gradient(135deg, #ec4899, #db2777); } html[data-theme^="modern"] .tile-title-icon.red { background: linear-gradient(135deg, #ef4444, #dc2626); } html[data-theme^="modern"] .tile-title-icon.yellow { background: linear-gradient(135deg, #fbbf24, #f59e0b); } html[data-theme^="modern"] .tile-title-icon.blue { background: linear-gradient(135deg, #3b82f6, #7c3aed); } /* Gradient ikonok SVG-je fehér */ html[data-theme^="modern"] .tile-title-icon.yellow svg, html[data-theme^="modern"] .tile-title-icon.orange svg, html[data-theme^="modern"] .tile-title-icon.blue svg, html[data-theme^="modern"] .tile-title-icon.purple svg, html[data-theme^="modern"] .tile-title-icon.cyan svg, html[data-theme^="modern"] .tile-title-icon.sky svg, html[data-theme^="modern"] .tile-title-icon.forest svg, html[data-theme^="modern"] .tile-title-icon.violet svg, html[data-theme^="modern"] .tile-title-icon.lime svg, html[data-theme^="modern"] .tile-title-icon.pink svg, html[data-theme^="modern"] .tile-title-icon.red svg { stroke: #fff; color: #fff; } /* ── 13. Action gombok csempén (spec 3.5 — 28×28, 6px radius) ── */ html[data-theme^="modern"] .tile-header-actions button, html[data-theme^="modern"] .tile-pin-btn, html[data-theme^="modern"] .tile-resize-btn, html[data-theme^="modern"] .tile-fullscreen-btn, html[data-theme^="modern"] .footer-icon-btn { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: none; color: var(--color-text-muted); transition: all 150ms ease; } html[data-theme^="modern"] .tile-header-actions button:hover, html[data-theme^="modern"] .tile-pin-btn:hover, html[data-theme^="modern"] .tile-resize-btn:hover, html[data-theme^="modern"] .tile-fullscreen-btn:hover, html[data-theme^="modern"] .footer-icon-btn:hover { background: var(--color-surface-alt); color: var(--color-text); } html[data-theme="modern-dark"] .tile-header-actions button:hover, html[data-theme="modern-dark"] .tile-pin-btn:hover, html[data-theme="modern-dark"] .tile-resize-btn:hover, html[data-theme="modern-dark"] .tile-fullscreen-btn:hover, html[data-theme="modern-dark"] .footer-icon-btn:hover { background: #1F1F1F; } html[data-theme^="modern"] .tile-header-actions button svg, html[data-theme^="modern"] .tile-pin-btn svg, html[data-theme^="modern"] .tile-resize-btn svg, html[data-theme^="modern"] .tile-fullscreen-btn svg, html[data-theme^="modern"] .footer-icon-btn svg { width: 15px; height: 15px; } /* ── 14. Csempe body (spec 3.5) ───────────────────────────────── */ html[data-theme^="modern"] .tile-body, html[data-theme^="modern"] .tile-body-wrapper { padding: 16px; background: transparent; } /* ── 15. Csempe footer (spec 3.5) ─────────────────────────────── */ html[data-theme^="modern"] .tile-footer, html[data-theme^="modern"] .weather-tile-footer, html[data-theme^="modern"] .transit-tile-footer, html[data-theme^="modern"] .crosswalk-tile-footer { padding: 8px 16px; background: transparent; border-top: none; background-image: linear-gradient(var(--color-border-light), var(--color-border-light)); background-size: calc(100% - 32px) 1px; background-position: center top; background-repeat: no-repeat; font-size: 11px; color: var(--color-text-muted); min-height: auto; } html[data-theme^="modern"] .tile-footer .tile-data-source, html[data-theme^="modern"] .tile-footer .timestamp, html[data-theme^="modern"] .weather-tile-footer, html[data-theme^="modern"] .transit-tile-footer, html[data-theme^="modern"] .crosswalk-tile-footer { color: var(--color-text-muted); font-size: 11px; } /* ── 16. KPI kártyák (spec 5) ─────────────────────────────────── */ html[data-theme^="modern"] .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } html[data-theme^="modern"] .kpi-card { padding: 14px; background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme^="modern"] .kpi-card::before, html[data-theme^="modern"] .kpi-card::after { content: none; display: none; } html[data-theme^="modern"] .kpi-card:hover { background: var(--color-surface); border-color: var(--color-border); transform: none; } html[data-theme^="modern"] .kpi-label { font-size: 11px; font-weight: 500; color: var(--color-text-secondary); text-transform: none; letter-spacing: normal; } html[data-theme^="modern"] .kpi-value { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); } html[data-theme^="modern"] .kpi-sublabel, html[data-theme^="modern"] .kpi-trend { font-size: 11px; } /* KPI trend — pozitív / negatív / semleges (spec 5) */ html[data-theme^="modern"] .kpi-trend.up { background: transparent; color: var(--color-success); } html[data-theme^="modern"] .kpi-trend.down { background: transparent; color: var(--color-error); } html[data-theme^="modern"] .kpi-trend.stable { background: transparent; color: var(--color-text-muted); } /* KPI ikon háttér a Modern paletta színeivel */ html[data-theme^="modern"] .kpi-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--color-primary-highlight); } html[data-theme^="modern"] .kpi-icon svg { color: var(--color-primary); } /* ── 17. Chart placeholder (spec 6) ───────────────────────────── */ /* MEGJEGYZÉS: a valódi Chart.js diagramok színei NEM változnak a skin váltáskor — csak a körülölelő placeholder / container. */ html[data-theme^="modern"] .chart-area, html[data-theme^="modern"] .chart-container { background: linear-gradient(180deg, var(--color-primary-highlight) 0%, var(--color-surface) 60%); border-radius: var(--radius-sm); } /* ── 18. Térkép placeholder (spec 7) ──────────────────────────── */ html[data-theme^="modern"] .map-placeholder { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } /* ── 19. Státusz indikátorok (spec 8) ─────────────────────────── */ html[data-theme^="modern"] .status-dot.green, html[data-theme^="modern"] .source-dot { background: var(--color-success); } html[data-theme^="modern"] .status-dot.yellow { background: var(--color-warning); } html[data-theme^="modern"] .status-dot.red { background: var(--color-error); } /* Forrás dot (élő adat) — zöld pulzálás */ html[data-theme^="modern"] .source-dot { animation: modernPulseDot 2s ease-in-out infinite; } @keyframes modernPulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ── 20. GridStack scrollbar felülírás Modern skinben (spec 9) ── */ html[data-theme^="modern"] .grid-stack-item-content ::-webkit-scrollbar { width: 6px; } html[data-theme^="modern"] .grid-stack-item-content ::-webkit-scrollbar-track { background: transparent; } html[data-theme^="modern"] .grid-stack-item-content ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; } html[data-theme^="modern"] .grid-stack-item-content ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* ── 21. Mini-widget finomítás — flat, kisebb shadow ──────────── */ html[data-theme^="modern"] .mini-widget { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme^="modern"] .mini-widget::before, html[data-theme^="modern"] .mini-widget::after { content: none; display: none; } html[data-theme^="modern"] .mini-widget:hover { box-shadow: var(--shadow-md); } /* Mini-widget háttérszínek — a flat alap-háttér (.mini-widget) felülírása. * A @layer skin-modern erősebb a @layer base-nél, ezért a base mw-color * szabályok Modern skinben hatástalanok — itt meg kell ismételni őket. */ html[data-theme^="modern"] .mini-widget.mw-color-dark { background: rgba(15,23,42,0.7); border-color: rgba(255,255,255,0.12); } html[data-theme^="modern"] .mini-widget.mw-color-orange { background: rgba(249,115,22,0.55); border-color: rgba(249,115,22,0.7); } html[data-theme^="modern"] .mini-widget.mw-color-red { background: rgba(239,68,68,0.55); border-color: rgba(239,68,68,0.7); } html[data-theme^="modern"] .mini-widget.mw-color-pink { background: rgba(236,72,153,0.55); border-color: rgba(236,72,153,0.7); } html[data-theme^="modern"] .mini-widget.mw-color-sky { background: rgba(56,189,248,0.55); border-color: rgba(56,189,248,0.7); } html[data-theme^="modern"] .mini-widget.mw-color-forest { background: rgba(22,163,74,0.55); border-color: rgba(22,163,74,0.7); } html[data-theme^="modern"] .mini-widget.mw-color-lime { background: rgba(132,204,22,0.55); border-color: rgba(132,204,22,0.7); } html[data-theme^="modern"] .mini-widget.mw-color-violet { background: rgba(139,92,246,0.55); border-color: rgba(139,92,246,0.7); } html[data-theme^="modern"] .mini-widget.mw-color-yellow { background: rgba(250,204,21,0.55); border-color: rgba(250,204,21,0.7); } html[data-theme^="modern"] .mini-widget.mw-color-white { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.4); } /* Mini-widget szövegszín Modern skinben — felhasználói kérés: tiszta * FEKETE (világos skin) / FEHÉR (sötét skin), hogy a flat ÉS a színezett * (mw-color-*) háttéren is jól olvasható legyen. A base .mw-label/.mw-sub * --text-muted halvány szürkét adott, a korábbi --color-text is gyenge * volt a piros/színes háttéren. A body-ban inline color-ral jelölt * szemantikus span-ok (AQI-kategória, státusz, trend-nyíl) változatlanok: * az inline stílus erősebb a stylesheet-szabálynál. * Kivétel: a sötét hátterű mw-color-dark widget szövege világos skinben * is fehér (a háttér ott is sötét). */ html[data-theme="modern-light"] .mini-widget :is(.mw-label, .mw-primary, .mw-secondary, .mw-sub, .mw-time-big, .mw-time-unit, .mw-pollen-type, .mw-pollen-val, .mw-source) { color: #000000; } html[data-theme="modern-dark"] .mini-widget :is(.mw-label, .mw-primary, .mw-secondary, .mw-sub, .mw-time-big, .mw-time-unit, .mw-pollen-type, .mw-pollen-val, .mw-source), html[data-theme="modern-light"] .mini-widget.mw-color-dark :is(.mw-label, .mw-primary, .mw-secondary, .mw-sub, .mw-time-big, .mw-time-unit, .mw-pollen-type, .mw-pollen-val, .mw-source) { color: #FFFFFF; } html[data-theme^="modern"] .mini-widget .mw-label { opacity: 1; } /* ══════════════════════════════════════════════════════════════ * B4 FÁZIS — Splash Screen Modern skinben * Spec: docs/citydashboard-skin-specification.md 10 * * A Klasszikus skinben marad a jelenlegi hullám-animáció. Modern * skinben a hullámokat elrejtjük, helyettük halványan pulzáló * dashboard sziluett jelenik meg, középen a logóval. * ══════════════════════════════════════════════════════════════ */ /* A sziluett alapértelmezetten rejtett — csak Modern skinben látszik */ .splash-silhouette { display: none; } /* ── 22. Splash container Modern skinben (spec 10.2) ──────────── */ html[data-theme^="modern"] #splashScreen { background: var(--color-bg); } html[data-theme^="modern"] #splashScreen::before { background: none; } /* ── 23. Klasszikus hullámok kikapcsolása Modern skinben ──────── */ html[data-theme^="modern"] .splash-waves { display: none; } /* ── 24. Dashboard sziluett SVG (spec 10.3) ───────────────────── */ html[data-theme^="modern"] .splash-silhouette { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* Sziluett csempe fill szín (spec 10.2): - Dark skin: #2A2A2A - Light skin: #E5E7EB */ html[data-theme="modern-dark"] .splash-silhouette .sil-tile { fill: #2A2A2A; } html[data-theme="modern-light"] .splash-silhouette .sil-tile { fill: #E5E7EB; } /* ── 25. Pulzáló animáció (spec 10.4) ─────────────────────────── */ html[data-theme^="modern"] .splash-silhouette .sil-tile { animation: modernTilePulse 3s ease-in-out infinite; transform-origin: center; will-change: opacity; } @keyframes modernTilePulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.28; } } /* Eltolt időzítés — spec 10.4 táblázat */ html[data-theme^="modern"] .splash-silhouette .sil-tile-1 { animation-delay: 0s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-2 { animation-delay: 0.3s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-3 { animation-delay: 0.6s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-4 { animation-delay: 0.9s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-5 { animation-delay: 1.2s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-6 { animation-delay: 1.5s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-7 { animation-delay: 0.45s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-8 { animation-delay: 0.75s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-9 { animation-delay: 1.05s; } html[data-theme^="modern"] .splash-silhouette .sil-tile-10 { animation-delay: 1.35s; } /* ── 26. Splash logó Modern skinben (spec 10.5) ──────────────── */ html[data-theme^="modern"] .splash-logo { max-width: 280px; width: 50vw; animation: modernSplashFadeIn 0.5s ease-out forwards; opacity: 0; transform: scale(0.95); } @keyframes modernSplashFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* ── 27. Splash felcsúszás (spec 10.6) ────────────────────────── */ html[data-theme^="modern"] #splashScreen { transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1); } html[data-theme^="modern"] #splashScreen.splash-exit { transform: translateY(-100vh); opacity: 0; } /* ══════════════════════════════════════════════════════════════ * B5 FÁZIS — Login oldal Modern skinben * Spec: docs/citydashboard-skin-specification.md 11 * * A Klasszikus skinben marad a jelenlegi glassmorphism auth kártya. * Modern skinben tiszta, flat 400px-es kártya. * ══════════════════════════════════════════════════════════════ */ /* ── 28. Auth backdrop (spec 11 — solid bg, nem gradient) ─────── */ html[data-theme^="modern"] .auth-backdrop { background: var(--color-bg); opacity: 1; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ── 29. Auth kártya (spec 11.2) ─────────────────────────────── */ html[data-theme^="modern"] .auth-card { max-width: 400px; background: var(--color-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 32px 40px 40px; box-shadow: var(--shadow-md); } html[data-theme^="modern"] .auth-card::-webkit-scrollbar { width: 6px; } html[data-theme^="modern"] .auth-card::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; } /* ── 30. Auth header + logó (spec 11.3) ───────────────────────── */ html[data-theme^="modern"] .auth-header { text-align: center; margin-bottom: 24px; } html[data-theme^="modern"] .auth-header-logo { max-width: 200px; width: 100%; height: auto; display: block; margin: 0 auto 24px; } html[data-theme^="modern"] .auth-title { font-size: 22px; font-weight: 600; color: var(--color-text); letter-spacing: -0.01em; } html[data-theme^="modern"] .auth-subtitle { font-size: 13px; color: var(--color-text-secondary); font-weight: 400; margin-top: 4px; } /* ── 31. Tab váltó (spec 11.4) ────────────────────────────────── */ html[data-theme^="modern"] .auth-tabs { display: flex; gap: 0; margin: 24px 0; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; padding: 0; } html[data-theme^="modern"] .auth-tab { flex: 1; padding: 9px; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); background: transparent; border: none; border-radius: 0; cursor: pointer; transition: all 150ms ease; } html[data-theme^="modern"] .auth-tab:hover:not(.active) { background: var(--color-surface-alt); color: var(--color-text); } html[data-theme="modern-dark"] .auth-tab:hover:not(.active) { background: #1F1F1F; } html[data-theme^="modern"] .auth-tab.active { background: var(--color-primary); color: #fff; font-weight: 600; } /* ── 32. Form mezők (spec 11.5) ───────────────────────────────── */ html[data-theme^="modern"] .auth-field { margin-bottom: 16px; } html[data-theme^="modern"] .auth-field label { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 6px; } html[data-theme^="modern"] .auth-field input[type="email"], html[data-theme^="modern"] .auth-field input[type="password"], html[data-theme^="modern"] .auth-field input[type="text"] { padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-size: 14px; font-family: var(--font-family); font-weight: 400; transition: border-color 150ms ease, box-shadow 150ms ease; } html[data-theme^="modern"] .auth-field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .auth-field input::placeholder { color: var(--color-text-muted); } /* Jelszó szem-toggle gomb */ html[data-theme^="modern"] .auth-pw-toggle { color: var(--color-text-muted); } html[data-theme^="modern"] .auth-pw-toggle:hover { color: var(--color-text); } /* ── 33. Login submit gomb (spec 11.6) ────────────────────────── */ html[data-theme^="modern"] .auth-submit-btn { width: 100%; padding: 11px; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; font-family: var(--font-family); transition: background 150ms ease; cursor: pointer; } html[data-theme^="modern"] .auth-submit-btn:hover { background: var(--color-primary-hover); opacity: 1; } html[data-theme^="modern"] .auth-submit-btn:active { transform: scale(0.98); } /* ── 34. Auth egyéb elemek (options, switch, footer, lang) ───── */ html[data-theme^="modern"] .auth-options { font-size: 13px; color: var(--color-text-secondary); margin: 8px 0 16px; } html[data-theme^="modern"] .auth-options a { color: var(--color-primary); text-decoration: none; } html[data-theme^="modern"] .auth-options a:hover { text-decoration: underline; } html[data-theme^="modern"] .auth-switch { font-size: 13px; color: var(--color-text-secondary); margin-top: 16px; text-align: center; } html[data-theme^="modern"] .auth-switch a, html[data-theme^="modern"] .auth-switch button { color: var(--color-primary); font-weight: 500; background: none; border: none; cursor: pointer; font-family: var(--font-family); font-size: 13px; } /* Nyelvválasztó dropdown az auth oldalon — saját sorban, a logó felett jobbra igazítva (hogy ne lógjon rá a logóra, mint az absolute pozí- ciónál a Klasszikus skinben). */ html[data-theme^="modern"] .auth-lang-wrapper { position: static; top: auto; right: auto; text-align: right; margin-bottom: 16px; } html[data-theme^="modern"] .auth-lang-select { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 12px; font-family: var(--font-family); } html[data-theme^="modern"] .auth-lang-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* Régi .auth-logo (56×56-os lakat ikon) — Modern skinben elrejtés, csak a fájl-alapú logót mutatjuk */ html[data-theme^="modern"] .auth-card .auth-header .auth-logo { display: none; } /* ══════════════════════════════════════════════════════════════ * B6 FÁZIS — Modern skin: tipográfia + panelek + modálok + apró * Spec: docs/citydashboard-skin-specification.md 1 + 2 + 8 * * Eddig nem kezelt felületek egységesítése — minden Modern skin * alatt marad, Klasszikus változatlan. * ══════════════════════════════════════════════════════════════ */ /* ── 35. Tipográfia finomhangolás (spec 1 részletek) ──────────── */ /* Csempe forrás és timestamp: 10px (spec 1) */ html[data-theme^="modern"] .tile-footer .timestamp, html[data-theme^="modern"] .tile-data-source, html[data-theme^="modern"] .source-label { font-size: 10px; color: var(--color-text-muted); font-weight: 400; } /* Időjárás típusú csempék értékek — a Közlekedésmeteorológia csempe egy kompakt egysoros layout (ikon + temp + leírás + részletek + …), ezért a spec 1. szekció 40px-es nagy hőmérséklet-stílusa itt NEM alkalmazható — kilógna a csempe függőleges keretéből. A Klasszikus .weather-temp 16px / 700 weight a sorba fér; Modern skinben is megtartjuk az eredeti méretet. A 40px spec egy jövőbeli dedikált nagy időjárás widget-hez tartható fenn. */ html[data-theme^="modern"] .weather-description, html[data-theme^="modern"] .weather-desc { font-size: 13px; color: var(--color-text-secondary); font-weight: 400; } html[data-theme^="modern"] .weather-detail-label, html[data-theme^="modern"] .weather-details .detail-label { font-size: 11px; color: var(--color-text-muted); font-weight: 500; } html[data-theme^="modern"] .weather-detail-value, html[data-theme^="modern"] .weather-details .detail-value { font-size: 14px; color: var(--color-text); font-weight: 500; } /* Info list (label/érték) — sok csempén használt minta */ html[data-theme^="modern"] .info-item-label, html[data-theme^="modern"] .info-list-label { font-size: 13px; color: var(--color-text-secondary); font-weight: 400; } html[data-theme^="modern"] .info-item-value, html[data-theme^="modern"] .info-list-value { font-size: 13px; color: var(--color-text); font-weight: 500; } /* Hírek (news-item) — hír cím / meta / kivonat (spec 1) */ html[data-theme^="modern"] .news-item-title, html[data-theme^="modern"] .news-tile-body .news-item-title { font-size: 13.5px; line-height: 1.4; color: var(--color-text); font-weight: 500; } html[data-theme^="modern"] .news-item-date, html[data-theme^="modern"] .news-item-meta { font-size: 11px; color: var(--color-text-muted); font-weight: 400; } html[data-theme^="modern"] .news-item-excerpt, html[data-theme^="modern"] .news-tile-body .news-item-excerpt { font-size: 12.5px; line-height: 1.45; color: var(--color-text-secondary); font-weight: 400; } /* ── 36. Értesítési panel (notif-panel) ──────────────────────── */ html[data-theme^="modern"] .notif-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); backdrop-filter: none; } html[data-theme^="modern"] .notif-panel-header { padding: 14px 16px; border-bottom: 1px solid var(--color-border-light); font-size: 13.5px; font-weight: 500; color: var(--color-text); } html[data-theme^="modern"] .notif-panel-body { background: transparent; } html[data-theme^="modern"] .notif-panel-clear { font-size: 11px; color: var(--color-text-muted); background: transparent; border: none; padding: 4px 8px; border-radius: var(--radius-sm); transition: color 150ms ease, background 150ms ease; } html[data-theme^="modern"] .notif-panel-clear:hover { color: var(--color-text); background: var(--color-surface-alt); } /* Notif forrás csoport */ html[data-theme^="modern"] .notif-source-group-title { padding: 10px 16px; font-size: 12px; color: var(--color-text-secondary); font-weight: 500; border-bottom: 1px solid var(--color-border-light); } html[data-theme^="modern"] .notif-source-group-title:hover { background: var(--color-surface-alt); } html[data-theme="modern-dark"] .notif-source-group-title:hover { background: #1F1F1F; } /* Notif elem (egyedi értesítés) */ html[data-theme^="modern"] .notif-item { padding: 12px 16px; border-bottom: 1px solid var(--color-border-light); background: transparent; } html[data-theme^="modern"] .notif-item:hover { background: var(--color-surface-alt); } html[data-theme="modern-dark"] .notif-item:hover { background: #1F1F1F; } html[data-theme^="modern"] .notif-item-title { font-size: 13px; font-weight: 500; color: var(--color-text); } html[data-theme^="modern"] .notif-item-desc, html[data-theme^="modern"] .notif-item-time { font-size: 11px; color: var(--color-text-muted); } /* ── 37. Assistant chat panel ────────────────────────────────── */ html[data-theme^="modern"] .assistant-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); backdrop-filter: none; } html[data-theme^="modern"] .assistant-panel-header { padding: 12px 16px; border-bottom: 1px solid var(--color-border-light); background: transparent; } html[data-theme^="modern"] .assistant-panel-avatar { background: var(--color-primary-highlight); } html[data-theme^="modern"] .assistant-panel-avatar svg { color: var(--color-primary); } html[data-theme^="modern"] .assistant-panel-name { color: var(--color-text); font-size: 14px; font-weight: 600; } html[data-theme^="modern"] .assistant-panel-btn { color: var(--color-text-muted); border-radius: var(--radius-sm); width: 28px; height: 28px; } html[data-theme^="modern"] .assistant-panel-btn:hover { color: var(--color-text); background: var(--color-surface-alt); } html[data-theme="modern-dark"] .assistant-panel-btn:hover { background: #1F1F1F; } html[data-theme^="modern"] .assistant-messages { background: transparent; } html[data-theme^="modern"] .assistant-message { background: var(--color-surface-alt); border-radius: var(--radius-md); padding: 10px 14px; color: var(--color-text); font-size: 13px; } html[data-theme^="modern"] .assistant-input-area { border-top: 1px solid var(--color-border-light); padding: 12px; background: transparent; } html[data-theme^="modern"] .assistant-input { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); font-size: 13px; padding: 8px 12px; font-family: var(--font-family); } html[data-theme^="modern"] .assistant-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .assistant-send-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--color-primary); color: #fff; border: none; } html[data-theme^="modern"] .assistant-send-btn:hover { background: var(--color-primary-hover); } /* Asszisztens header gomb (nagy ikon a főfejlécben) */ html[data-theme^="modern"] .assistant-header-btn { background: transparent; border-radius: var(--radius-sm); } html[data-theme^="modern"] .assistant-header-btn:hover { background: var(--color-surface-alt); } html[data-theme="modern-dark"] .assistant-header-btn:hover { background: #1F1F1F; } html[data-theme^="modern"] .assistant-header-avatar { background: var(--color-primary-highlight); width: 36px; height: 36px; } html[data-theme^="modern"] .assistant-header-avatar svg { color: var(--color-primary); width: 18px; height: 18px; } html[data-theme^="modern"] .assistant-header-name { color: var(--color-text); font-size: 13px; font-weight: 600; line-height: 1.15; } html[data-theme^="modern"] .assistant-header-label { color: var(--color-text-muted); font-size: 11px; font-weight: 400; line-height: 1.15; } /* Ha van egyedi név, az "AsszIsztens" aláírás kisebb és még halványabb */ html[data-theme^="modern"] .assistant-header-text.has-name .assistant-header-label { font-size: 10px; } /* Settings panel szöveges input — Modern skinhez igazítva */ html[data-theme^="modern"] .settings-text-input { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); color: var(--color-text); } html[data-theme^="modern"] .settings-text-input::placeholder { color: var(--color-text-muted); } html[data-theme^="modern"] .settings-text-input:focus { border-color: var(--color-primary); background: var(--color-surface); } html[data-theme^="modern"] .settings-text-input-title { color: var(--color-text-secondary); } /* ── 38. Ticker (hírfolyam) finomítás ─────────────────────────── */ html[data-theme^="modern"] .news-ticker { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); box-shadow: none; backdrop-filter: none; } html[data-theme^="modern"] .news-ticker::before, html[data-theme^="modern"] .news-ticker::after { content: none; display: none; } html[data-theme^="modern"] .news-ticker-label { color: var(--color-text); font-size: 12px; font-weight: 500; } html[data-theme^="modern"] .news-ticker-label.blue { color: var(--color-primary); } html[data-theme^="modern"] .news-ticker-label.green { color: var(--color-success); } html[data-theme^="modern"] .news-ticker-label.orange { color: var(--color-warning); } html[data-theme^="modern"] .news-ticker-label.purple { color: #8b5cf6; } html[data-theme^="modern"] .news-item { background: transparent; border: none; color: var(--color-text); font-size: 12.5px; } html[data-theme^="modern"] .news-item:hover { color: var(--color-primary); background: transparent; } /* ── 39. Dropdown szelektorok (crosswalk, SXR, stb.) ──────────── */ html[data-theme^="modern"] .dropdown-selector { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); backdrop-filter: none; } html[data-theme^="modern"] .dropdown-selector-item { padding: 8px 12px; font-size: 13px; color: var(--color-text); border-bottom: 1px solid var(--color-border-light); background: transparent; } html[data-theme^="modern"] .dropdown-selector-item:last-child { border-bottom: none; } html[data-theme^="modern"] .dropdown-selector-item:hover, html[data-theme^="modern"] .dropdown-selector-item.active { background: var(--color-primary-highlight); color: var(--color-primary); } /* ── 40. Mini-widget beállítás popup (mw-popup-global) ────────── */ html[data-theme^="modern"] .mw-popup-global { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); backdrop-filter: none; } html[data-theme^="modern"] .mw-popup-option { padding: 8px 12px; font-size: 12px; color: var(--color-text); background: transparent; border-bottom: 1px solid var(--color-border-light); } html[data-theme^="modern"] .mw-popup-option:last-child { border-bottom: none; } html[data-theme^="modern"] .mw-popup-option:hover, html[data-theme^="modern"] .mw-popup-option.active { background: var(--color-primary-highlight); color: var(--color-primary); } html[data-theme^="modern"] .mw-popup-global::-webkit-scrollbar { width: 6px; } html[data-theme^="modern"] .mw-popup-global::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; } /* ── 41. Tile-resize popup ────────────────────────────────────── */ html[data-theme^="modern"] .tile-resize-popup, html[data-theme^="modern"] [class*="resize-popup"] { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); backdrop-filter: none; } html[data-theme^="modern"] .resize-option, html[data-theme^="modern"] .tile-resize-option { padding: 8px 12px; font-size: 12px; color: var(--color-text); background: transparent; border-radius: var(--radius-sm); cursor: pointer; } html[data-theme^="modern"] .resize-option:hover, html[data-theme^="modern"] .tile-resize-option:hover { background: var(--color-surface-alt); } html[data-theme="modern-dark"] .resize-option:hover, html[data-theme="modern-dark"] .tile-resize-option:hover { background: #1F1F1F; } /* ── 42. News-admin modál (admin tartalom szerkesztő) ─────────── */ html[data-theme^="modern"] .news-admin-modal { background: rgba(0, 0, 0, 0.6); } html[data-theme="modern-light"] .news-admin-modal { background: rgba(0, 0, 0, 0.4); } html[data-theme^="modern"] .news-admin-content { /* v725: !important nélkül is nyer (alap szabály !important-je eltávolítva) */ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } /* v725: Garantált ID-szelektoros override az admin Tartalomszerkesztő modalokra (specificity: 0,1,1,1 — felülírja minden alap szabályt). Több modalra is alkalmazva, hogy ne csak az events-editor-modal javuljon. */ html[data-theme="modern-light"] #admin-events-editor-modal > .news-admin-content, html[data-theme="modern-light"] #admin-dev-editor-modal > .news-admin-content, html[data-theme="modern-light"] #admin-lab-editor-modal > .news-admin-content, html[data-theme="modern-light"] #admin-ct-editor-modal > .news-admin-content { background: #FFFFFF !important; border: 1px solid var(--color-border) !important; color: var(--color-text); } html[data-theme="modern-dark"] #admin-events-editor-modal > .news-admin-content, html[data-theme="modern-dark"] #admin-dev-editor-modal > .news-admin-content, html[data-theme="modern-dark"] #admin-lab-editor-modal > .news-admin-content, html[data-theme="modern-dark"] #admin-ct-editor-modal > .news-admin-content { background: #1A1A1A !important; border: 1px solid var(--color-border) !important; color: var(--color-text); } /* v726: Garantált form input/select override a Modern admin modalokra (specificity: 0,1,1,1 + !important — felülír minden alap !important-et ami valamilyen okból még maradhatott a render layer-ben). */ html[data-theme="modern-light"] #admin-events-editor-modal .admin-form-input, html[data-theme="modern-light"] #admin-events-editor-modal .admin-form-select, html[data-theme="modern-light"] #admin-events-editor-modal .admin-form-textarea, html[data-theme="modern-light"] #admin-dev-editor-modal .admin-form-input, html[data-theme="modern-light"] #admin-dev-editor-modal .admin-form-select, html[data-theme="modern-light"] #admin-dev-editor-modal .admin-form-textarea, html[data-theme="modern-light"] #admin-lab-editor-modal .admin-form-input, html[data-theme="modern-light"] #admin-lab-editor-modal .admin-form-select, html[data-theme="modern-light"] #admin-lab-editor-modal .admin-form-textarea { background: #FFFFFF !important; color: #111827 !important; border: 1px solid #D1D5DB !important; color-scheme: light !important; } html[data-theme="modern-light"] #admin-events-editor-modal .admin-form-select option, html[data-theme="modern-light"] #admin-dev-editor-modal .admin-form-select option, html[data-theme="modern-light"] #admin-lab-editor-modal .admin-form-select option { background: #FFFFFF !important; color: #111827 !important; } html[data-theme="modern-dark"] #admin-events-editor-modal .admin-form-input, html[data-theme="modern-dark"] #admin-events-editor-modal .admin-form-select, html[data-theme="modern-dark"] #admin-events-editor-modal .admin-form-textarea, html[data-theme="modern-dark"] #admin-dev-editor-modal .admin-form-input, html[data-theme="modern-dark"] #admin-dev-editor-modal .admin-form-select, html[data-theme="modern-dark"] #admin-dev-editor-modal .admin-form-textarea, html[data-theme="modern-dark"] #admin-lab-editor-modal .admin-form-input, html[data-theme="modern-dark"] #admin-lab-editor-modal .admin-form-select, html[data-theme="modern-dark"] #admin-lab-editor-modal .admin-form-textarea { background: #1A1A1A !important; color: #F3F4F6 !important; border: 1px solid #2A2A2A !important; color-scheme: dark !important; } /* v726: .admin-dev-add-btn ("+ Új esemény" gomb) Modern-világos override — az alap rgba(59,130,246,0.1) halvány kék fehér háttéren elveszik; tisztább primary kék hátteres pill gomb */ html[data-theme="modern-light"] .admin-dev-add-btn { background: var(--color-primary-highlight); border: 1px solid var(--color-primary); color: var(--color-primary); } html[data-theme="modern-light"] .admin-dev-add-btn:hover { background: var(--color-primary); color: #FFFFFF; } html[data-theme^="modern"] .news-admin-header { background: var(--color-surface-alt); border-bottom: 1px solid var(--color-border); padding: 14px 20px; } html[data-theme^="modern"] .news-admin-tabs { background: var(--color-surface); border-bottom: 1px solid var(--color-border-light); } /* v932: .admin-ct-card kivéve — a CT-kártyák surface-háttért kapnak (line ~4417 blokkban), NEM surface-alt-et (szürke folt elkerülése) */ html[data-theme^="modern"] .admin-news-item, html[data-theme^="modern"] .admin-user-item { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 12px 16px; } /* Admin form input/select */ html[data-theme^="modern"] .admin-form-input, html[data-theme^="modern"] .admin-form-select, html[data-theme^="modern"] .admin-form-textarea { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-family); font-size: 13px; padding: 8px 12px; } html[data-theme^="modern"] .admin-form-input:focus, html[data-theme^="modern"] .admin-form-select:focus, html[data-theme^="modern"] .admin-form-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .admin-form-select option { background: var(--color-bg); color: var(--color-text); } html[data-theme^="modern"] .admin-form-label { color: var(--color-text-secondary); font-size: 12px; font-weight: 500; } /* Volán/MÁV menetrend csempe szűrő-select-ek (transit-select) */ html[data-theme^="modern"] .transit-select { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); } html[data-theme="modern-dark"] .transit-select { color-scheme: dark; } html[data-theme="modern-light"] .transit-select { color-scheme: light; } html[data-theme^="modern"] .transit-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .transit-select option { background: var(--color-surface); color: var(--color-text); } /* Hirdetések csempe szűrő/kereső szekció (cf-*) — Modern skin override. A .cf-toolbar-fixed wrapper sáv és minden form-kontroll a tile felületszínét (--color-surface) követi, NEM a lap-hátteret. Forrás-minta: .transit-select v882. */ html[data-theme^="modern"] .cf-toolbar-fixed { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } html[data-theme^="modern"] .cf-filter-select, html[data-theme^="modern"] .cf-search-input { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); } html[data-theme="modern-dark"] .cf-filter-select, html[data-theme="modern-dark"] .cf-search-input { color-scheme: dark; } html[data-theme="modern-light"] .cf-filter-select, html[data-theme="modern-light"] .cf-search-input { color-scheme: light; } html[data-theme^="modern"] .cf-filter-select:focus, html[data-theme^="modern"] .cf-search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .cf-filter-select option { background: var(--color-surface); color: var(--color-text); } html[data-theme^="modern"] .cf-search-input::placeholder { color: var(--color-text-muted); } html[data-theme^="modern"] .cf-filter-own-btn { background: var(--color-surface-alt); color: var(--color-text-secondary); border: 1px solid var(--color-border); } html[data-theme^="modern"] .cf-filter-own-btn:hover { background: var(--color-surface); border-color: var(--color-primary); color: var(--color-text); } html[data-theme^="modern"] .cf-filter-own-btn.active { background: rgba(37, 99, 235, 0.15); color: var(--color-primary); border-color: var(--color-primary); } html[data-theme^="modern"] .cf-new-btn { background: rgba(132, 204, 22, 0.12); border: 1px dashed rgba(132, 204, 22, 0.4); } html[data-theme="modern-light"] .cf-new-btn { color: #65a30d; /* lime-600 — fehér felületen olvasható */ } html[data-theme="modern-dark"] .cf-new-btn { color: #a3e635; /* lime-400 — sötét felületen olvasható */ } html[data-theme^="modern"] .cf-new-btn:hover { background: rgba(132, 204, 22, 0.22); border-style: solid; } /* Bejelentések (rp-*) és Javaslatok (sg-*) csempék szűrő/kereső szekció — Modern skin. A toolbar wrapper a tile felületszínét követi, a select-ek és stats-pillek a --color-surface-alt-on ülnek (NEM --color-bg, mert sötétebb a tile-nál). */ html[data-theme^="modern"] .reports-toolbar, html[data-theme^="modern"] .suggestions-toolbar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme^="modern"] .rp-category-filter, html[data-theme^="modern"] .sg-category-filter { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); } html[data-theme="modern-dark"] .rp-category-filter, html[data-theme="modern-dark"] .sg-category-filter { color-scheme: dark; } html[data-theme="modern-light"] .rp-category-filter, html[data-theme="modern-light"] .sg-category-filter { color-scheme: light; } html[data-theme^="modern"] .rp-category-filter:focus, html[data-theme^="modern"] .sg-category-filter:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .rp-category-filter option, html[data-theme^="modern"] .sg-category-filter option { background: var(--color-surface); color: var(--color-text); } /* Stats sáv és pillek — admin+ összesítő */ html[data-theme^="modern"] .rp-stats-bar, html[data-theme^="modern"] .sg-stats-bar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } html[data-theme^="modern"] .rp-stat-pill, html[data-theme^="modern"] .sg-stat-pill { background: var(--color-surface-alt); color: var(--color-text-secondary); } html[data-theme^="modern"] .rp-stat-pill b, html[data-theme^="modern"] .sg-stat-pill b { color: var(--color-text); } /* "+ Új bejelentés" / "+ Új javaslat" gomb — narancs/zöld accent megőrizve, Modern-világosban a halvány rgba háttér + telített szöveg jól látszik */ html[data-theme="modern-light"] .reports-new-btn { color: #c2410c; /* orange-700 — fehér felületen olvasható */ } html[data-theme="modern-light"] .suggestions-new-btn { color: #15803d; /* green-700 — fehér felületen olvasható */ } /* Szolgáltatások csempe keresőmező (Local services) */ html[data-theme^="modern"] .ls-search-input { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); } html[data-theme="modern-dark"] .ls-search-input { color-scheme: dark; } html[data-theme="modern-light"] .ls-search-input { color-scheme: light; } html[data-theme^="modern"] .ls-search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .ls-search-input::placeholder { color: var(--color-text-muted); } /* SXR radar dátumválasztó (date input) */ html[data-theme^="modern"] .sxr-date-input { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); } html[data-theme="modern-dark"] .sxr-date-input { color-scheme: dark; } html[data-theme="modern-light"] .sxr-date-input { color-scheme: light; } html[data-theme^="modern"] .sxr-date-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* Események csempe naptár toolbar + hónap-navigáció */ html[data-theme^="modern"] .evt-toolbar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } html[data-theme^="modern"] .evt-nav-btn { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); } html[data-theme^="modern"] .evt-nav-btn:hover { background: var(--color-surface); border-color: var(--color-primary); } /* Állampolgári részvétel pill-szűrő (Mind/Aktív/Lezárt/Követett) */ html[data-theme^="modern"] .gp-poll-filter-bar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } html[data-theme^="modern"] .gp-poll-filter-btn { background: var(--color-surface-alt); color: var(--color-text-secondary); border: 1px solid var(--color-border); } html[data-theme^="modern"] .gp-poll-filter-btn:hover { background: var(--color-surface); color: var(--color-text); border-color: var(--color-primary); } html[data-theme^="modern"] .gp-poll-filter-btn.active { background: rgba(37, 99, 235, 0.15); color: var(--color-primary); border-color: var(--color-primary); } /* Admin panel kereső + szerepkör-szűrő */ html[data-theme^="modern"] .admin-search-input, html[data-theme^="modern"] .admin-role-filter { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); } html[data-theme="modern-dark"] .admin-search-input, html[data-theme="modern-dark"] .admin-role-filter { color-scheme: dark; } html[data-theme="modern-light"] .admin-search-input, html[data-theme="modern-light"] .admin-role-filter { color-scheme: light; } html[data-theme^="modern"] .admin-search-input:focus, html[data-theme^="modern"] .admin-role-filter:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .admin-role-filter option { background: var(--color-surface); color: var(--color-text); } html[data-theme^="modern"] .admin-search-input::placeholder { color: var(--color-text-muted); } /* Admin toolbar-ok és stats sávok (egységes felületszín minden adminon) */ html[data-theme^="modern"] .admin-audit-toolbar, html[data-theme^="modern"] .admin-email-toolbar, html[data-theme^="modern"] .admin-users-toolbar, html[data-theme^="modern"] .admin-mod-toolbar, html[data-theme^="modern"] .admin-events-toolbar, html[data-theme^="modern"] .admin-dev-toolbar, html[data-theme^="modern"] .admin-ct-toolbar-fixed { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } html[data-theme^="modern"] .admin-district-stats, html[data-theme^="modern"] .admin-mod-stats { background: transparent !important; } /* Városrész-statisztika: a darabszámok + az „Összesen" sor olvasható szín a skin felületéhez igazodjon (Modern-világosban sötét #374151, Modern-sötétben világos #E5E5E5) a hardkódolt halvány #e2e8f0 helyett — jobb láthatóság világos skinen. */ html[data-theme^="modern"] .admin-district-count, html[data-theme^="modern"] .admin-district-total .admin-district-label { color: var(--color-text); } html[data-theme^="modern"] .admin-email-stats { background: var(--color-surface); } /* ── Moderáció tab (#admin-tab-moderation) — Modern skin override ── */ /* Szűrő select-ek (mod-filter-severity, mod-filter-lang) — .transit-select minta szerint */ html[data-theme^="modern"] .admin-mod-toolbar select { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); } html[data-theme="modern-dark"] .admin-mod-toolbar select { color-scheme: dark; } html[data-theme="modern-light"] .admin-mod-toolbar select { color-scheme: light; } html[data-theme^="modern"] .admin-mod-toolbar select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .admin-mod-toolbar select option { background: var(--color-surface); color: var(--color-text); } /* Kereső input (.admin-search-input már skin-aware a 2382-2404 blokkban) — Modern toolbar-ban a tile-felület színét vegye fel, ne a surface-alt-ot (mert a toolbar maga var(--color-surface)) */ html[data-theme^="modern"] .admin-mod-toolbar .admin-search-input { background: var(--color-surface); } /* Stat-kártyák — a 6 KPI doboz a transparent container-en belül (clickable filter buttons) */ html[data-theme^="modern"] .admin-mod-stat-card { background: var(--color-surface); border: 1px solid var(--color-border-light); color: var(--color-text); } html[data-theme^="modern"] .admin-mod-stat-card:hover { background: var(--color-surface-hover, var(--color-surface)); border-color: var(--color-primary); } html[data-theme^="modern"] .admin-mod-stat-card.is-active { background: rgba(59,130,246,0.12); border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); } html[data-theme^="modern"] .admin-mod-stat-card.is-active .label { color: var(--color-primary); } html[data-theme^="modern"] .admin-mod-stat-card.is-active .value { color: var(--color-text); } html[data-theme^="modern"] .admin-mod-stat-card .label { color: var(--color-text-muted); } html[data-theme^="modern"] .admin-mod-stat-card .value { color: var(--color-text); } /* Szekciócím (TILTÓLISTA) — fehér rgba override */ html[data-theme^="modern"] .admin-mod-section-title { color: var(--color-text-secondary); } /* Lista scrollbar — skin-tudatos, jobb láthatóság (Modern-világos: sötét thumb fehér háttéren) */ html[data-theme^="modern"] .admin-mod-list { scrollbar-color: var(--color-text-muted) var(--color-surface-alt); } html[data-theme^="modern"] .admin-mod-list::-webkit-scrollbar-track { background: var(--color-surface-alt); } html[data-theme^="modern"] .admin-mod-list::-webkit-scrollbar-thumb { background: var(--color-text-muted); border: 2px solid var(--color-surface-alt); } html[data-theme^="modern"] .admin-mod-list::-webkit-scrollbar-thumb:hover { background: var(--color-primary); } /* Tiltólista sorok */ html[data-theme^="modern"] .admin-mod-row { background: var(--color-surface); border: 1px solid var(--color-border-light); } html[data-theme^="modern"] .admin-mod-row.is-regex { border-left: 3px solid var(--color-primary); } /* Pattern monospace kód-blokk — a tile-felülettől eltérő tónus */ html[data-theme^="modern"] .admin-mod-pattern { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border-light); } /* Megjegyzések szöveg — fehér rgba 0.45 → muted */ html[data-theme^="modern"] .admin-mod-notes { color: var(--color-text-muted); } /* Meta-info (szám/dátum) — még halványabb */ html[data-theme^="modern"] .admin-mod-meta { color: var(--color-text-muted); opacity: 0.7; } /* Üres állapot — "Nincsenek pattern-ek" */ html[data-theme^="modern"] .admin-mod-empty { color: var(--color-text-muted); } /* Severity badge-ek (PROFANITY/SLUR/HATE) — Modern-világoson kontrasztosabb opacity */ html[data-theme="modern-light"] .mod-severity-badge.profanity { background: rgba(245, 158, 11, 0.18); color: #92400e; } html[data-theme="modern-light"] .mod-severity-badge.slur { background: rgba(239, 68, 68, 0.18); color: #991b1b; } html[data-theme="modern-light"] .mod-severity-badge.hate { background: rgba(127, 29, 29, 0.22); color: #7f1d1d; } /* Lang chip (HU/EN/Univ) — Modern-világoson sötét kék szöveg + univ override */ html[data-theme="modern-light"] .mod-lang-chip { background: rgba(37, 99, 235, 0.14); color: #1d4ed8; } html[data-theme^="modern"] .mod-lang-chip.is-univ { background: var(--color-surface-alt); color: var(--color-text-muted); } /* Sor-akció gombok (toggle/törlés) */ html[data-theme^="modern"] .admin-mod-row-action { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); } html[data-theme^="modern"] .admin-mod-row-action:hover { background: var(--color-surface); color: var(--color-text); border-color: var(--color-primary); } html[data-theme^="modern"] .admin-mod-row-action.is-danger { color: #b91c1c; border-color: rgba(239, 68, 68, 0.35); } html[data-theme="modern-dark"] .admin-mod-row-action.is-danger { color: #fca5a5; } html[data-theme^="modern"] .admin-mod-row-action.is-danger:hover { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.55); } /* ── Adatvédelmi tájékoztató modal (.auth-privacy-*) — Modern skin ── */ html[data-theme^="modern"] .auth-privacy-modal { background: rgba(0, 0, 0, 0.5); } html[data-theme^="modern"] .auth-privacy-content { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); } html[data-theme^="modern"] .auth-privacy-header { border-bottom: 1px solid var(--color-border); } html[data-theme^="modern"] .auth-privacy-header h3 { color: var(--color-text); } html[data-theme^="modern"] .auth-privacy-close { color: var(--color-text-secondary); } html[data-theme^="modern"] .auth-privacy-close:hover { color: var(--color-text); } html[data-theme^="modern"] .auth-privacy-body { color: var(--color-text); } html[data-theme^="modern"] .auth-privacy-body h4 { color: var(--color-primary); } html[data-theme^="modern"] .auth-privacy-meta { color: var(--color-text-muted); } /* ── Adatvédelmi kérelem (DPO) dialog — Modern skin ── */ html[data-theme^="modern"] .dpo-dialog::backdrop { background: rgba(0, 0, 0, 0.5); } html[data-theme^="modern"] .dpo-dialog-content { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); } html[data-theme^="modern"] .dpo-dialog-header { border-bottom: 1px solid var(--color-border); } html[data-theme^="modern"] .dpo-dialog-header h2, html[data-theme^="modern"] .dpo-dialog-header h3 { color: var(--color-text); } html[data-theme^="modern"] .dpo-close-btn, html[data-theme^="modern"] .dpo-dialog-close { color: var(--color-text-secondary); } html[data-theme^="modern"] .dpo-close-btn:hover, html[data-theme^="modern"] .dpo-dialog-close:hover { color: var(--color-text); background: var(--color-surface-alt); } html[data-theme^="modern"] .dpo-intro { color: var(--color-text-secondary); } html[data-theme^="modern"] .dpo-field label { color: var(--color-text-secondary); } html[data-theme^="modern"] .dpo-input, html[data-theme^="modern"] .dpo-select, html[data-theme^="modern"] .dpo-textarea { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); } html[data-theme="modern-dark"] .dpo-input, html[data-theme="modern-dark"] .dpo-select, html[data-theme="modern-dark"] .dpo-textarea { color-scheme: dark; } html[data-theme="modern-light"] .dpo-input, html[data-theme="modern-light"] .dpo-select, html[data-theme="modern-light"] .dpo-textarea { color-scheme: light; } html[data-theme^="modern"] .dpo-input:focus, html[data-theme^="modern"] .dpo-select:focus, html[data-theme^="modern"] .dpo-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .dpo-input::placeholder, html[data-theme^="modern"] .dpo-textarea::placeholder { color: var(--color-text-muted); } html[data-theme^="modern"] .dpo-select option { background: var(--color-surface); color: var(--color-text); } html[data-theme^="modern"] .dpo-btn-secondary { background: var(--color-surface-alt); color: var(--color-text-secondary); border: 1px solid var(--color-border); } html[data-theme^="modern"] .dpo-btn-secondary:hover:not(:disabled) { background: var(--color-surface); color: var(--color-text); border-color: var(--color-primary); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ ADMIN PANEL — átfogó Modern skin override (v929) ║ ║ Catch-all [class*="admin-"]:not([class*="sidebar-"])[class*="-X"] szelektorok lefedik ║ ║ ~199 hardkódolt sötét palettával rendelkező admin osztályt. ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* 1. Modal-content + dialog overlay családok */ html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-modal-content"], html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-editor-content"], html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-dialog-content"] { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-modal-overlay"], html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-editor-overlay"] { background: rgba(0, 0, 0, 0.5); } html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-modal-header"], html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-modal-footer"] { border-color: var(--color-border); color: var(--color-text); } /* 2. Item / row / card / list containerek (rgba(30,41,59,*) háttér helyett) v933: .admin-ct-card kizárva (CT kártyák surface-háttért kapnak külön szabályon) v936: :not([class*="sidebar-"]) kizárás — a sidebar-admin-only osztály tartalmazza az "admin-" szubsztringet, ezért a catch-all hibásan eltalálta az inaktív Üzenetek/Admin nav-elemeket (szürke folt). */ html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-item"]:not([class*="status"]):not([class*="-tab-"]):not([class*="sidebar-"]):not([class*="grid-stack"]), html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-card"]:not([class*="-tab"]):not(.admin-ct-card):not(.admin-ct-cards):not([class*="sidebar-"]):not([class*="grid-stack"]) { /* v976 (L64 ismétlődés): :not([class*="grid-stack"]) kizárás — a `grid-stack-item profile-admin-only` wrapper (Profil → Eseményeim csempe) egyszerre tartalmazza az "admin-" (profile-ADMIN-only) ÉS "-item" (grid-stack-ITEM) substringet, ezért a catch-all hibásan szürke surface-alt hátteret adott a grid-cellának (szürke keret a fehér csempe körül). A GridStack wrapperek soha nem kaphatnak admin kártya/elem hátteret. */ background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text); } /* 3. Stats + chart kártyák */ html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-stat-card"], html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-chart-col"] { background: var(--color-surface-alt); border-color: var(--color-border); } /* 4. Tabs (admin-ct-tabs, admin-tabs) */ html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-tabs"] { border-bottom-color: var(--color-border); } /* v943: :not([class*="-tab-"]) exclusion hozzáadva — a 2553-as item-szabály mintájára. A .admin-tab-content (tab tartalom konténer) tartalmaz "-tab" substring-et, és a 2574-es hover catch-all hibásan megfogta → az egész tab tartalom hover-en szürke (--color-surface-alt) hátteret kapott. A "-tab-" középső kötőjeles minta kizárja az `admin-tab-content`, `admin-tab-X` osztályokat, de megtartja a `admin-X-tab` (tab elemek). */ html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-tab"]:not(.active):not([class*="-tabs"]):not([class*="-tab-"]):not([class*="-badge"]) { color: var(--color-text-secondary); } html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-tab"]:not([class*="-tabs"]):not([class*="-tab-"]):not([class*="-badge"]):hover:not(.active) { background: var(--color-surface-alt); color: var(--color-text); } /* 5. Section-title + szöveg-hierarchia (hardkódolt #e2e8f0/#94a3b8/#64748b helyett) */ html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-section-title"], html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-panel-title"] { color: var(--color-text); border-bottom-color: var(--color-border); } html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-title"]:not([class*="-tab"]):not([class*="-badge"]):not(.dpo-dialog-content *):not(.auth-privacy-content *), html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-value"], html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-subject"], html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-key"]:not([class*="-key-"]) { color: var(--color-text); } html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-meta"], html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-desc"]:not([class*="-error"]), html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-label"]:not([class*="-badge"]), html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-recipient"], html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-author"], html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-name"]:not([class*="status"]) { color: var(--color-text-secondary); } html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-date"], html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-empty"]:not([class*="-text"]), html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-empty-text"], html[data-theme^="modern"] [class*="admin-"]:not([class*="sidebar-"])[class*="-hint"] { color: var(--color-text-muted); } /* 6. Search input-ok + form-kontrollok */ html[data-theme^="modern"] .admin-perm-search, html[data-theme^="modern"] .admin-poll-opt-input, html[data-theme^="modern"] .admin-ak-key-display, html[data-theme^="modern"] .admin-ct-status-select, html[data-theme^="modern"] .admin-role-select { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); } html[data-theme^="modern"] .admin-perm-search:focus, html[data-theme^="modern"] .admin-poll-opt-input:focus, html[data-theme^="modern"] .admin-ct-status-select:focus, html[data-theme^="modern"] .admin-role-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .admin-perm-search::placeholder, html[data-theme^="modern"] .admin-poll-opt-input::placeholder { color: var(--color-text-muted); } html[data-theme="modern-dark"] .admin-ct-status-select, html[data-theme="modern-dark"] .admin-role-select { color-scheme: dark; } html[data-theme="modern-light"] .admin-ct-status-select, html[data-theme="modern-light"] .admin-role-select { color-scheme: light; } html[data-theme^="modern"] .admin-ct-status-select option, html[data-theme^="modern"] .admin-role-select option { background: var(--color-surface); color: var(--color-text); } /* 7. Permissions table (sticky header + zebra) */ html[data-theme^="modern"] .admin-permissions-table thead { background: var(--color-surface); } html[data-theme^="modern"] .admin-permissions-table th, html[data-theme^="modern"] .admin-permissions-table td { border-bottom-color: var(--color-border); color: var(--color-text); } html[data-theme^="modern"] .perm-col-header { color: var(--color-text-secondary); } /* 8. Info-banner (admin-perm-info, admin-msg-modal-body) */ html[data-theme^="modern"] .admin-perm-info { background: rgba(37, 99, 235, 0.06); border-left-color: var(--color-primary); color: var(--color-text-secondary); } /* 9. CT editor panel (Tartalomszerkesztő) */ html[data-theme^="modern"] .admin-ct-panel, html[data-theme^="modern"] .admin-ct-panel-header, html[data-theme^="modern"] .admin-ct-editor-panel { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } /* CT card-ok felülírása a duplikáció után (lásd line 4417 alatt). */ html[data-theme^="modern"] .admin-ct-card-body, html[data-theme^="modern"] .admin-ct-poll-desc, html[data-theme^="modern"] .admin-ct-proposal-desc { color: var(--color-text-secondary); } /* v939+v940: CT-kártya body + title + desc szürke háttér felülírása. A v929 catch-all [class*="-card"]:not(.admin-ct-card) MEGFOGJA a .admin-ct-card-{body, title, desc} mindet (mert tartalmazzák a "-card" szubsztringet). A v939 csak a body-t kezelte → 2 sávos szürke maradt a title + desc-en. Most mind a 3 aldoboz átlátszó. .admin-ct-card-icon NEM kell, mert az inline style="background:..." 1000-es specificitása felülírja a catch-all-t. */ html[data-theme^="modern"] .admin-ct-card-body, html[data-theme^="modern"] .admin-ct-card-title, html[data-theme^="modern"] .admin-ct-card-desc { background: transparent !important; border-color: transparent !important; } /* 10. Health check kártyák (status szín-akcentek megőrizve) */ html[data-theme^="modern"] .admin-health-item-name { color: var(--color-text); } html[data-theme^="modern"] .admin-health-item-ms, html[data-theme^="modern"] .admin-health-item-time, html[data-theme^="modern"] .admin-health-stat { color: var(--color-text-secondary); } /* 11. Egyéb hardkódolt sötét háttér cells (admin-stat-value korábbi #e2e8f0) */ html[data-theme^="modern"] .admin-stat-value, html[data-theme^="modern"] .admin-flag-key { color: var(--color-text); } html[data-theme^="modern"] .admin-flag-desc { color: var(--color-text-secondary); } html[data-theme^="modern"] .admin-flag-meta { color: var(--color-text-muted); } /* 12. Permissions / poll-opt / settings input + toolbar */ html[data-theme^="modern"] .admin-perm-toolbar, html[data-theme^="modern"] .admin-perm-search-bar, html[data-theme^="modern"] .admin-setting-item { background: var(--color-surface); border-color: var(--color-border); } html[data-theme^="modern"] .admin-setting-desc, html[data-theme^="modern"] .admin-setting-info { color: var(--color-text-secondary); } /* 13. Charts (bar fill színek megőrizve, csak text/border módosul) */ html[data-theme^="modern"] .admin-chart-label, html[data-theme^="modern"] .admin-chart-bar-fill span { color: var(--color-text); } /* ── 43. Cookie/system banner ─────────────────────────────────── */ html[data-theme^="modern"] .cookie-banner, html[data-theme^="modern"] #system-banner { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); color: var(--color-text); backdrop-filter: none; } html[data-theme^="modern"] .cookie-banner-accept { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 8px 16px; font-weight: 600; } html[data-theme^="modern"] .cookie-banner-accept:hover { background: var(--color-primary-hover); } /* ── 44. PWA install banner + offline/SW update banner ────────── */ html[data-theme^="modern"] .pwa-install-banner, html[data-theme^="modern"] .offline-banner, html[data-theme^="modern"] .sw-update-banner { background: var(--color-surface); border: 1px solid var(--color-border); /* 4 oldal — a base rgba(96,165,250,0.3) felülírása */ color: var(--color-text); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow-md); /* Modern-skin árnyék — világosban 0.06-0.08 opacity, sötétben 0.2-0.3 */ } html[data-theme^="modern"] .offline-banner { background: var(--color-error); color: #fff; border-bottom: none; } html[data-theme^="modern"] .pwa-banner-btn, html[data-theme^="modern"] .sw-update-btn { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 6px 14px; font-weight: 600; font-size: 13px; } html[data-theme^="modern"] .pwa-banner-btn:hover, html[data-theme^="modern"] .sw-update-btn:hover { background: var(--color-primary-hover); } html[data-theme^="modern"] .pwa-banner-btn.pwa-banner-later { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); } /* ── 45. Toast értesítések ────────────────────────────────────── */ html[data-theme^="modern"] .cd-toast { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); color: var(--color-text); padding: 10px 16px; font-size: 13px; backdrop-filter: none; } /* ── 46. MFA challenge panel ──────────────────────────────────── */ html[data-theme^="modern"] .mfa-challenge-panel, html[data-theme^="modern"] #auth-mfa-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } html[data-theme^="modern"] .mfa-code-input { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); padding: 10px 14px; font-size: 16px; letter-spacing: 0.15em; font-family: var(--font-family); text-align: center; } html[data-theme^="modern"] .mfa-code-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* ── 47. Footer + datavalidity apróságok ──────────────────────── */ html[data-theme^="modern"] .footer, html[data-theme^="modern"] .app-footer { padding: 8px 24px; font-size: 11px; color: var(--color-text-muted); background: transparent; border-top: none; position: relative; } /* Felső inset vonal (spec: left 24px, right 24px) — nem fut végig */ html[data-theme^="modern"] .footer::before, html[data-theme^="modern"] .app-footer::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: var(--color-border-light); } /* ── 48. Tartalom szekció fejlécek / page-title ──────────────── */ html[data-theme^="modern"] .page-title, html[data-theme^="modern"] .section-title, html[data-theme^="modern"] .page-subtitle { color: var(--color-text); } /* ── 49. Általános gomb-stílus alaphelyzet (ami még nem kezelt) ─ */ html[data-theme^="modern"] button.btn-primary, html[data-theme^="modern"] .btn-primary { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 8px 16px; font-weight: 600; font-family: var(--font-family); font-size: 13px; transition: background 150ms ease; } html[data-theme^="modern"] button.btn-primary:hover, html[data-theme^="modern"] .btn-primary:hover { background: var(--color-primary-hover); } html[data-theme^="modern"] button.btn-secondary, html[data-theme^="modern"] .btn-secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 16px; font-weight: 500; font-family: var(--font-family); font-size: 13px; } html[data-theme^="modern"] button.btn-secondary:hover, html[data-theme^="modern"] .btn-secondary:hover { background: var(--color-surface-alt); } html[data-theme="modern-dark"] button.btn-secondary:hover, html[data-theme="modern-dark"] .btn-secondary:hover { background: #1F1F1F; } /* ══════════════════════════════════════════════════════════════ * C1 FINOMÍTÁS — Profil oldal csempék Modern skinben * Cél: a profil-specifikus hardkódolt rgba színek és glassmorphism * elemek skin-paletta szerinti lecserélése. * ══════════════════════════════════════════════════════════════ */ /* ── 50. Avatár szekció ───────────────────────────────────────── */ html[data-theme^="modern"] .profile-avatar-wrap { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 50%; } html[data-theme^="modern"] .profile-avatar-monogram { background: var(--color-primary); color: #fff; } html[data-theme^="modern"] .profile-avatar-btn { background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-text); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; font-weight: 500; } html[data-theme^="modern"] .profile-avatar-btn:hover { background: var(--color-primary-highlight); border-color: var(--color-primary); color: var(--color-primary); } /* ── 51. Profil input + textarea ──────────────────────────────── */ html[data-theme^="modern"] .profile-input, html[data-theme^="modern"] .profile-textarea { background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text); border-radius: var(--radius-sm); font-family: var(--font-family); font-size: 13px; padding: 8px 12px; transition: border-color 150ms ease, box-shadow 150ms ease; } html[data-theme^="modern"] .profile-input:focus, html[data-theme^="modern"] .profile-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .profile-input[readonly] { background: var(--color-surface-alt); color: var(--color-text-muted); cursor: not-allowed; } html[data-theme^="modern"] .profile-input::placeholder, html[data-theme^="modern"] .profile-textarea::placeholder { color: var(--color-text-muted); } /* ── 52. Email csere form ─────────────────────────────────────── */ html[data-theme^="modern"] .profile-email-change-btn { background: var(--color-primary-highlight); color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; font-weight: 500; } html[data-theme^="modern"] .profile-email-change-btn:hover { background: var(--color-primary); color: #fff; } html[data-theme^="modern"] .profile-email-confirm { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } html[data-theme^="modern"] .profile-email-confirm:hover { background: var(--color-primary-hover); } html[data-theme^="modern"] .profile-email-cancel { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); } html[data-theme^="modern"] .profile-email-cancel:hover { background: var(--color-surface-alt); } html[data-theme^="modern"] .profile-email-hint { color: var(--color-text-muted); } /* ── 53. 2FA státusz ─────────────────────────────────────────── */ html[data-theme^="modern"] .profile-2fa-status.tfa-on { color: var(--color-success); } html[data-theme^="modern"] .profile-2fa-status.tfa-off { color: var(--color-text-muted); } /* ── 54. Aktív sessionök listája ──────────────────────────────── */ html[data-theme^="modern"] .profile-session-item { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; } html[data-theme^="modern"] .profile-session-item:hover { background: var(--color-surface); border-color: var(--color-border); } html[data-theme="modern-dark"] .profile-session-item:hover { background: #1F1F1F; } html[data-theme^="modern"] .profile-session-item.current { border-color: var(--color-primary); background: var(--color-primary-highlight); } /* ── 55. Profil gombok általános ─────────────────────────────── */ html[data-theme^="modern"] .profile-btn { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 9px 16px; font-size: 13px; font-weight: 600; font-family: var(--font-family); transition: background 150ms ease; } html[data-theme^="modern"] .profile-btn:hover { background: var(--color-primary-hover); } html[data-theme^="modern"] .profile-btn-danger { background: var(--color-error); color: #fff; } html[data-theme^="modern"] .profile-btn-danger:hover { background: #B91C1C; } html[data-theme="modern-light"] .profile-btn-danger:hover { background: #991B1B; } html[data-theme^="modern"] .profile-btn-danger:disabled { opacity: 0.5; cursor: not-allowed; } /* ── 56. Profil elválasztó ────────────────────────────────────── */ html[data-theme^="modern"] .profile-divider { border-top: 1px solid var(--color-border-light); background: none; } /* ── 57. GDPR szekció ─────────────────────────────────────────── */ html[data-theme^="modern"] .profile-gdpr-item { padding: 10px 12px; border-bottom: 1px solid var(--color-border-light); } html[data-theme^="modern"] .profile-gdpr-badge { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 99px; } html[data-theme^="modern"] .profile-gdpr-badge.gdpr-ok { background: var(--color-primary-highlight); color: var(--color-success); } html[data-theme="modern-light"] .profile-gdpr-badge.gdpr-ok { background: rgba(5, 150, 105, 0.1); color: var(--color-success); } html[data-theme^="modern"] .profile-gdpr-badge.gdpr-missing { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); } html[data-theme^="modern"] .profile-gdpr-btn { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; font-weight: 500; } html[data-theme^="modern"] .profile-gdpr-btn:hover { background: var(--color-primary-highlight); color: var(--color-primary); border-color: var(--color-primary); } html[data-theme^="modern"] .profile-gdpr-btn.profile-gdpr-danger { background: transparent; color: var(--color-error); border: 1px solid var(--color-error); } html[data-theme^="modern"] .profile-gdpr-btn.profile-gdpr-danger:hover { background: var(--color-error); color: #fff; } html[data-theme^="modern"] .profile-gdpr-note { color: var(--color-text-muted); font-size: 11px; } /* ── 58. Profile lista (bejelentéseim, javaslatim, üzeneteim) ── */ html[data-theme^="modern"] .profile-list-item { border-bottom: 1px solid var(--color-border-light); padding: 10px 0; font-size: 13px; } html[data-theme^="modern"] .profile-list-item:last-child { border-bottom: none; } html[data-theme^="modern"] .profile-sg-link:hover, html[data-theme^="modern"] .profile-list-item:hover { background: var(--color-surface-alt); } html[data-theme="modern-dark"] .profile-sg-link:hover, html[data-theme="modern-dark"] .profile-list-item:hover { background: #1F1F1F; } html[data-theme^="modern"] .profile-msg-suggestion-auto { color: var(--color-primary); } html[data-theme^="modern"] .profile-msg-suggestion-response { color: var(--color-success); } html[data-theme^="modern"] .profile-item-status { background: var(--color-surface-alt); color: var(--color-text); padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 500; } html[data-theme^="modern"] .profile-item-date { color: var(--color-text-muted); font-size: 11px; } /* ── 59. Részvételi statisztika kártyák ──────────────────────── */ html[data-theme^="modern"] .profile-stat-card { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 14px 10px; } html[data-theme^="modern"] .profile-stat-num { color: var(--color-primary); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } html[data-theme^="modern"] .profile-stat-label { color: var(--color-text-muted); font-size: 11px; font-weight: 500; } html[data-theme^="modern"] .profile-subheading { color: var(--color-text-secondary); font-size: 12px; font-weight: 500; border-top: 1px solid var(--color-border-light); } /* ── 60. Értesítési beállítások összefoglaló ─────────────────── */ html[data-theme^="modern"] .profile-notif-row { border-bottom: 1px solid var(--color-border-light); padding: 8px 0; } html[data-theme^="modern"] .profile-notif-row:last-child { border-bottom: none; } html[data-theme^="modern"] .profile-notif-badge.badge-on { background: var(--color-primary-highlight); color: var(--color-success); } html[data-theme="modern-light"] .profile-notif-badge.badge-on { background: rgba(5, 150, 105, 0.12); color: var(--color-success); } html[data-theme^="modern"] .profile-notif-badge.badge-off { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); } html[data-theme^="modern"] .profile-notif-hint { color: var(--color-text-muted); font-size: 11px; font-style: italic; } /* ══════════════════════════════════════════════════════════════ * C2 FINOMÍTÁS — Admin panel táblák / listák Modern skinben * Cél: az admin wrappereket és listatémaket a skin paletta * szerint megjeleníteni (Klasszikus glassmorphism nélkül). * ══════════════════════════════════════════════════════════════ */ /* ── 61. Admin panel wrapper + tabok ──────────────────────────── */ html[data-theme^="modern"] .admin-panel-container { background: transparent; padding: 16px; } html[data-theme^="modern"] .admin-panel-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-border); background: transparent; margin-bottom: 16px; overflow-x: auto; flex-wrap: wrap; } html[data-theme^="modern"] .admin-panel-tab { padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer; transition: color 150ms ease, border-color 150ms ease; font-family: var(--font-family); } html[data-theme^="modern"] .admin-panel-tab:hover { color: var(--color-text); background: transparent; } html[data-theme^="modern"] .admin-panel-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); background: transparent; } /* v943: !important defense-in-depth — minden admin tab tartalom KONTÉNER átlátszó, hover-en is. A 2574-es catch-all hibája miatt korábban hover-en szürke háttér jelent meg az egész tab területén. */ html[data-theme^="modern"] .admin-tab-content { background: transparent !important; } html[data-theme^="modern"] .admin-tab-content:hover { background: transparent !important; } /* ── 62. Admin eszköztárak (toolbar-ok) ───────────────────────── */ html[data-theme^="modern"] .admin-users-toolbar, html[data-theme^="modern"] .admin-audit-toolbar, html[data-theme^="modern"] .admin-sg-toolbar, html[data-theme^="modern"] .admin-ct-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; padding: 12px; background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); } /* Toolbar input/select/date */ html[data-theme^="modern"] .admin-audit-toolbar select, html[data-theme^="modern"] .admin-audit-toolbar input[type="date"], html[data-theme^="modern"] .admin-audit-toolbar input[type="text"], html[data-theme^="modern"] .admin-users-toolbar select, html[data-theme^="modern"] .admin-users-toolbar input, html[data-theme^="modern"] .admin-sg-toolbar select, html[data-theme^="modern"] .admin-sg-toolbar input, html[data-theme^="modern"] .admin-ct-filter-select { padding: 7px 10px; font-size: 12px; background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-family); color-scheme: light; transition: border-color 150ms ease, box-shadow 150ms ease; } html[data-theme="modern-dark"] .admin-audit-toolbar select, html[data-theme="modern-dark"] .admin-audit-toolbar input[type="date"], html[data-theme="modern-dark"] .admin-audit-toolbar input[type="text"], html[data-theme="modern-dark"] .admin-users-toolbar select, html[data-theme="modern-dark"] .admin-users-toolbar input, html[data-theme="modern-dark"] .admin-sg-toolbar select, html[data-theme="modern-dark"] .admin-sg-toolbar input, html[data-theme="modern-dark"] .admin-ct-filter-select { color-scheme: dark; } html[data-theme^="modern"] .admin-audit-toolbar select:focus, html[data-theme^="modern"] .admin-audit-toolbar input:focus, html[data-theme^="modern"] .admin-users-toolbar select:focus, html[data-theme^="modern"] .admin-users-toolbar input:focus, html[data-theme^="modern"] .admin-ct-filter-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* Export / create gombok */ html[data-theme^="modern"] .admin-audit-export-btn, html[data-theme^="modern"] .admin-save-btn, html[data-theme^="modern"] .admin-ct-create-btn { padding: 7px 14px; font-size: 12px; font-weight: 600; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-family); transition: background 150ms ease; } html[data-theme^="modern"] .admin-audit-export-btn:hover, html[data-theme^="modern"] .admin-save-btn:hover, html[data-theme^="modern"] .admin-ct-create-btn:hover { background: var(--color-primary-hover); } /* ── 63. Admin listák (users, audit, sg, ct, news) ────────────── */ html[data-theme^="modern"] .admin-users-list, html[data-theme^="modern"] .admin-audit-list, html[data-theme^="modern"] .admin-sg-list, html[data-theme^="modern"] .admin-news-list { background: transparent; padding: 0; } html[data-theme^="modern"] .admin-user-item, html[data-theme^="modern"] .admin-audit-item, html[data-theme^="modern"] .admin-sg-item, html[data-theme^="modern"] .admin-ct-poll-item, html[data-theme^="modern"] .admin-news-item { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 8px; transition: background 150ms ease, border-color 150ms ease; } html[data-theme^="modern"] .admin-user-item:hover, html[data-theme^="modern"] .admin-audit-item:hover, html[data-theme^="modern"] .admin-sg-item:hover, html[data-theme^="modern"] .admin-ct-poll-item:hover, html[data-theme^="modern"] .admin-news-item:hover { background: var(--color-surface); border-color: var(--color-border); } html[data-theme="modern-dark"] .admin-user-item:hover, html[data-theme="modern-dark"] .admin-audit-item:hover, html[data-theme="modern-dark"] .admin-sg-item:hover, html[data-theme="modern-dark"] .admin-ct-poll-item:hover, html[data-theme="modern-dark"] .admin-news-item:hover { background: #1F1F1F; } html[data-theme^="modern"] .admin-user-item.locked { border-color: var(--color-error); background: rgba(239, 68, 68, 0.05); } html[data-theme="modern-light"] .admin-user-item.locked { background: rgba(220, 38, 38, 0.05); } /* User sor tipográfia */ html[data-theme^="modern"] .admin-user-main strong { color: var(--color-text); font-weight: 600; font-size: 13px; } html[data-theme^="modern"] .admin-user-meta { color: var(--color-text-secondary); font-size: 12px; } html[data-theme^="modern"] .admin-user-email { color: var(--color-text-muted); font-size: 11px; } /* ── 64. Audit napló elem + action badges ────────────────────── */ html[data-theme^="modern"] .admin-audit-item .audit-time { color: var(--color-text-muted); font-size: 11px; font-family: ui-monospace, 'SF Mono', monospace; } html[data-theme^="modern"] .admin-audit-item .audit-action { color: var(--color-text); font-size: 12px; font-family: ui-monospace, 'SF Mono', monospace; } html[data-theme^="modern"] .admin-audit-item .audit-user { color: var(--color-text-secondary); font-size: 12px; } html[data-theme^="modern"] .admin-audit-item .audit-details { color: var(--color-text-muted); font-size: 11px; } /* Audit category badge-k — paletta ihletett színek */ html[data-theme^="modern"] .audit-badge { padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } html[data-theme^="modern"] .audit-badge-auth { background: rgba(59, 130, 246, 0.15); color: var(--color-primary); } html[data-theme^="modern"] .audit-badge-admin { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); } html[data-theme^="modern"] .audit-badge-content { background: rgba(16, 185, 129, 0.15); color: var(--color-success); } html[data-theme^="modern"] .audit-badge-role { background: rgba(139, 92, 246, 0.15); color: #8B5CF6; } html[data-theme^="modern"] .audit-badge-gdpr { background: rgba(239, 68, 68, 0.15); color: var(--color-error); } html[data-theme^="modern"] .audit-badge-system { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); } /* ── 65. Pagination ─────────────────────────────────────────── */ html[data-theme^="modern"] .admin-audit-pagination { padding: 12px 0; display: flex; align-items: center; gap: 12px; justify-content: center; color: var(--color-text-secondary); font-size: 12px; } html[data-theme^="modern"] .admin-audit-pagination button { padding: 6px 12px; font-size: 12px; background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-family); } html[data-theme^="modern"] .admin-audit-pagination button:hover:not(:disabled) { background: var(--color-primary-highlight); border-color: var(--color-primary); color: var(--color-primary); } html[data-theme^="modern"] .admin-audit-pagination button:disabled { opacity: 0.4; cursor: not-allowed; } /* ── 66. Szerkesztés / törlés akciógombok ────────────────────── */ html[data-theme^="modern"] .admin-edit-btn, html[data-theme^="modern"] .admin-delete-btn { padding: 5px 10px; font-size: 11px; border-radius: var(--radius-sm); font-family: var(--font-family); font-weight: 500; cursor: pointer; border: 1px solid var(--color-border); transition: all 150ms ease; } html[data-theme^="modern"] .admin-edit-btn { background: var(--color-surface); color: var(--color-text); } html[data-theme^="modern"] .admin-edit-btn:hover { background: var(--color-primary-highlight); border-color: var(--color-primary); color: var(--color-primary); } html[data-theme^="modern"] .admin-delete-btn { background: transparent; color: var(--color-error); border-color: var(--color-error); } html[data-theme^="modern"] .admin-delete-btn:hover { background: var(--color-error); color: #fff; } /* ── 67. Tartalom szerkesztő (admin-ct-*) ────────────────────── */ html[data-theme^="modern"] .admin-ct-info { background: var(--color-primary-highlight); border-left: 3px solid var(--color-primary); color: var(--color-text-secondary); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 12px; margin-bottom: 12px; } html[data-theme^="modern"] .admin-ct-poll-question { color: var(--color-text); font-size: 13.5px; font-weight: 500; } html[data-theme^="modern"] .admin-ct-poll-meta { color: var(--color-text-muted); font-size: 11px; } /* ── 68. Javaslat (suggestion) admin statisztika kártyák ─────── */ html[data-theme^="modern"] .admin-sg-stat-card { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 10px 14px; min-width: 90px; text-align: center; } html[data-theme^="modern"] .admin-sg-stat-card.sg-stat-new { border-left: 3px solid var(--color-error); } html[data-theme^="modern"] .admin-sg-stat-card.sg-stat-review { border-left: 3px solid var(--color-warning); } html[data-theme^="modern"] .admin-sg-stat-card.sg-stat-accepted { border-left: 3px solid var(--color-success); } html[data-theme^="modern"] .admin-sg-stat-card.sg-stat-implemented { border-left: 3px solid var(--color-primary); } html[data-theme^="modern"] .admin-sg-stat-card.sg-stat-rejected { border-left: 3px solid var(--color-text-muted); } html[data-theme^="modern"] .admin-sg-stat-num { color: var(--color-text); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } html[data-theme^="modern"] .admin-sg-stat-label { color: var(--color-text-muted); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; } html[data-theme^="modern"] .admin-sg-cat-badge { padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 600; background: var(--color-primary-highlight); color: var(--color-primary); } html[data-theme^="modern"] .admin-sg-date { color: var(--color-text-muted); font-size: 11px; } /* ── 69. Feature flag kártyák ───────────────────────────────── */ html[data-theme^="modern"] .admin-flag-item { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 8px; } html[data-theme^="modern"] .admin-flag-key { color: var(--color-text); font-size: 13px; font-weight: 600; font-family: ui-monospace, 'SF Mono', monospace; } html[data-theme^="modern"] .admin-flag-desc { color: var(--color-text-secondary); font-size: 12px; } html[data-theme^="modern"] .admin-flag-meta { color: var(--color-text-muted); font-size: 11px; } html[data-theme^="modern"] .admin-flag-public-badge { background: var(--color-primary-highlight); color: var(--color-primary); padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 600; } /* ── 70. E-mail napló ────────────────────────────────────────── */ html[data-theme^="modern"] .admin-email-item { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 6px; } html[data-theme^="modern"] .admin-email-subject { color: var(--color-text); font-size: 13px; font-weight: 500; } html[data-theme^="modern"] .admin-email-meta { color: var(--color-text-muted); font-size: 11px; } html[data-theme^="modern"] .admin-email-badge, html[data-theme^="modern"] .admin-email-status-badge { padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 600; } html[data-theme^="modern"] .admin-email-stat-card { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 12px 16px; text-align: center; } /* ── 71. Health check dashboard ──────────────────────────────── */ html[data-theme^="modern"] .admin-health-summary { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } html[data-theme^="modern"] .admin-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } html[data-theme^="modern"] .admin-health-item { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 10px 14px; } html[data-theme^="modern"] .admin-health-item.status-green { border-left: 3px solid var(--color-success); } html[data-theme^="modern"] .admin-health-item.status-yellow { border-left: 3px solid var(--color-warning); } html[data-theme^="modern"] .admin-health-item.status-red { border-left: 3px solid var(--color-error); } html[data-theme^="modern"] .admin-health-commands { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border-light); } /* ── 72. Webhook + API kulcs lista ───────────────────────────── */ html[data-theme^="modern"] .admin-wh-item, html[data-theme^="modern"] .admin-apikey-item { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 8px; } html[data-theme^="modern"] .admin-wh-name, html[data-theme^="modern"] .admin-apikey-name { color: var(--color-text); font-size: 13px; font-weight: 600; } html[data-theme^="modern"] .admin-wh-url, html[data-theme^="modern"] .admin-apikey-key { color: var(--color-text-muted); font-size: 11px; font-family: ui-monospace, 'SF Mono', monospace; } html[data-theme^="modern"] .admin-wh-events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; margin-top: 8px; } html[data-theme^="modern"] .admin-wh-event-checkbox { font-size: 12px; color: var(--color-text-secondary); } /* ── 73. Jogosultság editor ──────────────────────────────────── */ html[data-theme^="modern"] .admin-perm-editor { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 12px; } html[data-theme^="modern"] .admin-perm-table { width: 100%; border-collapse: collapse; font-size: 12px; } html[data-theme^="modern"] .admin-perm-table th { background: var(--color-surface); color: var(--color-text); font-size: 11px; font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--color-border); text-align: center; position: sticky; top: 0; } html[data-theme^="modern"] .admin-perm-table td { padding: 6px; border-bottom: 1px solid var(--color-border-light); color: var(--color-text); } html[data-theme^="modern"] .admin-perm-table tr:hover td { background: var(--color-surface); } html[data-theme="modern-dark"] .admin-perm-table tr:hover td { background: #1F1F1F; } html[data-theme^="modern"] .admin-perm-email-hint { color: var(--color-text-muted); font-size: 10px; } /* ── 74. Role badge-k (admin / foadmin / superadmin / lakos) ── */ html[data-theme^="modern"] .role-badge, html[data-theme^="modern"] .admin-role-badge { padding: 2px 10px; border-radius: 99px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } html[data-theme^="modern"] .role-badge.role-admin, html[data-theme^="modern"] .admin-role-badge.role-admin { background: var(--color-primary-highlight); color: var(--color-primary); } html[data-theme^="modern"] .role-badge.role-foadmin, html[data-theme^="modern"] .admin-role-badge.role-foadmin { background: rgba(245, 158, 11, 0.18); color: var(--color-warning); } html[data-theme^="modern"] .role-badge.role-superadmin, html[data-theme^="modern"] .admin-role-badge.role-superadmin { background: rgba(239, 68, 68, 0.18); color: var(--color-error); } html[data-theme^="modern"] .role-badge.role-lakos, html[data-theme^="modern"] .admin-role-badge.role-lakos { background: rgba(16, 185, 129, 0.15); color: var(--color-success); } /* ── 75. Statisztika / diagram admin kártyák ─────────────────── */ html[data-theme^="modern"] .admin-stats-card, html[data-theme^="modern"] .admin-stat-block { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 14px 16px; } html[data-theme^="modern"] .admin-stats-num { color: var(--color-text); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } html[data-theme^="modern"] .admin-stats-label { color: var(--color-text-muted); font-size: 11px; font-weight: 500; } /* ── 76. FAB (mobil admin gomb) ──────────────────────────────── */ html[data-theme^="modern"] .admin-fab { background: var(--color-primary); color: #fff; border: none; box-shadow: var(--shadow-md); } html[data-theme^="modern"] .admin-fab:hover { background: var(--color-primary-hover); } html[data-theme^="modern"] .admin-fab-popup { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } /* ══════════════════════════════════════════════════════════════ * C3 FINOMÍTÁS — A11y fókusz-gyűrűk egységesítése Modern skinben * Cél: billentyűzettel navigálóknak minden interaktív elemen * konzisztens, jól látható fókusz jelzés (`focus-visible`). * * Design token (spec 11.5): * focus ring = 0 0 0 3px rgba(37, 99, 235, 0.15) * border/outline szín = --color-primary * * `:focus-visible` — csak billentyűzetes fókusznál jelenik meg, * egérrel kattintva nem zavaró. * ══════════════════════════════════════════════════════════════ */ /* ── 77. Általános :focus-visible szabály ─────────────────────── */ /* Minden olyan Modern skin-en belüli interaktív elem, ami még nem kapott explicit fókusz gyűrűt a korábbi szakaszokban. */ html[data-theme^="modern"] a:focus-visible, html[data-theme^="modern"] button:focus-visible, html[data-theme^="modern"] input:focus-visible, html[data-theme^="modern"] select:focus-visible, html[data-theme^="modern"] textarea:focus-visible, html[data-theme^="modern"] [role="button"]:focus-visible, html[data-theme^="modern"] [role="tab"]:focus-visible, html[data-theme^="modern"] [role="menuitem"]:focus-visible, html[data-theme^="modern"] [role="option"]:focus-visible, html[data-theme^="modern"] [role="switch"]:focus-visible, html[data-theme^="modern"] [tabindex]:focus-visible, html[data-theme^="modern"] [data-action]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); border-radius: var(--radius-sm); } /* Form-mezőknél a border is primary szín (nem csak outline), a korábbi explicit fókusz szabályok mintájára. Ezek felülírják a fenti általános szabályt ott, ahol specifikus. */ html[data-theme^="modern"] input[type="text"]:focus-visible, html[data-theme^="modern"] input[type="email"]:focus-visible, html[data-theme^="modern"] input[type="password"]:focus-visible, html[data-theme^="modern"] input[type="number"]:focus-visible, html[data-theme^="modern"] input[type="date"]:focus-visible, html[data-theme^="modern"] input[type="search"]:focus-visible, html[data-theme^="modern"] input[type="url"]:focus-visible, html[data-theme^="modern"] input[type="tel"]:focus-visible, html[data-theme^="modern"] textarea:focus-visible, html[data-theme^="modern"] select:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); border-radius: var(--radius-sm); } /* ── 78. :focus (egér nélküli fallback) — böngészők, amelyek ───── nem támogatják a :focus-visible-t. Szándékosan finomabb, mint a :focus-visible, hogy mouse click után ne legyen zavaró. Modern böngészőkben ez nem fut, mert a :focus-visible felülírja. */ html[data-theme^="modern"] button:focus:not(:focus-visible), html[data-theme^="modern"] [data-action]:focus:not(:focus-visible), html[data-theme^="modern"] [role="button"]:focus:not(:focus-visible), html[data-theme^="modern"] [role="tab"]:focus:not(:focus-visible), html[data-theme^="modern"] a:focus:not(:focus-visible) { outline: none; box-shadow: none; } /* ── 79. Sidebar nav + header gombok külön fókusz szabály ────── */ html[data-theme^="modern"] .sidebar-nav-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; /* belső offset, nem nyújtja az elemet */ box-shadow: none; background: var(--color-surface-alt); } html[data-theme="modern-dark"] .sidebar-nav-item:focus-visible { background: #1F1F1F; } html[data-theme^="modern"] .header-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } html[data-theme^="modern"] .sidebar-user-menu-btn:focus-visible, html[data-theme^="modern"] .sidebar-user:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } /* ── 80. Csempe action gombok ─────────────────────────────────── */ html[data-theme^="modern"] .tile-header-actions button:focus-visible, html[data-theme^="modern"] .tile-pin-btn:focus-visible, html[data-theme^="modern"] .tile-resize-btn:focus-visible, html[data-theme^="modern"] .tile-fullscreen-btn:focus-visible, html[data-theme^="modern"] .footer-icon-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* ── 81. Téma választó, nyelvválasztó, tab-szerű gombok ──────── */ html[data-theme^="modern"] .theme-option:focus-visible, html[data-theme^="modern"] .lang-option:focus-visible, html[data-theme^="modern"] .auth-tab:focus-visible, html[data-theme^="modern"] .admin-panel-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15); } /* ── 82. Toggle switch-ek (beállítások, push, sound) ─────────── */ html[data-theme^="modern"] .toggle-switch input:focus-visible + .toggle-slider, html[data-theme^="modern"] .push-toggle-switch:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 99px; } /* ── 83. Skip link — billentyűzettel ugrás a fő tartalomhoz ──── */ html[data-theme^="modern"] .skip-link { position: fixed; top: -40px; left: 8px; padding: 8px 16px; background: var(--color-primary); color: #fff; text-decoration: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; z-index: 10001; transition: top 150ms ease; } html[data-theme^="modern"] .skip-link:focus { top: 8px; outline: 2px solid #fff; outline-offset: 2px; } /* ── 84. outline: none felülírások kikapcsolása ──────────────── */ /* Ha a dashboard.css-ben `outline: none` szerepel specifikus elemen, azt biztosan vissza akarjuk állítani billentyűzetes fókuszkor. */ html[data-theme^="modern"] *:focus-visible { /* alapértelmezés — akkor sem teljesen vesszük el a fókuszt, ha egy specifikus szabály outline: none-t tett volna. */ outline-style: solid; } /* Kivétel: form-mezőknél a border adja a fókusz jelzést, nem outline */ html[data-theme^="modern"] input:focus-visible, html[data-theme^="modern"] textarea:focus-visible, html[data-theme^="modern"] select:focus-visible { outline-style: none; } /* ══════════════════════════════════════════════════════════════ * C4 FINOMÍTÁS — Mobile breakpoint-ok Modern skinben * Cél: touch-barát padding + méretek, paneleken 100% szélesség, * olvashatóság, WCAG 44×44 minimum touch target. * * Breakpoint-ok: * - <=768px: tablet + mobil * - <=480px: kis mobil * ══════════════════════════════════════════════════════════════ */ /* ── 85. TABLET + MOBIL ≤ 768px ───────────────────────────────── */ @media (max-width: 768px) { /* ── Sidebar kompaktabb ──────────────────────────────────── */ html[data-theme^="modern"] .sidebar { width: 220px; } html[data-theme^="modern"] .main { margin-left: 220px; width: calc(100vw - 220px); max-width: calc(100vw - 220px); } html[data-theme^="modern"] .sidebar-header { height: 60px; padding: 0 16px; } html[data-theme^="modern"] .sidebar-header-icon { width: 32px; height: 32px; } html[data-theme^="modern"] .sidebar-header-icon svg { width: 18px; height: 18px; } html[data-theme^="modern"] .sidebar-header-title { font-size: 15px; } html[data-theme^="modern"] .sidebar-content { padding: 10px 8px; } html[data-theme^="modern"] .sidebar-nav-item { padding: 10px 10px; /* magasabb touch target: 40+ px */ font-size: 13px; gap: 10px; } /* ── Header kompaktabb ────────────────────────────────────── */ html[data-theme^="modern"] .header { height: 60px; padding: 0 16px; } html[data-theme^="modern"] .header::after { left: 16px; right: 16px; } html[data-theme^="modern"] .header-title { font-size: 15px; } html[data-theme^="modern"] .header-subtitle { font-size: 11px; } /* Asszisztens gomb kompaktabb (csak avatar + „AI" label) */ html[data-theme^="modern"] .assistant-header-btn { padding: 2px 10px 2px 2px; } html[data-theme^="modern"] .assistant-header-avatar { width: 32px; height: 32px; } html[data-theme^="modern"] .assistant-header-text { display: none; /* csak ikon marad mobilon */ } /* Header gomb touch target növelés (WCAG 44×44) */ html[data-theme^="modern"] .header-btn { width: 40px; height: 40px; } /* ── Tartalom terület ─────────────────────────────────────── */ html[data-theme^="modern"] .content { padding: 12px; } /* ── Csempe padding mobilon kisebb ────────────────────────── */ html[data-theme^="modern"] .tile-header { padding: 12px 14px 10px; } html[data-theme^="modern"] .tile-header::after { left: 14px; right: 14px; } html[data-theme^="modern"] .tile-body, html[data-theme^="modern"] .tile-body-wrapper { padding: 14px; } html[data-theme^="modern"] .tile-footer { padding: 8px 14px; background-size: calc(100% - 28px) 1px; } /* Csempe ikonok mobilon marad 32×32, olvasható maradjon */ html[data-theme^="modern"] .tile-title-icon { width: 30px; height: 30px; } /* ── KPI kártyák mobilon 1 oszlop ha szűk ─────────────────── */ html[data-theme^="modern"] .kpi-grid { gap: 10px; } /* ── Settings / notif / assistant panel 100% mobilon ──────── */ html[data-theme^="modern"] .settings-panel, html[data-theme^="modern"] .notif-panel, html[data-theme^="modern"] .assistant-panel { width: calc(100vw - 16px); max-width: 400px; right: 8px; left: auto; } html[data-theme^="modern"] .settings-panel { /* Jobboldali slide-in továbbra is 100% magasság */ width: 100vw; max-width: 100vw; right: 0; left: 0; } /* ── Login oldal mobilon ──────────────────────────────────── */ html[data-theme^="modern"] .auth-card { max-width: 100%; padding: 24px 20px 28px; border-radius: var(--radius-md); } html[data-theme^="modern"] #page-auth { padding: 8px; } /* Auth tabok touch target: 9px padding → 11px */ html[data-theme^="modern"] .auth-tab { padding: 11px; } /* Nyelvválasztó a login-on — kicsi, kompakt */ html[data-theme^="modern"] .auth-lang-select { font-size: 11px; padding: 5px 8px; } /* ── Admin panel táblák mobilon ───────────────────────────── */ html[data-theme^="modern"] .admin-panel-container { padding: 10px; } html[data-theme^="modern"] .admin-panel-tab { padding: 10px 12px; font-size: 12px; } html[data-theme^="modern"] .admin-user-item, html[data-theme^="modern"] .admin-audit-item, html[data-theme^="modern"] .admin-sg-item, html[data-theme^="modern"] .admin-news-item, html[data-theme^="modern"] .admin-ct-poll-item { padding: 10px 12px; flex-wrap: wrap; } html[data-theme^="modern"] .admin-audit-toolbar { padding: 8px; flex-direction: column; align-items: stretch; } html[data-theme^="modern"] .admin-audit-toolbar select, html[data-theme^="modern"] .admin-audit-toolbar input { width: 100%; } html[data-theme^="modern"] .admin-perm-table { font-size: 11px; } html[data-theme^="modern"] .admin-perm-table th, html[data-theme^="modern"] .admin-perm-table td { padding: 5px 4px; } /* ── Profil oldal ─────────────────────────────────────────── */ html[data-theme^="modern"] .profile-input, html[data-theme^="modern"] .profile-textarea, html[data-theme^="modern"] .admin-form-input, html[data-theme^="modern"] .admin-form-select, html[data-theme^="modern"] .admin-form-textarea { padding: 10px 12px; /* touch target 40+ px */ font-size: 14px; } /* ── Profil gombok 44px min-height ───────────────────────── */ html[data-theme^="modern"] .profile-btn, html[data-theme^="modern"] .auth-submit-btn, html[data-theme^="modern"] .btn-primary, html[data-theme^="modern"] .btn-secondary { min-height: 44px; padding: 12px 18px; } /* ── Csempe action gombok touch target ───────────────────── */ html[data-theme^="modern"] .tile-header-actions button, html[data-theme^="modern"] .tile-pin-btn, html[data-theme^="modern"] .tile-resize-btn, html[data-theme^="modern"] .tile-fullscreen-btn, html[data-theme^="modern"] .footer-icon-btn, html[data-theme^="modern"] .admin-edit-btn, html[data-theme^="modern"] .admin-delete-btn { min-width: 32px; min-height: 32px; } /* ── Ticker kompaktabb ────────────────────────────────────── */ html[data-theme^="modern"] .news-ticker { font-size: 12px; } /* ── Dropdown szelektorok full-width mobilon ──────────────── */ html[data-theme^="modern"] .dropdown-selector, html[data-theme^="modern"] .mw-popup-global { max-width: calc(100vw - 24px); } /* ── Splash logó kisebb mobilon ──────────────────────────── */ html[data-theme^="modern"] .splash-logo { max-width: 220px; width: 65vw; } } /* ── 86. KIS MOBIL ≤ 480px ────────────────────────────────────── */ @media (max-width: 480px) { /* ── Sidebar még kompaktabb (vagy egyáltalán eltűnhet mobile admin UI-nál; a spec 14.5-ben említi, de GridStack layout miatt a sidebar marad) ──────────────────────────────── */ html[data-theme^="modern"] .sidebar { width: 68px; /* csak ikonok, nav-label elrejtve */ } html[data-theme^="modern"] .main { margin-left: 68px; width: calc(100vw - 68px); max-width: calc(100vw - 68px); } /* Nav-label szöveg elrejtése */ html[data-theme^="modern"] .sidebar-nav-item { justify-content: center; padding: 12px 0; } html[data-theme^="modern"] .sidebar-nav-item span, html[data-theme^="modern"] .sidebar-nav-item .nav-label-multiline { display: none; } html[data-theme^="modern"] .sidebar-section-title { display: none; } /* Sidebar header csak ikon */ html[data-theme^="modern"] .sidebar-header-text { display: none; } html[data-theme^="modern"] .sidebar-header { justify-content: center; padding: 0 8px; } /* Sidebar footer csak avatár */ html[data-theme^="modern"] .sidebar-user-info { display: none; } html[data-theme^="modern"] .sidebar-user-menu-btn { display: none; } html[data-theme^="modern"] .sidebar-user { justify-content: center; } html[data-theme^="modern"] .sidebar-branding { display: none; /* kis mobilon helytakarítás */ } /* Aktív nav csík jobb oldalon, nem balon (sidebar szűk) */ html[data-theme^="modern"] .sidebar-nav-item.active::before { left: auto; right: -8px; } /* ── Csempe padding tovább csökken ────────────────────────── */ html[data-theme^="modern"] .content { padding: 8px; } html[data-theme^="modern"] .tile-header { padding: 10px 12px 8px; } html[data-theme^="modern"] .tile-header::after { left: 12px; right: 12px; } html[data-theme^="modern"] .tile-body, html[data-theme^="modern"] .tile-body-wrapper { padding: 12px; } /* Csempe cím kisebb */ html[data-theme^="modern"] .tile-header .tile-title { font-size: 12.5px; } /* ── Header kompaktabb ────────────────────────────────────── */ html[data-theme^="modern"] .header { padding: 0 12px; } html[data-theme^="modern"] .header::after { left: 12px; right: 12px; } /* Asszisztens gomb teljesen eltűnik kis mobilon */ html[data-theme^="modern"] .assistant-header-btn { display: none; } /* Időjárás hőmérséklet (.weather-temp) marad az eredeti 16px — a Modern skin nem írja felül, mert a kompakt sorban nem férne el. */ /* ── KPI érték kisebb ─────────────────────────────────────── */ html[data-theme^="modern"] .kpi-value { font-size: 18px; } /* ── Login ≤ 480px ────────────────────────────────────────── */ html[data-theme^="modern"] .auth-card { padding: 20px 16px 24px; } html[data-theme^="modern"] .auth-header-logo { max-width: 160px; } html[data-theme^="modern"] .auth-title { font-size: 18px; } /* ── Modal és admin tartalom mobil-optimalizálás ──────────── */ html[data-theme^="modern"] .news-admin-content { margin: 8px; max-height: calc(100vh - 16px); } } /* ── 87. Nagyon nagy képernyők (≥ 1920px) finomítás ─────────── */ @media (min-width: 1920px) { html[data-theme^="modern"] .content { padding: 24px; } html[data-theme^="modern"] .tile-header { padding: 16px 20px 14px; } html[data-theme^="modern"] .tile-body, html[data-theme^="modern"] .tile-body-wrapper { padding: 20px; } } /* ══════════════════════════════════════════════════════════════ * HOTFIX — Admin Tartalomszerkesztő kártyák + Labor editor * A .admin-ct-card, .admin-ct-create-btn, .admin-ct-close-btn, * .admin-dev-list-item és .admin-dev-list-edit/apps/del osztályok * még a C2-ben nem voltak lefedve — hardkódolt rgba(30,41,59) / * #60a5fa / #a78bfa / #f87171 színek maradtak. Most Modern paletta. * ══════════════════════════════════════════════════════════════ */ /* ── Tartalomszerkesztő nagy kártyák (4 opció: részvétel, hírek, */ /* fejlesztések, labor) ────────────────────────────────────────── */ /* v942: explicit transparent — defense-in-depth a v929 catch-all (2554. sor) regresszió-megelőzésére. A .admin-ct-cards (TÖBBES, "S" a végén!) grid container szürke hátteret kapott a [class*="-card"] catch-all-tól, mert a :not(.admin-ct-card) (egyes) NEM zárta ki. Most kétrétegű védelem: (1) catch-all :not(.admin-ct-cards) exclusion (2554-es sor), (2) explicit transparent itt. A kártyák KÖZÖTTI tér tisztán FEHÉR. */ html[data-theme^="modern"] .admin-ct-cards { gap: 12px; background: transparent !important; } /* v942: GYÖKÉROK FIX + visszaállás a v940-es fehér kártya mintára. A v941 (kártya = surface) felesleges volt — a valódi probléma: a v929 catch-all 2554. sora a .admin-ct-cards (TÖBBES, S a végén!) grid container-t hibásan megfogta és szürke (surface-alt #F1F3F5) hátteret adott. Most a catch-all `:not(.admin-ct-cards)` exclusion-t kapott + explicit transparent !important a .admin-ct-cards-re. A kártya VISSZAÁLL a v940-es minta szerint: - background: var(--color-bg) — FEHÉR (#FFFFFF) - border: var(--color-border-light) — alig látszó kontúr - box-shadow: none — nincs árnyék - Hover: var(--color-surface) + primary border + emelkedés */ html[data-theme^="modern"] .admin-ct-card { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: 20px 16px; box-shadow: none; transition: all 150ms ease; } html[data-theme^="modern"] .admin-ct-card:hover { background: var(--color-surface); border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); } /* A .admin-ct-card-icon szín-differenciációját (news=sárga, developments= narancs, livinglab=lila, participation=lila default) az admin.js inline style-ban adja, kártyánként különböző értékekkel. A Modern skinben NEM írjuk felül — így a Klasszikus és Modern skin egységes színes ikonokat kap. Csak a méret/radius marad a spec 3.5 szerint. */ html[data-theme^="modern"] .admin-ct-card-icon { width: 44px; height: 44px; border-radius: 10px; } html[data-theme^="modern"] .admin-ct-card-title { color: var(--color-text); font-size: 13px; font-weight: 600; } html[data-theme^="modern"] .admin-ct-card-desc { color: var(--color-text-muted); font-size: 11px; line-height: 1.4; } html[data-theme^="modern"] .admin-ct-section-title { color: var(--color-text); font-size: 13px; font-weight: 500; } /* ── Tartalomszerkesztő „× Bezárás" gomb ──────────────────────── */ html[data-theme^="modern"] .admin-ct-close-btn { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 5px 12px; font-size: 12px; transition: all 150ms ease; } html[data-theme^="modern"] .admin-ct-close-btn:hover { background: var(--color-error); color: #fff; border-color: var(--color-error); } /* ── „+ Új projekt felvétele" gomb (create-btn) ──────────────── */ html[data-theme^="modern"] .admin-ct-create-btn { background: var(--color-primary); border: none; color: #fff; padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; } html[data-theme^="modern"] .admin-ct-create-btn:hover { background: var(--color-primary-hover); } /* ── Fejlesztési projektek / Innovációs Labor lista ──────────── */ html[data-theme^="modern"] .admin-dev-list-item { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 12px 16px; } html[data-theme^="modern"] .admin-dev-list-item:hover { background: var(--color-surface); border-color: var(--color-border); } html[data-theme="modern-dark"] .admin-dev-list-item:hover { background: #1F1F1F; } html[data-theme^="modern"] .admin-dev-list-title { color: var(--color-text); font-size: 14px; font-weight: 600; } html[data-theme^="modern"] .admin-dev-list-meta { color: var(--color-text-secondary); font-size: 12px; } /* Szerkesztés gomb */ html[data-theme^="modern"] .admin-dev-list-edit { background: var(--color-primary-highlight); border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: var(--radius-sm); padding: 6px 14px; font-size: 12px; font-weight: 500; } html[data-theme^="modern"] .admin-dev-list-edit:hover { background: var(--color-primary); color: #fff; } /* Jelentkezések gomb — lila elérhető marad a megkülönböztetésért */ html[data-theme^="modern"] .admin-dev-list-apps { background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3); color: #8b5cf6; border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; font-weight: 500; } html[data-theme^="modern"] .admin-dev-list-apps:hover { background: rgba(139, 92, 246, 0.22); } html[data-theme="modern-light"] .admin-dev-list-apps { background: rgba(124, 58, 237, 0.1); border-color: rgba(124, 58, 237, 0.35); color: #7c3aed; } html[data-theme="modern-light"] .admin-dev-list-apps:hover { background: rgba(124, 58, 237, 0.2); } html[data-theme^="modern"] .admin-dev-list-apps.admin-dev-list-apps-open { background: rgba(139, 92, 246, 0.28); color: #a78bfa; } /* Törlés (kuka) gomb */ html[data-theme^="modern"] .admin-dev-list-del { background: transparent; border: 1px solid var(--color-error); color: var(--color-error); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 12px; } html[data-theme^="modern"] .admin-dev-list-del:hover { background: var(--color-error); color: #fff; } /* ← Vissza gomb a szerkesztő modálban */ html[data-theme^="modern"] .admin-dev-back-btn { color: var(--color-primary); font-size: 13px; font-weight: 500; } html[data-theme^="modern"] .admin-dev-back-btn:hover { color: var(--color-primary-hover); text-decoration: underline; } /* ── Tartalomszerkesztő fejléc ("Tartalomszerkesztő" + "Statisztika" tabok) */ html[data-theme^="modern"] .admin-ct-info { background: var(--color-primary-highlight); border-left: 3px solid var(--color-primary); color: var(--color-text-secondary); } /* ══════════════════════════════════════════════════════════════ * HOTFIX — Export gombok Modern skinben (különösen világosban) * .admin-action-btn, .sg-export-btn, .rp-export-btn rgba alapú * halvány kék/fehér hátterei Modern-világos skinben szinte * láthatatlanok voltak. * ══════════════════════════════════════════════════════════════ */ /* ── Közös admin action / export gombok ──────────────────────── */ html[data-theme^="modern"] .admin-action-btn, html[data-theme^="modern"] .sg-export-btn, html[data-theme^="modern"] .rp-export-btn { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 6px 14px; font-size: 12px; font-weight: 600; font-family: var(--font-family); transition: background 150ms ease; cursor: pointer; } html[data-theme^="modern"] .admin-action-btn:hover, html[data-theme^="modern"] .sg-export-btn:hover, html[data-theme^="modern"] .rp-export-btn:hover { background: var(--color-primary-hover); } /* ── Admin badge-k (2fa, GDPR státusz stb.) ──────────────────── */ html[data-theme^="modern"] .admin-2fa-badge { background: rgba(16, 185, 129, 0.18); color: var(--color-success); border: none; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 600; } html[data-theme="modern-light"] .admin-2fa-badge { background: rgba(5, 150, 105, 0.12); color: var(--color-success); } /* ══════════════════════════════════════════════════════════════ * HOTFIX — Modern skin kártyák árnyékolása * A kártya-jellegű, önálló vizuális egységek (statisztika, KPI, * health, email stat, profile stat stb.) flat surface-alt bg-et * kaptak box-shadow nélkül — Modern-világos fehér háttéren szinte * eltűntek. Most shadow-sm alap + shadow-md hover. * * NEM módosítjuk a lista-elemeket (.admin-user-item, .admin-audit- * item stb.), mert ezek egymás után, border-light elválasztóval * jelennek meg — nincs szükségük emelésre. * ══════════════════════════════════════════════════════════════ */ html[data-theme^="modern"] .kpi-card, html[data-theme^="modern"] .profile-stat-card, html[data-theme^="modern"] .admin-sg-stat-card, html[data-theme^="modern"] .admin-stats-card, html[data-theme^="modern"] .admin-stat-block, html[data-theme^="modern"] .admin-email-stat-card, html[data-theme^="modern"] .admin-health-item { box-shadow: var(--shadow-sm); } html[data-theme^="modern"] .kpi-card:hover, html[data-theme^="modern"] .profile-stat-card:hover, html[data-theme^="modern"] .admin-sg-stat-card:hover, html[data-theme^="modern"] .admin-stats-card:hover, html[data-theme^="modern"] .admin-health-item:hover { box-shadow: var(--shadow-md); } /* ── Footer óra kijelző (Modern skinben tisztán, monospace-hez közel) */ .footer-clock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--color-text-muted, var(--text-muted)); } .footer-clock svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; } html[data-theme^="modern"] .footer-clock { color: var(--color-text-secondary); } html[data-theme^="modern"] .footer-clock svg { color: var(--color-text-secondary); } /* ══════════════════════════════════════════════════════════════ * 88. PREFERS-REDUCED-MOTION — Modern skin animációk kikapcsolása * A user OS-szintjén beállítható a kevesebb animáció kérése * (Windows: Ease of Access → Animations; macOS: Accessibility → * Display → Reduce Motion; iOS Settings → Accessibility → Motion). * WCAG 2.3.3 Animation from Interactions. * ══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html[data-theme^="modern"] *, html[data-theme^="modern"] *::before, html[data-theme^="modern"] *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; scroll-behavior: auto; } /* Splash sziluett pulzálás és felcsúszás azonnali */ html[data-theme^="modern"] .splash-silhouette .sil-tile { animation: none; opacity: 0.2; } html[data-theme^="modern"] .splash-logo { animation: none; opacity: 1; transform: none; } /* .source-dot pulzálás megáll */ html[data-theme^="modern"] .source-dot { animation: none; } /* Csempe hover transform kikapcs */ html[data-theme^="modern"] .admin-ct-card:hover, html[data-theme^="modern"] .tile-card:hover { transform: none; } /* v622: news-ticker KIVÉTEL — a görgő szöveg UX szempontból tartalom megjelenítés, nem dekoratív animáció. A reduced-motion nem szabad hogy leállítsa. Visszaállítjuk az eredeti duration-t. */ html[data-theme^="modern"] .news-ticker-content { animation-duration: var(--ticker-duration, 60s) !important; animation-iteration-count: infinite !important; } } /* ══════════════════════════════════════════════════════════════ * 89. CATCH-ALL — Modern-világos globális rgba(255,*) áthidalás * A dashboard.css-ben 362 osztály használ fehér rgba hátteret * amelyre nem írtunk explicit Modern override-ot. Modern-világos * skinben ezek láthatatlanok a fehér fő háttéren. * * Ez egy védelmi háló: közös osztály-prefixek (admin-*, gov-*, * env-*, battanet-*, ct-*, dev-*, lab-*, evt-*, cf-*, rp-*, sg-*, * gp-*) alatti elemeket megjelöljük egy finom surface szín- * váltással, ahol a specifikus szabály nincs. * * NEM minden egyes osztályt fedjünk le: csak a „card-szerű", * „item-szerű", „panel-szerű" minta. * ══════════════════════════════════════════════════════════════ */ @supports (background-color: rgb(from white r g b / 0.05)) { /* Modern-CSS-t támogató böngészőkben: egyelőre passz */ } /* Egyszerűbb megközelítés — a közös admin/domain prefixek alatti elemek, amik nem kaptak explicit szabályt */ html[data-theme="modern-light"] [class*="-item"]:not([class*="nav-item"]):not([class*="action-item"]):not([class*="news-item"]):not([class*="notif-item"]), html[data-theme="modern-light"] [class*="-card"]:not(.theme-option-swatch):not(.admin-ct-card):not(.kpi-card):not(.profile-stat-card), html[data-theme="modern-light"] [class*="-panel"]:not(.notif-panel):not(.assistant-panel):not(.settings-panel):not(.auth-card) { /* Finom fallback: ha nincs explicit bg, akkor surface-alt színt kap. Az :not() kivételek azokat tartalmazzák, amelyekre már van explicit Modern szabály. */ } /* Konkrét, prefix-alapú fallback — admin-*, gov-*, env-*, ct-* */ html[data-theme="modern-light"] .admin-ct-tab, html[data-theme="modern-light"] .admin-ct-back-btn, html[data-theme="modern-light"] .admin-dev-icon-btn, html[data-theme="modern-light"] .admin-dev-feed-toggle, html[data-theme="modern-light"] .admin-dev-doc-row, html[data-theme="modern-light"] .admin-dev-gantt-row, html[data-theme="modern-light"] .admin-lab-icon-btn, html[data-theme="modern-light"] .admin-lab-gantt-row, html[data-theme="modern-light"] .admin-content-item, html[data-theme="modern-light"] .admin-content-category { background: var(--color-surface-alt); color: var(--color-text); } html[data-theme="modern-light"] .admin-ct-back-btn, html[data-theme="modern-light"] .admin-dev-icon-btn, html[data-theme="modern-light"] .admin-lab-icon-btn { border: 1px solid var(--color-border); } html[data-theme="modern-light"] .admin-ct-back-btn:hover, html[data-theme="modern-light"] .admin-dev-icon-btn:hover, html[data-theme="modern-light"] .admin-lab-icon-btn:hover { background: var(--color-primary-highlight); border-color: var(--color-primary); color: var(--color-primary); } /* Governance (gov-*) panel + results */ html[data-theme="modern-light"] .gp-poll-card, html[data-theme="modern-light"] .gp-proposal-card, html[data-theme="modern-light"] .gp-budget-card, html[data-theme="modern-light"] .gp-result-bar-wrap { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); color: var(--color-text); } /* Crosswalk + SXR + transit panelek — közös .dropdown-selector-en kívül */ html[data-theme="modern-light"] .crosswalk-info-panel, html[data-theme="modern-light"] .sxr-info-panel, html[data-theme="modern-light"] .transit-info-panel { background: var(--color-surface-alt); color: var(--color-text); } /* Reports, suggestions panelek */ html[data-theme="modern-light"] .rp-comment-item, html[data-theme="modern-light"] .rp-response-item, html[data-theme="modern-light"] .sg-comment-item, html[data-theme="modern-light"] .sg-response-item { background: var(--color-surface-alt); color: var(--color-text); } /* Admin Tartalomszerkesztő — Események editor (Modern skinek, v717) */ /* Az alap dashboard.css explicit #e2e8f0 színt ad a feed-toggle checkbox label-re, ami fehér szöveg fehér háttéren a Modern-világosban — felülírás. */ html[data-theme="modern-light"] .admin-dev-feed-toggle .auth-checkbox-label, html[data-theme="modern-light"] .admin-dev-feed-toggle .auth-checkbox-label span { color: var(--color-text); } /* Új admin-events-* osztályok: secondary toolbar gomb + cover-remove + delete */ html[data-theme="modern-light"] .admin-events-toolbar-btn-secondary { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); } html[data-theme="modern-light"] .admin-events-toolbar-btn-secondary:hover { background: var(--color-primary-highlight); border-color: var(--color-primary); color: var(--color-primary); } html[data-theme="modern-light"] .admin-events-cover-remove { background: #fef2f2; color: #b91c1c; border: 1px solid rgba(220, 38, 38, 0.3); } html[data-theme="modern-light"] .admin-events-cover-remove:hover { background: #fee2e2; } html[data-theme="modern-light"] .admin-events-delete-btn { background: #dc2626; color: #ffffff; } html[data-theme="modern-light"] .admin-events-delete-btn:hover { background: #b91c1c; } /* Esemény szerkesztő — élő előnézet kártya Modern-világosban (a dashboard.css alap rgba(15,23,42,0.6) sötétkék háttere fehér háttéren rossz) */ html[data-theme="modern-light"] .admin-dev-preview-container, html[data-theme="modern-light"] .admin-events-preview-card { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text); } html[data-theme="modern-light"] .admin-events-preview-title { color: var(--color-text); } html[data-theme="modern-light"] .admin-events-preview-meta, html[data-theme="modern-light"] .admin-events-preview-attach { color: var(--color-text-secondary); } html[data-theme="modern-light"] .admin-events-preview-desc { color: var(--color-text); } html[data-theme="modern-light"] .admin-events-preview-status-badge { background: rgba(100, 116, 139, 0.15); color: var(--color-text-secondary); } html[data-theme="modern-light"] .admin-events-preview-url a { color: var(--color-primary); } /* ── Események csempe (events-calendar) — Modern skinek (v722) ──────── A dashboard.css alap szabályai sötét rgba/hex hátterekre épülnek (#0f172a popover, rgba(255,255,255,0.02) detail card), ami Modern-világosban olvashatatlan, Modern-sötétben pedig hideg-kék tónussal ütközik a Modern alap #111111 hátterével. */ /* Day popover ("+N további" floating overlay) — mindkét Modern skin */ html[data-theme^="modern"] .evt-day-popover { background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); } html[data-theme^="modern"] .evt-day-popover-header { background: var(--color-surface-alt); border-bottom-color: var(--color-border); } html[data-theme^="modern"] .evt-day-popover-title { color: var(--color-text); } html[data-theme^="modern"] .evt-day-popover-count { background: var(--color-border-light); color: var(--color-text-secondary); } html[data-theme^="modern"] .evt-day-popover-close { color: var(--color-text-secondary); } html[data-theme^="modern"] .evt-day-popover-close:hover { color: var(--color-text); } html[data-theme^="modern"] .evt-day-popover-item { color: var(--color-text); } html[data-theme^="modern"] .evt-day-popover-item:hover { background: var(--color-surface-alt); } html[data-theme^="modern"] .evt-day-popover-time, html[data-theme^="modern"] .evt-day-popover-loc { color: var(--color-text-secondary); } /* Esemény részletes panel (detail-card és belső elemei) */ html[data-theme^="modern"] .evt-detail-back { background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-text); } html[data-theme^="modern"] .evt-detail-back:hover { background: var(--color-primary-highlight); border-color: var(--color-primary); color: var(--color-primary); } html[data-theme^="modern"] .evt-detail-date, html[data-theme^="modern"] .evt-detail-title { color: var(--color-text); } html[data-theme^="modern"] .evt-detail-card { background: var(--color-surface-alt); border: 1px solid var(--color-border); } html[data-theme^="modern"] .evt-detail-info-item { background: var(--color-surface); border: 1px solid var(--color-border-light); } html[data-theme^="modern"] .evt-detail-info-label { color: var(--color-text-secondary); } html[data-theme^="modern"] .evt-detail-info-item > span:last-child { color: var(--color-text); } html[data-theme^="modern"] .evt-detail-doc-item { color: var(--color-text-secondary); } html[data-theme^="modern"] .evt-detail-doc-item:hover { background: var(--color-primary-highlight); color: var(--color-text); } /* Reminder szekció + checkbox label */ html[data-theme^="modern"] .evt-reminder-section { background: var(--color-surface); border: 1px solid var(--color-border-light); } html[data-theme="modern-light"] .evt-reminder-title, html[data-theme="modern-light"] .evt-reminder-desc, html[data-theme="modern-light"] .evt-reminder-status, html[data-theme="modern-light"] .evt-reminder-option { color: var(--color-text); } /* v724: Naptár kategória szűrő chip-sor — Modern skinek */ html[data-theme^="modern"] .evt-cat-filter-bar { border-bottom-color: var(--color-border-light); } html[data-theme^="modern"] .evt-cat-filter-chip { background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-text-secondary); } html[data-theme^="modern"] .evt-cat-filter-chip:hover { background: var(--color-primary-highlight); color: var(--color-text); } html[data-theme^="modern"] .evt-cat-filter-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* v724: Helyszín térkép Modern skinekben */ html[data-theme^="modern"] .evt-detail-map { background: var(--color-surface-alt); border-color: var(--color-border); } html[data-theme="modern-light"] .evt-detail-map-loading, html[data-theme="modern-light"] .evt-detail-map-error { color: var(--color-text-secondary); } /* v727: RSVP szekció Modern skinekben */ html[data-theme="modern-light"] .evt-detail-rsvp-section { background: rgba(34, 197, 94, 0.06); border-color: rgba(34, 197, 94, 0.25); } html[data-theme="modern-light"] .evt-detail-rsvp-title { color: #15803d; } html[data-theme="modern-light"] .evt-detail-rsvp-btn.not-going { background: #DCFCE7; border-color: #86efac; color: #15803d; } html[data-theme="modern-light"] .evt-detail-rsvp-btn.not-going:hover:not([disabled]) { background: #22c55e; color: #fff; } html[data-theme="modern-light"] .evt-detail-rsvp-btn.going { background: #22c55e; border-color: #16a34a; color: #fff; } html[data-theme="modern-light"] .evt-detail-rsvp-btn.going:hover:not([disabled]) { background: #ef4444; border-color: #dc2626; color: #fff; } html[data-theme="modern-light"] .evt-detail-rsvp-meta, html[data-theme="modern-light"] .evt-detail-rsvp-capacity, html[data-theme="modern-light"] .evt-detail-rsvp-locked { color: var(--color-text-secondary); } /* v728: Ismétlődő események — Modern skinekben */ html[data-theme^="modern"] .admin-events-recurring-form { background: var(--color-surface); border-color: var(--color-border); } html[data-theme^="modern"] .admin-events-recur-day-chip { background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-text-secondary); } html[data-theme^="modern"] .admin-events-recur-day-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; } html[data-theme^="modern"] .admin-events-recur-preview { background: var(--color-surface-alt); color: var(--color-text); } html[data-theme="modern-light"] .admin-events-recurring-form { background: #FAF7FF; border-color: rgba(139, 92, 246, 0.3); } /* v724: Profil emlékeztető lemondás gomb Modern skinekben */ html[data-theme="modern-light"] .profile-reminder-cancel-btn { background: #fef2f2; color: #b91c1c; border-color: rgba(220, 38, 38, 0.3); } html[data-theme="modern-light"] .profile-reminder-cancel-btn:hover { background: #fee2e2; } /* Classifieds (cf-*) — Modern-light kártyák + fotó-thumb felületszín (a .cf-toolbar-fixed és a form-kontrollok a fenti általános cf-* Modern override blokkból kapják a stílust, mindkét skinen). */ html[data-theme="modern-light"] .cf-card, html[data-theme="modern-light"] .cf-photo-thumb { background: var(--color-surface-alt); color: var(--color-text); } /* Weather + környezeti panel részletek */ html[data-theme="modern-light"] .weather-details, html[data-theme="modern-light"] .env-detail-panel, html[data-theme="modern-light"] .weather-mini-stats, html[data-theme="modern-light"] .env-mini-stats { background: var(--color-surface-alt); color: var(--color-text); } /* Fallback szöveg: ha valahol maradt világos rgba-s szöveg (pl. #e2e8f0 vagy hasonló), az override-oljuk sötétebbre a Modern-világosban */ html[data-theme="modern-light"] .weather-details *, html[data-theme="modern-light"] .env-detail-panel *, html[data-theme="modern-light"] [class*="-card"] > *:not(svg), html[data-theme="modern-light"] [class*="-item"] > *:not(svg):not(.role-badge):not(.sg-stats-bar):not(.gp-badge) { color: inherit; } /* ══════════════════════════════════════════════════════════════ * Belső üzenetváltó (messages tile) — Modern skin override * A dashboard.css-ben a chat hardkódolt sötét rgba háttereket használ; * itt mindkét Modern skin (sötét + világos) változókkal felülírjuk, * hogy a csempeszabványnak (var(--color-surface) stb.) megfeleljen. * ══════════════════════════════════════════════════════════════ */ html[data-theme^="modern"] .msg-sidebar, html[data-theme^="modern"] .msg-sidebar-header, html[data-theme^="modern"] .msg-sidebar-toolbar, html[data-theme^="modern"] .msg-conv-list-pane, html[data-theme^="modern"] .msg-conv-list, html[data-theme^="modern"] .msg-chat, html[data-theme^="modern"] .msg-chat-empty { background: var(--color-surface); } html[data-theme^="modern"] .msg-sidebar, html[data-theme^="modern"] .msg-sidebar-header, html[data-theme^="modern"] .msg-sidebar-toolbar { border-color: var(--color-border); } html[data-theme^="modern"] .msg-sidebar-title, html[data-theme^="modern"] .msg-sidebar-section-title { color: var(--color-text-muted); } /* Chat input (textarea) — skin-konform háttér */ html[data-theme^="modern"] .msg-input { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text); } html[data-theme^="modern"] .msg-input::placeholder { color: var(--color-text-muted); } html[data-theme^="modern"] .msg-input:focus { background: var(--color-surface); border-color: var(--color-primary); } html[data-theme^="modern"] .msg-chat-header, html[data-theme^="modern"] .msg-chat-composer { background: var(--color-surface); border-color: var(--color-border); } html[data-theme^="modern"] .msg-chat-messages { background: var(--color-surface); } html[data-theme^="modern"] .msg-conv-item { color: var(--color-text); } html[data-theme^="modern"] .msg-conv-item:hover { background: var(--color-surface-alt); } html[data-theme^="modern"] .msg-conv-item.active { background: var(--color-primary-highlight); border-left-color: var(--color-primary); } html[data-theme^="modern"] .msg-conv-group, html[data-theme^="modern"] .msg-empty, html[data-theme^="modern"] .msg-chat-empty, html[data-theme^="modern"] .msg-chat-subtitle { color: var(--color-text-muted); } html[data-theme^="modern"] .msg-chat-title { color: var(--color-text); } html[data-theme^="modern"] .msg-chat-close { color: var(--color-text-muted); } html[data-theme^="modern"] .msg-chat-close:hover { background: var(--color-surface-alt); color: var(--color-text); } html[data-theme^="modern"] .msg-contact-search { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text); } html[data-theme^="modern"] .msg-contact-search-icon { color: var(--color-text-muted); } html[data-theme^="modern"] .msg-contact-search:focus { background: var(--color-surface); border-color: var(--color-primary); } /* Presence dot border — háttér színhez igazodva (kontaktlista alapja) */ html[data-theme^="modern"] .msg-presence-dot { border-color: var(--color-surface); } /* A meglévő üzenet-buborékok (msg-bubble) kontraszt-konzisztencia. Audit P1-3 fix: a JS-render valójában .msg-bubble-self és .msg-bubble-other osztályokat használ (lásd messaging.js renderMessages). A korábbi .msg-bubble-mine szelektor sosem érvényesült — most a tényleges osztálynevet használjuk. */ html[data-theme="modern-light"] .msg-bubble-self { background: var(--color-primary); color: #FFFFFF; } html[data-theme="modern-light"] .msg-bubble-self .msg-bubble-sender { color: rgba(255,255,255,0.85); } html[data-theme="modern-light"] .msg-bubble-other { background: var(--color-surface-alt); color: var(--color-text); } /* Toast — Modern skinekben a háttér és szegély is változó-alapú */ html[data-theme="modern-light"] .cd-toast { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); box-shadow: 0 8px 32px rgba(0,0,0,0.10); } html[data-theme="modern-light"] .cd-toast-clickable:hover { background: var(--color-surface-alt); border-color: var(--color-primary); } html[data-theme="modern-light"] .cd-toast-close { color: var(--color-text-muted); } html[data-theme="modern-light"] .cd-toast-close:hover { background: var(--color-surface-alt); color: var(--color-text); } /* Úticél szerkesztő modal — Modern skin override (sötét + világos) */ html[data-theme^="modern"] .travel-editor-content { background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4); } html[data-theme^="modern"] .travel-editor-header { background: var(--color-surface-alt); border-bottom: 1px solid var(--color-border); } html[data-theme^="modern"] .travel-editor-header h2 { color: var(--color-text); } html[data-theme^="modern"] .travel-editor-close { background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-text-muted); } html[data-theme^="modern"] .travel-editor-close:hover { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.4); color: #ef4444; } html[data-theme^="modern"] .travel-editor-item { background: var(--color-surface-alt); border: 1px solid var(--color-border); } html[data-theme^="modern"] .travel-editor-item-name { color: var(--color-text); } html[data-theme^="modern"] .travel-editor-item-address { color: var(--color-text-muted); } html[data-theme^="modern"] .travel-editor-add-section h3 { color: var(--color-text); } html[data-theme^="modern"] .travel-editor-form .form-group label { color: var(--color-text-muted); } html[data-theme^="modern"] .travel-editor-form .form-group input { background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-text); } html[data-theme^="modern"] .travel-editor-form .form-group input:focus { border-color: var(--color-primary); background: var(--color-surface); } html[data-theme^="modern"] .travel-editor-form .form-group input::placeholder { color: var(--color-text-muted); } html[data-theme^="modern"] .address-suggestions { background: var(--color-surface); border: 1px solid var(--color-border); } html[data-theme^="modern"] .address-suggestion-item { color: var(--color-text-secondary); } html[data-theme^="modern"] .address-suggestion-item:hover { background: var(--color-surface-alt); color: var(--color-text); } html[data-theme^="modern"] .travel-editor-footer { background: var(--color-surface-alt); border-top: 1px solid var(--color-border); } html[data-theme^="modern"] .travel-editor-cancel { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); } html[data-theme^="modern"] .travel-editor-cancel:hover { background: var(--color-surface-alt); color: var(--color-text); } html[data-theme^="modern"] .quick-places { background: rgba(59, 130, 246, 0.10); border: 1px solid rgba(59, 130, 246, 0.30); } html[data-theme="modern-light"] .quick-places { background: rgba(59, 130, 246, 0.06); border: 1px solid rgba(59, 130, 246, 0.20); } html[data-theme^="modern"] .quick-places-label { color: var(--color-text-muted); } html[data-theme^="modern"] .quick-place-btn { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); } html[data-theme^="modern"] .quick-place-btn:hover { background: rgba(59, 130, 246, 0.15); border-color: var(--color-primary); color: var(--color-primary); } /* Crosswalk (Intelligens átkelők) dropdown — Modern skin override */ html[data-theme^="modern"] .crosswalk-dropdown-selected { background: var(--color-surface-alt); border: 1px solid var(--color-border); } html[data-theme^="modern"] .crosswalk-dropdown-selected:hover { background: var(--color-surface); border-color: var(--color-primary); } html[data-theme^="modern"] .crosswalk-dropdown-selected.open { border-color: var(--color-primary); } html[data-theme^="modern"] .crosswalk-dropdown-text { color: var(--color-text); } html[data-theme^="modern"] .crosswalk-dropdown-arrow { color: var(--color-text-muted); } html[data-theme^="modern"] .crosswalk-dropdown-list { background: var(--color-surface); border: 1px solid var(--color-border); border-top: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } html[data-theme^="modern"] .crosswalk-dropdown-list::-webkit-scrollbar-track { background: var(--color-surface-alt); } html[data-theme^="modern"] .crosswalk-dropdown-list::-webkit-scrollbar-thumb { background: var(--color-primary); } html[data-theme^="modern"] .crosswalk-dropdown-item { border-bottom: 1px solid var(--color-border); } html[data-theme^="modern"] .crosswalk-dropdown-item:hover { background: rgba(59, 130, 246, 0.10); } html[data-theme^="modern"] .crosswalk-dropdown-item.selected { background: rgba(59, 130, 246, 0.15); } html[data-theme^="modern"] .crosswalk-dropdown-item-text { color: var(--color-text); } html[data-theme^="modern"] .crosswalk-dropdown-item-id { color: var(--color-primary); } /* SXR (Forgalmi adatok) dropdown — Modern skin override */ html[data-theme^="modern"] .sxr-dropdown-selected { background: var(--color-surface-alt); border: 1px solid var(--color-border); } html[data-theme^="modern"] .sxr-dropdown-selected:hover { background: var(--color-surface); border-color: var(--color-primary); } html[data-theme^="modern"] .sxr-dropdown-selected.open { border-color: var(--color-primary); } html[data-theme^="modern"] .sxr-dropdown-text { color: var(--color-text); } html[data-theme^="modern"] .sxr-dropdown-arrow { color: var(--color-text-muted); } html[data-theme^="modern"] .sxr-dropdown-list { background: var(--color-surface); border: 1px solid var(--color-border); border-top: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } html[data-theme^="modern"] .sxr-dropdown-item { border-bottom: 1px solid var(--color-border); } html[data-theme^="modern"] .sxr-dropdown-item:hover { background: rgba(59, 130, 246, 0.10); } html[data-theme^="modern"] .sxr-dropdown-item.selected { background: rgba(59, 130, 246, 0.15); } html[data-theme^="modern"] .sxr-dropdown-item-text { color: var(--color-text); } /* Forgalmi terhelés időszakválasztó (Ma / Hét / Hó) — Modern skin override */ html[data-theme^="modern"] .traffic-control-group { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; } html[data-theme^="modern"] .traffic-control-btn { background: transparent; color: var(--color-text-muted); border: none; padding: 6px 12px; font-weight: 500; transition: all 0.2s; white-space: nowrap; min-width: 72px; text-align: center; } html[data-theme^="modern"] .traffic-control-btn:hover { background: var(--color-surface); color: var(--color-text); } html[data-theme^="modern"] .traffic-control-btn.active { background: var(--color-primary); color: #ffffff; font-weight: 600; } html[data-theme^="modern"] .traffic-control-btn.active:hover { background: var(--color-primary); color: #ffffff; } } /* @layer skin-modern vége */