/* -------------------------------------------------------------------------- */ /* Design tokens (globálne) */ /* Breakpointy: 480 / 720 / 950 / 1200 */ /* -------------------------------------------------------------------------- */ :root { /* Brand */ --accent: #ff1a1a; --accent-2: #ff7a7a; /* Surfaces */ --bg: #07070a; --surface: rgba(255, 255, 255, 0.035); --surface-2: rgba(255, 255, 255, 0.065); --glass: rgba(255, 255, 255, 0.040); --border: rgba(255, 255, 255, 0.10); --border-2: rgba(255, 255, 255, 0.16); /* Highlights */ --glow: 0 0 0 1px rgba(255, 62, 62, 0.22), 0 16px 60px rgba(0,0,0,0.55); /* Text */ --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.64); --muted-2: rgba(255,255,255,0.48); /* Shadows */ --shadow: 0 22px 80px rgba(0,0,0,0.62); --shadow-soft: 0 14px 52px rgba(0,0,0,0.46); /* Radii */ --radius: 18px; --radius-sm: 12px; --radius-lg: 22px; /* Spacing */ --pad-x: clamp(16px, 3.2vw, 32px); /* A11y ring */ --ring: 0 0 0 3px rgba(255, 62, 62, 0.28); } /* Light theme overrides (toggle via ) */ html[data-theme="light"] { /* Brand */ --accent: #d71f1f; --accent-2: #ff1a1a; /* Surfaces */ /* Softer than pure white: layered greys for readability */ --bg: #eef1f7; --surface: rgba(255, 255, 255, 0.62); --surface-2: rgba(255, 255, 255, 0.78); --glass: rgba(255, 255, 255, 0.55); --border: rgba(10, 14, 26, 0.12); --border-2: rgba(10, 14, 26, 0.18); /* Highlights */ --glow: 0 0 0 1px rgba(215, 31, 31, 0.18), 0 16px 60px rgba(0,0,0,0.10); /* Text */ --text: rgba(10, 14, 26, 0.92); --muted: rgba(10, 14, 26, 0.64); --muted-2: rgba(10, 14, 26, 0.48); /* Shadows */ --shadow: 0 22px 80px rgba(10,14,26,0.10); --shadow-soft: 0 14px 52px rgba(10,14,26,0.08); /* A11y ring */ --ring: 0 0 0 3px rgba(215, 31, 31, 0.22); } /* Paper theme: light page canvas + keep dark UI panels (3rd mode). */ html[data-theme="paper"] { --bg: #eef1f7; /* light canvas */ } /* Base page text should be dark on the light canvas */ html[data-theme="paper"] body, html[data-theme="paper"] html { background: var(--bg); color: rgba(10, 14, 26, 0.92); } /* Keep the original "dark UI" readable: panels/cards keep white text */ html[data-theme="paper"] .card, html[data-theme="paper"] .glass, html[data-theme="paper"] .site-header, html[data-theme="paper"] .mobile-nav, html[data-theme="paper"] .dash, html[data-theme="paper"] .dash-topbar, html[data-theme="paper"] .dash-nav, html[data-theme="paper"] .dash-sidebar, html[data-theme="paper"] .section-layout, html[data-theme="paper"] .section-rail, html[data-theme="paper"] .section-body, html[data-theme="paper"] .orders-table, html[data-theme="paper"] .admin-table, html[data-theme="paper"] .table, html[data-theme="paper"] .notif-panel, html[data-theme="paper"] .notif-panel *, html[data-theme="paper"] .ui-modal, html[data-theme="paper"] .ui-modal *, html[data-theme="paper"] .ui-toast, html[data-theme="paper"] .ui-toast * { color: var(--text); } /* Give the dark UI a subtle lift off the light canvas */ html[data-theme="paper"] .dash-shell, html[data-theme="paper"] .section-layout, html[data-theme="paper"] main { filter: drop-shadow(0 20px 80px rgba(10,14,26,0.18)); } * { box-sizing: border-box; } body, html { margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; overflow-x: hidden; } /* Global typography (more modern contrast + rhythm) */ body { line-height: 1.55; letter-spacing: 0.01em; } h1, h2, h3, h4 { letter-spacing: -0.01em; } /* Global cards/glass: stronger separation (visible change) */ .card.glass, .glass { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.10); box-shadow: var(--shadow-soft); } html[data-theme="light"] .card.glass, html[data-theme="light"] .glass { background: var(--glass); border-color: var(--border); } /* Theme toggle button */ .ks-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,0.05); color: inherit; cursor: pointer; user-select: none; } html[data-theme="light"] .ks-theme-toggle { background: rgba(10,14,26,0.04); } /* Fix hardcoded dark-mode colors in light theme */ html[data-theme="light"] .field__label, html[data-theme="light"] .auth-foot, html[data-theme="light"] .lead, html[data-theme="light"] .ig-text, html[data-theme="light"] .dash-section-title, html[data-theme="light"] .muted, html[data-theme="light"] .file-input, html[data-theme="light"] .ks-file-upload__text, html[data-theme="light"] .ui-toast__text, html[data-theme="light"] .ui-toast__close, html[data-theme="light"] .ui-modal__body, html[data-theme="light"] .ui-muted { color: var(--muted) !important; } html[data-theme="light"] .dash-section-title, html[data-theme="light"] .ui-toast__text, html[data-theme="light"] .ui-modal__body { color: var(--text) !important; } html[data-theme="light"] .field__input { background: rgba(255,255,255,0.85) !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder, html[data-theme="light"] .ui-input::placeholder, html[data-theme="light"] .field-input::placeholder { color: rgba(10,14,26,0.42) !important; } html[data-theme="light"] .link-accent { color: var(--text) !important; } html[data-theme="light"] .alert { background: rgba(255,255,255,0.85) !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="light"] .ui-toast, html[data-theme="light"] .ui-modal { border-color: var(--border) !important; } html[data-theme="light"] .ui-toast__close { color: rgba(10,14,26,0.55) !important; } /* Light theme: core surfaces + components */ html[data-theme="light"] body, html[data-theme="light"] html { background: var(--bg); color: var(--text); } html[data-theme="light"] .btn, html[data-theme="light"] .btn-ghost, html[data-theme="light"] .ks-app-btn, html[data-theme="light"] .ks-app-notif { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="light"] .btn:hover, html[data-theme="light"] .btn-ghost:hover, html[data-theme="light"] .ks-app-btn:hover, html[data-theme="light"] .ks-app-notif:hover { background: #ffffff !important; } html[data-theme="light"] .dash, html[data-theme="light"] .dash-shell { background: var(--bg) !important; } html[data-theme="light"] .dash-content { background: var(--bg) !important; } html[data-theme="paper"] .dash-content { background: var(--bg) !important; } html[data-theme="light"] .dash-topbar, html[data-theme="light"] .dash-nav, html[data-theme="light"] .dash-sidebar { background: var(--surface-2) !important; border-color: var(--border) !important; } html[data-theme="light"] .dash-link { border-color: var(--border) !important; background: var(--surface) !important; color: var(--text) !important; } html[data-theme="light"] .dash-link:hover { background: #ffffff !important; } /* Tables */ html[data-theme="light"] .table, html[data-theme="light"] .admin-table, html[data-theme="light"] .orders-table { color: var(--text) !important; border: 1px solid var(--border) !important; background: #ffffff !important; } html[data-theme="light"] .table thead tr, html[data-theme="light"] .admin-thead tr, html[data-theme="light"] .orders-table thead tr { background: rgba(10,14,26,0.04) !important; } html[data-theme="light"] .table tbody tr:hover, html[data-theme="light"] .admin-tbody tr:hover, html[data-theme="light"] .orders-table tbody tr:hover { background: rgba(10,14,26,0.04) !important; } html[data-theme="light"] .orders-table tbody tr { border-bottom-color: rgba(10,14,26,0.08) !important; } html[data-theme="light"] .orders-table--expandable .order-pack__detail { background: rgba(10,14,26,0.03) !important; } /* Notifications panel + UI overlays */ html[data-theme="light"] .notif-panel, html[data-theme="light"] .ui-toast, html[data-theme="light"] .ui-modal { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="light"] .ui-modal__header, html[data-theme="light"] .ui-modal__footer { border-color: var(--border) !important; } html[data-theme="light"] .ui-modal__x { color: var(--text) !important; background: rgba(10,14,26,0.04) !important; border-color: var(--border) !important; } html[data-theme="light"] .ui-toast__close:hover, html[data-theme="light"] .ui-modal__x:hover { background: rgba(10,14,26,0.06) !important; } /* -------------------------------------------------------------------------- */ /* LIGHT MODE: Global component pass (system-wide) */ /* Goal: make light mode fully usable even where legacy CSS hard-codes dark. */ /* -------------------------------------------------------------------------- */ html[data-theme="light"] .site-header, html[data-theme="light"] .mobile-nav, html[data-theme="light"] .dash-topbar, html[data-theme="light"] .dash-nav, html[data-theme="light"] .dash-sidebar, html[data-theme="light"] .ks-app-topbar, html[data-theme="light"] .section-body > .card, html[data-theme="light"] .site-footer { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; } /* Slightly darker rail for hierarchy (less “white on white”) */ html[data-theme="light"] .section-rail { background: var(--surface) !important; } html[data-theme="light"] .site-header { box-shadow: 0 10px 30px rgba(10,14,26,0.08) !important; } html[data-theme="light"] .nav a, html[data-theme="light"] .mobile-nav a, html[data-theme="light"] .section-rail__link, html[data-theme="light"] .dash-link, html[data-theme="light"] .footer-legal-link { color: var(--text) !important; } html[data-theme="light"] .nav a:hover, html[data-theme="light"] .mobile-nav a:hover, html[data-theme="light"] .section-rail__link:hover, html[data-theme="light"] .dash-link:hover, html[data-theme="light"] .footer-legal-link:hover { background: rgba(10,14,26,0.04) !important; border-color: rgba(10,14,26,0.12) !important; } html[data-theme="light"] .nav-online { color: rgba(10,14,26,0.70) !important; } /* Sections that were explicitly dark on landing pages */ html[data-theme="light"] .section.dark, html[data-theme="light"] .landing-section.dark, html[data-theme="light"] .intro, html[data-theme="light"] .dash { background: var(--bg) !important; color: var(--text) !important; } /* Generic "dark overlay" blocks used around the site */ html[data-theme="light"] [class*="overlay"], html[data-theme="light"] [class*="backdrop"], html[data-theme="light"] .dash-backdrop, html[data-theme="light"] .mobile-nav-backdrop { background: rgba(10,14,26,0.30) !important; } /* Inputs / selects / textareas (both legacy and new classes) */ html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { color: var(--text); } html[data-theme="light"] input[type="text"], html[data-theme="light"] input[type="email"], html[data-theme="light"] input[type="password"], html[data-theme="light"] input[type="tel"], html[data-theme="light"] input[type="number"], html[data-theme="light"] input[type="date"], html[data-theme="light"] select, html[data-theme="light"] textarea, html[data-theme="light"] .field-input, html[data-theme="light"] .field__input, html[data-theme="light"] .ui-input { background: #ffffff !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="light"] input:focus, html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus, html[data-theme="light"] .field-input:focus, html[data-theme="light"] .field__input:focus, html[data-theme="light"] .ui-input:focus { border-color: rgba(215,31,31,0.35) !important; box-shadow: var(--ring) !important; } html[data-theme="light"] select:not([multiple]):not([size]), html[data-theme="light"] select.ui-input, html[data-theme="light"] select.field__input { background-color: #ffffff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 11px center !important; background-size: 18px 18px !important; padding-right: 42px !important; color-scheme: light !important; } html[data-theme="light"] select option, html[data-theme="light"] select optgroup { background-color: #ffffff !important; color: var(--text) !important; } /* Buttons (normalize common variants) */ html[data-theme="light"] .btn, html[data-theme="light"] .btn-ghost, html[data-theme="light"] .btn-accent { color: var(--text) !important; } html[data-theme="light"] .btn-accent { color: #fff !important; } html[data-theme="light"] .btn.is-danger, html[data-theme="light"] a.is-danger { color: rgba(120, 20, 20, 0.92) !important; } /* Tables - broader catch-all for legacy table styling */ html[data-theme="light"] table, html[data-theme="light"] .table, html[data-theme="light"] .admin-table, html[data-theme="light"] .orders-table, html[data-theme="light"] .orders-table--stack tr { background: #ffffff !important; color: var(--text) !important; border-color: var(--border) !important; } html[data-theme="light"] th, html[data-theme="light"] td { border-color: rgba(10,14,26,0.10) !important; } html[data-theme="light"] .orders-table th { color: rgba(215,31,31,0.92) !important; } html[data-theme="light"] .orders-table tbody tr:hover { background: rgba(10,14,26,0.04) !important; } html[data-theme="light"] .orders-table--expandable .order-pack__detail-cell, html[data-theme="light"] .orders-table--expandable .order-pack__detail { background: rgba(10,14,26,0.03) !important; } /* Dropdowns / pills / small badges that often assume dark */ html[data-theme="light"] .pill, html[data-theme="light"] .pill--user, html[data-theme="light"] .badge, html[data-theme="light"] .notif-badge { border-color: var(--border) !important; background: rgba(10,14,26,0.04) !important; color: var(--text) !important; } /* Notification bell / panel */ html[data-theme="light"] .notif-bell, html[data-theme="light"] .notif-panel { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="light"] .notif-panel__subtitle, html[data-theme="light"] .notif-panel__empty { color: var(--muted) !important; } /* Footer */ html[data-theme="light"] .site-footer { color: var(--muted) !important; } html[data-theme="light"] .site-footer__apps-title, html[data-theme="light"] .site-footer__app-badge { color: rgba(10,14,26,0.72) !important; } /* -------------------------------------------------------------------------- */ /* APP MODE: make it feel more like a desktop app (both themes) */ /* -------------------------------------------------------------------------- */ body.ks-app-mode .section-layout { gap: 14px; } body.ks-app-mode .section-rail { position: sticky; top: 56px; align-self: start; max-height: none; overflow: visible; } body.ks-app-mode .section-body { padding-top: 6px; } body.ks-app-mode .section-rail__brand { font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; } body.ks-app-mode .section-rail__link { border-radius: 12px; } /* -------------------------------------------------------------------------- */ /* LIGHT MODE: scoped fixes for common legacy hardcoded dark blocks */ /* (avoid aggressive global overrides that can break layout/contrast) */ /* -------------------------------------------------------------------------- */ html[data-theme="light"] .muted, html[data-theme="light"] .ui-muted, html[data-theme="light"] .orders-help, html[data-theme="light"] .auth-subtitle { color: var(--muted) !important; } /* Interactive affordances in Servis (expand + status) */ html[data-theme="light"] .order-toggle-btn { background: rgba(10,14,26,0.04) !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="light"] .order-toggle-btn:hover { background: rgba(215,31,31,0.10) !important; border-color: rgba(215,31,31,0.28) !important; } html[data-theme="light"] .order-toggle-btn.is-open { background: rgba(215,31,31,0.12) !important; border-color: rgba(215,31,31,0.32) !important; } html[data-theme="light"] .status-select { background: #ffffff !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="light"] .status-select:hover { border-color: rgba(215,31,31,0.28) !important; } /* Buttons: slightly larger + clearer */ .btn, .btn-accent, .btn-ghost { border-radius: 14px; } .btn, .btn-ghost { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.16); } .btn:hover, .btn-ghost:hover { box-shadow: var(--shadow-soft); } .btn-accent { box-shadow: 0 12px 30px rgba(255,62,62,0.18); } /* Tables: more obvious header + row separation */ .table, .admin-table, .orders-table { border-radius: 16px; overflow: hidden; } .table thead tr, .admin-thead tr, .orders-table thead tr { background: rgba(255,255,255,0.03); } .table tbody tr:hover, .admin-tbody tr:hover, .orders-table tbody tr:hover { background: rgba(255,255,255,0.045); } /* Better defaults */ a { color: inherit; } button, input, select, textarea { font-family: inherit; } ::selection { background: rgba(255,62,62,0.35); } /* Modern focus */ :focus { outline: none; } :focus-visible { box-shadow: var(--ring); border-color: rgba(255, 62, 62, 0.35) !important; } /* Smooth interactive defaults (narrow scope — avoid lag on large forms) */ .btn, .btn-accent, .btn-ghost, .btn-sm, .field__input, .nav a, .ks-tab { transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease, opacity 0.16s ease; } /* reduce motion for accessibility */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* --- INTRO --- */ .intro { height: 100vh; display: flex; align-items: center; justify-content: center; background: #000; position: relative; z-index: 1; overflow: hidden; flex-direction: column; gap: 30px; padding-top: 90px; } .intro-content { display: flex; justify-content: center; align-items: center; width: 100%; } .intro-brand { display: flex; align-items: center; gap: 40px; } .main-logo-anim { width: clamp(120px, 25vw, 220px); filter: invert(1); border-right: 2px solid var(--border); padding-right: 40px; opacity: 0; animation: fadeIn 1s ease forwards; } .intro-text-wrapper { display: flex; flex-direction: column; line-height: 0.8; } .logo-text-anim { font-size: clamp(3rem, 12vw, 7rem); font-weight: 900; letter-spacing: 5px; margin: 0; color: #fff; opacity: 0; animation: startBlink 1.2s ease-out 0.5s forwards; } .accent-text { color: var(--accent) !important; opacity: 0; animation: startBlink 1.2s ease-out 0.7s forwards !important; } /* Úvod — scroll hint (střed, mobil + desktop) */ .scroll-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; z-index: 2; pointer-events: none; max-width: min(92vw, 420px); } .scroll-hint__mouse { width: 26px; height: 40px; margin: 0 auto 10px; border: 2px solid rgba(255, 255, 255, 0.38); border-radius: 14px; position: relative; animation: bounce 2.2s ease-in-out infinite; } .scroll-hint__wheel { position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; background: rgba(255, 255, 255, 0.75); border-radius: 3px; animation: scrollWheel 1.6s ease-in-out infinite; } @keyframes scrollWheel { 0%, 100% { opacity: 0.35; transform: translateY(0); } 55% { opacity: 1; transform: translateY(8px); } } .scroll-hint__text { display: block; font-size: 11px; letter-spacing: 0.28em; opacity: 0.72; font-weight: 900; text-transform: uppercase; } .scroll-hint__sub { display: block; margin-top: 6px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.38; font-weight: 700; } .btn-hero { padding: 16px 45px; font-size: 1.05rem; text-decoration: none; font-weight: 900; border-radius: 14px; box-shadow: 0 20px 60px rgba(255,62,62,0.18); display: inline-flex; align-items: center; justify-content: center; letter-spacing: 2px; text-transform: uppercase; } /* ---------- Auth pages ---------- */ .auth-page { min-height: calc(100vh - 120px); padding: 110px 0 50px; position: relative; } .auth-page::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 420px at 20% 0%, rgba(255,62,62,0.18), transparent 60%), radial-gradient(700px 420px at 100% 20%, rgba(255,255,255,0.07), transparent 55%); pointer-events: none; opacity: 0.9; } .auth-shell { position: relative; z-index: 1; display: grid; place-items: center; padding: 0 18px; } .auth-card { width: min(520px, 100%); padding: 28px; border: 1px solid rgba(255,255,255,0.10); box-shadow: var(--shadow); } .auth-head { text-align: center; margin-bottom: 18px; } .auth-kicker { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,62,62,0.22); background: rgba(255,62,62,0.08); font-weight: 900; font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.90); } .auth-title { margin: 12px 0 6px; font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 900; letter-spacing: 0.5px; } .auth-subtitle { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.45; } .form.stack { gap: 14px; } .field { display: grid; gap: 8px; } .field__label { font-size: 0.82rem; color: rgba(255,255,255,0.72); letter-spacing: 0.2px; } .field__input { width: 100%; padding: 12px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.35); color: #fff; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .field__input:focus { border-color: rgba(255,62,62,0.45); box-shadow: 0 0 0 4px rgba(255,62,62,0.12); } .auth-submit { width: 100%; padding: 14px 16px; border-radius: 14px; font-weight: 900; letter-spacing: 1px; cursor: pointer; } .auth-foot { margin-top: 16px; display: flex; justify-content: center; gap: 8px; color: rgba(255,255,255,0.72); font-size: 0.95rem; } .link-accent { color: rgba(255,255,255,0.92); font-weight: 900; text-decoration: none; border-bottom: 1px solid rgba(255,62,62,0.45); } .link-accent:hover { border-bottom-color: rgba(255,62,62,0.90); } .alert { padding: 12px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.90); font-size: 0.95rem; line-height: 1.35; margin: 14px 0; text-align: center; } .alert--danger { border-color: rgba(255,77,77,0.30); background: rgba(255,77,77,0.10); } .alert--success { border-color: rgba(0,255,0,0.22); background: rgba(0,255,0,0.10); } /* ---------- Landing helpers ---------- */ .section-center { text-align: center; } .lead { margin: 0 0 20px; color: rgba(255,255,255,0.76); line-height: 1.6; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } @media (max-width: 720px) { .form-grid-2 { grid-template-columns: 1fr; } } .ig-card { padding: 3rem 1.25rem; margin-top: 2rem; } .ig-link { text-decoration: none; color: inherit; display: inline-flex; flex-direction: column; align-items: center; } .ig-avatar { width: 64px; height: 64px; border-radius: 14px; margin-bottom: 1rem; object-fit: cover; } .ig-text { font-size: 1.15rem; margin: 0 0 1.25rem; line-height: 1.6; color: rgba(255,255,255,0.88); } .ig-btn { display: inline-flex; } .price-cta { display: flex; text-align: center; margin-top: 18px; padding: 15px; border-radius: 14px; text-decoration: none; font-weight: 900; border: 1px solid rgba(255,62,62,0.22); background: linear-gradient(90deg, rgba(255,62,62,0.95), rgba(255,255,255,0.08)); } .map-embed { height: 260px; overflow: hidden; padding: 0; margin-top: 20px; } .map-embed__frame { width: 100%; height: 100%; border: 0; display: block; } /* ---------- Dashboard content components ---------- */ .dash-section-title { margin: 0 0 16px; letter-spacing: 1px; color: rgba(255,255,255,0.92); text-transform: uppercase; font-weight: 900; font-size: 0.95rem; } .dash-section-title--accent { color: var(--accent); } .muted { color: rgba(255,255,255,0.64); font-size: 0.92rem; line-height: 1.5; margin: 0 0 10px; } .muted--center { text-align: center; margin: 0; } .mb-12 { margin-bottom: 12px; } .w-100 { width: 100%; } .profile-row { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; } .profile-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,62,62,0.45); } .file-input { font-size: 0.9rem; color: rgba(255,255,255,0.78); } @media (max-width: 720px) { .profile-row { flex-direction: column; align-items: flex-start; } } /* --- VŠECHNY POTŘEBNÉ ANIMACE --- */ @keyframes startBlink { 0% { opacity: 0; } 10% { opacity: 1; } 15% { opacity: 0.2; } 20% { opacity: 1; } 30% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes fadeIn { to { opacity: 1; } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-10px) translateX(-50%); } 60% { transform: translateY(-5px) translateX(-50%); } } @keyframes fadeIn { to { opacity: 1; } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-10px) translateX(-50%); } 60% { transform: translateY(-5px) translateX(-50%); } } /* STACKING EFFECT */ .section.stack { position: sticky; top: 0; min-height: 100svh; height: 100vh; padding: clamp(72px, 10vh, 110px) 0; display: flex; align-items: center; justify-content: center; background: var(--bg); border-top: 1px solid var(--border); box-shadow: 0 -40px 100px rgba(0,0,0,0.9); } .section.dark { background: #080808; } /* BRAND LOGOS */ .brand-logos { display: flex; gap: 30px; margin: 25px 0 35px 0; align-items: center; flex-wrap: wrap; } .brand-img { height: 35px; width: auto; filter: brightness(0) invert(1); opacity: 0.6; transition: 0.3s; } .brand-img:hover { opacity: 1; transform: scale(1.1); } /* FAQ */ .faq-container { display: grid; gap: 20px; max-width: 900px; margin-top: 30px; } .faq-item h3 { font-size: 1.1rem; color: var(--accent); margin: 0 0 10px 0; } .faq-item p { margin: 0; color: #aaa; line-height: 1.6; } /* HEADER */ .site-header { position: fixed; top: 0; width: 100%; z-index: 500; padding: 12px 0; backdrop-filter: blur(18px); background: rgba(0,0,0,0.55); border-bottom: 1px solid rgba(255,255,255,0.06); } .header-flex { display: flex; justify-content: space-between; align-items: center; } .logo-container { display: flex; align-items: center; gap: 12px; } .nav-logo { height: 45px; filter: invert(1); border-right: 1px solid var(--border); padding-right: 12px; } .brand-text { display: flex; flex-direction: column; line-height: 0.9; } .brand-title { font-size: 1.2rem; font-weight: 900; letter-spacing: 2px; } .brand-subtitle { font-size: 0.7rem; color: var(--accent); letter-spacing: 4px; } .nav a { color: rgba(255,255,255,0.70); text-decoration: none; margin-left: 20px; font-size: 13px; font-weight: bold; transition: 0.3s; } .nav a:hover { color: var(--accent); } /* Header CTA – neprepisovať globálny .btn-accent */ .site-header .btn-accent { padding: 8px 16px; border-radius: 999px; } /* CARDS & FORMS */ .wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad-x); width: 100%; } /* Alternatívny kontajner pre nové sekcie (nepovinné) */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--pad-x); box-sizing: border-box; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .text-gradient { background: linear-gradient(90deg, #fff, var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 900; display: inline-block; } .badge { background: var(--accent); color: #000; padding: 4px 12px; font-size: 10px; font-weight: 900; border-radius: 20px; text-transform: uppercase; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 40px; } /* Služby: celý panel (karty + pronájem) bez orezania oproti sticky 100vh sekcím */ #services.section.stack { height: auto; min-height: 100vh; align-items: flex-start; justify-content: flex-start; padding-top: clamp(72px, 10vh, 120px); padding-bottom: clamp(48px, 8vh, 96px); overflow: visible; scroll-margin-top: 88px; /* Jemnejší prechod oproti sekcii „O nás“, aby sa horizontálne neprekrýval tieň */ box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.55); } #services.section.stack > .wrap.services-bundle { width: 100%; box-sizing: border-box; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; padding: clamp(22px, 3vw, 36px) clamp(16px, 2.5vw, 28px) clamp(28px, 4vw, 44px); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); } #services.section.stack > .wrap.services-bundle > h2.reveal { margin-top: 0; margin-bottom: 0.25rem; } #services.section.stack .cards { margin-top: 28px; } .services-rental-stack { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; } .services-rental-bar { width: 100%; max-width: none; margin: 0 auto; text-align: center; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.08); } .services-rental-bar .icon { font-size: 2rem; margin-bottom: 8px; } .services-rental-bar h3 { margin: 0 0 10px; } .services-rental-bar p { margin: 0 auto; max-width: 52rem; line-height: 1.55; } .services-rental-cta { display: flex; justify-content: center; width: 100%; } .glass { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(18px, 2.2vw, 30px); backdrop-filter: blur(18px); } .card { border-radius: var(--radius); box-shadow: var(--shadow-soft); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); color: #fff; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); } .btn.btn-accent:hover, a.btn-accent:hover, button.btn-accent:hover { background: linear-gradient(145deg, var(--accent), var(--accent-2)); border-color: rgba(255, 62, 62, 0.45); color: #0a0a0a; } .btn:active { transform: translateY(0); } .btn-accent { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; cursor: pointer; font-weight: 900; background: linear-gradient(145deg, var(--accent), var(--accent-2)); color: #0a0a0a !important; border: 1px solid rgba(255,62,62,0.28); box-shadow: 0 12px 34px rgba(255,62,62,0.16); border-radius: 999px; padding: 10px 16px; } .btn-accent:hover { transform: translateY(-1px); filter: brightness(1.12); background: linear-gradient(145deg, var(--accent), var(--accent-2)); box-shadow: 0 14px 36px rgba(255, 62, 62, 0.28); } .btn-accent:active { transform: translateY(0); } /* Nav toggle + mobile drawer */ .nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 62, 62, 0.28); background: rgba(255, 62, 62, 0.08); color: #fff; cursor: pointer; padding: 10px; flex-direction: row; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box; } .nav-toggle__bar { display: block; width: 5px; height: 5px; border-radius: 50%; background: #fff; margin: 0; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); } .mobile-nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 650; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .mobile-nav { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(340px, 92vw); z-index: 700; background: linear-gradient(165deg, rgba(48, 8, 12, 0.97) 0%, rgba(22, 6, 10, 0.98) 55%, rgba(12, 4, 8, 0.99) 100%); backdrop-filter: blur(20px); border-left: 1px solid rgba(255, 62, 62, 0.35); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45); transform: translateX(102%); transition: transform 0.22s ease; display: flex; flex-direction: column; overflow: hidden; padding-top: env(safe-area-inset-top, 0); } .mobile-nav__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid rgba(255, 62, 62, 0.22); background: rgba(255, 62, 62, 0.08); flex-shrink: 0; } .mobile-nav__title { font-weight: 900; letter-spacing: 0.5px; color: rgba(255, 245, 245, 0.98); font-size: 0.95rem; } .mobile-nav__close { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255, 62, 62, 0.35); background: rgba(0, 0, 0, 0.25); color: #fff; cursor: pointer; font-size: 22px; line-height: 1; } .mobile-nav__close:hover { background: rgba(255, 62, 62, 0.18); } .mobile-nav__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .mobile-nav__links { padding: 12px 14px 10px; display: grid; gap: 8px; } .mobile-nav__foot { flex-shrink: 0; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0)); border-top: 1px solid rgba(255, 62, 62, 0.28); background: rgba(0, 0, 0, 0.42); } .mobile-nav__foot a { display: block; padding: 12px 14px; border-radius: 12px; background: rgba(255, 77, 77, 0.12); border: 1px solid rgba(255, 120, 120, 0.45); text-decoration: none; color: rgba(255, 250, 250, 0.98); font-weight: 800; font-size: 0.92rem; text-align: center; } .mobile-nav__links a { padding: 11px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 62, 62, 0.18); text-decoration: none; color: rgba(255, 250, 250, 0.96); font-weight: 800; font-size: 0.92rem; line-height: 1.3; } .mobile-nav__links a:hover { border-color: rgba(255, 62, 62, 0.45); background: rgba(255, 62, 62, 0.12); } .mobile-nav__links a.is-accent { border-color: rgba(255, 62, 62, 0.55); background: rgba(255, 62, 62, 0.16); } .mobile-nav__links a.is-danger { border-color: rgba(255, 120, 120, 0.45); background: rgba(255, 77, 77, 0.14); } body[data-mobile-nav-open="true"] .mobile-nav-backdrop { opacity: 1; pointer-events: auto; } body[data-mobile-nav-open="true"] .mobile-nav { transform: translateX(0); } /* ---------- Dashboard shell ---------- */ .dash { padding-top: 96px; min-height: 100vh; background: radial-gradient(1200px 520px at 18% 0%, rgba(255,62,62,0.10), transparent 55%), radial-gradient(900px 520px at 85% 18%, rgba(255,255,255,0.06), transparent 60%), radial-gradient(1000px 700px at 60% 100%, rgba(255,62,62,0.06), transparent 55%), rgba(0,0,0,0.20); } .dash-shell { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad-x) 70px; display: grid; grid-template-columns: 280px 1fr; gap: clamp(14px, 2vw, 22px); } .dash-sidebar { position: sticky; top: 96px; height: calc(100vh - 110px); overflow: auto; padding: 14px; } .dash-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .dash-title { font-weight: 900; letter-spacing: 0.4px; font-size: 0.95rem; color: rgba(255,255,255,0.90); } .dash-user { margin: 6px 0 14px; color: rgba(255,255,255,0.62); font-size: 0.85rem; } .dash-links { display: grid; gap: 8px; margin-top: 10px; } .dash-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); text-decoration: none; color: rgba(255,255,255,0.90); font-weight: 800; font-size: 0.92rem; } .dash-link:hover { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); } .dash-link.is-active { border-color: rgba(255,62,62,0.35); background: rgba(255,62,62,0.10); } .dash-link.is-danger { border-color: rgba(255,77,77,0.30); background: rgba(255,77,77,0.10); } .dash-content { padding: 0; } .dash-topbar { display: none; position: sticky; top: 70px; z-index: 300; margin: 0 0 12px; padding: 12px; border-radius: 16px; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(18px); } .dash-toggle { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: #fff; cursor: pointer; } /* Mobile dash drawer */ .dash-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 680; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .dash-nav { position: fixed; top: 0; left: 0; height: 100vh; width: min(340px, 92vw); z-index: 690; transform: translateX(-102%); transition: transform 0.18s ease; background: rgba(10,10,10,0.85); border-right: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(18px); padding: 16px; overflow: auto; } body[data-dash-nav-open="true"] .dash-backdrop { opacity: 1; pointer-events: auto; } body[data-dash-nav-open="true"] .dash-nav { transform: translateX(0); } @media (max-width: 980px) { .dash-shell { grid-template-columns: 1fr; } .dash-sidebar { display: none; } .dash-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } } /* UI overlays (toast + modal) */ #ui-root { position: relative; z-index: 20000; } .ui-toasts { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); display: grid; gap: 10px; z-index: 20010; } .ui-toast { width: min(420px, 92vw); background: rgba(20,20,20,0.86); border: 1px solid rgba(255,255,255,0.11); backdrop-filter: blur(18px); border-radius: 16px; padding: 12px 12px; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 10px; box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); transition: opacity 0.18s ease, transform 0.18s ease; } .ui-toast.is-in { opacity: 1; transform: translateY(0); } .ui-toast.is-out { opacity: 0; transform: translateY(10px); } .ui-toast__text { color: rgba(255,255,255,0.92); font-size: 0.95rem; line-height: 1.35; } .ui-toast__close { border: 0; background: transparent; color: rgba(255,255,255,0.75); font-size: 22px; cursor: pointer; padding: 0 6px; border-radius: 10px; } .ui-toast__close:hover { background: rgba(255,255,255,0.06); } .ui-toast--success { border-color: rgba(0,255,0,0.18); } .ui-toast--warning { border-color: rgba(255,204,0,0.20); } .ui-toast--danger { border-color: rgba(255,62,62,0.22); } .ui-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.68); z-index: 20005; opacity: 0; transition: opacity 0.18s ease; } .ui-backdrop.is-in { opacity: 1; } .ui-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -48%); width: min(560px, 92vw); background: rgba(15,15,15,0.88); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.11); border-radius: 18px; z-index: 20006; box-shadow: var(--shadow); opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; max-height: min(82vh, 860px); display: flex; flex-direction: column; } .ui-modal.is-in { opacity: 1; transform: translate(-50%, -50%); } .ui-modal.is-out { opacity: 0; transform: translate(-50%, -48%); } .ui-modal__header { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); gap: 12px; } .ui-modal__title { font-weight: 900; letter-spacing: 0.4px; } .ui-modal__x { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: #fff; cursor: pointer; font-size: 22px; line-height: 1; } .ui-modal__x:hover { background: rgba(255,255,255,0.07); transform: translateY(-1px); } .ui-modal__body { padding: 16px; color: rgba(255,255,255,0.88); overflow: auto; } .ui-modal__footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); display:flex; justify-content:flex-end; gap: 10px; } .ui-stack { display: grid; gap: 10px; } .ui-muted { color: rgba(255,255,255,0.68); font-size: 0.95rem; line-height: 1.4; } .ui-input { width: 100%; padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.11); background: rgba(0,0,0,0.32); color: #fff; outline: none; } .ui-input::placeholder { color: rgba(255,255,255,0.38); } .ui-btn { border-radius: 12px; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); color: #fff; cursor: pointer; font-weight: 800; } .ui-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.08); } .ui-btn:active { transform: translateY(0); } .ui-btn--ghost { background: transparent; border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.88); } .ui-btn--primary { background: rgba(255,62,62,0.95); border-color: rgba(255,62,62,0.30); color: #000; } .ui-btn--danger { background: rgba(255,77,77,0.18); border-color: rgba(255,77,77,0.30); color: rgba(255,255,255,0.94); } .ui-btn--primary:hover { background: rgba(255,62,62,1); } .ui-btn--danger:hover { background: rgba(255,77,77,0.24); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; width: 100%; } .gallery-grid img { width: 100%; height: 200px; object-fit: cover; border-radius: 15px; } .price-container { margin-top: 30px; max-width: 850px; } .price-row { display: flex; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--border); } .price-row strong { color: var(--accent); } .booking-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; } .booking-form label { display: block; margin-bottom: 15px; color: #888; font-size: 13px; } input, select, textarea { width: 100%; padding: 12px 12px; margin-top: 5px; background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.11); color: #fff; border-radius: 12px; font-family: inherit; } input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.42); } select { color-scheme: dark; } /* Select — jednotný vzhled, tmavé rozbalení (kde prohlížeč dovolí) */ select:not([multiple]):not([size]), select.ui-input, select.field__input, select.ks-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: rgba(0, 0, 0, 0.35); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 18px 18px; padding-right: 42px; cursor: pointer; color-scheme: dark; } select:not([multiple]):focus-visible, select.ui-input:focus-visible, select.field__input:focus-visible { border-color: rgba(62, 207, 142, 0.45); box-shadow: 0 0 0 2px rgba(62, 207, 142, 0.18); } select option, select optgroup { background-color: #151922; color: rgba(255, 255, 255, 0.96); } select option:checked { background: rgba(255, 62, 62, 0.35); color: #fff; } .btn-large { width: 100%; padding: 18px; background: var(--accent); color: #000; font-weight: 900; border: none; border-radius: 14px; cursor: pointer; transition: transform 0.12s ease, filter 0.16s ease, background 0.16s ease; margin-top: 10px; } .btn-large:hover { transform: translateY(-1px); filter: brightness(1.03); } .btn-large:active { transform: translateY(0); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Tablety a menší monitory */ @media (max-width: 950px) { .grid-2, .booking-grid { grid-template-columns: 1fr; } .nav { display: none; } .nav-toggle { display: inline-flex; } .section.stack { height: auto; position: relative; padding: 60px 0; } .intro-brand { flex-direction: column; text-align: center; gap: 20px; } .main-logo-anim { border-right: none; padding-right: 0; border-bottom: 2px solid var(--border); padding-bottom: 20px; } } @media (max-width: 600px) { /* Rezervační mřížka a formulář na mobilu */ .booking-grid { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; gap: 15px !important; padding: 0 10px !important; /* Jemný okraj, aby nebol na hrane */ box-sizing: border-box !important; } /* Oprava prvků uvnitř mřížky na mobilu */ .booking-grid > div, .booking-grid > section, .booking-grid input, .booking-grid select, .booking-grid textarea, .booking-grid button { width: 100% !important; max-width: 100% !important; min-width: 0 !important; /* Zruší prípadné fixné minimálne šírky */ box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } /* Ak máš vnútri label-y nad poľami, ktoré trčia */ .booking-grid label { display: block !important; width: 100% !important; text-align: left !important; } } /* Zmenšení profilu v administraci */ .dashboard-user-header { padding: 10px 15px !important; margin-bottom: 20px !important; } .dashboard-user-header img { width: 45px !important; height: 45px !important; } .dashboard-user-header h1 { font-size: 1.2rem !important; } /* Oprava překrývání patičky */ main { min-height: calc(100vh - 160px); padding-bottom: 40px; overflow-x: clip; } .main-feed { height: 75vh !important; /* Mírně zmenšeno, aby footer nezavazel */ } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); /* Tři sloupce vedle sebe */ gap: 20px; } /* Na mobilu je dáme pod sebe, aby to nebylo moc zmáčknuté */ @media (max-width: 768px) { .grid-3 { grid-template-columns: 1fr; } } /* Fix nástěnky a footeru */ .main-feed { max-height: 65vh !important; /* Výška nástěnky */ overflow-y: auto !important; padding-right: 10px; margin-bottom: 20px; } #posts-container { display: flex; flex-direction: column; gap: 15px; min-width: 0; } #posts-container > .post-card { flex-shrink: 0; align-self: stretch; min-width: 0; } main { padding-bottom: 100px; /* Rezerva nad footerem */ } /* --- FINÁLNÍ DOPLŇKY PRO NOVOU STRUKTURU --- */ /* 1. Animace pro nové tlačítko v Intru */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .intro-login-box { animation: fadeInUp 1s ease forwards; animation-delay: 1.5s; } /* 2. Fix pro Dashboard Grid (Levý panel a Střed) */ .grid-home { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: clamp(16px, 2.2vw, 28px); align-items: start; margin-top: 12px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* Domů: Služby a Podpora vedle sebe pod hlavičkou přehledu */ .home-services-support-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 20px); align-items: stretch; } @media (max-width: 720px) { .home-services-support-row { grid-template-columns: 1fr; } } .sidebar-left--online-only { max-width: 100%; } .home-online-panel { display: flex; flex-direction: column; min-height: 0; } .home-following-panel { display: flex; flex-direction: column; min-height: 0; } .home-online-users-scroll { max-height: min(62vh, 580px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; } .home-online-users-scroll::-webkit-scrollbar { width: 8px; } .home-online-users-scroll::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(255, 255, 255, 0.14); } .home-online-users-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 8px; } .sidebar-left { min-width: 0; max-height: none; overflow: visible; position: sticky; top: 100px; align-self: start; } .home-sidebar-stack { display: flex; flex-direction: column; gap: 14px; } .home-panel.home-card { padding: 16px 18px; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.07); background: linear-gradient(165deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 48%, rgba(0, 0, 0, 0.12) 100%); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); } .home-empty-state { margin: 0; font-size: 0.82rem; line-height: 1.45; text-align: center; } .home-quick-link { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; padding: 12px 14px !important; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; background: rgba(0, 0, 0, 0.2) !important; transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease; } .home-quick-link:hover { border-color: rgba(255, 62, 62, 0.38) !important; background: rgba(255, 62, 62, 0.08) !important; transform: translateY(-1px); } .home-quick-link__label { font-size: 0.88rem; font-weight: 800; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.94); } .home-quick-link__hint { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.42); } /* Přehled objednávek zákazníka (sekce Moje objednávky) */ .home-my-orders-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .home-my-order-card { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(0, 0, 0, 0.22); padding: 12px 14px; } .home-my-order-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 6px; } .home-my-order-card__id { font-size: 0.88rem; color: rgba(255, 62, 62, 0.95); } .home-my-order-card__type { font-size: 0.8rem; color: rgba(255, 255, 255, 0.72); } .home-my-order-card__status, .home-my-order-card__term { margin: 4px 0; font-size: 0.82rem; line-height: 1.4; } .home-my-order-card__no-files { margin: 8px 0 0; font-size: 0.78rem; } .home-my-order-card__files { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, 0.08); } .home-my-order-card__files-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.45); margin-bottom: 6px; } .home-my-order-card__files-list { margin: 0; padding-left: 1.1em; font-size: 0.8rem; line-height: 1.5; } .home-my-order-card__files-list a { color: rgba(120, 200, 255, 0.95); } /* Moje objednávky — layout */ .ks-my-orders__header { margin-bottom: 6px; } .ks-my-orders-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; } .ks-my-orders-tabs__btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.22); color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 0.86rem; font-weight: 600; } .ks-my-orders-tabs__btn.is-active { border-color: rgba(255, 62, 62, 0.55); background: rgba(255, 62, 62, 0.14); color: #fff; } .ks-my-orders-tabs__count { min-width: 1.4em; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 0.75rem; text-align: center; } .ks-my-orders-section { margin-top: 22px; padding-top: 6px; } .ks-my-orders-section__title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.02rem; font-weight: 700; } .ks-my-orders-empty { margin: 0; padding: 10px 2px; } .ks-my-order-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .ks-my-order-badge--service { background: rgba(80, 160, 255, 0.18); color: rgba(150, 205, 255, 0.98); border: 1px solid rgba(100, 170, 255, 0.28); } .ks-my-order-badge--rental { background: rgba(255, 140, 60, 0.16); color: rgba(255, 190, 120, 0.98); border: 1px solid rgba(255, 150, 70, 0.3); } .ks-my-order-card { padding: 14px 16px; } .ks-my-order-card--rental { border-color: rgba(255, 150, 70, 0.22); } .ks-my-order-card--service { border-color: rgba(100, 170, 255, 0.18); } .ks-my-order-card__head { gap: 8px; } .ks-my-order-card__car { margin: 8px 0 2px; font-size: 0.95rem; } .ks-my-order-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .ks-my-order-detail__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; } .ks-my-order-detail__id { color: rgba(255, 62, 62, 0.95); } .ks-my-order-detail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .ks-my-order-detail__panel { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(0, 0, 0, 0.2); } .ks-my-order-detail__h { margin: 0 0 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .ks-my-order-detail__docs { margin: 0; padding-left: 1.15em; line-height: 1.55; font-size: 0.9rem; } .ks-my-order-detail__support { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, 0.1); } .ks-my-order-doc-preview { margin-top: 6px; } .ks-my-order-doc-preview > summary { cursor: pointer; color: rgba(120, 200, 255, 0.95); font-size: 0.85rem; } .ks-contract-editor__body--preview { max-height: min(52vh, 480px); overflow: auto; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.96); color: #111; font-size: 0.88rem; line-height: 1.45; } .ks-contract-editor__body--preview img { max-width: 100%; height: auto; } /* Fullscreen náhled smlouvy (A4) — nad #ui-root / modály (20006) */ body.ks-contract-fs-open { overflow: hidden; } .ks-contract-fs { position: fixed; inset: 0; z-index: 30010; display: flex; flex-direction: column; background: rgba(6, 8, 12, 0.94); opacity: 0; transition: opacity 0.18s ease; } .ks-contract-fs.is-in { opacity: 1; } .ks-contract-fs.is-out { opacity: 0; } .ks-contract-fs__bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: rgba(10, 12, 18, 0.96); } .ks-contract-fs__title { font-weight: 800; font-size: 0.95rem; letter-spacing: 0.02em; color: #fff; } .ks-contract-fs__close { appearance: none; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: #fff; border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; } .ks-contract-fs__close:hover { background: rgba(255, 255, 255, 0.14); } .ks-contract-fs__scroll { flex: 1 1 auto; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 24px 20px 40px; box-sizing: border-box; -webkit-overflow-scrolling: touch; } .ks-contract-fs__page { flex: 0 0 auto; width: min(210mm, calc(100vw - 40px)); max-width: 210mm; min-height: 0; margin: 0; padding: 0; background: #fff; color: #111; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); border-radius: 2px; font-size: 11pt; line-height: 1.45; box-sizing: border-box; overflow-x: hidden; } .ks-contract-fs__page .page { width: 100% !important; max-width: 100% !important; min-height: 297mm; margin: 0 !important; padding: 14mm 12mm !important; box-sizing: border-box !important; box-shadow: none !important; border: none !important; background: #fff !important; } .ks-contract-fs__page img { max-width: 100%; height: auto; } .ks-contract-fs__page table { max-width: 100%; table-layout: fixed; word-wrap: break-word; } .ks-contract-fs__page .row { flex-wrap: wrap; } @media (max-width: 720px) { .ks-contract-fs__scroll { padding: 16px 12px 28px; } .ks-contract-fs__page { width: calc(100vw - 24px); } .ks-contract-fs__page .page { min-height: 0; padding: 12px 10px !important; } } /* Fórum */ .forum-breadcrumb { font-size: 0.82rem; margin-bottom: 12px; } .forum-breadcrumb a { color: rgba(120, 200, 255, 0.92); text-decoration: underline; text-underline-offset: 2px; } .forum-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .forum-cat-tile { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px !important; text-decoration: none; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; background: rgba(0, 0, 0, 0.22) !important; transition: border-color 0.15s ease, background 0.15s ease; } .forum-cat-tile:hover { border-color: rgba(255, 62, 62, 0.35) !important; background: rgba(255, 62, 62, 0.06) !important; } .forum-cat-tile__name { font-weight: 800; font-size: 0.9rem; color: rgba(255, 255, 255, 0.94); } .forum-cat-tile__count { font-size: 0.72rem; } .forum-topic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .forum-topic-list__item { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.18); } .forum-topic-list__link { display: block; font-weight: 700; font-size: 0.88rem; color: rgba(255, 255, 255, 0.95); text-decoration: none; margin-bottom: 6px; } .forum-topic-list__link:hover { color: rgba(255, 120, 120, 0.98); } .forum-topic-list__meta { display: block; font-size: 0.75rem; line-height: 1.4; } .home-main-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; padding: 18px 18px; margin-bottom: 14px; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.10); background: radial-gradient(820px 240px at 0% 0%, rgba(255,62,62,0.18), transparent 56%), radial-gradient(760px 220px at 100% 18%, rgba(255,255,255,0.07), transparent 60%), linear-gradient(125deg, rgba(40, 12, 16, 0.48) 0%, rgba(14, 14, 18, 0.88) 44%, rgba(10, 10, 12, 0.92) 100%); box-shadow: 0 14px 46px rgba(0, 0, 0, 0.40); position: relative; z-index: 50; overflow: visible; } .home-main-toolbar__top { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 0; } .home-toolbar-back { display: none; align-items: center; gap: 6px; padding: 8px 12px; margin: 0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.88); font: inherit; font-size: 0.8rem; font-weight: 800; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .home-toolbar-back:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 62, 62, 0.35); } .home-toolbar-back__arrow { font-size: 1.1rem; line-height: 1; opacity: 0.85; } .grid-home--expanded .home-toolbar-back { display: inline-flex; } .grid-home--expanded .home-main-toolbar__greet { display: none; } .home-main-toolbar__lead { min-width: 0; } .home-main-toolbar__title { margin: 0 0 4px; font-size: clamp(1.15rem, 2.4vw, 1.35rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; } .home-main-toolbar__greet { margin: 0; font-size: 0.86rem; color: var(--muted); font-weight: 600; } .home-main-toolbar__user { color: rgba(255, 255, 255, 0.92); font-weight: 800; } /* Přehled nástěnky (Domů) — odkazy místo vnořených záložek */ .home-main-content--overview { gap: 16px; } .home-main-content--overview > .home-main-toolbar { z-index: 120; } .home-main-content--overview > .home-v4-quick-actions, .home-main-content--overview > .home-v4-rec-groups, .home-main-content--overview > .home-hub, .home-main-content--overview > .card { position: relative; z-index: 1; } .home-hub { padding: 18px 20px; } .home-hub__title { margin: 0 0 8px; font-size: 1.05rem; font-weight: 900; } .home-hub__intro { margin: 0 0 18px; font-size: 0.88rem; line-height: 1.45; } .home-hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .home-hub__tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.28); text-decoration: none; color: #fff; transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease; } .home-hub__tile:hover { border-color: rgba(255, 62, 62, 0.45); background: rgba(255, 62, 62, 0.08); transform: translateY(-2px); } .home-hub__tile-icon { font-size: 1.6rem; line-height: 1; } .home-hub__tile-label { font-weight: 900; font-size: 1rem; } .home-hub__tile-hint { font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); font-weight: 600; } /* Samostatné sekce dashboardu (příspěvky / chat / profil) */ .dash-page { width: 100%; max-width: min(1040px, 100%); margin: 0 auto; padding: 0 0 40px; box-sizing: border-box; overflow-x: clip; } .dash-page--chat { max-width: none; width: 100%; padding-bottom: 12px; overflow: hidden; } .dash-content--full:has(.dash-page--chat) { display: flex; flex-direction: column; min-height: calc(100dvh - 108px); overflow: hidden; } .dash-shell--full:has(.dash-page--chat) { max-width: none !important; width: 100%; padding-bottom: 12px; } .dash-page__head { margin-bottom: 16px; padding: 16px 18px; } .dash-page__title { margin: 0 0 8px; font-size: 1.35rem; font-weight: 900; } .dash-page__lead { margin: 0; font-size: 0.88rem; line-height: 1.45; } .prispevky-feed { position: relative; padding: 14px 14px 76px; border-radius: var(--radius); } #posts-container.prispevky-feed__list { display: flex; flex-direction: column; gap: 16px; overflow: visible; max-height: none; min-width: 0; padding-right: 0; } .dash-page--chat .dash-page__messenger { flex: 1 1 auto; min-height: 0; max-height: none; } .dash-page--prispevky { max-width: var(--ks-feed-max, min(520px, 100%)); } .dash-page--prispevky .prispevky-feed { min-height: min(72vh, 780px); display: flex; flex-direction: column; } .dash-page--prispevky .prispevky-feed__list { flex: 1 1 auto; min-height: min(52vh, 560px); overflow-y: auto; } .dash-page--profil .ig-profile-posts-wrap { min-height: min(42vh, 480px); } .messenger.ig-dm { min-height: min(70vh, 820px); } .messenger.ig-dm .ig-dm__thread { min-height: min(48vh, 540px); } .section-body.settings-body, .section-body.projekt-body { min-height: min(50vh, 640px); } .home-main-content { display: flex; flex-direction: column; min-width: 0; max-width: 100%; min-height: 0; max-height: none; } #home-dynamic-content { flex: 1 1 auto; min-height: 0; min-width: 0; max-width: 100%; display: flex; flex-direction: column; overflow: visible; } /* Feed: scrollovat jen nástěnka, FAB zůstane uvnitř */ #home-dynamic-content > .feed-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; max-width: 100%; } #home-dynamic-content .feed-stage__posts { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Chat: messenger vyplní výšku sloupce, scroll uvnitř */ #home-dynamic-content > .messenger { flex: 1 1 auto; min-height: 0; max-height: 100%; height: 100%; max-width: 100%; } /* Profil (záložka): dlouhý obsah scrolluje v jednom sloupci */ #home-dynamic-content > .profile-public-note, #home-dynamic-content > .profile-hero, #home-dynamic-content > .profile-public-card, #home-dynamic-content > .profile-posts-stage { flex-shrink: 0; max-width: 100%; } #home-dynamic-content:has(.profile-hero), #home-dynamic-content:has(.ig-profile-root) { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; align-items: stretch; } /* Home: po kliknutí na záložku — celá šířka, bez levého panelu (Instagram-style stage) */ .grid-home--expanded { grid-template-columns: 1fr !important; gap: 12px; } .grid-home--expanded .sidebar-left { display: none !important; } .grid-home--expanded .home-main-content { flex: 1 1 auto; min-height: 0; max-height: calc(100dvh - 108px); overflow: hidden; } .grid-home--expanded #home-dynamic-content { overflow: hidden; max-height: 100%; min-height: 0; flex: 1 1 auto; } .grid-home--expanded #home-dynamic-content > .ig-feed-shell, .grid-home--expanded #home-dynamic-content > .messenger.ig-dm { flex: 1 1 auto; min-height: 0; max-height: 100%; overflow: hidden; } .grid-home--expanded #home-dynamic-content #posts-container.ig-feed-posts { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Feed — úzký sloupec jako Instagram (desktop) */ .ig-feed-shell { max-width: 100%; width: 100%; margin: 0 auto; padding: 0; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; background: rgba(0, 0, 0, 0.25); } @media (min-width: 720px) { .grid-home--expanded .ig-feed-shell { max-width: 470px; width: 100%; align-self: center; border-radius: 0; border-left: 0; border-right: 0; } } .grid-home--expanded #home-dynamic-content > .ig-feed-shell { align-self: center; width: 100%; } .grid-home--expanded #home-dynamic-content > .messenger.ig-dm, .grid-home--expanded #home-dynamic-content > .ig-profile-root { align-self: stretch; width: 100%; } #home-dynamic-content > .ig-profile-root { flex: 1 1 auto; min-height: 0; min-width: 0; } .ig-feed-posts { gap: 0 !important; min-width: 0; } /* V rozšířeném režimu nástěnky nesmí karty příspěvků splasknout (flex + min-height: 0) */ .grid-home--expanded #posts-container.ig-feed-posts > .post-card { flex-shrink: 0; align-self: stretch; width: 100%; min-width: 0; } .ig-feed-posts .post-card { border-radius: 0; border-width: 0 0 1px; border-color: rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.15); } .ig-feed-posts .post-card:last-child { border-bottom: 0; } .ig-feed-posts .post-card__header { padding: 10px 14px; background: transparent; border-bottom: 0; } .ig-feed-posts .post-card__body { padding: 0 14px 12px; } .ig-feed-posts .post-card__media { margin: 0 0 12px; max-width: 100%; width: 100%; border-radius: 0; border-left: 0; border-right: 0; display: block; line-height: 0; overflow: hidden; } .ig-feed-posts .post-card__image { display: block; width: 100%; height: auto; max-height: min(72vh, 620px); object-fit: contain; object-position: center; border-radius: 0; } .ig-feed-posts .post-card__toolbar { padding: 6px 14px 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); } /* Soukromé zprávy — DM layout */ .messenger.ig-dm { border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.35); min-height: 0; display: flex; flex-direction: row; overflow: hidden; } .messenger.ig-dm .messenger__main, .messenger.ig-dm .ig-dm__main { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; } .messenger.ig-dm .messenger__messages, .messenger.ig-dm .ig-dm__thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .grid-home--expanded .messenger.ig-dm.ig-dm--open { min-height: min(520px, calc(100dvh - 140px)); } .ig-dm__head { font-size: 0.72rem !important; letter-spacing: 0.12em !important; color: rgba(255, 255, 255, 0.55); background: rgba(0, 0, 0, 0.35) !important; } .ig-dm__list { display: flex; flex-direction: column; } .ig-dm-row { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 12px 14px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: transparent; color: inherit; font: inherit; text-align: left; transition: background 0.15s ease; } .ig-dm-row:hover { background: rgba(255, 255, 255, 0.05); } .ig-dm-row__profile { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; } .ig-dm-row__profile:hover { color: inherit; } .ig-dm-row__open-chat { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: inherit; cursor: pointer; font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, border-color 0.15s ease; } .ig-dm-row__open-chat:hover, .ig-dm-row__open-chat:focus-visible { background: rgba(255, 62, 62, 0.15); border-color: rgba(255, 62, 62, 0.35); outline: none; } .ig-dm-row__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.12); flex-shrink: 0; } .ig-dm-row__name { font-size: 0.9rem; font-weight: 800; letter-spacing: 0.01em; } .ig-dm__empty-list { margin: 0; padding: 22px 16px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.45); text-align: center; } .ig-dm__titlebar { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px; } .ig-dm__titlebar-center { flex: 1; min-width: 0; } .ig-dm__titlebar-actions { position: relative; flex-shrink: 0; } .ig-dm__dropdown { position: absolute; top: 100%; right: 0; margin-top: 6px; min-width: 220px; padding: 6px; border-radius: 12px; background: rgba(22, 22, 28, 0.98); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); z-index: 30; } .ig-dm__dropdown-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; } .ig-dm__dropdown-item:hover { background: rgba(255, 255, 255, 0.08); } .ig-dm__back { display: none; flex-shrink: 0; min-width: 40px; height: 40px; padding: 0; border-radius: 12px; font-size: 1.1rem; line-height: 1; } .ig-dm__attach { position: relative; flex-shrink: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer; } .ig-dm__attach-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .ig-dm__attach-btn { pointer-events: none; font-size: 1.05rem; } .ig-dm__peer { font-weight: 800; font-size: 0.95rem; } .ig-dm__thread { background: linear-gradient(180deg, rgba(12, 12, 14, 0.4) 0%, rgba(0, 0, 0, 0.55) 100%); gap: 8px !important; } .ig-dm__empty { margin-top: 48px !important; font-size: 0.88rem !important; opacity: 0.5 !important; } .ig-msg { max-width: 78%; padding: 10px 14px; border-radius: 20px; font-size: 0.88rem; line-height: 1.45; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); } .ig-msg--them { align-self: flex-start; background: rgba(255, 255, 255, 0.08); border-bottom-left-radius: 6px; } .ig-msg--me { align-self: flex-end; background: linear-gradient(145deg, rgba(255, 62, 62, 0.45), rgba(255, 62, 62, 0.22)); border-bottom-right-radius: 6px; } .ig-msg__who { display: block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.45; margin-bottom: 4px; } .ig-msg__text { margin: 0; word-break: break-word; } .ig-msg__media { margin-top: 8px; max-width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); } .ig-msg__img, .ig-msg__video { display: block; width: 100%; max-height: 240px; object-fit: cover; vertical-align: middle; } .ig-dm__composer { gap: 10px; padding: 12px 14px !important; background: rgba(0, 0, 0, 0.45) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } .ig-dm__input { border-radius: 22px !important; padding: 10px 16px !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } .ig-dm__send { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; background: linear-gradient(145deg, var(--accent), #ff7a7a); color: #000; font-size: 1rem; font-weight: 900; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.12s ease; } .ig-dm__send:hover { transform: scale(1.05); } @media (max-width: 720px) { .messenger.ig-dm:not(.ig-dm--open) .ig-dm__main { display: none !important; } .messenger.ig-dm.ig-dm--open .ig-dm__sidebar { display: none !important; } .messenger.ig-dm.ig-dm--open .ig-dm__main { display: flex !important; flex: 1 1 auto !important; min-width: 0; } .messenger.ig-dm.ig-dm--open .ig-dm__back { display: inline-flex; align-items: center; justify-content: center; } } /* Celoobrazovkový náhled média z feedu */ .ks-feed-immersive { position: fixed; inset: 0; /* Nad #ui-root (20000) a modálmi, aby šlo médium skutočne zobraziť */ z-index: 31000; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; align-items: stretch; justify-content: center; } .ks-feed-immersive__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; flex-shrink: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .ks-feed-immersive__stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px; } .ks-feed-immersive__media { max-width: 100%; max-height: calc(100dvh - 72px); width: auto; height: auto; object-fit: contain; border-radius: 12px; } .post-card__header-actions { display: flex; align-items: flex-start; gap: 4px; flex-shrink: 0; } .post-card__audience { display: block; margin-top: 2px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 200, 120, 0.85); } .post-card__media--reel-wrap { position: relative; } .post-card__media-expand { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .post-card__media--immersive { cursor: zoom-in; position: relative; } .home-main-toolbar__tabs--secondary { margin-top: 6px; opacity: 0.95; } /* Profil — horní blok + mřížka příspěvků */ .ig-profile-root { max-width: var(--ks-column-max, min(720px, 100%)); width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .ig-profile-hint { margin: 0; padding: 12px 16px !important; font-size: 0.84rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); } .ig-profile-header { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; padding: 20px 22px !important; } .ig-profile-header__avatar-wrap { flex-shrink: 0; } .ig-profile-header__avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 62, 62, 0.45); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); display: block; } .ig-profile-header__main { flex: 1 1 200px; min-width: 0; } .ig-profile-header__name { margin: 0 0 6px; font-size: 1.35rem; font-weight: 900; letter-spacing: -0.02em; } .ig-profile-header__handle { margin: 0 0 14px; font-size: 0.88rem; color: var(--muted); } .ig-profile-header__actions { display: flex; flex-wrap: wrap; gap: 10px; } .ig-profile-public { padding: 16px 18px !important; } .ig-profile-posts-wrap { padding-bottom: 72px !important; } .ig-profile-posts__title { margin: 0 0 12px !important; } .ig-profile-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .ig-profile-posts-grid .profile-post-card { margin: 0; padding: 12px !important; border-radius: 14px !important; min-height: 120px; } .ig-profile-posts-grid .profile-post-card__media { margin: 0; border-radius: 12px; display: block; line-height: 0; } .ig-profile-posts-grid .profile-post-card__img { display: block; width: 100%; height: auto; max-height: min(52vh, 480px); object-fit: contain; object-position: center; border-radius: 0; } @media (max-width: 1000px) { .grid-home { grid-template-columns: 1fr; /* Na mobilu pod sebe */ } .sidebar-left { order: 2; /* Skupiny až pod hlavní obsah na mobilu */ position: static; max-height: none; overflow: visible; } .home-main-toolbar { flex-direction: column; align-items: stretch; } .home-tabs { justify-content: center; } .home-main-content { max-height: none; } #home-dynamic-content { overflow: visible; max-height: none; height: auto; } #home-dynamic-content > .feed-stage { max-height: none; min-height: 0; } #home-dynamic-content .feed-stage__posts { max-height: none; overflow-y: visible; } #home-dynamic-content > .messenger { height: auto; min-height: 0; max-height: none; } .grid-home--expanded .sidebar-left { display: none !important; } .grid-home--expanded .home-main-content { max-height: calc(100dvh - 96px); overflow: hidden; } .grid-home--expanded #home-dynamic-content { overflow: hidden; max-height: 100%; min-height: 0; } .grid-home--expanded #home-dynamic-content > .messenger.ig-dm { max-height: 100%; min-height: 0; overflow: hidden; } .grid-home--expanded #home-dynamic-content .ig-feed-posts { max-height: 100%; overflow-y: auto; } } /* Přepínač záložek nástěnky (home) */ .home-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; padding: 5px; margin: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.35); } .home-tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; margin: 0; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.55); background: transparent; user-select: none; transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease; } .home-tab-btn__icon { font-size: 1.05rem; line-height: 1; opacity: 0.72; transition: opacity 0.18s ease; } .home-tab-btn__text { line-height: 1; } .home-tab-btn:hover { color: rgba(255, 255, 255, 0.88); background: rgba(255, 255, 255, 0.06); } .home-tab-btn:hover .home-tab-btn__icon { opacity: 1; } .home-tab-btn.is-active { color: #fff; background: linear-gradient(145deg, rgba(255, 62, 62, 0.35), rgba(255, 62, 62, 0.14)); box-shadow: 0 0 0 1px rgba(255, 62, 62, 0.45), 0 6px 20px rgba(255, 62, 62, 0.12); } .home-tab-btn.is-active .home-tab-btn__icon { opacity: 1; } .home-tab-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 62, 62, 0.35); } @media (max-width: 560px) { .home-tabs { width: 100%; justify-content: stretch; } .home-tab-btn { flex: 1 1 auto; justify-content: center; min-width: 0; padding-inline: 10px; } .home-tab-btn__text { display: none; } .home-tab-btn__icon { font-size: 1.25rem; } } .home-card { padding: 18px; border: 1px solid rgba(255, 255, 255, 0.06); } .home-card--nested { margin-top: 14px; } .home-section-title { margin: 0 0 14px; letter-spacing: 1px; color: var(--accent); font-size: 0.85rem; text-transform: uppercase; font-weight: 900; } .home-stack { display: flex; flex-direction: column; gap: 10px; } .home-announcements-list { display: flex; flex-direction: column; gap: 12px; max-height: min(42vh, 360px); overflow-y: auto; } .home-announcement-item { padding: 12px 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.28); transition: border-color 0.15s ease, background 0.15s ease; } .home-announcement-item:hover { border-color: rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.34); } .home-announcement-item__meta { font-size: 0.75rem; margin-bottom: 8px; line-height: 1.4; } .home-announcement-item__body { margin: 0; font-size: 0.84rem; line-height: 1.45; color: rgba(255, 255, 255, 0.92); } .home-stack--lg { gap: 12px; margin-bottom: 18px; } .home-group-item { padding: 10px; background: rgba(255,255,255,0.03); border-radius: 12px; font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.06); cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .home-group-item:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); } .home-empty { font-size: 0.8rem; opacity: 0.55; text-align: center; padding: 10px; border: 1px dashed rgba(255,255,255,0.18); border-radius: 12px; } .home-divider { margin: 18px 0; border: 0; border-top: 1px solid rgba(255,255,255,0.10); } .invite-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; } .btn-mini { padding: 6px 10px; border-radius: 10px; border: 0; cursor: pointer; font-weight: 900; font-size: 0.75rem; } .btn-mini--accent { background: var(--accent); color: #000; } .btn-mini--muted { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.10); } .online-title { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: rgba(120, 255, 190, 0.92); font-size: 0.72rem; text-transform: uppercase; font-weight: 900; letter-spacing: 0.1em; } .online-user { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: rgba(0, 220, 130, 0.06); border-radius: 14px; border: 1px solid rgba(0, 220, 130, 0.14); text-decoration: none; color: inherit; transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease; } a.online-user:hover { background: rgba(0, 220, 130, 0.11); border-color: rgba(0, 220, 130, 0.28); transform: translateX(2px); } .online-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.12); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .online-name { font-size: 0.84rem; font-weight: 800; letter-spacing: 0.01em; } .post-add-box { margin-top: 18px; border: 1px solid rgba(255,62,62,0.22) !important; } .post-title { margin: 0 0 12px; font-size: 1rem; font-weight: 900; letter-spacing: 0.3px; } .post-textarea { width: 100%; height: 86px; background: rgba(0,0,0,0.35); color: #fff; border-radius: 14px; padding: 14px; border: 1px solid rgba(255,255,255,0.10); resize: none; outline: none; } .post-tools { display:flex; justify-content:space-between; align-items:center; margin-top: 12px; gap: 12px; flex-wrap: wrap; } .post-file { font-size: 0.85rem; color: rgba(255,255,255,0.72); } .messenger { padding: 0; overflow: hidden; display: flex; min-height: 0; min-width: 0; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.22); } .messenger__sidebar { width: clamp(280px, 32vw, 400px); min-width: 260px; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,0.08); overflow: hidden; display: flex; flex-direction: column; background: rgba(0,0,0,0.18); } .messenger__sidebar .ig-dm__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .messenger__head { padding: 12px 14px; font-weight: 1000; letter-spacing: 0.10em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.72rem; color: rgba(255,255,255,0.62); } .messenger__main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; } .messenger__titlebar { padding: 12px 14px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.08); display:flex; justify-content:space-between; gap: 12px; } .messenger__messages { flex: 1; overflow-y: auto; padding: 14px; display:flex; flex-direction:column; gap: 10px; } .messenger__empty { text-align:center; opacity:0.35; margin-top: 90px; } .messenger__composer { padding: 12px 14px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; gap: 10px; align-items: flex-end; visibility: hidden; flex-shrink: 0; background: rgba(0, 0, 0, 0.35); } .messenger__composer.is-visible { visibility: visible; } .messenger__input { flex: 1; min-width: 0; min-height: 44px; max-height: 120px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.11); border-radius: 14px; padding: 12px 14px; color: #fff; outline: none; resize: vertical; line-height: 1.45; font: inherit; } .ig-dm__send { width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,62,62,0.26); background: rgba(255,62,62,0.16); color: #fff; cursor: pointer; } .ig-dm__send:hover { background: rgba(255,62,62,0.22); transform: translateY(-1px); } .ig-dm__send:active { transform: translateY(0); } /* Aktivní konverzace (volitelné zvýraznění) */ .ig-dm-row.is-active { background: rgba(255, 62, 62, 0.12); border: 1px solid rgba(255, 62, 62, 0.2); border-radius: 12px; } /* Emoji picker */ .emoji-btn { width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.05); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .emoji-btn:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); } .emoji-btn:active { transform: translateY(0); } .emoji-btn--mini { width: 40px; height: 40px; border-radius: 12px; } .emoji-popover { position: fixed; width: 252px; padding: 10px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.10); background: rgba(15,15,15,0.92); backdrop-filter: blur(18px); box-shadow: var(--shadow-soft); z-index: 22000; display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; max-height: min(320px, calc(100vh - 24px)); overflow: auto; align-content: start; } .emoji-popover[hidden] { display: none !important; } .emoji-popover__item { border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); border-radius: 10px; cursor: pointer; padding: 6px 0; font-size: 16px; line-height: 1; color: #fff; } .emoji-popover__item:hover { background: rgba(255,62,62,0.10); border-color: rgba(255,62,62,0.18); } @media (max-width: 720px) { .messenger { flex-direction: column; min-height: 0; } .messenger__sidebar { width: 100%; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.10); max-height: 42vh; } } .profile-hero { text-align:center; padding: 26px; margin-bottom: 16px; } .profile-hero__avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,62,62,0.45); margin-bottom: 12px; } .profile-hero__name { margin: 0 0 6px; font-weight: 900; } .profile-hero__meta { opacity: 0.65; margin: 0 0 16px; } .profile-hero__btn { text-decoration: none; } .invite-list-title { margin: 0 0 14px; letter-spacing: 1px; color: var(--accent); font-size: 0.9rem; font-weight: 900; } .invite-row { display:flex; align-items:center; justify-content:space-between; gap: 12px; background: rgba(255,255,255,0.03); padding: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); flex-wrap: wrap; } .invite-user { display:flex; align-items:center; gap: 12px; min-width: 0; } .invite-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .invite-name { font-size: 0.92rem; font-weight: 900; } .btn-sm { padding: 7px 12px; border-radius: 12px; font-size: 0.75rem; font-weight: 900; } .home-group-item.group-item { display: block; text-decoration: none; color: inherit; border-radius: 12px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); transition: background 0.15s ease, border-color 0.15s ease; } .home-group-item.group-item:hover { border-color: rgba(255, 62, 62, 0.35); background: rgba(255, 255, 255, 0.06); } a.home-quick-link.home-group-item.group-item, button.home-quick-link.home-group-item.group-item { display: flex; flex-direction: column; align-items: flex-start; } button.home-quick-link.home-group-item.group-item { appearance: none; -webkit-appearance: none; width: 100%; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } /* Scroll jen v .ui-modal__body (viz .ui-modal--flow), ne uvnitř wrapu — jeden scrollbar. */ .home-servis-booking-wrap { overflow: visible; min-width: 0; } .ui-modal--home-servis-booking.ui-modal--flow .ui-modal__body { max-height: min(78vh, 760px); } .invite-card { padding: 14px 16px; border-radius: 14px; margin-bottom: 10px; border: 1px solid rgba(255, 255, 255, 0.1); } .invite-card__title { font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.55; margin-bottom: 6px; } .invite-card__name { font-weight: 900; font-size: 1rem; margin-bottom: 12px; } .invite-actions { display: flex; gap: 8px; flex-wrap: wrap; } .profile-public-note { padding: 14px 18px; margin-bottom: 14px; border-left: 3px solid rgba(120, 200, 255, 0.55); } .profile-public-card { padding: 16px 18px; margin-bottom: 14px; } .profile-kv { margin: 0; display: grid; gap: 0; } .profile-kv__row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.9rem; } .profile-kv__row:last-child { border-bottom: 0; } .profile-kv__row dt { margin: 0; font-weight: 800; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.5); } .profile-kv__row dd { margin: 0; word-break: break-word; } .profile-posts-stage { position: relative; padding: 18px 18px 70px; margin-bottom: 16px; } .profile-posts-list { display: flex; flex-direction: column; gap: 12px; } /* Sloupec + mřížka zároveň — .profile-posts-list jinak přepíše grid (pořadí v CSS) */ .profile-posts-list.ig-profile-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; align-items: start; } .profile-post-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .profile-post-card__media { margin: 12px 0 0; border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.1); display: block; line-height: 0; } .profile-post-card__img { display: block; width: 100%; max-width: 100%; height: auto; max-height: min(70vh, 600px); object-fit: contain; object-position: center; margin: 0; border-radius: 0; border: 0; box-sizing: border-box; } .groups-pick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .groups-pick-link { display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: #fff; font-weight: 800; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); } .groups-pick-link:hover { border-color: rgba(255, 62, 62, 0.4); } .settings-body .orders-card { max-width: 720px; } .settings-avatar-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; } .settings-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 62, 62, 0.4); } .settings-hint { margin: 0 0 16px; max-width: 56ch; line-height: 1.45; } .settings-check { display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px; border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; background: rgba(0,0,0,0.18); cursor: pointer; font-size: 0.92rem; } .settings-check + .settings-check { margin-top: 10px; } .settings-check .ks-check__input { margin-top: 4px; } /* Servis (orders) */ .servis-nav { display: flex; gap: 14px; padding: 10px 14px; margin-bottom: 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); overflow-x: auto; } .servis-nav a { text-decoration: none; white-space: nowrap; font-weight: 900; letter-spacing: 1px; font-size: 0.78rem; color: rgba(255,255,255,0.55); } .servis-nav a.is-active { color: var(--accent); } .stat-grid { margin-bottom: 16px; } .stat-card { text-align: center; padding: 18px; border-bottom: 3px solid rgba(255,255,255,0.12); } .stat-card--accent { border-bottom-color: var(--accent); } .stat-card--warn { border-bottom-color: #ffcc00; } .stat-card--ok { border-bottom-color: #00ff00; } .stat-kpi { font-size: 1.85rem; font-weight: 900; margin-top: 6px; } .stat-kpi--warn { color: #ffcc00; } .stat-kpi--ok { color: #00ff00; } .stat-label { font-size: 0.75rem; opacity: 0.62; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; } .orders-card { padding: 18px; border: 1px solid rgba(255,255,255,0.08); } .orders-head { display:flex; justify-content:space-between; align-items:center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .orders-title { margin: 0; letter-spacing: 1px; font-weight: 900; text-transform: uppercase; font-size: 1.05rem; } .orders-loading { text-align:center; opacity:0.55; padding: 26px; } .access-denied { text-align: center; padding: 46px 18px; } .empty-emoji { font-size: 3rem; margin-bottom: 10px; line-height: 1; } /* Legacy modals used by dashboard sections (non-ui modal) */ .legacy-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 10010; align-items: center; justify-content: center; padding: 18px; } .legacy-modal.is-open { display: flex; } .legacy-modal__dialog { width: min(520px, 100%); position: relative; padding: 22px; border: 1px solid rgba(255,62,62,0.25); } .legacy-modal__x { position:absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: #fff; cursor: pointer; font-size: 22px; line-height: 1; } .legacy-modal__actions { margin-top: 14px; } /* Admin table */ .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .admin-th, .admin-td { padding: 12px; text-align: left; vertical-align: middle; } .admin-thead tr { border-bottom: 2px solid rgba(255,62,62,0.35); opacity: 0.85; } .admin-tbody tr { border-bottom: 1px solid rgba(255,255,255,0.06); } .admin-tbody tr:hover { background: rgba(255,255,255,0.03); } .admin-actions { display:flex; gap: 10px; align-items:center; flex-wrap: wrap; } .icon-btn { background:none; border:none; color:#ff4d4d; cursor:pointer; font-size: 1.6rem; line-height:1; padding: 6px 8px; border-radius: 12px; } .icon-btn:hover { background: rgba(255,77,77,0.10); } .pill { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 999px; font-weight: 900; font-size: 0.72rem; letter-spacing: 1px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); } .pill--admin { border-color: rgba(255,62,62,0.35); background: rgba(255,62,62,0.12); } .pill--service { border-color: rgba(0,229,255,0.25); background: rgba(0,229,255,0.10); } .pill--user { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); } .pill--tester { border-color: rgba(255, 204, 0, 0.30); background: rgba(255, 204, 0, 0.12); } /* Orders table (AJAX HTML) */ .orders-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; color: #fff; } .orders-table thead tr { border-bottom: 1px solid rgba(255,62,62,0.26); background: radial-gradient(820px 220px at 0% 0%, rgba(255,62,62,0.12), transparent 55%), rgba(255,255,255,0.02); } .orders-table th { padding: 14px 12px; letter-spacing: 1px; color: var(--accent); font-weight: 900; font-size: 0.78rem; text-transform: uppercase; } .orders-table td { padding: 14px 12px; vertical-align: top; } .orders-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.06); } .orders-table tbody tr:hover { background: rgba(255,255,255,0.03); } .orders-table--expandable .order-pack { border-bottom: 1px solid rgba(255,255,255,0.08); } .orders-table--expandable .order-pack__main td { vertical-align: middle; } .orders-table--expandable .order-pack__detail { background: rgba(0,0,0,0.22); } .orders-table--expandable .order-pack__detail:hover { background: rgba(0,0,0,0.22); } .orders-table--expandable .order-pack__detail-cell { padding: 0 12px 16px; border-bottom: none; } .orders-table__col-toggle { width: 44px; } .orders-table__toggle-cell { width: 44px; padding: 8px 6px !important; vertical-align: middle !important; } .order-toggle-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: #fff; cursor: pointer; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; } .order-toggle-btn:hover { border-color: rgba(255,62,62,0.35); background: rgba(255,62,62,0.10); } .order-chev { display: inline-block; transition: transform 0.15s ease; } .order-toggle-btn.is-open .order-chev { transform: rotate(90deg); } .order-inline-detail { margin: 10px 0 4px; padding: 14px 16px; text-align: left; } .order-detail-mount-target { min-height: 0; } /* Rozšírený riadok objednávky — selecty a formuláre na šírku panelu */ .order-inline-detail select, .order-inline-detail .field-select, .order-inline-detail .status-select { max-width: 100%; } .order-detail-mount-target select, .order-detail-mount-target .field-label select { width: 100%; max-width: 100%; box-sizing: border-box; } .order-detail-mount-target .field-label { display: block; width: 100%; max-width: 100%; } .order-pack__detail .order-inline-detail { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 900px) { .orders-table--expandable.orders-table--rw .order-pack { display: block; margin-bottom: 14px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, 0.18); } .orders-table--expandable.orders-table--rw .order-pack__main { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .orders-table--expandable.orders-table--rw .order-pack__main td { border: none; padding: 10px 12px; } .orders-table--expandable.orders-table--rw .orders-table__toggle-cell { flex: 0 0 44px; width: 44px; } .orders-table--expandable.orders-table--rw .order-pack__main td:not(.orders-table__toggle-cell) { flex: 1 1 calc(100% - 52px); min-width: 0; } .orders-table--expandable.orders-table--rw .order-pack__main td:nth-child(6) { flex: 1 1 100%; } .orders-table--expandable.orders-table--rw thead { display: none; } .orders-table--expandable.orders-table--rw .order-pack__detail { display: block; width: 100%; } .orders-table--expandable.orders-table--rw .order-pack__detail-cell { padding: 0 8px 12px; } .orders-table--expandable.orders-table--rw .status-select { width: 100%; max-width: none; } } .orders-head--split { align-items: flex-start; } .orders-head__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .orders-filter { margin: 12px 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.10); background: radial-gradient(700px 220px at 0% 0%, rgba(255,62,62,0.10), transparent 55%), rgba(0, 0, 0, 0.20); } .orders-filter__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; } .orders-filter__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .orders-filter__label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(200, 210, 240, 0.65); } .orders-filter__input, .orders-filter__select { min-width: 7rem; max-width: 100%; font-size: 0.88rem; } .orders-filter__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; } @media (max-width: 720px) { .orders-filter__actions { margin-left: 0; width: 100%; } } .orders-container-block { margin-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .orders-container-block { border-radius: 16px; } .order-attachments-list { margin: 0 0 12px; padding-left: 1.1rem; } .order-attachments-list a { color: var(--accent); font-weight: 700; } .manual-order-form .field-input { width: 100%; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (max-width: 720px) { .orders-table--expandable .orders-table__col-toggle { width: 36px; } .orders-table--stack thead { display: none; } .orders-table--stack tbody, .orders-table--stack tr, .orders-table--stack td { display: block; width: 100%; } .orders-table--stack tr { margin-bottom: 12px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); } .orders-table--stack td { border: none; padding: 10px 12px; } .orders-table--stack td::before { content: attr(data-label); display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 900; margin-bottom: 4px; } } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; opacity: 0.72; } .customer-name { font-weight: 900; color: #fff; font-size: 1rem; } .customer-phone { font-size: 0.85rem; color: var(--accent); font-weight: 800; margin-top: 4px; } .service-pill { display: inline-block; background: rgba(255,62,62,0.12); border: 1px solid rgba(255,62,62,0.28); padding: 6px 12px; border-radius: 12px; margin-bottom: 6px; } .service-pill__text { color: var(--accent); font-weight: 900; font-size: 0.78rem; letter-spacing: 0.6px; text-transform: uppercase; } .car-sub { font-size: 0.8rem; opacity: 0.62; font-weight: 700; padding-left: 2px; } .status-row { display:flex; align-items:center; gap:10px; } .status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .status-dot--nova { background: #ffcc00; box-shadow: 0 0 10px #ffcc00; } .status-dot--prijata { background: #00e5ff; box-shadow: 0 0 10px #00e5ff; } .status-dot--vyrizena { background: #00ff00; box-shadow: 0 0 10px #00ff00; } .status-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: rgba(0,0,0,0.45); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px 14px; color: #fff; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 7px 26px 7px 10px; font-size: 0.78rem; cursor: pointer; font-weight: 800; color-scheme: dark; } .status-select:hover { border-color: rgba(255,255,255,0.18); } .actions-row { display:flex; gap: 12px; align-items:center; flex-wrap: wrap; } .btn-xs { padding: 8px 12px; font-size: 0.72rem; border-radius: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; } /* 4. Úprava skrolovacího tunelu na príspevky */ #posts-container { padding-right: 10px; } #posts-container::-webkit-scrollbar { width: 6px; } #posts-container::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; } /* 5. Vizuální fix pro tabulku objednávek */ .order-row { transition: background 0.3s; } /* Legacy override vypnutý: nepřepisovat moderný .btn-accent */ .btn-accent--legacy { border: none; cursor: pointer; font-weight: 800; text-align: center; display: inline-block; } /* 6. Fix pro notifikace, aby se nelepily na okraj */ #notification-area { pointer-events: none; } #notification-area > div { pointer-events: auto; } /* ---------- Header / footer polish (no inline styles) ---------- */ .brand-link { text-decoration: none; color: inherit; display: flex; align-items: center; } .notif-bell { position: relative; display: inline-block; cursor: pointer; margin: 0 15px; vertical-align: middle; color: #ffcc00; filter: drop-shadow(0 0 5px rgba(255, 204, 0, 0.3)); } .notif-bell__icon { font-size: 1.2rem; } .notif-bell__icon--svg svg { stroke: #ffcc00; } .notif-badge { position: absolute; top: -5px; right: -10px; background: var(--accent); color: #000; border-radius: 999px; padding: 2px 6px; font-size: 10px; font-weight: 900; line-height: 1.2; } .nav-sep { opacity: 0.2; margin: 0 10px; user-select: none; } .nav-online { color: #00ff00; font-weight: 800; font-size: 0.8rem; margin-left: 15px; } .nav a.is-accent { color: var(--accent); font-weight: 800; } .nav a.is-danger { color: #ff4d4d; margin-left: 15px; font-weight: 800; } .ks-inline-logout { display: inline-flex; margin-left: 15px; } .ks-inline-logout__btn { appearance: none; border: 0; background: transparent; color: #ff4d4d; font: inherit; font-weight: 800; cursor: pointer; padding: 0; } .ks-inline-logout__btn:hover, .ks-inline-logout__btn:focus-visible { color: #ff7a7a; } .btn-accent--compact { padding: 6px 15px; border-radius: 10px; font-size: 0.78rem; } .nav-user-link { margin-left: 10px; } .nav-auth-link { margin-left: 10px; } .site-footer { padding: 0 0 18px; color: rgba(255,255,255,0.55); } .site-footer__bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,0.08); } /* Miesto vpravo pre Online chat widget */ body:not(.ks-app-mode):not(.ks-support-popup-mode) .site-footer.wrap, body:not(.ks-app-mode):not(.ks-support-popup-mode) .site-footer { padding-right: clamp(140px, 22vw, 200px); } .site-footer__copy { margin: 0; font-size: 0.75rem; line-height: 1.4; color: rgba(255,255,255,0.5); } .site-footer__sep { margin: 0 0.35em; opacity: 0.45; } .site-footer__links { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; } .footer-legal-link { text-decoration: none; color: inherit; opacity: 0.65; font-weight: 500; font-size: 0.72rem; } .footer-legal-link:hover { opacity: 1; color: var(--accent); } /* Tabs (dashboard header) */ .home-main-toolbar__tabs { display: inline-flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .tab-btn { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.86); border-radius: 999px; padding: 8px 12px; font-weight: 900; letter-spacing: 0.04em; cursor: pointer; } .tab-btn.is-active { background: rgba(255,62,62,0.16); border-color: rgba(255,62,62,0.26); color: rgba(255,255,255,0.94); } .post-card__video { width: 100%; max-height: 520px; border-radius: 16px; background: #000; border: 1px solid rgba(255,255,255,0.08); } /* Home mention search */ .home-main-toolbar__search { margin-top: 12px; width: 100%; display: flex; justify-content: center; } .home-mention-search { position: relative; width: 100%; z-index: 60; } .home-mention-search { max-width: 760px; } .home-mention-search__input { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.11); background: rgba(0,0,0,0.35); color: #fff; outline: none; } .home-mention-search__input::placeholder { color: rgba(255,255,255,0.45); } .home-mention-search__results { position: absolute; left: 0; right: 0; top: calc(100% + 10px); background: rgba(15,15,15,0.92); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; backdrop-filter: blur(18px); box-shadow: var(--shadow-soft); overflow: hidden; z-index: 50000; max-height: min(52vh, 420px); overflow-y: auto; } .mention-section { padding: 10px 10px 12px; } .mention-section + .mention-section { border-top: 1px solid rgba(255,255,255,0.08); } .mention-section__title { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 900; color: rgba(255,255,255,0.55); padding: 4px 6px 10px; } .mention-item { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 12px; text-decoration: none; color: rgba(255,255,255,0.92); } .mention-item:hover { background: rgba(255,255,255,0.06); } .mention-item__avatar { width: 26px; height: 26px; border-radius: 999px; object-fit: cover; border: 1px solid rgba(255,255,255,0.10); } .mention-item__icon { width: 26px; display: inline-flex; justify-content: center; } .mention-item__label { font-weight: 800; } /* Simple stat pills (profile) */ .stat-pill { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.08); transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .stat-pill--clickable { cursor: pointer; font: inherit; color: inherit; } .stat-pill--clickable:hover { background: rgba(255, 62, 62, 0.16); border-color: rgba(255, 62, 62, 0.4); transform: translateY(-1px); } .stat-pill strong { font-weight: 1000; letter-spacing: 0.4px; } .stat-pill span { color: rgba(255,255,255,0.6); font-size: 0.85rem; font-weight: 700; } /* Mini chat (dashboard) */ .mini-chat { position: fixed; bottom: 0; right: var(--pad-x); width: min(360px, calc(100vw - (var(--pad-x) * 2))); z-index: 10000; } .mini-chat[hidden] { display: none !important; } .mini-chat__panel { padding: 14px; border-radius: 18px 18px 0 0; border: 1px solid rgba(255,255,255,0.10); background: rgba(15,15,15,0.88); backdrop-filter: blur(18px); box-shadow: var(--shadow-soft); } .mini-chat__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; } .mini-chat__close { flex-shrink: 0; } .mini-chat__messages { height: 200px; overflow-y: auto; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; } .mini-chat__form { display: flex; gap: 8px; align-items: stretch; } .mini-chat__input { flex: 1; background: rgba(0,0,0,0.4); color: #fff; border: 1px solid rgba(255,255,255,0.14); padding: 8px 10px; border-radius: 10px; outline: none; } .mini-chat__input:focus-visible { box-shadow: var(--ring); border-color: rgba(255, 62, 62, 0.35); } .mini-chat__send { flex-shrink: 0; min-width: 44px; } /* Notifications panel (JS-created) */ .notif-panel { position: fixed; top: 68px; right: 16px; width: min(400px, calc(100vw - 32px)); max-height: min(72vh, 560px); z-index: 10005; overflow: hidden; padding: 0; display: none; flex-direction: column; box-shadow: 0 0 0 1px rgba(255, 62, 62, 0.45), 0 24px 64px rgba(0, 0, 0, 0.65); border: 1px solid rgba(255, 62, 62, 0.5); border-radius: 16px; background: linear-gradient(165deg, rgba(28, 18, 22, 0.98) 0%, rgba(8, 8, 12, 0.98) 100%); backdrop-filter: blur(16px); } .notif-panel.is-open { display: flex; } .notif-panel__head { flex-shrink: 0; padding: 16px 16px 12px; border-bottom: 1px solid rgba(255, 62, 62, 0.22); background: linear-gradient(180deg, rgba(255, 62, 62, 0.12) 0%, transparent 100%); } .notif-panel__title { margin: 0; font-size: 1.05rem; font-weight: 900; letter-spacing: 0.02em; color: #fff; } .notif-panel__subtitle { margin: 6px 0 0; font-size: 0.78rem; line-height: 1.35; color: rgba(255, 255, 255, 0.55); } .notif-panel__list { overflow-y: auto; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; } .notif-panel__empty { text-align: center; margin: 0; padding: 28px 16px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.45); } .notif-card { border-radius: 14px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.35); text-align: left; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .notif-card--unread { border-color: rgba(255, 62, 62, 0.45); box-shadow: 0 0 0 1px rgba(255, 62, 62, 0.12), 0 8px 28px rgba(255, 62, 62, 0.12); background: rgba(40, 16, 22, 0.45); } .notif-card--read { opacity: 0.92; } .notif-card--click { cursor: pointer; outline: none; } .notif-card--click:hover, .notif-card--click:focus-visible { border-color: rgba(255, 255, 255, 0.18); transform: translateY(-1px); } .notif-card--actions { cursor: default; } .notif-card--dismissed { opacity: 0.38; pointer-events: none; } .notif-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .notif-card__x { width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.85); cursor: pointer; font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .notif-card__x:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); } .notif-panel__head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .notif-panel__clear { border-radius: 12px; padding: 8px 12px; font-size: 0.78rem; font-weight: 900; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.92); cursor: pointer; } .notif-panel__clear:hover { background: rgba(255,255,255,0.07); transform: translateY(-1px); } .notif-card__badge { display: inline-block; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border-radius: 8px; background: rgba(255, 62, 62, 0.22); color: rgba(255, 220, 220, 0.95); border: 1px solid rgba(255, 62, 62, 0.35); } .notif-card__time { font-size: 0.72rem; font-weight: 700; color: rgba(255, 255, 255, 0.45); white-space: nowrap; } .notif-card__title { font-size: 0.92rem; font-weight: 900; color: #fff; margin: 0 0 6px; line-height: 1.3; } .notif-card__text { font-size: 0.84rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); } .notif-card__accent { color: var(--accent, #ff3e3e); } .notif-card__sub { color: rgba(255, 255, 255, 0.65); font-size: 0.82rem; } .notif-card__snippet { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.78); font-size: 0.82rem; line-height: 1.45; } .notif-card--content-report .notif-card__row { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; } .notif-card--content-report .notif-card__col { flex: 1; min-width: 0; } .notif-card__media-preview { flex-shrink: 0; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.35); } .notif-card__media-preview img, .notif-card__media-preview video { width: 100%; height: 100%; object-fit: cover; display: block; } .notif-card__media-preview--reel { position: relative; } .notif-card__media-preview--reel .notif-card__media-label { position: absolute; bottom: 4px; left: 4px; font-size: 0.65rem; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.65); color: #fff; pointer-events: none; } .notif-card__hint { font-size: 0.75rem; margin-top: 8px; } .ks-report-detail__meta { margin-bottom: 4px; } .ks-report-detail__reason { white-space: pre-wrap; margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.1); font: inherit; font-size: 0.88rem; line-height: 1.45; max-height: 200px; overflow: auto; } .ks-report-detail__sep { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 14px 0; } .ks-report-detail__body { margin-top: 6px; font-size: 0.9rem; line-height: 1.5; word-break: break-word; } .ks-report-detail__media { margin-top: 14px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.4); max-height: min(70vh, 520px); } .ks-report-detail__media video, .ks-report-detail__media img { display: block; width: 100%; max-height: min(70vh, 520px); object-fit: contain; } .notif-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .notif-card__btn { border-radius: 10px; padding: 8px 14px; font-size: 0.82rem; font-weight: 800; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: #fff; } .notif-card__btn--primary { background: rgba(255, 62, 62, 0.95); border-color: rgba(255, 62, 62, 0.45); color: #0a0a0a; } .notif-card__btn:hover { filter: brightness(1.08); } /* Legacy (older markup) */ .notif-panel__item { padding: 10px 8px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.8rem; line-height: 1.45; cursor: pointer; border-radius: 10px; transition: background 0.15s ease, opacity 0.25s ease; text-align: left; outline: none; } .notif-panel__item:hover, .notif-panel__item:focus-visible { background: rgba(255, 255, 255, 0.07); } .notif-panel__item--dismissed { opacity: 0.42; pointer-events: none; } .notif-panel__item--actions { cursor: default; } .notif-panel__row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .empty-panel { text-align: center; padding: 50px 20px; } /* Feed cards (actions/fetch_posts.php) — kompaktnější, obrázky omezené */ .post-card { margin-bottom: 0; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; max-width: 100%; } .post-card__header { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.06); } .post-card__author { display: flex; align-items: center; gap: 9px; min-width: 0; } .post-card__profile-hit { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; color: inherit; text-decoration: none; } .post-card__profile-hit:hover { color: inherit; } a.ks-user-profile-link { color: inherit; text-decoration: none; font-weight: inherit; } a.ks-user-profile-link:hover { text-decoration: underline; color: var(--accent-color, #ff3e3e); } .post-card__avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; } .post-card__meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; } .post-card__name { color: var(--accent); font-size: 0.88rem; font-weight: 900; } .post-card__time { opacity: 0.3; font-size: 0.7rem; } .post-card__body { padding: 14px 14px; } .post-card__text { margin: 0; font-size: 0.88rem; line-height: 1.5; color: #eee; word-break: break-word; } .post-card__media { margin: 14px 0 0; border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); display: block; line-height: 0; } .post-card__image { display: block; width: 100%; max-width: 100%; height: auto; max-height: min(72vh, 640px); object-fit: contain; object-position: center; margin: 0; border-radius: 0; border: 0; box-sizing: border-box; } .post-card__toolbar { padding: 10px 14px; display: flex; gap: 18px; background: rgba(0,0,0,0.2); border-top: 1px solid rgba(255,255,255,0.03); } .post-toolbar__btn { background: none; border: none; color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; padding: 3px 5px; border-radius: 10px; transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease; } .post-toolbar__btn:hover { background: rgba(255,255,255,0.06); } .post-toolbar__btn--like { color: #fff; } .post-toolbar__btn--like.is-liked { color: #ff4d4d; } .post-toolbar__btn--dislike.is-active { color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.07); } .post-toolbar__btn--emoji { opacity: 0.95; } .post-toolbar__count { color: #fff; font-size: 0.8rem; font-weight: 800; } .post-reactions { padding: 0 14px 12px; display: flex; flex-wrap: wrap; gap: 8px; background: rgba(0,0,0,0.2); border-top: 1px solid rgba(255,255,255,0.03); } .post-reaction-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 800; color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); } .post-reaction-pill strong { color: rgba(255,255,255,0.85); font-weight: 900; } .post-card__comments { padding: 10px 11px; background: rgba(0,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.05); } .post-comments__list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 11px; } .post-comment { font-size: 0.85rem; background: rgba(255,255,255,0.03); padding: 10px; border-radius: 10px; border-left: 3px solid var(--accent); } .post-comment__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .post-comment__user { color: var(--accent); font-weight: 800; } .post-comment__time { opacity: 0.3; margin-left: 10px; font-size: 0.75rem; } .post-comment__like { background: none; border: none; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 8px; font: inherit; } .post-comment__like:hover { background: rgba(255,255,255,0.06); } .post-comment__like-count { font-size: 0.75rem; font-weight: 800; } .post-comment__text { margin-top: 6px; color: #ccc; word-break: break-word; } .post-comments__composer { display: flex; gap: 10px; align-items: stretch; } .post-comments__input { flex: 1; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.14); color: #fff; padding: 10px 12px; border-radius: 10px; font-size: 0.85rem; outline: none; } .post-comments__input:focus-visible { box-shadow: var(--ring); border-color: rgba(255, 62, 62, 0.35); } .post-comments__send { padding: 0 15px; border-radius: 10px; font-weight: 900; flex-shrink: 0; } .posts-empty { text-align: center; opacity: 0.4; padding: 50px 16px; margin: 0; } @media (max-width: 600px) { .mini-chat { right: 10px; left: 10px; width: auto; } .notif-panel { left: 10px; right: 10px; width: auto; } } /* ---------- Úvodní stránka — přehledná rezervace (střed, mobil + PC) ---------- */ .landing-section { scroll-margin-top: 96px; } /* Formuláře nesmí vizuálně „přetékat“ ze sticky sekcí (100vh + centrování) */ .section.stack.landing-section--forms { height: auto; min-height: auto; align-items: flex-start; justify-content: flex-start; padding-top: 80px; padding-bottom: 48px; overflow-x: clip; } .section.stack.landing-section--forms .wrap { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* Centrování sekce Pneuservis */ #tyres.section.stack.landing-section--forms { justify-content: center; } #tyres.section.stack.landing-section--forms > .wrap { display: block; max-width: min(960px, 100%); margin: 0 auto; } #tyres .landing-stack, #tyres .landing-stack--tyres { padding: 0 16px; width: 100%; } .landing-tyres-grid { display: grid; grid-template-columns: minmax(240px, 0.95fr) minmax(300px, 1.15fr); gap: clamp(16px, 2.5vw, 24px); align-items: start; width: 100%; } .landing-tyres-grid .landing-info--tyres { height: 100%; } .landing-tyres-grid .landing-tyres-features { grid-template-columns: 1fr; } @media (max-width: 820px) { .landing-tyres-grid { grid-template-columns: 1fr; max-width: min(560px, 100%); margin: 0 auto; } .landing-tyres-grid .landing-info--tyres { text-align: center; } .landing-tyres-grid .landing-tyres-head { justify-content: center; } .landing-tyres-grid .landing-tyres-head__text > h2, .landing-tyres-grid .landing-tyres-tagline { text-align: center; } } .landing-booking__grid, .landing-split, .booking-form.landing-form, .contact-box.landing-aside { min-width: 0; max-width: 100%; box-sizing: border-box; } .booking-form.landing-form { overflow-wrap: anywhere; word-break: break-word; } .form-grid-2 { min-width: 0; } .form-grid-2 > * { min-width: 0; } /* Servis (úvodka): užší e-mail, vedle SPZ */ .form-grid-email-spz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem); gap: 15px; align-items: end; min-width: 0; } .form-grid-email-spz > * { min-width: 0; } .booking-field-spz input { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } @media (max-width: 720px) { .form-grid-email-spz { grid-template-columns: 1fr; } } .field-help { display: block; margin-top: 6px; font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.45); line-height: 1.35; } input.input-date, .input-date { color-scheme: dark; } .landing-booking { max-width: min(920px, 100%); margin: 0 auto; } .landing-booking__head { text-align: center; max-width: 680px; margin: 0 auto 28px; padding: 0 8px; } .landing-booking__title { margin: 0 0 10px; } .landing-booking__lead { margin: 0; color: rgba(255, 255, 255, 0.68); font-size: 1.02rem; line-height: 1.55; } .landing-booking__grid { align-items: stretch; gap: clamp(18px, 3vw, 40px); } .landing-form { width: 100%; } .landing-aside { align-self: stretch; } /* Landing: stredový stack (text karta nad formulárom) */ .landing-stack { width: 100%; max-width: min(620px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; } .landing-stack__head { text-align: left; } .landing-info--tyres > h2 { text-align: left; margin: 0 0 8px; font-size: 1.35rem; } .landing-tyres-line { margin: 0; color: rgba(255, 255, 255, 0.72); line-height: 1.5; text-align: left; font-size: 0.92rem; } .landing-tyres-sep { opacity: 0.35; font-weight: 900; } .landing-form--two-col .form-grid-2 { margin-bottom: 0; } .landing-form--two-col > .form-grid-2 + .form-grid-2 { margin-top: 12px; } .landing-form--two-col .form-span-2 { display: block; margin-top: 12px; } @media (min-width: 721px) { /* „span 2“ jen když je .form-grid-2 skutečně dvousloupcové */ .landing-form--two-col .form-span-2 { width: 100%; } } .landing-split { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(18px, 3vw, 40px); align-items: start; min-width: 0; width: 100%; } .landing-info { align-self: start; padding: clamp(18px, 2.2vw, 26px); border-radius: 18px; border: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden; } .landing-info > h2 { margin-top: 0; } .landing-info > p { margin-top: 10px; color: rgba(255, 255, 255, 0.72); line-height: 1.55; } .landing-info .check-list { margin: 16px 0 0; padding-left: 0; list-style: none; display: grid; gap: 10px; } .landing-info .check-list li { background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 10px 12px; line-height: 1.35; } /* (Tyres) už je stredový stack — bez sticky ľavej strany */ /* Pneuservis: jemná dekorácia — vypnutá pri novom layoute */ .landing-info--tyres::after { display: none; } .landing-tyres-head { display: flex; align-items: flex-start; gap: 12px; } .landing-tyres-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)); } .landing-tyres-head__text { min-width: 0; } .landing-tyres-head__text > h2 { margin: 0 0 4px; font-size: 1.35rem; text-align: left; } .landing-tyres-tagline { margin: 0; color: rgba(255, 255, 255, 0.78); line-height: 1.45; font-size: 0.92rem; text-align: left; } .landing-tyres-features { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .landing-tyres-features li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.84rem; line-height: 1.35; color: rgba(255, 255, 255, 0.88); } .landing-tyres-features li span:first-child { font-size: 1rem; flex-shrink: 0; } @media (max-width: 720px) { .landing-tyres-features { grid-template-columns: 1fr 1fr; } .landing-tyres-grid .landing-tyres-features { grid-template-columns: 1fr; } } .label-hint { font-weight: 700; opacity: 0.5; font-size: 0.78rem; margin-left: 6px; } @media (max-width: 950px) { .landing-split { grid-template-columns: 1fr; } } /* Servis — nápovědy, kalendář */ .orders-help { font-size: 0.88rem; color: rgba(255, 255, 255, 0.58); line-height: 1.45; margin: 0 0 14px; } .servis-subtitle { margin: 18px 0 10px; font-size: 0.95rem; font-weight: 900; letter-spacing: 0.5px; color: var(--accent); } .calendar-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; } .calendar-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .calendar-month { font-weight: 900; letter-spacing: 1px; font-size: 0.95rem; } .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0 8px; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); text-align: center; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } /* ---------- Servis calendar lanes split ---------- */ .calendar-lanes { display: grid; grid-template-rows: auto auto auto auto; gap: 6px; margin-top: 6px; } .calendar-lane__title { font-size: 0.7rem; letter-spacing: .6px; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 4px; } .calendar-lane .calendar-daylist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .calendar-lane .calendar-chip { width: 100%; justify-content: flex-start; text-align: left; font-size: 0.78rem; } /* Status dots */ .cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(255,255,255,0.06); } .dot--red { background: rgba(255,77,77,0.95); } .dot--orange { background: rgba(255,165,0,0.95); } .dot--green { background: rgba(0,255,120,0.90); } .dot--blue { background: rgba(80,170,255,0.95); } .dot--muted { background: rgba(180, 180, 195, 0.55); } /* Souhrnné řádky (široký fullscreen 40 dní) — vzhled viz .calendar-wide--forty */ .calendar-lanes--summary { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; margin-top: 4px; } .calendar-strip { display: flex; flex-direction: column; align-items: stretch; text-decoration: none; color: inherit; } .calendar-strip__dots { display: flex; flex-direction: column; align-items: center; gap: 3px; } .calendar-strip__line { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; line-height: 1.2; white-space: nowrap; } .calendar-strip__line b { font-weight: 800; color: rgba(255, 255, 255, 0.95); } /* Detail dne pod měsíčním kalendářem (servis + pneu) */ .calendar-day-detail { margin-top: 16px; padding: 14px 16px 16px; } .calendar-day-detail__head { margin-bottom: 12px; } .calendar-day-detail__head .orders-title { margin-bottom: 4px; } .calendar-day-detail__grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 720px) { .calendar-day-detail__grid { grid-template-columns: 1fr 1fr; gap: 20px; } } @media (min-width: 1024px) { .calendar-day-detail__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; } } .calendar-day-detail__subtitle { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin: 0 0 8px; } .calendar-rent-day .calendar-daylist { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } /* Dashboard: úplný fullscreen kalendár — skryje verejnú hlavičku / pätičku */ body.ks-calendar-fullscreen { overflow: hidden; overscroll-behavior: none; } body.ks-calendar-fullscreen .site-header, body.ks-calendar-fullscreen .site-footer { display: none !important; } body.ks-calendar-fullscreen .dash { padding-top: 0; min-height: 100dvh; background: radial-gradient(ellipse 125% 90% at 50% -15%, rgba(56, 78, 140, 0.42) 0%, rgba(12, 14, 22, 1) 42%, #05060a 100%); } body.ks-calendar-fullscreen .dash-shell--full { max-width: none; margin: 0; padding: 0; padding-bottom: 0; } body.ks-calendar-fullscreen .dash-content--full { min-height: 100dvh; } /* Fullscreen kalendár: globálny max-width 1100px na dash-shell stláčal / rozhadzoval layout (3 úzke mesiace) */ body.ks-calendar-fullscreen .dash.dash--simple .dash-shell--full { max-width: none; width: 100%; margin: 0; padding: 0; } /* Editor dokumentov — max. priestor pre náhľad (skryje hlavičku / bočný rail) */ body.ks-doc-editor-fullscreen .site-header, body.ks-doc-editor-fullscreen .site-footer { display: none !important; } body.ks-doc-editor-fullscreen .dash { padding-top: 0; min-height: 100dvh; } body.ks-doc-editor-fullscreen .section-layout { display: block; } body.ks-doc-editor-fullscreen .section-rail { display: none !important; } body.ks-doc-editor-fullscreen .section-body { max-width: none; margin: 0; padding: 8px 10px 12px; } body.ks-doc-editor-fullscreen .servis-doc-page--fill { min-height: calc(100dvh - 20px); } body.ks-doc-editor-fullscreen .servis-doc-page--with-order .servis-doc-frame { height: calc(100dvh - 120px); } body.ks-doc-editor-fullscreen .servis-doc-page--no-order .servis-doc-frame { height: calc(100dvh - 100px); } /* Cookie / souhlas banner (GDPR) */ .ks-consent { position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 10000; display: none; } .ks-consent__card { max-width: 980px; margin: 0 auto; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: rgba(18, 20, 28, 0.92); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); color: rgba(245, 247, 255, 0.92); } .ks-consent__row { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .ks-consent__text { font-size: 0.92rem; line-height: 1.35; color: rgba(245, 247, 255, 0.9); } .ks-consent__text a { color: #ff3e3e; text-decoration: underline; text-underline-offset: 2px; } .ks-consent__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ks-consent__btn { appearance: none; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; padding: 8px 10px; cursor: pointer; font-weight: 700; font-size: 0.9rem; } .ks-consent__btn--accept { background: #ff3e3e; border-color: #ff3e3e; color: #fff; } .ks-consent__btn--decline { background: rgba(255, 255, 255, 0.06); color: rgba(245, 247, 255, 0.92); } .ks-consent__detail-link { font-size: 0.88rem; font-weight: 700; color: rgba(245, 247, 255, 0.88); text-decoration: underline; text-underline-offset: 2px; padding: 8px 6px; white-space: nowrap; } .ks-consent__detail-link:hover { color: #fff; } /* Registrace — souhlasy pod sebou, menší text */ .ks-reg-consents { padding: 14px 16px !important; margin-bottom: 12px; } .ks-reg-consents__block { font-size: 0.82rem; line-height: 1.45; color: rgba(230, 235, 255, 0.88); } .ks-reg-consents__block--sep { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .ks-reg-consents__lead { margin: 0 0 8px; font-size: 0.78rem; line-height: 1.45; color: rgba(200, 210, 240, 0.75); } .ks-reg-consents__linkbtn { margin: 0 0 10px; } .ks-reg-consents__extlink { display: inline-block; margin: 0 0 10px; font-size: 0.8rem; } .ks-reg-consents__check { margin-top: 4px; align-items: flex-start; } .ks-reg-consents__checktext { font-size: 0.78rem; line-height: 1.4; font-weight: 600; } .ks-reg-consents--compact { padding: 10px 12px !important; margin-top: 4px; margin-bottom: 14px; } .ks-reg-consents--compact .ks-reg-consents__block { font-size: 0.74rem; line-height: 1.4; } .ks-reg-consents--compact .ks-reg-consents__lead { font-size: 0.68rem; margin-bottom: 4px; } .ks-reg-consents--compact .ks-reg-consents__checktext { font-size: 0.7rem; } .ks-reg-consents--compact .ks-reg-consents__linkbtn { margin-bottom: 6px; padding: 4px 10px !important; font-size: 0.72rem !important; } .ks-reg-consents--compact .ks-reg-consents__block--sep { margin-top: 10px; padding-top: 10px; } .ks-reg-rules-frame { width: 100%; min-height: min(78vh, 640px); height: min(78vh, 640px); border: 0; border-radius: 12px; background: rgba(0, 0, 0, 0.35); } .ks-reg-rules-modal .ui-modal__body { padding-top: 8px; } /* Nastavenie verejného profilu — kompaktnejší zoznam */ .ks-settings-privacy-stack { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; } .ks-settings-privacy-stack .settings-check { font-size: 0.82rem; line-height: 1.35; } .ks-settings-privacy-stack .settings-check span { font-weight: 600; } .ks-profile-privacy-lead { font-size: 0.84rem; line-height: 1.5; } .servis-dilna-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .servis-diag-hint { padding: 12px 14px; } /* ----- Zobrazit kalendář — 40 dní (10×4) ----- */ .calendar-wide { position: fixed; inset: 0; z-index: 10050; box-sizing: border-box; height: 100dvh; max-height: 100dvh; width: 100%; max-width: 100vw; display: flex; flex-direction: column; overflow: hidden; color: rgba(245, 247, 255, 0.94); } .calendar-wide--forty { background: transparent; padding: max(4px, env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-right, 0px)) max(4px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); } .calendar-wide--forty .calendar-wide__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-shrink: 0; margin-bottom: 6px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.09); background: linear-gradient(165deg, rgba(32, 38, 56, 0.75) 0%, rgba(16, 18, 28, 0.88) 100%); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .calendar-wide--forty .calendar-wide__title { font-weight: 800; letter-spacing: -0.02em; font-size: clamp(0.85rem, 1vw + 0.45rem, 1.1rem); line-height: 1.2; color: #f4f6ff; text-shadow: 0 1px 18px rgba(99, 140, 255, 0.25); } .calendar-wide--forty .calendar-wide__sub { display: block; margin-top: 2px; font-size: clamp(0.68rem, 0.65vw + 0.35rem, 0.8rem); font-weight: 600; letter-spacing: 0.02em; color: rgba(180, 190, 220, 0.88); } @media (min-width: 720px) { .calendar-wide--forty .calendar-wide__sub { display: inline; margin-top: 0; margin-left: 12px; } } .calendar-wide--forty .calendar-wide__close { flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; display: inline-flex; justify-content: center; align-items: center; text-decoration: none; font-size: 1.15rem; line-height: 1; color: rgba(255, 255, 255, 0.92); background: rgba(255, 80, 90, 0.14); border: 1px solid rgba(255, 120, 130, 0.35); transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); } .calendar-wide--forty .calendar-wide__close:hover { background: rgba(255, 100, 110, 0.28); transform: scale(1.04); box-shadow: 0 6px 20px rgba(255, 90, 100, 0.22); } .calendar-wide--forty .calendar-wide__toolbar { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; flex-shrink: 0; padding: 6px 8px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(8, 10, 18, 0.65); } .calendar-wide--forty .calendar-wide__toolbar .btn { font-size: clamp(0.62rem, 0.55vw + 0.32rem, 0.74rem); font-weight: 700; padding: 5px 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.06); color: rgba(240, 242, 255, 0.95); transition: background 0.15s ease, border-color 0.15s ease; } .calendar-wide--forty .calendar-wide__toolbar .btn:hover { background: rgba(120, 160, 255, 0.16); border-color: rgba(140, 175, 255, 0.35); } .calendar-wide--forty .calendar-forty__body { flex: 1 1 auto; min-height: 0; overflow: hidden; container-type: size; container-name: cal-forty; display: flex; align-items: center; justify-content: center; padding: 0; } /* Bunky sú štvorce: mriežka 10×4 má pomer 2.5:1 — veľkosť sa vmestí do kontajnera bez scrollu */ .calendar-wide--forty .calendar-forty__grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 4px; gap: clamp(3px, 0.35cqw, 5px); box-sizing: border-box; width: 100%; height: 100%; max-width: 100%; max-height: 100%; } @supports (width: 1cqw) { .calendar-wide--forty .calendar-forty__grid { width: min(100cqw, calc(100cqh * 10 / 4)); height: min(100cqh, calc(100cqw * 4 / 10)); } } .calendar-wide--forty .calendar-forty__cell { min-width: 0; min-height: 0; padding: 4px 4px 5px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(28, 32, 46, 0.98) 0%, rgba(12, 14, 22, 0.99) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 10px rgba(0, 0, 0, 0.28); display: flex; flex-direction: column; overflow: hidden; font-size: 0.62rem; font-size: clamp(0.58rem, 0.45cqw + 0.28rem, 0.72rem); } .calendar-wide--forty .calendar-forty__cell--busy { border-color: rgba(255, 150, 110, 0.28); background: linear-gradient(180deg, rgba(40, 28, 24, 0.92) 0%, rgba(16, 12, 14, 0.96) 100%); } .calendar-wide--forty .calendar-forty__cell--today { box-shadow: inset 0 0 0 1px rgba(255, 210, 120, 0.7), 0 2px 12px rgba(0, 0, 0, 0.35); border-color: rgba(255, 200, 120, 0.45); } .calendar-wide--forty .calendar-forty__cell-head { font-weight: 900; font-size: 0.65rem; font-size: clamp(0.62rem, 0.5cqw + 0.32rem, 0.78rem); letter-spacing: 0.03em; color: rgba(238, 242, 255, 0.96); margin-bottom: 3px; padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; line-height: 1.15; } .calendar-wide--forty .calendar-forty__cell--vacation { border-color: rgba(255, 140, 100, 0.4); background: linear-gradient(180deg, rgba(52, 30, 24, 0.85) 0%, rgba(20, 12, 12, 0.94) 100%); } .calendar-wide--forty .calendar-lanes--summary { gap: 3px; margin-top: 0; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: stretch; } .calendar-wide--forty .calendar-strip { flex: 1 1 0; min-height: 0; padding: 3px 3px 4px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(0, 0, 0, 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: border-color 0.15s ease, background 0.15s ease; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .calendar-wide--forty .calendar-strip:hover { transform: none; border-color: rgba(255, 255, 255, 0.18); background: rgba(36, 42, 62, 0.55); } .calendar-wide--forty .calendar-strip--lane-servis { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 2px 0 0 0 rgba(108, 156, 255, 0.95); } .calendar-wide--forty .calendar-strip--lane-pneu { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 2px 0 0 0 rgba(255, 188, 96, 0.95); } .calendar-wide--forty .calendar-strip--rent { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 2px 0 0 0 rgba(72, 214, 196, 0.95); } .calendar-wide--forty .calendar-strip__label { width: 100%; text-align: center; font-size: 0.55rem; font-size: clamp(0.52rem, 0.38cqw + 0.22rem, 0.68rem); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(210, 218, 248, 0.95); padding: 0 0 2px; line-height: 1.1; flex-shrink: 0; } .calendar-wide--forty .calendar-strip__dots { width: 100%; align-items: center; gap: 2px; flex: 0 1 auto; min-height: 0; overflow: hidden; justify-content: center; } .calendar-wide--forty .calendar-strip__line { font-size: 0.58rem; font-size: clamp(0.56rem, 0.42cqw + 0.26rem, 0.74rem); font-weight: 800; gap: 4px; } .calendar-wide--forty .calendar-strip .cal-dot { width: 7px; height: 7px; margin-right: 0; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); } .calendar-wide--forty .calendar-vacation-only { font-size: 0.6rem; font-size: clamp(0.58rem, 0.45cqw + 0.28rem, 0.72rem); font-weight: 800; color: rgba(255, 200, 175, 0.96); margin-top: 2px; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; } .calendar-day-manage__row { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: rgba(0, 0, 0, 0.35); } .calendar-day-manage__title { font-weight: 800; font-size: 0.88rem; line-height: 1.25; word-break: break-word; } .calendar-day-manage__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .calendar-card--wide .calendar-lane__title { font-size: clamp(0.48rem, 0.4vw + 0.32rem, 0.62rem); } .calendar-card--wide .calendar-daylist { gap: clamp(1px, 0.2vw, 3px); } .calendar-card--wide .calendar-chip { font-size: clamp(0.48rem, 0.35vw + 0.35rem, 0.65rem); padding: clamp(1px, 0.25vw, 4px) clamp(2px, 0.35vw, 5px); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calendar-card--wide .calendar-chip small { font-size: clamp(0.42rem, 0.3vw + 0.3rem, 0.58rem); } .calendar-card--wide .cal-dot { width: clamp(5px, 0.55vw, 8px); height: clamp(5px, 0.55vw, 8px); margin-right: clamp(3px, 0.4vw, 6px); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06); } .calendar-card--wide .calendar-vacation-only { font-size: clamp(0.55rem, 0.5vw + 0.38rem, 0.72rem); } .calendar-cell--pick-hover { outline: 2px solid rgba(120, 200, 255, 0.95); outline-offset: -1px; box-shadow: inset 0 0 0 1px rgba(120, 200, 255, 0.35); background: rgba(80, 170, 255, 0.12) !important; z-index: 1; } .calendar-cell--vacation-full { border-color: rgba(255, 120, 80, 0.45); background: rgba(255, 100, 60, 0.12); } .calendar-vacation-only { margin-top: 6px; font-weight: 900; font-size: 0.72rem; color: rgba(255, 200, 180, 0.95); letter-spacing: 0.02em; } .calendar-cell--day-focus { outline: 2px solid rgba(100, 190, 255, 0.95); outline-offset: -2px; box-shadow: inset 0 0 0 1px rgba(100, 190, 255, 0.35); z-index: 2; position: relative; scroll-margin-top: 96px; } .ks-servis-cal-anchor { scroll-margin-top: 100px; height: 0; overflow: hidden; pointer-events: none; } .rental-cal-card { margin-bottom: 16px; } .rental-cal-card .rental-cal-cell .calendar-chip { font-size: 0.64rem; } .calendar-chip--link { text-decoration: none; display: block; box-sizing: border-box; } .calendar-chip--link:hover { text-decoration: none; } .calendar-cell { min-height: 92px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.22); padding: 6px 6px 8px; font-size: 0.78rem; } .calendar-cell--muted { opacity: 0.22; min-height: 92px; border: 1px dashed rgba(255, 255, 255, 0.06); background: transparent; } .calendar-cell--busy { border-color: rgba(255, 62, 62, 0.28); background: rgba(255, 62, 62, 0.06); } .calendar-daynum { font-weight: 900; font-size: 0.82rem; margin-bottom: 4px; color: rgba(255, 255, 255, 0.88); } .calendar-daylist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .calendar-chip { width: 100%; text-align: left; border: 0; border-radius: 8px; padding: 4px 6px; font-size: 0.68rem; font-weight: 800; background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; line-height: 1.25; } .calendar-chip small { display: block; font-weight: 700; opacity: 0.55; font-size: 0.62rem; } .calendar-chip:hover { background: rgba(255, 62, 62, 0.18); } @media (max-width: 900px) { .calendar-weekdays, .calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .calendar-cell { min-height: 76px; font-size: 0.65rem; } .calendar-chip { font-size: 0.62rem; padding: 3px 4px; } } @media (max-width: 600px) { .calendar-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -10px; padding: 0 10px 8px; } .calendar-scroll .calendar-weekdays, .calendar-scroll .calendar-grid { min-width: 520px; } } .field-label { display: block; margin-bottom: 12px; color: rgba(255, 255, 255, 0.62); font-size: 0.82rem; font-weight: 800; } .invoice-grid { margin-bottom: 12px; } .invoice-settings-form .invoice-grid label { margin-bottom: 0; } .invoice-settings-stack, .invoice-work-tpl-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .invoice-settings-stack details.group-manage-panel, .invoice-work-tpl-form details.group-manage-panel, #ks-inv-quick.group-manage-panel { margin-top: 0; } .invoice-work-tpl-form { margin-top: 14px; } #ks-inv-quick { margin-top: 14px; } .invoice-placeholder { margin-top: 18px; padding: 16px; } .order-detail__panel { margin-top: 16px; padding: 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.10); background: radial-gradient(740px 240px at 0% 0%, rgba(255,62,62,0.10), transparent 55%), rgba(0, 0, 0, 0.22); } .order-detail__subtitle { margin: 0 0 8px; font-size: 0.88rem; font-weight: 900; color: var(--accent); } /* ---------- Dashboard bez globálnej ľavej lišty + sekcie Servis/Admin ---------- */ .dash.dash--simple .dash-shell--full { display: block; max-width: 1100px; margin: 0 auto; padding: 0 18px 60px; } .dash-content--full { width: 100%; max-width: 100%; overflow-x: clip; } .section-layout { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 8px; } .section-rail { position: sticky; top: 96px; padding: 14px; align-self: start; } .section-rail__brand { font-weight: 900; letter-spacing: 0.5px; font-size: 0.85rem; color: rgba(255,255,255,0.65); text-transform: uppercase; margin-bottom: 10px; } .section-rail__links { display: flex; flex-direction: column; gap: 6px; } .section-rail__link { display: block; padding: 11px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); text-decoration: none; color: rgba(255,255,255,0.90); font-weight: 800; font-size: 0.88rem; cursor: pointer; } a.section-rail__link:hover { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); } .section-rail__link.is-active { border-color: rgba(255,62,62,0.35); background: rgba(255,62,62,0.10); } .section-rail__link.is-disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; } .section-rail__links--invoice-sub { gap: 5px; } .section-rail__links--invoice-sub .section-rail__link--back { font-size: 0.82rem; opacity: 0.88; } .section-rail__link--close { margin-top: 6px; color: #ff8a8a !important; border-color: rgba(255, 90, 90, 0.35) !important; } .ks-subpanel-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(18, 18, 24, 0.92); } .ks-subpanel-bar__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ks-subpanel-bar__title strong { font-size: 0.95rem; } .ks-subpanel-bar__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ks-subpanel-bar__close { border-color: rgba(255, 90, 90, 0.45); color: #ffb0b0; } @media (max-width: 720px) { .ks-subpanel-bar__actions { width: 100%; } } .invoice-editor-card .invoice-side-panel summary { user-select: none; } .section-body { min-width: 0; min-height: min(40vh, 480px); max-width: 100%; overflow-x: clip; } @media (min-width: 1200px) { .section-body.settings-body, .section-body.admin-system { max-width: min(960px, 100%); } } html[data-theme="light"] .section-body, html[data-theme="paper"] .section-body { color: var(--text); } @media (max-width: 900px) { .section-layout { grid-template-columns: 1fr; } .section-rail { position: static; padding: 16px 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(60, 10, 16, 0.55) 0%, rgba(18, 6, 10, 0.72) 100%); border: 1px solid rgba(255, 62, 62, 0.22); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25); } .section-rail__brand { color: rgba(255, 200, 200, 0.88); font-size: 0.8rem; margin-bottom: 12px; } .section-rail__links { flex-direction: row; flex-wrap: wrap; gap: 10px; } .section-rail__link { flex: 1 1 auto; text-align: center; min-width: 132px; padding: 12px 14px; font-size: 0.9rem; line-height: 1.35; border-color: rgba(255, 62, 62, 0.2); background: rgba(0, 0, 0, 0.22); } .section-rail__link.is-active { border-color: rgba(255, 62, 62, 0.55); background: rgba(255, 62, 62, 0.18); color: #fff; } } /* Feed + FAB (Instagram-style compose) */ .feed-stage { position: relative; padding: 12px 12px 16px; min-height: 0; } .feed-stage__posts { display: flex; flex-direction: column; gap: 12px; padding-bottom: 72px; } .feed-fab { position: absolute; right: 18px; bottom: 18px; width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.35); background: linear-gradient(145deg, var(--accent), #ff7a7a); color: #000; font-size: 30px; font-weight: 900; line-height: 1; cursor: pointer; box-shadow: 0 12px 32px rgba(0,0,0,0.45); z-index: 3; transition: transform 0.15s ease, box-shadow 0.15s ease; } .feed-fab:hover { transform: scale(1.06); box-shadow: 0 14px 40px rgba(255,62,62,0.25); } /* * Příspěvky: + vůči oknu (fixed). Tlačítko musí být mimo .glass — backdrop-filter * na předkovi jinak vytvoří containing block a „fixed“ je jen uvnitř karty. */ .feed-fab.feed-fab--fixed-prispevky { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(24px, env(safe-area-inset-bottom, 0px)); z-index: 80; } /* Modál: široký detail, skladanie príspevku */ .ui-modal--wide { width: min(720px, 94vw); max-height: min(88vh, 900px); display: flex; flex-direction: column; } .ui-modal--wide .ui-modal__body { overflow-y: auto; max-height: 62vh; } .ui-modal--compose { width: min(560px, 92vw); } .ui-modal--support { width: min(520px, 92vw); max-height: min(88vh, 720px); display: flex; flex-direction: column; border: 1px solid rgba(255, 62, 62, 0.35); box-shadow: 0 0 0 1px rgba(255, 62, 62, 0.15), 0 28px 70px rgba(0, 0, 0, 0.65); } .ui-modal--support .ui-modal__header { border-bottom-color: rgba(255, 62, 62, 0.2); background: linear-gradient(180deg, rgba(255, 62, 62, 0.1) 0%, transparent 100%); } .ui-modal--flow .ui-modal__body { max-height: min(70vh, 560px); overflow-y: auto; } .ui-modal--flow .compose-textarea { min-height: 160px; } .compose-textarea, .compose-form textarea { width: 100%; min-height: 140px; resize: vertical; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.35); color: #fff; font: inherit; outline: none; } .compose-form .ks-file-upload { width: 100%; } /* Legacy: přímý file input mimo ks-file-upload */ .compose-file, .compose-form input[type="file"]:not(.sr-only) { width: 100%; font-size: 0.85rem; color: rgba(255,255,255,0.75); } .order-detail__title { margin: 0 0 8px; font-weight: 900; } .order-detail__sep { border: 0; border-top: 1px solid rgba(255,255,255,0.12); margin: 12px 0 16px; } .order-detail p { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.45; } .order-detail__link { color: var(--accent); font-weight: 800; text-decoration: none; } .order-detail__link:hover { text-decoration: underline; } .order-detail__message { margin-top: 14px; padding: 12px; border-radius: 12px; background: radial-gradient(600px 220px at 0% 0%, rgba(255,62,62,0.10), transparent 55%), rgba(0,0,0,0.24); border: 1px solid rgba(255,255,255,0.10); font-size: 0.92rem; line-height: 1.5; } .admin-user-detail-root { min-width: 0; } /* Admin: detail uživatele (modal) + reporty / systém */ .admin-user-detail { display: grid; gap: 14px; } .admin-user-detail__hero.card { padding: 0; overflow: hidden; } .admin-user-detail__hero-inner { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 18px 20px; } .admin-user-detail__avatar-wrap { flex-shrink: 0; } .admin-user-detail__avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 62, 62, 0.42); display: block; } .admin-user-detail__headline { min-width: 0; flex: 1; } .admin-user-detail__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .admin-user-detail__title { margin: 0; font-weight: 900; font-size: 1.25rem; letter-spacing: -0.02em; } .admin-user-detail__pill { font-size: 0.72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); text-transform: uppercase; letter-spacing: 0.06em; } .admin-user-detail__pill--online { color: #7dffb0; border-color: rgba(0, 255, 136, 0.28); background: rgba(0, 255, 136, 0.08); } .admin-user-detail__pill--offline { color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.04); } .admin-kv { margin: 0; padding: 4px 16px 12px; display: block; } .admin-kv__row { display: grid; grid-template-columns: minmax(100px, 140px) 1fr; gap: 12px 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); align-items: baseline; } .admin-kv__row:last-child { border-bottom: 0; } .admin-kv__dt { margin: 0; font-weight: 800; font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.05em; } .admin-kv__dd { margin: 0; font-size: 0.92rem; line-height: 1.45; color: rgba(255, 255, 255, 0.92); } @media (max-width: 520px) { .admin-kv__row { grid-template-columns: 1fr; } } .admin-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin: 18px 0 22px; } .admin-report-card { padding: 16px 18px; border-radius: 14px; } .admin-report-card__label { font-size: 0.78rem; font-weight: 700; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; } .admin-report-card__value { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; } .admin-report-card__value--sm { font-size: 1rem; font-weight: 800; word-break: break-word; } .admin-reports__lead, .admin-system__lead { margin: 0 0 4px; font-size: 0.92rem; max-width: 62ch; } .admin-reports__split, .admin-system__split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; } @media (max-width: 900px) { .admin-reports__split, .admin-system__split { grid-template-columns: 1fr; } } .admin-reports__panel, .admin-system__panel { padding: 16px 18px; } .admin-reports__panel--wide { margin-top: 16px; } .admin-reports__foot { margin: 12px 0 0; font-size: 0.88rem; } .admin-system__status { margin-top: 8px; } .admin-system__hint { font-size: 0.86rem; margin: 0 0 12px; line-height: 1.45; } .admin-system__form { max-width: 100%; } .admin-system__textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.25); color: rgba(255, 255, 255, 0.92); font-size: 0.92rem; line-height: 1.45; resize: vertical; min-height: 120px; } .admin-system__textarea:focus { outline: none; border-color: rgba(255, 62, 62, 0.45); box-shadow: 0 0 0 3px rgba(255, 62, 62, 0.12); } .admin-system__links { margin: 0; padding-left: 1.15rem; line-height: 1.8; font-size: 0.92rem; } .grid-home__banner { grid-column: 1 / -1; margin-bottom: 4px; } .home-admin-banner { padding: 14px 18px; border-left: 3px solid rgba(255, 204, 0, 0.65); } .home-admin-banner__title { margin: 0 0 8px; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 214, 120, 0.95); } .home-admin-banner__text { margin: 0; font-size: 0.9rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); white-space: pre-wrap; } .home-promo-banner { padding: 14px 18px; border-left: 3px solid rgba(62, 207, 142, 0.55); } .home-promo-banner__title { margin: 4px 0 10px; font-size: 1rem; font-weight: 800; color: rgba(255, 255, 255, 0.95); } .home-promo-banner__imgwrap { margin: 0 0 12px; border-radius: 12px; overflow: hidden; max-height: 200px; } .home-promo-banner__img { width: 100%; height: auto; max-height: 200px; object-fit: cover; display: block; } .home-promo-banner__body { font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; } /* Akce (promo) — sdílená karta (web, nástěnka, admin náhled) */ .ks-promo-card { padding: 14px 18px; border-left: 3px solid rgba(62, 207, 142, 0.55); text-align: left; } .ks-promo-card--web { border-left-color: rgba(110, 186, 255, 0.65); } .ks-promo-card__eyebrow { margin: 0 0 8px; font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 214, 120, 0.92); } .ks-promo-card--web .ks-promo-card__eyebrow { color: rgba(150, 210, 255, 0.95); } .ks-promo-card__title { margin: 4px 0 10px; font-size: 1.05rem; font-weight: 800; color: rgba(255, 255, 255, 0.96); line-height: 1.25; } .ks-promo-card__imgwrap { margin: 0 0 12px; border-radius: 12px; overflow: hidden; max-height: 200px; } .ks-promo-card__img { width: 100%; height: auto; max-height: 200px; object-fit: cover; display: block; } .ks-promo-card__body { font-size: 0.88rem; line-height: 1.55; color: rgba(255, 255, 255, 0.82); } .ks-promo-card__body p { margin: 0 0 0.65em; } .ks-promo-card__body p:last-child { margin-bottom: 0; } .ks-promo-card__body ul, .ks-promo-card__body ol { margin: 0.4em 0 0.6em; padding-left: 1.25rem; } .ks-promo-card__body a { color: rgba(120, 210, 255, 0.95); text-decoration: underline; } .ks-promo-card__meta { margin: 10px 0 0; font-size: 0.75rem; } .public-promo-section { padding-top: 28px; padding-bottom: 8px; } .public-promo-section__h { margin-bottom: 18px; } .public-promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; } .ks-promo-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; align-items: start; } @media (max-width: 960px) { .ks-promo-admin-grid { grid-template-columns: 1fr; } } .ks-promo-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; } .ks-promo-toolbar .btn-sm { font-size: 0.8rem; padding: 6px 11px; } .ks-promo-editor { min-height: 200px; max-height: 340px; overflow: auto; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.28); line-height: 1.55; outline: none; } .ks-promo-editor:focus { border-color: rgba(62, 207, 142, 0.45); } .ks-promo-admin-preview-stack { display: flex; flex-direction: column; gap: 16px; } .ks-promo-admin-preview-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255, 255, 255, 0.5); margin: 0 0 8px; } @media (min-width: 961px) { .ks-promo-admin-preview-mount { position: sticky; top: 10px; } } /* Skupiny — prohlížení a přehled */ .groups-browse-mount { margin-top: 8px; } .groups-browse-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .groups-browse-card { display: flex; gap: 14px; padding: 16px; align-items: flex-start; border: 1px solid rgba(255,255,255,0.10); background: radial-gradient(520px 220px at 0% 0%, rgba(255,62,62,0.12), transparent 55%), rgba(0,0,0,0.18); transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease; } .groups-browse-card:hover { transform: translateY(-2px); border-color: rgba(255,62,62,0.22); background: radial-gradient(520px 220px at 0% 0%, rgba(255,62,62,0.16), transparent 55%), rgba(0,0,0,0.20); } .groups-card__avatar { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.1); } .groups-card__avatar--ph { background: linear-gradient(135deg, rgba(255, 62, 62, 0.25), rgba(80, 80, 100, 0.4)); } .groups-card__avatar--large { width: 96px; height: 96px; border-radius: 14px; } .groups-card__body { flex: 1; min-width: 0; } .groups-card__title { margin: 0 0 6px; font-size: 1.05rem; } .groups-card__bio { margin: 0 0 10px; font-size: 0.88rem; line-height: 1.45; } .groups-card__actions { margin-top: 4px; } /* Skupiny — mapa polohy */ /* Nastavení účtu — zvýraznění aktivní záložky */ .settings-body .section-rail__link.ks-settings-tab.is-active { border-left: 3px solid #3ecf8e; color: rgba(255, 255, 255, 0.95); background: rgba(62, 207, 142, 0.08); } .settings-body .section-rail__link.ks-settings-tab:not(.is-active) { border-left: 3px solid rgba(255, 62, 62, 0.35); color: rgba(255, 255, 255, 0.72); } /* Veřejný profil — řádky viditelnosti (zelená = zapnuto, červený nádech = vypnuto) */ .ks-settings-vis-row { border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); transition: border-color 0.15s ease, background 0.15s ease; } .ks-settings-vis-row--on { border-color: rgba(62, 207, 142, 0.45); background: rgba(62, 207, 142, 0.07); } .ks-settings-vis-row--off { border-color: rgba(255, 62, 62, 0.28); background: rgba(255, 62, 62, 0.05); } /* Nastavení účtu — přepínače (viditelné na všech záložkách nastavení) */ .ks-switch, .ks-switch-field__ui { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: #e8eefc; cursor: pointer; user-select: none; } .ks-switch__thumb { width: 38px; height: 22px; border-radius: 999px; background: rgba(148, 163, 184, 0.35); position: relative; display: inline-block; transition: background 0.18s ease; flex-shrink: 0; } .ks-switch__thumb::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #e2e8f0; transition: transform 0.18s ease, background 0.18s ease; } .ks-switch.is-on { border-color: rgba(62, 207, 142, 0.35); background: rgba(62, 207, 142, 0.12); } .ks-switch.is-on .ks-switch__thumb { background: rgba(62, 207, 142, 0.45); } .ks-switch.is-on .ks-switch__thumb::after { transform: translateX(16px); background: #052e1b; } .ks-switch__label { font-weight: 700; font-size: 0.92rem; } .ks-switch-field { position: relative; display: block; cursor: pointer; } /* Checkbox přes celý řádek — klik i klávesnice */ .ks-switch-field__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; } .ks-switch-field__ui { position: relative; z-index: 1; pointer-events: none; width: 100%; box-sizing: border-box; } .ks-switch-field__input:focus-visible + .ks-switch-field__ui { outline: 2px solid rgba(62, 207, 142, 0.65); outline-offset: 3px; } .ks-switch-field__input:checked + .ks-switch-field__ui { border-color: rgba(62, 207, 142, 0.35); background: rgba(62, 207, 142, 0.12); } .ks-switch-field__input:checked + .ks-switch-field__ui .ks-switch__thumb { background: rgba(62, 207, 142, 0.45); } .ks-switch-field__input:checked + .ks-switch-field__ui .ks-switch__thumb::after { transform: translateX(16px); background: #052e1b; } .ks-settings-privacy-stack .ks-switch-field.ks-settings-vis-row { padding: 0; margin: 0; } .ks-settings-privacy-stack .ks-switch-field.ks-settings-vis-row .ks-switch-field__ui { padding: 12px 14px; border-radius: 14px; } .home-card--nested .ks-switch-field .ks-switch-field__ui { margin-top: 8px; } /* Vlastní výběr souboru (dark UI) */ .ks-file-upload { display: flex; flex-direction: column; gap: 8px; } .ks-file-upload__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; } .ks-file-upload__btn { flex-shrink: 0; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 0.88rem; } .ks-file-upload__text { font-size: 0.88rem; color: rgba(255, 255, 255, 0.62); word-break: break-word; } .ks-file-upload__btn:focus-visible { outline: 2px solid rgba(62, 207, 142, 0.65); outline-offset: 3px; } /* Skupinový chat — aktivní reakce */ .gcm-react-btn.is-active { border-color: rgba(62, 207, 142, 0.55) !important; background: rgba(62, 207, 142, 0.14) !important; } .groups-map__fs-wrap { position: relative; } .groups-map__toolbar-top { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 600; pointer-events: none; } .groups-map__search-inline { display: flex; gap: 8px; pointer-events: auto; align-items: stretch; } .groups-map__search-inline .field__input { flex: 1; min-width: 0; background: rgba(7, 7, 10, 0.9); backdrop-filter: blur(8px); } .groups-map__search-inline .btn-accent { flex-shrink: 0; white-space: nowrap; } .groups-map__search-results--overlay { pointer-events: auto; margin-top: 6px; max-height: min(220px, 38vh); overflow: auto; background: rgba(7, 7, 10, 0.94); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 6px; } .groups-map__toolbar-bottom { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 610; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; pointer-events: auto; } .groups-map__tool { background: rgba(7, 7, 10, 0.92); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.82rem; padding: 8px 12px; white-space: nowrap; } .groups-map__tool--fs { margin-left: auto; } .groups-map__sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 700; max-height: min(72vh, 520px); overflow: auto; background: rgba(12, 14, 22, 0.96); border-top: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45); } .groups-map__sheet--wide { max-height: min(82vh, 640px); } .groups-map__sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 8px; position: sticky; top: 0; background: inherit; z-index: 1; } .groups-map__sheet-body { padding: 0 14px 14px; } .groups-map__sheet-close { min-width: 36px; } .groups-map__caption { position: absolute; left: 10px; right: 10px; bottom: 58px; z-index: 580; max-width: calc(100% - 20px); padding: 8px 12px; font-size: 0.82rem; line-height: 1.4; background: rgba(7, 7, 10, 0.82); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; pointer-events: none; } .groups-map__fs-wrap { min-height: 320px; } .groups-map__canvas { z-index: 1; } @media (max-width: 640px) { .groups-map__tool--fs { margin-left: 0; width: 100%; justify-content: center; } .groups-map__toolbar-bottom { bottom: 8px; left: 8px; right: 8px; } .groups-map__caption { bottom: 96px; font-size: 0.78rem; } } .group-location-hint--desktop { display: none; } @media (min-width: 900px) { .group-location-hint--desktop { display: block; } } @media (max-width: 720px) { .group-location-map.groups-map-card { padding: 12px 14px !important; } } .groups-map__fs { position: absolute; top: 10px; left: 10px; right: auto; z-index: 500; } .groups-map__fs-wrap:fullscreen { background: #07070a; padding: 10px; } .groups-map__fs-wrap:fullscreen .groups-map__canvas { height: calc(100vh - 24px) !important; margin: 0; } .groups-map-card .groups-map__canvas { height: 360px; border-radius: 14px; margin: 14px 0; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(15, 23, 42, 0.45); } .groups-map-card .leaflet-control-attribution { margin: 0 0 10px 0; padding: 4px 10px; max-width: min(100%, calc(100% - 120px)); border-radius: 8px; background: rgba(7, 7, 10, 0.82); color: rgba(255, 255, 255, 0.55); font-size: 10px; line-height: 1.35; border: 1px solid rgba(255, 255, 255, 0.08); } .groups-map-card .leaflet-control-attribution a { color: rgba(120, 200, 255, 0.9); } .groups-map__toolbar { gap: 12px; } .groups-map__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .groups-map__meet strong { font-size: 0.95rem; } .groups-map__search-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; } .groups-map__search-row .field__input { flex: 1 1 200px; min-width: 0; } .groups-map__search-results { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .groups-map__search-item { border-radius: 12px; border: 1px solid rgba(255, 62, 62, 0.22); background: rgba(255, 62, 62, 0.06); padding: 10px 12px; } .groups-map__search-item__title { font-size: 0.88rem; line-height: 1.45; color: rgba(255, 255, 255, 0.92); margin-bottom: 8px; } .groups-map__search-item__actions { display: flex; flex-wrap: wrap; gap: 8px; } /* Režim výberu miesta na mape — zvýraznenie „rámečku“ mapy */ .leaflet-container.groups-map__canvas--pick { outline: 3px solid rgba(255, 62, 62, 0.9); outline-offset: -3px; box-shadow: inset 0 0 0 2px rgba(255, 62, 62, 0.35), 0 0 0 6px rgba(255, 62, 62, 0.12); border-radius: 14px; cursor: crosshair; } /* Jednotné zaškrtávacie polia (Klip červená) */ .ks-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.2); transition: border-color 0.15s ease, background 0.15s ease; } .ks-check:hover { border-color: rgba(255, 62, 62, 0.28); background: rgba(255, 62, 62, 0.06); } .ks-check__input { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; margin-top: 2px; accent-color: #ff3e3e; border-radius: 6px; cursor: pointer; flex-shrink: 0; } .ks-check__text { flex: 1; line-height: 1.45; font-size: 0.92rem; color: rgba(255, 255, 255, 0.9); } .settings-check.ks-check { border: none; background: transparent; padding-left: 0; padding-right: 0; } .settings-check.ks-check:hover { background: rgba(255, 62, 62, 0.04); } input[type="checkbox"]:not(.ks-check__input) { width: 1.15rem; height: 1.15rem; accent-color: #ff3e3e; cursor: pointer; border-radius: 4px; } /* --- PROJEKT (garáž, vozidlo, úpravy) --- */ .projekt-body { display: flex; flex-direction: column; gap: 18px; } .projekt-card .form-actions { margin-top: 10px; } .projekt-card .projekt-lead { margin: 0 0 16px; max-width: 62ch; line-height: 1.5; } .projekt-photo-preview { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 62, 62, 0.28); max-width: 420px; background: rgba(0, 0, 0, 0.35); } .projekt-photo-preview img { display: block; width: 100%; height: auto; vertical-align: middle; } .garage-hero { position: relative; overflow: hidden; min-height: clamp(200px, 32vw, 280px); padding: 0; border: 1px solid rgba(0, 255, 200, 0.22); box-shadow: 0 0 40px rgba(0, 255, 200, 0.08), inset 0 0 80px rgba(0, 0, 0, 0.65); background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(40, 8, 20, 0.9) 0%, #050508 55%); } .garage-hero__hex { position: absolute; inset: -20%; opacity: 0.22; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath fill='none' stroke='%2300ffc8' stroke-width='0.8' d='M28 0 L52 14 L52 36 L28 50 L4 36 L4 14 Z'/%3E%3Cpath fill='none' stroke='%23ff2d6b' stroke-width='0.5' d='M28 50 L52 64 L52 86 L28 100 L4 86 L4 64 Z'/%3E%3C/svg%3E"); background-size: 56px 100px; animation: garageHexDrift 38s linear infinite; pointer-events: none; } @keyframes garageHexDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-56px, 0, 0); } } .garage-hero__glow { position: absolute; inset: 0; background: radial-gradient(circle at 22% 40%, rgba(255, 45, 107, 0.18) 0%, transparent 42%), radial-gradient(circle at 78% 35%, rgba(0, 255, 200, 0.16) 0%, transparent 40%); pointer-events: none; } .garage-hero__stage { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: clamp(200px, 32vw, 280px); padding: 24px 16px 44px; } .garage-hero__pile { position: relative; width: min(400px, 90%); height: 168px; } .garage-hero__cloth { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 92%; height: 72px; border-radius: 50% 50% 40% 40% / 70% 70% 32% 32%; background: linear-gradient(175deg, rgba(34, 36, 44, 0.96) 0%, rgba(6, 6, 10, 0.99) 100%); box-shadow: 0 -8px 36px rgba(0, 255, 200, 0.14), inset 0 -18px 40px rgba(0, 0, 0, 0.88); filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.55)); } .garage-hero__silhouette { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 220px; height: 88px; clip-path: polygon(8% 78%, 4% 52%, 12% 38%, 22% 32%, 35% 28%, 48% 22%, 62% 22%, 78% 28%, 88% 36%, 94% 48%, 96% 62%, 92% 78%, 82% 88%, 62% 94%, 38% 94%, 18% 88%); background: linear-gradient(185deg, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.94) 100%); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.92); animation: garageCarPulse 4.5s ease-in-out infinite; } @keyframes garageCarPulse { 0%, 100% { opacity: 0.88; filter: brightness(0.95); } 50% { opacity: 1; filter: brightness(1.08); } } .garage-hero__neon { position: absolute; bottom: 18%; width: 3px; height: 55%; border-radius: 3px; filter: blur(0.5px); opacity: 0.75; z-index: 1; } .garage-hero__neon--l { left: 12%; background: linear-gradient(180deg, transparent, #00ffc8, transparent); box-shadow: 0 0 18px #00ffc8; } .garage-hero__neon--r { right: 12%; background: linear-gradient(180deg, transparent, #ff2d6b, transparent); box-shadow: 0 0 18px #ff2d6b; } .garage-hero__tag { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; text-align: center; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0, 255, 200, 0.55); z-index: 3; text-shadow: 0 0 12px rgba(0, 255, 200, 0.35); } @media (prefers-reduced-motion: reduce) { .garage-hero__hex { animation: none; } .garage-hero__silhouette { animation: none; } } /* PROJEKT — hero garáže (volitelná fotka assets/img/projekt-garage-hero.*) */ .garage-scene { position: relative; overflow: hidden; padding: 0; border: 1px solid rgba(120, 255, 220, 0.22); border-radius: var(--radius); min-height: clamp(180px, 22vw, 280px); max-height: min(42vh, 360px); box-shadow: 0 0 0 1px rgba(255, 62, 62, 0.18), 0 0 42px rgba(0, 255, 200, 0.1), 0 24px 60px rgba(0, 0, 0, 0.55); } .garage-scene--hero:not(.garage-scene--hero-photo) { background: radial-gradient(ellipse 95% 65% at 50% 0%, rgba(55, 65, 95, 0.4) 0%, transparent 52%), radial-gradient(ellipse 100% 85% at 50% 100%, rgba(255, 62, 62, 0.1) 0%, transparent 48%), linear-gradient(188deg, #161b26 0%, #0a0c12 42%, #020204 100%); } .garage-scene__photo { position: absolute; inset: 0; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #07080c; } .garage-scene__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .garage-scene--hero-photo .garage-scene__veil { background: linear-gradient( 180deg, rgba(4, 6, 12, 0.2) 0%, rgba(4, 6, 12, 0.05) 40%, rgba(2, 3, 8, 0.5) 70%, rgba(1, 2, 6, 0.9) 100% ); } .garage-scene--hero:not(.garage-scene--hero-photo) .garage-scene__veil { background: linear-gradient( 180deg, rgba(255, 45, 70, 0.07) 0%, transparent 32%, rgba(0, 0, 0, 0.4) 100% ); } .garage-scene__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 14px 16px 16px; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; text-align: center; color: rgba(255, 255, 255, 0.72); background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.4) 45%, transparent 100%); text-shadow: 0 0 20px rgba(255, 45, 80, 0.4); } .projekt-subtitle { margin: 18px 0 10px; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 62, 62, 0.9); } .projekt-hint { margin: -4px 0 12px; font-size: 0.82rem; line-height: 1.45; } .projekt-mod-detail-row { background: rgba(255, 62, 62, 0.06); } .projekt-mod-detail-row.is-open { animation: projekt-detail-in 0.2s ease; } @keyframes projekt-detail-in { from { opacity: 0.6; } to { opacity: 1; } } .projekt-mod-detail-cell { padding-top: 8px !important; padding-bottom: 14px !important; vertical-align: top; } .projekt-mod-detail-label { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 200, 200, 0.85); margin-bottom: 8px; } .projekt-mod-detail-input { width: 100%; box-sizing: border-box; } .projekt-mod-static-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-bottom: 8px; } .projekt-mod-static-grid--full { grid-column: 1 / -1; } @media (max-width: 640px) { .projekt-mod-static-grid { grid-template-columns: 1fr; } } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; } .projekt-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; overflow: hidden; } .projekt-table th, .projekt-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.06); vertical-align: middle; } .projekt-table thead th { background: rgba(255, 62, 62, 0.12); font-weight: 900; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; } .projekt-table tbody tr:last-child th, .projekt-table tbody tr:last-child td { border-bottom: 0; } .projekt-table th { width: 34%; color: rgba(255, 255, 255, 0.55); font-weight: 800; } .projekt-table--controls .projekt-range { width: 100%; max-width: 280px; } .projekt-preview-wrap { margin-bottom: 16px; } .projekt-preview-live { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: radial-gradient(circle at 50% 30%, rgba(40, 20, 30, 0.5) 0%, #0a0a0e 70%); min-height: 200px; display: flex; align-items: center; justify-content: center; } .projekt-preview-live img { max-width: 100%; max-height: 320px; width: auto; height: auto; display: block; transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .projekt-preview-ph { padding: 40px 20px; text-align: center; color: rgba(255, 255, 255, 0.45); font-size: 0.88rem; max-width: 36ch; line-height: 1.5; } .projekt-tools { margin: 10px 0 6px; } .projekt-actions-row { margin-top: 14px; } .projekt-inquiry-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .projekt-inquiry-form__btn { width: 100%; justify-content: center; } textarea.projekt-inq-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .projekt-rail .section-rail__brand { letter-spacing: 0.12em; } /* Obal „showroom“ garáže — červený rám + hex textura */ .garage-scene-shell { position: relative; border-radius: var(--radius); padding: 3px; background: linear-gradient( 145deg, rgba(255, 45, 80, 0.55) 0%, rgba(18, 18, 26, 0.95) 35%, rgba(0, 255, 200, 0.22) 100% ); box-shadow: 0 0 0 1px rgba(255, 45, 80, 0.25), 0 20px 56px rgba(0, 0, 0, 0.55), 0 0 80px rgba(255, 45, 80, 0.08); } .garage-scene-shell__hex { position: absolute; inset: 3px; border-radius: calc(var(--radius) - 2px); opacity: 0.12; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 90% 55% at 50% 42%, rgba(255, 45, 80, 0.14) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(0, 255, 200, 0.06) 0%, transparent 45%); mix-blend-mode: screen; } .garage-scene-shell__rim { position: absolute; left: 8%; right: 8%; bottom: 22px; height: 2px; border-radius: 2px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 45, 80, 0.75), transparent); box-shadow: 0 0 20px rgba(255, 45, 80, 0.35); opacity: 0.9; } .garage-scene-shell .garage-scene--hero-photo { box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.45); } .garage-scene-shell .garage-scene { position: relative; z-index: 3; margin: 0; border: none; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.35); } .projekt-card--mods .projekt-preview-wrap { margin-top: 4px; } .projekt-wishlist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .projekt-wish-cat { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(0, 0, 0, 0.22); overflow: hidden; } .projekt-wish-cat__summary { cursor: pointer; list-style: none; padding: 12px 14px; font-weight: 900; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 62, 62, 0.95); background: linear-gradient(90deg, rgba(255, 62, 62, 0.12), transparent); } .projekt-wish-cat__summary::-webkit-details-marker { display: none; } .projekt-wish-cat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 14px; padding: 12px 14px 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .projekt-wish-cat__panel { padding: 12px 14px 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .projekt-wish-cat__panel .table-scroll { margin-top: 8px; } .projekt-wish-label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; line-height: 1.35; color: rgba(255, 255, 255, 0.88); cursor: pointer; } .projekt-wish-label input { margin-top: 3px; flex-shrink: 0; } .projekt-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 6px; } @media (max-width: 820px) { .projekt-plan-grid { grid-template-columns: 1fr; } } .home-support-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.25); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .home-support-btn:hover { border-color: rgba(255, 62, 62, 0.45); background: rgba(255, 62, 62, 0.08); } .home-support-btn__label { font-size: 0.88rem; font-weight: 800; } .home-support-btn__hint { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.42); } /* -------------------------------------------------------------------------- */ /* UI polish overrides (sjednocení starších částí do nového vzhledu) */ /* -------------------------------------------------------------------------- */ /* Booking form labels (odstraní staré #888/13px) */ .booking-form label { color: rgba(255, 255, 255, 0.66); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em; margin-bottom: 12px; } /* Unified inputs for older markup using .field-input */ .field-input { width: 100%; padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.11); background: rgba(0,0,0,0.32); color: #fff; outline: none; font-family: inherit; } .field-input::placeholder { color: rgba(255,255,255,0.42); } .field-input:focus-visible { box-shadow: var(--ring); border-color: rgba(255, 62, 62, 0.35); } /* Legacy modal: vizuálně sladit s ui modal */ .legacy-modal__dialog { background: rgba(15, 15, 15, 0.88); border-color: rgba(255,255,255,0.11); border-radius: 18px; box-shadow: var(--shadow); backdrop-filter: blur(18px); } .legacy-modal__x:hover { background: rgba(255,255,255,0.07); transform: translateY(-1px); } /* Tables: jemnější header a lepší scroll */ .admin-table-wrap, .orders-table-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .admin-thead tr { border-bottom-color: rgba(255, 62, 62, 0.26); } /* Ghost button used across servis/admin */ .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.92); text-decoration: none; cursor: pointer; font-weight: 900; letter-spacing: 0.02em; transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease; } .btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); transform: translateY(-1px); } .btn-ghost:active { transform: translateY(0); } /* Generic table (used by servis lists) */ .table { width: 100%; border-collapse: collapse; font-size: 0.9rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden; background: rgba(0,0,0,0.18); } .table thead tr { background: radial-gradient(820px 220px at 0% 0%, rgba(255,62,62,0.10), transparent 55%), rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,62,62,0.24); } .table th, .table td { padding: 12px 12px; text-align: left; vertical-align: middle; } .table th { letter-spacing: 0.08em; text-transform: uppercase; font-weight: 900; font-size: 0.74rem; color: rgba(255, 62, 62, 0.92); } .table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.06); } .table tbody tr:hover { background: rgba(255,255,255,0.03); } .table tbody tr:last-child { border-bottom: 0; } .table--tight th, .table--tight td { padding: 10px 10px; } .table-empty { opacity: 0.75; } /* Servis editors: invoice + documents (move inline styles to global CSS) */ .inv-export-group, .servis-doc-export-group { display: inline-flex; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.16); vertical-align: middle; } .inv-export-group .btn-ghost, .servis-doc-export-group .btn-ghost { border-radius: 0; margin: 0; border: none; border-right: 1px solid rgba(255,255,255,0.14); } .inv-export-group .btn-ghost:last-child, .servis-doc-export-group .btn-ghost:last-child { border-right: none; } .veh-field-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; } .veh-field-table th, .veh-field-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); vertical-align: middle; text-align: left; } .veh-field-table th { width: 38%; max-width: 240px; font-weight: 800; font-size: 0.86rem; color: rgba(255,255,255,0.70); white-space: normal; } .veh-field-table td input { width: 100%; box-sizing: border-box; } .veh-field-table tr:last-child th, .veh-field-table tr:last-child td { border-bottom: none; } .veh-lookup-status { display: inline-flex; align-items: center; gap: 8px; min-height: 1.5rem; font-size: 0.88rem; margin-left: 6px; vertical-align: middle; } .veh-lookup-status__spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.35); border-top-color: rgba(255,255,255,0.92); border-radius: 50%; animation: ksVinSpin 0.65s linear infinite; vertical-align: middle; flex-shrink: 0; } .veh-lookup-status__txt { opacity: 0.92; } .veh-lookup-status__icon { font-weight: 900; font-size: 1.15rem; line-height: 1; } .veh-lookup-status__icon--ok { color: #81c784; } .veh-lookup-status__icon--fail { color: #e57373; } @keyframes ksVinSpin { to { transform: rotate(360deg); } } .servis-doc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; margin-bottom: 0; border-radius: 14px; background: rgba(0,0,0,0.20); border: 1px solid rgba(255,255,255,0.08); } .servis-doc-toolbar__title { font-weight: 900; } .servis-doc-toolbar__meta { font-size: 0.85rem; opacity: 0.9; } .servis-doc-toolbar__spacer { flex: 1; min-width: 8px; } .servis-doc-page--fill { display: flex; flex-direction: column; gap: 10px; min-height: calc(100dvh - 88px); min-height: calc(100vh - 88px); } .servis-doc-surface-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .servis-doc-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; border-radius: 12px; background: transparent; } .servis-doc-page--no-order .servis-doc-frame { height: calc(100dvh - 128px); height: calc(100vh - 128px); } .servis-doc-page--with-order .servis-doc-frame { height: calc(100dvh - 210px); height: calc(100vh - 210px); } @media (max-width: 900px) { .servis-doc-page--no-order .servis-doc-frame { height: calc(100dvh - 150px); height: calc(100vh - 150px); } .servis-doc-page--with-order .servis-doc-frame { height: calc(100dvh - 260px); height: calc(100vh - 260px); } } /* Monthly reports (screen + A4 print) */ .report-form { max-width: 520px; } .ks-report-delete-form code { font-size: 0.85em; padding: 1px 5px; border-radius: 4px; background: rgba(255, 80, 80, 0.12); } .ks-report-sheet { margin-top: 1rem; } .ks-report-sheet__inner { background: #fff; color: #111; border-radius: 10px; padding: 18px 20px 22px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25); } .ks-report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid #222; padding-bottom: 12px; margin-bottom: 16px; } .ks-report-brand__name { font-size: 1.35rem; font-weight: 900; letter-spacing: 0.02em; color: #111; } .ks-report-brand__sub { font-size: 0.95rem; color: #444; margin-top: 2px; } .ks-report-head__meta { text-align: right; font-size: 0.88rem; line-height: 1.45; color: #333; } .ks-report-head__gen { margin-top: 4px; color: #666; font-size: 0.82rem; } .ks-report-section { margin-bottom: 18px; page-break-inside: avoid; } .ks-report-section--stock { page-break-before: auto; } .ks-report-h { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; color: #111; border-left: 3px solid #c62828; padding-left: 8px; } .ks-report-lead { margin: 0 0 10px; font-size: 0.82rem; color: #555; } .ks-report-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; } .ks-report-kpi { border: 1px solid #ddd; border-radius: 6px; padding: 8px 10px; background: #f7f7f8; } .ks-report-kpi span { display: block; font-size: 0.75rem; color: #666; margin-bottom: 2px; } .ks-report-kpi strong { font-size: 0.98rem; color: #111; } .ks-report-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.78rem; color: #111; background: #fff; } .ks-report-table th, .ks-report-table td { border: 1px solid #ccc; padding: 5px 6px; vertical-align: top; word-wrap: break-word; overflow-wrap: anywhere; } .ks-report-table thead th { background: #eceff1; font-weight: 700; text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.02em; } .ks-report-table td.num { text-align: right; white-space: nowrap; } .ks-report-table--mov th:nth-child(1), .ks-report-table--mov td:nth-child(1) { width: 14%; } .ks-report-table--mov th:nth-child(3), .ks-report-table--mov td:nth-child(3) { width: 22%; } .ks-report-note-row td { background: #fafafa; color: #555; font-size: 0.74rem; border-top: 0; } .ks-report-empty { text-align: center; color: #777; font-style: italic; } .ks-report-count { margin: 6px 0 0; font-size: 0.8rem; color: #444; } .ks-report-foot { margin-top: 18px; padding-top: 10px; border-top: 1px solid #ccc; font-size: 0.75rem; color: #777; text-align: center; } @media (max-width: 700px) { .ks-report-kpis { grid-template-columns: 1fr; } .ks-report-head { flex-direction: column; } .ks-report-head__meta { text-align: left; } } @media print { .no-print { display: none !important; } .section-rail { display: none !important; } .section-layout { display: block !important; } .section-body { margin: 0 !important; padding: 0 !important; max-width: none !important; } .servis-doc-surface-wrap { box-shadow: none !important; } .servis-doc-frame { min-height: auto !important; } .card.glass, .orders-card { box-shadow: none !important; background: transparent !important; border: 0 !important; } @page { size: A4 portrait; margin: 10mm 12mm; } html, body { background: #fff !important; color: #000 !important; } body * { box-shadow: none !important; } .ks-report-sheet { margin: 0 !important; } .ks-report-sheet__inner { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; max-width: 100% !important; color: #000 !important; background: #fff !important; } .ks-report-table { font-size: 8.5pt !important; } .ks-report-table th, .ks-report-table td { padding: 3px 4px !important; border-color: #999 !important; } .ks-report-table thead th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ks-report-kpi { background: #f5f5f5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ks-report-section { break-inside: avoid; page-break-inside: avoid; } .ks-report-table tr { break-inside: avoid; page-break-inside: avoid; } .ks-report-h { font-size: 12pt !important; } .ks-report-brand__name { font-size: 16pt !important; } } /* legacy aliases (kept for older markup) */ .report-card { margin-top: 1rem; padding: 1rem; } .report-print-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 0.75rem; margin-bottom: 1rem; } .report-title { margin: 0; font-size: 1.15rem; font-weight: 1000; } .report-meta { opacity: 0.85; font-size: 0.9rem; } .report-meta--right { text-align: right; font-size: 0.85rem; } .report-section-title { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 1000; } .report-section-title--spaced { margin-top: 1.25rem; } .report-section-lead { opacity: 0.8; font-size: 0.85rem; margin: 0 0 0.75rem; } .report-kpis { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; font-size: 0.9rem; } .inv-frame { width: 100%; height: calc(100vh - 320px); min-height: 420px; border: 0; border-radius: 12px; background: #e8e8e8; } /* Warehouse (Sklad) — unify spacing, remove inline styles */ .servis-warehouse__head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: flex-start; } .servis-warehouse__lead { margin-top: 0.35rem; } .servis-warehouse__actions { display: flex; flex-wrap: wrap; gap: 8px; } .servis-block { margin-top: 1rem; } .servis-form-row { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .servis-field--minw { min-width: 12rem; } .servis-field-actions { display: flex; align-items: flex-end; } .servis-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem; } .servis-help--sm { font-size: 0.8rem; } .servis-table-note { font-size: 0.8rem; opacity: 0.9; } .servis-inline-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 14rem; } .servis-inline-form__input { width: 5rem; min-width: 0; } /* Servis generic helpers (reduce inline styles in servis partials) */ .servis-actions-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 0.5rem; } .servis-actions-row--tight { gap: 8px; margin-top: 0.65rem; } .servis-table-topgap { margin-top: 1rem; } .servis-form-topgap { margin-top: 0.75rem; } .servis-block--lg { margin-top: 1.25rem; } .servis-fieldset { border: 0; padding: 0; margin-top: 0.75rem; } .servis-fieldset__legend { margin-bottom: 0.35rem; } .servis-fieldset__help { margin-top: 0; } .servis-radio-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 0.4rem; } .servis-radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .servis-inline-input { width: 100%; min-width: 0; box-sizing: border-box; } .inv-col--qty { width: 7rem; } .inv-col--vat { width: 6rem; } .inv-col--price { width: 8rem; } .inv-col--x { width: 3.5rem; } /* Servis documents (templates + wizard) */ .servis-docs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; } .servis-docs__card { border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 1rem; background: rgba(0,0,0,0.15); } .servis-docs__card-title { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 900; } .servis-docs__card-key { margin: 0 0 0.75rem; font-size: 0.75rem; opacity: 0.65; } .servis-docs__card-actions { display: flex; flex-direction: column; gap: 0.65rem; } .servis-docs__inline-label select { width: 100%; } .servis-docs__wizard-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-top: 0.75rem; } .servis-docs__subtitle { margin: 0 0 0.5rem; font-size: 1.1rem; font-weight: 900; } /* Modál: zablokovaný termín v rezervačním formuláři — přehledová tabulka */ .ks-booking-block-modal.ui-modal { width: min(440px, 92vw); border: 1px solid rgba(255, 62, 62, 0.28); box-shadow: 0 0 0 1px rgba(255, 62, 62, 0.12), 0 24px 56px rgba(0, 0, 0, 0.55); } .ks-booking-block-modal .ui-modal__header { border-bottom-color: rgba(255, 62, 62, 0.18); background: linear-gradient(180deg, rgba(255, 62, 62, 0.12) 0%, transparent 100%); } .ks-blocked-date-modal__lead { margin: 0 0 14px; font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); } html[data-theme="light"] .ks-blocked-date-modal__lead { color: rgba(15, 23, 42, 0.78); } .ks-blocked-date-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.28); font-size: 0.9rem; line-height: 1.45; } html[data-theme="light"] .ks-blocked-date-table { border-color: rgba(15, 23, 42, 0.12); background: rgba(255, 255, 255, 0.65); } .ks-blocked-date-table tr:not(:last-child) th, .ks-blocked-date-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255, 255, 255, 0.07); } html[data-theme="light"] .ks-blocked-date-table tr:not(:last-child) th, html[data-theme="light"] .ks-blocked-date-table tr:not(:last-child) td { border-bottom-color: rgba(15, 23, 42, 0.08); } .ks-blocked-date-table th { width: 34%; min-width: 7.5rem; text-align: left; vertical-align: top; padding: 12px 12px 12px 14px; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); background: rgba(0, 0, 0, 0.2); } html[data-theme="light"] .ks-blocked-date-table th { color: rgba(15, 23, 42, 0.55); background: rgba(15, 23, 42, 0.04); } .ks-blocked-date-table td { vertical-align: top; padding: 10px 14px 10px 10px; color: rgba(255, 255, 255, 0.9); } html[data-theme="light"] .ks-blocked-date-table td { color: rgba(15, 23, 42, 0.88); } .ks-blocked-date-modal__detail { margin: 0; font-size: 0.88rem; line-height: 1.5; } .ks-blocked-date-modal__tel { margin: 0; font-weight: 800; font-size: 1.05rem; } .ks-blocked-date-modal__tel a { color: #ff8a8a; text-decoration: none; } .ks-blocked-date-modal__tel a:hover { text-decoration: underline; } html[data-theme="light"] .ks-blocked-date-modal__tel a { color: #c41e1e; } .ks-blocked-date-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; background: rgba(255, 62, 62, 0.22); border: 1px solid rgba(255, 62, 62, 0.45); color: #ffc9c9; } html[data-theme="light"] .ks-blocked-date-badge { background: rgba(196, 30, 30, 0.1); border-color: rgba(196, 30, 30, 0.35); color: #7f1d1d; } /* Můj profil — rychlé panely */ .ks-account-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 1rem; } .ks-account-panel { display: block; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.2); text-decoration: none; color: inherit; transition: border-color 0.15s ease, transform 0.12s ease; } .ks-account-panel:hover { border-color: rgba(255, 62, 62, 0.4); transform: translateY(-1px); } .ks-account-panel__title { font-weight: 900; font-size: 0.95rem; margin: 0 0 4px; } .ks-account-panel__desc { margin: 0; font-size: 0.8rem; opacity: 0.75; line-height: 1.35; } /* ═══ Group Route Planner ═══ */ .gr-route-builder__input-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } .gr-route-builder__input-row .field__input { flex: 1 1 200px; min-width: 0; } .gr-route-builder__actions { display: flex; flex-wrap: wrap; gap: 8px; } .gr-route-builder__save-btns { display: flex; flex-wrap: wrap; gap: 8px; } .gr-waypoint-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .gr-waypoint-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); } .gr-waypoint-item--view { border-color: rgba(59, 130, 246, 0.2); background: rgba(59, 130, 246, 0.06); } .gr-waypoint-item__num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(59, 130, 246, 0.2); color: #93c5fd; font-weight: 700; font-size: 0.82rem; flex-shrink: 0; } .gr-waypoint-item__label { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; } .gr-waypoint-item__btns { display: flex; gap: 4px; flex-shrink: 0; } /* Numbered map markers */ .gr-wp-marker { background: none !important; border: none !important; } .gr-wp-marker__circle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 0.82rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); border: 2px solid #fff; } /* Route viewer */ .gr-route-viewer__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 8px; } .gr-route-viewer__name { font-size: 1rem; } .gr-route-viewer__info { margin: 8px 0; font-size: 0.9rem; opacity: 0.9; } .gr-route-viewer__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } /* Saved routes list */ .gr-saved-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .gr-saved-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); } .gr-saved-item--active { border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.06); } .gr-saved-item__info { flex: 1 1 0; min-width: 0; overflow: hidden; } .gr-saved-item__btns { display: flex; gap: 6px; flex-shrink: 0; } /* Route pick mode cursor */ .leaflet-container.groups-map__canvas--pick-route { outline: 3px solid rgba(59, 130, 246, 0.9); outline-offset: -3px; cursor: crosshair; } /* -------------------------------------------------------------------------- */ /* Široké monitory — využití šířky (web + desktop app po opravě viewportu) */ /* -------------------------------------------------------------------------- */ @media (min-width: 1200px) { .dash.dash--simple .dash-shell--full { max-width: min(1580px, 100%); } .dash-shell { max-width: min(1520px, 100%); } .dash-page:not(.dash-page--chat) { max-width: min(1280px, 100%); } body.ks-app-mode .section-layout { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: clamp(20px, 2vw, 32px); } .grid-home--expanded .ig-feed-shell { max-width: var(--ks-feed-max) !important; } } @media (min-width: 1600px) { .dash.dash--simple .dash-shell--full { max-width: min(1760px, 100%); } .dash-shell { max-width: min(1680px, 100%); } .grid-home--expanded .ig-feed-shell { max-width: var(--ks-feed-max) !important; } } html.ks-viewport-wide .dash.dash--simple .dash-shell--full { max-width: min(1680px, 100%); } html.ks-viewport-ultra .dash.dash--simple .dash-shell--full { max-width: min(1820px, 100%); } html.ks-viewport-ultra .grid-home--expanded .ig-feed-shell { max-width: var(--ks-feed-max) !important; } /* ═══ AI asistent vozidel ═══ */ .veh-ai-topics { display: grid; gap: 12px; margin-top: 10px; } .veh-ai-topics__title { font-weight: 800; font-size: 0.88rem; margin-bottom: 6px; color: rgba(255, 255, 255, 0.85); } .veh-ai-topics__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 10px; } .veh-ai-topic { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; line-height: 1.35; cursor: pointer; } .veh-ai-result__warn { font-size: 0.82rem; color: #fbbf24; margin-bottom: 10px; } .veh-ai-result__body { font-size: 0.92rem; line-height: 1.55; max-height: min(50vh, 480px); overflow: auto; } .veh-ai-result__body h2 { font-size: 1.05rem; margin: 1rem 0 0.5rem; color: var(--accent, #e11); } .veh-ai-result__body h3 { font-size: 0.95rem; margin: 0.75rem 0 0.35rem; } .veh-ai-result__body table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 0.86rem; } .veh-ai-result__body th, .veh-ai-result__body td { border: 1px solid rgba(255, 255, 255, 0.12); padding: 6px 8px; text-align: left; } .veh-ai-result__body .ks-veh-schema { margin: 12px 0; padding: 10px 12px; border: 1px solid rgba(255, 80, 80, 0.35); border-radius: 8px; background: rgba(0, 0, 0, 0.35); } .veh-ai-result__body .ks-veh-schema__title { font-weight: 800; margin-bottom: 8px; color: rgba(255, 200, 120, 0.95); } .veh-ai-result__body .ks-veh-schema__diagram { font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; line-height: 1.35; white-space: pre-wrap; overflow-x: auto; margin: 0; color: rgba(220, 230, 255, 0.95); } .veh-ai-result__body .ks-veh-warn { color: #fbbf24; font-size: 0.88rem; } .veh-ai-result__body .ks-veh-torque th { background: rgba(255, 0, 0, 0.12); } .veh-ai-topics__toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .veh-ai-topics__search { flex: 1 1 180px; min-width: 140px; } .veh-ai-topics__section { margin-bottom: 10px; } .veh-ai-topics__section-title { font-size: 0.8rem; font-weight: 700; opacity: 0.75; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .veh-ai-topic__schema { opacity: 0.7; font-size: 0.75rem; } .veh-ai-layout { display: grid; grid-template-columns: minmax(200px, 240px) 1fr; gap: 14px; margin-top: 10px; } @media (max-width: 720px) { .veh-ai-layout { grid-template-columns: 1fr; } } .veh-ai-layout__saved { padding: 10px; max-height: min(70vh, 560px); overflow: auto; } .veh-ai-layout__saved-title { font-weight: 800; font-size: 0.88rem; margin-bottom: 8px; } .veh-ai-saved-list { display: flex; flex-direction: column; gap: 6px; } .veh-ai-saved-item { display: flex; gap: 4px; align-items: stretch; } .veh-ai-saved-item__open { flex: 1; text-align: left; padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; } .veh-ai-saved-item__open:hover { border-color: rgba(255, 80, 80, 0.45); } .veh-ai-saved-item__open .muted { font-size: 0.75rem; } .veh-ai-saved-item__del { min-width: 36px; padding: 0 8px; } .ui-modal--wide { width: min(1100px, 98vw) !important; } /* AI asistent — krok 1: celá obrazovka; vrstvy na body (JS). Skryté vrstvy nesmí blokovat kliky. */ #veh-ai-backdrop { display: none; pointer-events: none; } #veh-ai-backdrop.is-in { display: block; pointer-events: auto; z-index: 20005; } .ui-modal.ui-modal--veh-ai-pick { display: none !important; pointer-events: none !important; } .ui-modal.ui-modal--veh-ai-pick.is-in { position: fixed !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; inset: 0 !important; width: 100vw !important; max-width: none !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; z-index: 20006; transform: none !important; display: flex !important; pointer-events: auto !important; flex-direction: column; opacity: 1 !important; } .ui-modal.ui-modal--veh-ai-pick.is-out { display: none !important; pointer-events: none !important; opacity: 0 !important; } .ui-modal--veh-ai-pick .ui-modal__header, .ui-modal--veh-ai-pick.is-in .ui-modal__header { flex-shrink: 0; } .ui-modal--veh-ai-pick .ui-modal__body.veh-ai-modal__body, .ui-modal--veh-ai-pick.is-in .ui-modal__body.veh-ai-modal__body { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; display: flex; flex-direction: column; } .ui-modal--veh-ai-pick .veh-ai-layout--pick { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); margin-top: 10px; flex: 1 1 auto; min-height: 0; align-items: stretch; } .ui-modal--veh-ai-pick .veh-ai-topics--pick { flex: 1 1 auto; min-height: min(42vh, 420px); max-height: none; overflow: auto; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 14px; background: rgba(0, 0, 0, 0.22); } .ui-modal--veh-ai-pick .veh-ai-topics__grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 14px; } @media (min-width: 900px) { .ui-modal--veh-ai-pick .veh-ai-topics__grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } .ui-modal--veh-ai-pick .veh-ai-layout__saved { max-height: none; min-height: min(36vh, 360px); overflow: auto; } .ui-modal--veh-ai-pick .veh-ai-topic { padding: 12px 14px; font-size: 0.95rem; } /* Krok 2: celá obrazovka — jen chat / odpověď AI */ body.veh-ai-open { overflow: hidden; } .veh-ai-result-layer { display: none; pointer-events: none; position: fixed; inset: 0; z-index: 20007; flex-direction: column; background: rgba(8, 8, 10, 0.97); backdrop-filter: blur(12px); } .veh-ai-result-layer.veh-ai-result-layer--open { display: flex; pointer-events: auto; } .veh-ai-result-layer__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .veh-ai-result-layer__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .veh-ai-result-layer__title { font-weight: 900; font-size: 1.05rem; } .veh-ai-result-layer__sub { font-size: 0.82rem; color: rgba(255, 255, 255, 0.65); max-width: min(640px, 70vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .veh-ai-result-layer__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .veh-ai-result--fullscreen { flex: 1; min-height: 0; margin: 12px 16px 16px; padding: 14px 16px !important; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; } .veh-ai-result--fullscreen .veh-ai-result__body, .veh-ai-result--fullscreen > .veh-ai-result__warn + .veh-ai-result__body { flex: 1; max-height: none !important; overflow: auto; } .veh-ai-result--fullscreen > .veh-ai-result__warn { flex-shrink: 0; } /* ═══ Mobilní zvonček oznámení ═══ */ .notif-bell--mobile { display: none; position: relative; align-items: center; justify-content: center; width: 42px; height: 42px; margin-right: 6px; border-radius: 12px; border: 1px solid rgba(255, 204, 0, 0.35); background: rgba(255, 204, 0, 0.1); color: #ffcc00; cursor: pointer; filter: drop-shadow(0 0 5px rgba(255, 204, 0, 0.28)); } @media (max-width: 950px) { .notif-bell--mobile { display: inline-flex; } } .mobile-nav__notif { display: block; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 8px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: #e8eefc; font-weight: 700; cursor: pointer; } /* ═══ Sledující / sleduji — kompaktní seznam ═══ */ .ui-modal--follow-list { width: min(380px, 94vw) !important; } .ks-follow-list { max-height: min(52vh, 360px); overflow: auto; gap: 4px !important; } .ks-follow-list__row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; text-decoration: none; color: inherit; border: 1px solid transparent; } .ks-follow-list__row:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); } .ks-follow-list__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ks-follow-list__row span { font-size: 0.88rem; font-weight: 700; } /* ═══ Mapa skupiny — popisky pod mapou, fullscreen ═══ */ .gl-map-user-label { background: none !important; border: none !important; } .gl-map-user-label__wrap { display: flex; flex-direction: column; align-items: center; transform: translate(-50%, calc(-100% - 6px)); pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); } .gl-map-user-label__pill { display: inline-block; padding: 4px 10px; border-radius: 8px; color: #fff; font-size: 0.74rem; font-weight: 800; line-height: 1.25; max-width: min(240px, 44vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); transform: none; margin: 0; } .gl-map-user-label__pin { width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid rgba(0, 0, 0, 0.35); margin-top: 3px; flex-shrink: 0; } .groups-map-card .leaflet-control-zoom { margin-top: 10px !important; margin-left: 10px !important; } .groups-map-card .leaflet-top.leaflet-left { z-index: 590; } .groups-map-card .leaflet-top.leaflet-right { top: 10px; z-index: 595; } .groups-map-card .leaflet-bottom.leaflet-right { margin-bottom: 6px; margin-right: 6px; } /* GPS mapa — rovnaké ovládacie prvky ako Skupiny */ .gps-map-card.group-location-map .leaflet-control-zoom { margin-top: 10px !important; } .gps-map-card.group-location-map .leaflet-top.leaflet-right { top: 10px; } .gps-map-card.group-location-map .ks-map-layers__panel { top: auto; bottom: 46px; left: 0; right: auto; } .groups-map-card .ks-map-layers { margin: 0 0 8px 8px !important; } .groups-map__fs-wrap:fullscreen { background: #1a1a1f !important; } .groups-map__fs-wrap:fullscreen .groups-map__fs { background: rgba(40, 40, 48, 0.95); color: #f1f5f9; border: 1px solid rgba(255, 255, 255, 0.15); } .groups-map__fs-wrap:fullscreen .groups-map__canvas { height: calc(100dvh - 28px) !important; border: 1px solid rgba(255, 255, 255, 0.12); } /* ═══ Feed & zprávy — větší na mobilu a PC ═══ */ @media (max-width: 720px) { .dash-page--chat .messenger, .dash-page--prispevky .prispevky-feed, .dash-page--prispevky .ig-feed-shell, #home-dynamic-content > .ig-feed-shell { width: 100% !important; max-width: 100% !important; border-radius: 0; } .ig-feed-posts .post-card__header { padding: 12px 14px; font-size: 1rem; } .ig-feed-posts .post-card__body { font-size: 1rem; line-height: 1.5; padding: 0 14px 14px; } .ig-feed-posts .post-card__toolbar { padding: 10px 14px 12px; font-size: 0.95rem; } .ig-feed-posts .post-card__image { max-height: min(78vh, 720px); } .messenger.ig-dm .ig-dm-row { padding: 14px 16px; font-size: 1rem; } .messenger.ig-dm .messenger__messages, .messenger.ig-dm .ig-dm__thread { font-size: 1rem; line-height: 1.45; } .dash-page--chat .messenger__sidebar { max-height: 42vh; } .dash-page--chat .messenger__main { min-height: 48vh; } } @media (min-width: 721px) { .grid-home--expanded .ig-feed-shell { max-width: var(--ks-feed-max) !important; } .dash-page--prispevky .prispevky-feed { max-width: var(--ks-feed-max); } } .ig-feed-posts .post-card__body { font-size: 1rem; line-height: 1.5; } .ig-feed-posts .post-card__header { padding: 12px 16px; } .messenger.ig-dm .ig-dm-row { padding: 14px 16px; font-size: 0.98rem; } .messenger.ig-dm .messenger__messages { font-size: 0.98rem; line-height: 1.45; } } /* ═══ iOS / Safari — tmavý vzhled ═══ */ html { background-color: #07070a; } body { background-color: var(--bg, #07070a); } @supports (-webkit-touch-callout: none) { html, body { background-color: #07070a !important; color-scheme: dark; } input, select, textarea, .field__input { background-color: rgba(18, 18, 22, 0.98) !important; color: #e8eefc !important; -webkit-text-fill-color: #e8eefc; } input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, 0.45); opacity: 1; } } /* ═══ KS UI v2 — layout, média, profil, chat, skupiny ═══ */ :root { --ks-feed-max: min(520px, 100%); --ks-column-max: min(520px, 100%); } @media (min-width: 721px) { :root { --ks-feed-max: min(540px, 100%); --ks-column-max: min(560px, 100%); } } @media (min-width: 1100px) { :root { --ks-feed-max: min(580px, 100%); --ks-column-max: min(600px, 100%); } } @media (min-width: 1400px) { :root { --ks-feed-max: min(620px, 100%); --ks-column-max: min(640px, 100%); } } @media (min-width: 1800px) { :root { --ks-feed-max: min(660px, 100%); --ks-column-max: min(680px, 100%); } } .section-body > .ig-profile-root { width: 100%; } .ks-post-media:not(.ks-post-media--reel) img.post-card__image, .ks-post-media:not(.ks-post-media--reel) img.profile-post-card__img, .ks-post-media:not(.ks-post-media--reel) img.group-post-card__img, .ig-msg__media img.ig-msg__img { cursor: zoom-in; } .ks-post-media, .post-card__media, .profile-post-card__media, .group-post-card__media { width: 100%; margin-top: 12px; border-radius: 14px; overflow: hidden; background: #070707; border: 1px solid rgba(255, 255, 255, 0.08); display: block; line-height: 0; position: relative; } .ks-post-media:not(.ks-post-media--reel), .post-card__media.ks-post-media:not(.ks-post-media--reel), .profile-post-card__media:not(.ks-post-media--reel), .group-post-card__media:not(.ks-post-media--reel) { aspect-ratio: unset; height: auto; max-height: none; } .ks-post-media:not(.ks-post-media--reel):not(.ks-post-media--fitted) { min-height: 80px; background: rgba(0, 0, 0, 0.45); } .ks-post-media--reel, .post-card__media--reel-wrap, .post-card__media.ks-post-media--reel, .profile-post-card__media.ks-post-media--reel, .group-post-card__media.ks-post-media--reel { aspect-ratio: 9 / 16; max-height: min(74vh, 680px); } .ks-post-media:not(.ks-post-media--reel) > .post-card__image, .ks-post-media:not(.ks-post-media--reel) > .profile-post-card__img, .ks-post-media:not(.ks-post-media--reel) > .group-post-card__img, .post-card__media:not(.ks-post-media--reel):not(.post-card__media--reel-wrap) > .post-card__image, .profile-post-card__media:not(.ks-post-media--reel) > .profile-post-card__img, .profile-post-card__media:not(.ks-post-media--reel) > .post-card__image, .group-post-card__media:not(.ks-post-media--reel) > .group-post-card__img { position: static; display: block; width: 100%; height: auto; max-width: 100%; max-height: min(75vh, 900px); object-fit: contain; object-position: center; border-radius: 0; } .ks-post-media .post-card__video, .post-card__media .post-card__video, .profile-post-card__media .post-card__video, .group-post-card__media .post-card__video { width: 100%; height: 100%; max-height: 100%; object-fit: contain; background: #000; } .ks-profile-posts-feed, .profile-posts-list.ks-profile-posts-feed { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: none; margin: 0; align-items: stretch; } .ks-profile-posts-feed .profile-post-card, .profile-posts-list.ks-profile-posts-feed .profile-post-card { width: 100%; margin: 0; overflow: visible; } .ks-profile-posts-feed .profile-post-card__body { width: 100%; } .profile-post-card__body p { margin: 0 0 4px; line-height: 1.5; word-break: break-word; } @media (min-width: 721px) { .dash-page--prispevky .prispevky-feed, .dash-page--prispevky .feed-stage, .grid-home--expanded .ig-feed-shell { max-width: var(--ks-feed-max); width: 100%; margin-left: auto; margin-right: auto; } .dash-page--profil .ig-profile-root { max-width: var(--ks-column-max); margin-left: auto; margin-right: auto; } .dash-page--profil .profile-posts-stage, .dash-page--profil .ks-profile-posts-feed { max-width: none; width: 100%; } } @media (min-width: 721px) { .dash-page--chat .ig-msg { max-width: min(520px, 68%); } .dash-page--chat .ig-msg__img, .dash-page--chat .ig-msg__video { max-width: min(380px, 100%); max-height: min(420px, 52vh); width: auto; height: auto; object-fit: contain; } } .ig-msg__media { margin-top: 8px; max-width: min(320px, 88%); width: fit-content; border-radius: 14px; overflow: hidden; background: #070707; } .ig-msg__img, .ig-msg__video { display: block; width: auto; max-width: min(320px, 88vw); height: auto; max-height: min(360px, 48vh); object-fit: contain; object-position: center; } .groups-body { min-width: 0; } .group-posts-feed { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: none; } .group-post-card { padding: 14px 16px !important; overflow: hidden; } .prispevky-feed__list .post-card__media.ks-post-media:not(.ks-post-media--reel):not(.post-card__media--reel-wrap), .prispevky-feed__list .post-card__media:not(.post-card__media--reel-wrap) { aspect-ratio: unset; height: auto; max-height: none; } .prispevky-feed__list .post-card__media:not(.ks-post-media--reel):not(.post-card__media--reel-wrap) > .post-card__image, .prispevky-feed__list .post-card__image { position: static; width: 100%; height: auto; max-height: min(75vh, 900px); object-fit: contain; object-position: center; } .prispevky-feed__list .post-card__media--reel-wrap { aspect-ratio: 9 / 16; max-height: min(78vh, 720px); } .prispevky-feed__list .post-card__media--reel-wrap .post-card__video { object-fit: contain; } /* Finálny override — celá fotka v rámci, bez orezania okrajom */ .ks-post-media:not(.ks-post-media--reel), .post-card__media.ks-post-media:not(.ks-post-media--reel), .profile-post-card__media:not(.ks-post-media--reel), .group-post-card__media:not(.ks-post-media--reel) { aspect-ratio: unset !important; height: auto !important; max-height: none !important; overflow: hidden !important; } .ks-post-media:not(.ks-post-media--reel) > img, .post-card__media:not(.ks-post-media--reel):not(.post-card__media--reel-wrap) > img.post-card__image, .profile-post-card__media:not(.ks-post-media--reel) > img, .group-post-card__media:not(.ks-post-media--reel) > img { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; max-width: 100% !important; max-height: min(75vh, 900px) !important; object-fit: contain !important; object-position: center !important; } /* ═══ Skupiny — hub, záložky, příspěvky ═══ */ .groups-hub { margin-bottom: 16px; padding: 16px 18px !important; } .groups-hub__head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; margin-bottom: 14px; } .groups-hub__back { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 800; color: rgba(255, 255, 255, 0.72); text-decoration: none; margin-bottom: 2px; transition: color 0.15s ease; } .groups-hub__back:hover { color: #fff; } .groups-layout--in-group { grid-template-columns: minmax(0, 1fr); } .groups-layout--in-group .groups-body { max-width: min(1040px, 100%); } .groups-hub__avatar { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.12); } .groups-hub__avatar--ph { background: rgba(255, 255, 255, 0.06); } .groups-hub__title { margin: 0; font-size: 1.15rem; font-weight: 900; } .groups-hub__sub { margin: 4px 0 0; font-size: 0.84rem; } .groups-tabs-bar { display: flex; flex-direction: column; gap: 10px; } .groups-tabs-bar__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .groups-tabs-bar__row--manage { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .groups-tabs-bar__label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-right: 4px; } .groups-tabs-bar__link--manage { font-size: 0.8rem; opacity: 0.92; } .groups-tabs-bar__link { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; text-decoration: none; color: rgba(255, 255, 255, 0.88); font-weight: 700; font-size: 0.84rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); transition: background 0.15s ease, border-color 0.15s ease; } .groups-tabs-bar__link:hover { border-color: rgba(255, 62, 62, 0.3); background: rgba(255, 62, 62, 0.1); color: #fff; } .groups-tabs-bar__link.is-active { border-color: rgba(255, 62, 62, 0.45); background: rgba(255, 62, 62, 0.16); color: #fff; } .group-posts-stage { display: flex; flex-direction: column; gap: 16px; max-width: var(--ks-column-max, min(840px, 100%)); margin: 0 auto; width: 100%; } .group-posts-compose { padding: 0 !important; overflow: hidden; } .group-posts-compose__summary { cursor: pointer; padding: 14px 18px; font-weight: 800; list-style: none; } .group-posts-compose__summary::-webkit-details-marker { display: none; } .group-posts-compose__body { padding: 0 18px 18px; } .group-posts-compose__files { display: grid; gap: 12px; } @media (min-width: 721px) { .group-posts-compose__files { grid-template-columns: 1fr 1fr; } } .group-posts-mount { min-height: 80px; } .group-posts-empty { text-align: center; padding: 28px 12px; } .group-post-card { overflow: hidden; } .group-post-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 0; flex-wrap: wrap; } .group-post-card__author { font-weight: 800; } .group-post-card__time { font-size: 0.78rem; } .group-post-card__body { padding: 0 14px; } .group-post-card__text { margin: 10px 0 0; white-space: pre-wrap; line-height: 1.5; word-break: break-word; } .group-post-card .post-card__toolbar { margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); } .group-post-card__comments { padding: 12px 14px 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.18); } .group-post-card__comment { margin-bottom: 8px; font-size: 0.9rem; line-height: 1.45; } .group-post-card__composer, .post-comment__composer { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .group-post-card__composer .field__input, .post-comment__composer .field__input { flex: 1 1 180px; min-width: 0; } .group-post-card__mod-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; } .group-post-card__mod-note { padding: 0 14px; font-size: 0.82rem; } @media (max-width: 900px) { .section-rail { margin-bottom: 12px; } .groups-tabs-bar__link { font-size: 0.8rem; padding: 7px 12px; } } .section-rail__caption { margin: 14px 0 6px; padding: 0 4px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); } .section-rail__link--back { font-weight: 800; } .section-rail__link--group { font-size: 0.88rem; padding-left: 10px; } .groups-body { max-width: min(960px, 100%); margin: 0 auto; width: 100%; } .groups-my-cards { margin-top: 12px; } .groups-my-card { text-decoration: none; color: inherit; transition: border-color 0.15s ease, transform 0.15s ease; } .groups-my-card:hover { border-color: rgba(255, 62, 62, 0.35); transform: translateY(-1px); } .groups-card__meta { margin: 0 0 6px; font-size: 0.85rem; } .groups-overview { display: flex; flex-direction: column; gap: 16px; } .groups-overview__bio { padding: 16px 18px !important; } .groups-overview__bio-text { margin: 0; white-space: pre-wrap; line-height: 1.55; color: rgba(255, 255, 255, 0.88); } .groups-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .groups-quick-card { display: flex; flex-direction: column; gap: 4px; padding: 16px !important; text-decoration: none; color: inherit; transition: border-color 0.15s ease, background 0.15s ease; } .groups-quick-card:hover { border-color: rgba(255, 62, 62, 0.35); background: rgba(255, 62, 62, 0.08); } .groups-quick-card__icon { font-size: 1.35rem; line-height: 1; } .groups-quick-card__label { font-weight: 800; font-size: 0.95rem; } .groups-quick-card__hint { font-size: 0.78rem; } .groups-overview__admin { margin: 4px 0 0; } .group-chat-stage { max-width: none; margin: 0; width: 100%; } .group-chat-panel { display: flex; flex-direction: column; min-height: 0; padding: 0 !important; overflow: hidden; } .group-chat-thread { flex: 1 1 auto; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; min-height: 0; } .group-chat-empty { text-align: center; padding: 24px 12px; } .group-chat-composer { display: flex !important; visibility: visible !important; gap: 8px; align-items: flex-end; padding: 8px 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.2); flex-shrink: 0; } .group-chat-composer__field { flex: 1 1 auto; margin: 0; } .group-chat-composer__send { flex-shrink: 0; } .group-chat-thread .gcm-react { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .group-chat-thread .gcm-react-btn.is-active { border-color: rgba(255, 62, 62, 0.45); background: rgba(255, 62, 62, 0.14); } /* Oznámení skupiny */ .group-ann-stage { display: flex; flex-direction: column; gap: 16px; max-width: var(--ks-column-max, min(840px, 100%)); margin: 0 auto; width: 100%; } .group-ann-compose { padding: 0 !important; overflow: hidden; } .group-ann-compose__summary, .group-location-panel__summary { cursor: pointer; padding: 14px 18px; font-weight: 800; list-style: none; } .group-ann-compose__summary::-webkit-details-marker, .group-location-panel__summary::-webkit-details-marker { display: none; } .group-ann-compose__body, .group-location-panel__body { padding: 0 18px 18px; } .group-ann-hint { margin: 0; font-size: 0.84rem; line-height: 1.45; } .group-ann-feed { display: flex; flex-direction: column; gap: 12px; } .group-ann-empty { text-align: center; padding: 28px 12px; } .group-ann-card { overflow: hidden; } .group-ann-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 0; flex-wrap: wrap; } .group-ann-card__author { font-weight: 800; } .group-ann-card__time { font-size: 0.78rem; } .group-ann-card__body { padding: 10px 14px 0; white-space: pre-wrap; line-height: 1.55; word-break: break-word; } .group-ann-card__edit { margin: 10px 14px 0; width: calc(100% - 28px); } .group-ann-card__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 14px; } /* Poloha skupiny */ .group-location-stage { display: flex; flex-direction: column; gap: 12px; width: 100%; } .group-location-alert { margin: 0; } .group-location-map { padding: 16px 18px !important; } .groups-map-split { display: flex; flex-direction: row; align-items: stretch; min-height: min(52vh, 520px); border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(15, 23, 42, 0.45); } .groups-map-sidepanel { flex: 0 0 0; width: 0; max-width: 0; overflow: hidden; opacity: 0; transition: flex-basis 0.28s ease, max-width 0.28s ease, width 0.28s ease, opacity 0.2s ease; background: rgba(8, 10, 16, 0.98); border-right: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; min-height: 0; } .groups-map-split--open .groups-map-sidepanel { flex: 0 0 min(340px, 44vw); width: min(340px, 44vw); max-width: min(340px, 44vw); opacity: 1; } .groups-map-sidepanel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; } .groups-map-sidepanel__title { margin: 0; font-size: 0.98rem; font-weight: 800; } .groups-map-sidepanel__close { min-width: 34px; padding: 6px 10px; } .groups-map-sidepanel__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 14px 14px; -webkit-overflow-scrolling: touch; } .groups-map-sidepanel__pane[hidden] { display: none !important; } .groups-map-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .group-location-map .groups-map__head { margin-bottom: 0; padding: 10px 10px 8px; background: rgba(5, 5, 8, 0.94); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .group-location-map .groups-map__search-row .field__input { background: rgba(12, 14, 20, 0.95); border-color: rgba(255, 255, 255, 0.12); } .group-location-map .groups-map__map-area { position: relative; flex: 1 1 auto; min-height: 340px; margin: 8px 10px 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); background: #0b1220; } .group-location-map .groups-map__canvas { height: 100% !important; min-height: 340px; margin: 0 !important; border: none !important; border-radius: 0 !important; } .group-location-map .groups-map__float-bar { position: absolute; top: 10px; right: 10px; z-index: 500; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 20px); justify-content: flex-end; pointer-events: none; } .group-location-map .groups-map__float-btn { pointer-events: auto; background: rgba(7, 7, 10, 0.92); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.82rem; padding: 8px 12px; white-space: nowrap; } .group-location-map .groups-map__caption-static { margin: 8px 10px 10px; font-size: 0.84rem; line-height: 1.45; } .group-location-map .groups-map__search-results:not([hidden]) { margin: 0 10px 6px; } .group-location-map .leaflet-control-zoom { margin-top: 10px !important; margin-left: 10px !important; } .group-location-map .leaflet-top.leaflet-right { top: 10px; } .group-location-map .leaflet-bottom.leaflet-left { bottom: 82px; margin-bottom: 0; margin-left: 10px; } .group-location-map .leaflet-bottom.leaflet-right { margin-bottom: 10px; margin-right: 10px; } .group-location-map .ks-map-layers__panel { top: auto; bottom: 46px; left: 0; right: auto; } .groups-map-split:fullscreen, .groups-map-split:-webkit-full-screen { background: #07070a; border-radius: 0; border: none; min-height: 100%; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); box-sizing: border-box; } .groups-map-split:fullscreen .groups-map-main, .groups-map-split:-webkit-full-screen .groups-map-main { flex: 1 1 auto; min-height: 0; height: 100%; display: flex; flex-direction: column; } .groups-map-split:fullscreen .groups-map__map-area, .groups-map-split:-webkit-full-screen .groups-map__map-area { flex: 1 1 auto; min-height: 0 !important; height: auto !important; margin: 0 !important; border-radius: 0 !important; border: none !important; } .groups-map-split:fullscreen .groups-map__canvas, .groups-map-split:-webkit-full-screen .groups-map__canvas { min-height: 100% !important; height: 100% !important; } .groups-map-split:fullscreen .groups-map-sidepanel, .groups-map-split:-webkit-full-screen .groups-map-sidepanel { /* closed: keep out of layout; open state handled below */ max-height: none; } @media (max-width: 720px) { .groups-map-split { flex-direction: column; min-height: 0; } .groups-map-split--open .groups-map-sidepanel { flex: 0 0 auto; width: 100%; max-width: 100%; max-height: min(48vh, 420px); border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .group-location-map .groups-map__map-area { min-height: 300px; } .group-location-map .groups-map__canvas { min-height: 300px; } .group-location-map .groups-map__float-bar { top: auto; bottom: 10px; left: 10px; right: 10px; justify-content: center; } } .group-location-hint { margin: 0 0 6px; font-size: 0.88rem; line-height: 1.45; } .group-location-credits { margin: 0 0 14px; font-size: 0.72rem; line-height: 1.45; } .group-location-credits a { color: inherit; } .group-location-search-label { display: block; margin-bottom: 8px; } .group-location-search-hint { margin: 8px 0 0; font-size: 0.78rem; line-height: 1.4; } .groups-map__search.card.glass { padding: 12px 14px; margin-bottom: 12px; } .group-location-panel { padding: 0 !important; overflow: hidden; } .group-location-note { padding: 14px !important; margin-bottom: 12px; } .group-location-note p { margin: 0; white-space: pre-wrap; line-height: 1.5; } .group-location-note-form { margin-top: 4px; } .group-location-routes { display: flex; flex-direction: column; gap: 12px; } .groups-map__meet { padding: 14px; margin-top: 4px; } .groups-map__meet-hint { margin: 6px 0 10px; font-size: 0.88rem; } #gl-meet-clear { margin-top: 8px; } .gr-route-builder { padding: 14px; } .gr-route-builder__hint { margin: 6px 0 10px; font-size: 0.88rem; } .gr-route-builder__click { margin-top: 8px; } .gr-route-builder__actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; } .gr-route-builder__save { margin-top: 12px; } .gr-route-builder__save-btns { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; } .gr-saved-routes__title { display: block; font-size: 0.9rem; margin-top: 14px; } .gr-route-viewer.card.glass { padding: 14px; } .group-manage-stage { display: flex; flex-direction: column; gap: 14px; max-width: var(--ks-column-max, min(760px, 100%)); margin: 0 auto; width: 100%; } .group-manage-panel__summary::before, .group-location-panel__summary::before { content: '▸'; display: inline-block; margin-right: 8px; opacity: 0.65; transition: transform 0.15s ease; } .group-manage-panel[open] > .group-manage-panel__summary::before, .group-location-panel[open] > .group-location-panel__summary::before { transform: rotate(90deg); } .group-manage-panel__summary, .group-location-panel__summary { cursor: pointer; font-weight: 800; padding: 14px 18px; list-style: none; user-select: none; } .group-manage-panel__summary::-webkit-details-marker, .group-location-panel__summary::-webkit-details-marker { display: none; } .group-manage-panel__body, .group-location-panel__body { padding: 0 18px 18px; } .group-manage-panel[open] > .group-manage-panel__summary, .group-location-panel[open] > .group-location-panel__summary { border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 12px; } .ks-accordion { margin-bottom: 12px; } .group-manage-panel { padding: 0 !important; overflow: hidden; } .group-manage-hint { margin: 0 0 10px; font-size: 0.86rem; line-height: 1.45; } .group-member-list, .group-invite-list { display: flex; flex-direction: column; gap: 10px; } .group-member-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px !important; } .group-member-card__name { font-weight: 800; } .group-member-card__meta { margin: 4px 0 0; font-size: 0.82rem; } .group-member-card__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .group-settings-card { padding: 16px 18px !important; } .ig-profile-root #follow-btn, .profile-hero__actions #follow-btn { transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .ig-profile-root #follow-btn:hover, .profile-hero__actions #follow-btn:hover { transform: translateY(-1px); filter: brightness(1.12); } .ig-profile-root #follow-btn.btn-accent:hover, .profile-hero__actions #follow-btn.btn-accent:hover { background: linear-gradient(145deg, var(--accent), var(--accent-2)); box-shadow: 0 12px 28px rgba(255, 62, 62, 0.32); } .ig-profile-root #follow-btn.follow-btn--following:hover, .profile-hero__actions #follow-btn.btn-ghost:hover { border-color: rgba(255, 62, 62, 0.45); background: rgba(255, 62, 62, 0.12); } .booking-form.landing-form { padding: 16px 18px !important; max-width: 100%; } /* Kompaktní rezervační formuláře — širší, ale stále bez scrollu na obrazovce */ .landing-form--compact, .booking-form.home-servis-booking-form { padding: 14px 18px !important; max-width: min(780px, 100%); margin: 0 auto; } .landing-form--compact label, .booking-form.home-servis-booking-form label { margin-bottom: 7px !important; font-size: 0.78rem !important; line-height: 1.3; } .landing-form--compact input, .landing-form--compact select, .landing-form--compact textarea, .booking-form.home-servis-booking-form input, .booking-form.home-servis-booking-form select, .booking-form.home-servis-booking-form textarea { padding: 8px 11px !important; margin-top: 3px !important; font-size: 0.9rem !important; border-radius: 9px !important; } .landing-form--compact textarea, .booking-form.home-servis-booking-form textarea { min-height: 56px; max-height: 88px; resize: vertical; } .landing-form--compact .form-grid-2, .booking-form.home-servis-booking-form .form-grid-2 { gap: 12px; } .landing-form--compact .form-grid-2 + .form-grid-2, .landing-form--compact .form-grid-email-spz, .landing-form--compact > label, .landing-form--compact > .form-span-2, .booking-form.home-servis-booking-form .form-grid-2 + .form-grid-2, .booking-form.home-servis-booking-form .form-grid-email-spz, .booking-form.home-servis-booking-form > label { margin-top: 8px; } .landing-form--compact .form-grid-email-spz, .booking-form.home-servis-booking-form .form-grid-email-spz { gap: 12px; } .landing-form--compact .field-help, .booking-form.home-servis-booking-form .field-help { margin-top: 3px; font-size: 0.7rem; line-height: 1.25; } .landing-form--compact .btn-large, .booking-form.home-servis-booking-form .btn-large { padding: 10px 16px !important; font-size: 0.92rem !important; margin-top: 10px !important; } .landing-form--compact.landing-form--two-col > .form-grid-2 + .form-grid-2 { margin-top: 8px; } .landing-form--compact.landing-form--two-col .form-span-2 { margin-top: 8px; } .landing-booking { max-width: min(960px, 100%); } /* Pneuservis — kompaktný formulár v bočnom layoute */ .landing-form--tyres { max-width: 100% !important; padding: 12px 14px !important; width: 100%; } .landing-form--tyres label { margin-bottom: 5px !important; font-size: 0.74rem !important; } .landing-form--tyres input, .landing-form--tyres select, .landing-form--tyres textarea { padding: 7px 9px !important; font-size: 0.86rem !important; } .landing-form--tyres textarea { min-height: 52px; max-height: 76px; } .landing-form--tyres .form-grid-2 + .form-grid-2, .landing-form--tyres > label, .landing-form--tyres > .form-span-2 { margin-top: 7px; } .landing-form--tyres .btn-large { padding: 9px 14px !important; font-size: 0.9rem !important; margin-top: 9px !important; } .landing-booking__head { margin-bottom: 16px; } .landing-booking__grid { gap: 16px; align-items: start; } @media (min-width: 721px) { .landing-booking__grid { grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.75fr); } .landing-form--compact.landing-form--two-col .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } } .ui-modal--home-servis-booking.ui-modal--flow .ui-modal__body { max-height: min(88vh, 720px); } .ui-modal--home-servis-booking .home-servis-booking-wrap { max-width: min(780px, 100%); margin: 0 auto; } .booking-form.landing-form label { margin-bottom: 10px; font-size: 0.78rem; } .booking-form.landing-form input, .booking-form.landing-form select, .booking-form.landing-form textarea { padding: 8px 10px; margin-top: 4px; font-size: 0.9rem; border-radius: 10px; } .booking-form.landing-form .btn-large { padding: 10px 16px; font-size: 0.92rem; width: 100%; margin-top: 6px; } #tyres .landing-stack { padding: 0; } .landing-info--tyres { padding: 16px 18px; } .landing-info--tyres > h2, .landing-tyres-line { max-width: none; } .ks-post-media:not(.ks-post-media--reel), .group-post-card__media:not(.ks-post-media--reel), .projekt-photo-preview { max-width: 100%; } .projekt-photo-preview { max-width: min(420px, 100%); margin-left: auto; margin-right: auto; } .projekt-photo-preview img { width: 100%; height: auto; object-fit: contain; max-height: min(52vh, 420px); } .gps-stage { display: flex; flex-direction: column; gap: 16px; width: 100%; } .gps-map-card.group-location-map { padding: 16px 18px !important; } .gps-map-area.groups-map__map-area { min-height: min(58vh, 640px); } .gps-map-card .gps-map-canvas.groups-map__canvas { min-height: min(58vh, 640px); } /* GPS mapa: menší „useknutí“ spodní lištou (brand mask) */ .gps-map-area.ks-map-brand-mask::after, .gps-map-area.groups-map__map-area::after { height: 14px; } .gps-pop__kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 4px 0 2px; } .gps-pop__kv em { display: block; font-style: normal; font-size: 0.68rem; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.03em; } .gps-pop__kv b { font-size: 0.8rem; font-weight: 700; } .gps-pop__kv .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.72rem; word-break: break-all; } .gps-leaflet-pop .leaflet-popup-content { margin: 12px 14px; min-width: 220px; } /* GPS auto-marker — názov z webu + rámček (zelená online / červená offline) */ .leaflet-div-icon.gps-car-icon, .gps-car-icon.leaflet-div-icon, .gps-car-icon { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } .gps-car-icon, .gps-car-marker { pointer-events: auto !important; cursor: pointer; } .gps-car-marker { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 110px; height: 72px; color: #ef4444; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45)); user-select: none; -webkit-tap-highlight-color: transparent; } .gps-car-marker.is-online { color: #22c55e; } .gps-car-marker.is-offline { color: #ef4444; } .gps-car-marker__name { display: block; max-width: 104px; margin: 0 0 4px; padding: 3px 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(10, 12, 18, 0.92); color: #fff; font-size: 0.7rem; font-weight: 800; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } .gps-car-marker.is-online .gps-car-marker__name { border-color: rgba(34, 197, 94, 0.75); } .gps-car-marker.is-offline .gps-car-marker__name { border-color: rgba(239, 68, 68, 0.75); } .gps-car-marker.is-selected .gps-car-marker__frame { box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; } .gps-car-marker__frame { display: flex; align-items: center; justify-content: center; width: 52px; height: 34px; border-radius: 10px; border: 2px solid currentColor; background: rgba(8, 10, 14, 0.88); box-sizing: border-box; } .gps-car-marker__svg { display: block; flex-shrink: 0; } .gps-car-marker__body { fill: currentColor; } .gps-car-marker__wheel { fill: #0b0b10; stroke: currentColor; stroke-width: 1.2; } .gps-car-marker__tip { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid currentColor; margin-top: 1px; } .gps-car-marker__label { display: none; } .gps-map-card .leaflet-control-attribution { display: none !important; } .gps-map-caption { margin: 8px 10px 0; font-size: 0.82rem; } .gps-map-stage.groups-map-split { display: flex; flex-direction: column; min-width: 0; width: 100%; } .gps-map-stage .groups-map-main { min-width: 0; width: 100%; } .gps-map-stage:fullscreen, .gps-map-stage:-webkit-full-screen, .gps-map-area:fullscreen, .gps-map-area:-webkit-full-screen { width: 100% !important; height: 100% !important; min-height: 100% !important; margin: 0 !important; border-radius: 0 !important; overflow: hidden !important; background: #07070a !important; z-index: 2147483647; display: flex !important; flex-direction: column !important; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important; box-sizing: border-box !important; } .gps-map-stage:fullscreen .groups-map-main, .gps-map-stage:-webkit-full-screen .groups-map-main { flex: 1 1 auto; min-height: 0; height: 100%; display: flex; flex-direction: column; } .gps-map-stage:fullscreen .groups-map__map-area, .gps-map-stage:-webkit-full-screen .groups-map__map-area, .gps-map-area:fullscreen, .gps-map-area:-webkit-full-screen { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; margin: 0 !important; border-radius: 0 !important; border: none !important; } .gps-map-stage:fullscreen .groups-map__canvas, .gps-map-stage:-webkit-full-screen .groups-map__canvas, .gps-map-area:fullscreen .groups-map__canvas, .gps-map-area:-webkit-full-screen .groups-map__canvas { min-height: 100% !important; height: 100% !important; } .gps-map-stage:fullscreen .gps-map-caption, .gps-map-stage:-webkit-full-screen .gps-map-caption { display: none; } .gps-map-stage:fullscreen .groups-map__float-bar, .gps-map-stage:-webkit-full-screen .groups-map__float-bar, .gps-map-area:fullscreen > .groups-map__float-bar, .gps-map-area:-webkit-full-screen > .groups-map__float-bar { z-index: 10060 !important; pointer-events: none; } .gps-map-stage:fullscreen .groups-map__float-btn, .gps-map-stage:-webkit-full-screen .groups-map__float-btn, .gps-map-area:fullscreen .groups-map__float-btn, .gps-map-area:-webkit-full-screen .groups-map__float-btn { pointer-events: auto !important; } .gps-map-sheet { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 650; max-height: min(42vh, 320px); overflow: auto; padding: 12px 14px; background: rgba(12, 14, 22, 0.94); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); } .gps-map-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .gps-map-sheet__sub { font-size: 0.82rem; margin-top: 2px; } .gps-map-sheet__kv { margin: 0 0 10px; } .gps-map-sheet__actions { display: flex; flex-wrap: wrap; gap: 8px; } .gps-layout { display: flex; flex-direction: column; gap: 14px; } .gps-fleet { padding: 14px 16px !important; width: 100%; } .gps-fleet__title { margin: 0 0 10px; font-size: 1.05rem; } .gps-fleet__list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .gps-fleet-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 180px; min-width: 160px; max-width: 100%; text-align: left; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.22); color: inherit; cursor: pointer; } .gps-fleet-item.is-active { border-color: rgba(255, 62, 62, 0.55); background: rgba(255, 62, 62, 0.12); } .gps-fleet-item__name { font-weight: 800; } .gps-fleet-item__meta { font-size: 0.78rem; opacity: 0.72; } .gps-detail { padding: 14px 16px !important; } .gps-detail__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .gps-detail__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; } .gps-tab { border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.25); color: inherit; border-radius: 999px; padding: 6px 12px; font-size: 0.8rem; font-weight: 700; cursor: pointer; } .gps-tab.is-active { border-color: rgba(255, 62, 62, 0.55); background: rgba(255, 62, 62, 0.16); } .gps-alarm { margin: 0 0 12px; padding: 12px; border-radius: 12px; border: 1px solid rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.1); } .gps-alarm .gps-detail__hint { margin: 8px 0 0; font-size: 0.78rem; } .gps-remote { margin: 0 0 12px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 62, 62, 0.28); background: rgba(255, 62, 62, 0.08); } .gps-remote__label { margin: 0 0 4px; font-weight: 800; font-size: 0.88rem; } .gps-remote__state { margin: 0 0 8px; font-size: 0.8rem; } .gps-pop { display: flex; flex-direction: column; gap: 6px; min-width: 180px; } .gps-pop span { font-size: 0.78rem; opacity: 0.75; } .gps-pop__btns { display: flex; flex-wrap: wrap; gap: 6px; } .gps-leaflet-pop .leaflet-popup-content-wrapper { background: #111118; color: #f1f5f9; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; } .gps-leaflet-pop .leaflet-popup-tip { background: #111118; } .gps-detail__title { margin: 0; } .gps-detail__sub { margin: 4px 0 0; } .gps-detail__block { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .gps-detail__h { margin: 0 0 8px; font-size: 0.92rem; } .gps-detail__hint { margin: 0 0 10px; font-size: 0.8rem; } .gps-detail__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .gps-kv { margin: 0; } .gps-kv__row { display: grid; grid-template-columns: 140px 1fr; gap: 8px; padding: 5px 0; font-size: 0.88rem; } .gps-kv__row dt { opacity: 0.7; } .gps-kv__row dd { margin: 0; } .gps-stats { margin-top: 12px; } .gps-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .gps-stats__grid > div { padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.08); } .gps-stats__grid strong { display: block; font-size: 1.05rem; } .gps-stats__grid span { font-size: 0.74rem; opacity: 0.7; } .gps-stats__range { margin: 10px 0 8px; font-size: 0.8rem; } .gps-cross-list { margin: 0; padding-left: 1.15rem; font-size: 0.85rem; line-height: 1.5; } .gps-map-label.is-selected .gl-map-user-label__pill { outline: 2px solid #fff; outline-offset: 2px; } .gps-form-actions { display: flex; flex-wrap: wrap; gap: 8px; } .gps-device-form .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 900px) { .gps-stats__grid { grid-template-columns: 1fr 1fr; } .gps-kv__row { grid-template-columns: 1fr; } } @media (max-width: 720px) { .gps-device-form .form-grid-2 { grid-template-columns: 1fr; } } .ks-map-layers { position: relative; z-index: 700; margin: 0 10px 8px 10px !important; } .leaflet-bottom.leaflet-left { bottom: 82px; z-index: 700; } .ks-map-layers__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 40px; height: 36px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; background: rgba(22, 24, 32, 0.94); color: #f4f6fb; cursor: pointer; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28); } .ks-map-layers__btn svg { display: block; flex-shrink: 0; } .ks-map-layers.is-open .ks-map-layers__btn, .ks-map-layers__btn:hover { border-color: rgba(255, 255, 255, 0.32); background: rgba(32, 34, 44, 0.98); } .ks-map-layers__panel { position: absolute; left: 0; right: auto; bottom: 46px; top: auto; width: 248px; max-height: min(70vh, 460px); overflow: auto; padding: 14px 14px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(28, 30, 38, 0.97); color: #f4f6fb; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); } .ks-map-layers__panel[hidden] { display: none !important; } .ks-map-layers__title { margin: 0 0 8px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .ks-map-layers__sep { height: 1px; margin: 12px 0 10px; background: rgba(255, 255, 255, 0.1); } .ks-map-layers__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ks-map-layers__opt { display: flex; flex-direction: column; gap: 6px; padding: 0 0 2px; border: 0; background: transparent; color: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; text-align: center; } .ks-map-layers__thumb { display: block; height: 48px; border-radius: 9px; border: 2px solid rgba(255, 255, 255, 0.14); background-size: cover; } .ks-map-layers__opt.is-active .ks-map-layers__thumb { border-color: #ff1a1a; box-shadow: 0 0 0 1px rgba(255, 26, 26, 0.45); } .ks-map-layers__thumb--map { background: linear-gradient(135deg, #b7e4c7 0%, #90caf9 42%, #f8fafc 43%, #cbd5e1 100%); } .ks-map-layers__thumb--satellite { background: linear-gradient(135deg, #1b4332, #40916c 38%, #d8a47f 100%); } .ks-map-layers__thumb--terrain { background: linear-gradient(180deg, #7dd3fc 0%, #4ade80 48%, #a16207 100%); } .ks-map-layers__thumb--dark { background: linear-gradient(135deg, #0b1220, #334155); } .ks-map-layers__check-row { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 0.8rem; line-height: 1.35; cursor: pointer; color: rgba(255, 255, 255, 0.88); } .ks-map-layers__check-row input { margin-top: 2px; accent-color: #ff1a1a; } .ks-map-layers__check-row.is-disabled { opacity: 0.42; cursor: default; } .ks-map-layers__extras { display: flex; flex-direction: column; gap: 2px; } .ks-map-layers__extras .ks-map-layers__check-row { margin: 4px 0 0; } /* ═══ Zprávy — pevný dvojpanel (seznam vlevo, konverzace vpravo) ═══ */ .dash-page--chat { display: flex; flex-direction: column; min-height: calc(100dvh - 108px); height: calc(100dvh - 108px); max-height: calc(100dvh - 88px); } .dash-page--chat .dash-page__messenger, .dash-page--chat .messenger.ig-dm { flex: 1 1 auto; width: 100%; max-width: none; min-height: 0; max-height: none; height: 100%; display: flex; flex-direction: row; overflow: hidden; border-radius: 16px; } .dash-page--chat .messenger__sidebar, .dash-page--chat .ig-dm__sidebar { width: clamp(300px, 34vw, 420px); min-width: 280px; max-width: 420px; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 0 !important; max-height: none !important; } .dash-page--chat .ig-dm__head { flex-shrink: 0; font-size: 0.95rem !important; letter-spacing: 0.04em !important; text-transform: none !important; color: rgba(255, 255, 255, 0.92) !important; padding: 14px 16px !important; } .dash-page--chat .ig-dm__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .dash-page--chat .messenger__main, .dash-page--chat .ig-dm__main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex !important; flex-direction: column; overflow: hidden; } .dash-page--chat .messenger__titlebar, .dash-page--chat .ig-dm__titlebar { flex-shrink: 0; } .dash-page--chat .messenger__messages, .dash-page--chat .ig-dm__thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 18px; } .dash-page--chat .messenger__composer, .dash-page--chat .ig-dm__composer { display: none; flex-shrink: 0; } .dash-page--chat .messenger__composer.is-visible, .dash-page--chat .ig-dm__composer.is-visible { display: flex; visibility: visible; } .dash-page--chat .ig-dm__input { min-height: 48px; max-height: 140px; line-height: 1.45; } .dash-page--chat .ig-dm__back { display: none; } .dash-page--chat .messenger.ig-dm.ig-dm--open .ig-dm__back { display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 5; pointer-events: auto; cursor: pointer; } @media (max-width: 720px) { .dash-page--chat { min-height: calc(100dvh - 96px); height: auto; max-height: none; } .dash-page--chat .dash-page__messenger, .dash-page--chat .messenger.ig-dm { flex-direction: column !important; min-height: calc(100dvh - 120px); max-height: calc(100dvh - 100px); height: calc(100dvh - 120px); } .dash-page--chat .messenger__sidebar, .dash-page--chat .ig-dm__sidebar { width: 100%; min-width: 0; max-width: none; flex: 1 1 auto; min-height: 0; } .dash-page--chat .messenger.ig-dm:not(.ig-dm--open) .ig-dm__main { display: none !important; } .dash-page--chat .messenger.ig-dm.ig-dm--open .ig-dm__sidebar { display: none !important; } .dash-page--chat .messenger.ig-dm.ig-dm--open .ig-dm__main { display: flex !important; flex: 1 1 auto !important; } .dash-page--chat .ig-dm__back, .dash-page--chat .messenger.ig-dm.ig-dm--open .ig-dm__back { display: inline-flex !important; align-items: center; justify-content: center; } } .section-body.settings-body { overflow-x: clip; max-width: 100%; } .section-body.settings-body > .card.glass, .section-body.settings-body > details.ks-accordion { max-width: 100%; overflow-x: clip; } /* —— Map fullscreen (CSS fallback pro iOS + native Android) —— */ html.ks-map-fs-lock, body.ks-map-fs-lock { overflow: hidden !important; overscroll-behavior: none; height: 100% !important; } .ks-map-fs-active { position: fixed !important; inset: 0 !important; z-index: 2147483646 !important; width: 100% !important; width: 100dvw !important; height: 100% !important; height: 100dvh !important; min-height: 100% !important; min-height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; border: none !important; background: #07070a !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important; box-sizing: border-box !important; } .ks-map-fs-active .groups-map-main { flex: 1 1 auto !important; min-height: 0 !important; height: 100% !important; display: flex !important; flex-direction: column !important; } .ks-map-fs-active .groups-map__head { flex-shrink: 0; padding: 8px !important; } .ks-map-fs-active .groups-map__map-area, .ks-map-fs-active .gps-map-area { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; margin: 0 !important; border-radius: 0 !important; border: none !important; } .ks-map-fs-active .groups-map__canvas, .ks-map-fs-active .gps-map-canvas { min-height: 100% !important; height: 100% !important; } .ks-map-fs-active .groups-map__caption-static, .ks-map-fs-active .gps-map-caption { display: none !important; } /* Closed panel must not steal layout; NEVER leave --open as display:none. */ .ks-map-fs-active > .groups-map-sidepanel:not([aria-hidden="false"]), .groups-map-split:fullscreen > .groups-map-sidepanel:not([aria-hidden="false"]), .groups-map-split:-webkit-full-screen > .groups-map-sidepanel:not([aria-hidden="false"]) { display: none !important; } .ks-map-fs-active:not(.groups-map-split--open) > .groups-map-sidepanel, .groups-map-split:fullscreen:not(.groups-map-split--open) > .groups-map-sidepanel, .groups-map-split:-webkit-full-screen:not(.groups-map-split--open) > .groups-map-sidepanel { display: none !important; } /* V fullscreenu musí jít otevřít Nastavení / Trasy jako bottom sheet nad mapou. */ .ks-map-fs-active.groups-map-split--open > .groups-map-sidepanel, .groups-map-split:fullscreen.groups-map-split--open > .groups-map-sidepanel, .groups-map-split:-webkit-full-screen.groups-map-split--open > .groups-map-sidepanel { display: flex !important; flex-direction: column !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; max-width: 100% !important; height: min(62vh, 520px) !important; max-height: min(62vh, 520px) !important; flex: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 10050 !important; border: none !important; border-right: none !important; border-radius: 16px 16px 0 0 !important; box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.55) !important; overflow: hidden !important; background: rgba(8, 10, 16, 0.98) !important; } .ks-map-fs-active.groups-map-split--open .groups-map-sidepanel__scroll, .groups-map-split:fullscreen.groups-map-split--open .groups-map-sidepanel__scroll, .groups-map-split:-webkit-full-screen.groups-map-split--open .groups-map-sidepanel__scroll { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important; } .ks-map-fs-active.groups-map-split--open .groups-map__float-bar, .groups-map-split:fullscreen.groups-map-split--open .groups-map__float-bar, .groups-map-split:-webkit-full-screen.groups-map-split--open .groups-map__float-bar { top: auto !important; bottom: calc(min(62vh, 520px) + 10px) !important; z-index: 10060 !important; } .ks-map-fs-active .groups-map__float-bar, .groups-map-split:fullscreen .groups-map__float-bar, .groups-map-split:-webkit-full-screen .groups-map__float-bar { top: auto !important; bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important; left: 8px !important; right: 8px !important; justify-content: center !important; max-width: none !important; z-index: 10060 !important; pointer-events: none; } .ks-map-fs-active .groups-map__float-btn, .groups-map-split:fullscreen .groups-map__float-btn, .groups-map-split:-webkit-full-screen .groups-map__float-btn { pointer-events: auto !important; } /* —— GPS trasy — mapa v příspěvcích / garáži —— */ .ks-track-map-wrap { margin-top: 8px; } .ks-track-map-toggle { margin-bottom: 8px; } .ks-track-map { display: none; height: 220px; min-height: 180px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: #0b1220; } .ks-track-map-wrap.is-open .ks-track-map { display: block; } .projekt-track-item .ks-track-map { height: 260px; } .group-settings-avatar-preview { margin-bottom: 10px; } .group-settings-avatar-preview__img { width: 88px; height: 88px; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); display: block; } .group-settings-avatar-preview__ph { padding: 20px 12px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, 0.15); font-size: 0.88rem; text-align: center; } @media (max-width: 720px) { .groups-map-split--open .groups-map-sidepanel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: min(68vh, 560px); max-height: 68vh; width: 100% !important; max-width: 100% !important; opacity: 1 !important; border: none; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55); z-index: 900; flex: none !important; } .groups-map-split--open .groups-map-main { flex: 1 1 auto; min-height: min(42vh, 360px); } .groups-map-split--open .groups-map__map-area { min-height: min(38vh, 320px) !important; } .group-location-map .groups-map__float-bar, .gps-map-area > .groups-map__float-bar { top: auto !important; bottom: 12px !important; left: 8px !important; right: 8px !important; justify-content: center !important; max-width: none !important; } .groups-map-split--open .group-location-map .groups-map__float-bar { bottom: calc(min(68vh, 560px) + 8px) !important; } .groups-map-split--open .groups-map__caption-static { display: none; } .groups-map__float-btn { font-size: 0.72rem !important; padding: 7px 10px !important; } .groups-map-split:fullscreen .groups-map__map-area, .groups-map-split:-webkit-full-screen .groups-map__map-area, .gps-map-stage:fullscreen .groups-map__map-area, .gps-map-stage:-webkit-full-screen .groups-map__map-area, .ks-map-fs-active .groups-map__map-area, .ks-map-fs-active .gps-map-area { min-height: 0 !important; margin: 0 !important; border-radius: 0 !important; } .groups-map-split:fullscreen .groups-map__head, .groups-map-split:-webkit-full-screen .groups-map__head, .ks-map-fs-active .groups-map__head { padding: 6px 8px !important; } /* Fullscreen mobile: always bottom sheet when open (beats earlier width rules). */ .ks-map-fs-active.groups-map-split--open > .groups-map-sidepanel, .groups-map-split:fullscreen.groups-map-split--open > .groups-map-sidepanel, .groups-map-split:-webkit-full-screen.groups-map-split--open > .groups-map-sidepanel { display: flex !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: 100% !important; height: min(62vh, 520px) !important; max-height: min(62vh, 520px) !important; flex: none !important; opacity: 1 !important; z-index: 10050 !important; } .ks-map-layers__panel { width: min(248px, calc(100vw - 24px)) !important; max-height: min(60vh, 380px) !important; } .groups-map-split--open .groups-map-sidepanel__scroll { padding-bottom: max(16px, env(safe-area-inset-bottom)); } }