/* ================================================================ CoachTool — Light Theme Preview v1.1 Plik PREVIEW — ładowany PO app.css, nadpisuje light theme. Stary app.css pozostaje nienaruszony. Aktywny tylko gdy ================================================================ */ /* ================================================================ 1. DESIGN TOKENS — kompletny system od zera ================================================================ */ [data-theme="light"] { /* --- Tła --- */ --bg-primary: #f8fafc; /* strona główna (slate-50) */ --bg-secondary: #f1f5f9; /* panele boczne (slate-100) */ --bg-card: #ffffff; /* karty */ --bg-card-hover: #fafbfd; /* karta on-hover */ --bg-card-solid: #ffffff; --bg-input: #ffffff; /* inputy */ --bg-surface: #ffffff; /* powierzchnie elevowane */ --bg-glass: rgba(255,255,255,0.94); --bg-glass-light: rgba(248,250,252,0.96); --bg-modal: #ffffff; --bg-overlay: rgba(15,23,42,0.42); --bg-tag-group: rgba(241,245,249,0.7); --bg-badge: #eff6ff; --bg-btn-secondary: #f8fafc; --bg-btn-secondary-hover:#f1f5f9; /* --- Tekst --- */ --text-primary: #1e293b; /* slate-800 */ --text-secondary: #475569; /* slate-600 */ --text-muted: #94a3b8; /* slate-400 */ --text-heading: #0f172a; /* slate-900 */ --text-badge: #2563eb; --text-link: #475569; --text-link-hover: #0f172a; /* --- Obramowania --- */ --border-primary: #e2e8f0; /* slate-200 */ --border-secondary: #f1f5f9; /* slate-100 */ --border-input: #e2e8f0; --border-hover: rgba(37,99,235,0.35); --border-btn-secondary: #e2e8f0; /* --- Cienie (prawdziwe, nie glow) --- */ --shadow-card: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.03); --shadow-card-hover: 0 8px 24px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.04); --shadow-modal: 0 24px 64px rgba(15,23,42,0.14), 0 6px 20px rgba(15,23,42,0.07), 0 0 0 1px rgba(15,23,42,0.06); --shadow-nav: 0 1px 3px rgba(15,23,42,0.07), 0 0 0 1px rgba(15,23,42,0.04); /* --- Login --- */ --login-bg: linear-gradient(150deg, #f0f9ff 0%, #fafcff 40%, #f0fdf4 100%); --login-card-bg: #ffffff; --login-card-shadow: 0 24px 64px rgba(15,23,42,0.12), 0 4px 16px rgba(15,23,42,0.06), 0 0 0 1px rgba(15,23,42,0.05); /* --- Scrollbar --- */ --scrollbar-thumb: rgba(100,116,139,0.28); --scrollbar-thumb-hover: rgba(100,116,139,0.48); /* --- Misc --- */ --separator: #e2e8f0; --gradient-overlay-end: rgba(248,250,252,0.9); --ws-header-bg: rgba(255,255,255,0.96); --analysis-header-start: rgba(255,255,255,0.98); --analysis-header-end: rgba(248,250,252,0.92); /* --- Tag tiles --- */ --tag-tile-shine: rgba(255,255,255,0.38); --tag-tile-kbd-bg: rgba(255,255,255,0.52); --tag-item-hover: rgba(37,99,235,0.05); --tag-item-active-bg: rgba(37,99,235,0.03); /* --- Annotation --- */ --state-idle-bg: #f8fafc; --anno-row-border: #e2e8f0; --anno-playhead: #1e293b; --anno-playhead-shadow: rgba(30,41,59,0.22); /* --- Checkbox / placeholder --- */ --checkbox-bg: #ffffff; --checkbox-border: #cbd5e1; --placeholder: #94a3b8; /* --- Theme toggle --- */ --theme-toggle-bg: rgba(15,23,42,0.05); --theme-toggle-hover: rgba(15,23,42,0.09); --theme-toggle-icon: #64748b; } /* ================================================================ 2. BODY & BASE ================================================================ */ [data-theme="light"] body { background-color: var(--bg-primary) !important; background-image: none !important; color: var(--text-primary) !important; } /* Cichy wzór kropkowy zamiast siatki */ [data-theme="light"] body::after { content: ''; position: fixed; inset: 0; background-image: radial-gradient(circle, rgba(15,23,42,0.045) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; z-index: 0; } /* Wyłącz dark ambient glow */ [data-theme="light"] body::before { display: none !important; } /* ================================================================ 3. NAWIGACJA — czyste białe, nie glassmorphism ================================================================ */ [data-theme="light"] .glass { background: rgba(255,255,255,0.97) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: none !important; border-bottom: 1px solid #e2e8f0 !important; box-shadow: 0 1px 4px rgba(15,23,42,0.06) !important; } /* Logo gradient — zachowany brand */ [data-theme="light"] .login-logo, [data-theme="light"] .brand-gradient { background: linear-gradient(135deg, #2563eb, #0891b2) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: none !important; } /* Linki w nav */ [data-theme="light"] nav .text-gray-400, [data-theme="light"] nav .text-gray-500 { color: #64748b !important; } [data-theme="light"] nav .text-gray-400:hover, [data-theme="light"] nav .text-gray-500:hover { color: #0f172a !important; } [data-theme="light"] nav .text-gray-700 { color: #cbd5e1 !important; } /* Separator | w nav */ [data-theme="light"] nav span.text-gray-700 { color: #e2e8f0 !important; } /* Przycisk języka */ [data-theme="light"] .bg-slate-700\/40 { background: #f1f5f9 !important; border-color: #e2e8f0 !important; } [data-theme="light"] .border-slate-600\/30 { border-color: #e2e8f0 !important; } [data-theme="light"] .text-slate-400 { color: #64748b !important; } [data-theme="light"] .hover\:bg-slate-700\/60:hover { background: #e2e8f0 !important; } [data-theme="light"] .hover\:text-slate-300:hover { color: #334155 !important; } /* Avatar użytkownika */ [data-theme="light"] .from-blue-500\/30 { --tw-gradient-from: rgba(37,99,235,0.12) !important; } [data-theme="light"] .to-emerald-500\/30 { --tw-gradient-to: rgba(16,185,129,0.12) !important; } [data-theme="light"] .border-white\/10 { border-color: #e2e8f0 !important; } [data-theme="light"] .text-blue-300 { color: #2563eb !important; } /* Wyloguj */ [data-theme="light"] .hover\:text-red-400:hover { color: #dc2626 !important; } [data-theme="light"] .hover\:bg-red-950\/30:hover { background: rgba(254,202,202,0.4) !important; } /* ================================================================ 4. PRZYCISKI ================================================================ */ /* Primary — solidny niebieski bez glow */ [data-theme="light"] .btn-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; box-shadow: 0 1px 3px rgba(37,99,235,0.25), 0 1px 2px rgba(15,23,42,0.08) !important; color: #ffffff !important; } [data-theme="light"] .btn-primary:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af) !important; box-shadow: 0 4px 12px rgba(37,99,235,0.30), 0 2px 4px rgba(15,23,42,0.1) !important; transform: translateY(-1px) !important; } /* Ghost / nowy klub */ [data-theme="light"] .btn-ghost-new { color: #64748b !important; } [data-theme="light"] .btn-ghost-new:hover { color: #2563eb !important; } /* Stat badge */ [data-theme="light"] .stat-badge { background: #eff6ff !important; color: #2563eb !important; font-weight: 600 !important; font-size: 10px !important; letter-spacing: 0.04em !important; text-transform: none !important; } /* ================================================================ 5. DASHBOARD — karty meczów ================================================================ */ [data-theme="light"] .dash-heading { color: #94a3b8 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } [data-theme="light"] .dash-count { color: #94a3b8 !important; font-size: 10px !important; } /* Match card — biała karta z lewym akcentem */ [data-theme="light"] .match-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-left: 3px solid #e2e8f0 !important; border-radius: 10px !important; padding: 14px 18px !important; box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important; transform: none !important; transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important; margin-bottom: 6px !important; } [data-theme="light"] .match-card:hover { background: #fafbfd !important; border-left-color: #2563eb !important; border-color: #bfdbfe !important; box-shadow: 0 6px 20px rgba(15,23,42,0.09), 0 2px 6px rgba(15,23,42,0.04) !important; transform: translateY(-1px) !important; } /* Tytuł meczu */ [data-theme="light"] .match-title { color: #0f172a !important; font-weight: 600 !important; text-shadow: none !important; } [data-theme="light"] .match-card:hover .match-title { color: #2563eb !important; text-shadow: none !important; } /* Badge sportowy — clean pill bez glow */ [data-theme="light"] .sport-badge-h { display: inline-flex !important; align-items: center !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #0369a1 !important; background: #e0f2fe !important; border: 1px solid #bae6fd !important; padding: 1px 8px !important; border-radius: 99px !important; text-shadow: none !important; } [data-theme="light"] .sport-badge-f { display: inline-flex !important; align-items: center !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #15803d !important; background: #dcfce7 !important; border: 1px solid #bbf7d0 !important; padding: 1px 8px !important; border-radius: 99px !important; text-shadow: none !important; } /* Meta info meczu */ [data-theme="light"] .match-meta { color: #64748b !important; font-size: 11px !important; margin-top: 4px !important; } /* Tag count */ [data-theme="light"] .tag-count-plain { color: #94a3b8 !important; font-size: 12px !important; font-weight: 500 !important; } [data-theme="light"] .match-card:hover .tag-count-plain { color: #64748b !important; } /* Przyciski akcji — Analiza / Tagowanie jako czyste colored pills */ [data-theme="light"] .dash-btn-analysis { display: inline-flex !important; align-items: center !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: #16a34a !important; background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; padding: 4px 12px !important; border-radius: 6px !important; text-shadow: none !important; text-decoration: none !important; transition: all 0.15s !important; } [data-theme="light"] .dash-btn-analysis:hover { background: #dcfce7 !important; border-color: #86efac !important; color: #15803d !important; letter-spacing: 0.05em !important; } [data-theme="light"] .dash-btn-tag { display: inline-flex !important; align-items: center !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: #2563eb !important; background: #eff6ff !important; border: 1px solid #bfdbfe !important; padding: 4px 12px !important; border-radius: 6px !important; text-shadow: none !important; text-decoration: none !important; transition: all 0.15s !important; } [data-theme="light"] .dash-btn-tag:hover { background: #dbeafe !important; border-color: #93c5fd !important; color: #1d4ed8 !important; letter-spacing: 0.05em !important; } /* Empty state */ [data-theme="light"] .glass.rounded-2xl { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important; } /* ================================================================ 6. DASHBOARD — karty klubów ================================================================ */ [data-theme="light"] .club-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important; transition: all 0.2s !important; } [data-theme="light"] .club-card:hover { border-color: #bfdbfe !important; box-shadow: 0 6px 20px rgba(15,23,42,0.09) !important; background: #fafbfd !important; } /* Tekst nazwy klubu */ [data-theme="light"] .club-card .text-white, [data-theme="light"] .club-card .font-medium { color: #0f172a !important; } [data-theme="light"] .club-card .text-gray-500 { color: #64748b !important; } /* Sport toggle badge */ [data-theme="light"] .bg-sky-500\/15 { background: #e0f2fe !important; } [data-theme="light"] .border-sky-500\/30 { border-color: #bae6fd !important; } [data-theme="light"] .text-sky-300 { color: #0369a1 !important; } [data-theme="light"] .bg-emerald-500\/10 { background-color: #f0fdf4 !important; } [data-theme="light"] .border-emerald-500\/20 { border-color: #bbf7d0 !important; } [data-theme="light"] .text-emerald-400 { color: #16a34a !important; } /* Linki w kartach klubu */ [data-theme="light"] .bg-blue-500\/10 { background-color: #eff6ff !important; } [data-theme="light"] .border-blue-500\/20 { border-color: #bfdbfe !important; } [data-theme="light"] .text-blue-400 { color: #2563eb !important; } [data-theme="light"] .hover\:bg-blue-500\/20:hover { background-color: #dbeafe !important; } [data-theme="light"] .hover\:bg-emerald-500\/20:hover { background-color: #dcfce7 !important; } /* Ikona + inicjały */ [data-theme="light"] .text-emerald-400 { color: #16a34a !important; } /* ================================================================ 7. KOLORY TEKSTU — mapowanie Tailwind dark → light ================================================================ */ [data-theme="light"] .text-gray-100, [data-theme="light"] .text-white { color: #0f172a !important; } [data-theme="light"] .text-gray-200 { color: #1e293b !important; } [data-theme="light"] .text-gray-300 { color: #334155 !important; } [data-theme="light"] .text-gray-400 { color: #64748b !important; } [data-theme="light"] .text-gray-500 { color: #64748b !important; } [data-theme="light"] .text-gray-600 { color: #475569 !important; } [data-theme="light"] .text-gray-700 { color: #334155 !important; } /* Linki hover */ [data-theme="light"] .hover\:text-white:hover { color: #0f172a !important; } /* ================================================================ 8. TŁA — mapowanie dark-palette Tailwind ================================================================ */ [data-theme="light"] body, [data-theme="light"] .bg-dark-600, [data-theme="light"] .bg-dark-500, [data-theme="light"] .bg-dark-700 { background-color: var(--bg-primary) !important; } [data-theme="light"] .bg-dark-400, [data-theme="light"] .bg-dark-300 { background-color: #f1f5f9 !important; } [data-theme="light"] .bg-dark-200, [data-theme="light"] .bg-dark-100 { background-color: #ffffff !important; } [data-theme="light"] .bg-slate-800, [data-theme="light"] .bg-slate-800\/60, [data-theme="light"] .bg-slate-800\/30 { background-color: #f8fafc !important; } [data-theme="light"] .bg-slate-700\/40 { background: #f1f5f9 !important; } [data-theme="light"] .bg-slate-900\/80, [data-theme="light"] .bg-slate-900\/60 { background-color: #ffffff !important; } [data-theme="light"] .bg-gray-800 { background-color: #e2e8f0 !important; } /* ================================================================ 9. OBRAMOWANIA — dark → light ================================================================ */ [data-theme="light"] .border-slate-700, [data-theme="light"] .border-slate-700\/50 { border-color: #e2e8f0 !important; } [data-theme="light"] .border-slate-700\/30 { border-color: #e2e8f0 !important; } [data-theme="light"] .border-slate-800\/30 { border-color: rgba(15,23,42,0.06) !important; } [data-theme="light"] .hover\:border-slate-600:hover, [data-theme="light"] .hover\:border-slate-600\/50:hover { border-color: #cbd5e1 !important; } [data-theme="light"] .border-white\/5 { border-color: rgba(15,23,42,0.05) !important; } [data-theme="light"] .border-white\/10 { border-color: rgba(15,23,42,0.09) !important; } [data-theme="light"] .border-blue-500\/10 { border-color: #bfdbfe !important; } [data-theme="light"] .border-blue-400\/30, [data-theme="light"] .border-blue-500\/20 { border-color: #93c5fd !important; } [data-theme="light"] .border-emerald-500\/20 { border-color: #86efac !important; } [data-theme="light"] .border-orange-500\/30 { border-color: rgba(249,115,22,0.35) !important; } /* ================================================================ 10. FORMULARZE I INPUTY ================================================================ */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #94a3b8 !important; } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important; } [data-theme="light"] input[type="checkbox"] { background-color: #ffffff !important; border-color: #cbd5e1 !important; } /* Inputy w modalu */ [data-theme="light"] .modal-card input, [data-theme="light"] .modal-card select, [data-theme="light"] .modal-card textarea { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #0f172a !important; } [data-theme="light"] .modal-card h3 { color: #0f172a !important; } /* ================================================================ 11. MODALS ================================================================ */ [data-theme="light"] .modal-overlay { background: rgba(15,23,42,0.42) !important; backdrop-filter: blur(6px) !important; } [data-theme="light"] .modal-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 24px 64px rgba(15,23,42,0.14), 0 6px 20px rgba(15,23,42,0.07) !important; } /* ================================================================ 12. LOGIN PAGE ================================================================ */ [data-theme="light"] .login-bg { background: linear-gradient(150deg, #f0f9ff 0%, #fafcff 38%, #f0fdf4 100%) !important; } /* Karta logowania — clean white bez glassmorphism */ [data-theme="light"] .login-card { background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 24px 64px rgba(15,23,42,0.12), 0 4px 16px rgba(15,23,42,0.06) !important; } /* Inputy na stronie logowania */ [data-theme="light"] .login-card input { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #0f172a !important; } [data-theme="light"] .login-card input:focus { background: #ffffff !important; border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important; } /* Alerty login */ [data-theme="light"] .bg-red-950\/50 { background-color: #fef2f2 !important; } [data-theme="light"] .border-red-800\/50 { border-color: #fca5a5 !important; } [data-theme="light"] .text-red-300 { color: #b91c1c !important; } [data-theme="light"] .bg-emerald-950\/50 { background-color: #f0fdf4 !important; } [data-theme="light"] .border-emerald-800\/50 { border-color: #86efac !important; } [data-theme="light"] .text-emerald-300 { color: #15803d !important; } /* Stopka login */ [data-theme="light"] .text-gray-700.text-xs { color: #94a3b8 !important; } /* Przycisk logowania — ZAWSZE biały tekst (btn-primary) */ [data-theme="light"] .login-card .btn-primary { color: #ffffff !important; } /* ================================================================ 13. WORKSTATION — header, pitch, panele ================================================================ */ [data-theme="light"] .ws-header { background: rgba(255,255,255,0.97) !important; border-bottom: 1px solid #e2e8f0 !important; box-shadow: 0 1px 4px rgba(15,23,42,0.06) !important; } [data-theme="light"] .ws-pitch-col { border-right-color: #e2e8f0 !important; } [data-theme="light"] .ws-match-time { text-shadow: none !important; } /* ── Pitch show/hide warstwy (workstation) ── */ /* Default: ciemna warstwa widoczna, jasna ukryta */ .pitch-bg-dark { display: block; } .pitch-bg-light { display: none; } /* Light mode football: odwróć */ [data-theme="light"] #pitch-svg:not([data-sport="hockey"]) .pitch-bg-dark { display: none !important; } [data-theme="light"] #pitch-svg:not([data-sport="hockey"]) .pitch-bg-light { display: block !important; } /* SVG element — ramka i tło */ [data-theme="light"] #pitch-svg:not([data-sport="hockey"]) { background: #14532d !important; border: none !important; box-shadow: 0 4px 16px rgba(15,23,42,0.12) !important; border-radius: 8px !important; } /* Linie boiska workstation — grubsze i czytelniejsze w light mode */ [data-theme="light"] #pitch-svg:not([data-sport="hockey"]) #pitch-lines * { stroke: rgba(255,255,255,0.88) !important; stroke-width: 3 !important; } [data-theme="light"] #pitch-svg:not([data-sport="hockey"]) #pitch-lines circle { fill: rgba(255,255,255,0.85) !important; } /* Hockey rink — białe lodowisko, brak ciemnej ramki */ [data-theme="light"] #pitch-svg[data-sport="hockey"] { background: #e8f4fd !important; /* jasny lodowy błękit tam gdzie rink-renderer nie rysuje */ border: none !important; box-shadow: 0 2px 12px rgba(15,23,42,0.10) !important; border-radius: 8px !important; } /* Annotation bar & timeline */ [data-theme="light"] #annotation-bar > div { background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; } [data-theme="light"] #timeline { background: #f1f5f9 !important; border-top: 1px solid #e2e8f0 !important; } [data-theme="light"] .anno-playhead { background: #1e293b !important; box-shadow: 0 0 6px rgba(30,41,59,0.25) !important; } /* Tag tiles */ [data-theme="light"] #tag-tiles { background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; } [data-theme="light"] .tag-tile { border-width: 1px !important; border-style: solid !important; } [data-theme="light"] .tag-tile:hover { filter: brightness(0.94) !important; box-shadow: 0 4px 12px rgba(15,23,42,0.12) !important; } [data-theme="light"] .tag-tile.active { box-shadow: 0 0 0 2px rgba(15,23,42,0.35), 0 4px 16px rgba(15,23,42,0.15) !important; } /* Tag list */ [data-theme="light"] #tag-list-scroll { background: #ffffff !important; } [data-theme="light"] .tag-item:hover { background: rgba(37,99,235,0.05) !important; } [data-theme="light"] .tag-item.selected { background: rgba(37,99,235,0.09) !important; border-left-color: #2563eb !important; } /* Filtry */ [data-theme="light"] #tag-filters { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; } [data-theme="light"] #tag-filters select, [data-theme="light"] #tag-filters input { background: #ffffff !important; border-color: #e2e8f0 !important; color: #1e293b !important; } /* Details panel */ [data-theme="light"] #details-panel { background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; } [data-theme="light"] #details-panel select, [data-theme="light"] #details-panel textarea { background: #ffffff !important; border-color: #e2e8f0 !important; color: #1e293b !important; } [data-theme="light"] #btn-key-moment { background: rgba(234,179,8,0.08) !important; border-color: rgba(234,179,8,0.25) !important; color: #92400e !important; } [data-theme="light"] #btn-create-clip { background: rgba(37,99,235,0.08) !important; border-color: rgba(37,99,235,0.25) !important; color: #1d4ed8 !important; } [data-theme="light"] #btn-delete-tag { background: rgba(220,38,38,0.07) !important; border-color: rgba(220,38,38,0.2) !important; color: #dc2626 !important; } /* Attack direction bar */ [data-theme="light"] #attack-direction-bar { background: #ffffff !important; border: 1px solid #e2e8f0 !important; } /* State indicator */ [data-theme="light"] .state-idle { background: #f8fafc !important; color: #94a3b8 !important; } [data-theme="light"] .state-awaiting { background: rgba(37,99,235,0.10) !important; color: #2563eb !important; } [data-theme="light"] .state-selected { background: rgba(234,179,8,0.10) !important; color: #92400e !important; } [data-theme="light"] .state-recording { background: rgba(220,38,38,0.10) !important; color: #dc2626 !important; } /* Half markers button */ [data-theme="light"] #btn-half-markers { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #64748b !important; } [data-theme="light"] #btn-half-markers:hover { background: #e2e8f0 !important; border-color: #cbd5e1 !important; color: #1e293b !important; text-shadow: none !important; } [data-theme="light"] #btn-lineup { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #64748b !important; } [data-theme="light"] #btn-lineup:hover { background: #e2e8f0 !important; color: #1e293b !important; } [data-theme="light"] #btn-reset-tags { background: #fff1f2 !important; border-color: #fecdd3 !important; color: #e11d48 !important; } [data-theme="light"] #btn-reset-tags:hover { background: #ffd7d8 !important; text-shadow: none !important; } /* Generic workstation button (bg-slate-800/border-slate-7) */ [data-theme="light"] .ws-header [class*="bg-slate-8"] { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #64748b !important; } [data-theme="light"] .ws-header [class*="bg-slate-8"]:hover { background: #e2e8f0 !important; border-color: #cbd5e1 !important; color: #1e293b !important; text-shadow: none !important; } /* Group btn */ [data-theme="light"] .group-btn { background: #f1f5f9 !important; color: #475569 !important; } /* ================================================================ 14. ANALYSIS DASHBOARD ================================================================ */ [data-theme="light"] .analysis-header { background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.92) 100%) !important; border-bottom: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important; } [data-theme="light"] .stat-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important; } [data-theme="light"] .stat-card:hover { border-color: #bfdbfe !important; box-shadow: 0 6px 20px rgba(15,23,42,0.09) !important; } [data-theme="light"] .stat-card.active { border-color: #93c5fd !important; box-shadow: 0 0 0 1px #bfdbfe, 0 4px 16px rgba(37,99,235,0.09) !important; } [data-theme="light"] .chart-container { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important; } [data-theme="light"] .kpi-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important; } [data-theme="light"] .kpi-card:hover { border-color: #bfdbfe !important; box-shadow: 0 4px 12px rgba(15,23,42,0.08) !important; } [data-theme="light"] .kpi-card .text-gray-500 { color: #64748b !important; } /* Chart tabs */ [data-theme="light"] .chart-tab { color: #94a3b8 !important; background: transparent !important; border-color: transparent !important; text-shadow: none !important; } [data-theme="light"] .chart-tab:hover { color: #475569 !important; background: #f8fafc !important; } [data-theme="light"] .chart-tab.active { color: #2563eb !important; background: #eff6ff !important; border-color: #bfdbfe !important; text-shadow: none !important; } /* Hockey filter buttons */ [data-theme="light"] .h-filter-btn { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #64748b !important; text-shadow: none !important; } [data-theme="light"] .h-filter-btn:hover { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #1e293b !important; text-shadow: none !important; } [data-theme="light"] .h-filter-btn.active { background: #eff6ff !important; border-color: #93c5fd !important; color: #2563eb !important; text-shadow: none !important; } /* Analysis header links */ [data-theme="light"] .analysis-header a[class*="bg-emerald"], [data-theme="light"] .analysis-header button[class*="bg-emerald"] { background: #f0fdf4 !important; border-color: #86efac !important; color: #16a34a !important; text-shadow: none !important; } [data-theme="light"] .analysis-header a[class*="bg-emerald"]:hover, [data-theme="light"] .analysis-header button[class*="bg-emerald"]:hover { background: #dcfce7 !important; border-color: #4ade80 !important; color: #15803d !important; text-shadow: none !important; } [data-theme="light"] .analysis-header a[class*="bg-blue"], [data-theme="light"] .analysis-header button[class*="bg-blue"] { background: #eff6ff !important; border-color: #bfdbfe !important; color: #2563eb !important; text-shadow: none !important; } [data-theme="light"] .analysis-header a[class*="bg-blue"]:hover, [data-theme="light"] .analysis-header button[class*="bg-blue"]:hover { background: #dbeafe !important; border-color: #93c5fd !important; color: #1d4ed8 !important; text-shadow: none !important; } /* Tag sidebar */ [data-theme="light"] #tag-sidebar { background: #ffffff !important; border-left: 1px solid #e2e8f0 !important; } [data-theme="light"] #tag-sidebar > div:first-child { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; } [data-theme="light"] #analysis-filter-label { color: #334155 !important; } [data-theme="light"] #analysis-filter-count { color: #94a3b8 !important; } [data-theme="light"] #analysis-tag-empty { color: #94a3b8 !important; } /* Tag list items */ [data-theme="light"] .tag-list-item { color: #334155 !important; border-bottom: 1px solid rgba(15,23,42,0.04) !important; } [data-theme="light"] .tag-list-item:hover { background: rgba(15,23,42,0.03) !important; } [data-theme="light"] .tag-list-item.selected { background: rgba(37,99,235,0.09) !important; border-left-color: #2563eb !important; } [data-theme="light"] .tag-list-item.playing { background: rgba(22,163,74,0.09) !important; } /* Match rows */ [data-theme="light"] .match-row:hover { background: rgba(15,23,42,0.04) !important; } [data-theme="light"] .match-row.selected { background: rgba(37,99,235,0.08) !important; border-left-color: #2563eb !important; } /* Stat cards inline dark style override */ [data-theme="light"] .chart-panel div[style*="background:rgba(15,23,42,0.6)"], [data-theme="light"] .chart-panel div[style*="background: rgba(15,23,42,0.6)"] { background: #ffffff !important; border: 1px solid #e2e8f0 !important; } [data-theme="light"] .chart-panel [style*="border:1px solid rgba(255,255,255,0.06)"] { border-color: #e2e8f0 !important; } [data-theme="light"] .chart-panel [style*="border-top:1px solid rgba(255,255,255,0.04)"] { border-top-color: #f1f5f9 !important; } /* SC (stat card widgets) */ [data-theme="light"] .sc-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important; } [data-theme="light"] .sc-title { color: #0f172a !important; } [data-theme="light"] .sc-title:hover { color: #2563eb !important; } [data-theme="light"] .sc-toggle { background: #f1f5f9 !important; } [data-theme="light"] .sc-toggle-btn { color: #64748b !important; } [data-theme="light"] .sc-toggle-btn:hover { color: #1e293b !important; } [data-theme="light"] .sc-toggle-btn.active { background: rgba(37,99,235,0.12) !important; color: #1d4ed8 !important; } [data-theme="light"] .sc-side-btn { color: #64748b !important; border-color: #e2e8f0 !important; } [data-theme="light"] .sc-side-btn:hover { color: #1e293b !important; border-color: #94a3b8 !important; } [data-theme="light"] .sc-side-btn.active { background: #e2e8f0 !important; color: #1e293b !important; border-color: #94a3b8 !important; } [data-theme="light"] .sc-half-btn { color: #64748b !important; border-color: #e2e8f0 !important; } [data-theme="light"] .sc-half-btn:hover { color: #1e293b !important; border-color: #94a3b8 !important; } [data-theme="light"] .sc-half-btn.active { background: rgba(99,102,241,0.10) !important; color: #4f46e5 !important; border-color: rgba(99,102,241,0.3) !important; } [data-theme="light"] .sc-big { color: #0f172a !important; } [data-theme="light"] .sc-sub { color: #64748b !important; } [data-theme="light"] .sc-row:hover { background: rgba(15,23,42,0.04) !important; } [data-theme="light"] .sc-row.active { background: rgba(37,99,235,0.07) !important; } [data-theme="light"] .sc-row-label { color: #475569 !important; } [data-theme="light"] .sc-row-track { background: #f1f5f9 !important; } [data-theme="light"] .sc-row-val { color: #0f172a !important; } [data-theme="light"] .sc-halves { border-top-color: #f1f5f9 !important; } [data-theme="light"] .sc-half-label { color: #94a3b8 !important; } [data-theme="light"] .sc-half-val { color: #0f172a !important; } [data-theme="light"] .sc-half-diff { color: #64748b !important; } /* Pitche w statach — ciemne bo białe linie */ [data-theme="light"] .sc-pitch { background: #1a6b35 !important; border-color: rgba(15,23,42,0.15) !important; } /* SR rows */ [data-theme="light"] .sr-row { background: #ffffff !important; border: 1px solid rgba(15,23,42,0.06) !important; } [data-theme="light"] .sr-row:hover { background: #f8fafc !important; } [data-theme="light"] .sr-row.sr-expanded { background: #f8fafc !important; } [data-theme="light"] .sr-row.act-both { background: rgba(99,102,241,0.07) !important; border-color: rgba(99,102,241,0.25) !important; } [data-theme="light"] .sr-name { color: #475569 !important; } [data-theme="light"] .sr-counts { color: #0f172a !important; } [data-theme="light"] .sr-bar { background: #f1f5f9 !important; } [data-theme="light"] .sr-empty { color: #94a3b8 !important; } /* SR row inline styles override */ [data-theme="light"] .sr-row [style*="color:#e2e8f0"], [data-theme="light"] .sr-row [style*="color: #e2e8f0"], [data-theme="light"] .sr-row [style*="color:#f1f5f9"], [data-theme="light"] .sr-row [style*="color: #f1f5f9"] { color: #0f172a !important; } [data-theme="light"] .sr-row [style*="color:#94a3b8"], [data-theme="light"] .sr-row [style*="color: #94a3b8"] { color: #64748b !important; } [data-theme="light"] .sr-row[style*="background:rgba(15,23,42,0.6)"] { background: rgba(15,23,42,0.04) !important; } [data-theme="light"] .sr-row [style*="background:rgba(255,255,255,0.03)"] { background: rgba(15,23,42,0.04) !important; } [data-theme="light"] .sr-row [style*="background:rgba(255,255,255,0.04)"] { background: rgba(15,23,42,0.07) !important; } /* TS columns */ [data-theme="light"] .ts-col { background: #ffffff !important; border: 1px solid rgba(15,23,42,0.07) !important; } [data-theme="light"] .ts-col-header { background: rgba(22,163,74,0.07) !important; border-bottom-color: #e2e8f0 !important; } [data-theme="light"] .ts-col-header-opp { background: rgba(248,113,113,0.07) !important; } [data-theme="light"] .ts-team-name { color: #0f172a !important; } [data-theme="light"] .ts-name { color: #475569 !important; } /* Player chips */ [data-theme="light"] .player-chip, [data-theme="light"] .radar-chip { color: #475569 !important; border-color: #e2e8f0 !important; background: #ffffff !important; } [data-theme="light"] .player-chip:hover, [data-theme="light"] .radar-chip:hover { color: #1e293b !important; border-color: #cbd5e1 !important; } [data-theme="light"] .player-chip.active, [data-theme="light"] .radar-chip.active { border-color: #93c5fd !important; background: #eff6ff !important; color: #1e40af !important; } /* Season cards */ [data-theme="light"] .season-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; } [data-theme="light"] .season-card:hover { border-color: #bfdbfe !important; box-shadow: 0 4px 12px rgba(15,23,42,0.07) !important; } [data-theme="light"] .season-card .bg-slate-800\/60 { background: #f1f5f9 !important; color: #475569 !important; } /* Pitch chips */ [data-theme="light"] .pitch-chip { background: #ffffff !important; border-color: #e2e8f0 !important; color: #475569 !important; } [data-theme="light"] .pitch-chip:hover { border-color: #cbd5e1 !important; color: #1e293b !important; background: #f8fafc !important; } [data-theme="light"] .pitch-chip.active { border-color: #93c5fd !important; background: #eff6ff !important; color: #1e40af !important; } /* Time range filter */ [data-theme="light"] .tr-btn { background: #ffffff !important; border-color: #e2e8f0 !important; } [data-theme="light"] .tr-btn:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; } [data-theme="light"] .tr-btn-active { border-color: #93c5fd !important; background: #eff6ff !important; } [data-theme="light"] .tr-btn-label { color: #64748b !important; } [data-theme="light"] .tr-btn-count { color: #94a3b8 !important; } [data-theme="light"] .tr-btn-active .tr-btn-count { color: #0f172a !important; } [data-theme="light"] .tr-btn-active .tr-btn-label { color: #0f172a !important; } /* Annotation bar inline styles */ [data-theme="light"] #annotation-bar > div[style*="rgba(10, 15, 26"] { background: #f8fafc !important; } [data-theme="light"] #timeline[style*="rgba(8, 12, 24"] { background: #f1f5f9 !important; } [data-theme="light"] #annotation-bar-toggle[style*="rgba(10, 15, 26"] { background: #f8fafc !important; } /* KPI ring bg */ [data-theme="light"] .kpi-ring-bg { stroke: rgba(15,23,42,0.08) !important; } /* Panel resizer */ [data-theme="light"] .panel-resizer::after { background: rgba(15,23,42,0.14) !important; } /* Half bars */ [data-theme="light"] .half-bar-row:hover { background: rgba(15,23,42,0.04) !important; } [data-theme="light"] .half-bar-row.active { background: rgba(37,99,235,0.07) !important; } [data-theme="light"] .donut-legend-item:hover { background: rgba(15,23,42,0.04) !important; } [data-theme="light"] .donut-legend-item.active { background: rgba(37,99,235,0.07) !important; } /* ================================================================ 15. CLUB DASHBOARD ================================================================ */ [data-theme="light"] .club-header { background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.92) 100%) !important; border-bottom: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important; } [data-theme="light"] .w-px.bg-gray-800 { background-color: #e2e8f0 !important; } /* ================================================================ 16. CLIP VIEWER ================================================================ */ [data-theme="light"] body[class*="flex-col"], [data-theme="light"] body.text-gray-100 { background: #f8fafc !important; color: #1e293b !important; } [data-theme="light"] header[style*="rgba(10, 15, 26"] { background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.92) 100%) !important; border-bottom: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important; } [data-theme="light"] .clip-btn { background: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #475569 !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; } [data-theme="light"] .clip-btn:hover { background: #f8fafc !important; color: #1e293b !important; border-color: #cbd5e1 !important; } [data-theme="light"] .clip-btn.primary { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; } [data-theme="light"] .seg-item { background: #ffffff !important; border: 1px solid #e2e8f0 !important; } [data-theme="light"] .seg-item:hover { background: #f8fafc !important; } [data-theme="light"] .seg-item.active { background: #eff6ff !important; border-color: #93c5fd !important; } /* ================================================================ 17. FULL STATS PAGE ================================================================ */ [data-theme="light"] body.fs-body { background: #f8fafc !important; color: #1e293b !important; } [data-theme="light"] .fs-header { background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.92) 100%) !important; border-bottom-color: #e2e8f0 !important; } [data-theme="light"] .fs-back-btn { color: #64748b !important; background: #f1f5f9 !important; border-color: #e2e8f0 !important; } [data-theme="light"] .fs-back-btn:hover { color: #1e293b !important; background: #e2e8f0 !important; } [data-theme="light"] .fs-body h1 { color: #0f172a !important; } [data-theme="light"] .fs-body .subtitle { color: #64748b !important; } [data-theme="light"] .fs-body .kpi-card { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important; } [data-theme="light"] .fs-body .kpi-bar { background: #f1f5f9 !important; } [data-theme="light"] .fs-body .h2h-card { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important; } [data-theme="light"] .fs-body .h2h-header { border-bottom-color: #f1f5f9 !important; } [data-theme="light"] .fs-body [style*="background:#141c32"], [data-theme="light"] .pitch-box, [data-theme="light"] div[style*="background:#141c32"] { background: #1a6b35 !important; border-color: rgba(15,23,42,0.15) !important; } /* ================================================================ 18. ERROR PAGES ================================================================ */ [data-theme="light"] .bg-red-500\/10 { background-color: #fff1f2 !important; } [data-theme="light"] .border-red-500\/30 { border-color: #fca5a5 !important; } [data-theme="light"] .text-red-400 { color: #dc2626 !important; } /* ================================================================ 19. GRADIENT / COLOUR OVERRIDES (kolory z/na light bg) ================================================================ */ /* Kolor linków action */ [data-theme="light"] a[class*="bg-emerald"] { background: #f0fdf4 !important; border-color: #86efac !important; color: #16a34a !important; } [data-theme="light"] a[class*="bg-emerald"]:hover { background: #dcfce7 !important; } /* Stopka */ [data-theme="light"] footer[style*="rgba(5, 8, 14"], [data-theme="light"] div[style*="background: rgba(5, 8, 14"] { background: #f1f5f9 !important; border-top: 1px solid #e2e8f0 !important; } [data-theme="light"] body > .shrink-0.px-4.py-1 { background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; } /* Pitche (zone/arrow) — zielone tło */ [data-theme="light"] #zone-pitch, [data-theme="light"] #arrow-pitch { background: #1e7a40 !important; border: none !important; box-shadow: 0 2px 8px rgba(15,23,42,0.08) !important; } [data-theme="light"] canvas[id^="pitch-"], [data-theme="light"] canvas[id$="-pitch"], [data-theme="light"] canvas.stat-heatmap { background: #1a6b35 !important; } /* HalfComparison rows */ [data-theme="light"] .hc-row:hover { background: rgba(15,23,42,0.04) !important; } [data-theme="light"] .hc-row.hc-active { background: rgba(37,99,235,0.07) !important; } [data-theme="light"] .hc-row [style*="color:#cbd5e1"], [data-theme="light"] .hc-row [style*="color: #cbd5e1"] { color: #334155 !important; } [data-theme="light"] .hc-row [style*="color:#f1f5f9"], [data-theme="light"] .hc-row [style*="color: #f1f5f9"] { color: #0f172a !important; } /* Połowy card inline dark bg */ [data-theme="light"] .chart-panel[data-panel="halves"] div[style*="background:rgba(15,23,42,0.6)"] { background: #ffffff !important; border: 1px solid #e2e8f0 !important; } [data-theme="light"] .chart-panel[data-panel="halves"] [style*="color:#cbd5e1"], [data-theme="light"] .chart-panel[data-panel="halves"] [style*="color: #cbd5e1"] { color: #0f172a !important; } [data-theme="light"] .chart-panel[data-panel="halves"] [style*="border-bottom:1px solid rgba(255,255,255"] { border-bottom-color: #e2e8f0 !important; } /* Players panel */ [data-theme="light"] .chart-panel[data-panel="players"] div[style*="background:rgba(15,23,42,0.6)"] { background: #ffffff !important; border: 1px solid #e2e8f0 !important; } /* Inline pitch #141c32 w stats */ [data-theme="light"] .sr-inline-detail div[style*="background:#141c32"] { background: #1a6b35 !important; } /* Slide-detail toggle buttons */ [data-theme="light"] .sr-inline-detail .sr-pill[style*="color:#94a3b8"], [data-theme="light"] .sr-inline-detail .sr-tab[style*="color:#94a3b8"] { color: #1d4ed8 !important; background: #eff6ff !important; border-color: #bfdbfe !important; } [data-theme="light"] .sr-inline-detail .sr-pill[style*="color:#475569"], [data-theme="light"] .sr-inline-detail .sr-tab[style*="color:#475569"] { color: #64748b !important; background: #f1f5f9 !important; border-color: #e2e8f0 !important; } /* Player rows inline */ [data-theme="light"] .pl-row [style*="color:#e2e8f0"], [data-theme="light"] .pl-row [style*="color: #e2e8f0"] { color: #0f172a !important; } [data-theme="light"] .pl-row [style*="color:#94a3b8"], [data-theme="light"] .pl-row [style*="color: #94a3b8"] { color: #64748b !important; } [data-theme="light"] .pl-row[style*="background:rgba(15,23,42,0.6)"] { background: rgba(15,23,42,0.04) !important; } [data-theme="light"] .pl-row [style*="background:rgba(255,255,255,0.04)"] { background: rgba(15,23,42,0.05) !important; } /* Compare check */ [data-theme="light"] .compare-check { border-color: #e2e8f0 !important; } [data-theme="light"] .compare-check.checked { background: #2563eb !important; border-color: #2563eb !important; } /* Generic secondary buttons (main content area) */ [data-theme="light"] main [class*="bg-slate-800"][class*="border-slate-7"]:not(input):not(select):not(textarea):not(.modal-card) { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #64748b !important; } [data-theme="light"] main [class*="bg-slate-800"][class*="border-slate-7"]:not(input):not(select):not(textarea):not(.modal-card):hover { background: #e2e8f0 !important; border-color: #cbd5e1 !important; color: #1e293b !important; text-shadow: none !important; } /* Filtruj button */ [data-theme="light"] button[class*="bg-slate-700/50"][class*="text-gray-4"] { background: #f1f5f9 !important; color: #64748b !important; border: 1px solid #e2e8f0 !important; text-shadow: none !important; } [data-theme="light"] button[class*="bg-slate-700/50"]:hover { background: #e2e8f0 !important; color: #1e293b !important; text-shadow: none !important; } /* Key moment glow — delikatny na jasnym tle */ [data-theme="light"] .key-moment-glow { box-shadow: 0 0 10px rgba(234,179,8,0.30) !important; } [data-theme="light"] .anno-marker.key-moment { box-shadow: 0 0 6px rgba(234,179,8,0.45) !important; } /* Gradient w tle klasy match-card (entry animation) */ [data-theme="light"] .from-red-950\/40 { --tw-gradient-from: rgba(254,226,226,0.5) !important; } [data-theme="light"] .to-dark-500\/60 { --tw-gradient-to: rgba(248,250,252,0.6) !important; } /* Hover text czerwony (logout etc.) */ [data-theme="light"] .hover\:text-red-400:hover { color: #dc2626 !important; } [data-theme="light"] .hover\:bg-red-950\/30:hover { background: rgba(254,202,202,0.4) !important; } [data-theme="light"] .hover\:text-blue-400:hover { color: #2563eb !important; } [data-theme="light"] .hover\:text-white:hover { color: #0f172a !important; } /* ================================================================ 20. GLOBALNE INLINE DARK CARDS — v2 (Chrome-safe) Chrome normalizuje rgba(15,23,42,0.7) → rgba(15, 23, 42, 0.7) Dlatego łapiemy za pomocą "15, 23, 42" (z spacjami) — pewny match. Bez ograniczenia .chart-panel żeby złapać WSZYSTKIE widoki. ================================================================ */ /* GŁÓWNA REGUŁA — łapie wszystkie inline dark cards */ [data-theme="light"] [style*="15, 23, 42"], [data-theme="light"] [style*="15,23,42"] { background: #ffffff !important; border-color: #e2e8f0 !important; } /* Wyjątek: pitche i SVG-i mają własny kolor — chronione osobno wyżej */ /* Separatory wierszy (biały na białym → jasno szary) */ [data-theme="light"] [style*="rgba(255, 255, 255, 0.04)"], [data-theme="light"] [style*="rgba(255,255,255,0.04)"], [data-theme="light"] [style*="rgba(255, 255, 255, 0.03)"], [data-theme="light"] [style*="rgba(255,255,255,0.03)"] { border-color: #f1f5f9 !important; background: rgba(15,23,42,0.03) !important; } /* Sticky table headers */ [data-theme="light"] th[style*="15, 23, 42"], [data-theme="light"] th[style*="15,23,42"] { background: #f8fafc !important; color: #475569 !important; border-bottom: 1px solid #e2e8f0 !important; } /* Separatory tr w tabelach */ [data-theme="light"] tr[style*="rgba(255, 255, 255"], [data-theme="light"] tr[style*="rgba(255,255,255"] { border-bottom-color: #f1f5f9 !important; } /* Karta opakowania chain-kpi */ [data-theme="light"] #chains-kpi > div { border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 4px rgba(15,23,42,0.06) !important; } /* Nav boczna full-stats */ [data-theme="light"] nav[style*="15, 23, 42"], [data-theme="light"] nav[style*="15,23,42"] { background: #ffffff !important; border-color: #e2e8f0 !important; } [data-theme="light"] .fsh-nav-link { color: #64748b !important; } [data-theme="light"] .fsh-nav-link:hover, [data-theme="light"] .fsh-nav-link.active { color: #2563eb !important; background: #eff6ff !important; } /* Body wzór kropkowy — widoczny kontrast */ [data-theme="light"] body::after { background-image: radial-gradient(circle, rgba(15,23,42,0.09) 1px, transparent 1px) !important; background-size: 22px 22px !important; } /* ================================================================ 21. JASNE KOLORY TEKSTU (niewidoczne na białym tle) — FIX #f1f5f9, #e2e8f0 = prawie biały tekst na białej karcie → niewidoczny. Chrome normalizuje te kolory w stylu, więc używamy bezpośrednio. ================================================================ */ /* Najbardziej krytyczne: slate-100 i slate-200 jako kolor tekstu */ [data-theme="light"] [style*="color: #f1f5f9"], [data-theme="light"] [style*="color:#f1f5f9"] { color: #1e293b !important; } [data-theme="light"] [style*="color: #e2e8f0"], [data-theme="light"] [style*="color:#e2e8f0"] { color: #334155 !important; } [data-theme="light"] [style*="color: #cbd5e1"], [data-theme="light"] [style*="color:#cbd5e1"] { color: #475569 !important; } /* Bardzo jasne niebieskie (sky-300 → ciemniejszy niebieski) */ [data-theme="light"] [style*="color: #7dd3fc"], [data-theme="light"] [style*="color:#7dd3fc"] { color: #0369a1 !important; } [data-theme="light"] [style*="color: #93c5fd"], [data-theme="light"] [style*="color:#93c5fd"] { color: #2563eb !important; } [data-theme="light"] [style*="color: #bfdbfe"], [data-theme="light"] [style*="color:#bfdbfe"] { color: #3b82f6 !important; } /* Bardzo jasne zielone */ [data-theme="light"] [style*="color: #6ee7b7"], [data-theme="light"] [style*="color:#6ee7b7"] { color: #059669 !important; } [data-theme="light"] [style*="color: #86efac"], [data-theme="light"] [style*="color:#86efac"] { color: #16a34a !important; } [data-theme="light"] [style*="color: #a5f3fc"], [data-theme="light"] [style*="color:#a5f3fc"] { color: #0891b2 !important; } /* Jasno-białe opacity tekst (rgba(255,255,255,...)) */ [data-theme="light"] text[fill*="rgba(255,255,255"], [data-theme="light"] [style*="color: rgba(255,255,255"], [data-theme="light"] [style*="color:rgba(255,255,255"] { fill: rgba(15,23,42,0.6) !important; color: #64748b !important; } /* Pola z ciemnym rgba tłem → jasna czcionka tam gdzie potrzeba */ [data-theme="light"] [style*="color: #60a5fa"], [data-theme="light"] [style*="color:#60a5fa"] { color: #2563eb !important; } /* (reguła broad white-stroke-to-dark usunięta — powodowała czarne linie na boisku) */ /* ================================================================ 22. DODATKOWE LIGHT OVERRIDES dla workstation i admin ================================================================ */ /* Admin panel — tabele */ [data-theme="light"] table th { background: #f8fafc !important; color: #475569 !important; border-color: #e2e8f0 !important; } [data-theme="light"] table tr:hover { background: rgba(15,23,42,0.02) !important; } [data-theme="light"] table td { border-color: #f1f5f9 !important; color: #1e293b !important; } /* Chain type colors w nav-link */ [data-theme="light"] a.fsh-nav-link[style*="color"] { filter: brightness(0.65) saturate(1.4) !important; }