/* Velín — styly. Mobile-first (320 / 375 px), tmavá + limetka podle mockupu Velínu (David 26. 10. 2026). * Písma: Baloo 2 (nadpisy), Barlow Condensed (štítky, čísla, sekce), Open Sans (text). * Barvy jsou TOKENY se dvěma tématy: „tymdejvid" (výchozí, týmová zelená + neon) a „runflow" (neutrální tmavá RunFlow). * Oblast Práce / Osobní mění jen akcent (data-oblast na ). * Body se nikdy nedává overflow-x:hidden (docs/pravidla/scroll-a-overflow.md); okna rolují sama. */ /* ---------- Tokeny ---------- * 2 témata (data-theme: tymdejvid | runflow) × 2 režimy (data-scheme: dark | light) = 4 sady. Oblast (data-oblast: prace | osobni) * přepisuje jen akcent. Režim nastavuje JS (volba Podle systému · Světlý · Tmavý, inline skript v index.html před CSS, ať nic neprobliká). * Žádná barva natvrdo mimo tento blok — hlídá test-centrala.js, stejně jako kontrast textu ≥ 4,5:1. * Světlý #tymdejvid: neonová limetka jen jako VÝPLŇ s tmavým textem (tlačítka, hlavní úkol); text, ikony a odkazy = tmavší zelená (--accent-ink). */ /* Mockup Velínu (David 26. 10. 2026, upravené zadání): rozložení podle mockupu, BARVY = zelená z loga RunFlow. * Tmavý: pozadí #0B1410 · karta #13221B · okraj #23372D · lišta #0F1B16 · text #EAF3EE · tlumený #93AA9F · akcent světlá zelená #5CBF3A (text na ní #0B1410) · odkazy a ikony #7FD45C. * Světlý: pozadí #F5F8F4 · karta #FFFFFF · okraj #E0E8DF · lišta #FFFFFF · text #14201A · tlumený #56665D · akcent výplň tmavá zelená #22782F s bílým textem · * světlá zelená #5CBF3A jen jako výplň s tmavým textem (odznaky, zaškrtnuté políčko) · odkazy, ikony a zelený text #1F6E2B. * Dva druhy výplně: --accent-fill/--on-accent = hlavní úkol, tlačítko +, aktivní přepínač, hlavní tlačítka · --accent-2/--on-accent-2 = odznaky počtu a zaškrtnutí. * Přechod z loga (světlá → tmavá zelená) jen na kartě hlavního úkolu (--accent-grad), kontrast textu ověřený testem. Obě témata vychází z téhle zelené; RunFlow má neutrální grafit a logo. */ :root { --font-display: 'Baloo 2', 'Open Sans', system-ui, sans-serif; --font-cond: 'Barlow Condensed', 'Open Sans', system-ui, sans-serif; --font-body: 'Open Sans', system-ui, -apple-system, sans-serif; --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 28px; /* karty 16 · hlavní úkol a tlačítko + 22 · spodní panel 28 */ --s1: 8px; --s2: 16px; --s3: 24px; /* mřížka 8 px, odsazení stran 16 px */ --field-h: 44px; /* jednotná výška polí, čipů a dotykových cílů */ --tab-h: 76px; --hl-h: 56px; --fab: 64px; --sa-b: env(safe-area-inset-bottom, 0px); --sa-t: env(safe-area-inset-top, 0px); /* výchozí = #tymdejvid tmavý (platí, i kdyby JS nestihl nastavit data-scheme) */ --bg: #0B1410; --bg-2: #0F1B16; --surface: #13221B; --surface-2: #1A2D24; --surface-3: #23372D; --text: #EAF3EE; --muted: #93AA9F; --muted-2: #86A094; --line: #23372D; --line-strong: #2E463A; --neon: #5CBF3A; --neon-soft: rgba(92, 191, 58, .16); --cyan: #4DE8FF; --cyan-soft: rgba(77, 232, 255, .14); --brand: #7FD45C; --accent: #5CBF3A; --accent-fill: #5CBF3A; --on-accent: #0B1410; --accent-soft: var(--neon-soft); --accent-ink: #7FD45C; --accent-2: #5CBF3A; --on-accent-2: #0B1410; --accent-grad: linear-gradient(135deg, #5CBF3A, #3E9E2B); --hero-btn: #0B1410; --hero-btn-ink: #7FD45C; /* tlačítko Hotovo na zelené kartě: tmavé se zeleným textem */ --glow: 0 10px 28px rgba(92, 191, 58, .28), 0 6px 18px rgba(0, 0, 0, .35); --ok: #7FD45C; --ok-soft: rgba(92, 191, 58, .14); --warn: #FFB547; --warn-soft: rgba(255, 181, 71, .14); --bad: #FF6B6B; --bad-soft: rgba(255, 107, 107, .14); --c-hovor: #7FD45C; --c-tren: #FFB547; --c-klub: #B68CFF; --c-klub-soft: rgba(182, 140, 255, .14); --c-ukol: #9FB7AA; --c-osobni: #4DE8FF; --overlay: rgba(0, 0, 0, .6); --shadow: 0 16px 40px rgba(0, 0, 0, .55); color-scheme: dark; } :root[data-theme="tymdejvid"][data-scheme="dark"][data-oblast="osobni"], :root:not([data-theme])[data-oblast="osobni"] { --accent: var(--cyan); --accent-ink: var(--cyan); --accent-fill: var(--cyan); --accent-soft: var(--cyan-soft); --accent-2: var(--cyan); --hero-btn-ink: #4DE8FF; --accent-grad: linear-gradient(135deg, #4DE8FF, #28B7D6); --glow: 0 10px 28px rgba(77, 232, 255, .25), 0 6px 18px rgba(0, 0, 0, .35); } /* #tymdejvid · světlý: tmavá zelená z loga jako výplň s bílým textem, světlá zelená jen na odznaky a zaškrtnutí, zelený text tmavší */ :root[data-theme="tymdejvid"][data-scheme="light"] { --bg: #F5F8F4; --bg-2: #FFFFFF; --surface: #FFFFFF; --surface-2: #EEF3ED; --surface-3: #E0E8DF; --text: #14201A; --muted: #56665D; --muted-2: #5B6C62; --line: #E0E8DF; --line-strong: #C9D6C8; --neon: #5CBF3A; --neon-soft: rgba(92, 191, 58, .18); --cyan: #4DE8FF; --cyan-soft: rgba(77, 232, 255, .28); --brand: #1F6E2B; --accent: #22782F; --accent-fill: #22782F; --on-accent: #FFFFFF; --accent-soft: var(--neon-soft); --accent-ink: #1F6E2B; --accent-2: #5CBF3A; --on-accent-2: #0B1410; --accent-grad: linear-gradient(135deg, #28843A, #1F6E2B); --hero-btn: #FFFFFF; --hero-btn-ink: #1F6E2B; --glow: 0 10px 28px rgba(34, 120, 47, .25), 0 6px 18px rgba(20, 32, 26, .12); --ok: #1F6E2B; --ok-soft: rgba(92, 191, 58, .16); --warn: #9A5B00; --warn-soft: rgba(154, 91, 0, .12); --bad: #B3261E; --bad-soft: rgba(179, 38, 30, .10); --c-hovor: #1F6E2B; --c-tren: #B45309; --c-klub: #6D28D9; --c-klub-soft: rgba(109, 40, 217, .10); --c-ukol: #5B6C62; --c-osobni: #0B6E86; --overlay: rgba(20, 32, 26, .45); --shadow: 0 16px 40px rgba(20, 32, 26, .18); color-scheme: light; } :root[data-theme="tymdejvid"][data-scheme="light"][data-oblast="osobni"] { --accent: #0B6E86; --accent-fill: #0B6E86; --on-accent: #FFFFFF; --accent-ink: #0B6E86; --accent-soft: var(--cyan-soft); --accent-2: #4DE8FF; --on-accent-2: #04202A; --hero-btn-ink: #0B6E86; --accent-grad: linear-gradient(135deg, #0F7E99, #0B6E86); --glow: 0 10px 28px rgba(11, 110, 134, .22), 0 6px 18px rgba(20, 32, 26, .12); } /* RunFlow · tmavý: stejná zelená z loga, neutrální grafit, logo v hlavičce Nastavení a na přihlášení */ :root[data-theme="runflow"][data-scheme="dark"] { --bg: #0B0D11; --bg-2: #0E1117; --surface: #161920; --surface-2: #1F232C; --surface-3: #262B36; --text: #E6E9EF; --muted: #98A1B0; --muted-2: #8A94A4; --line: #2A2F3A; --line-strong: #3A404D; --neon: #5CBF3A; --neon-soft: rgba(92, 191, 58, .16); --cyan: #CBD5E1; --cyan-soft: rgba(203, 213, 225, .12); --brand: #7FD45C; --accent: #5CBF3A; --accent-fill: #5CBF3A; --on-accent: #0B0D11; --accent-soft: var(--neon-soft); --accent-ink: #7FD45C; --accent-2: #5CBF3A; --on-accent-2: #0B0D11; --accent-grad: linear-gradient(135deg, #5CBF3A, #3E9E2B); --hero-btn: #0B0D11; --hero-btn-ink: #7FD45C; --glow: 0 10px 28px rgba(92, 191, 58, .24), 0 6px 18px rgba(0, 0, 0, .35); --ok: #7FD45C; --ok-soft: rgba(92, 191, 58, .14); --warn: #F0B45E; --warn-soft: rgba(240, 180, 94, .14); --bad: #F08A80; --bad-soft: rgba(240, 138, 128, .14); --c-hovor: #7FD45C; --c-tren: #FDBA74; --c-klub: #C4B5FD; --c-klub-soft: rgba(196, 181, 253, .14); --c-ukol: #98A1B0; --c-osobni: #CBD5E1; --overlay: rgba(0, 0, 0, .6); --shadow: 0 16px 40px rgba(0, 0, 0, .55); color-scheme: dark; } :root[data-theme="runflow"][data-scheme="dark"][data-oblast="osobni"] { --accent: #CBD5E1; --accent-ink: #CBD5E1; --accent-fill: #CBD5E1; --on-accent: #0B0D11; --accent-soft: rgba(203, 213, 225, .12); --accent-2: #CBD5E1; --hero-btn-ink: #CBD5E1; --accent-grad: linear-gradient(135deg, #CBD5E1, #9AA7B8); --glow: 0 10px 28px rgba(203, 213, 225, .16), 0 6px 18px rgba(0, 0, 0, .35); } /* RunFlow · světlý: stejná zelená, neutrální šedá */ :root[data-theme="runflow"][data-scheme="light"] { --bg: #F1F3F6; --bg-2: #FFFFFF; --surface: #FFFFFF; --surface-2: #EDF0F4; --surface-3: #E1E5EB; --text: #0F172A; --muted: #5B6472; --muted-2: #626B79; --line: #E1E5EB; --line-strong: #C6CCD5; --neon: #5CBF3A; --neon-soft: rgba(92, 191, 58, .18); --cyan: #334155; --cyan-soft: rgba(51, 65, 85, .10); --brand: #1F6E2B; --accent: #22782F; --accent-fill: #22782F; --on-accent: #FFFFFF; --accent-soft: var(--neon-soft); --accent-ink: #1F6E2B; --accent-2: #5CBF3A; --on-accent-2: #0B1410; --accent-grad: linear-gradient(135deg, #28843A, #1F6E2B); --hero-btn: #FFFFFF; --hero-btn-ink: #1F6E2B; --glow: 0 10px 28px rgba(34, 120, 47, .22), 0 6px 18px rgba(15, 23, 42, .12); --ok: #1F6E2B; --ok-soft: rgba(92, 191, 58, .16); --warn: #B45309; --warn-soft: rgba(180, 83, 9, .12); --bad: #B91C1C; --bad-soft: rgba(185, 28, 28, .10); --c-hovor: #1F6E2B; --c-tren: #C2410C; --c-klub: #6D28D9; --c-klub-soft: rgba(109, 40, 217, .10); --c-ukol: #5B6472; --c-osobni: #334155; --overlay: rgba(15, 23, 42, .45); --shadow: 0 16px 40px rgba(15, 23, 42, .16); color-scheme: light; } :root[data-theme="runflow"][data-scheme="light"][data-oblast="osobni"] { --accent: #334155; --accent-ink: #334155; --accent-fill: #334155; --on-accent: #FFFFFF; --accent-soft: var(--cyan-soft); --accent-2: #CBD5E1; --on-accent-2: #0F172A; --hero-btn-ink: #334155; --accent-grad: linear-gradient(135deg, #475569, #334155); --glow: 0 10px 28px rgba(51, 65, 85, .2), 0 6px 18px rgba(15, 23, 42, .12); } /* ---------- /Tokeny ---------- */ /* ---------- Základ ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; touch-action: manipulation; background: var(--bg); } @media (pointer: coarse) { input, select, textarea { font-size: 16px !important; } body { overscroll-behavior-y: none; } } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font-body); min-height: 100dvh; } [hidden] { display: none !important; } a { color: var(--accent-ink); text-decoration: none; } button { font: inherit; color: inherit; } h1, h2, h3 { font-family: var(--font-display); margin: 0; font-weight: 700; letter-spacing: -.01em; } .muted { color: var(--muted); } .small { font-size: 13px; } .lnk { font-family: var(--font-cond); font-weight: 600; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; color: var(--accent-ink); } .hidden { display: none !important; } /* ikony (SVG symboly v index.html) */ .ik { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ik-sm { width: 16px; height: 16px; } /* ---------- Brána (přihlášení) ---------- */ #gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; text-align: center; } #gate .gate-box { max-width: 380px; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 20px; } #gate h1 { font-size: 34px; color: var(--brand); } .logo-runflow { display: none; width: 140px; max-width: 60%; height: auto; margin: 0 auto 8px; } :root[data-theme="runflow"] .logo-runflow { display: block; } .tema-logo { display: flex; justify-content: center; padding: 6px 0 2px; } .tema-logo .logo-runflow { margin: 0; width: 120px; border-radius: 12px; } #gate-err { color: var(--bad); min-height: 1.2em; font-size: 13px; } /* ---------- Kostra appky ---------- */ #app { min-height: 100dvh; display: flex; flex-direction: column; } .hl { position: sticky; top: 0; z-index: 20; height: calc(var(--hl-h) + var(--sa-t)); padding-top: var(--sa-t); background: var(--bg); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding-left: 16px; padding-right: 16px; } .hl-brand { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--brand); letter-spacing: .01em; white-space: nowrap; } .hl-brand small { color: var(--muted); font-family: var(--font-cond); font-weight: 600; font-size: 13px; margin-left: 6px; text-transform: uppercase; letter-spacing: .06em; } #hl-titul { display: none; } #hl-oblast { margin-left: auto; } main#view { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 16px 16px calc(var(--tab-h) + var(--sa-b) + var(--fab) + 32px); min-width: 0; } /* dole místo na lištu i tlačítko + */ /* ---------- Spodní lišta ---------- */ #lista { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--tab-h) + var(--sa-b)); padding-bottom: var(--sa-b); background: var(--bg-2); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(var(--tabu, 4), 1fr); align-items: center; } .tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: var(--tab-h); color: var(--muted); font-family: var(--font-cond); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; } .tab .ik { width: 24px; height: 24px; } .tab.on { color: var(--accent-ink); } .tab-badge { position: absolute; top: 10px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-2); color: var(--on-accent-2); font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; } /* tlačítko + : 64×64, radius 22, limetkové, se stínem, vpravo dole nad lištou (tlačítko je v index.html) */ .fab { position: fixed; right: 16px; bottom: calc(var(--tab-h) + var(--sa-b) + 16px); z-index: 21; width: var(--fab); height: var(--fab); border-radius: var(--r-lg); border: 0; background: var(--accent-fill); color: var(--on-accent); display: grid; place-items: center; box-shadow: var(--glow); cursor: pointer; } .fab .ik { width: 30px; height: 30px; stroke-width: 2.4; } .fab:active { transform: scale(.95); } #app[hidden] ~ .fab, .fab[hidden] { display: none; } /* ---------- Segmenty, tlačítka, políčka ---------- */ .seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px; gap: 2px; max-width: 100%; } .seg-b { border: 0; background: transparent; color: var(--muted); border-radius: 10px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-cond); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; min-height: 36px; white-space: nowrap; } .seg-b .ik { width: 18px; height: 18px; } .seg-b.on { background: var(--accent-fill); color: var(--on-accent); } .seg-oblast .seg-b { padding: 6px 12px; min-height: 40px; } /* balík B1: přepínač Práce/Osobní lépe klikatelný (zóna s okrajem segmentu ≥ 44 px) */ .seg-oblast .seg-b .ik { display: none; } @media (min-width: 520px) { .seg-oblast .seg-b .ik { display: block; } } /* ikony u Práce/Osobní až na širokém displeji — v hlavičce je od 28. 10. i 💬 (na iPhonu se lišta nevešla) */ @media (max-width: 359px) { .seg-oblast .seg-b { padding: 6px 8px; font-size: 13px; } .hl-brand small { display: none; } } .seg:not(.seg-oblast) { display: flex; width: 100%; } .seg:not(.seg-oblast) .seg-b { flex: 1; justify-content: center; padding: 6px 6px; font-size: 14px; } .seg-druh .seg-b { font-size: 15px; } .seg-mini { width: auto !important; display: inline-flex !important; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-family: var(--font-cond); font-weight: 600; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } .btn .ik { width: 18px; height: 18px; } .btn.primary { background: var(--accent-fill); border-color: transparent; color: var(--on-accent); } .btn.quiet { background: transparent; border-color: var(--line); color: var(--muted); } .btn.danger { background: var(--bad-soft); border-color: transparent; color: var(--bad); } .btn.sm { min-height: 36px; padding: 4px 12px; font-size: 14px; } .btn:active { transform: scale(.98); } .ikb { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); display: grid; place-items: center; cursor: pointer; } .ikb.on, .ikb.mic.on { color: var(--on-accent); background: var(--accent-fill); } .in, .ta { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text); font: 15px/1.4 var(--font-body); outline: none; } .in:focus, .ta:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .in-big { font-family: var(--font-display); font-weight: 700; font-size: 20px; min-height: 52px; } .ta { resize: vertical; } .ta-big { min-height: 120px; } select.in { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; } input[type=date].in, input[type=time].in { min-width: 0; } .pole { display: flex; flex-direction: column; gap: 5px; margin: 10px 0 0; min-width: 0; } .pole-l { font-family: var(--font-cond); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .pole-h { font-size: 12px; color: var(--muted-2); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } @media (max-width: 359px) { .grid3 { grid-template-columns: 1fr 1fr; } .grid2 { grid-template-columns: 1fr; } } .sw { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 13px; background: var(--surface-3); border: 1px solid var(--line-strong); position: relative; cursor: pointer; flex: none; margin: 0; } .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: .15s; } .sw:checked { background: var(--accent-2); border-color: transparent; } .sw:checked::after { left: 21px; background: var(--on-accent-2); } .chk-row { margin-top: 12px; gap: 12px; } .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .acts.quiet { margin-top: 14px; } .chips { display: flex; gap: 6px; flex-wrap: wrap; min-height: 28px; margin: 8px 0 10px; } .chip { font-family: var(--font-cond); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); } .chip.ghost { background: var(--surface-2); color: var(--muted); text-transform: none; font-family: var(--font-body); font-weight: 400; } .pridej-in { display: flex; gap: 8px; align-items: flex-start; } .pridej-in .ta { flex: 1; min-height: 64px; font-size: 17px; } .pridej-in .mic { width: 52px; height: 64px; } .hledej { margin: 0 0 10px; } /* ---------- Karty, sekce, seznamy ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; min-width: 0; } .card.list { padding: 4px 0; } .sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 8px; } .sec-h h2 { font-family: var(--font-cond); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; } .w-hlavni + .widget .sec-h h2, .sec-h.main h2 { color: var(--accent-ink); } /* hlavní sekce limetkově, ostatní tlumeně */ .widget:first-of-type .sec-h, .obr > .sec-h:first-child { margin-top: 4px; } .pill { font-family: var(--font-cond); font-weight: 600; font-size: 13px; letter-spacing: .04em; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--surface-3); color: var(--text); display: inline-grid; place-items: center; } .pill.bad { background: var(--bad-soft); color: var(--bad); } .row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: transparent; width: 100%; text-align: left; color: inherit; cursor: pointer; min-width: 0; } .row + .row { border-top: 1px solid var(--line); } .row-m { flex: 1; min-width: 0; } .row-t { font-weight: 600; overflow-wrap: anywhere; } .row-d { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; } .row > .ik:last-child { color: var(--muted-2); } .icb { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); flex: none; } .icb .ik { width: 20px; height: 20px; } .icb-ukoly { color: var(--c-hovor); background: var(--ok-soft); } .icb-poznamky { color: var(--c-tren); background: var(--warn-soft); } .icb-kalendar { color: var(--c-klub); background: var(--c-klub-soft); } details.sekce { margin-top: 16px; } details.sekce > summary { list-style: none; cursor: pointer; font-family: var(--font-cond); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-height: 32px; } details.sekce > summary::-webkit-details-marker { display: none; } details.sekce > summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: .15s; margin-right: 2px; } details.sekce[open] > summary::before { transform: rotate(45deg); } .den-h { font-family: var(--font-cond); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; margin: 18px 0 8px; } .prazdno { text-align: center; padding: 28px 16px; color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r); display: flex; flex-direction: column; align-items: center; gap: 8px; } .prazdno .ik { width: 32px; height: 32px; color: var(--accent-ink); opacity: .8; } .prazdno p { margin: 0; max-width: 32ch; } .banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; margin: 10px 0; background: var(--surface-2); color: var(--text); } .banner.bad { background: var(--bad-soft); color: var(--bad); } .banner.bad b { color: var(--bad); } .banner.warn { background: var(--warn-soft); color: var(--warn); } .banner.warn b { color: var(--warn); } .banner .ik:first-child { flex: none; } .banner > div { flex: 1; min-width: 0; } .kostra .k { height: 56px; border-radius: var(--r); background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: kost 1.2s infinite; margin-bottom: 12px; } .kostra .k-h { height: 120px; } .kostra .k-s { height: 36px; width: 60%; } @keyframes kost { to { background-position: -200% 0; } } .podzalozky { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; } .podzalozky a { padding: 6px 12px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-family: var(--font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .podzalozky a.on { background: var(--accent-soft); color: var(--accent-ink); } .vyr-pozn { margin-top: 20px; } /* ---------- Dnes ---------- */ .hero { margin: 4px 0 14px; } .hero-k { margin: 0 0 2px; font-family: var(--font-cond); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; } .hero h1 { font-size: 28px; line-height: 1.1; font-weight: 700; } @media (min-width: 420px) { .hero h1 { font-size: 30px; } } /* hlavní úkol dne = velká karta celá vyplněná limetkou, tmavý text; Hotovo = tmavé tlačítko s limetkovým textem */ .hero-card { position: relative; border-radius: var(--r-lg); padding: 20px; background: var(--accent-fill); background-image: var(--accent-grad); color: var(--on-accent); border: 0; cursor: pointer; overflow: hidden; } .hero-card.empty { cursor: default; background: var(--surface); background-image: none; color: var(--text); border: 1px dashed var(--line-strong); } .hero-card .hero-k { color: inherit; opacity: .78; } .hero-card.empty .hero-k { color: var(--accent-ink); opacity: 1; } .hero-t { font-size: 25px; line-height: 1.15; font-weight: 700; margin: 8px 0 4px; overflow-wrap: anywhere; } .hero-p { margin: 4px 0 0; color: inherit; opacity: .8; overflow-wrap: anywhere; } .hero-m { margin-top: 8px; font-family: var(--font-cond); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: inherit; } .hero-card .acts { margin-top: 16px; } .hero-card .btn.primary { background: var(--hero-btn); color: var(--hero-btn-ink); } .hero-card .btn.quiet { color: inherit; border-color: currentColor; opacity: .85; } .hero-card.empty .btn.primary { background: var(--accent-fill); color: var(--on-accent); } .hero-card.empty p { margin: 6px 0 12px; color: var(--muted); } .widget { min-width: 0; } /* úkol v seznamu */ .task { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-width: 0; cursor: pointer; } .task + .task { border-top: 1px solid var(--line); } .task.slot { color: var(--muted); border: 0; background: transparent; width: 100%; font-family: var(--font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; min-height: 48px; } .task.slot .ik { width: 22px; height: 22px; margin-left: 4px; margin-right: 4px; } .chk { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-strong); background: transparent; color: transparent; display: grid; place-items: center; flex: none; cursor: pointer; } .chk .ik { width: 18px; height: 18px; stroke-width: 2.6; } .task.prio-main .chk, .task.prio-top3 .chk { border-color: var(--accent); } .task.done .chk { background: var(--accent-2); border-color: transparent; color: var(--on-accent-2); } .task.done .task-t { text-decoration: line-through; color: var(--muted); } .task-m { flex: 1; min-width: 0; } .task-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* balík B2: jednořádková karta — celý název je v okně úkolu */ .task-hover { display: none; flex: none; gap: 2px; } @media (hover: hover) and (pointer: fine) { .task:hover .task-hover, .task:focus-within .task-hover { display: inline-flex; } .task:hover .tag { display: none; } } .task-d { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; font-size: 13px; color: var(--muted); font-family: var(--font-cond); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .tag { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; } .tag .ik { width: 15px; height: 15px; } .tag-main, .tag-top { background: var(--accent-soft); color: var(--accent-ink); } /* 3 důležité: každý úkol = vlastní karta (barva karty, radius 16) */ .w-top3 .card.list { background: transparent; border: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .w-top3 .task { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; } .w-top3 .task.slot { border-style: dashed; border-color: var(--line-strong); } /* poznámka */ .note { padding: 12px 14px; cursor: pointer; min-width: 0; } .note + .note { border-top: 1px solid var(--line); } .note-t { font-weight: 600; overflow-wrap: anywhere; display: flex; gap: 6px; align-items: flex-start; } .note-t .ik { color: var(--warn); margin-top: 3px; } .note-d { color: var(--muted); font-size: 14px; margin-top: 2px; overflow-wrap: anywhere; } .note-k { font-family: var(--font-cond); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); margin-top: 4px; } .note.done .note-t { color: var(--muted); } /* událost */ .ev { display: flex; gap: 12px; padding: 10px 14px; align-items: flex-start; border-left: 3px solid var(--c-ukol); } .ev + .ev { border-top: 1px solid var(--line); } .ev-hovor { border-left-color: var(--c-hovor); } .ev-klub { border-left-color: var(--c-klub); } .ev-tren { border-left-color: var(--c-tren); } .ev-osobni { border-left-color: var(--c-osobni); } .ev-c { font-family: var(--font-cond); font-weight: 600; font-size: 16px; letter-spacing: .02em; min-width: 46px; line-height: 1.2; font-variant-numeric: tabular-nums; } .ev-m { flex: 1; min-width: 0; } .ev-t { font-weight: 600; overflow-wrap: anywhere; } .ev-d { font-size: 13px; color: var(--muted); } .ev.done .ev-t { text-decoration: line-through; color: var(--muted); } .ev[data-task] { cursor: pointer; } /* Vyřídit */ .feed { display: flex; flex-direction: column; gap: 10px; } .hot-item { display: flex; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; min-width: 0; } .hot-m { flex: 1; min-width: 0; } .hot-t { font-weight: 600; overflow-wrap: anywhere; } .hot-d { font-size: 13px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; } .hot-a { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; } .hot-k { margin-left: auto; font-family: var(--font-cond); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); } .pill-btn { min-height: 32px; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-family: var(--font-cond); font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; } .pill-btn.primary { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; } .pill-btn.quiet { background: transparent; color: var(--muted); } .odlozene { margin-top: 18px; } .odlozene > summary { cursor: pointer; color: var(--muted); font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 8px; } /* ---------- Okno zespodu ---------- */ .sheet-bg { position: fixed; left: 0; right: 0; top: var(--vvt, 0px); height: var(--vvh, 100dvh); z-index: 50; background: var(--overlay); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .16s; } .sheet-bg.in { opacity: 1; } .sheet-bg.out { opacity: 0; } .sheet { width: 100%; max-height: calc(var(--vvh, 100dvh) - 24px - var(--sa-t)); background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; display: flex; flex-direction: column; transform: translateY(24px); transition: transform .18s; box-shadow: var(--shadow); min-width: 0; } .sheet-bg.in .sheet { transform: none; } .sheet-h { display: flex; align-items: center; gap: 10px; padding: 6px 12px 0 16px; position: relative; } .sheet-grip { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 44px; height: 5px; border-radius: 3px; background: var(--line-strong); } .sheet-h h3 { flex: 1; font-size: 22px; font-weight: 700; padding-top: 16px; } .sheet-ulozeno { flex: 0 1 auto; min-width: 0; max-width: 55%; padding-top: 16px; font-size: 13px; color: var(--accent-ink); opacity: 0; transition: opacity .2s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sheet-ulozeno.vid { opacity: 1; } /* 💾 Uloženo v okně úkolu (balík A4) */ .sheet-x { width: 40px; height: 40px; margin-top: 8px; border: 0; background: transparent; } .sheet-b { padding: 8px 16px 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; } .sheet-f { display: flex; gap: 8px; padding: 10px 16px calc(12px + var(--sa-b)); border-top: 1px solid var(--line); } .kb-open .sheet-f { padding-bottom: 12px; } /* klávesnice otevřená: safe-area je pod ní */ .sheet-f .btn { flex: 1; } .sheet-f .btn.danger, .sheet-f .btn.quiet { flex: 0 0 auto; } .sheet-f { flex-wrap: wrap; } .sheet-f:has(> .btn:nth-child(3)) .btn.primary { flex-basis: 100%; } /* tři a víc tlačítek (mail: Zamítnout · Upravit · Schválit) = hlavní na celou šířku pod nimi */ .sheet-p { margin: 8px 0; font-size: 16px; } @media (min-width: 700px) { .sheet-bg { align-items: center; padding: 24px; } .sheet { max-width: 560px; border-radius: var(--r-xl); border-bottom: 1px solid var(--line); max-height: calc(100dvh - 48px); } .sheet-f { padding-bottom: 12px; } } /* toast */ #toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--sa-b) + 14px); transform: translate(-50%, 20px); z-index: 60; background: var(--surface-3); color: var(--text); border: 1px solid var(--line-strong); padding: 10px 16px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: .18s; max-width: calc(100% - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow); } #toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } #toast.top { bottom: auto; top: calc(var(--sa-t) + 12px); } .toast-a { border: 0; background: transparent; color: var(--accent-ink); font-family: var(--font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-left: 8px; cursor: pointer; } /* ---------- Kalendář (fáze 2) ---------- */ .kal-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 8px; } .kal-top .seg { width: auto; flex: 1 1 240px; } .kal-nav { display: flex; gap: 6px; align-items: center; } .kal-nav .ikb { width: 40px; height: 40px; } .ik.flip { transform: scaleX(-1); } .kal-titul { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; } .kal-titul h2 { font-size: 20px; font-weight: 700; } .kal-stav { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; } .kal-stav .lnk { font-size: 13px; } button.lnk { background: none; border: 0; padding: 0 2px; cursor: pointer; } /* „Obnovit" u stavu Googlu bylo šedé tlačítko prohlížeče */ .kal-chip { align-items: center; } .kal-chip .btn { flex: none; } .kal-allday, .kal-grid { display: grid; grid-template-columns: 44px repeat(var(--cols), minmax(0, 1fr)); } .kal-allday { border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; background: var(--surface); overflow: hidden; } .kal-adcell { padding: 6px 4px 4px; border-left: 1px solid var(--line); min-width: 0; } .kal-dh { font-family: var(--font-cond); font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; } .kal-dh small { font-weight: 600; color: var(--muted-2); } .kal-dh.dnes { color: var(--accent-ink); } .kal-grid { position: relative; overflow-y: auto; border: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); background: var(--surface); -webkit-overflow-scrolling: touch; } .kal-gutter { position: relative; } .kal-h { position: absolute; right: 6px; transform: translateY(-50%); font-family: var(--font-cond); font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; } .kal-col { position: relative; border-left: 1px solid var(--line); min-width: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 52px; } .kal-col.cil { background-color: var(--accent-soft); } .kal-slot { position: absolute; left: 0; right: 0; height: 26px; } .kal-ted { position: absolute; left: 0; right: 0; height: 2px; background: var(--bad); z-index: 3; pointer-events: none; } .kal-ted::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); } .kal-blok { position: absolute; z-index: 2; border-radius: 8px; padding: 3px 6px; overflow: hidden; cursor: pointer; background: color-mix(in srgb, var(--ev, var(--c-ukol)) 22%, var(--surface)); border-left: 3px solid var(--ev, var(--c-ukol)); color: var(--text); font-size: 12px; line-height: 1.25; user-select: none; -webkit-user-select: none; touch-action: pan-y; } .kal-blok.kind-klient, .kal-ev.kind-klient, .mes-ev.kind-klient, .sez-item.kind-klient { --ev: var(--c-tren); } .kal-blok.kind-hovor { --ev: var(--c-hovor); } .kal-blok.kind-klub { --ev: var(--c-klub); } .kal-blok.kind-ukol { --ev: var(--c-ukol); } .kal-blok.free { border-left-style: dashed; opacity: .8; } .kal-blok.done .kb-t { text-decoration: line-through; color: var(--muted); } .kal-blok.drag-ready { box-shadow: var(--glow); } .kal-blok.dragging { opacity: .4; } .kb-t { font-weight: 600; overflow-wrap: anywhere; } .kb-c { color: var(--muted); font-family: var(--font-cond); font-size: 12px; } .kal-ghost { position: fixed; z-index: 70; pointer-events: none; width: 140px; opacity: .92; box-shadow: var(--shadow); } .kal-ev { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 4px 0; border-radius: 8px; background: color-mix(in srgb, var(--ev, var(--c-ukol)) 18%, var(--surface)); border-left: 3px solid var(--ev, var(--c-ukol)); font-size: 13px; cursor: pointer; overflow-wrap: anywhere; min-width: 0; } .kal-ev.ad { margin: 2px 0; padding: 3px 6px; font-size: 12px; } .kal-ev.kind-hovor { --ev: var(--c-hovor); } .kal-ev.kind-klub { --ev: var(--c-klub); } .kal-ev.done { text-decoration: line-through; color: var(--muted); } .kal-ev-c { font-family: var(--font-cond); font-weight: 600; min-width: 44px; font-variant-numeric: tabular-nums; } .kal-bez { display: flex; flex-wrap: wrap; gap: 8px; } .kal-chipuk { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-strong); font-size: 14px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; max-width: 100%; } .kal-chipuk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kal-chipuk small { color: var(--muted); font-family: var(--font-cond); } .kal-chipuk.drag-ready { box-shadow: var(--glow); } .kal-chipuk.dragging { opacity: .4; } .kal-tyden { display: flex; flex-direction: column; gap: 10px; } .kal-tden { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; min-width: 0; } .kal-volno { padding: 4px 0; } @media (min-width: 900px) { .kal-tyden { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } } .kal-mes { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; } .mes-hl, .mes-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; } .mes-hl span { text-align: center; font-family: var(--font-cond); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 2px 0 6px; } .mes-den { border: 0; background: var(--surface-2); border-radius: 8px; min-height: 64px; padding: 4px; text-align: left; color: var(--text); display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; } .mes-den.jiny { opacity: .45; } .mes-den.dnes .mes-c { background: var(--accent-fill); color: var(--on-accent); } .mes-c { font-family: var(--font-cond); font-weight: 600; font-size: 13px; width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; } .mes-ev { font-size: 10px; line-height: 1.2; padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, var(--ev, var(--c-ukol)) 24%, var(--surface)); border-left: 2px solid var(--ev, var(--c-ukol)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mes-ev.kind-hovor { --ev: var(--c-hovor); } .mes-ev.kind-klub { --ev: var(--c-klub); } .mes-vic { font-size: 10px; color: var(--muted); } @media (max-width: 359px) { .mes-den { min-height: 52px; } .mes-ev { font-size: 0; height: 5px; padding: 0; border-radius: 3px; border-left-width: 0; background: var(--ev, var(--c-ukol)); } .mes-vic { display: block; } } /* 320 px: události jako barevné proužky — jdou dál táhnout */ .kal-tecka { width: 12px; height: 12px; border-radius: 50%; background: var(--ev); flex: none; } .ev-detail p { margin: 8px 0 0; white-space: pre-wrap; } .ev-klik { cursor: pointer; } /* ---------- Editor s čipy (Todoist / Things): úkol, událost, poznámka, rychlý zápis ---------- */ .panel { display: flex; flex-direction: column; gap: var(--s1); } .in-nazev { width: 100%; min-height: 52px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.25; outline: none; border-radius: 0; } .in-nazev:focus { border-bottom-color: var(--accent); } .in-nazev::placeholder, .in-popis::placeholder { color: var(--muted-2); font-weight: 600; } .in-popis { width: 100%; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--text); font: 15px/1.45 var(--font-body); resize: vertical; outline: none; border-radius: 0; } .in-popis::placeholder { font-weight: 400; } .chips-row { display: flex; gap: var(--s1); overflow-x: auto; overflow-y: hidden; padding: 4px 0 6px; margin: 0 calc(-1 * var(--s2)); padding-left: var(--s2); padding-right: var(--s2); scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .chips-row::-webkit-scrollbar { display: none; } .chip-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--field-h); padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--muted); font-family: var(--font-cond); font-weight: 600; font-size: 15px; letter-spacing: .03em; cursor: pointer; max-width: 60vw; scroll-snap-align: start; } .chip-btn .chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-btn.on { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--line-strong); } .chip-btn.active { box-shadow: 0 0 0 2px var(--accent); } .pick-slot { display: none; } .pick-slot.open { display: block; } .pick { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s1) var(--s2) var(--s2); } .pick-h { display: flex; align-items: center; gap: 6px; font-family: var(--font-cond); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s1); } .pick-h span { flex: 1; } .pick-h .ikb.sm { width: 36px; height: 36px; border: 0; background: transparent; } .pick-volby { display: flex; flex-wrap: wrap; gap: var(--s1); } .pick-b { display: inline-flex; align-items: center; gap: 6px; height: var(--field-h); padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: 15px var(--font-body); cursor: pointer; max-width: 100%; } .pick-b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pick-b.on { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; } .pick-vlastni { display: flex; gap: var(--s1); align-items: center; margin-top: var(--s1); } .pick-vlastni .in { flex: 1; min-width: 0; height: var(--field-h); min-height: var(--field-h); } .pick-j { color: var(--muted); font-family: var(--font-cond); } /* jednotné výšky polí v celé appce */ .in, select.in, .btn, .ikb { min-height: var(--field-h); } .seg-b { min-height: 36px; } .pridej-pod { display: flex; align-items: center; gap: var(--s1); justify-content: space-between; } .pridej-pod .mic { width: var(--field-h); height: var(--field-h); } .in-popis.velky { min-height: 120px; font-size: 16px; } /* David 30. 10. 2026: název a poznámka rostou s textem; okno jde zvětšit tlačítkem v hlavičce (.sheet-velke) */ textarea.in-nazev.roste { display: block; resize: none; overflow: hidden; min-height: 52px; } .in-popis.roste { resize: none; overflow-y: auto; max-height: calc(var(--vvh, 100dvh) * .4); } .sheet-h .sheet-velikost { margin-right: -6px; } .sheet.sheet-velke { height: calc(var(--vvh, 100dvh) - 24px - var(--sa-t)); } .sheet-velke .sheet-b { flex: 1 1 auto; } .sheet-velke .in-popis.roste { max-height: none; min-height: calc(var(--vvh, 100dvh) * .35); } @media (min-width: 700px) { .sheet.sheet-velke { max-width: 960px; height: calc(100dvh - 48px); } } /* Zaškrtávací seznam v úkolu (David 30. 10. 2026, fáze 1 vylepšení úkolů) */ /* 🃏 Roztřídit nestihnuté (balík C2) — celá obrazovka, pod okny (50) a toastem (60) */ .rzt { position: fixed; inset: 0; z-index: 45; background: var(--bg); display: flex; flex-direction: column; padding: calc(var(--sa-t) + 8px) 16px calc(var(--sa-b) + 16px); overflow: hidden; } .rzt-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; } .rzt-pocet { font-family: var(--font-cond); font-weight: 700; font-size: 18px; letter-spacing: .06em; } .rzt-plocha { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; } .rzt-karta { position: relative; z-index: 2; width: 100%; max-width: 440px; min-height: 220px; padding: 22px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; display: flex; flex-direction: column; gap: 10px; } .rzt-k-t { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; } .rzt-k-p { color: var(--muted); overflow-wrap: anywhere; } .rzt-k-m { display: flex; flex-wrap: wrap; gap: 6px; } .rzt-k-m span { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13px; color: var(--muted); } .rzt-k-tip { margin-top: auto; } .rzt-stopa { position: absolute; z-index: 1; padding: 10px 16px; border-radius: 999px; font-family: var(--font-cond); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity .12s; background: var(--surface-2); color: var(--muted); } .rzt-stopa.vid { opacity: 1; background: var(--accent-2); color: var(--on-accent-2); } .rzt-s-dnes { right: 0; top: 50%; } .rzt-s-jiny { left: 0; top: 50%; } .rzt-s-hotovo { top: 4px; left: 50%; transform: translateX(-50%); } .rzt-s-smazat { bottom: 4px; left: 50%; transform: translateX(-50%); } .rzt-s-smazat.vid { background: var(--bad-soft); color: var(--bad); } .rzt-akce { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-top: 12px; } .rzt-akce .btn { flex: 1 1 40%; justify-content: center; min-height: 48px; } .rzt-konec { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; } .rzt-konec-ik { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-2); color: var(--on-accent-2); } .rzt-konec-ik .ik { width: 36px; height: 36px; } .sekce > summary .sekce-akce { margin-left: auto; min-height: 32px; padding: 4px 12px; } @media (min-width: 768px) { .rzt { padding-left: calc(var(--rail) + 24px); } .rzt-akce .btn { flex: 0 1 auto; } } /* 🤝 Až potkám (David 1. 11. 2026) */ .potkam-skupina { margin: 0 0 10px; } .potkam-h { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 4px 4px 2px; border: 0; background: none; color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; } .potkam-h > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .potkam-h > .ik { flex: none; color: var(--accent-ink); } .potkam-h:disabled { cursor: default; } .potkam-osoba { margin: 0 0 12px; padding: 10px; border: 2px solid var(--accent-2); border-radius: var(--r); background: var(--accent-soft); } .potkam-osoba-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .potkam-osoba.prazdna { border-width: 1px; border-color: var(--line); background: var(--surface-2); } .potkam-osoba-a { display: flex; gap: 6px; flex-wrap: wrap; } .potkam-osoba-prazdno { margin: 0; } .potkam-setkani { margin: 8px 2px 0; } .potkam-setkani[hidden], .potkam-setkani:empty { display: none; } .potkam-ted { display: flex; flex-direction: column; gap: 4px; } .potkam-ted-r { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 4px; border-bottom: 1px solid var(--line); cursor: pointer; } .potkam-ted-r input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--accent); } .potkam-ted-r span { min-width: 0; overflow-wrap: anywhere; } .potkam-ted-r small { display: block; color: var(--muted); } .potkam-dnes { margin: 0 0 12px; padding: 10px; border: 2px solid var(--accent-2); } .potkam-dnes-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 2px 2px 8px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .potkam-dnes-h > .ik { flex: none; color: var(--accent-ink); } .potkam-dnes-h span { min-width: 0; } .potkam-dnes-h small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lide-q { width: 100%; margin: 0 0 12px; } .lide-r .row-m { min-width: 0; } .potkam-pill { flex: none; background: var(--accent-2); color: var(--on-accent-2); } .lide-novy { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .lide-novy[hidden] { display: none; } /* 🗂 stavy a nástěnka úkolů (fáze 8, David 1. 11. 2026) — telefon: jeden sloupec na šířku + záložky, širší: sloupce vedle sebe */ .nst-prep { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; } .nst-prep .seg.nst-seg { width: auto; flex: 0 0 auto; display: inline-flex; } .nst-prep .seg.nst-seg .seg-b { flex: none; padding: 6px 14px; } .nst-sesk { display: flex; align-items: center; gap: 6px; margin-left: auto; } .nst-sesk .in { width: auto; min-width: 120px; } .nst-prep [data-nst-sloupce] { margin-left: auto; } .nst { margin: 0 0 12px; } .nst-taby { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 0; position: sticky; top: calc(var(--hl-h) + var(--sa-t)); z-index: 6; background: var(--bg); } /* lepí nahoře: karta se dá přetáhnout na záložku, i když je seznam dlouhý */ .nst-taby::-webkit-scrollbar { display: none; } .nst-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--muted); font-family: var(--font-cond); font-weight: 600; font-size: 15px; cursor: pointer; } .nst-tab.on { background: var(--accent-soft); color: var(--accent-ink); } .nst-tab.nst-cil, .nst-sl.nst-cil { box-shadow: 0 0 0 2px var(--accent); } .nst .chip-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-3); color: var(--text); font-size: 12px; line-height: 20px; text-align: center; font-weight: 700; } .nst-sloupce { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; } .nst-sl { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; align-self: flex-start; } .nst-sl-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-cond); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 2px 2px 0; } .nst-karty { display: flex; flex-direction: column; gap: 8px; min-height: 44px; } .nst-k { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 52px 10px 12px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .nst-k.prio-main { border-left: 3px solid var(--accent); } .nst-k.prio-top3 { border-left: 3px solid var(--accent-2); } .nst-k.done .nst-kt { text-decoration: line-through; color: var(--muted); } .nst-kt { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } .nst-km { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 13px; color: var(--muted); } .nst-km > span { display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nst-km .ik { width: 13px; height: 13px; flex: none; } .nst-term.po { color: var(--bad); } .nst-ceka { color: var(--accent-ink); } .nst-kx { position: absolute; top: 4px; right: 4px; } .nst-puvodni { opacity: .35; } .nst-duch { position: fixed; z-index: 1000; pointer-events: none; box-shadow: var(--shadow); transform: translate3d(0, 0, 0); opacity: .95; } .nst-prazdno { margin: 4px 2px; } .nst-novy { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 1px dashed var(--line-strong); border-radius: 12px; background: none; color: var(--muted); font: inherit; cursor: pointer; } .nst-hotovo > summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 4px 2px; } .nst-hotovo[open] > summary { margin-bottom: 8px; } .nst-skryto { margin: 6px 2px 0; } .nst-spr { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; } .nst-spr-r { display: flex; align-items: center; gap: 4px; min-width: 0; } .nst-spr-r .in { flex: 1 1 auto; min-width: 0; } .nst-spr-uk { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 44px; } .nst-spr-pozn { flex: none; width: 64px; text-align: center; } @media (min-width: 768px) { main#view:has(.nst-sloupce) { max-width: 1240px; } .nst-taby { display: none; } .nst-sloupce { scroll-snap-type: none; } .nst-sl { flex: 1 0 240px; max-width: 360px; align-self: stretch; } /* pustit jde kamkoli do sloupce, i pod poslední kartu */ } /* 🔗 Souvisí (fáze 7 úkolů, David 1. 11. 2026) */ .souvisi { margin: 10px 0 6px; } .souvisi-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; } .souvisi-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); overflow: hidden; } .souvisi-r { display: flex; align-items: center; min-width: 0; border-bottom: 1px solid var(--line); } .souvisi-r:last-child { border-bottom: 0; } .souvisi-o { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 4px 6px 12px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .souvisi-o > .ik { flex: none; color: var(--accent-ink); } .souvisi-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .souvisi-o small { flex: none; } .souvisi-x { flex: none; margin-right: 4px; } .souvisi-prazdno { margin: 2px 0 0; } .proj-souvisi { margin: 4px 0 16px; } .sez { margin: 6px 0 8px; } .sez-h { display: flex; align-items: center; gap: 8px; min-height: 28px; } .sez-list { display: flex; flex-direction: column; } .sez-pol { display: flex; align-items: flex-start; gap: 6px; min-height: 44px; padding: 3px 0; border-bottom: 1px solid var(--line); background: var(--surface); } .sez-pol.tazena { box-shadow: var(--shadow); border-radius: 12px; position: relative; z-index: 2; } .sez-grip { flex: none; width: 24px; height: 38px; display: grid; place-items: center; color: var(--muted-2); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } .sez-grip .ik { width: 18px; height: 18px; } .sez-pol.tazena .sez-grip { cursor: grabbing; color: var(--accent-ink); } .sez-chk { width: 26px; height: 26px; margin-top: 6px; } .sez-chk .ik { width: 15px; height: 15px; } .sez-t { flex: 1; min-width: 0; min-height: 38px; padding: 8px 0; border: 0; background: transparent; color: var(--text); font: 15px/1.4 var(--font-body); resize: none; overflow: hidden; outline: none; border-radius: 0; } .sez-t::placeholder { color: var(--muted-2); } .sez-pol.done .sez-t { color: var(--muted); text-decoration: line-through; } .sez-menu.ikb.sm { width: 36px; height: 38px; border: 0; background: transparent; flex: none; } .sez-pridat { border-bottom: 0; } .sez-plus { flex: none; width: 56px; height: 38px; display: grid; place-items: center; color: var(--muted); } .sez-plus .ik { width: 18px; height: 18px; } .sez-menu-akce { margin-top: 4px; } .task-sez { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; letter-spacing: .02em; } .task-sez .ik { width: 13px; height: 13px; stroke-width: 2.6; } .task-sez.vse { color: var(--accent-ink); } .sez.kompaktni { margin: 2px 0 2px; } /* okno Přidat: jen řádek „+ Přidat do seznamu", nadpis až s první položkou */ .sez-ulozene { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 3px 10px; } @media (max-width: 359px) { .sez-ulozene span { display: none; } .sez-ulozene { padding: 3px 9px; } } /* 320 px: jen ikona, ať zbyde místo na psaní */ .ul-ulozit { margin: 4px 0 12px; } .ul-list .row > .ik:last-child { color: var(--accent-ink); flex: none; } textarea.ul-polozky { min-height: 180px; resize: vertical; } /* 🗂 Projekty (fáze 2 úkolů, David 30. 10. 2026) */ .proj-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .proj-karta { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: inherit; text-decoration: none; min-width: 0; } .proj-karta > .ik:last-child { color: var(--muted-2); flex: none; } .proj-karta.hotovy { opacity: .75; } .proj-ik { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); } .proj-ik.barva { background: color-mix(in srgb, var(--ev) 22%, transparent); color: var(--ev); box-shadow: inset 0 0 0 2px var(--ev); } .proj-emoji { font-size: 21px; line-height: 1; } .proj-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .proj-t { font-weight: 700; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .proj-d { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .proj-lista { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 4px; } .proj-lista > span { display: block; height: 100%; background: var(--accent-2); border-radius: 3px; } .zpet-odkaz { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; color: var(--accent-ink); text-decoration: none; font-weight: 600; margin: 0 0 4px -4px; } .zpet-odkaz .ik { width: 18px; height: 18px; } .proj-hlava { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; } .proj-hlava .proj-ik { width: 48px; height: 48px; } .proj-hlava .proj-d { -webkit-line-clamp: 3; } .proj-nazev { font-family: var(--font-display); font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; } .proj-prazdno { margin: 4px 2px 12px; } .proj-emoji-volby { display: flex; flex-wrap: wrap; gap: 6px; } .proj-emoji-b { font-size: 18px; padding: 3px 10px; text-transform: none; } .proj-barvy { display: flex; flex-wrap: wrap; gap: 8px; } .proj-barva { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); background: var(--ev); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; } .proj-barva.zadna { background: var(--surface-2); } .proj-barva.on { box-shadow: 0 0 0 3px var(--accent); } .proj-prevod { flex-wrap: wrap; } .proj-prevod > span { flex: 1 1 200px; } .proj-prevod > .proj-prevod-a { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; } .proj-prevod-r { padding: 10px 0; border-bottom: 1px solid var(--line); } .proj-prevod-h { display: flex; align-items: center; gap: 10px; } .proj-prevod-h > span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .proj-prevod-p { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; } @media (min-width: 520px) { .proj-prevod-p { grid-template-columns: 1fr 1fr; } } .proj-odkaz .proj-ik { width: 24px; height: 24px; border-radius: 7px; } .proj-odkaz .proj-emoji { font-size: 14px; } .proj-odkaz .proj-ik .ik { width: 13px; height: 13px; } /* fáze 3: Kalendář, Poznámky a Lidé na stránce projektu, připnutí na Dnes (31. 10. 2026) */ .proj-hlava-a { display: flex; flex-direction: column; gap: 6px; flex: none; } .proj-kal .row { align-items: center; } .proj-kal .row-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .proj-kal .row-t { overflow-wrap: anywhere; } .proj-kal .row-d { font-size: 13px; color: var(--muted); } .proj-kal-den { flex: none; width: 74px; display: flex; flex-direction: column; line-height: 1.25; } .proj-kal-den b { font-size: 14px; } .proj-kal-den small { font-size: 13px; color: var(--muted); } .proj-kal .row > .ik:last-child { color: var(--muted-2); flex: none; } .proj-lide { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .proj-clovek { position: relative; } .proj-clovek .osoba-karta { margin-top: 0; padding-right: 48px; } .proj-clovek-z { position: absolute; top: 12px; right: 14px; } .proj-clovek-x { position: absolute; top: 4px; right: 4px; border: 0; background: transparent; } /* ⛺ akce a režim akce (fáze 4 úkolů, 31. 10. 2026) */ .akce-sekce { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); } .akce-ukoly { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; max-height: 40vh; overflow-y: auto; } .akce-ukol { display: flex; align-items: center; gap: 10px; min-height: 40px; } .akce-ukol > span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .akce-kolize { padding: 8px 0; display: flex; flex-direction: column; gap: 6px; } .akce-kolize .seg { flex-wrap: wrap; } .seg.seg-sm { flex-wrap: wrap; } .seg.seg-sm .seg-b { padding-left: 10px; padding-right: 10px; } .akce-presun { display: flex; align-items: center; gap: 6px; } .akce-presun .in { width: auto; flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; } .akce-od-do { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .akce-od-do .in { min-width: 0; appearance: none; -webkit-appearance: none; } .akce-karta { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; border-color: var(--accent); } .akce-karta > .ik:last-child { color: var(--muted-2); flex: none; } .akce-k { font-family: var(--font-cond); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); } .akce-nezapomen .lnk { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; } .akce-dotaz { flex-wrap: wrap; } .akce-dotaz > div { flex: 1 1 180px; } .akce-blok { margin-bottom: 8px; } .akce-blok-h { display: flex; align-items: center; gap: 10px; } .akce-blok-h > div { flex: 1; min-width: 0; } .akce-stav { font-size: 14px; color: var(--muted); margin-top: 2px; } .akce-stav.on { color: var(--accent-ink); font-weight: 600; } .akce-kemp { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); } .akce-kemp summary { cursor: pointer; } /* 📋 program akce a Dnes na akci (fáze 5, 31. 10. 2026) */ .akce-program { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); } .ak-den { margin-top: 8px; } .ak-den-h { font-family: var(--font-cond); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 4px; } .ak-blok { width: 100%; display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; margin: 0 0 4px; border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; } .ak-cas { font-family: var(--font-cond); font-weight: 600; font-size: 14px; color: var(--muted); } .ak-t { min-width: 0; overflow-wrap: anywhere; font-weight: 600; } .ak-typ { font-family: var(--font-cond); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .ak-blok.ak-vedu { border-left-color: var(--accent); background: var(--accent-soft); } .ak-blok.ak-vedu .ak-typ { color: var(--accent-ink); font-weight: 700; } .ak-blok.ak-jidlo { border-left-color: var(--warn); } .ak-blok.ak-volno { border-left-style: dashed; background: transparent; } .ak-blok.ted { box-shadow: 0 0 0 2px var(--accent); } .ak-blok.ted .ak-cas { color: var(--accent-ink); } .ak-osa { padding: 8px; } .ak-volno-drob { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 8px 94px; } /* ≠ .ak-volno (typ bloku) — stejné jméno blok odsadilo mimo stránku */ .ak-drob { border: 0; background: var(--surface-2); color: var(--text); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 14px; cursor: pointer; text-align: left; } .ak-poz { margin: 12px 0; display: flex; flex-direction: column; gap: 6px; } .ak-poz textarea { resize: vertical; } .akce-prazdno { margin: 8px 2px 12px; } .akce-chyba { color: var(--bad); } /* 🔍 hledání a filtr úkolů (David 1. 11. 2026) — Vyřídit → Úkoly i obrazovka Úkoly */ .uk-filtr { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; } .uk-filtr-h { display: flex; align-items: center; gap: 6px; } .uk-rozbal { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: var(--field-h); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .uk-rozbal > .ik { flex: none; color: var(--muted); } .uk-rozbal-t { flex: none; font-weight: 600; } .uk-souhrn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent-ink); font-size: 14px; } .uk-rozbal .uk-sipka { margin-left: auto; transform: rotate(90deg); transition: transform .15s; } .uk-filtr.otevreno .uk-sipka { transform: rotate(-90deg); } .uk-filtr-telo { display: flex; flex-direction: column; gap: 8px; } .uk-filtr-telo[hidden] { display: none; } .uk-q { width: 100%; } .uk-pohledy { margin: 0; } .uk-dalsi { display: flex; gap: 8px; flex-wrap: wrap; } .uk-dalsi .in { flex: 1 1 140px; min-width: 0; width: auto; } .vyr-filtr .chip-n.bad, .vyr-filtr .chip-btn.on .chip-n.bad { background: var(--bad-soft); color: var(--bad); } .uk-den-h { font-family: var(--font-cond); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 12px 2px 6px; } .uk-r + .uk-r { border-top: 1px solid var(--line); } .uk-r .task { border-top: 0; } .uk-akce { display: flex; gap: 6px; padding: 0 14px 10px 56px; flex-wrap: wrap; } .banner.uk-zitra { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; } .banner.uk-zitra > div { flex: 1; } /* 🔁 návrat po akci (fáze 6) */ .akce-navrat { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .akce-navrat .pole-l { flex: 1 1 160px; } .akce-navrat .in { width: auto; min-width: 96px; } .akce-retro { margin-top: 10px; } .akce-retro summary { cursor: pointer; font-weight: 600; } .akce-po .acts { margin-top: 10px; flex-wrap: wrap; } .ak-roz { display: flex; align-items: center; gap: 8px; padding: 6px 0; } .ak-roz-t { flex: 1; min-width: 0; overflow-wrap: anywhere; } .ak-roz .in { width: auto; flex: none; max-width: 46%; } textarea.ak-retro { min-height: 200px; resize: vertical; } .akce-program code, .sheet-b code { white-space: normal; overflow-wrap: anywhere; } /* ukázkové řádky programu se zalomí (přetékaly na 375 px) */ textarea.ak-program { min-height: 170px; font-family: var(--font-body); resize: vertical; } @media (max-width: 359px) { .ak-blok { grid-template-columns: 84px 1fr; gap: 6px; } .ak-cas { font-size: 13px; } .ak-typ { display: none; } .ak-volno-drob { margin-left: 0; } } /* ---------- Kalendář 2 (podle Google / Notion) ---------- */ .kal-hl { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); margin-bottom: var(--s1); min-width: 0; } .kal-mes-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 28px; padding: 4px 0; cursor: pointer; min-height: var(--field-h); white-space: nowrap; } .kal-mes-btn .ik.rot { transform: rotate(90deg); transition: .15s; color: var(--muted); } .kal-mes-btn[aria-expanded="true"] .ik.rot { transform: rotate(-90deg); } .kal-hl-akce { display: flex; gap: 6px; align-items: center; flex: none; } .kal-hl-akce .ikb { width: 40px; height: 40px; min-height: 40px; font-size: 20px; line-height: 1; } .kal-pod { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 0; } .kal-hl ~ .banner.kal-chip { margin-bottom: 8px; } .kal-pod > .kal-stav, .kal-pod > .banner { margin: 0; flex: 1 1 auto; min-width: 0; } .kal-zoom { display: flex; gap: 4px; flex: none; } .kal-zoom .ikb { width: 34px; height: 34px; min-height: 34px; font-size: 18px; } /* − / + dole v řádku stavu (David 28. 10. 2026) */ @media (max-width: 359px) { .kal-sipka { display: none; } } @media (max-width: 479px) { .kal-stav-k { display: none; } } /* telefon: „Google · před chvílí" na jeden řádek */ /* 320 px: listování swipem, stav Googlu na jeden řádek */ /* 320 px: listování swipem */ .kal-hl-akce .btn.sm span { display: none; } @media (min-width: 420px) { .kal-hl-akce .btn.sm span { display: inline; } } .kal-dnes-btn span { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 5px; font-family: var(--font-cond); font-weight: 600; font-size: 12px; line-height: 1; } .seg-kalview { margin-bottom: var(--s1); } .seg-kalview .seg-b { padding: 6px 4px; font-size: 13px; } .mini { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s1) var(--s2) var(--s2); margin-bottom: var(--s1); } .mini-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .mini-h b { font-family: var(--font-cond); font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; } .mini-h .ikb.sm { width: 36px; height: 36px; min-height: 36px; border: 0; background: transparent; } .mini-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; } .mini-dh { text-align: center; font-family: var(--font-cond); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding-bottom: 2px; } .mini-den { position: relative; border: 0; background: transparent; color: var(--text); height: 36px; border-radius: 8px; font-family: var(--font-cond); font-size: 14px; cursor: pointer; } .mini-den.jiny { color: var(--muted-2); } .mini-den.dnes { color: var(--accent-ink); font-weight: 700; } .mini-den.vybrany { background: var(--accent-fill); color: var(--on-accent); } .mini-den i { position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: .7; } .kal-dh { flex-direction: column; align-items: center; gap: 0; line-height: 1.1; } .kal-dh-n { font-size: 12px; } .kal-dh-c { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); } .kal-dh.dnes .kal-dh-c { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent); } .kal-adcell { padding: 4px 2px; } .kal-col { background-size: 100% var(--pxh, 52px); } .kal-blok.maly .kb-c { display: none; } .kal-blok.maly { padding: 1px 6px; font-size: 11px; } .kb-h { position: absolute; left: 0; right: 0; height: 8px; cursor: ns-resize; z-index: 3; touch-action: none; } .kb-h.top { top: -2px; } .kb-h.bot { bottom: -2px; } .kb-h::after { content: ''; position: absolute; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 2px; background: var(--ev, var(--accent)); opacity: 0; transition: opacity .12s; } .kb-h.top::after { top: 2px; } .kb-h.bot::after { bottom: 2px; } .kal-blok:hover .kb-h::after, .kal-blok.drag-ready .kb-h::after, .kal-blok.dragging-live .kb-h::after { opacity: .9; } .kal-blok.dragging-live { z-index: 6; box-shadow: var(--shadow); opacity: .95; } .kal-tah-cas { position: absolute; z-index: 8; pointer-events: none; padding: 6px 13px; border-radius: 999px; background: var(--accent-fill); color: var(--on-accent); font-family: var(--font-cond); font-weight: 700; font-size: 18px; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: var(--shadow); } /* štítek nového času nad cílem („St 14:30–15:30") */ /* tažení (David 27. 10. 2026 večer): originál vybledne, duch jede pod prstem, cíl = rámeček v barvě události */ .kal-blok.kal-puvodni { opacity: .35; box-shadow: none; } .kal-blok.kal-puvodni .kb-h { display: none; } .kal-cil { position: absolute; left: 2px; right: 2px; z-index: 5; pointer-events: none; border: 2px solid var(--ev, var(--accent)); border-radius: 8px; background: color-mix(in srgb, var(--ev, var(--accent)) 16%, transparent); } .kal-cil.zpet { border-style: dashed; background: transparent; } .kal-blok.kal-duch, .kal-chipuk.kal-duch { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; opacity: .88; box-shadow: var(--shadow); will-change: transform; transition: none; } #kal-tah-schovka { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; } html.kal-tahne, html.kal-tahne * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; } html.kal-tahne-okraj, html.kal-tahne-okraj * { cursor: ns-resize !important; user-select: none; -webkit-user-select: none; } @media (hover: hover) and (pointer: fine) { .kal-blok[data-drag], .kal-ev.ad[data-drag] { cursor: move; } .kb-h { height: 10px; } .mes-c { cursor: pointer; } } /* telefon (David 4. 11. 2026): okraj jde chytit prstem a hned táhnout (zkrátit/prodloužit) — větší úchyt a vidět proužek; nízký blok (pod ~45 min) má jen tenký úchyt, jinak by úchyty zabraly celý blok */ @media (pointer: coarse) { .kal-blok[data-drag]:not(.nizky) .kb-h { height: 12px; } .kal-blok[data-drag]:not(.nizky) .kb-h.top { top: -4px; } .kal-blok[data-drag]:not(.nizky) .kb-h.bot { bottom: -4px; } .kal-blok[data-drag]:not(.nizky) .kb-h.top::after { top: 5px; } .kal-blok[data-drag]:not(.nizky) .kb-h.bot::after { bottom: 5px; } .kal-blok[data-drag]:not(.nizky) .kb-h::after { opacity: .45; } .kal-blok.nizky .kb-h { height: 8px; } /* nízký blok: úchyt jen tenký, ať jde blok chytit a posunout */ } .kal-blok, .kal-ev.ad[data-drag] { -webkit-touch-callout: none; } .kal-ev.ad[data-drag] { user-select: none; -webkit-user-select: none; touch-action: pan-y; } .kal-ghost-blok { z-index: 6; background: var(--accent-soft); border-left-color: var(--accent); box-shadow: var(--shadow); } .kal-grid.drag-ready { outline: 2px solid var(--accent-soft); } @media (max-width: 600px) { .kal-grid[style*="--cols:7"] .kb-c, .kal-grid[style*="--cols: 7"] .kb-c { display: none; } .kal-grid[style*="--cols:7"] .kal-blok { padding: 1px 3px; font-size: 10px; } .kal-allday[style*="--cols:7"] .kal-dh-n { font-size: 10px; } .kal-allday[style*="--cols:7"] .kal-ev.ad { font-size: 10px; padding: 1px 3px; } } .kal-seznam { display: flex; flex-direction: column; gap: var(--s1); } .sez-den { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s1); padding: var(--s1) 0; border-top: 1px solid var(--line); } .sez-dh { display: flex; flex-direction: column; align-items: center; padding-top: 4px; } .sez-c { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; } .sez-dh.dnes .sez-c { background: var(--accent-fill); color: var(--on-accent); } .sez-n { font-family: var(--font-cond); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.2; display: flex; flex-direction: column; } .sez-n small { color: var(--muted-2); text-transform: none; letter-spacing: 0; } .sez-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .sez-item { display: flex; gap: var(--s1); align-items: baseline; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ev, var(--c-ukol)) 16%, var(--surface)); border-left: 3px solid var(--ev, var(--c-ukol)); cursor: pointer; min-width: 0; } .sez-item.kind-hovor { --ev: var(--c-hovor); } .sez-item.kind-klub { --ev: var(--c-klub); } .sez-item.done .sez-t { text-decoration: line-through; color: var(--muted); } .sez-cas { font-family: var(--font-cond); font-weight: 600; font-size: 14px; min-width: 70px; flex: none; font-variant-numeric: tabular-nums; color: var(--muted); } .sez-t { flex: 1; min-width: 0; overflow-wrap: anywhere; } .sez-t small { color: var(--muted); } .sez-vic { display: flex; justify-content: center; padding: var(--s2) 0; } .mes-den.cil { outline: 2px solid var(--accent); } .mes-ev[data-drag] { cursor: grab; } .mes-ev.drag-ready { box-shadow: var(--glow); } .hled-vys { margin-top: var(--s1); min-height: 80px; } /* telefon (≤ 400 px): hlavička kalendáře se musí vejít i s názvem „Listopad" — název 24 px, tlačítka 38 px těsněji; 320 px navíc bez zoom tlačítek (dva prsty fungují) */ .kal-mes-btn { min-width: 0; max-width: 100%; overflow: hidden; } @media (max-width: 400px) { .kal-hl-akce { gap: 4px; } .kal-hl-akce .ikb { width: 38px; height: 38px; min-height: 38px; } .kal-mes-btn { font-size: 24px; } .kal-hl-akce .btn.sm { padding: 4px 10px; } } @media (max-width: 359px) { .kal-zoom { display: none; } .kal-mes-btn { font-size: 22px; } } .kal-hl, .kal-body { min-width: 0; max-width: 100%; } /* ---------- Maily (fáze 4): fronta mail_outbox ---------- */ .icb.st-pending { color: var(--warn); background: var(--warn-soft); } .icb.st-sending { color: var(--accent-ink); background: var(--accent-soft); } .icb.st-sent { color: var(--ok); background: var(--ok-soft); } .icb.st-error { color: var(--bad); background: var(--bad-soft); } .icb.st-off { color: var(--muted-2); background: var(--surface-3); } .icb-maily { color: var(--accent-ink); background: var(--accent-soft); } .icb-zpravy { color: var(--c-hovor); background: var(--ok-soft); } .mail-row .row-t { display: flex; align-items: center; gap: 6px; } .mail-clip { color: var(--muted-2); flex: none; } .mail-meta { margin-top: 2px; font-family: var(--font-cond); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); overflow-wrap: anywhere; } .mail-interni { padding: 6px 2px 10px; margin-top: 0; cursor: pointer; } .mail-nahled { display: flex; flex-direction: column; gap: var(--s1); } .mail-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; } .mail-text { margin: 0; white-space: pre-wrap; font: 15px/1.5 var(--font-body); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; max-height: 50vh; overflow: auto; } .mail-html { width: 100%; min-height: 260px; max-height: 50vh; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); } .icb.st-plan { color: var(--c-klub); background: var(--c-klub-soft); } .mail-upr { font-size: 11px; padding: 1px 7px; vertical-align: middle; } .mail-zmena { padding: 6px 0; border-top: 1px solid var(--line); } .mail-zmena:first-child { border-top: 0; padding-top: 0; } .mail-zmena b { font-family: var(--font-cond); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .mail-puv { color: var(--muted); text-decoration: line-through; font-size: 14px; white-space: pre-wrap; } .mail-nov { color: var(--text); font-size: 14px; white-space: pre-wrap; } .mail-pril { padding: 3px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .mail-pril-a { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 600; font-size: 15px; } .mail-html-det { margin-top: 4px; } .mail-html-det > summary { cursor: pointer; list-style: none; font-size: 14px; } .mail-html-det > summary::-webkit-details-marker { display: none; } .mail-html-det .mail-html { margin-top: 8px; } .mail-nahled .pole { margin-top: 6px; } .mail-nahled .ta { min-height: 160px; } /* ---------- 🔔 Notifikace ---------- */ /* 📴 pruh stavu sítě pod hlavičkou (jadro/sit.js): „bez signálu" · fáze 2 „N čeká" — kreslí se mimo render(); hidden musí fungovat i s display. Do řady hlavičky se na 375 px nevešel (přepínač Práce/Osobní + moduly + zvoneček), proto celá šířka pod ní, přilepený pod hlavičkou. */ .hl-sit { position: sticky; top: calc(var(--hl-h) + var(--sa-t)); z-index: 19; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 0 16px; background: var(--surface-2); color: var(--warn); border-bottom: 1px solid var(--line); font-family: var(--font-cond); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .hl-sit[hidden] { display: none; } .hl-bell { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--muted); flex: none; } .hl-bell.on { color: var(--accent-ink); background: var(--accent-soft); } .hl-bell-n { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-2); color: var(--on-accent-2); font-family: var(--font-cond); font-weight: 600; font-size: 11px; line-height: 18px; text-align: center; } .row.notif.neprectena .row-t { color: var(--text); } .row.notif:not(.neprectena) .row-t { color: var(--muted); font-weight: 400; } .row.notif.selhala .mail-meta { color: var(--bad); } .notif-stav { display: flex; align-items: center; gap: 10px; } .notif-stav > .ik { flex: none; color: var(--muted); } .notif-stav.ok > .ik { color: var(--ok); } .notif-stav.bad > .ik { color: var(--bad); } .notif-stav > div { flex: 1; min-width: 0; } .notif-stav .btn { flex: none; } .notif-druh { cursor: default; align-items: center; } .notif-druh .row-d { margin-top: 4px; } .notif-druh .seg-mini .seg-b { font-size: 12px; padding: 4px 8px; min-height: 30px; } .notif-akce { display: flex; align-items: center; gap: 8px; flex: none; } .notif-akce .ikb.sm { width: 36px; height: 36px; min-height: 36px; } .notif-zar { padding: 10px 0; cursor: default; } .notif-zar + .notif-zar { border-top: 1px solid var(--line); } /* 💬 Zprávy (fáze 5): okno s vláknem — sdílený chat modul (.td-chat) nebo ukázkové vlákno */ .zpravy-okno { min-height: min(62vh, 560px); display: flex; flex-direction: column; } .zpravy-okno .td-chat { flex: 1; min-height: 0; } .zpravy-vlakno { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 10px; } .zpravy-b { max-width: 84%; padding: 9px 12px; border-radius: 16px; background: var(--surface-2); color: var(--text); font-size: 15px; line-height: 1.4; align-self: flex-start; border-bottom-left-radius: 6px; } .zpravy-b.ja { align-self: flex-end; background: var(--accent-fill); color: var(--on-accent); border-bottom-left-radius: 16px; border-bottom-right-radius: 6px; } .zpravy-b small { display: block; margin-top: 3px; font-size: 11px; opacity: .72; } .zpravy-nahlaseni { border-left: 3px solid var(--c-ukol); padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; } .zpravy-psani { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; } .zpravy-psani textarea { flex: 1; min-height: 44px; max-height: 40vh; } .zpravy-radek-info { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 0 0 6px; } /* 💬 Okno chatu na výšku obrazovky (David 28. 10. 2026: „otevře se uprostřed staré historie“): roluje jen vlákno, ne celé okno — jinak skok na poslední zprávu nemá kam rolovat a člověk vidí začátek načtené historie. Pole na psaní drží dole nad klávesnicí. */ .sheet.sheet-chat { height: calc(var(--vvh, 100dvh) - 24px - var(--sa-t)); } .sheet-chat .sheet-b { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; padding-bottom: calc(8px + var(--sa-b)); } .kb-open .sheet-chat .sheet-b { padding-bottom: 8px; } .sheet-chat .zpravy-okno { flex: 1 1 auto; min-height: 0; } @media (max-width: 699px) { .sheet-bg:has(.sheet-chat) { padding-left: 0; padding-right: 0; } } .sheet-chat .sheet-b { padding-left: 0; padding-right: 0; } .sheet-chat .td-chat { border-radius: 0; } /* chat od kraje ke kraji jako WhatsApp — na 320 px zbylo poli 144 px */ @media (min-width: 700px) { .sheet.sheet-chat { height: min(880px, calc(100dvh - 48px)); max-width: 640px; } } /* 💬 Chat modul v barvách Velínu (tokeny → proměnné modulu; hub a koučink mají svoje, data-place="velin" je jen tady) */ .td-chat[data-place="velin"] { --tc-bg: var(--bg); --tc-card: var(--surface); --tc-line: var(--line); --tc-ink: var(--text); --tc-muted: var(--muted); --tc-acc: var(--accent-fill); --tc-acc-ink: var(--accent-ink); --tc-acc-soft: var(--accent-soft); --tc-danger: var(--bad); --tc-mine: color-mix(in srgb, var(--accent-fill) 24%, var(--surface)); --tc-gold-soft: var(--warn-soft); --tc-purple-soft: var(--c-klub-soft); --tc-purple-line: var(--c-klub); font-family: var(--font-body); border-radius: var(--r); } :root[data-scheme="dark"] .td-chat[data-place="velin"] { --tc-info-soft: var(--cyan-soft); --tc-info-ink: var(--cyan); --tc-gold-ink: var(--warn); } .td-chat[data-place="velin"] .td-chat-bub.mine { color: var(--text); } .td-chat[data-place="velin"] .td-chat-bub.mine .td-chat-link { color: var(--accent-ink); text-decoration-color: currentColor; } .td-chat[data-place="velin"] .td-chat-tick--read { color: var(--accent-ink); text-shadow: none; } .td-chat[data-place="velin"] .td-chat__field { background: var(--surface-2); } /* pole jako WhatsApp: světlejší „bublina" na patičce */ .td-chat[data-place="velin"] .td-chat-vp__play, .td-chat[data-place="velin"] .td-chat__tab.on, .td-chat[data-place="velin"] .td-chat__downn, .td-chat[data-place="velin"] .td-chat__send, .td-chat[data-place="velin"] .td-chat__ok { color: var(--on-accent); } /* ➕ okno Přidat (David 26. 10. 2026): rostoucí pole se zvýrazněním poznaných částí, typ nahoře, čipy s „Více…", Uložit a další */ .seg-druh { display: flex; width: 100%; margin: 2px 0 6px; } .seg-druh .seg-b { flex: 1; justify-content: center; } .zapis-pole { position: relative; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface-2); margin: 2px 0 4px; transition: border-color .15s; } .zapis-pole:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } /* rámeček jako chat: roste s textem */ .zapis-pole .in-text, .zapis-back { font-family: var(--font-body); font-weight: 600; font-size: 17px !important; line-height: 1.4; padding: 12px 14px; width: 100%; box-sizing: border-box; letter-spacing: normal; } .zapis-pole .in-text { position: relative; z-index: 1; display: block; min-height: 104px; max-height: 50vh; height: auto; overflow-y: auto; resize: none; background: transparent; color: var(--text); border: 0; outline: none; border-radius: 16px; -webkit-text-size-adjust: 100%; } /* min. 3 řádky, roste s textem do půlky obrazovky */ .zapis-back { position: absolute; inset: 0; z-index: 0; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; color: transparent; pointer-events: none; border-radius: 16px; } .zapis-back .zz { color: transparent; background: var(--accent-soft); border-radius: 5px; box-shadow: 0 0 0 2px var(--accent-soft); } .zapis-back .zz-tag, .zapis-back .zz-who { background: var(--ok-soft); box-shadow: 0 0 0 2px var(--ok-soft); } .zapis-back .zz-priorita, .zapis-back .zz-oblast { background: var(--warn-soft); box-shadow: 0 0 0 2px var(--warn-soft); } .zapis-mic { position: absolute; right: 0; top: 6px; z-index: 2; width: 40px; height: 40px; color: var(--muted); } .zapis-mic.on { color: var(--bad); animation: zz-pulz 1s infinite; } @keyframes zz-pulz { 50% { opacity: .45; } } .zz-pop { position: absolute; left: 10px; bottom: -4px; transform: translateY(100%); z-index: 5; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 6px; box-shadow: var(--shadow); } .zz-pop .btn { white-space: nowrap; } .pridej-pod { min-height: 20px; margin-top: 2px; } .pridej-pod [hidden] { display: none; } .pridej-dalsi { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--muted); } .pridej-dalsi .sw { flex: none; } .chips-wrap { position: relative; } .chips-wrap.fade::after { content: ''; position: absolute; top: 0; right: calc(-1 * var(--s2)); bottom: 0; width: 44px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--surface)); } .chip-vice { border-style: dashed; } /* 🔄 karta verze v Nastavení (Obnovit) */ .verze-karta .row { align-items: center; } .verze-karta.nova { border-color: var(--accent); background: var(--accent-soft); } /* ✅ Schvalování · 📅 Rezervace (fáze 5) */ .icb-schvalovani { color: var(--accent-ink); background: var(--accent-soft); } .icb-rezervace { color: var(--c-hovor); background: var(--ok-soft); } .sch-komu { padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; margin: 8px 0 4px; } .sch-souhrn { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 8px 0; } .sch-souhrn .k { font-family: var(--font-cond); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .sch-souhrn .v { font-family: var(--font-display); font-weight: 700; font-size: 20px; } .sch-volba { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 15px; } .sch-volba .sw { flex: none; } /* ⌚ Garmin pilot (28. 10. 2026) */ .icb-garmin { color: var(--accent-ink); background: var(--accent-soft); } .gar-uvod { margin: 0 0 4px; } .gar-open { align-items: flex-start; margin: 2px 0 6px; } .gar-open .sw { margin-top: 2px; } .gar-zacatek { padding: 10px 0 0; border-top: 1px solid var(--line); margin-top: 6px; } .gar-row .ikb.sm { width: 36px; height: 36px; min-height: 36px; flex: none; } .gar-filtr { margin-bottom: 10px; } .gar-napsat { width: 100%; margin: 0 0 10px; } .gar-vychozi { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; cursor: pointer; } .gar-row .ikb.sm + .ikb.sm, .gar-row .pill-btn + .ikb.sm { margin-left: -4px; } .gar-zprava .pill-btn { flex: none; } .gar-vsichni { width: 100%; margin: 0 0 10px; } .gar-row .pill-btn { flex: none; } .gar-row.gar-nevidi .icb-garmin { color: var(--muted); background: var(--surface-3); } .gar-hledat { margin: 0 0 10px; } .gar-hledat .in { width: 100%; box-sizing: border-box; } .gar-nic { margin: 4px 0 10px; } .gar-pridej { display: flex; gap: 8px; margin: 10px 0 4px; } .gar-pridej .in { flex: 1; min-width: 0; } .gar-pridej .btn { flex: none; } .rez-detail { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; font-size: 15px; margin: 6px 0 10px; } .rez-detail .k { color: var(--muted); font-family: var(--font-cond); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; } /* 📅 okno rezervace podle Pilota 1.0: před/po, jiný termín, omluva */ .rez-pred { padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; margin: 6px 0 10px; } .rez-akce { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; } .rez-akce .btn { width: 100%; justify-content: center; } .rez-akce[hidden] { display: none; } .rez-jiny, .rez-omluva { padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--surface); } .rez-jiny[hidden], .rez-omluva[hidden] { display: none; } .rez-cas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .rez-cas .pole { margin-top: 6px; } .rez-kroky { margin: 8px 0; display: flex; flex-direction: column; gap: 6px; } .rez-krok { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; } .rez-krok.wait { color: var(--muted); } .rez-krok.skip { color: var(--muted-2); } .rez-ik { flex: none; width: 22px; } .rez-pre { white-space: pre-wrap; font: 13px/1.45 var(--font-body); background: var(--surface-2); border-radius: 10px; padding: 10px; margin: 6px 0 0; color: var(--text); } /* ➕ patička okna Přidat: Uložit + mikrofon vedle (David 26. 10.); nápověda pod „i“ */ .sheet-f .btn.jen-ikona { flex: 0 0 52px; padding: 0; justify-content: center; } .sheet-f .btn.jen-ikona.on { color: var(--bad); animation: zz-pulz 1s infinite; } .pridej-pod { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pridej-info { flex: none; margin-left: auto; color: var(--muted); } .napoveda { margin: 6px 0 10px; padding-left: 20px; } .napoveda li { margin: 4px 0; } /* 🗂 Vyřídit: záložky podle druhu s počty */ .vyr-filtr { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s2)) 10px; padding: 2px var(--s2) 6px; } .vyr-filtr::-webkit-scrollbar { display: none; } .vyr-filtr .chip-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-3); color: var(--text); font-size: 12px; line-height: 20px; text-align: center; font-weight: 700; } .vyr-filtr .chip-btn.on .chip-n { background: var(--accent-2); color: var(--on-accent-2); } /* 🔔 pruh o notifikacích na Dnes: text je odkaz, ✕ skryje do další chyby; cíl #nastaveni/notifikace se zvýrazní */ .pruh-notif { display: flex; align-items: stretch; gap: 4px; padding: 0; } .pruh-notif .pruh-telo { display: flex; align-items: center; gap: 10px; flex: 1; padding: 12px 14px; color: inherit; min-width: 0; } .pruh-notif .pruh-x { flex: none; align-self: center; margin-right: 6px; color: inherit; } #nast-notif.zvyrazni { animation: nast-blik 1.6s ease-out 1; border-radius: var(--r); } @keyframes nast-blik { 0% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } } [data-notif-pricina] { flex-wrap: wrap; } [data-notif-pricina] .btn { margin-top: 8px; } /* ⏱ živá osa na Dnes (David 26. 10. 2026 večer): jen probíhající a budoucí, probíhající zvýrazněná s „ještě N min", po konci dne „Dnes máš hotovo" */ .osa .sec-h h2 { font-variant-numeric: tabular-nums; } .ev-zb { flex: none; align-self: center; font-family: var(--font-cond); font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .ev.ted { background: var(--accent-soft); border-left-color: var(--accent); } .ev.ted .ev-c, .ev.ted .ev-zb { color: var(--accent-ink); } .osa-hotovo { display: flex; align-items: center; gap: 10px; color: var(--muted); } .osa-hotovo .ik { flex: none; color: var(--ok); } .osa-hotovo b { color: var(--text); } .hero.bez-pozdravu .hero-datum { font-size: 22px; line-height: 1.15; font-weight: 700; color: var(--text); } .hero-datum::first-letter { text-transform: uppercase; } /* 📝 Poznámky na Dnes: akce Vyřízeno / Na úkol přímo v řádku */ .note-a { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .note-a .pill-btn { display: inline-flex; align-items: center; gap: 5px; } /* 👆 swipe gesta v seznamech: pozadí s názvem akce pod řádkem, řádek jede transformem; svislý tah nechá prohlížeči (pan-y) */ .card.list { position: relative; overflow: hidden; } .task, .note, .ev { touch-action: pan-y; } .task.sw-on, .note.sw-on, .ev.sw-on { position: relative; z-index: 1; background: var(--surface); transition: none; } .task.sw-pryc, .note.sw-pryc, .ev.sw-pryc { transition: transform .12s ease-in; } .sw-bg { position: absolute; left: 0; right: 0; z-index: 0; display: flex; align-items: center; gap: 8px; padding: 0 18px; font-family: var(--font-cond); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; } .sw-bg .ik { width: 22px; height: 22px; flex: none; } .sw-bg.sw-doprava { justify-content: flex-start; } .sw-bg.sw-doleva { justify-content: flex-end; } .sw-bg.sw-ok { background: var(--ok-soft); color: var(--ok); } .sw-bg.sw-ok.sw-aktiv { background: var(--accent-fill); color: var(--on-accent); } .sw-bg.sw-neutral { background: var(--surface-3); color: var(--muted); } .sw-bg.sw-neutral.sw-aktiv { color: var(--text); } .sw-bg.sw-bad { background: var(--bad-soft); color: var(--bad); } .sw-bg.sw-bad.sw-aktiv { background: var(--bad); color: var(--surface); } .w-top3 .sw-bg { border-radius: var(--r); } /* 🧭 Plánovač (fáze 1, 27. 10. 2026): Nastavení → Plánovač + čip Oblast práce a rychlé délky v editoru úkolu */ .plan-uvod { margin: 0 0 10px; } .plan .row-t, .plan .row-d, .plan-form .row-t, .plan-form .row-d { display: block; } .plan-row { padding: 0 6px 0 0; gap: 4px; cursor: default; } .plan-otevri { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 14px; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; min-height: var(--field-h); } .plan-otevri .row-t, .plan .row .row-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plan-otevri > .ik:last-child { color: var(--muted-2); flex: none; } .plan-posun { display: flex; gap: 2px; flex: none; } .plan-posun .ikb.sm { width: 36px; height: 36px; min-height: 36px; border: 0; background: transparent; } .plan-posun .ikb.sm:disabled { opacity: .3; cursor: default; } .plan-acts { margin-top: 10px; } .plan-souhrn { margin: -2px 0 10px; } .plan-varovani { color: var(--warn); } .plan-prazdno { margin: 0; padding: 12px 14px; } .plan .btn.danger-t { color: var(--bad); } .plan-dny { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .plan-den-b { min-height: var(--field-h); border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: 600 14px/1 var(--font-body); cursor: pointer; padding: 0; } .plan-den-b.on { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; } .plan-barvy { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .plan-barva { aspect-ratio: 1; min-height: 36px; border-radius: 50%; border: 3px solid var(--surface); background: var(--ev); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; padding: 0; } .plan-barva.on { box-shadow: 0 0 0 3px var(--text); } .plan-sw { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; cursor: pointer; } .plan-rychle, .delka-rychle { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .plan-rychle .pill-btn, .delka-rychle .pill-btn { min-height: 36px; } .delka-rychle { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); align-items: center; margin: 12px 0 0; } .delka-rychle .pole-l { margin-right: 4px; } .delka-rychle .pill-btn { padding: 3px 4px; white-space: nowrap; } .pill-btn.on { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; } .plan-ramec { display: flex; flex-direction: column; gap: 6px; } .plan-ramec-r { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; } .plan-ramec-d { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; } .plan-ramec-r .in { padding: 8px 6px; } /* 🧭 Plánovač fáze 2: Uzavři den + návrh dne (#m/planovac/zitra) */ .ik.otoc { transform: rotate(180deg); } .plan-hotovo { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--accent-ink); } .plan-ukol { padding: 12px 14px; touch-action: pan-y; background: var(--surface); } .plan-ukol + .plan-ukol { border-top: 1px solid var(--line); } .plan-ukol .row-t { overflow-wrap: anywhere; } .plan-ukol-a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } .plan-ukol-a .pill-btn { min-height: 36px; display: inline-flex; align-items: center; gap: 4px; } .plan-ukol-a .ikb.sm { width: 36px; height: 36px; min-height: 36px; margin-left: auto; border: 0; background: transparent; } .plan-ukol.sw-on { position: relative; z-index: 1; transition: none; } .plan-ukol.sw-pryc { transition: transform .12s ease-in; } .plan-den-nav { display: flex; gap: 4px; } .plan-den-nav .ikb.sm { width: 36px; height: 36px; min-height: 36px; } .plan-den-nav .ikb.sm:disabled { opacity: .3; } .plan-kap { display: flex; flex-direction: column; gap: 6px; } .plan-kap-t { font-size: 15px; } .plan-kap-t b { font-family: var(--font-display); font-size: 22px; } .plan-bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; } .plan-bar span { display: block; height: 100%; border-radius: 4px; background: var(--ev, var(--accent-2)); } .plan-osa { margin-top: 10px; } .plan-blok { --ev: var(--muted-2); display: flex; align-items: stretch; gap: 10px; width: 100%; min-height: var(--field-h); padding: 10px 12px; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; } .plan-blok + .plan-blok { border-top: 1px solid var(--line); } .plan-blok-cas { flex: none; width: 44px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; font-size: 14px; } .plan-blok-cas span { color: var(--muted); font-size: 12px; } .plan-blok-pruh { flex: none; width: 4px; border-radius: 2px; background: var(--ev); } .plan-blok .row-m { display: flex; flex-direction: column; gap: 2px; } .plan-blok .row-t { display: flex; align-items: center; gap: 6px; } .plan-blok .row-t > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .plan-blok .row-t .ik { flex: none; color: var(--muted); } .plan-blok.t-beh { --ev: var(--accent-2); } .plan-blok.t-obed, .plan-blok.t-vyridit { --ev: var(--line-strong); } .plan-blok.t-pevny, .plan-blok.t-udalost, .plan-blok.t-ukol-cas { --ev: var(--muted); } .plan-blok.t-pevny .row-t, .plan-blok.t-udalost .row-t { color: var(--muted); } .plan-blok.kolize .row-d { color: var(--warn); } .plan-zamek { flex: none; align-self: center; color: var(--accent-ink); } .plan-kvoty { display: flex; flex-direction: column; gap: 10px; } .plan-kvota-t { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 4px; } .plan-paticka { position: sticky; bottom: calc(var(--tab-h) + var(--sa-b) + 8px); z-index: 5; display: flex; gap: 8px; margin: 16px 0 8px; padding: 8px calc(var(--fab) + 12px) 8px 0; background: var(--bg); } /* vpravo místo pro tlačítko + */ .plan-paticka .btn { flex: 1; min-width: 0; } .plan-paticka .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plan-drobnosti { margin: 0 0 10px; padding-left: 20px; font-size: 14px; } .plan-ukol-r { display: flex; align-items: center; gap: 10px; } .plan-ukol-r .row-m { flex: 1; min-width: 0; } .plan-ukol-r .pill-btn { flex: none; min-height: 36px; } .plan-ukol-r .ikb.sm { flex: none; width: 36px; height: 36px; min-height: 36px; border: 0; background: transparent; } /* 🧭 Plánovač: návrh jako časová osa (tažení, okraje), nápověda, vrácení uzavřeného dne */ .plan-napoveda { margin: 10px 0; padding: 10px 14px; border-radius: var(--r); background: var(--surface-2); font-size: 14px; } .plan-napoveda summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); } .plan-napoveda ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); } .plan-napoveda b { color: var(--text); } .po { padding: 12px 10px 12px 0; } .po-mrizka { position: relative; margin-left: 46px; } .po-h { position: absolute; left: -46px; right: 0; height: 0; border-top: 1px solid var(--line); } .po-h span { position: absolute; left: 0; top: -8px; width: 40px; text-align: right; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--surface); } .po-mimo { position: absolute; left: 0; right: 0; background: var(--surface-2); opacity: .6; pointer-events: none; } .plan-blok.po-blok { position: absolute; display: block; min-height: 0; padding: 3px 6px; border: 0; border-left: 3px solid var(--ev); border-radius: 8px; overflow: hidden; z-index: 2; background: color-mix(in srgb, var(--ev) 20%, var(--surface)); color: var(--text); font-size: 12px; line-height: 1.3; text-align: left; cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .plan-blok.po-blok + .plan-blok.po-blok { border-top: 0; } .po-blok .row-t { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 13px; } .po-blok .row-t > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .po-blok .plan-blok-cas { display: inline; width: auto; font-size: 11px; color: var(--muted); } .po-blok .plan-blok-cas b, .po-blok .plan-blok-cas span { font-weight: 400; font-size: 11px; color: var(--muted); } .po-blok .row-d { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .po-blok.maly { padding: 1px 6px; } .po-blok.maly .row-t { font-size: 12px; } .po-blok.maly .plan-blok-cas { display: none; } .po-blok.t-pevny, .po-blok.t-udalost, .po-blok.t-ukol-cas:not(.pohyb) { background: var(--surface-2); border-left-style: dashed; } .po-blok.drag-ready { box-shadow: var(--glow); z-index: 6; } .po-blok.tazeny { z-index: 7; box-shadow: var(--shadow); opacity: .95; } .po-blok:hover .kb-h::after, .po-blok.drag-ready .kb-h::after, .po-blok.tazeny .kb-h::after { opacity: .9; } .po-blok .plan-zamek { flex: none; margin-left: auto; } .plan-zpet { margin: 0 0 10px; } .plan-zpet summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 6px 0; display: flex; align-items: center; gap: 6px; } .chk.hotovy { background: var(--accent-2); border-color: transparent; color: var(--on-accent-2); } @media (pointer: coarse) { .po-blok .kb-h { height: 14px; } .po-blok .kb-h.top { top: -4px; } .po-blok .kb-h.bot { bottom: -4px; } } /* iPhone (Safari): pole s časem/datem mají vlastní minimální šířku → v úzkém řádku od–do lezla přes sebe (David 27. 10. 2026) */ .plan-form input[type=time].in, .plan-form input[type=date].in { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } .plan-form input[type=time]::-webkit-date-and-time-value, .plan-form input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; } .plan-ramec-r { grid-template-columns: 74px minmax(0, 1fr) 10px minmax(0, 1fr); gap: 4px; } .plan-ramec-r > * { min-width: 0; } .plan-form .grid2 > * { min-width: 0; } /* 🏋 termín s klientem (modul Termíny, 27. 10. 2026): blok v kalendáři barvou tréninku, okno jako v adminu */ .ev-klient { border-left-color: var(--c-tren); } .tm-kdy { font-family: var(--font-cond); font-weight: 600; font-size: 16px; letter-spacing: .02em; color: var(--muted); margin: 0 0 10px; } .tm-meet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; } .tm-meet-a { flex: 1 1 220px; justify-content: center; } .tm-meet-u { flex-basis: 100%; margin: 0; overflow-wrap: anywhere; } .tm-klient { background: var(--surface-2); border-radius: var(--r); padding: 12px 14px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .tm-jmeno { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tm-jmeno .ik { color: var(--accent-ink); } .tm-chips { display: flex; flex-wrap: wrap; gap: 6px; } .tm-hist { align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer; } .tm-kontakt { display: flex; flex-wrap: wrap; gap: 6px; } .tm-kontakt .btn { max-width: 100%; } .tm-kontakt .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tm-dat-vedet { margin: 0 0 12px; } .tm-ro { display: flex; align-items: center; color: var(--muted); background: var(--surface-2); } .tm-ok { color: var(--ok); font-weight: 600; margin: 2px 0 10px; } .tm-volno .banner { margin: 2px 0 10px; } .tm-prip { margin: 6px 0 4px; } .tm-prip .row { padding: 6px 0; } .tm-admin { margin-top: 12px; } .tm-dalsi { margin-top: 4px; } .tm-lide { margin-top: 4px; max-height: 220px; } .tm-propojeno { margin: 4px 0 0; } /* 💳 Termíny krok 3: platba — napojená faktura / poukaz, nabídka k napojení, „Po uložení: …" (David 30. 10. 2026) */ .tm-platba { display: flex; flex-direction: column; gap: 6px; margin: -2px 0 10px; } .tm-platba:empty { display: none; } .tm-kandidati { display: flex; flex-direction: column; gap: 6px; } .tm-kandidati > p { margin: 0; } .tm-faktura { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: var(--r); padding: 10px 12px; min-width: 0; } .tm-faktura > .ik { color: var(--accent-ink); flex-shrink: 0; } .tm-faktura .btn { flex-shrink: 0; } .tm-faktura-m { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 14px; } .tm-faktura-m small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; } .tm-penize { font-size: 13px; line-height: 1.45; border-left: 3px solid var(--accent-2); background: var(--surface-2); border-radius: 0 var(--r) var(--r) 0; padding: 8px 12px; margin: 0 0 12px; overflow-wrap: anywhere; } .tm-penize b { color: var(--accent-ink); } .tm-perm-varovani { margin: 0; } .tm-varovani { display: block; margin-top: 4px; } .tm-dalsi { flex-wrap: wrap; gap: 8px; } .kal-jine { align-items: center; flex-wrap: wrap; gap: 6px; margin-top: var(--s1); } .tm-kontakt .btn { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 600; } /* iPhone: pole data/času mají vlastní minimální šířku a výšku → Datum · Čas · Délka v novém termínu lezla přes sebe a Délka seděla níž (David 2. 11. 2026) */ .grid2 > *, .grid3 > * { min-width: 0; } .tm-okno input[type=date].in, .tm-okno input[type=time].in, .tm-okno input[type=number].in { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; margin: 0; } .tm-okno input[type=time]::-webkit-date-and-time-value, .tm-okno input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; } .grid3.tm-cas { align-items: end; } .tm-cas .pole-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tm-cas .in { padding-left: 10px; padding-right: 6px; height: var(--field-h); line-height: 1.2; } .tm-cas input::-webkit-calendar-picker-indicator { margin: 0 0 0 2px; padding: 0; } .tm-rychle { margin-top: var(--s1); } .tm-rychle .pole-l { display: block; margin-bottom: 2px; } .grid3.tm-cas { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, .7fr); } @media (max-width: 359px) { .grid3.tm-cas { grid-template-columns: 1fr 1fr; } .grid3.tm-cas > :first-child { grid-column: 1 / -1; } } /* 📍 okno Přidat — termín, místo, navigace (David 27. 10. 2026) */ .term { display: flex; flex-direction: column; gap: var(--s1); } .term-l { display: block; font-family: var(--font-cond); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .term-tyden { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 4px; align-items: center; } .term-tyden .term-l { padding-right: 4px; } .term-d { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 0; height: var(--field-h); border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-family: var(--font-cond); cursor: pointer; padding: 0; } .term-d b { font-weight: 600; font-size: 13px; letter-spacing: .04em; } .term-d span { font-size: 12px; color: var(--muted); } .term-d.on { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; } .term-d.on span { color: var(--on-accent); } .term-mini { margin: 0; background: var(--surface); } .term-txt { display: block; } .term-txt .pick-vlastni { margin-top: 4px; } .term-nahled { display: block; min-height: 18px; margin-top: 4px; } .misto-pick { display: flex; flex-direction: column; gap: var(--s1); } .misto-pick .pick-vlastni { margin-top: 0; } .misto-list { display: flex; flex-direction: column; gap: 2px; max-height: 42vh; overflow-y: auto; } .misto-skup { font-family: var(--font-cond); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 6px 2px 2px; } .misto-r { display: flex; align-items: center; gap: 10px; min-height: var(--field-h); padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; width: 100%; } .misto-r:hover, .misto-r:focus-visible { background: var(--surface); } .misto-r .ik { flex: none; color: var(--muted); } .misto-t { display: flex; flex-direction: column; min-width: 0; } .misto-t b, .misto-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .misto-t b { font-weight: 600; } .misto-t small { color: var(--muted); font-size: 13px; } .misto-pata { display: flex; flex-wrap: wrap; gap: 6px; } .misto-stav { margin: 4px 2px 0; } .misto-sprava .row .ikb.sm { flex: none; } .misto-sprava .row .ikb.sm[disabled] { opacity: .35; } .pridej-adresa { min-width: 0; max-width: 100%; } .pridej-adresa span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zapis-back .zz-misto { background: var(--ok-soft); box-shadow: 0 0 0 2px var(--ok-soft); } .ev .osa-nav { flex: none; align-self: center; width: 40px; height: 40px; min-height: 40px; color: var(--accent-ink); } .ev-akce { align-items: center; margin-top: var(--s1); } .osoba-karta { display: flex; align-items: center; gap: 10px; margin-top: var(--s2); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); } .osoba-karta > .ik { flex: none; color: var(--muted); } .osoba-karta + .acts { margin-top: var(--s1); } .odj-vysl { min-height: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sel-sm { width: auto; max-width: 46%; flex: none; height: var(--field-h); } /* ---------- Více = rozcestník (David 27. 10. 2026 večer) ---------- */ .dlazdice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 16px; } .dl { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 112px; padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--text); } .dl:active { transform: scale(.98); } .dl-hl { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .dl-n { min-width: 32px; height: 32px; padding: 0 9px; border-radius: 16px; background: var(--accent-2); color: var(--on-accent-2); font-family: var(--font-cond); font-weight: 600; font-size: 18px; line-height: 32px; text-align: center; } .dl-t { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-d { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nast-vstup { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--text); } .nast-vstup .row-t, .nast-vstup .row-d { display: block; } .nast-vstup > .ik:last-child, .nast-odkaz > .ik:last-child { color: var(--muted-2); } /* ---------- Nastavení jako v iPhonu: seznam skupin → vlastní stránka ---------- */ .nast-h1 { font-size: 28px; line-height: 1.15; margin: 4px 0 6px; overflow-wrap: anywhere; } .nast-sez-h { margin-bottom: 12px; } .nast-hledej { position: relative; margin-bottom: 8px; } .nast-hledej > .ik { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .nast-hledej .in { padding-left: 36px; } .nast-sk { margin-top: 16px; } .nast-sk-h { font-family: var(--font-cond); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } .nast-sk-pokrocile { opacity: .82; } .nast-radek .row-t, .nast-radek .row-d, .nast-hit .row-t, .nast-hit .row-d, .nast-odkaz .row-t, .nast-odkaz .row-d { display: block; } .nast-radek .row-d { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .nast-radek.on { background: var(--accent-soft); } .nast-radek.on .row-t { color: var(--accent-ink); } .nast-nic { padding: 8px 2px; } .nast-zpet { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; margin-left: -6px; font-family: var(--font-cond); font-weight: 600; font-size: 16px; letter-spacing: .02em; text-transform: uppercase; color: var(--accent-ink); } .nast-zpet .ik { transform: rotate(180deg); width: 20px; height: 20px; } .nast-uvod { margin: 0 0 12px; color: var(--muted); } .nast-vysv { margin: 8px 0 0; } .nast-telo > .card + .card, .nast-telo > .card + .nast-odkaz, .nast-telo > .nast-odkaz + .card, .nast-telo > div > .card + .card { margin-top: 12px; } .nast-odkaz { margin-top: 12px; padding: 12px 14px; color: var(--text); } .nast-kod { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--surface-2); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; word-break: break-all; } .nast-ls { margin: 0 0 8px; padding-left: 18px; font-size: 13px; } .nast-ls li { margin: 2px 0; overflow-wrap: anywhere; } .nast-prazdna { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; color: var(--muted); text-align: center; } .nast-prazdna .ik { width: 36px; height: 36px; } .txt-bad { color: var(--bad); } .notif-kam { display: block; font-size: 12px; color: var(--muted-2); margin: 4px 0 2px; } .notif-priklad { margin-top: 2px; } .seg .seg-b.seg-nebezpecne.on { background: var(--bad-soft); color: var(--bad); } .seg .seg-b.seg-nebezpecne:not(.on) { color: var(--bad); } .zvyrazni { animation: nast-blik 1.6s ease-out 1; border-radius: var(--r); } .nast.ma-stranku .nast-sez { display: none; } .nast:not(.ma-stranku) .nast-det { display: none; } /* ---------- Počítač (≥ 768 px): boční menu místo spodní lišty, čitelné písmo, obsah max. 720 px uprostřed ---------- * David 27. 10. 2026: „na počítači je Velín malinký sloupec s drobným písmem". */ @media (min-width: 768px) { :root { --rail: 104px; } body { font-size: 16px; } .small, .row-d, .hot-d, .ev-d, .note-d, .dl-d, .nast-ls { font-size: 15px; } .pole-h { font-size: 14px; } .pole-l { font-size: 14px; } .mail-meta, .task-d, .note-k, .hot-k { font-size: 14px; } #app { padding-left: var(--rail); } #lista { top: 0; right: auto; bottom: 0; width: var(--rail); height: auto; padding: calc(var(--hl-h) + 16px) 8px 16px; border-top: 0; border-right: 1px solid var(--line); grid-template-columns: 1fr; grid-auto-rows: 84px; align-content: start; gap: 4px; } .tab { height: 84px; border-radius: 16px; font-size: 14px; } .tab.on { background: var(--accent-soft); } .tab-badge { top: 12px; } .hl { padding-left: 24px; padding-right: 24px; } main#view { max-width: 752px; padding: 24px 16px calc(var(--fab) + 48px); } main#view[data-obr="kalendar"] { max-width: 1240px; } .fab { right: 32px; bottom: 32px; } #toast { bottom: 28px; left: calc(50% + var(--rail) / 2); } .dlazdice { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .dl { min-height: 128px; padding: 16px; } .dl-t { font-size: 21px; } } @media (min-width: 1024px) { main#view[data-obr="nastaveni"] { max-width: 1120px; } .nast { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 32px; align-items: start; } .nast .nast-sez, .nast .nast-det { display: block !important; } .nast-sez { position: sticky; top: calc(var(--hl-h) + 16px); max-height: calc(100dvh - var(--hl-h) - 32px); overflow-y: auto; padding-right: 4px; } .nast-det { max-width: 720px; } .nast-det .nast-zpet { display: none; } } @media (min-width: 1200px) { :root { --rail: 232px; } #lista { grid-auto-rows: 56px; padding-left: 12px; padding-right: 12px; } .tab { flex-direction: row; justify-content: flex-start; gap: 14px; height: 56px; padding: 0 16px; font-size: 16px; letter-spacing: .06em; } .tab-badge { position: static; margin-left: auto; order: 3; } } /* 📥 Zprávy = seznam konverzací jako WhatsApp (David 28. 10. 2026, bod 2): avatar · jméno · čas / poslední zpráva · odznak */ .ik-xs { width: 13px; height: 13px; flex: none; } .zk-hledej { margin: 0 0 10px; } .zk-hledej .in { width: 100%; } .zk-filtr { margin-bottom: 12px; } .zk { gap: 12px; padding: 10px 6px 10px 14px; } .zk-av { flex: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--av, var(--accent-ink)); background: color-mix(in srgb, var(--av, var(--accent-ink)) 18%, var(--surface)); } .zk-av img { width: 100%; height: 100%; object-fit: cover; } .av-0 { --av: var(--c-hovor); } .av-1 { --av: var(--c-tren); } .av-2 { --av: var(--c-klub); } .av-3 { --av: var(--c-osobni); } .av-4 { --av: var(--warn); } .av-5 { --av: var(--accent-ink); } .zk-h, .zk-d { display: flex; align-items: center; gap: 6px; min-width: 0; } .zk-jm { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zk-cas { flex: none; font-size: 12px; color: var(--muted); } .zk.nove .zk-cas { color: var(--accent-ink); font-weight: 700; } .zk-pin, .zk-mute { color: var(--muted); display: inline-flex; } .zk-d { margin-top: 3px; font-size: 14px; color: var(--muted); } .zk-txt, .zk-hit, .zk-pocit { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zk-pocit { display: inline-flex; align-items: center; gap: 5px; color: var(--text); } .zk-hit { color: var(--text); font-style: italic; } .zk-pro { margin-top: var(--s2); display: grid; gap: var(--s1); } .zk-pro-t .row { min-height: 44px; } .zk-pro-pridej { display: flex; gap: var(--s1); margin-top: var(--s1); } .zk-pro-pridej .in { flex: 1 1 auto; min-width: 0; } .zk-pise { flex: 1 1 auto; min-width: 0; color: var(--accent-ink); font-weight: 600; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* píše… v seznamu (29. 10. 2026) */ .zk.nove .zk-txt { color: var(--text); font-weight: 600; } .zk-tick { flex: none; font-size: 12px; font-weight: 800; letter-spacing: -2px; padding-right: 2px; color: var(--muted); } .zk-tick.cteno { color: var(--accent-ink); } .zk-rep { flex: none; display: inline-flex; align-items: center; gap: 3px; } .zk-n { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent-2); color: var(--on-accent-2); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .zk.ztlumeno .zk-n { background: var(--surface-3); color: var(--muted); } .zk-vice { flex: none; width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted); } /* 👤 hlavička vlákna (bod 3): fotka · jméno · píše… / naposledy · 🔍; klepnutí = karta svěřence */ .sheet-chat .sheet-h h3 { min-width: 0; padding-top: 12px; font-size: 16px; } .zh { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; border: 0; background: none; color: inherit; padding: 0; text-align: left; cursor: pointer; font: inherit; } .zh .zk-av { width: 40px; height: 40px; font-size: 15px; } .zh-m { display: flex; flex-direction: column; min-width: 0; } .zh-jm { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zh-st { font-size: 12px; color: var(--muted); min-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zh-st.pise, .zh-st.online { color: var(--accent-ink); font-weight: 600; } .zh-rep { flex: none; display: inline-flex; align-items: center; gap: 3px; } .zh-hledej { width: 40px; height: 40px; margin-top: 8px; border: 0; background: transparent; color: var(--text); } .zh-karta { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; } .zh-karta .zk-av { width: 56px; height: 56px; font-size: 20px; } .zh-akce { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .zh-akce .btn { flex: 1 1 90px; } /* 💬 Chat jako samostatná část Velínu (David 28. 10. 2026): ikona v hlavičce vedle zvonečku, na počítači seznam jako panel vpravo */ .hl-moduly { display: contents; } .sheet-bg:has(.sheet-panel) { justify-content: flex-end; align-items: stretch; padding: 0; } .sheet.sheet-panel { width: min(460px, 100%); max-width: 460px; height: 100dvh; max-height: 100dvh; border-radius: 0; border-bottom: 1px solid var(--line); } .sheet-panel .sheet-b { flex: 1 1 auto; } .zk-nova { margin-left: auto; } /* 🏷️ štítky vztahu v seznamu konverzací (Koučink · Kurz 9 · Člen · Inside · Kemp …), barvy jen z tokenů */ .zk-st { display: inline-flex; gap: 4px; flex: 0 1 auto; min-width: 0; overflow: hidden; } .zk-stk { flex: none; font-family: var(--font-cond); font-weight: 600; font-size: 11px; letter-spacing: .04em; line-height: 1; padding: 3px 6px; border-radius: 6px; color: var(--st, var(--muted)); background: color-mix(in srgb, var(--st, var(--muted)) 16%, transparent); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; } .st-koucink { --st: var(--accent-ink); } .st-kurz { --st: var(--c-tren); } .st-clen { --st: var(--c-hovor); } .st-inside { --st: var(--c-klub); } .st-kemp { --st: var(--c-osobni); } .st-kids { --st: var(--warn); } .st-rezervace { --st: var(--c-osobni); } .st-zajemce { --st: var(--muted); } .st-firemni { --st: var(--c-klub); } .st-vic { --st: var(--muted); } .zk-pod { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; } .zk-pod .in { flex: 1; min-width: 0; } .st-uzke { display: none; } @media (max-width: 420px) { .zk-st .zk-stk:nth-child(2):not(.st-vic), .st-siroke { display: none; } .st-uzke { display: inline-block; } } /* ⏳ čeká na odpověď: šedě, > 24 h žlutě, > 48 h červeně */ .zk-ceka { flex: none; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; color: var(--muted); background: var(--surface-2); white-space: nowrap; } .zk-ceka.zluta { color: var(--warn); background: var(--warn-soft); } .zk-ceka.cervena { color: var(--bad); background: var(--bad-soft); } .zk-raz { margin: -4px 0 12px; } .zk-raz .seg { width: 100%; } /* 👤 karta svěřence vedle vlákna (≥ 1100 px); na telefonu se otevírá z hlavičky */ .zpravy-sloupce { flex: 1 1 auto; min-height: 0; display: flex; gap: 0; } .zpravy-sloupce .zpravy-okno { flex: 1 1 auto; min-width: 0; } .zh-bok { display: none; } @media (min-width: 1100px) { .sheet.sheet-chat { max-width: 1040px; } .zh-bok { display: block; flex: 0 0 320px; overflow-y: auto; padding: 4px 16px 16px; border-left: 1px solid var(--line); } .zh-bok .zh-akce .btn { flex: 1 1 100%; } } .zh-karta .zh-m { min-width: 0; } .zh-karta .zk-st { margin-top: 4px; flex-wrap: wrap; } .zh-kartajm { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.15; overflow-wrap: anywhere; } .zk-tecka { min-width: 12px; width: 12px; height: 12px; padding: 0; } .zk.odlozeno { opacity: .75; } .zk-hromadna { margin: -4px 0 10px; } .zk { touch-action: pan-y; } /* tah do stran = gesto Velínu (připnout / nepřečtené), svisle dál scroll — bez toho prohlížeč gesto zrušil */ /* 📱 Hlavička na telefonu (David 28. 10. 2026 22:44: „horní lišta není celá vidět"): od přidání 💬 vedle zvonečku byl zvoneček s číslem až u kraje. Zhuštění: menší mezery a tlačítka, Práce/Osobní užší; nic se nesmí dostat přes pravý okraj (hlídá E2E „hlavička se vejde"). */ .hl-brand { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } #hl-oblast { flex: 0 1 auto; min-width: 0; } @media (max-width: 519px) { .hl { gap: 4px; padding-left: 12px; padding-right: 10px; } .hl-bell { width: 38px; height: 40px; } .seg-oblast .seg-b { padding: 6px 10px; } } @media (max-width: 379px) { .hl-brand { font-size: 20px; } .seg-oblast .seg-b { padding: 6px 7px; font-size: 13px; letter-spacing: .02em; } .hl-bell { width: 34px; } .hl-bell-n { right: -3px; } } /* 🧭 Plánovač 28. 10. 2026: kvóty hotovo + v plánu (dva pruhy přes sebe), dny volna, plánovat samo */ .plan-bar2 { position: relative; } .plan-bar2 span { position: absolute; left: 0; top: 0; bottom: 0; } .plan-bar2 .plan-bar-plan { opacity: .35; } .plan-kvoty-vysv { margin: -2px 0 8px; } .plan-volno-r { gap: 6px; cursor: default; } .plan-volno-r .row-t, .plan-volno-r .row-d, .plan-auto-r .row-t, .plan-auto-r .row-d { display: block; } .plan-volno-r .ikb.sm { width: 36px; height: 36px; min-height: 36px; border: 0; background: transparent; flex: none; } .plan-auto-r { cursor: pointer; } /* toast: text na max. 2 řádky, tlačítko vždy vidět */ #toast { display: flex; align-items: center; gap: 4px; white-space: normal; border-radius: 18px; line-height: 1.35; } #toast .toast-t { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } #toast .toast-a { flex: none; padding: 6px 4px; } /* 👑 modul Inside (29. 10. 2026) */ .icb-inside { color: var(--accent-ink); background: var(--accent-soft); } /* 🏃 Zóny běžců (modul zony) */ .icb-zony { color: var(--accent-ink); background: var(--accent-soft); } .zon-row.zon-ceka .row-t .pill { color: var(--on-accent-2); background: var(--accent-2); } .zon-uvod { margin: 0 0 var(--s2); } /* 🎤 Otázky do živého večera (moduly/otazky) */ .icb-otazky { color: var(--accent-ink); background: var(--accent-soft); } .otz-uvod { margin: 0 0 var(--s2); } /* 🚩 Nahlášené příspěvky (moduly/nahlaseni) */ .icb-nahlaseni { color: var(--warn); background: var(--warn-soft); } .icb-spory { color: var(--warn); background: var(--warn-soft); } /* ⚖️ Spory z intervals: dvě verze tréninku pod sebou v okně */ .spor-verze { margin-bottom: var(--s1); } .spor-popis { white-space: pre-wrap; max-height: 150px; overflow-y: auto; margin: 6px 0 0; font-family: inherit; } .otz-text { white-space: pre-wrap; overflow-wrap: anywhere; } .otz-ok { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; } .otz-ok:hover, .otz-ok:focus-visible { border-color: var(--accent-2); color: var(--accent-ink); } .otz-done .row-t, .otz-rejected .row-t { color: var(--muted); } /* 🎟 Kódy od partnerů (moduly/kody, David 3. 11. 2026) */ .icb-kody { color: var(--accent-ink); background: var(--accent-soft); } .kod-uvod { margin: 0 0 var(--s2); } .kod-novy { margin: 0 0 var(--s2); } .kod-karta { padding: 14px 16px; margin: 0 0 var(--s2); } .kod-h { display: flex; align-items: center; gap: 8px; } .kod-h h3 { flex: 1; min-width: 0; margin: 0; font-size: 17px; overflow-wrap: anywhere; } .kod-akce { display: flex; gap: 4px; flex: none; } .kod-sub { margin: 4px 0 0; overflow-wrap: anywhere; } .kod-metr { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin: 10px 0 6px; } .kod-metr i { display: block; height: 100%; background: var(--accent-2); } .kod-souhrn { margin: 0 0 10px; font-size: 14px; } .kod-zbyva { color: var(--accent-ink); } .kod-dat { margin: 0 0 8px; } .kod-list { border-top: 1px solid var(--line); } .kod-row { cursor: pointer; } .kod-row .row-d { overflow-wrap: anywhere; } .kod-volny .row-t { color: var(--muted); } .kod-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; } .kod-ok { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; } .kod-ok.on { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent-2); } .kod-ok:hover, .kod-ok:focus-visible { border-color: var(--accent-2); } .kod-hist { margin: var(--s2) 0; } .kod-hist > summary { cursor: pointer; font-weight: 600; padding: 8px 0; } .kod-hist .kod-karta { margin-top: 8px; } .kod-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .kod-2 > * { min-width: 0; } .kod-2 input { min-width: 0; appearance: none; -webkit-appearance: none; } .kod-check { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 12px; font-size: 15px; } .kod-check input { margin-top: 3px; flex: none; } .kod-lide { max-height: 46vh; overflow-y: auto; } .kod-clovek { width: 100%; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; } .kod-pad { padding: 12px 14px; margin: 0; } @media (max-width: 360px) { .kod-2 { grid-template-columns: 1fr; gap: 0; } } /* 🆕 Nový kontakt / běžec (moduly/kontakt, David 3. 11. 2026) */ .kon-druh, .kon-typ { margin: 0 0 10px; } .kon-typ { flex-wrap: wrap; } .kon-uvod { margin: 0 0 var(--s2); } .kon-ch { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; } .kon-ch input { margin-top: 4px; flex: none; } .kon-ch span { display: flex; flex-direction: column; min-width: 0; } .kon-ch small { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; } .kon-log { margin: 8px 0 0; } .kon-krok { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 3px 0; color: var(--text); } .kon-krok .ik { flex: none; color: var(--accent-ink); margin-top: 2px; } .kon-krok.bad, .kon-krok.bad .ik { color: var(--bad); } .kon-krok.warn, .kon-krok.warn .ik { color: var(--warn); } .kon-dal { display: flex; flex-direction: column; gap: 8px; } /* 📆 Rezervace: nastavení (moduly/sluzby, David 3. 11. 2026) */ .sl-uvod { margin: 0 0 var(--s2); } .sl-zap { margin: 0 0 var(--s2); } .sl-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sl-h h2 { margin: 0; } .sl-hakce { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .sl-h .sl-i, .sl-h2 .sl-i { width: 32px; height: 32px; min-height: 32px; color: var(--muted); } .sl-info { background: var(--surface-2); border-radius: 12px; padding: 10px 14px; margin: 6px 0 10px; font-size: 14px; } .sl-info p { margin: 4px 0; overflow-wrap: anywhere; } .sl-warn p { margin: 6px 0; overflow-wrap: anywhere; } .sl-warn .acts { margin: 4px 0 8px; flex-wrap: wrap; } .sl-sluzba { align-items: flex-start; gap: 8px; } .sl-sluzba .row-m { cursor: pointer; min-width: 0; } .sl-sluzba .row-d { overflow-wrap: anywhere; } .sl-off .row-m { opacity: .6; } .sl-volno { color: var(--accent-ink); } .sl-sakce { display: flex; flex-direction: column; gap: 6px; flex: none; } .sl-check { display: flex; gap: 10px; align-items: center; padding: 8px 0; cursor: pointer; } .sl-check > span { min-width: 0; overflow-wrap: anywhere; } .sl-dny { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; } .sl-den { position: relative; } .sl-den input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .sl-den span { display: grid; place-items: center; min-width: 44px; height: 40px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); font-weight: 600; } .sl-den input:checked + span { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent-2); } .sl-den input:focus-visible + span { outline: 2px solid var(--accent-ink); } .sl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sl-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .sl-2 > *, .sl-3 > * { min-width: 0; } .sl-2 input, .sl-3 input, .sl-obed input { min-width: 0; appearance: none; -webkit-appearance: none; } @media (max-width: 360px) { .sl-2, .sl-3 { grid-template-columns: 1fr; gap: 0; } } .sl-souhrn { font-size: 14px; color: var(--accent-ink); margin: 4px 0 10px; } .sl-pod { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; } .sl-h2 { display: flex; align-items: center; gap: 6px; } .sl-h2 .btn { margin-left: auto; } .sl-ceka { margin: 0 0 10px; } .sl-ceka-h { padding: 10px 14px; font-size: 14px; overflow-wrap: anywhere; } .sl-pad { padding: 8px 14px 12px; } .sl-kal { cursor: pointer; gap: 10px; } .sl-kal .row-d { overflow-wrap: anywhere; } .sl-obed { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sl-obed .in { width: 110px; } .sl-pravidla { margin-bottom: var(--s2); } .pole-l .sl-i, .sl-check .sl-i { width: 26px; height: 26px; min-height: 26px; display: inline-grid; place-items: center; vertical-align: middle; padding: 0; color: var(--muted); } .odkaz-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-ink); text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; text-align: left; } .ins-row.ins-koucink .icb-inside, .ins-row.ins-nic .icb-inside, .icb-inside.ins-off { color: var(--muted); background: var(--surface-3); } .ins-row { cursor: pointer; } .ins-row > .ik:last-child { flex: none; color: var(--muted); } .ins-uvod { margin: 0 0 4px; } .ins-hromadne { width: 100%; margin: 0 0 10px; } .ins-hledat { margin: 0 0 10px; } .ins-hledat .in { width: 100%; box-sizing: border-box; } .ins-nic { margin: 4px 0 10px; } .ins-filtr { margin-bottom: 10px; } .ins-zfiltru { display: block; background: none; border: 0; padding: 2px 0 10px; font: inherit; font-size: 14px; cursor: pointer; text-align: left; } .ins-nahled { margin: 4px 0 0; font-size: 14px; color: var(--muted); } .ins-delky { flex-wrap: wrap; } /* 🧹 balík D (David 1. 11. 2026): okno úkolu — Hotovo a ⋯ v hlavičce, čipy na víc řádků, historie, návrh akce */ .sheet-hl { display: flex; align-items: center; gap: 2px; margin-top: 8px; flex: none; } .sheet-hl .btn.sm { min-height: 40px; padding: 0 12px; margin-right: 4px; } .sheet-h h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 359px) { .sheet-hl ~ .sheet-velikost { display: none; } .sheet-hl .btn.sm { padding: 0 10px; } } .chips-wrap.zalom .chips-row { flex-wrap: wrap; overflow: visible; margin: 0; padding-left: 0; padding-right: 0; scroll-snap-type: none; } .chips-wrap.zalom .chip-btn { max-width: 100%; } .uk-historie { margin-top: var(--s2); } .uk-navrh-akce { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: var(--s2); padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: 12px; } .row.row-bad, .row.row-bad .ik { color: var(--bad); } /* 🧹 D3 hromadný výběr: lišta dole nad spodním menu, vybraná karta zvýrazněná, „Vybrat vše" jen v režimu */ .sekce > summary .sekce-vyber { display: none; } .uk-vyber-on .sekce > summary .sekce-vyber { display: inline-flex; } .uk-vyber-on .sekce > summary .sekce-vyber:not(:first-of-type) { margin-left: 6px; } .task { -webkit-touch-callout: none; } .task.vybrany { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent-fill); } .uk-vyber-on .task .chk { border-style: dashed; } .task.vybrany .chk { background: var(--accent-fill); border-color: var(--accent-fill); border-style: solid; color: var(--on-accent); } .uk-vyber-on .fab { display: none; } .uk-vyber-lista { position: fixed; left: 8px; right: 8px; bottom: calc(var(--tab-h) + var(--sa-b) + 8px); z-index: 30; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow); padding: 6px; } .uk-vyber-h { display: flex; align-items: center; gap: 8px; padding: 0 4px 4px; font-size: 15px; } .uk-vyber-akce { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; } .uk-vyber-b { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding: 6px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font-size: 12px; cursor: pointer; min-width: 0; } .uk-vyber-b span { max-width: 100%; text-align: center; line-height: 1.15; overflow-wrap: anywhere; } /* „Jiný den" se na 320 px zalomí, neusekne */ .uk-vyber-on .sekce > summary .sekce-vyber { white-space: nowrap; padding: 4px 10px; } .uk-vyber-on #view { padding-bottom: 150px; } .uk-vyber-b:hover { background: var(--surface-2); } .uk-vyber-b.bad { color: var(--bad); } @media (min-width: 768px) { .uk-vyber-lista { left: calc(var(--rail) + 24px); right: auto; width: min(560px, calc(100vw - var(--rail) - 48px)); bottom: 24px; } } @media (hover: hover) and (pointer: fine) { .uk-vyber-on .task-hover { display: none !important; } } .uk-vyber-on .sekce > summary .sekce-akce:not(.sekce-vyber) { display: none; } /* ve výběru jen „Vybrat vše" (Roztřídit by na 320 px přetekl) */ /* 💭 E1 Někdy: nabídka v hlavičce Bez termínu */ .sekce > summary .sekce-x { width: 32px; height: 32px; margin-left: 4px; border-radius: 10px; } .sekce > summary .sekce-akce + .sekce-x { margin-left: 4px; } /* 🗓 E2 týdenní přehled: karta na Dnes + průvodce přes celou obrazovku (pod okny úkolů a pod Roztřídit) */ .tp-karta-h { display: flex; gap: 12px; align-items: flex-start; } .tp-karta-h > .ik { flex: none; margin-top: 2px; color: var(--accent-ink); } .tp-karta .acts { margin-top: var(--s2); } .tp { position: fixed; inset: 0; z-index: 44; background: var(--bg); display: flex; flex-direction: column; padding: calc(var(--sa-t) + 8px) 16px calc(var(--sa-b) + 12px); } .tp-h { display: flex; align-items: center; gap: 10px; min-height: 48px; } .tp-krok { font-family: var(--font-cond); font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; } .tp-tecky { display: flex; gap: 5px; margin-left: auto; } .tp-tecky i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); } .tp-tecky i.hot { background: var(--accent-2); } .tp-tecky i.ted { background: var(--accent-fill); width: 18px; border-radius: 4px; } .tp-b { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 16px; min-height: 0; } .tp-b h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.15; margin: 4px 0 6px; } .tp-b > .card, .tp-den { margin-top: var(--s2); } .tp-den-h { font-family: var(--font-cond); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; gap: 6px; align-items: center; } .tp-volno { margin: 4px 0 0; } .tp-ok { display: flex; gap: 8px; align-items: center; color: var(--accent-ink); font-weight: 600; margin-top: var(--s2); } .tp-ceka .btn, .tp-nekdy .btn { flex: none; } .tp-proj { padding: 12px; } .tp-proj-h { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; min-width: 0; } .tp-proj-h b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tp-hlavni { display: flex; gap: 10px; align-items: center; padding: 14px; background: var(--accent-soft); color: var(--accent-ink); } .tp-f { display: flex; gap: 8px; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line); } .tp-f .btn { flex: 1; max-width: 220px; } .nast-h { font-family: var(--font-cond); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 20px 0 6px; } .nast-sekce .nast-h:first-child { margin-top: 4px; } .tp-nast-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 8px 0; } .pole-radek { display: flex; gap: 10px; align-items: center; margin: 8px 0; } @media (min-width: 768px) { .tp { padding-left: calc(var(--rail) + 24px); padding-right: 24px; } .tp-b, .tp-h, .tp-f { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; } } /* 🖥 E3 počítač: ≥ 1100 px tři sloupce — menu · seznam · panel úkolu vpravo (peek), bez úkolu „Dnes v kostce" */ .uk-kostka { display: none; } @media (min-width: 1100px) { .sheet-bg.sheet-peek { left: auto; right: 0; top: 0; width: 440px; height: 100dvh; background: transparent; padding: 0; align-items: stretch; pointer-events: none; } .sheet-bg.sheet-peek .sheet { pointer-events: auto; max-width: none; height: 100%; max-height: none; border-radius: 0; border: 0; border-left: 1px solid var(--line); transform: none; } .sheet-bg.sheet-peek .sheet-velikost, .sheet-bg.sheet-peek .sheet-grip { display: none; } .sheet-bg.sheet-peek .sheet-b { flex: 1; } html.peek-on main#view, main#view:has(.uk-kostka) { margin-right: 440px; max-width: min(752px, calc(100vw - var(--rail) - 440px)); min-width: 0; } html.peek-on .uk-kostka { display: none !important; } .uk-kostka { display: block; position: fixed; right: 0; top: 0; bottom: 0; width: 440px; padding: calc(var(--hl-h, 64px) + 16px) 24px 24px; border-left: 1px solid var(--line); background: var(--bg-2); overflow-y: auto; z-index: 5; } .uk-kostka-h { font-family: var(--font-display); font-weight: 700; font-size: 22px; } .uk-kostka-hl { display: flex; gap: 8px; align-items: center; margin: 12px 0; padding: 12px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; } .uk-kostka-osa { margin: 12px 0; display: flex; flex-direction: column; gap: 6px; } .uk-kostka-r { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; } .uk-kostka-r span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.peek-on .fab { right: calc(440px + 32px); } } /* E4 úpravy v řádku: datum je tlačítko, název přepisovaný na místě */ .task-datum { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; } .task-t.upravuji { white-space: normal; overflow: visible; outline: 2px solid var(--accent-fill); outline-offset: 2px; border-radius: 6px; cursor: text; } /* E5 klávesy: kurzor v seznamu, paleta ⌘K, přehled zkratek */ .task.kurzor { box-shadow: inset 0 0 0 2px var(--accent-fill); } .sheet-paleta .sheet-b { padding-top: 4px; } .paleta-in { width: 100%; font-size: 17px; } .paleta-vys { margin-top: 8px; max-height: min(60vh, 520px); overflow-y: auto; } .paleta-sk { font-family: var(--font-cond); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 10px 4px 2px; } .paleta-r { border-radius: 12px; } .paleta-r.vyb { background: var(--accent-soft); } .paleta-r kbd, .zkr kbd { margin-left: auto; font-family: var(--font-cond); font-size: 13px; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--muted); } .paleta-tip { margin-top: 8px; } .zkratky { display: grid; gap: 6px; } .zkr { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 10px; } .zkr kbd { margin-left: 0; justify-self: start; } /* 📋 Dotazníky a ⭐ reference (moduly/dotazniky, David 2. 11. 2026) */ .icb-dotazniky { color: var(--accent-ink); background: var(--accent-soft); } .dz-uvod { margin: 0 0 var(--s2); } .dz-row { color: inherit; text-decoration: none; } .dz-row > .ik:last-child, .dz-odp > .ik:last-child, .dz-refrow > .ik:last-child { flex: none; color: var(--muted); } .dz-off .row-t, .dz-hidden .row-t, .dz-hotovo .row-t { color: var(--muted); } .pill.dz-nove { color: var(--on-accent-2); background: var(--accent-2); } .dz-sk { margin: var(--s2) 0; } .dz-sk > summary { cursor: pointer; font-family: var(--font-cond); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 8px 0; } .dz-zpet { display: inline-block; margin: 0 0 var(--s1); } .dz-h { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.2; margin: 0; overflow-wrap: anywhere; } .dz-nadpis { margin: 2px 0 0; } .dz-info { display: grid; gap: 6px; padding: 12px 14px; margin: var(--s2) 0; } .dz-info-r { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .dz-info .sch-volba { margin: 2px 0; } .dz-seg { margin: 0 0 var(--s2); } .dz-q { padding: 12px 14px; margin: 0 0 10px; } .dz-q-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 4px; } .dz-q-h b { min-width: 0; overflow-wrap: anywhere; } .dz-q-h .small { flex: none; } .dz-prumer { margin: 4px 0 6px; font-size: 15px; } .dz-prumer b { color: var(--accent-ink); } .dz-bar { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--s1); padding: 8px 10px; margin-top: 6px; border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; font-size: 14px; } .dz-bar > i { position: absolute; top: 0; bottom: 0; left: 0; width: var(--p, 0%); background: var(--accent-soft); } .dz-bar.dz-top > i { background: var(--neon-soft); box-shadow: inset -2px 0 0 var(--accent-2); } .dz-bar-t { position: relative; min-width: 0; overflow-wrap: anywhere; } .dz-bar-n { position: relative; flex: none; color: var(--muted); font-variant-numeric: tabular-nums; } .dz-histo { display: grid; grid-template-columns: repeat(var(--sl, 11), minmax(0, 1fr)); grid-auto-rows: 120px; gap: 3px; margin: 8px 0 2px; } .dz-sl { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; height: 100%; } .dz-sl > b { font-size: 12px; color: var(--muted); min-height: 16px; font-variant-numeric: tabular-nums; } .dz-sl > i { display: block; width: 100%; height: calc(var(--p, 0%) * .72); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--accent-2); } .dz-sl > span { font-size: 12px; color: var(--muted); padding-top: 2px; } .dz-pozn { margin: 6px 0 0; } .dz-texty { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; } .dz-texty li { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); } .dz-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; } .dz-vic > summary { cursor: pointer; margin: 8px 0 0; font-size: 14px; } .dz-tab-akce { margin: 0 0 10px; } .dz-tab-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); max-width: 100%; } .dz-tab { border-collapse: collapse; font-size: 13px; min-width: 100%; } .dz-tab th, .dz-tab td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; min-width: 110px; max-width: 260px; overflow-wrap: anywhere; } .dz-tab th { background: var(--surface-2); color: var(--muted); font-weight: 600; } .dz-tab tbody tr { cursor: pointer; } .dz-tab tbody tr:hover td { background: var(--surface-2); } .dz-ans { display: grid; gap: 10px; margin: 0 0 var(--s2); } .dz-ans dt { font-size: 13px; color: var(--muted); } .dz-ans dd { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } .banner.dz-ref { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; } .dz-stitky { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; } .dz-stitky .chip-btn { max-width: 100%; } .dz-foto { display: block; max-width: 100%; max-height: 220px; border-radius: var(--r-sm); margin: 8px 0 0; object-fit: cover; } .dz-reftext { white-space: normal; overflow-wrap: anywhere; } .dz-refrow, .dz-odp { cursor: pointer; } .dz-tab th:first-child, .dz-tab td:first-child { min-width: 0; white-space: nowrap; } .dz-filtr { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 var(--s1); padding-bottom: 2px; } .dz-hv { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; } .dz-hv .ik { width: 20px; height: 20px; } .dz-hv.on { color: var(--on-accent-2); background: var(--accent-2); border-color: var(--accent-2); } .dz-stara dt { font-style: italic; } /* 📋 fáze 9: šablony projektů */ .sab-ze { margin-bottom: 8px; } .sab-nahled { max-height: 42vh; overflow-y: auto; margin-top: 6px; } .sab-pol { gap: 8px; } .sab-posun { width: 64px; flex: none; text-align: center; min-height: 40px; padding: 4px 6px; } /* ✍️ fáze 10: formátování poznámek — lišta přilepená dole (nad klávesnicí), náhled */ .pf-lista { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 4px; align-items: center; padding: 6px 0; margin-top: 6px; background: var(--surface); border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .pf-lista::-webkit-scrollbar { display: none; } .pf-b { flex: none; min-width: 44px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); font-family: var(--font-cond); font-weight: 700; font-size: 15px; cursor: pointer; } .pf-b:disabled { opacity: .4; cursor: default; } .pf-b .pf-z { pointer-events: none; } .pf-b[data-pf="tucne"] .pf-z { font-weight: 800; } .pf-b[data-pf="nadpis"] .pf-z { font-size: 17px; } .pf-prepni { margin-left: auto; color: var(--accent-ink); } .pf-nahled { padding: 10px 2px; min-height: 96px; line-height: 1.5; cursor: text; overflow-wrap: anywhere; } .pf-nahled .pf-h1 { font-family: var(--font-display); font-size: 22px; line-height: 1.2; margin: 6px 0 4px; } .pf-nahled .pf-h2 { font-family: var(--font-display); font-size: 18px; line-height: 1.25; margin: 6px 0 4px; } .pf-nahled .pf-p { margin: 0 0 8px; } .pf-nahled .pf-ul, .pf-nahled .pf-ol { margin: 0 0 8px; padding-left: 22px; } .pf-nahled li { margin: 2px 0; } .pf-nahled a { color: var(--accent-ink); text-decoration: underline; } /* ── 📞 Hovory: zápisy z hovorů se svěřenci (David 2. 11. 2026) ── */ .icb-hovory { color: var(--accent-ink); background: var(--accent-soft); } /* 💰 Finance (3. 11. 2026): platby, svěřenci, náklady; „cink" = létající částka po nové platbě */ .icb-finance { color: var(--accent-ink); background: var(--accent-soft); } .icb-finance.fin-nespar { color: var(--warn); background: var(--warn-soft); } .fin-warn-t { color: var(--warn); font-weight: 600; } .chip.chip-warn { color: var(--warn); border-color: var(--warn); } .fin-velke { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -.01em; } .fin-velke .muted { font-size: 18px; font-weight: 600; } .fin-dnes { text-align: left; } .fin-castka { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 34px; color: var(--accent-ink); margin: 4px 0 6px; } .fin-castka.fin-vydaj { color: var(--text); } .fin-mes-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 10px; } .fin-mes-nav b { font-family: 'Baloo 2', sans-serif; font-size: 20px; } .fin-kary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .fin-kar { background: var(--surface-2); border-radius: 12px; padding: 10px; min-width: 0; } .fin-kar-t { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .fin-kar-v { font-weight: 700; font-size: 17px; margin: 2px 0; overflow-wrap: anywhere; } @media (max-width: 360px) { .fin-kary { grid-template-columns: 1fr; } } .fin-bar { height: 8px; border-radius: 6px; background: var(--surface-3); overflow: hidden; margin: 8px 0; } .fin-bar-in { height: 100%; background: var(--accent); border-radius: 6px; transition: width .4s; } .fin-bar-in.fin-bar-warn { background: var(--warn); } .fin-sv-hl .acts, .fin-strop .acts { margin-top: 6px; } .fin-strop { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; } .fin-feats { margin-top: 8px; } .fin-feat { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--border); font-size: 14px; } .fin-feat:first-child { border-top: 0; } .fin-okno .mail-f { margin: 6px 0; } .fin-cink { position: fixed; left: 50%; top: 38%; transform: translate(-50%, 0) scale(.9); z-index: 1200; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 26px; box-shadow: var(--shadow-2, var(--shadow)); pointer-events: none; animation: fin-cink-in .5s cubic-bezier(.2,1.4,.4,1) both; } .fin-cink .fin-cink-ik .ik { width: 28px; height: 28px; animation: fin-cink-mince .9s ease-in-out infinite alternate; } .fin-cink.fin-cink-pryc { animation: fin-cink-out .6s ease-in both; } @keyframes fin-cink-in { from { opacity: 0; transform: translate(-50%, 24px) scale(.6); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } } @keyframes fin-cink-out { to { opacity: 0; transform: translate(-50%, -40px) scale(.9); } } @keyframes fin-cink-mince { from { transform: rotateY(0) translateY(0); } to { transform: rotateY(180deg) translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .fin-cink, .fin-cink .fin-cink-ik .ik { animation: none; } } .ins-beztel { color: var(--warn); font-weight: 600; } .ins-beztel-b { width: 100%; text-align: left; cursor: pointer; font: inherit; } .fin-sv-skup { margin: 10px 0 2px; } .fin-sv-skup-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; } .fin-sv-skup-h span { font-size: 13px; color: var(--muted); } /* 📬 Doručené (2. 11. 2026): maily k odpovědi — ikona, okno mailu, seznamy Nikdy / Vždy v nastavení */ .icb-dorucene { color: var(--accent-ink); background: var(--accent-soft); } .dor-okno .dor-od { margin: 8px 0 4px; font-size: 15px; } .dor-okno .dor-shrnuti { margin: 0 0 8px; } .dor-okno .dor-mail { margin: 6px 0 10px; } .dor-okno .dor-mail summary { cursor: pointer; font-size: 14px; } .dor-okno .mail-text { max-height: 40vh; overflow: auto; } .dor-okno .dor-ai, .dor-okno .dor-dalsi, .dor-okno .dor-odkazy { margin: 6px 0 10px; flex-wrap: wrap; } .dor-okno .dor-pokyn { margin: 0 0 10px; } .dor-seznam .dor-pridat { display: flex; gap: 8px; align-items: center; } .dor-seznam .dor-pridat .in { flex: 1; min-width: 0; } .dor-stav .acts { margin-top: 6px; } .hv-uvod { margin: 0 0 var(--s2); } .hv-lista { display: flex; gap: var(--s1); align-items: center; margin-bottom: var(--s2); } .hv-hledat { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; } .hv-hledat .ik { flex: none; color: var(--muted); } .hv-hledat .in { min-width: 0; } .hv-lista .btn .ik { width: 20px; height: 20px; } @media (max-width: 359px) { .hv-lista .btn span { display: none; } .hv-lista .btn { padding-inline: 12px; } } .hv-hl { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s2); } .hv-shrnuti { font-size: 17px; line-height: 1.45; margin: 0 0 var(--s2); white-space: pre-wrap; overflow-wrap: anywhere; } .hv-card { padding: 10px 14px; } .hv-ul { margin: 0; padding-left: 20px; } .hv-ul li { padding: 4px 0; overflow-wrap: anywhere; } .hv-ul li + li { border-top: 1px solid var(--line); } .hv-ukol .btn { flex: none; } .hv-zprava, .hv-prepis-text { font-family: var(--font-body); font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; max-height: 40vh; overflow: auto; } .hv-prepis { margin-top: var(--s2); } .hv-prepis summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 0; color: var(--muted); list-style: none; } .hv-prepis summary::-webkit-details-marker { display: none; } .hv-prepis summary .pill { margin-left: auto; } .hv-prepis .hv-prepis-text { max-height: 50vh; } .hv-ed-radek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 150px); gap: var(--s1); } @media (max-width: 359px) { .hv-ed-radek { grid-template-columns: 1fr; } } .hv-kdo { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; min-width: 0; } .hv-kdo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv-kdo .ik { flex: none; color: var(--muted); } .hv-ta { resize: none; overflow: hidden; min-height: 44px; line-height: 1.4; } .hv-ai-akce { align-items: center; margin: 0 0 var(--s2); } .hv-ai-akce [data-hv-ai-stav]:empty { display: none; } .hv-ed-zapis { border-top: 1px solid var(--line); padding-top: var(--s2); } /* 💰 Finance — Zaplaceno / spárování, K vyřízení, Rok (3. 11. 2026) */ .fin-volba { cursor: pointer; align-items: flex-start; } .fin-volba input[type=radio] { margin: 4px 10px 0 0; accent-color: var(--accent); flex: none; } .fin-volba-off { opacity: .6; cursor: default; } .fin-ok-t { color: var(--accent-ink); font-weight: 700; } .fin-rok { padding: 10px 12px; } .fin-rok-r { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 3px 0; } .fin-rok-off { opacity: .45; } .fin-rok-m { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; color: var(--muted); } .fin-rok-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fin-rok-b i { display: block; height: 6px; border-radius: 4px; min-width: 2px; } .fin-rok-p { background: var(--accent); } .fin-rok-v { background: var(--surface-3); } .fin-rok-c { text-align: right; font-size: 13px; line-height: 1.15; white-space: nowrap; } .fin-rok-c small { display: block; color: var(--muted); } .fin-pruh { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin-top: 6px; } .fin-pruh i { display: block; height: 100%; background: var(--accent); } .fin-pruh i.fin-pruh-pres { background: var(--warn); } @media (max-width: 360px) { .fin-rok-r { grid-template-columns: 30px minmax(0, 1fr) auto; } .fin-rok-c { font-size: 12px; } } /* 🏢 Subjekty — hlavičky na zkopírování (David 4. 11. 2026) */ .sub-uvod { margin: 0 0 var(--s2); } .sub-karta { margin: 0 0 var(--s2); padding: 14px 0 4px; } .sub-h { display: flex; align-items: center; gap: 8px; padding: 0 16px; } .sub-h h3 { flex: 1; min-width: 0; margin: 0; font-size: 18px; overflow-wrap: anywhere; } .sub-platce { flex: none; background: var(--accent-2); color: var(--on-accent-2); } .sub-akce { display: flex; gap: 4px; flex: none; } .sub-akce .ikb { width: 36px; height: 36px; min-height: 36px; } .sub-forma { margin: 4px 16px 0; overflow-wrap: anywhere; } .sub-tl { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; } .sub-list { border-top: 1px solid var(--line); } .sub-row { padding: 10px 16px; } .sub-row .row-d { font-size: 12px; } .sub-v { font-weight: 600; overflow-wrap: anywhere; user-select: text; } .sub-dole { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s2) 0; } .sub-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sub-2 > * { min-width: 0; } .sub-2 input, .sub-2 select { min-width: 0; appearance: none; -webkit-appearance: none; } .sub-ucet { padding: 8px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; } .sub-ucet:first-child { padding-top: 0; } .sub-uc-r { display: flex; gap: 8px; } .sub-uc-r .in { flex: 1; min-width: 0; } .sub-rucne { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; } @media (max-width: 360px) { .sub-2 { grid-template-columns: 1fr; } } .sub-zfak { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; } .sub-zfak a { color: var(--accent-ink); font-weight: 600; }