/* ══════════════════════════════════════════════════════════════════════════ PKV Design System — tokeny převzaté 1:1 z Cenotvorbiče (frontend/src/index.css). Tmavé hodnoty jsou default na :root, světlý motiv přepisuje třída .pkv-light na — stejně jako v appce, NE přes prefers-color-scheme. ══════════════════════════════════════════════════════════════════════════ */ :root { --pkv-green: #00CA85; --pkv-green-dark: #00A26A; --pkv-mint: #99EACE; --pkv-black: #1E1E1E; --pkv-white: #FFFFFF; --pkv-gray: #A0A0A0; --pkv-gray-light: #E5E5E5; --pkv-gray-dark: #4C4C4C; --pkv-yellow: #F5CB3A; --pkv-red: #E83F4D; --pkv-blue: #3B5BC6; --pkv-surface: #1E1E1E; --pkv-surface-2: #292929; --pkv-surface-3: #2A2A2A; --pkv-border-dark: #777778; --pkv-text-muted: #989898; /* semantické — tmavé defaulty */ --bg: var(--pkv-surface); --bg-raised: var(--pkv-surface-2); --bg-input: var(--pkv-surface-3); --fg: var(--pkv-white); --fg-muted: var(--pkv-text-muted); --fg-subtle: var(--pkv-gray); --border: var(--pkv-border-dark); --accent: var(--pkv-green); --sb-bg: #111111; --sb-border: #222222; --sb-text: #FFFFFF; --tbl-head-bg: #1A1A1A; --tbl-head-color: #989898; --card-bg: var(--pkv-surface-2); --card-fg: var(--pkv-white); --card-border: #333333; --card-shadow: none; --hover: rgba(255,255,255,.06); --hover2: rgba(255,255,255,.10); --font-heading: "Open Sans", system-ui, sans-serif; --font-display: "Onest", "Open Sans", sans-serif; --font-body: "Open Sans", system-ui, sans-serif; --font-data: "Inter", system-ui, sans-serif; --r-button: 8px; --r-input: 12px; --r-card: 20px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(0,0,0,.25); --shadow-md: 0 8px 24px rgba(0,0,0,.35); --shadow-green: 0 8px 30px rgba(0,202,133,.25); } .pkv-light { --bg: #F5F5F5; --bg-raised: #FFFFFF; --bg-input: #FFFFFF; --fg: #1E1E1E; --fg-muted: #4C4C4C; --fg-subtle: #A0A0A0; --border: #E5E5E5; --sb-bg: #FFFFFF; --sb-border: #E5E5E5; --sb-text: #1E1E1E; --tbl-head-bg: #F0F0F0; --tbl-head-color: #4C4C4C; --card-bg: #FFFFFF; --card-fg: #1E1E1E; --card-border: #E5E5E5; --card-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.07); --hover: rgba(0,0,0,.04); --hover2: rgba(0,0,0,.07); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: var(--font-body); -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--fg); transition: background .25s, color .25s; } body { overflow: hidden; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--fg-subtle); border-radius: 3px; opacity: .5; } /* ══ Levé menu ════════════════════════════════════════════════════════════ Převzato ze sidebaru Cenotvorbiče (.sb v index.css) včetně sbalovacího railu — appka tak vypadá jako další modul ekosystému, ne jako cizí nástroj. ═══════════════════════════════════════════════════════════════════════════ */ .shell { display: flex; height: 100vh; overflow: hidden; } .sb { --sb-rail: 60px; --sb-full: 236px; position: relative; width: var(--sb-full); flex-shrink: 0; background: var(--sb-bg); border-right: 1px solid var(--sb-border); display: flex; flex-direction: column; transition: width .26s cubic-bezier(.4,0,.2,1), background .25s, border-color .25s; } .sb--rail { width: var(--sb-rail); } .sb--rail:hover { width: var(--sb-full); box-shadow: 14px 0 40px -18px rgba(0,0,0,.22); z-index: 20; } .sb__coll { position: absolute; top: 70px; right: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-raised); border: 1px solid var(--sb-border); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--fg-subtle); z-index: 30; opacity: 0; transition: opacity .14s, border-color .14s, color .14s; } .sb:hover .sb__coll, .sb__coll:focus-visible { opacity: 1; } .sb__coll:hover { border-color: var(--pkv-green); color: var(--pkv-green-dark); } .sb__coll svg { transition: transform .26s; } .sb--rail .sb__coll svg { transform: rotate(180deg); } .sb__logo { display: flex; align-items: center; gap: 12px; padding: 16px 14px 14px; flex-shrink: 0; } .sb__logo img { height: 32px; flex-shrink: 0; } .sb__logo-txt { min-width: 0; overflow: hidden; white-space: nowrap; transition: opacity .18s; } .sb__logo-txt b { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--sb-text); } .sb__logo-txt i { display: block; font-style: normal; font-family: var(--font-data); font-size: 10px; color: var(--fg-muted); letter-spacing: .02em; margin-top: 2px; } .sb--rail:not(:hover) .sb__logo-txt { opacity: 0; } .sb--rail:not(:hover) .sb__logo { justify-content: center; padding-left: 0; padding-right: 0; } .sb nav { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-top: 6px; } .sb__grp { padding: 10px 14px 5px; font-family: var(--font-heading); font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-subtle); white-space: nowrap; overflow: hidden; transition: opacity .18s; } .sb--rail:not(:hover) .sb__grp { opacity: 0; } .sbnav { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; margin: 1px 8px; padding: 0 8px; height: 36px; border-radius: 9px; color: var(--fg-muted); text-decoration: none; cursor: pointer; background: none; border: 0; width: calc(100% - 16px); font-family: var(--font-heading); font-size: 13.5px; text-align: left; white-space: nowrap; overflow: hidden; transition: color .13s; } .sbnav svg { width: 17px; height: 17px; flex-shrink: 0; transition: transform .22s cubic-bezier(.34,1.56,.64,1); } /* Tučnost je konstantní — kdyby se měnila, text by při přepnutí poskočil. */ .sbnav__lbl { font-weight: 600; overflow: hidden; text-overflow: ellipsis; transition: opacity .18s; } .sbnav:hover { color: var(--fg); background: var(--hover); } .sbnav:hover svg { transform: translateX(1.5px) scale(1.09); } .sbnav--on { color: var(--pkv-green-dark); background: rgba(0,202,133,.11); } :root:not(.pkv-light) .sbnav--on { color: var(--pkv-green); } .sbnav--on svg { transform: scale(1.05); } .sbnav:focus-visible { outline: 2px solid var(--pkv-green-dark); outline-offset: -2px; } .sb--rail:not(:hover) .sbnav__lbl { opacity: 0; } /* Patička s uživatelem */ .sbuser { border-top: 1px solid var(--sb-border); padding: 10px 8px; flex-shrink: 0; } .sbuser__row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: 9px; background: transparent; text-align: left; } .sbuser__av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: var(--pkv-green); color: var(--pkv-black); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 11.5px; } .sbuser__info { min-width: 0; flex: 1; overflow: hidden; transition: opacity .18s; } .sbuser__info b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; color: var(--sb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sbuser__info i { display: block; font-style: normal; font-family: var(--font-data); font-size: 10px; color: var(--fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sbuser__akce { display: flex; gap: 6px; margin-top: 6px; transition: opacity .18s; } .sbuser__akce .icon-btn { flex: 1; } .sb--rail:not(:hover) .sbuser__info, .sb--rail:not(:hover) .sbuser__akce { opacity: 0; } .sb--rail:not(:hover) .sbuser__row { padding: 6px; justify-content: center; } /* ── Obsah + hlavička pohledu ───────────────────────────────────────────── Hlavička kopíruje záhlaví modulů Cenotvorbiče: badge + h1 + řádek faktů oddělených ` · `, akce vpravo. */ .obsah { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .view { flex: 1; min-height: 0; display: none; flex-direction: column; } .view.je { display: flex; } .view-hlavicka { flex-shrink: 0; height: 60px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--sb-bg); border-bottom: 1px solid var(--sb-border); transition: background .25s, border-color .25s; } .view-hlavicka .titul { display: flex; align-items: center; gap: 10px; min-width: 0; } .view-hlavicka h1 { font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--fg); margin: 0; white-space: nowrap; } .view-hlavicka .fakta { font-family: var(--font-data); font-size: 11.5px; color: var(--fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .view-hlavicka .akce { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .view-telo { flex: 1; min-height: 0; display: grid; grid-template-columns: 420px 1fr; } .module-badge { font-family: var(--font-heading); font-weight: 700; font-size: 11px; letter-spacing: .06em; border-radius: var(--r-pill); padding: 4px 11px; color: var(--pkv-green-dark); background: rgba(0,202,133,.1); flex-shrink: 0; } :root:not(.pkv-light) .module-badge { color: var(--pkv-green); } .pill { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-pill); font-family: var(--font-data); font-size: 11px; font-weight: 600; color: var(--fg-muted); white-space: nowrap; transition: border-color .2s, color .2s; } .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-subtle); flex-shrink: 0; transition: background .2s; } .pill--ok { border-color: rgba(0,202,133,.45); color: var(--pkv-green-dark); } .pill--ok .dot { background: var(--pkv-green); box-shadow: 0 0 0 3px rgba(0,202,133,.16); } .pill--err { border-color: rgba(232,63,77,.45); color: var(--pkv-red); } .pill--err .dot { background: var(--pkv-red); } .pkv-light .pill--ok { color: var(--pkv-green-dark); } :root:not(.pkv-light) .pill--ok { color: var(--pkv-green); } .icon-btn { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--r-button); background: transparent; color: var(--fg-muted); cursor: pointer; transition: border-color .13s, color .13s, background .13s; } .icon-btn:hover { border-color: var(--pkv-green); color: var(--pkv-green-dark); } :root:not(.pkv-light) .icon-btn:hover { color: var(--pkv-green); background: var(--hover); } .icon-btn:focus-visible { outline: 2px solid var(--pkv-green-dark); outline-offset: 2px; } /* ── Layout ──────────────────────────────────────────────────────────────── */ .panel { background: var(--sb-bg); border-right: 1px solid var(--sb-border); display: flex; flex-direction: column; overflow: hidden; transition: background .25s, border-color .25s; } .sekce { padding: 16px 18px; border-bottom: 1px solid var(--sb-border); flex-shrink: 0; } /* Popisek sekce — .label z appky (Open Sans 600, 12px, uppercase, --fg-muted) */ .label { font-family: var(--font-heading); font-weight: 600; font-size: 12px; color: var(--fg-muted); letter-spacing: .02em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .label::after { content: ''; flex: 1; height: 1px; background: var(--border); opacity: .7; } /* Ve formulářích je .label popisek pole, ne nadpis sekce — linka za ním by vypadala jako oddělovač a rozbíjela dvojice polí vedle sebe. */ .prihlaseni .label::after, .modal .label::after { display: none; } .label .cnt { font-family: var(--font-data); font-size: 10px; font-weight: 700; color: var(--fg-subtle); text-transform: none; letter-spacing: 0; } /* ── Formulářové prvky (.input-dark z appky — funguje v obou motivech) ───── */ .input { width: 100%; background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: var(--r-input); padding: 10px 13px; font-family: var(--font-body); font-size: 13.5px; outline: none; transition: border-color .15s, box-shadow .15s; } .input::placeholder { color: var(--fg-subtle); opacity: .7; } .input:focus { border-color: var(--pkv-green); box-shadow: 0 0 0 3px rgba(0,202,133,.12); } textarea.input { resize: none; line-height: 1.65; font-size: 13px; font-family: var(--font-data); flex: 1; min-height: 96px; } .radek { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 11px; } .check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--fg-muted); user-select: none; } /* accent-color, ne Tailwind text-brand-* — @tailwindcss/forms appka nemá, takže i tam se vykresluje nativní checkbox. */ .check input { width: 16px; height: 16px; border-radius: 4px; accent-color: var(--pkv-green-dark); cursor: pointer; } .check:hover { color: var(--fg); } .cas { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-muted); } .cas input[type=time] { width: 96px; padding: 6px 10px; background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: var(--r-button); font-family: var(--font-data); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; outline: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .cas input[type=time]:focus { border-color: var(--pkv-green); box-shadow: 0 0 0 3px rgba(0,202,133,.12); } /* ── Tlačítka (.btn / .btn-primary / .btn-secondary z appky) ─────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-button); font-family: var(--font-heading); font-size: 13px; font-weight: 600; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .13s, color .13s, border-color .13s, opacity .13s; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* Prstenec jen pro klávesnici, v PKV zelené, s průhledným offsetem — stejně jako .btn:focus-visible v appce (funguje na světlém i tmavém podkladu). */ .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px transparent, 0 0 0 4px var(--pkv-green); } .btn svg { flex-shrink: 0; } .btn-primary { background: var(--pkv-green); color: var(--pkv-black); } .btn-primary:hover:not(:disabled) { background: var(--pkv-mint); } .btn-secondary { background: var(--bg-raised); color: var(--fg-muted); border-color: var(--border); } .btn-secondary:hover:not(:disabled) { background: var(--hover); color: var(--fg); border-color: var(--fg-subtle); } .btn-ghost { background: transparent; color: var(--fg-muted); } .btn-ghost:hover:not(:disabled) { background: var(--hover); color: var(--fg); } .btn-sm { padding: 6px 11px; font-size: 12px; } .napoveda { font-size: 11.5px; line-height: 1.6; color: var(--fg-subtle); margin-bottom: 9px; } .napoveda code { font-family: var(--font-data); font-size: 11px; font-weight: 700; color: var(--pkv-green-dark); background: rgba(0,202,133,.11); padding: 1px 5px; border-radius: 4px; } :root:not(.pkv-light) .napoveda code { color: var(--pkv-green); } /* ── Zadání ──────────────────────────────────────────────────────────────── */ .zadani { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 16px 18px; } /* Po naplánování se zadání scvrkne na pár řádků — místo dostane časová osa, ale zůstane vidět (a editovatelné), aby šlo trasu hned přepočítat. */ .zadani.zadani--sbaleno { flex: 0 0 auto; padding: 12px 18px; } .zadani.zadani--sbaleno .label { margin-bottom: 7px; } /* Výška = přesně 3 řádky (13px × 1,65) + padding, ať se poslední řádek neseká vejpůl. */ .zadani.zadani--sbaleno textarea.input { flex: 0 0 auto; height: 80px; min-height: 0; padding: 7px 11px; } .zadani.zadani--sbaleno .napoveda { display: none; } .zadani.zadani--sbaleno .zadani-akce { margin-top: 8px; } .zadani-akce { display: flex; gap: 8px; margin-top: 10px; } .zadani-akce .btn-primary { flex: 1; } /* ── Výsledek: časová osa (vzor: HarmonogramVyjezdu.tsx) ─────────────────── */ .vysledek { display: none; flex-direction: column; flex: 1; min-height: 0; border-top: 1px solid var(--sb-border); } .vysledek.je { display: flex; } .vysledek-hlava { padding: 12px 18px 0; display: flex; align-items: center; justify-content: space-between; } .vysledek-hlava h2 { font-family: var(--font-heading); font-weight: 700; font-size: 13.5px; color: var(--fg); } .vysledek-hlava .sub { font-family: var(--font-data); font-size: 10.5px; color: var(--fg-subtle); } .osa { flex: 1; min-height: 110px; overflow-y: auto; padding: 9px 0 6px; } .zastavka { display: grid; grid-template-columns: 52px 18px 1fr; gap: 0 10px; padding: 0 18px; animation: zastavka-in .28s cubic-bezier(.2,.8,.3,1) both; } @keyframes zastavka-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .zastavka { animation: none; } } .zastavka:hover .z-adresa { color: var(--pkv-green-dark); } :root:not(.pkv-light) .zastavka:hover .z-adresa { color: var(--pkv-green); } /* sloupec času */ .z-cas { text-align: right; padding-top: 1px; } .z-cas b { display: block; font-family: var(--font-data); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); line-height: 1.35; } .z-cas i { display: block; font-style: normal; font-family: var(--font-data); font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--fg-subtle); line-height: 1.35; } /* sloupec uzlu */ .z-uzel { display: flex; flex-direction: column; align-items: center; padding-top: 5px; } .z-tecka { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-data); font-size: 9.5px; font-weight: 800; line-height: 1; } .z-tecka--start { background: var(--pkv-green); color: var(--pkv-black); } .z-tecka--stop { background: var(--pkv-black); color: #fff; box-shadow: 0 0 0 2px var(--sb-bg); } :root:not(.pkv-light) .z-tecka--stop { background: #fff; color: var(--pkv-black); } .z-tecka--konec { background: var(--pkv-red); color: #fff; } .z-cara { width: 1px; flex: 1; background: var(--border); margin-top: 4px; min-height: 18px; } /* sloupec obsahu */ .z-obsah { padding-bottom: 11px; min-width: 0; } .z-adresa { font-size: 13px; font-weight: 600; color: var(--fg); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .12s; } .z-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; font-family: var(--font-data); font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--fg-subtle); } .z-meta .na-miste { color: var(--pkv-green-dark); font-weight: 700; } :root:not(.pkv-light) .z-meta .na-miste { color: var(--pkv-green); } .z-meta .odd { opacity: .45; } /* ── Souhrn ──────────────────────────────────────────────────────────────── */ /* Zelená 2px linka nad souhrnem — podpis PKV tabulek (v appce sedí pod hlavičkou tabulky), tady odděluje datový pruh od časové osy. */ .souhrn { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 12px 18px; border-top: 2px solid var(--pkv-green); background: var(--tbl-head-bg); flex-shrink: 0; transition: background .25s; } .stat { text-align: center; min-width: 0; } .stat b { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); line-height: 1.15; } .stat b .jed { font-size: 11px; font-weight: 600; color: var(--fg-subtle); margin-left: 2px; } .stat i { display: block; font-style: normal; font-family: var(--font-heading); font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tbl-head-color); margin-top: 3px; } .stat--akcent b { color: var(--pkv-green-dark); } :root:not(.pkv-light) .stat--akcent b { color: var(--pkv-green); } .vysledek-akce { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--sb-border); flex-shrink: 0; } .vysledek-akce .btn { flex: 1; } /* ── Mapa ────────────────────────────────────────────────────────────────── */ .mapa-wrap { position: relative; padding: 14px; min-width: 0; } #map, #map-tech { width: 100%; height: 100%; border-radius: var(--r-card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); background: var(--bg-raised); overflow: hidden; transition: border-color .25s, box-shadow .25s; } .mapa-prazdno { position: absolute; inset: 14px; z-index: 2; border-radius: var(--r-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--bg-raised); color: var(--fg-subtle); text-align: center; padding: 24px; } .mapa-prazdno svg { opacity: .35; } .mapa-prazdno p { font-family: var(--font-data); font-size: 12.5px; letter-spacing: .02em; } /* Klíč chybí nebo je neplatný — Google místo mapy vykreslí vlastní šedou hlášku „Jejda…“, která neřekne co s tím. Tohle ji překryje návodem. */ .klic-panel { position: absolute; inset: 14px; z-index: 20; border-radius: var(--r-card); display: none; align-items: center; justify-content: center; padding: 24px; background: var(--bg-raised); } .klic-panel.je { display: flex; } .klic-box { max-width: 460px; width: 100%; } .klic-box .badge { display: inline-block; font-family: var(--font-heading); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; border-radius: var(--r-pill); padding: 4px 12px; margin-bottom: 12px; color: #92400E; background: rgba(245,203,58,.28); } .klic-box h3 { font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--fg); margin-bottom: 8px; } .klic-box p { font-size: 13px; line-height: 1.65; color: var(--fg-muted); margin-bottom: 8px; } .klic-box p.mensi { font-size: 11.5px; color: var(--fg-subtle); } .klic-box ol { font-size: 12.5px; line-height: 1.75; color: var(--fg-muted); margin: 0 0 14px 18px; } .klic-box code { font-family: var(--font-data); font-size: 11.5px; font-weight: 600; color: var(--pkv-green-dark); background: rgba(0,202,133,.11); padding: 1px 5px; border-radius: 4px; } :root:not(.pkv-light) .klic-box code { color: var(--pkv-green); } .klic-form { display: flex; gap: 8px; margin-top: 4px; } .klic-form .input { flex: 1; font-family: var(--font-data); font-size: 12.5px; } .nacitani { position: absolute; inset: 14px; z-index: 30; border-radius: var(--r-card); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(3px); } .nacitani.je { display: flex; } /* Spinner jako v appce: SVG oblouk s animate-spin, ne CSS prstenec. */ .spinner { width: 30px; height: 30px; color: var(--pkv-green); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } } .nacitani p { font-family: var(--font-data); font-size: 12px; color: var(--fg-muted); letter-spacing: .03em; } /* ── Toast (vzor: ToastHost / .cnt-toast-pill) ───────────────────────────── */ /* Tvar 1:1 s ToastHost.cnt-toast-pill z appky. */ .toast-host { position: fixed; left: 50%; bottom: 28px; z-index: 200; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 8px; max-width: min(90vw, 480px); padding: 9px 18px; border-radius: var(--r-pill); background: var(--bg-raised); color: var(--fg); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.18); font-family: var(--font-heading); font-size: 13px; font-weight: 600; animation: toast-in .18s cubic-bezier(.2,.8,.3,1); } @keyframes toast-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } } .toast.pryc { animation: toast-out .2s ease forwards; } @keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(.97); } } .toast .tdot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-subtle); flex-shrink: 0; } .toast--ok .tdot { background: var(--pkv-green); box-shadow: 0 0 0 3px rgba(0,202,133,.16); } .toast--err .tdot { background: var(--pkv-red); box-shadow: 0 0 0 3px rgba(232,63,77,.16); } @media (prefers-reduced-motion: reduce) { .toast, .toast.pryc { animation: none; } } /* ── Bublina nad pinem (Google InfoWindow) ───────────────────────────────── */ .iw { font-family: var(--font-body); min-width: 190px; max-width: 270px; color: #1E1E1E; } .iw .iw-lbl { font-family: var(--font-heading); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A0A0A0; margin-bottom: 4px; } .iw .iw-adr { font-size: 12.5px; font-weight: 600; line-height: 1.4; margin-bottom: 10px; } .iw .iw-akce { display: flex; gap: 6px; } .iw button { flex: 1; border: 1px solid transparent; border-radius: 8px; padding: 7px 10px; font-family: var(--font-heading); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .12s; } .iw .iw-ok { background: #00CA85; color: #1E1E1E; } .iw .iw-ok:hover { background: #99EACE; } .iw .iw-ne { background: #fff; color: #4C4C4C; border-color: #E5E5E5; } .iw .iw-ne:hover { background: #F5F5F5; } /* Google si InfoWindow kreslí sám (bílá bublina) — text proto držíme tmavý i v tmavém motivu, jinak by zmizel. */ .gm-style .gm-style-iw-c { border-radius: 12px !important; padding: 12px !important; box-shadow: 0 8px 28px rgba(0,0,0,.22) !important; } .gm-style .gm-style-iw-d { overflow: hidden !important; } /* ── Užší okna ───────────────────────────────────────────────────────────── */ @media (max-width: 1180px) { .view-telo { grid-template-columns: 370px 1fr; } } @media (max-width: 940px) { .shell { height: auto; min-height: 100vh; } body { overflow: auto; } .sb { --sb-full: 60px; width: 60px; } .sb:hover { width: 236px; box-shadow: 14px 0 40px -18px rgba(0,0,0,.22); z-index: 20; } .sb:not(:hover) .sb__logo-txt, .sb:not(:hover) .sbnav__lbl, .sb:not(:hover) .sb__grp, .sb:not(:hover) .sbuser__info, .sb:not(:hover) .sbuser__akce { opacity: 0; } .view-telo { grid-template-columns: 1fr; } .panel { border-right: none; border-bottom: 1px solid var(--sb-border); } .mapa-wrap { height: 60vh; } } /* ══ Přihlášení ═══════════════════════════════════════════════════════════ Appka drží osobní údaje techniků, takže se nic nevykreslí, dokud není session. Vzor: routes/login.tsx v Cenotvorbiči (Microsoft + e-mail/heslo). ═══════════════════════════════════════════════════════════════════════════ */ .prihlaseni { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); } .prihlaseni__box { width: 100%; max-width: 380px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: 30px 28px; } .prihlaseni__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .prihlaseni__logo img { height: 34px; } .prihlaseni__logo b { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--fg); } .prihlaseni__logo i { display: block; font-style: normal; font-family: var(--font-data); font-size: 10.5px; color: var(--fg-subtle); margin-top: 2px; } .prihlaseni__pole { display: flex; flex-direction: column; gap: 10px; } .prihlaseni__pole .label { margin-bottom: 4px; } .prihlaseni .btn { width: 100%; } .prihlaseni__delic { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-family: var(--font-data); font-size: 10.5px; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: .08em; } .prihlaseni__delic::before, .prihlaseni__delic::after { content: ''; flex: 1; height: 1px; background: var(--border); } .btn-ms { background: var(--bg-input); color: var(--fg); border-color: var(--border); } .btn-ms:hover:not(:disabled) { background: var(--hover); border-color: var(--fg-subtle); } .prihlaseni__chyba { margin-top: 12px; padding: 9px 12px; border-radius: var(--r-button); background: rgba(232,63,77,.10); border: 1px solid rgba(232,63,77,.35); color: var(--pkv-red); font-size: 12.5px; line-height: 1.5; } .prihlaseni__ceka { text-align: center; } .prihlaseni__ceka .ikona { font-size: 30px; margin-bottom: 10px; } .prihlaseni__ceka h2 { font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--fg); margin-bottom: 8px; } .prihlaseni__ceka p { font-size: 13px; line-height: 1.6; color: var(--fg-muted); margin-bottom: 16px; } /* ══ Technici ═════════════════════════════════════════════════════════════ */ .filtr { display: flex; flex-wrap: wrap; gap: 6px; } .filtr__polozka { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--r-pill); font-family: var(--font-data); font-size: 11px; font-weight: 600; color: var(--fg-muted); user-select: none; transition: all .13s; } .filtr__polozka:hover { border-color: var(--fg-subtle); color: var(--fg); } .filtr__polozka input { display: none; } .filtr__polozka .tecka { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .filtr__polozka .pocet { color: var(--fg-subtle); font-weight: 700; } .filtr__polozka:has(input:checked) { border-color: var(--pkv-green); color: var(--fg); background: rgba(0,202,133,.08); } .filtr__polozka:not(:has(input:checked)) { opacity: .5; } .tecka--aktivni { background: var(--pkv-green); } .tecka--neaktivni { background: var(--pkv-red); } .tecka--ceka { background: var(--pkv-yellow); } .tech-seznam { flex: 1; overflow-y: auto; min-height: 0; } .tech-radek { display: flex; align-items: center; gap: 10px; padding: 9px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; } .tech-radek:hover { background: var(--hover); } .tech-radek--vybrany { background: rgba(0,202,133,.10); } .tech-radek .tecka { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .tech-radek .info { flex: 1; min-width: 0; } .tech-radek .info b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 13px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tech-radek .info i { display: block; font-style: normal; font-family: var(--font-data); font-size: 10.5px; color: var(--fg-subtle); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tech-radek .vzdal { font-family: var(--font-data); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pkv-green-dark); flex-shrink: 0; } :root:not(.pkv-light) .tech-radek .vzdal { color: var(--pkv-green); } .tech-radek .stitek { font-family: var(--font-data); font-size: 9px; font-weight: 800; letter-spacing: .05em; padding: 2px 6px; border-radius: var(--r-pill); flex-shrink: 0; background: rgba(0,0,0,.06); color: var(--fg-subtle); } :root:not(.pkv-light) .tech-radek .stitek { background: rgba(255,255,255,.08); } .tech-radek .stitek--int { background: rgba(0,202,133,.16); color: var(--pkv-green-dark); } :root:not(.pkv-light) .tech-radek .stitek--int { color: var(--pkv-green); } .tech-radek .upravit { opacity: 0; flex-shrink: 0; transition: opacity .12s; background: none; border: 0; cursor: pointer; color: var(--fg-subtle); padding: 4px; } .tech-radek:hover .upravit { opacity: 1; } .tech-radek .upravit:hover { color: var(--pkv-green-dark); } .prazdno { padding: 28px 18px; text-align: center; font-size: 13px; color: var(--fg-subtle); line-height: 1.6; } /* ══ Modál ════════════════════════════════════════════════════════════════ */ .modal-bg { position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,.42); display: none; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; overflow-y: auto; animation: modal-bg-in .14s ease; } .modal-bg.je { display: flex; } @keyframes modal-bg-in { from { opacity: 0 } to { opacity: 1 } } .modal { width: 100%; max-width: 460px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: 0 26px 70px -12px rgba(0,0,0,.45); padding: 24px; animation: modal-in .16s cubic-bezier(.34,1.56,.64,1); } @keyframes modal-in { from { opacity: 0; transform: translateY(-6px) scale(.98) } to { opacity: 1; transform: none } } .modal h2 { font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--fg); margin-bottom: 16px; } .modal .pole { margin-bottom: 12px; } .modal .pole .label { margin-bottom: 5px; } .modal .dvojice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .modal .modal-akce { display: flex; gap: 8px; margin-top: 18px; } .modal .modal-akce .btn { flex: 1; } .modal .modal-akce .btn-smazat { flex: 0 0 auto; background: transparent; color: var(--pkv-red); border-color: rgba(232,63,77,.35); } .modal .modal-akce .btn-smazat:hover:not(:disabled) { background: rgba(232,63,77,.10); } select.input { cursor: pointer; } .napoveda-pole { font-size: 11px; color: var(--fg-subtle); margin-top: 5px; line-height: 1.5; }