/* ═══════════════════════════════════════════════════════════════ abcAgenda — design systém abcTitulky / abcCash Tokeny 1:1 z design-tokens.css. Světlý režim default, tmavý přes (persistence v localStorage). ═══════════════════════════════════════════════════════════════ */ :root { --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --white: #FFFFFF; --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937; --gray-900: #111827; --gray-950: #030712; --primary-50: #FEF2F2; --primary-100: #FEE2E2; --primary-200: #FECACA; --primary-300: #FCA5A5; --primary-400: #F87171; --primary-500: #EF4444; --primary-600: #DC2626; --primary-700: #B91C1C; --primary-800: #991B1B; --success-50: #ECFDF5; --success-100: #D1FAE5; --success-500: #10B981; --success-600: #059669; --success-700: #047857; --warning-50: #FFFBEB; --warning-100: #FEF3C7; --warning-500: #F59E0B; --warning-600: #D97706; --warning-700: #B45309; --danger-50: #FEF2F2; --danger-100: #FEE2E2; --danger-500: #EF4444; --danger-600: #DC2626; --danger-700: #B91C1C; --info-50: #EFF6FF; --info-100: #DBEAFE; --info-500: #3B82F6; --info-600: #2563EB; --info-700: #1D4ED8; --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --bg: var(--gray-50); --surface: var(--white); --surface-2: var(--gray-50); --surface-3: var(--gray-100); --surface-hover: var(--gray-100); --border: var(--gray-200); --border-hover: var(--gray-300); --text: var(--gray-900); --text-secondary: var(--gray-600); --text-muted: var(--gray-400); --text-faint: var(--gray-300); --accent: var(--primary-600); --accent-hover: var(--primary-700); --accent-soft: rgba(220, 38, 38, 0.07); --accent-softer: rgba(220, 38, 38, 0.04); --accent-border: rgba(220, 38, 38, 0.25); --green: var(--success-600); --green-soft: rgba(16, 185, 129, 0.07); --green-border: rgba(16, 185, 129, 0.3); --green-text: var(--success-700); --yellow: var(--warning-600); --yellow-soft: rgba(245, 158, 11, 0.07); --yellow-border: rgba(245, 158, 11, 0.3); --red: var(--danger-600); --red-soft: rgba(239, 68, 68, 0.06); --red-border: rgba(239, 68, 68, 0.28); --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05); --shadow-md: 0 1px 3px 0 rgba(0,0,0,.08), 0 1px 2px -1px rgba(0,0,0,.06); --topbar-height: 50px; --sidebar-width: 230px; /* Agenda má široké tabulky a obrazovku porady, proto širší sloupec než 680px z originálu. Úzké formuláře používají .wrap-narrow. */ --content-width: 1120px; --narrow-width: 680px; } :root[data-theme="dark"] { --bg: #09090b; --surface: #18181b; --surface-2: #27272a; --surface-3: #3f3f46; --surface-hover: #27272a; --border: #27272a; --border-hover: #3f3f46; --text: #fafafa; --text-secondary: #d4d4d8; --text-muted: #a1a1aa; --text-faint: #71717a; --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.5); --shadow-md: 0 4px 8px -2px rgba(0,0,0,.6), 0 2px 4px -2px rgba(0,0,0,.4); --gray-50: #18181b; --gray-100: #27272a; --gray-200: #3f3f46; --gray-300: #52525b; --gray-400: #71717a; --gray-500: #a1a1aa; --gray-600: #d4d4d8; --gray-700: #e4e4e7; --gray-800: #f4f4f5; --gray-900: #fafafa; --gray-950: #ffffff; --white: #18181b; } /* ── Základ ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { transition: background-color .2s ease, color .2s ease; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; } h1 { font-size: 22px; } h2 { font-size: 15px; } h3 { font-size: 13px; } p { margin: 0 0 10px; } p:last-child { margin-bottom: 0; } svg { flex: none; } /* ── Skořápka: topbar + sidebar ─────────────────────────────── */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-height); background: var(--surface); border-bottom: 1px solid var(--border); z-index: 40; } .topbar-inner { height: 100%; display: flex; align-items: center; gap: 14px; padding: 0 24px; } .brand { display: flex; align-items: center; gap: 10px; } .brand img { height: 26px; width: auto; } .brand-text { font-weight: 600; font-size: 15px; color: var(--text); } /* Prepinani variant loga. Pravidla pro rozmery vyse zamerne NEnastavuji display, jinak by prebila tyto (vyssi specificita) a zobrazila obe. Platí i pro .login-brand na prihlasovaci strance. */ .logo-light { display: block; } .logo-dark { display: none; } [data-theme="dark"] .logo-light { display: none; } [data-theme="dark"] .logo-dark { display: block; } .topbar-spacer { flex: 1; } .user-menu { position: relative; } .user-menu-btn { display: inline-flex; padding: 0; background: none; border: 0; cursor: pointer; border-radius: 50%; } .user-menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .user-menu-panel { position: absolute; top: calc(100% + 9px); right: 0; min-width: 232px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md), 0 8px 24px rgba(0,0,0,.08); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 50; } .user-menu.is-open .user-menu-panel { opacity: 1; visibility: visible; transform: translateY(0); } .user-menu-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; } .user-menu-name { font-size: 14px; font-weight: 600; line-height: 1.3; } .user-menu-mail { font-size: 12px; color: var(--text-muted); } .user-menu-panel form { margin: 0; border-top: 1px solid var(--border); } .user-menu-logout { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; background: none; border: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); color: var(--accent); font-family: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .12s; } .user-menu-logout:hover { background: var(--accent-soft); } .user-menu-logout svg { width: 16px; height: 16px; stroke-width: 2; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: 1px solid var(--border-hover); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; box-shadow: var(--shadow-sm); transition: all .15s; } .icon-btn:hover { border-color: var(--gray-400); background: var(--surface-2); } .icon-btn svg { width: 15px; height: 15px; stroke-width: 1.75; opacity: .75; } .avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; text-transform: uppercase; } .sidebar { position: fixed; top: var(--topbar-height); bottom: 0; left: 0; width: var(--sidebar-width); padding: 16px 10px; background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; z-index: 30; } .nav { display: flex; flex-direction: column; } .nav-group { padding: 14px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .nav-group:first-child { padding-top: 2px; } .nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 6px; border-radius: var(--radius); color: var(--text); font-size: 14px; transition: background-color .12s, color .12s; } .nav a svg { width: 18px; height: 18px; stroke-width: 1.75; color: var(--text-secondary); } .nav a:hover { background: var(--surface-3); color: var(--text); } .nav a[aria-current="page"] { background: var(--surface-3); color: var(--accent); font-weight: 500; } .nav a[aria-current="page"] svg { color: var(--accent); } /* ── Obsah ──────────────────────────────────────────────────── */ .wrap, .wrap-narrow { margin: var(--topbar-height) auto 0; padding: 28px 24px 60px; padding-left: calc(var(--sidebar-width) + 24px); max-width: calc(var(--content-width) + var(--sidebar-width)); } .wrap-narrow { max-width: calc(var(--narrow-width) + var(--sidebar-width)); } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .page-head h1 { margin-bottom: 3px; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 10px; } .hint, .field-hint, .stat-note, .meta { font-size: 12px; color: var(--text-secondary); } .field-hint { margin-top: 5px; } /* ── Karty ──────────────────────────────────────────────────── */ .card, .box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); } .card + .card, .card + .box, .box + .card { margin-top: 16px; } /* V mrizce rozestupy resi gap. Sourozenecky margin by druhou kartu posunul dolu a mrizka by ji o ten posun zkratila. */ .grid > .card + .card, .grid > .card + .box, .grid > .box + .card { margin-top: 0; } .grid > .card, .grid > .box, .grid > .stat { height: 100%; } .card-tight { padding: 14px 16px; } .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } /* ── Text ───────────────────────────────────────────────────── */ .muted { color: var(--text-secondary); } .tiny { font-size: 11px; } .small { font-size: 12px; } .strong { font-weight: 600; } .mono, .num, .mark, .clock { font-family: var(--font-mono); } .num { font-variant-numeric: tabular-nums; } .pre-wrap { white-space: pre-wrap; } .overdue { color: var(--red); font-weight: 500; } /* Label s checkboxem — text musí být na střed vůči poli. */ label.check { display: inline-flex; /* flex-start, ne center: u dvouřádkového popisku (formulář tématu) patří checkbox k prvnímu řádku, ne doprostřed obou. Výška řádku 14 x 1.25 = 17,5 px proti 18px checkboxu, takže u jednořádkového popisku to vyjde na střed stejně. */ align-items: flex-start; gap: 9px; margin: 0; font-size: 14px; font-weight: 400; line-height: 1.25; color: var(--text); cursor: pointer; user-select: none; } label.check + label.check { margin-top: 8px; } label.check input[type="checkbox"] { margin: 0; } label.check > span { display: block; } label.check .field-hint { display: block; margin-top: 3px; } .empty strong { display: block; margin-bottom: 4px; color: var(--text-secondary); } .empty { padding: 22px; border: 1px dashed var(--border-hover); border-radius: var(--radius); color: var(--text-muted); font-size: 13px; text-align: center; } /* ── Tlačítka ───────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; /* Vyska musi sedet s inputy a selecty, jinak filtr v radku neladi. */ min-height: 44px; padding: 9px 16px; background: var(--surface); border: 1px solid var(--border-hover); border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; cursor: pointer; box-shadow: var(--shadow-sm); transition: all .15s; } .btn:hover { border-color: var(--gray-400); background: var(--surface-2); color: var(--text); } .btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; } .btn svg { width: 14px; height: 14px; stroke-width: 1.75; } .btn-sm { min-height: 32px; padding: 6px 11px; font-size: 12px; border-radius: var(--radius-sm); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; font-size: 14px; } .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .btn-primary:hover, .btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } .btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-secondary); } .btn-ghost:hover { background: var(--surface-3); border-color: transparent; color: var(--text); } .btn-danger { color: var(--red); border-color: var(--red-border); } .btn-danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .inline-form { display: inline-flex; gap: 8px; margin: 0; } /* ── Formuláře ──────────────────────────────────────────────── */ .field { margin-bottom: 18px; } .field:last-child { margin-bottom: 0; } /* :not(.check) — jinak by tohle pravidlo (0,1,1) přebilo .check (0,1,0) a label s checkboxem by zůstal blokový, takže by text nebyl na střed. */ .field label:not(.check), .field-row label:not(.check) { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--text-secondary); } .field-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; } .field-row > * { flex: 1 1 200px; min-width: 0; } .field-row .field { margin-bottom: 0; } input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="date"], input[type="number"], input[type="tel"], input[type="url"], select, textarea { width: 100%; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: 14px; box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; } input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="date"], input[type="number"], select { min-height: 44px; } input[type="search"] { -webkit-appearance: none; appearance: none; } textarea { min-height: 96px; line-height: 1.6; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-softer); } ::placeholder { color: var(--text-faint); } input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; background: var(--surface); border: 1px solid var(--border-hover); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); cursor: pointer; transition: background-color .15s, border-color .15s; } input[type="checkbox"]:checked { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat; border-color: var(--accent); } input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-softer); } /* ── Tabulky ────────────────────────────────────────────────── */ .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: left; white-space: nowrap; } .table td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .table tr:last-child td { border-bottom: 0; } .table th:first-child, .table td:first-child { padding-left: 0; } .table th:last-child, .table td:last-child { padding-right: 0; } .table-hover tbody tr:hover { background: var(--surface-2); } /* Ciselne sloupce zarovnane na stred vcetne hlavicky. */ .table th.num, .table td.num { text-align: center; } .table th.num:last-child, .table td.num:last-child { padding-right: 0; } /* ── Štítky ─────────────────────────────────────────────────── */ .tags { display: flex; flex-wrap: wrap; gap: 6px; } .tag { display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text-secondary); font-size: 11px; font-weight: 500; white-space: nowrap; } .tag-neutral { } /* výchozní tón — stejný jako .tag */ .tag-muted { color: var(--text-muted); } .tag-accent { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); } .tag-success { background: var(--green-soft); border-color: var(--green-border); color: var(--green-text); } .tag-warning { background: var(--yellow-soft); border-color: var(--yellow-border); color: var(--warning-700); } .tag-danger { background: var(--red-soft); border-color: var(--red-border); color: var(--red); } /* ── RAG stav a trend ───────────────────────────────────────── */ .rag { display: inline-flex; align-items: center; gap: 5px; } .rag-badge { display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid var(--border); border-radius: 7px; font-size: 11px; font-weight: 500; white-space: nowrap; } .rag-dot { width: 9px; height: 9px; border-radius: 50%; opacity: .6; } .rag-badge.rag-green { background: var(--green-soft); border-color: var(--green-border); color: var(--green-text); } .rag-badge.rag-amber { background: var(--yellow-soft); border-color: var(--yellow-border); color: var(--warning-700); } .rag-badge.rag-red { background: var(--red-soft); border-color: var(--red-border); color: var(--red); } .rag-badge.rag-none { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); } .rag-dot.rag-green { background: var(--success-500); } .rag-dot.rag-amber { background: var(--warning-500); } .rag-dot.rag-red { background: var(--danger-500); } .rag-dot.rag-none { background: var(--border-hover); } .rag-arrow { font-size: 11px; line-height: 1; color: var(--text-muted); } .rag-arrow.is-worse { color: var(--red); font-weight: 700; } .rag-arrow.is-better { color: var(--green); } /* ── Statistiky a mřížky ────────────────────────────────────── */ .grid { display: grid; gap: 14px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); text-align: center; } .stat-label { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); } .stat-value { margin: 6px 0 2px; font-family: var(--font-mono); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; } .stat.is-warn .stat-value { color: var(--yellow); } .stat.is-bad .stat-value { color: var(--red); } /* ── Obrazovka porady ───────────────────────────────────────── */ .meeting-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .clock { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; } .clock-limit { font-size: 12px; color: var(--text-muted); } .progress-line { height: 4px; margin-top: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .progress-line > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; } .item { display: flex; gap: 16px; padding: 16px 18px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color .15s; } .item:hover { border-color: var(--border-hover); } .item.is-done { background: var(--surface-2); } .item.is-done .item-title { color: var(--text-secondary); } .item.is-beyond .item-title, .item.is-beyond .item-rail { opacity: .55; } /* Pruh s časem u bodu. Dřív tu byla třída .box, jenže ta je v tomhle stylesheetu karta — z pětiminutového údaje se tak stal velký rámeček. */ .item-rail { width: 62px; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 1px; font-family: var(--font-mono); } .rail-start { font-size: 13px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .rail-length { padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); font-size: 10px; white-space: nowrap; } .item.is-done .rail-start { color: var(--text-muted); } .item-body { flex: 1; min-width: 0; } .item-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .item-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--text-secondary); } .item-note { margin-top: 10px; padding: 10px 12px; background: var(--surface-2); border-left: 2px solid var(--border-hover); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; } .item-note-line + .item-note-line { margin-top: 5px; } .item-note-label { display: inline-block; min-width: 118px; color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } /* Výsledek bodu: barva podle významu, ať je destruktivní volba vidět. */ .btn.outcome-success { color: var(--green-text); border-color: var(--green-border); } .btn.outcome-success:hover { background: var(--green-soft); border-color: var(--green); color: var(--green-text); } .btn.outcome-danger { color: var(--red); border-color: var(--red-border); } .btn.outcome-danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); } .btn.outcome-warning { color: var(--warning-700); border-color: var(--yellow-border); } .btn.outcome-warning:hover { background: var(--yellow-soft); border-color: var(--yellow); color: var(--warning-700); } /* Úkol z bodu — vlastní rozbalovátko místo nativní šipky. */ .add-action { border-top: 1px solid var(--border); padding-top: 10px; } .add-action > summary { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--border-hover); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; list-style: none; transition: all .15s; } .add-action > summary::-webkit-details-marker { display: none; } .add-action > summary::before { content: '+'; font-family: var(--font-mono); font-size: 14px; line-height: 1; color: var(--accent); } .add-action > summary:hover { border-color: var(--gray-400); background: var(--surface-2); color: var(--text); } .add-action[open] > summary { margin-bottom: 12px; } .add-action[open] > summary::before { content: '−'; } /* Sloupec, ne řádek — jinak formulář výsledku a „Úkol z tohoto bodu“ skončí vedle sebe a odkaz uteče doprava. */ .outcome-bar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 12px; } .outcome-recorded { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; font-weight: 500; color: var(--green-text); } .reach-line { display: flex; align-items: center; margin: 16px 0; border-top: 1px dashed var(--red-border); font-family: var(--font-mono); font-size: 11px; color: var(--red); } .reach-line span { transform: translateY(-50%); background: var(--bg); padding: 0 10px; } .decision { margin-bottom: 10px; padding: 14px 16px; background: var(--accent-softer); border: 1px solid var(--accent-border); border-radius: var(--radius); } .minutes { max-width: var(--narrow-width); } .minutes h2 { margin: 22px 0 8px; } .minutes h3 { margin: 16px 0 6px; } /* ── Flash ──────────────────────────────────────────────────── */ .flash { padding: 11px 15px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; box-shadow: var(--shadow-sm); } .flash-success { background: var(--green-soft); border-color: var(--green-border); color: var(--green-text); } .flash-error, .flash-danger { background: var(--red-soft); border-color: var(--red-border); color: var(--red); } .flash-info { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); } /* ── Přihlášení ─────────────────────────────────────────────── */ .login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); } .login-card { width: 100%; max-width: 360px; padding: 40px 36px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 4px 16px rgba(0,0,0,.06); } .login-brand { margin-bottom: 26px; text-align: center; } .login-brand img { width: 200px; max-width: 100%; height: auto; margin: 0 auto; } /* Zápis z porady: samostatný layout bez sidebaru. */ .print-wrap { padding-left: 24px; max-width: calc(var(--narrow-width) + 48px); } /* Stopky po překročení timeboxu. */ .clock.is-over { color: var(--red); } /* ── Responzivita ───────────────────────────────────────────── */ /* Sbaleny sidebar na desktopu: zuzi se na listu s ikonami, nezmizi. Popisky jsou v .nav-label, protoze holy textovy uzel se skryt neda. */ :root { --sidebar-collapsed: 56px; } .sidebar { transition: transform .2s ease, width .2s ease, padding .2s ease; } body.nav-collapsed .sidebar { width: var(--sidebar-collapsed); padding: 16px 8px; } body.nav-collapsed .nav-label { display: none; } body.nav-collapsed .nav a { justify-content: center; gap: 0; padding: 9px 0; } /* Nazvy skupin ve sbalenem stavu nahradi tenky oddelovac. */ body.nav-collapsed .nav-group { height: 0; padding: 0; margin: 8px 6px 12px; overflow: hidden; border-top: 1px solid var(--border); } body.nav-collapsed .wrap, body.nav-collapsed .wrap-narrow { padding-left: calc(var(--sidebar-collapsed) + 24px); max-width: calc(var(--content-width) + var(--sidebar-collapsed)); } body.nav-collapsed .wrap-narrow { max-width: calc(var(--narrow-width) + var(--sidebar-collapsed)); } @media (max-width: 900px) { .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-md); } body.nav-open .sidebar { transform: translateX(0); } /* Na mobilu se sidebar zasouva, nezuzuje — plna sirka s popisky. */ body.nav-collapsed .sidebar { width: var(--sidebar-width); padding: 16px 10px; } body.nav-collapsed .nav-label { display: inline; } body.nav-collapsed .nav a { justify-content: flex-start; gap: 10px; padding: 9px 12px; } body.nav-collapsed .nav-group { height: auto; padding: 14px 12px 6px; margin: 0; border-top: 0; } .wrap, .wrap-narrow, body.nav-collapsed .wrap, body.nav-collapsed .wrap-narrow { padding-left: 20px; padding-right: 20px; max-width: 100%; } } @media (max-width: 640px) { .item { flex-direction: column; gap: 10px; } .item-rail { width: auto; flex-direction: row; align-items: center; gap: 8px; } h1 { font-size: 19px; } .page-head { flex-direction: column; } .topbar-user > span { display: none; } } /* ── Tisk (zápis z porady) ──────────────────────────────────── */ @media print { .no-print, .topbar, .sidebar, .outcome-bar, .reach-line { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .wrap, .wrap-narrow { margin: 0; padding: 0; max-width: 100%; } .card, .box, .item, .stat, .meeting-bar { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; } .item.is-beyond .item-title, .item.is-beyond .item-rail { opacity: 1; } a { color: #000; } } /* Podíl na kapacitě — proužek v tabulce. */ .share-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-bottom: 4px; } .share-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); } /* Mřížka trendu: aplikace × týdny. */ .trend-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; } .trend-grid { width: 100%; border-collapse: collapse; font-size: 12px; } .trend-grid th { padding: 0 0 8px; color: var(--text-muted); font-size: 10px; font-weight: 500; font-family: var(--font-mono); text-align: center; white-space: nowrap; } .trend-grid th.trend-app, .trend-grid td.trend-app { text-align: left; width: 260px; min-width: 220px; padding-right: 16px; } .trend-grid td.trend-app { vertical-align: middle; } .trend-grid tbody td { border-top: 1px solid var(--border); padding: 7px 0; } .trend-grid tbody tr:hover td { background: var(--surface-2); } .trend-cell { padding: 7px 2px; text-align: center; vertical-align: middle; } .trend-name { display: block; line-height: 1.3; } .trend-note { display: block; font-size: 11px; color: var(--text-muted); line-height: 1.35; margin-top: 2px; } .trend-box { display: inline-block; width: 20px; height: 20px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,.06); vertical-align: middle; } .trend-box.rag-green { background: var(--success-500); } .trend-box.rag-amber { background: var(--warning-500); } .trend-box.rag-red { background: var(--danger-500); } .trend-box.rag-none { background: var(--surface-3); border-style: dashed; border-color: var(--border-hover); } .trend-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; } .trend-legend span { display: inline-flex; align-items: center; gap: 6px; } .trend-legend .trend-box { width: 13px; height: 13px; } /* Revize rozhodnutí — položka k vyhodnocení. */ .review-item { padding: 14px 0; border-top: 1px solid var(--border); } .review-item:first-of-type { border-top: 0; padding-top: 0; } .review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .review-head .tiny { margin-left: 6px; } /* Stopky porady. */ .clock-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .clock-controls { display: inline-flex; gap: 6px; } .clock.is-over { color: var(--red); } /* Timebox u bodu jde přepsat přímo v agendě. */ .rail-edit { display: inline-flex; align-items: center; gap: 3px; margin: 0; } .rail-edit input[type="number"] { width: 46px; min-height: 0; padding: 1px 4px; background: var(--surface-3); border: 1px solid transparent; border-radius: 999px; box-shadow: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; text-align: center; -moz-appearance: textfield; } .rail-edit input[type="number"]::-webkit-outer-spin-button, .rail-edit input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .rail-edit input[type="number"]:hover { border-color: var(--border-hover); } .rail-edit input[type="number"]:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-softer); color: var(--text); } .rail-unit { font-size: 10px; color: var(--text-muted); } /* Číselné pole v nastavení. */ .setting-input { display: inline-flex; align-items: center; gap: 6px; } .setting-input input[type="number"] { width: 84px; text-align: center; }