/* ═══════════════════════════════════════════════════════════ GMB Manager – style główne ═══════════════════════════════════════════════════════════ */ /* ── Widoczność wg roli (sterowane klasą role-* na ) ── Działa też dla elementów renderowanych dynamicznie (wiersze, akcje). KLUCZOWE: klasa siedzi na (document.documentElement), a nie na , bo istnieje już w — inline-skrypt w czyta zcache'owaną rolę z localStorage i ustawia ją PRZED pierwszym malowaniem strony. Dzięki temu zakładki admin-only nie „znikają" na ułamek sekundy przy każdej nawigacji (wcześniej klasa była ustawiana dopiero po async /auth/me → migotanie/FOUC). /auth/me w app.js tylko UZGADNIA i odświeża cache. Dopóki rola nie jest znana (brak klasy role-*), treść zależna od roli jest UKRYTA — to chroni też przed mignięciem zakładek admina u klienta. Po ustaleniu roli ukrywamy tylko elementy NIEpasujące; pasujące wracają do swojego naturalnego display (nie wymuszamy wartości → nie psujemy flex/grid). */ html:not(.role-admin):not(.role-client) .admin-only, html:not(.role-admin):not(.role-client) .client-only { display: none !important; } html.role-client .admin-only { display: none !important; } html.role-admin .client-only { display: none !important; } /* Link „Godziny otwarcia" — widoczność zależy od FLAGI per-konto (can_edit_hours), nie tylko od roli, więc nie łapie go mechanizm .admin-only/.client-only wyżej. Ten sam wzorzec: domyślnie ukryty (klasa can-hours brakuje), inline-skrypt w ustawia ją synchronicznie z cache'u PRZED renderem — patrz [v1.32]/[v1.05] w dzienniku błędów CLAUDE.md. Element NIE MA inline style="display:none" w HTML (nadpisałby tę regułę specyficznością) — hours.html samo w sobie jest wyjątkiem (zawsze pokazuje link jako aktywny, bo dostęp już zweryfikował serwer). */ html:not(.can-hours) .hours-nav-link { display: none !important; } /* Zakładki nawigacji odblokowane niestandardową rolą (services/permissions.js) — te same

co reszta, więc domyślnie ukryte regułą wyżej dla nie-admina; klasa perm- na (ustawiana z /auth/me tym samym wzorcem co can-hours) je z powrotem odsłania. Wyższa specyficzność (3 klasy) niż `.role-client .admin-only` (2 klasy) → wygrywa mimo obu !important. */ html.perm-edit_profile .nav-perm-edit_profile, html.perm-manage_media .nav-perm-manage_media, html.perm-manage_posts .nav-perm-manage_posts, html.perm-manage_menu .nav-perm-manage_menu, html.perm-manage_rank_tracker .nav-perm-manage_rank_tracker, html.perm-view_dashboard .nav-perm-view_dashboard, html.perm-view_analytics .nav-perm-view_analytics, html.perm-view_location_analytics .nav-perm-view_location_analytics, html.perm-view_forecast .nav-perm-view_forecast { display: list-item !important; } /* Przyciski (nie zakładki nawigacji) odblokowane uprawnieniem 'manage_sync' — sync pojedynczej wizytówki (Dashboard) i „Wykryj usunięte" (Opinie). */ html.perm-manage_sync .manage-sync-gate { display: inline-flex !important; } /* ── Baner podglądu „co widzi użytkownik" (impersonacja) ───────────────── Tworzony dynamicznie w app.js (renderImpersonationBanner) — nie ma go w HTML. body.has-impersonation-banner odsuwa całą treść (padding-top), żeby fixed baner niczego nie zasłaniał, niezależnie od wewnętrznego layoutu strony. */ #impersonationBanner { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; background: linear-gradient(90deg, #d97706, #b45309); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.15); } #impersonationBanner strong { font-weight: 800; } #exitImpersonationBtn { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 6px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; } #exitImpersonationBtn:hover { background: rgba(255,255,255,.32); } body.has-impersonation-banner { padding-top: 42px; } :root { --primary: #3b6ef0; /* Google-blue accent (≈ oklch(54% .19 264)) */ --primary-dark: #2f5ad6; --primary-glow: rgba(66,133,244,.28); /* Sidebar = jasne szkło (frosted glass) */ --sidebar-bg: rgba(255,255,255,.58); --sidebar-text: #5b6275; /* nieaktywny link */ --sidebar-hover: rgba(255,255,255,.55); --sidebar-active:#3b6ef0; --bg: #eef1f8; /* fallback gdy brak gradientu */ --surface: rgba(255,255,255,.68); /* szklane powierzchnie */ --surface-solid:#ffffff; --border: rgba(255,255,255,.85); /* jasna krawędź szkła */ --border-soft: rgba(0,0,0,.08); /* delikatna krawędź na jasnym tle */ --text: #1a1f2e; --muted: #6b7180; --success: #2f9e54; --warning: #ECC94B; --danger: #FC8181; --danger-dark: #e53e3e; --radius: 12px; /* kontrolki (przyciski, inputy) */ --radius-card: 20px; /* karty / panele */ --shadow: 0 2px 14px rgba(0,0,0,.055), inset 0 1px 0 rgba(255,255,255,.9); --shadow-lg: 0 12px 40px rgba(0,0,0,.14); --blur: blur(24px) saturate(160%); --sidebar-w: 240px; /* Spójny system kolorów gwiazdek (cała aplikacja) */ --color-5star: #1B8A3E; /* mocny zielony */ --color-4star: #5CB85C; /* średni zielony */ --color-3star: #F0AD00; /* żółty/złoty */ --color-2star: #E8711A; /* pomarańczowy */ --color-1star: #D9230F; /* mocny czerwony */ } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif; background: linear-gradient(145deg, oklch(97.5% 0.008 220), oklch(97% 0.012 258) 50%, oklch(97.5% 0.007 185)); background-color: var(--bg); background-attachment: fixed; color: var(--text); font-size: 14px; line-height: 1.5; min-height: 100vh; } /* ── Animowane tło: subtelne, powoli pływające „bloby" (CSS-only) ── Dwa stałe pseudo-elementy za całą treścią (z-index:-1). Każdy nosi po dwa radialne gradienty i dryfuje w przeciwną stronę → organiczny ruch bez zmian w HTML. Wyłączane przy prefers-reduced-motion. */ body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; inset: -15%; background-repeat: no-repeat; } body::before { background-image: radial-gradient(circle at 18% 12%, oklch(88% 0.06 228) 0%, transparent 42%), radial-gradient(circle at 82% 70%, oklch(88% 0.05 288) 0%, transparent 40%); opacity: .5; animation: blobFloat 26s ease-in-out infinite; } body::after { background-image: radial-gradient(circle at 60% 92%, oklch(91% 0.045 154) 0%, transparent 44%), radial-gradient(circle at 8% 78%, oklch(89% 0.05 200) 0%, transparent 38%); opacity: .38; animation: blobFloat 34s ease-in-out infinite reverse; } @keyframes blobFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(2.2%, -1.6%) scale(1.04); } 66% { transform: translate(-1.6%, 1.1%) scale(0.97); } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } } /* ── Layout ─────────────────────────────────────────────────── */ .app-container { display: flex; min-height: 100vh; } /* ── Sidebar ────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); background: var(--sidebar-bg); backdrop-filter: blur(48px) saturate(165%); -webkit-backdrop-filter: blur(48px) saturate(165%); border-right: 1px solid rgba(255,255,255,.76); box-shadow: inset 1px 0 0 rgba(255,255,255,.55), 4px 0 32px rgba(0,0,0,.05); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; overflow-y: auto; } .sidebar-header { padding: 24px 20px 16px; border-bottom: 1px solid rgba(0,0,0,.055); } .app-title { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -.3px; } .app-subtitle { font-size: 11px; color: var(--muted); margin-top: 2px; } .nav-section-label { padding: 20px 20px 6px; font-size: 10px; font-weight: 600; color: rgba(107,113,128,.7); text-transform: uppercase; letter-spacing: .8px; } .nav-links { list-style: none; padding: 8px 12px; flex: 1; } .nav-links li { margin-bottom: 2px; position: relative; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--sidebar-text); text-decoration: none; border-radius: 13px; font-size: 14px; font-weight: 500; transition: background .2s, color .2s, box-shadow .2s; } .nav-link:hover { background: var(--sidebar-hover); color: var(--text); } /* Aktywny link = biała szklana pigułka z miękkim cieniem (jak we wzorze) */ .nav-link.active { background: rgba(255,255,255,.9); color: var(--text); font-weight: 600; box-shadow: 0 2px 12px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.9); } .nav-link .nav-icon { font-size: 16px; width: 20px; text-align: center; } .sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(0,0,0,.055); } .app-version { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.06); font-size: 11px; color: var(--muted); letter-spacing: .3px; text-align: center; } .user-info { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 9px 11px; border-radius: 13px; background: rgba(255,255,255,.48); border: 1px solid rgba(255,255,255,.68); } .user-avatar { width: 36px; height: 36px; min-width: 36px; /* zapobiega collapsowi przed załadowaniem */ border-radius: 50%; object-fit: cover; background: rgba(0,0,0,.06); /* Płynne pojawienie się po załadowaniu */ opacity: 0; transition: opacity 0.2s ease; } .user-avatar.loaded { opacity: 1; } .user-name { font-size: 13px; color: var(--text); font-weight: 600; } .user-role { font-size: 11px; color: var(--muted); } .logout-btn { display: block; width: 100%; padding: 8px; background: rgba(255,255,255,.55); color: var(--muted); text-decoration: none; border: 1px solid rgba(0,0,0,.07); border-radius: 11px; text-align: center; font-size: 13px; transition: background .15s, color .15s; } .logout-btn:hover { background: #fff; color: var(--text); } /* ── Główna zawartość ───────────────────────────────────────── */ .main-content { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; display: flex; flex-direction: column; } .page-header { padding: 28px 32px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .page-title { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.45px; } .page-body { padding: 24px 32px 40px; flex: 1; } /* ── Karty ──────────────────────────────────────────────────── */ .card { background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 22px; border: 1px solid var(--border); } .card-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; color: var(--text); letter-spacing: -.2px; } .chart-fill-card { padding: 14px 14px 10px; } .line-chart-wrap { position: relative; height: 320px; } /* ── Statystyki (stats cards) ───────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-card { background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-radius: var(--radius-card); padding: 20px; border: 1px solid var(--border); box-shadow: var(--shadow); } .stat-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; } .stat-value { font-size: 30px; font-weight: 700; margin: 8px 0 2px; color: var(--text); letter-spacing: -.8px; } .stat-sub { font-size: 12px; color: var(--muted); } .stat-card.stat-primary .stat-value { color: var(--primary); } .stat-card.stat-success .stat-value { color: var(--success); } .stat-card.stat-warning .stat-value { color: #d97706; } .stat-card.stat-danger .stat-value { color: var(--danger-dark); } /* ── Przyciski ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius); border: none; cursor: pointer; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s, transform .12s, box-shadow .15s, opacity .15s; white-space: nowrap; } .btn:active { transform: scale(.97); opacity: .9; } .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 3px 14px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,.2); } .btn-primary:hover { background: var(--primary-dark); } .btn-success { background: var(--success); color: #fff; box-shadow: 0 3px 14px rgba(47,158,84,.25); } .btn-success:hover { background: #28894a; } .btn-danger { background: var(--danger-dark); color: #fff; box-shadow: 0 3px 14px rgba(229,62,62,.25); } .btn-danger:hover { background: #c53030; } .btn-warning { background: #d97706; color: #fff; } .btn-warning:hover { background: #b45309; } /* Wtórny przycisk = jasne szkło */ .btn-secondary { background: rgba(255,255,255,.7); color: var(--text); border: 1px solid var(--border-soft); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .btn-secondary:hover { background: #fff; } .btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); } .btn-outline:hover { background: var(--primary); color: #fff; } .btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 10px; } .btn-lg { padding: 12px 24px; font-size: 15px; } .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } /* ── Tabele ─────────────────────────────────────────────────── */ .table-wrapper { overflow-x: auto; border-radius: var(--radius); } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead th { text-align: left; padding: 10px 14px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: rgba(255,255,255,.45); border-bottom: 1px solid var(--border-soft); } tbody td { padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,.05); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: rgba(255,255,255,.4); } /* ── Formularz ──────────────────────────────────────────────── */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--text); } .form-control { width: 100%; padding: 10px 13px; border: 1.5px solid var(--border-soft); border-radius: var(--radius); font-size: 14px; color: var(--text); background: rgba(255,255,255,.65); transition: border-color .15s, box-shadow .15s; outline: none; } .form-control:focus { border-color: rgba(66,133,244,.45); box-shadow: 0 0 0 3px rgba(66,133,244,.1); } textarea.form-control { min-height: 100px; resize: vertical; } /* ── Badge ──────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; } .badge-success { background: #f0fff4; color: #276749; } .badge-danger { background: #fff5f5; color: #c53030; } .badge-warning { background: #fffbeb; color: #92400e; } .badge-info { background: #ebf8ff; color: #2b6cb0; } .badge-neutral { background: #f7fafc; color: #4a5568; } /* ── Gwiazdki ───────────────────────────────────────────────── */ .stars { color: #f6c90e; font-size: 14px; letter-spacing: 1px; } .stars .empty { color: #e2e8f0; } /* ── Toast notifications ────────────────────────────────────── */ #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } .toast { padding: 12px 18px; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 4px 16px rgba(0,0,0,.2); transform: translateX(120%); transition: transform .3s ease; max-width: 340px; display: flex; align-items: flex-start; gap: 12px; } .toast .toast-msg { flex: 1; line-height: 1.4; } .toast .toast-close { flex-shrink: 0; font-size: 13px; line-height: 1.4; opacity: .7; transition: opacity .15s; } .toast:hover .toast-close { opacity: 1; } .toast.show { transform: translateX(0); } .toast.toast-success { background: var(--success); } .toast.toast-error { background: var(--danger-dark); } .toast.toast-info { background: var(--primary); } .toast.toast-warning { background: #d97706; } /* Toast podsumowania synchronizacji */ .toast-sync { padding: 13px 40px 13px 16px; border-radius: 10px; color: #fff; font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.22); transform: translateX(120%); transition: transform .35s cubic-bezier(.16,1,.3,1); max-width: 300px; min-width: 220px; position: relative; } .toast-sync.show { transform: translateX(0); } .toast-sync-title { font-weight: 600; font-size: 13.5px; line-height: 1.3; margin-bottom: 4px; } .toast-sync-sub { font-size: 12px; opacity: .88; line-height: 1.3; } .toast-sync-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; opacity: .7; padding: 2px 4px; border-radius: 4px; transition: opacity .15s, background .15s; } .toast-sync-close:hover { opacity: 1; background: rgba(255,255,255,.18); } /* ── Modal ──────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .2s; } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal { background: rgba(255,255,255,.86); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255,255,255,.9); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); width: 100%; max-width: 540px; max-height: 85vh; overflow-y: auto; transform: translateY(-20px); transition: transform .2s; } .modal-overlay { background: rgba(20,24,40,.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .modal-overlay.open .modal { transform: translateY(0); } .modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: 16px; font-weight: 700; letter-spacing: -.2px; } .modal-close { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--muted); line-height: 1; padding: 0 4px; } .modal-close:hover { color: var(--text); } .modal-body { padding: 20px 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-soft); display: flex; gap: 8px; justify-content: flex-end; } /* ── Strona logowania ────────────────────────────────────────── */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-card { background: rgba(255,255,255,.72); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255,255,255,.9); border-radius: var(--radius-card); padding: 48px 40px; width: 100%; max-width: 400px; box-shadow: var(--shadow-lg); text-align: center; } .login-logo { font-size: 42px; margin-bottom: 12px; } .login-title { font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .login-subtitle { font-size: 14px; color: var(--muted); margin-bottom: 32px; } .btn-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 13px 24px; background: #fff; border: 2px solid var(--border); border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; text-decoration: none; transition: border-color .15s, box-shadow .15s; } .btn-google:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(74,108,247,.12); } .google-icon { width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%2334A853' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%23EA4335' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") no-repeat center/contain; } .login-error { background: #fff5f5; color: #c53030; border: 1px solid #fed7d7; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-top: 16px; } .login-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 12px; } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); } .login-form { text-align: left; } .login-form .form-group { margin-bottom: 14px; } /* ── Loader ─────────────────────────────────────────────────── */ .spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .page-loader { display: flex; align-items: center; justify-content: center; height: 200px; color: var(--muted); } .page-loader .spinner { border-color: rgba(74,108,247,.3); border-top-color: var(--primary); width: 32px; height: 32px; } /* ── Elementy specyficzne ────────────────────────────────────── */ .review-card { border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 12px; transition: box-shadow .15s; } .review-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); } .review-card.negative { border-left: 3px solid var(--danger-dark); } .review-card.with_content { border-left: 3px solid var(--primary); } .review-card.empty { border-left: 3px solid var(--success); } .review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .reviewer-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg); object-fit: cover; } .reviewer-name { font-weight: 600; font-size: 13px; } .review-date { font-size: 11px; color: var(--muted); } .review-comment { font-size: 13px; color: var(--text); line-height: 1.6; margin: 8px 0; } .review-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .ai-response-box { background: #f0f4ff; border: 1px solid #c3d0ff; border-radius: 8px; padding: 12px; margin: 10px 0; font-size: 13px; line-height: 1.6; } .ai-label { font-size: 11px; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; } /* ── Lokalizacje grid ───────────────────────────────────────── */ .locations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .location-card { background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; cursor: pointer; box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s; } .location-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.1); transform: translateY(-2px); } .location-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .location-alias { font-size: 12px; color: var(--primary); margin-bottom: 8px; } .location-address { font-size: 12px; color: var(--muted); margin-bottom: 12px; } /* stare klasy – zachowane dla kompatybilności */ .location-stats { display: flex; gap: 16px; } .loc-stat { text-align: center; } .loc-stat-value { font-size: 18px; font-weight: 700; color: var(--text); } .loc-stat-label { font-size: 11px; color: var(--muted); } /* Nowy układ karty: dwa wiersze (Google Maps + Okres) */ .loc-stats-block { margin-top: 10px; } .loc-ever-row { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; } .loc-ever-rating { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -.01em; } .loc-ever-dot { font-size: 16px; color: #cbd5e0; font-weight: 400; } .loc-ever-count { font-size: 15px; font-weight: 600; color: var(--text); } .loc-ever-lbl { font-size: 10px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; } .loc-period-divider { border-top: 1px solid var(--border); margin: 8px 0 6px; } .loc-period-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .loc-period-data { font-size: 12px; color: var(--muted); font-weight: 500; } .loc-period-lbl { font-size: 10px; color: #a0aec0; white-space: nowrap; } /* ── Harmonogram ─────────────────────────────────────────────── */ .run-log { background: #1a202c; color: #a0aec0; border-radius: 8px; padding: 16px; font-family: 'Menlo', 'Monaco', 'Consolas', monospace; font-size: 12px; max-height: 400px; overflow-y: auto; line-height: 1.6; } .run-log .log-error { color: #fc8181; } .run-log .log-time { color: #68d391; } /* ── Filtry ──────────────────────────────────────────────────── */ .filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; } .filter-select { padding: 8px 12px; border: 1.5px solid var(--border-soft); border-radius: var(--radius); font-size: 13px; color: var(--text); background: rgba(255,255,255,.7); outline: none; } .filter-select:focus { border-color: rgba(66,133,244,.45); box-shadow: 0 0 0 3px rgba(66,133,244,.1); } /* ── Multi-ocena: kwadraciki przełączane (1–5★) ──────────────── */ .rating-filter { display: inline-flex; gap: 4px; align-items: center; } .rating-sq { min-width: 40px; padding: 8px 6px; border: 1.5px solid var(--border-soft); border-radius: var(--radius); background: rgba(255,255,255,.7); color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; } .rating-sq:hover { border-color: rgba(66,133,244,.45); } .rating-sq.active { color: #fff; border-color: transparent; box-shadow: 0 2px 6px rgba(0,0,0,.14); } /* kolory aktywnego kwadracika wg oceny (spójne z rozkładem ocen) */ .rating-sq.active[data-rating="5"] { background: #1B8A3E; } .rating-sq.active[data-rating="4"] { background: #5CB85C; } .rating-sq.active[data-rating="3"] { background: #F0AD00; } .rating-sq.active[data-rating="2"] { background: #E8711A; } .rating-sq.active[data-rating="1"] { background: #D9230F; } /* ── Podgląd opinii w modalu odpowiedzi ──────────────────────── */ .reply-preview-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .reply-preview-head strong { color: var(--text); font-size: 13px; } .reply-preview-stars { font-size: 13px; } .reply-preview-meta { font-size: 11px; color: #718096; margin-bottom: 8px; } .reply-preview-comment { font-size: 13px; color: var(--text); line-height: 1.55; white-space: pre-wrap; max-height: 170px; overflow-y: auto; } .reply-preview-empty { color: #a0aec0; font-style: italic; } /* ── Paginacja ───────────────────────────────────────────────── */ .pagination { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 20px; } .pagination button { padding: 6px 12px; border: 1px solid var(--border); background: var(--surface); border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text); transition: background .15s; } .pagination button:hover { background: var(--bg); } .pagination button.active { background: var(--primary); color: #fff; border-color: var(--primary); } .pagination button:disabled { opacity: .4; cursor: not-allowed; } /* ── Empty state ─────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); } .empty-state-icon { font-size: 48px; margin-bottom: 12px; } .empty-state h3 { font-size: 16px; margin-bottom: 6px; color: var(--text); } /* ── Analityka ───────────────────────────────────────────────── */ .range-btn.active { background: var(--primary); color: #fff; } .sortable { cursor: pointer; user-select: none; } .sortable:hover { color: var(--primary); } .sort-ic { display: inline-block; margin-left: 4px; opacity: .5; } .sortable:hover .sort-ic { opacity: 1; } .top-tile { transition: box-shadow .15s; } .top-tile:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); } /* ── Import danych ───────────────────────────────────────────── */ .drop-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 40px 20px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; color: var(--muted); } .drop-zone:hover, .drop-zone.drag-over { border-color: var(--primary); background: rgba(74,108,247,.04); color: var(--primary); } .star-input { display: flex; gap: 6px; margin-top: 4px; } .star-btn { font-size: 28px; color: #e2e8f0; cursor: pointer; transition: color .1s, transform .1s; line-height: 1; } .star-btn:hover, .star-btn.hover { color: #f6c90e; transform: scale(1.15); } .star-btn.active { color: #f6c90e; } .import-summary { display: flex; gap: 16px; flex-wrap: wrap; } .import-sum-item { padding: 10px 16px; border-radius: 8px; font-size: 14px; } .sum-ok { background: #f0fff4; color: #276749; } .sum-skip { background: #fffbeb; color: #92400e; } .sum-err { background: #fff5f5; color: #c53030; } /* ── Badge: imported source ──────────────────────────────────── */ .source-badge { font-size: 10px; padding: 2px 6px; border-radius: 10px; background: #ebf8ff; color: #2b6cb0; font-weight: 600; vertical-align: middle; margin-left: 4px; } /* Znacznik opinii zawierającej zdjęcie/film (reviewMediaItems). Wyróżniony bursztynem, by łatwo wyłapać potencjalnie niepożądane zdjęcie. */ .media-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 12px; background: #fffbeb; color: #b45309; border: 1px solid #fcd34d; white-space: nowrap; } /* Znacznik opinii edytowanej przez klienta po opublikowaniu (sync wykrywa różnicę rating/comment vs to, co mamy zapisane — patrz previous_rating/previous_comment). */ .edited-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 12px; background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; white-space: nowrap; } /* Czerwona flaga opinii — ustawiana tylko podczas aktywnej sesji pracy (Workflow). Domyślnie wyszarzona/przezroczysta; .flagged = pełny czerwony akcent; .disabled = brak aktywnej sesji, przycisk widoczny tylko jako informacja (kursor default). */ .flag-btn { border: none; background: transparent; font-size: 15px; line-height: 1; padding: 2px 4px; cursor: pointer; filter: grayscale(1); opacity: 0.35; transition: opacity .15s, filter .15s, transform .1s; } .flag-btn:hover:not(.disabled) { opacity: 0.75; transform: scale(1.1); } .flag-btn.flagged { filter: none; opacity: 1; text-shadow: 0 0 0 #dc2626; } .flag-btn.disabled { cursor: default; opacity: 0.25; } .flag-btn.disabled.flagged { opacity: 0.8; } /* poza sesją flaga wciąż widoczna, tylko nieklikalna */ /* Rejestr opinii usuniętych z Google */ .badge-deleted { background: #fdf2f2; color: #b91c1c; border: 1px solid #f3c4c4; } .deleted-card { opacity: .92; border-left: 3px solid #e3a3a3; } .deleted-card .review-meta { font-size: 12px; margin-top: 8px; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform .3s; } .sidebar.open { transform: translateX(0); } .main-content { margin-left: 0; } .page-header, .page-body { padding-left: 20px; padding-right: 20px; } .stats-grid { grid-template-columns: 1fr 1fr; } } /* ── Pasek postępu synchronizacji ────────────────────────────── */ .sync-progress { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 18px; margin-top: 12px; animation: fadeIn .2s ease; } .sync-progress-track { height: 8px; background: #edf2f7; border-radius: 4px; overflow: hidden; margin-bottom: 8px; } .sync-progress-fill { height: 100%; background: linear-gradient(90deg, #4A6CF7, #7B63F7); border-radius: 4px; transition: width .6s ease; min-width: 3%; } .sync-progress-text { font-size: 12px; color: #718096; display: flex; justify-content: space-between; } .sync-progress-text .pct { font-weight: 600; color: #4A6CF7; } @keyframes fadeIn { from { opacity:0; transform:translateY(-4px) } to { opacity:1; transform:none } } /* ── Powiadomienie tło (auto-sync) ───────────────────────────── */ .bg-notif { position: fixed; bottom: 24px; right: 24px; background: rgba(255,255,255,.8); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); border: 1px solid var(--border); border-radius: 14px; padding: 11px 16px; box-shadow: 0 6px 24px rgba(0,0,0,.10); font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 10px; z-index: 2000; transform: translateY(80px); opacity: 0; transition: transform .3s ease, opacity .3s ease; pointer-events: none; } .bg-notif.show { transform: translateY(0); opacity: 1; } .bg-notif .bn-icon { font-size: 15px; } .bg-notif .bn-text { flex: 1; } /* ── Mały przycisk ikony na kartach wizytówek ─────────────────── */ .btn-icon-sm { background: none; border: 1px solid #e2e8f0; border-radius: 6px; color: #a0aec0; cursor: pointer; font-size: 13px; padding: 3px 7px; line-height: 1; transition: background .15s, color .15s, border-color .15s; flex-shrink: 0; } .btn-icon-sm:hover:not(:disabled) { background: #f0f5ff; color: #4A6CF7; border-color: #4A6CF7; } .btn-icon-sm:disabled { opacity: .45; cursor: not-allowed; } /* ── Dezaktywuj wizytówkę (czerwony hover na ikonie) ─────────── */ .btn-deactivate:hover:not(:disabled) { background: #fff5f5 !important; color: #c53030 !important; border-color: #fc8181 !important; } /* ── Badge lokalizacji w opiniach ────────────────────────────── */ .loc-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 600; background: #ebf4ff; color: #2b6cb0; border: 1px solid #bee3f8; vertical-align: middle; } /* ── Info paginacji w opiniach ───────────────────────────────── */ .pagination-info { font-size: 12px; color: #718096; margin: 4px 0 8px; text-align: center; } /* ── Panel postępu synchronizacji ────────────────────────────── */ .sync-panel { background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px 18px 14px; margin-bottom: 20px; box-shadow: var(--shadow); animation: fadeSlideDown .25s ease; } @keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .sync-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .sync-panel-title { font-weight: 600; font-size: 14px; margin-right: 10px; } .sync-panel-count { font-size: 12px; color: var(--muted); } .sync-panel-bar-wrap { height: 6px; background: rgba(0,0,0,.07); border-radius: 4px; overflow: hidden; margin-bottom: 12px; } .sync-panel-bar { height: 100%; background: linear-gradient(90deg, var(--primary), #7c96fa); border-radius: 4px; transition: width .4s ease; } /* Grid listy wizytówek w panelu */ .sync-panel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 5px; max-height: 260px; overflow-y: auto; } .sq-item { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 6px; font-size: 12px; background: #f8fafc; border: 1px solid #e8edf4; } .sq-icon { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; font-style: normal; } .sq-done { color: #38a169; } .sq-running { color: var(--primary); } .sq-error { color: #e53e3e; } .sq-pending { color: #a0aec0; } .sq-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } .sq-extra { font-size: 10px; color: var(--muted); flex-shrink: 0; max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sq-error-txt { color: #c53030; } /* ── Pasek wyboru zakresu dat (Dashboard) ────────────────────── */ .date-range-bar { background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 10px 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; box-shadow: var(--shadow); } /* Segmentowy przełącznik (jak we wzorze): szklany tor, biała aktywna pigułka */ .drb-presets { display: inline-flex; gap: 4px; flex-wrap: wrap; background: rgba(255,255,255,.5); border: 1px solid var(--border); border-radius: 14px; padding: 4px; } .drb-preset { padding: 6px 15px; border-radius: 10px; border: none; background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; white-space: nowrap; } .drb-preset:hover { color: var(--text); } .drb-preset.drb-active { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 1px 6px rgba(0,0,0,.08); } .drb-custom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .drb-lbl { font-size: 12px; color: var(--muted); white-space: nowrap; } .drb-date-input { padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; background: var(--surface); color: var(--text); outline: none; cursor: pointer; } .drb-date-input:focus { border-color: var(--primary); } /* ── Kolejność wizytówek w raporcie (drag & drop) ────────────── */ .ro-list { display: flex; flex-direction: column; gap: 5px; max-height: 520px; overflow-y: auto; } .ro-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; cursor: default; transition: background .15s, box-shadow .15s; user-select: none; } .ro-item.ro-drag-over { background: #ebf4ff; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(74,108,247,.2); } .ro-handle { color: #a0aec0; cursor: grab; font-size: 16px; flex-shrink: 0; padding: 0 2px; } .ro-handle:active { cursor: grabbing; } .ro-idx { font-size: 11px; color: var(--muted); width: 22px; flex-shrink: 0; text-align: right; } .ro-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ro-input { padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; width: 180px; flex-shrink: 0; background: var(--surface); color: var(--text); outline: none; } .ro-input:focus { border-color: var(--primary); } /* ── Zakładki stron (Reports, Historia) ──────────────────────── */ .page-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid var(--border); padding-bottom: 0; } .page-tab { padding: 8px 20px; border: none; background: none; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 4px 4px 0 0; transition: color .15s, border-color .15s, background .15s; } .page-tab:hover { color: var(--text); background: rgba(255,255,255,.45); } .page-tab.page-tab-active { color: var(--primary); border-bottom-color: var(--primary); background: none; } /* ── Tabela historii raportów ────────────────────────────────── */ .hist-table { width: 100%; border-collapse: collapse; font-size: 13px; } .hist-table th { text-align: left; padding: 8px 12px; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--border); } .hist-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .hist-table tr:last-child td { border-bottom: none; } .hist-table tr:hover td { background: #f8fafc; } /* ── Dropdown szablonów odpowiedzi w modalu opinii ────────────── */ .reply-tpl-bar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .tpl-drop-wrap { position: relative; } .tpl-btn { white-space: nowrap; } .tpl-drop-list { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 240px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.13); z-index: 1100; max-height: 260px; overflow-y: auto; } .tpl-drop-list.open { display: block; } .tpl-drop-item { padding: 10px 14px; font-size: 13px; cursor: pointer; color: #2d3748; border-bottom: 1px solid #f7fafc; transition: background .1s; } .tpl-drop-item:last-child { border-bottom: none; } .tpl-drop-item:hover { background: #eef2ff; color: #4A6CF7; } .tpl-drop-empty { padding: 10px 14px; font-size: 12px; color: #a0aec0; font-style: italic; } /* ── Sekcje szablonów grzecznościowych w Ustawieniach ─────────── */ .tpl-section { border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 10px; overflow: hidden; } .tpl-section-header { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; background: #f8fafc; cursor: pointer; font-weight: 600; font-size: 14px; user-select: none; transition: background .15s; } .tpl-section-header:hover { background: #eef2ff; } .tpl-section-toggle { color: #718096; font-size: 12px; } .tpl-section-body { padding: 14px 16px 16px; } /* ── KPI tiles (analytics, location-analytics) ───────────────── */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } @media (max-width: 1300px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } } .kpi-tile { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; transition: transform .15s, box-shadow .15s; cursor: default; } .kpi-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.11); } .kpi-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 14px; } .kpi-value { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--text); line-height: 1; margin-bottom: 5px; } .kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .65px; color: var(--muted); margin-bottom: 8px; } .kpi-delta { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; } .kpi-delta.up { color: var(--success); } .kpi-delta.down { color: var(--danger-dark); } .kpi-delta.flat { color: var(--muted); font-weight: 400; } /* ── GBP Performance notice ──────────────────────────────────── */ .perf-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; font-size: 13px; color: #92400e; margin-bottom: 16px; line-height: 1.5; } /* Wariant informacyjny (nie błąd) — np. dane jeszcze niedostępne z powodu opóźnienia raportowania Google, a nie awarii/braku uprawnień. */ .perf-notice.info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; } /* ── GBP Performance — pasek miesięcy ─────────────────────── */ .perf-month-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.15) transparent; -webkit-overflow-scrolling: touch; } .perf-month-strip::-webkit-scrollbar { height: 4px; } .perf-month-strip::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 2px; } .perf-month-chip { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; line-height: 1.2; transition: background .12s, color .12s, border-color .12s, box-shadow .12s; white-space: nowrap; } .perf-month-chip:hover:not(.active) { background: rgba(59,110,240,.08); border-color: rgba(59,110,240,.3); color: var(--primary); } .perf-month-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(59,110,240,.35); } .perf-chip-year { font-size: 10px; font-weight: 400; opacity: .75; margin-top: 1px; } .perf-month-chip.active .perf-chip-year { opacity: .85; } /* ── [v1.52] Własny zakres dat + pasek stanu cache'u ─────────── Pola dat wewnątrz .perf-range-fields są natywnymi przejmowanymi przez ui-datepicker.js — stylowanie wyglądu pola należy do .drb-date-input / .ui-date-*, tutaj tylko układ. */ .perf-strip-muted .perf-month-chip { opacity: .5; } .perf-range { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; } .perf-range-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .perf-range-toggle:hover, .perf-range-toggle.open { background: rgba(59,110,240,.08); border-color: rgba(59,110,240,.3); color: var(--primary); } .perf-range-ico { font-size: 13px; line-height: 1; } .perf-range-fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(0,0,0,.015); } .perf-cache-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-soft); } .perf-cache-note { font-size: 11px; color: var(--muted); line-height: 1.4; } .perf-cache-refresh { flex-shrink: 0; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border-soft); background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .perf-cache-refresh:hover:not(:disabled) { background: rgba(59,110,240,.08); border-color: rgba(59,110,240,.3); color: var(--primary); } .perf-cache-refresh:disabled { opacity: .5; cursor: default; } /* ── YoY delta na KPI tile ──────────────────────────────────── */ .kpi-delta-yoy { font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 4px; min-height: 15px; } .kpi-delta-yoy.yoy-up { color: #7c3aed; } .kpi-delta-yoy.yoy-down { color: #9f1239; } /* ── Prognoza na cały miesiąc ──────────────────────────────── */ .perf-prediction { background: rgba(59,110,240,.05); border: 1px solid rgba(59,110,240,.18); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; } .perf-pred-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--primary); margin-bottom: 8px; } .perf-pred-progress-label { font-size: 11px; font-weight: 500; color: var(--muted); } .perf-pred-bar-wrap { height: 6px; background: rgba(59,110,240,.15); border-radius: 3px; overflow: hidden; margin-bottom: 10px; } .perf-pred-bar { height: 100%; background: var(--primary); border-radius: 3px; transition: width .4s ease; } .perf-pred-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } @media (max-width: 768px) { .perf-pred-values { grid-template-columns: repeat(2, 1fr); } } .perf-pred-val { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); } .perf-pred-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .perf-pred-metric { font-size: 10px; text-align: center; } .perf-pred-num { font-size: 13px; font-weight: 700; color: var(--text); } /* ══════════════════════════════════════════════════════════ EDYCJA PROFILU — pełny system stylów ══════════════════════════════════════════════════════════ */ /* ── Nagłówek wizytówki ─────────────────────────────────── */ .pe-header { background: linear-gradient(135deg, var(--sidebar-bg) 0%, #2d3456 100%); border-radius: var(--radius); padding: 24px 28px; display: flex; align-items: center; gap: 20px; margin-bottom: 20px; box-shadow: var(--shadow); } .pe-logo-circle { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.2); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .pe-logo-circle img { width: 100%; height: 100%; object-fit: cover; } .pe-logo-initials { font-size: 22px; font-weight: 700; color: rgba(255,255,255,.7); letter-spacing: -1px; } .pe-header-body { flex: 1; min-width: 0; } .pe-header-name { font-size: 20px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .pe-header-category { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; } .pe-header-meta { display: flex; flex-wrap: wrap; gap: 14px; } .pe-meta-item { display: flex; align-items: center; gap: 5px; font-size: 13px; color: rgba(255,255,255,.75); } .pe-meta-item svg { opacity: .7; flex-shrink: 0; } .pe-meta-link { color: rgba(255,255,255,.75); text-decoration: none; } .pe-meta-link:hover { color: #fff; text-decoration: underline; } .pe-header-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .pe-cat-badge { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 20px; padding: 2px 10px; font-size: 11px; color: rgba(255,255,255,.8); } .pe-cat-badge.primary { background: rgba(74,108,247,.35); border-color: rgba(74,108,247,.6); color: #fff; } /* ── Karta z zakładkami ─────────────────────────────────── */ .pe-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .pe-tablist { display: flex; border-bottom: 2px solid var(--border); background: var(--bg); padding: 0 4px; gap: 0; } .pe-tab-btn { padding: 13px 18px; font-size: 13px; font-weight: 500; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap; } .pe-tab-btn:hover { color: var(--text); } .pe-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } .pe-pane { display: none; padding: 24px 28px; } .pe-pane.active { display: block; } /* ── Pasek akcji (zapis) ────────────────────────────────── */ .pe-actions { display: flex; align-items: center; gap: 14px; padding: 16px 28px; border-top: 1px solid var(--border); background: var(--bg); } #saveMsg { font-size: 13px; display: none; } /* ── Formularz informacji podstawowych ─────────────────── */ .pe-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pe-desc-wrap { position: relative; } .pe-char-count { position: absolute; bottom: 9px; right: 10px; font-size: 11px; color: var(--muted); background: var(--surface); padding: 1px 4px; pointer-events: none; } .pe-kw-section { margin-top: 8px; } .pe-kw-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .pe-kw-bar label { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; } .pe-kw-bar input { flex: 1; } .pe-kw-toggle { font-size: 12px; padding: 4px 10px; background: none; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--muted); transition: all .15s; white-space: nowrap; } .pe-kw-toggle:hover { border-color: var(--primary); color: var(--primary); } .pe-kw-preview { display: none; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-size: 14px; line-height: 1.6; color: var(--text); min-height: 80px; max-height: 200px; overflow-y: auto; white-space: pre-wrap; } .pe-kw-preview.visible { display: block; } .pe-kw-mark { background: #fef3c7; color: #92400e; border-radius: 3px; padding: 0 2px; font-weight: 600; } .pe-readonly-field { background: var(--bg); color: var(--muted); cursor: default; } /* ── Tabela godzin (wspólna dla regularHours i moreHours) ── */ .pe-bulk-bar { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; } .pe-bulk-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .pe-bulk-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .pe-day-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 20px; font-size: 12px; cursor: pointer; background: var(--surface); transition: all .15s; user-select: none; } .pe-day-chip input[type=checkbox] { margin: 0; accent-color: var(--primary); cursor: pointer; } .pe-day-chip:has(input:checked) { background: rgba(74,108,247,.08); border-color: var(--primary); color: var(--primary); font-weight: 500; } .pe-bulk-apply-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pe-bulk-time-wrap { display: flex; align-items: center; gap: 6px; font-size: 13px; } .pe-bulk-time-wrap input[type=time] { padding: 5px 8px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--surface); width: 100px; } .pe-bulk-sep { color: var(--muted); font-weight: 600; } .pe-bulk-quick { display: flex; gap: 6px; } .pe-bulk-quick-btn { font-size: 11px; padding: 4px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--muted); transition: all .15s; } .pe-bulk-quick-btn:hover { border-color: var(--primary); color: var(--primary); } .pe-hours-table { width: 100%; } .pe-hours-row { display: grid; grid-template-columns: 24px 140px 110px 1fr; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); } .pe-hours-row:last-child { border-bottom: none; } .pe-row-check { accent-color: var(--primary); cursor: pointer; width: 15px; height: 15px; } .pe-day-name { font-size: 13px; font-weight: 500; color: var(--text); } .pe-closed-label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; } .pe-closed-label input { accent-color: var(--muted); cursor: pointer; } .pe-times { display: flex; align-items: center; gap: 6px; transition: opacity .2s; } .pe-times input[type=time] { padding: 5px 8px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--surface); width: 96px; } .pe-sep { color: var(--muted); font-size: 13px; } /* hours.html — sama tabela dni, bez kolumny zbiorczego zaznaczania z profile-editor (stąd osobna klasa wiersza z inną liczbą kolumn grida; podklasy .pe-day-name/ .pe-closed-label/.pe-times/.pe-sep są współdzielone i działają bez zmian). */ .ho-hours-row { display: grid; grid-template-columns: 140px 110px 1fr; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); } .ho-hours-row:last-child { border-bottom: none; } .pe-import-bar { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); } .pe-import-bar .btn-sm { font-size: 12px; } /* ── Godziny specjalne ──────────────────────────────────── */ .pe-more-type { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; overflow: hidden; } .pe-more-type-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg); cursor: pointer; user-select: none; transition: background .15s; } .pe-more-type-header:hover { background: #edf2f7; } .pe-more-toggle { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; } .pe-more-type-name { font-size: 13px; font-weight: 600; color: var(--text); } .pe-more-type-sub { font-size: 12px; color: var(--muted); margin-left: auto; } .pe-more-type-body { padding: 14px; border-top: 1px solid var(--border); display: none; } .pe-more-type-body.open { display: block; } /* ── Kategorie ──────────────────────────────────────────── */ .pe-cat-section { margin-bottom: 20px; } .pe-cat-section-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; } .pe-primary-cat { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(74,108,247,.06); border: 1px solid rgba(74,108,247,.2); border-radius: 8px; } .pe-primary-cat-icon { width: 32px; height: 32px; background: rgba(74,108,247,.12); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .pe-primary-cat-name { font-size: 14px; font-weight: 600; color: var(--text); } .pe-primary-cat-id { font-size: 11px; color: var(--muted); margin-top: 1px; } .pe-additional-cats { display: flex; flex-wrap: wrap; gap: 8px; } .pe-additional-cat { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 20px; font-size: 13px; color: var(--text); background: var(--surface); } .pe-cat-info-box { display: flex; gap: 10px; padding: 12px 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; font-size: 13px; color: #1e40af; line-height: 1.5; margin-top: 16px; } .pe-empty-state { text-align: center; padding: 32px 20px; color: var(--muted); font-size: 13px; } .pe-empty-state svg { margin-bottom: 10px; opacity: .4; } /* ── Loader ─────────────────────────────────────────────── */ .pe-loader { display: none; text-align: center; padding: 56px 24px; color: var(--muted); font-size: 14px; } .pe-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto 14px; } /* ═══════════════════════════════════════════════════════════ Płynne przejścia między zakładkami (View Transitions API) Sidebar pozostaje nieruchomy, obszar treści delikatnie się przenika — koniec z „cięciem" / białym błyskiem przy zmianie strony. ═══════════════════════════════════════════════════════════ */ /* Włącz natywne przejścia między dokumentami (ten sam origin) */ @view-transition { navigation: auto; } @supports (view-transition-name: none) { /* Sidebar = element trwały: ten sam snapshot na obu stronach → brak migotania */ .sidebar { view-transition-name: gmb-sidebar; } /* Treść strony dostaje własną, dopracowaną animację */ .main-content { view-transition-name: gmb-content; } /* Sidebara nie animujemy — ma po prostu stać w miejscu */ ::view-transition-group(gmb-sidebar) { animation-duration: 0s; } ::view-transition-old(gmb-sidebar), ::view-transition-new(gmb-sidebar) { animation: none; } /* Tło (root) – krótkie, neutralne przenikanie zamiast białego błysku */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; } /* Treść: stara znika, nowa wjeżdża z dołu z miękkim fade */ ::view-transition-old(gmb-content) { animation: gmbContentOut .16s cubic-bezier(.4, 0, .2, 1) both; } ::view-transition-new(gmb-content) { animation: gmbContentIn .28s cubic-bezier(.16, 1, .3, 1) both; } } @keyframes gmbContentOut { to { opacity: 0; } } @keyframes gmbContentIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Fallback dla przeglądarek bez View Transitions: delikatne wejście treści */ @supports not (view-transition-name: none) { .main-content { animation: gmbContentIn .28s cubic-bezier(.16, 1, .3, 1) both; } } /* Dostępność: wyłącz ruch dla użytkowników, którzy go nie chcą */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } .main-content { animation: none !important; } } /* ═══════════════════════════════════════════════════════════ Pozycje lokalne (rank tracker) — siatka / heatmapa / statystyki ═══════════════════════════════════════════════════════════ */ .rank-config .form-group { margin-bottom: 16px; } .rank-config-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .rank-hint { font-size: 12px; color: var(--muted); margin-top: 6px; } /* Radio jako pigułki */ .rank-radio-group { display: flex; gap: 8px; flex-wrap: wrap; } .rank-radio { position: relative; cursor: pointer; } .rank-radio input { position: absolute; opacity: 0; pointer-events: none; } .rank-radio span { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text); background: var(--surface); transition: all .15s ease; } .rank-radio input:checked + span { border-color: var(--primary); background: var(--primary); color: #fff; } /* Nagłówek panelu wyników */ .rank-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } /* Siatka */ .rank-grid-wrap { display: flex; justify-content: center; margin: 18px 0; overflow-x: auto; } .rank-grid { display: grid; gap: 6px; } .rank-cell { width: 52px; height: 52px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; cursor: default; transition: transform .12s ease, box-shadow .12s ease; } .rank-cell:hover { transform: scale(1.12); box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 2; } .rank-cell-center { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary); } .rank-cell-center:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary), 0 4px 14px rgba(0,0,0,.25); } /* Nie znaleziono — przygaszony tekst */ .rank-cell[data-pos=""] { color: #e5e7eb; } /* Legenda */ .rank-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--text); margin: 8px 0 20px; } .rank-legend-item { display: inline-flex; align-items: center; gap: 6px; } .rank-legend-dot { width: 14px; height: 14px; border-radius: 4px; display: inline-block; } /* Pasek statystyk pod mapą */ .rank-stats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: stretch; padding: 10px 16px 0; } .rank-stat { flex: 1 1 90px; max-width: 150px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 8px 10px; text-align: center; line-height: 1.2; } .rank-stat .rs-value { font-size: 20px; font-weight: 800; color: var(--text); } .rank-stat .rs-label { font-size: 11px; color: var(--muted); margin-top: 3px; } .rank-stat.rs-accent .rs-value { color: var(--primary); } .rank-stat.rs-good .rs-value { color: var(--success); } .rank-stat.rs-bad .rs-value { color: #ef4444; } .rank-stats-note { flex: 1 1 100%; text-align: center; font-size: 12px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius); padding: 8px 10px; } /* Kafelki statystyk */ .rank-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin-top: 8px; } .rank-stat-tile { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 12px; text-align: center; background: var(--surface); } .rank-stat-tile .stat-value { font-size: 24px; font-weight: 800; color: var(--primary); } .rank-stat-tile .stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; } /* Pasek postępu */ .rank-progress-bar { height: 4px; background: var(--border); border-radius: 4px; overflow: hidden; margin: 8px 0 6px; } .rank-progress-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width .4s ease; } @media (max-width: 600px) { .rank-config-row { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════ Pozycje lokalne v2 — układ 3-kolumnowy + mapa Leaflet ═══════════════════════════════════════════════════════════ */ .rank-main { padding: 0 !important; height: 100vh; overflow: hidden; } .rank-layout { display: flex; height: calc(100vh - 0px); overflow: hidden; } .rank-left, .rank-right { overflow-y: auto; padding: 16px; background: var(--surface); flex-shrink: 0; } .rank-left { width: 260px; border-right: 1px solid var(--border); } .rank-right { width: 220px; border-left: 1px solid var(--border); } .rank-map-col { flex: 1; display: flex; flex-direction: column; min-width: 0; } .rank-section { margin-bottom: 22px; } .rank-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 10px; } .rank-divider { height: 1px; background: var(--border); margin: 18px 0; } .rank-empty { color: var(--muted); font-size: 13px; padding: 6px 0; list-style: none; } /* Pasek nad mapą */ .rank-map-bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); } #map { flex: 1; min-height: 400px; width: 100%; z-index: 1; } #mapLegend { padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface); margin: 0; } /* Przełącznik trybu */ .mode-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .mode-btn { padding: 8px 16px; border: none; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; } .mode-btn + .mode-btn { border-left: 1px solid var(--border); } .mode-btn.active { background: var(--primary); color: #fff; } /* Lista haseł */ .rank-keywords { list-style: none; margin: 0; padding: 0; } .keyword-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; cursor: pointer; margin-bottom: 4px; transition: background .12s ease; } .keyword-item:hover { background: var(--bg); } .keyword-item.active { background: rgba(74, 108, 247, .12); } .keyword-item.active .keyword-text { color: var(--primary); font-weight: 600; } .keyword-text { flex: 1; font-size: 14px; } .keyword-del { color: var(--muted); font-size: 12px; padding: 2px 6px; border-radius: 4px; opacity: 0; transition: opacity .12s ease, color .12s ease; } .keyword-item:hover .keyword-del, .competitor-item:hover .keyword-del { opacity: 1; } .keyword-del:hover { color: var(--danger-dark); background: var(--bg); } /* Lista konkurentów */ .rank-competitors { display: flex; flex-direction: column; gap: 2px; } .competitor-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; } .competitor-item:hover { background: var(--bg); } .competitor-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .competitor-name { flex: 1; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .comp-check { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; } /* Wybór koloru */ .color-picker { display: flex; gap: 10px; } .color-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: transform .12s ease, border-color .12s ease; } .color-swatch:hover { transform: scale(1.12); } .color-swatch.selected { border-color: var(--text); } /* Status wyszukiwania */ .search-status { margin-top: 14px; font-size: 12px; color: var(--muted); line-height: 1.5; } .search-status a { color: var(--primary); text-decoration: none; } .search-status a:hover { text-decoration: underline; } /* Spinner */ .rank-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: rankspin .7s linear infinite; vertical-align: middle; margin-right: 4px; } @keyframes rankspin { to { transform: rotate(360deg); } } /* Pinezki i etykiety na mapie (Leaflet divIcon) */ .rank-pin { width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); } .rank-pin-own { width: 20px; height: 20px; } .rank-cell-label { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); pointer-events: none; } @media (max-width: 1100px) { .rank-left { width: 220px; } .rank-right { width: 200px; } } /* ── Modal odpowiedzi — większy rozmiar ──────────────────────── */ .modal.modal-reply { max-width: 720px; } .modal.modal-reply textarea.form-control { min-height: 200px; font-size: 14px; line-height: 1.6; } /* ── Panel analityki opinii ──────────────────────────────────── */ .reviews-analytics { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; overflow: hidden; box-shadow: var(--shadow); } .reviews-analytics-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; cursor: pointer; user-select: none; border-bottom: 1px solid transparent; transition: background .15s, border-color .15s; } .reviews-analytics-header:hover { background: #f8fafc; } .reviews-analytics-header.open { border-bottom-color: var(--border); } .reviews-analytics-title { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; } .analytics-toggle-icon { font-size: 11px; color: var(--muted); transition: transform .2s; } .analytics-toggle-icon.rotated { transform: rotate(180deg); } .reviews-analytics-body { padding: 20px; display: none; } .reviews-analytics-body.open { display: block; } .analytics-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; } .analytics-kpi { background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; text-align: center; } .analytics-kpi-value { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.1; margin-bottom: 4px; } .analytics-kpi-label { font-size: 11px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .4px; } .analytics-kpi.kpi-success .analytics-kpi-value { color: var(--success); } .analytics-kpi.kpi-primary .analytics-kpi-value { color: var(--primary); } .analytics-kpi.kpi-warning .analytics-kpi-value { color: #d97706; } .analytics-kpi.kpi-danger .analytics-kpi-value { color: var(--danger-dark); } .analytics-rating-section { border-top: 1px solid var(--border); padding-top: 16px; } .analytics-rating-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; } .rating-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 12px; } .rating-bar-label { width: 24px; text-align: right; font-weight: 600; color: var(--text); flex-shrink: 0; } .rating-bar-track { flex: 1; background: #edf2f7; border-radius: 4px; height: 10px; overflow: hidden; } .rating-bar-fill { height: 100%; border-radius: 4px; transition: width .4s ease; } .rating-bar-count { width: 40px; text-align: right; color: var(--muted); flex-shrink: 0; } /* ── Szybkie sugestie szablonów ──────────────────────────────── */ .quick-suggestions { background: #f0f4ff; border: 1px solid #c3d0ff; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; } .quick-suggestions-label { font-size: 11px; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; } .quick-suggestions-btns { display: flex; flex-wrap: wrap; gap: 6px; } .quick-suggestion-btn { background: #fff; border: 1px solid #c3d0ff; border-radius: 6px; padding: 5px 10px; font-size: 12px; color: var(--primary); cursor: pointer; transition: background .15s, border-color .15s; text-align: left; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .quick-suggestion-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* ── Filtr dat ───────────────────────────────────────────────── */ .filter-date-group { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; } .filter-date-sep { font-size: 12px; color: var(--muted); white-space: nowrap; } input[type="date"].filter-select { min-width: 130px; } /* ── Pod-zakładki (Opinie / Analiza opinii) ──────────────────── */ .subtabs { display: flex; gap: 4px; border-bottom: 2px solid #e2e8f0; margin-bottom: 18px; } .subtab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 10px 18px; font-size: 14px; font-weight: 600; color: #718096; cursor: pointer; transition: color .15s, border-color .15s; } .subtab:hover { color: #4A6CF7; } .subtab.active { color: #4A6CF7; border-bottom-color: #4A6CF7; } /* ── Baner sentymentu w modalu odpowiedzi ────────────────────── */ .sentiment-banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; margin-bottom: 14px; border: 1px solid; } .sentiment-banner .sb-hint { font-weight: 400; opacity: .85; } /* ── Motywy: chipsy na kartach opinii ────────────────────────── */ .review-themes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; } .theme-tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; } .theme-add-btn { background: #f7fafc; border: 1px dashed #cbd5e0; color: #4A6CF7; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; cursor: pointer; } .theme-add-btn:hover { background: #eef2ff; border-color: #4A6CF7; } /* Kółko z × na tagu motywu — ukryte, wysuwa się płynnie na hover karty/tagu. Szybkie usunięcie motywu bez otwierania modalu (patrz removeReviewTheme). */ .theme-tag { gap: 4px; } .theme-tag-x { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,.28); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; max-width: 0; margin-left: -4px; overflow: hidden; transition: opacity .14s ease, max-width .14s ease, margin-left .14s ease; } .theme-tag:hover .theme-tag-x { opacity: 1; max-width: 14px; margin-left: 0; } .theme-tag-x:hover { background: rgba(255,255,255,.5); } /* ── Modal motywów: pole z chipsami + datalist ───────────────── */ .theme-chip-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid #cbd5e0; border-radius: 8px; padding: 8px 10px; min-height: 44px; cursor: text; } .theme-chip-input:focus-within { border-color: #4A6CF7; } .theme-chip { display: inline-flex; align-items: center; gap: 5px; background: #eef2ff; color: #3a4cd6; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; } .theme-chip .chip-x { cursor: pointer; font-weight: 700; opacity: .7; } .theme-chip .chip-x:hover { opacity: 1; } .theme-input { border: none; outline: none; flex: 1; min-width: 140px; font-size: 13px; padding: 4px 0; } .theme-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .theme-quick-label { width: 100%; font-size: 12px; color: #718096; margin-bottom: 2px; } .theme-quick-btn { background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 20px; padding: 3px 11px; font-size: 12px; cursor: pointer; color: #4a5568; } .theme-quick-btn:hover { background: #eef2ff; border-color: #4A6CF7; } /* ── Analiza motywów: paski częstości ────────────────────────── */ .theme-ana-row { margin-bottom: 14px; } .theme-ana-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; } .theme-ana-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 7px; } .theme-ana-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .theme-ana-meta { font-size: 12px; color: #718096; } .theme-ana-bar { display: flex; height: 18px; border-radius: 5px; overflow: hidden; background: #edf2f7; } .theme-ana-seg { height: 100%; } .theme-ana-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #4a5568; margin-bottom: 16px; } .theme-ana-legend span { display: inline-flex; align-items: center; gap: 6px; } .theme-ana-legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; } /* ═══════════════════════════════════════════════════════════ Liquid-glass: globalny szlif (scrollbar, mikrointerakcje) Dodane przy migracji stylu na wzór „Business Profile Manager". ═══════════════════════════════════════════════════════════ */ /* Cienki pasek przewijania jak we wzorze */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.13); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.22); } /* Delikatny „press" na przyciskach (jak w makiecie) */ button { transition: opacity .15s, transform .15s, background .15s, box-shadow .15s; } /* Spójny focus-ring dla pól wzorowany na makiecie */ input:focus, textarea:focus, select:focus { border-color: rgba(66,133,244,.45); box-shadow: 0 0 0 3px rgba(66,133,244,.1); } /* Karty częstości motywów na jasnym tle */ .theme-ana-bar { background: rgba(0,0,0,.07); } /* ─── Ustawienia: listy motywów domyślnych ──────────────────── */ .themes-cols { display:flex; gap:16px; flex-wrap:wrap; } .themes-col { flex:1; min-width:240px; display:flex; flex-direction:column; } .themes-col-head { font-weight:700; font-size:14px; padding:8px 12px; border-radius:10px 10px 0 0; } .themes-col-pos { background:rgba(72,187,120,.14); color:#2f855a; } .themes-col-neg { background:rgba(229,62,62,.12); color:#c53030; } .themes-col-hint { font-weight:500; font-size:12px; opacity:.75; } .themes-list { border:1px solid var(--border-soft,#e2e8f0); border-top:none; border-radius:0 0 10px 10px; padding:8px; display:flex; flex-direction:column; gap:6px; min-height:60px; } .themes-empty { font-size:12px; color:#a0aec0; padding:10px; text-align:center; } .theme-row { display:flex; align-items:center; justify-content:space-between; gap:8px; background:rgba(0,0,0,.03); border-radius:8px; padding:6px 10px; font-size:13px; } .theme-row-name { font-weight:600; display:flex; align-items:center; gap:6px; } .theme-row-count { background:rgba(0,0,0,.08); border-radius:20px; padding:0 7px; font-size:11px; font-weight:600; } .theme-row-actions { display:flex; gap:6px; flex-shrink:0; } .theme-row-btn { border:1px solid var(--border-soft,#e2e8f0); background:#fff; border-radius:6px; font-size:11px; padding:2px 7px; cursor:pointer; color:#4A6CF7; white-space:nowrap; } .theme-row-btn:hover { background:#eef2ff; } .theme-row-del { color:#e53e3e; font-size:14px; line-height:1; padding:2px 8px; } .theme-row-del:hover { background:#fff5f5; } .themes-add { display:flex; gap:8px; margin-top:10px; } .themes-add .form-control { flex:1; } .themes-incidental { display:flex; flex-direction:column; gap:6px; } .theme-row-inc { background:rgba(0,0,0,.025); } .theme-inc-sent { font-size:10px; font-weight:700; border-radius:6px; padding:1px 6px; } .theme-inc-positive { background:rgba(72,187,120,.16); color:#2f855a; } .theme-inc-negative { background:rgba(229,62,62,.14); color:#c53030; } /* ─── Modal motywów opinii: dwie listy wyboru ───────────────── */ .theme-modal-hint { font-size:13px; color:#555; background:#f8fafc; border-radius:8px; padding:9px 12px; margin-bottom:14px; } .theme-pick-cols { display:flex; gap:14px; flex-wrap:wrap; } .theme-pick-col { flex:1; min-width:200px; border:1.5px solid var(--border-soft,#e2e8f0); border-radius:12px; padding:10px; transition:border-color .15s, box-shadow .15s; opacity:.82; } .theme-pick-col.theme-col-active { opacity:1; border-color:#4A6CF7; box-shadow:0 0 0 3px rgba(74,108,247,.10); } .theme-pick-head { font-weight:700; font-size:13px; margin-bottom:8px; } .theme-col-pos { color:#2f855a; } .theme-col-neg { color:#c53030; } .theme-pick-list { display:flex; flex-wrap:wrap; gap:6px; } .theme-pick-empty { font-size:12px; color:#a0aec0; } .theme-pick-item { border:1px solid var(--border-soft,#e2e8f0); background:#fff; border-radius:20px; padding:5px 12px; font-size:13px; cursor:pointer; transition:all .12s; } .theme-pick-item:hover { border-color:#4A6CF7; } .theme-pick-item.selected { background:#4A6CF7; border-color:#4A6CF7; color:#fff; font-weight:600; } .theme-incidental-box { margin-top:16px; } .theme-incidental-hint { font-size:11px; color:#a0aec0; margin-top:5px; } /* ─── Modal odpowiedzi: badge formy grzecznościowej (auto Pani/Pan) ─ */ .salu-badge { display:inline-block; font-size:11px; font-weight:700; border-radius:20px; padding:1px 9px; margin-left:8px; vertical-align:middle; } .salu-nick { font-size:12px; color:#718096; margin-left:8px; font-weight:600; } .salu-pani { background:rgba(213,63,140,.14); color:#b83280; } .salu-pan { background:rgba(49,130,206,.14); color:#2b6cb0; } .salu-panipan { background:rgba(0,0,0,.07); color:#4a5568; } .qs-salu { font-size:12px; } .tpl-btn.detected { border-color:#4A6CF7 !important; box-shadow:0 0 0 2px rgba(74,108,247,.18); font-weight:700; } /* ─── Drag & drop motywów w Ustawieniach ────────────────────── */ .theme-row { cursor:default; } .theme-row[draggable="true"] { cursor:grab; } .theme-row-grip { color:#a0aec0; font-size:14px; line-height:1; cursor:grab; user-select:none; margin-right:2px; } .theme-row.dragging { opacity:.45; cursor:grabbing; } .themes-list.drop-target, .themes-incidental.drop-target { outline:2px dashed #4A6CF7; outline-offset:2px; background:rgba(74,108,247,.05); border-radius:10px; } .themes-incidental { min-height:48px; } /* ─── Liquid glass — szybkie motywy w panelu Opinii ───────────── Cały wygląd „liquid glass" sterują poniższe zmienne. Aby zmienić styl, edytuj tylko ten blok :root (tło, rozmycie, obwódka, cień, kolor tekstu). */ :root { --lg-bg: rgba(255,255,255,.45); --lg-bg-hover: rgba(255,255,255,.72); --lg-border: rgba(255,255,255,.65); --lg-blur: blur(10px) saturate(160%); --lg-shadow: 0 2px 10px rgba(31,38,135,.12), inset 0 1px 0 rgba(255,255,255,.55); --lg-text: #2d3748; --lg-radius: 20px; } .quick-themes { display:inline-flex; gap:6px; flex-wrap:wrap; vertical-align:middle; } .lg-chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--lg-text); padding:4px 11px; border-radius:var(--lg-radius); background:var(--lg-bg); border:1px solid var(--lg-border); -webkit-backdrop-filter:var(--lg-blur); backdrop-filter:var(--lg-blur); box-shadow:var(--lg-shadow); cursor:pointer; transition:background .15s, transform .12s, box-shadow .15s; } .lg-chip:hover { background:var(--lg-bg-hover); transform:translateY(-1px); box-shadow:0 4px 16px rgba(31,38,135,.18), inset 0 1px 0 rgba(255,255,255,.65); } .lg-chip:active { transform:translateY(0); } .lg-chip-plus { font-weight:800; color:#4A6CF7; font-size:13px; line-height:1; } /* ─── Sesje pracy (Workflow) ─────────────────────────────────────────────── */ .session-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; margin-bottom:14px; background:var(--surface, rgba(255,255,255,.68)); backdrop-filter:blur(var(--blur,24px)) saturate(150%); border:1px solid var(--border-soft, rgba(255,255,255,.5)); border-radius:var(--radius-card,16px); box-shadow:var(--shadow, 0 4px 18px rgba(31,38,135,.10)); } .session-bar.active { border-color:rgba(39,103,73,.35); } .session-bar.paused { border-color:rgba(191,135,0,.4); } .session-bar .session-info { font-size:13px; color:#2d3748; flex:1; min-width:180px; } .session-bar .btn { margin-left:auto; } .session-dot { width:10px; height:10px; border-radius:50%; background:#cbd5e0; flex:none; } .session-dot.active { background:#38a169; box-shadow:0 0 0 0 rgba(56,161,105,.5); animation:sessPulse 2s infinite; } .session-dot.paused { background:#d69e2e; } @keyframes sessPulse { 0% { box-shadow:0 0 0 0 rgba(56,161,105,.5); } 70% { box-shadow:0 0 0 8px rgba(56,161,105,0); } 100% { box-shadow:0 0 0 0 rgba(56,161,105,0); } } @media (prefers-reduced-motion: reduce) { .session-dot.active { animation:none; } } .session-changes { padding:12px 16px; margin-bottom:14px; border-radius:var(--radius-card,16px); background:rgba(66,133,244,.08); border:1px solid rgba(66,133,244,.22); } .session-changes.none { background:rgba(160,174,192,.10); border-color:rgba(160,174,192,.25); color:#718096; font-size:13px; } .session-changes .sc-title { font-weight:700; font-size:13px; color:#2d3748; margin-bottom:8px; } .session-changes .sc-list { display:flex; flex-wrap:wrap; gap:8px; } .sc-item { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.7); border:1px solid var(--border-soft,rgba(255,255,255,.5)); border-radius:999px; padding:4px 12px; font-size:13px; color:#2d3748; } .sc-item .sc-delta { font-weight:700; font-size:12px; } .sc-item.up .sc-delta { color:#276749; } .sc-item.down .sc-delta { color:#c53030; } /* ── Spójne emoji cross-platform — patrz sekcja „Platformy nie-Apple" na końcu pliku ([v1.47]: Twemoji zastąpione self-hostowanym fontem Noto Color Emoji + tryb odchudzonej grafiki dla Windows/Linux). ──────── */ /* ── Wydajność renderowania (bez zmiany wyglądu) ────────────────────────── */ /* Kompozytor izoluje każdą kartę osobno — bez przeliczania reszty strony przy zmianie jednej karty. Zero wpływu na wygląd, realny zysk zwłaszcza przy wielu kartach naraz (dashboard, lista wizytówek) na słabszym GPU. */ .card, .stat-card, .location-card { contain: layout paint style; } /* Przeglądarka pomija layout/paint dla treści poza widocznym obszarem — przydatne przy długich listach opinii/wizytówek. Zero wpływu na wygląd widocznej zawartości. */ .locations-grid, #locationsGrid, #reviewsList { content-visibility: auto; contain-intrinsic-size: 0 200px; } /* Wcześniejsze wydzielenie warstwy GPU TYLKO dla kluczowych, ciężkich elementów blur (sidebar, modal) — celowo NIE na każdej karcie, bo nadużyty will-change zwiększa zużycie pamięci GPU i może pogorszyć, nie poprawić, wydajność. */ .sidebar, .modal { will-change: backdrop-filter; } /* Drzewo uprawnień w kreatorze ról (Użytkownicy → Role) — zakładka→pod-zakładka. */ .role-perm-page { margin-bottom: 2px; } .role-perm-page-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; } .role-perm-page-row:hover { background: rgba(66, 133, 244, .08); } .role-perm-page-row.role-perm-leaf { font-weight: 400; cursor: default; } .role-perm-page-label { flex: 1; } .role-perm-page-chevron { font-size: 11px; color: #a0aec0; width: 12px; text-align: center; } .role-perm-page-children { margin: 2px 0 6px 26px; padding-left: 10px; border-left: 2px solid rgba(66, 133, 244, .15); } .role-perm-child-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════════ KOMPONENT WYBORU (ui-select.js) — jeden wzorzec dla całej aplikacji. Źródło stylu: modal „Nowa rola" (drzewo uprawnień `.role-perm-*` wyżej). Stamtąd: promień wiersza 6px, hover rgba(66,133,244,.08), 13px, waga 600 na pozycji aktywnej, chevron w kolorze #a0aec0. Panel dziedziczy szkło z `.modal` (blur 40px / saturate 180%). Natywny zostaje w DOM, ukryty — patrz komentarz w ui-datepicker.js. ═══════════════════════════════════════════════════════════════════════ */ .ui-date { position: relative; display: inline-block; vertical-align: middle; } .ui-date-block { display: block; width: 100%; } input.ui-date-native { position: absolute; opacity: 0; pointer-events: none; width: 100%; height: 100%; left: 0; top: 0; margin: 0; border: 0; padding: 0; } .ui-date-trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 13px; border: 1.5px solid var(--border-soft); border-radius: var(--radius); background: rgba(255,255,255,.65); color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.35; text-align: left; cursor: pointer; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; } .ui-date-compact .ui-date-trigger { padding: 8px 12px; font-size: 13px; gap: 6px; } .ui-date-trigger:hover:not(:disabled) { background: rgba(255,255,255,.85); border-color: rgba(66,133,244,.28); } .ui-date-trigger:focus-visible, .ui-date-open .ui-date-trigger { border-color: rgba(66,133,244,.45); box-shadow: 0 0 0 3px rgba(66,133,244,.1); } .ui-date-icon { flex: none; display: flex; color: #a0aec0; transition: color .15s; } .ui-date-open .ui-date-icon { color: rgba(66,133,244,.75); } .ui-date-label { flex: 1; min-width: 0; white-space: nowrap; font-variant-numeric: tabular-nums; } .ui-date-trigger.ui-date-placeholder .ui-date-label { color: var(--muted); } .ui-date-disabled { opacity: .55; } .ui-date-disabled .ui-date-trigger { cursor: not-allowed; } /* ── Panel (montowany do , jak .ui-sel-popup) ────────────────────── */ .ui-date-popup { position: fixed; z-index: 3000; width: 272px; padding: 10px; background: rgba(255,255,255,.86); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255,255,255,.9); border-radius: 16px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(-6px) scale(.985); transition: opacity .16s ease, transform .16s ease; } .ui-date-popup-up { transform: translateY(6px) scale(.985); } .ui-date-popup.ui-date-popup-in { opacity: 1; transform: translateY(0) scale(1); } .ui-date-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ui-date-nav { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; transition: background .12s, color .12s; } .ui-date-nav:hover { background: rgba(66,133,244,.1); color: #2b5fd0; } .ui-date-title { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; border: none; background: transparent; padding: 4px 8px; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: -.1px; color: var(--text); text-transform: capitalize; cursor: pointer; transition: background .12s; } .ui-date-title:hover { background: rgba(66,133,244,.08); } .ui-date-title-static { cursor: default; } .ui-date-title-static:hover { background: transparent; } .ui-date-title-chevron { font-size: 10px; color: #a0aec0; } .ui-date-weekrow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; } .ui-date-weekrow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; } .ui-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .ui-date-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: transparent; font-family: inherit; font-size: 13px; color: var(--text); cursor: pointer; transition: background .12s, color .12s; } .ui-date-cell:hover:not(:disabled) { background: rgba(66,133,244,.1); } .ui-date-cell-out { color: #c3c9d5; } .ui-date-cell-today { font-weight: 700; box-shadow: inset 0 0 0 1.5px rgba(66,133,244,.4); } .ui-date-cell-sel { background: #2b5fd0; color: #fff; font-weight: 600; } .ui-date-cell-sel:hover { background: #2b5fd0; } .ui-date-cell-off { color: #d7dbe3; cursor: not-allowed; } .ui-date-month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 2px; } .ui-date-month-cell { padding: 10px 4px; border: none; border-radius: 10px; background: transparent; font-family: inherit; font-size: 13px; text-transform: capitalize; color: var(--text); cursor: pointer; transition: background .12s, color .12s; } .ui-date-month-cell:hover { background: rgba(66,133,244,.1); } .ui-date-month-cell.ui-date-cell-sel { background: #2b5fd0; color: #fff; font-weight: 600; } .ui-date-month-cell.ui-date-cell-today:not(.ui-date-cell-sel) { box-shadow: inset 0 0 0 1.5px rgba(66,133,244,.4); } .ui-date-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); } .ui-date-link { border: none; background: transparent; padding: 4px 6px; border-radius: 6px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #2b5fd0; cursor: pointer; transition: background .12s; } .ui-date-link:hover { background: rgba(66,133,244,.1); } html.plt-noapple .ui-date-popup { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.97); } /* ═══ Platformy nie-Apple (Windows/Linux) — emoji + odchudzona grafika ═══ Klasa html.plt-noapple jest nadawana SYNCHRONICZNIE w inline-skrypcie każdej strony (wzorzec anty-FOUC z [v1.05]/[v1.33] — detekcja platformy jest synchroniczna, zero sieci). Na Mac/iOS klasa nigdy nie występuje → poniższy blok jest tam martwy, wygląd 100% bez zmian. 1) EMOJI ([v1.47], zastępuje Twemoji z [v1.38]): self-hostowany font Noto Color Emoji (licencja OFL, pliki w /fonts/noto-emoji/, 10 segmentów woff2 ładowanych na żądanie wg unicode-range). Font jest wpięty w stack TYLKO pod html.plt-noapple, więc Mac/iOS zawsze używa natywnego Apple Color Emoji. Uwaga prawna: wygląd 1:1 Apple jest nieosiągalny legalnie (czcionka Apple nie jest licencjonowana do osadzania) — Noto to najbliższy legalny odpowiednik z głębią kolorów. 2) WYDAJNOŚĆ: Windows kompozytuje backdrop-filter znacznie drożej niż macOS. Neutralizujemy najdroższe efekty: zamrożenie animacji tła (bloby wymuszały przeliczanie blura CO KLATKĘ pod każdą szklaną powierzchnią) i wyłączenie blura na kartach/chipach przez nadpisanie tokenów --blur/--lg-blur (+ bardziej kryjące --surface jako rekompensata). Sidebar i modale ZACHOWUJĄ blur (sygnaturowy wygląd, po zamrożeniu tła ich koszt jest akceptowalny). */ html.plt-noapple body, html.plt-noapple button, html.plt-noapple input, html.plt-noapple select, html.plt-noapple textarea { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, 'Noto Color Emoji', sans-serif; } html.plt-noapple { --blur: none; /* karty/panele: bez backdrop-filter */ --lg-blur: none; /* chipy liquid-glass: bez blura */ --surface: rgba(255,255,255,.92); /* rekompensata krycia bez blura */ } html.plt-noapple body::before, html.plt-noapple body::after { animation: none; } /* statyczne bloby tła */ /* Panel wyboru: bez backdrop-filter (ta sama zasada co karty/chipy w [v1.47]); krycie podbite, żeby lista pozostała czytelna nad treścią strony. */ html.plt-noapple .ui-sel-popup { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.97); } html.plt-noapple .btn-secondary { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.92); } /* @font-face Noto Color Emoji — wygenerowane z Google Fonts (css2 v39), URL-e przepisane na self-host. NIE edytuj unicode-range ręcznie. */ @font-face { font-family: 'Noto Color Emoji'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/noto-emoji/noto-emoji.0.woff2) format('woff2'); unicode-range: U+1f1e6-1f1ff; } @font-face { font-family: 'Noto Color Emoji'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/noto-emoji/noto-emoji.1.woff2) format('woff2'); unicode-range: U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f; } @font-face { font-family: 'Noto Color Emoji'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/noto-emoji/noto-emoji.2.woff2) format('woff2'); unicode-range: U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f507, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9d1-1f9d2, U+1f9e1, U+1fa75-1fa77, U+1faaf; } @font-face { font-family: 'Noto Color Emoji'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/noto-emoji/noto-emoji.3.woff2) format('woff2'); unicode-range: U+200d, U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4a5, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f508-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa8e-1fa8f, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae; } @font-face { font-family: 'Noto Color Emoji'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/noto-emoji/noto-emoji.4.woff2) format('woff2'); unicode-range: U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa8a, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9, U+1fadf; } @font-face { font-family: 'Noto Color Emoji'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/noto-emoji/noto-emoji.5.woff2) format('woff2'); unicode-range: U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c; } @font-face { font-family: 'Noto Color Emoji'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/noto-emoji/noto-emoji.6.woff2) format('woff2'); unicode-range: U+200d, U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f344-1f37f, U+1f382, U+1f52a, U+1f7e9, U+1f7eb, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadc; } @font-face { font-family: 'Noto Color Emoji'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/noto-emoji/noto-emoji.7.woff2) format('woff2'); unicode-range: U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f6d8, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabf, U+1facd-1facf, U+1fae7; } @font-face { font-family: 'Noto Color Emoji'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/noto-emoji/noto-emoji.8.woff2) format('woff2'); unicode-range: U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+27a1, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f430, U+1f466-1f469, U+1f46b-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa70, U+1fa82, U+1fac3-1fac5, U+1fac8, U+1faef; } @font-face { font-family: 'Noto Color Emoji'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/noto-emoji/noto-emoji.9.woff2) format('woff2'); unicode-range: U+200d, U+2194-2195, U+2603, U+261d, U+2620, U+2639-263a, U+2665, U+26a1, U+26c4, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f389-1f38a, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a2, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fac6, U+1fae0-1fae6, U+1fae8-1faea, U+1faef-1faf8; }