/* aifin Pro — Brand & Design System * Sprint 1.11. Source of truth pre design tokens + komponenty. * NEMENIŤ ad-hoc v templatoch — vždy cez triedy odtiaľto. */ :root { /* === Brand colors (extracted z aifin_logo_source.jpg, viď colors.json) === */ --aifin-red: #E00328; --aifin-red-dark: #AD0019; --aifin-red-light: #FFADB9; --aifin-warm-grey: #584840; --aifin-warm-grey-dark: #3A302B; /* === Semantic colors === */ --text-strong: #2a2421; --text: #4a3f38; --text-muted: #8a7d76; --bg: #ffffff; --surface: #faf8f6; --surface-2: #f4efe9; --border: #e8e2dc; --border-strong: #d4cbc3; /* === Status colors === */ --success: #15803d; --success-bg: #f0fdf4; --warning: #b45309; --warning-bg: #fffbeb; --error: var(--aifin-red); --error-bg: var(--aifin-red-light); --info: #1e40af; --info-bg: #eff6ff; /* === Typography === */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* === Spacing (4px base) === */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* === Border radius === */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* === Shadows === */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* === Transitions === */ --transition-fast: 150ms ease; --transition: 200ms ease; } /* ======================================================================== Témy — tmavý režim (DESIGN_SYSTEM.md §2.3) ------------------------------------------------------------------------ Tmavá NIE je inverzia: karta (--bg) je *svetlejšia* než pozadie (--surface) — elevation cez svetlosť, nie cez tieň. Stavové farby zosvetlené, soft pozadia ako priehľadné, aby fungovali naprieč všetkými povrchmi. Značková červená zosvetlená na kontrast. Default = systémová preferencia: keď používateľ nemá zvolenú tému (žiadny data-theme atribút), aplikujú sa dark tokeny len ak to chce systém. Keď si zvolí, server vloží data-theme="light|dark" na (no-FOUC, SSR). ======================================================================== */ /* Spoločná sada dark tokenov — duplikovaná v explicitnom prepínači a v system-preference media query (CSS nedovolí zlúčiť @media s bežným selektorom). */ [data-theme="dark"] { /* Povrchy: pozadie najtmavšie, karty svetlejšie (elevation cez svetlosť). */ --bg: #211C16; /* karty, panely, tabuľky, inputy */ --surface: #17140F; /* pozadie aplikácie + hlavičky/hover tabuliek */ --surface-2: #2A241D; /* zapustené plochy */ --border: #332C24; --border-strong: #42392F; /* Text */ --text-strong: #F4EFE7; --text: #D8CFC4; --text-muted: #9A8E81; /* Značka — zosvetlená, aby akčné prvky „svietili" na tmavom. */ --aifin-red: #FF4D63; --aifin-red-dark: #FF6478; /* hover/active = svetlejšia (opak light témy) */ --aifin-red-light: rgba(255, 77, 99, 0.28); /* focus glow + error-bg dvojrola */ /* Stavové — sýte zosvetlené, soft ako priehľadné (fungujú na bg aj surface). */ --success: #4ADE80; --success-bg: rgba(74, 222, 128, 0.14); --warning: #F0A858; --warning-bg: rgba(240, 168, 88, 0.15); --info: #6FB0E0; --info-bg: rgba(111, 176, 224, 0.15); --error: var(--aifin-red); --error-bg: rgba(255, 77, 99, 0.16); /* Tiene na tmavom nefungujú ako v light — jemné, tmavé, nenápadné. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.4); --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.6); } @media (prefers-color-scheme: dark) { /* No-cookie používateľ + systém v tmavom → dark. Explicitné light/dark (server cez data-theme) má prednosť cez :not(). */ :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #211C16; --surface: #17140F; --surface-2: #2A241D; --border: #332C24; --border-strong: #42392F; --text-strong: #F4EFE7; --text: #D8CFC4; --text-muted: #9A8E81; --aifin-red: #FF4D63; --aifin-red-dark: #FF6478; --aifin-red-light: rgba(255, 77, 99, 0.28); --success: #4ADE80; --success-bg: rgba(74, 222, 128, 0.14); --warning: #F0A858; --warning-bg: rgba(240, 168, 88, 0.15); --info: #6FB0E0; --info-bg: rgba(111, 176, 224, 0.15); --error: var(--aifin-red); --error-bg: rgba(255, 77, 99, 0.16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.4); --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.6); } } /* Plynulý prechod pri prepnutí témy (rešpektuje reduced-motion nižšie). */ body { transition: background-color var(--transition), color var(--transition); } /* ======================================================================== Base ======================================================================== */ body { font-family: var(--font-sans); color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { color: var(--text-strong); font-weight: 600; letter-spacing: -0.01em; } a { color: var(--aifin-red); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--aifin-red-dark); text-decoration: underline; } /* Skip-to-main link — visible iba na focus pre keyboard accessibility */ .skip-to-main { position: absolute; top: -40px; left: 0; background: var(--aifin-red); color: white; padding: var(--space-2) var(--space-4); z-index: 100; text-decoration: none; border-radius: 0 0 var(--radius) 0; } .skip-to-main:focus { top: 0; } /* ======================================================================== Buttons ======================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); text-decoration: none; min-height: 40px; white-space: nowrap; } .btn:focus-visible { outline: 2px solid var(--aifin-red-light); outline-offset: 2px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-primary { background: var(--aifin-red); color: white; } .btn-primary:hover { background: var(--aifin-red-dark); color: white; text-decoration: none; } .btn-primary:active { transform: translateY(1px); } .btn-secondary { background: transparent; border-color: var(--aifin-red); color: var(--aifin-red); } .btn-secondary:hover { background: var(--aifin-red); color: white; text-decoration: none; } .btn-ghost { background: transparent; color: var(--text); border-color: transparent; } .btn-ghost:hover { background: var(--surface); color: var(--text-strong); text-decoration: none; } .btn-destructive { background: transparent; border-color: var(--error); color: var(--error); } .btn-destructive:hover { background: var(--error); color: white; text-decoration: none; } .btn-sm { padding: 6px 12px; font-size: 13px; min-height: 32px; } .btn-lg { padding: 14px 20px; font-size: 16px; min-height: 48px; } /* HTMX loading state — automaticky pridáva htmx-request triedu */ .btn.htmx-request { opacity: 0.6; cursor: wait; } /* ======================================================================== Cards / Panels ======================================================================== */ .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), border-color var(--transition); } .card-hover:hover { box-shadow: var(--shadow); border-color: var(--border-strong); } .card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); } .card-title { font-size: 18px; font-weight: 600; color: var(--text-strong); margin: 0; } .panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .panel-header { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); background: var(--surface); } .panel-body { padding: var(--space-6); } /* ======================================================================== Badges ======================================================================== */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 8px; font-size: 12px; font-weight: 500; border-radius: var(--radius-full); line-height: 1.4; white-space: nowrap; } .badge-success { background: var(--success-bg); color: var(--success); } .badge-warning { background: var(--warning-bg); color: var(--warning); } .badge-error { background: var(--error-bg); color: var(--aifin-red-dark); } .badge-info { background: var(--info-bg); color: var(--info); } .badge-neutral { background: var(--surface-2); color: var(--text); } .badge-count { background: var(--aifin-red); color: white; font-size: 11px; font-weight: 600; padding: 1px 6px; min-width: 18px; justify-content: center; } /* ======================================================================== Form fields ======================================================================== */ .form-field { display: flex; flex-direction: column; gap: var(--space-2); } .form-label { font-size: 14px; font-weight: 500; color: var(--text-strong); } .form-required { color: var(--aifin-red); margin-left: 2px; } .form-input, .form-textarea, .form-select { width: 100%; font-family: inherit; font-size: 14px; color: var(--text-strong); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 10px 12px; min-height: 40px; transition: border-color var(--transition), box-shadow var(--transition); } .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--aifin-red); box-shadow: 0 0 0 3px var(--aifin-red-light); } .form-textarea { min-height: 96px; resize: vertical; } .form-help { font-size: 12px; color: var(--text-muted); margin-top: var(--space-1); } .form-error { font-size: 13px; color: var(--error); margin-top: var(--space-1); } .form-field.has-error .form-input, .form-field.has-error .form-select, .form-field.has-error .form-textarea { border-color: var(--error); } /* ======================================================================== Alerts (replaces ad-hoc bg-* utility combos) ======================================================================== */ .alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius); border: 1px solid; font-size: 14px; } .alert-success { background: var(--success-bg); color: var(--success); border-color: rgba(21, 128, 61, 0.2); } .alert-warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(180, 83, 9, 0.2); } .alert-error { background: var(--error-bg); color: var(--aifin-red-dark); border-color: var(--aifin-red); } .alert-info { background: var(--info-bg); color: var(--info); border-color: rgba(30, 64, 175, 0.2); } .alert-icon { font-size: 18px; line-height: 1; flex-shrink: 0; } /* ======================================================================== Modal ======================================================================== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(42, 36, 33, 0.6); z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--space-4); } .modal-backdrop.hidden { display: none; } .modal { background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); width: 100%; max-width: 720px; max-height: 90vh; display: flex; flex-direction: column; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); } .modal-title { font-size: 16px; font-weight: 600; margin: 0; } .modal-close { background: transparent; border: none; cursor: pointer; color: var(--text-muted); font-size: 24px; line-height: 1; padding: var(--space-1); } .modal-close:hover { color: var(--text-strong); } .modal-body { padding: var(--space-6); overflow-y: auto; flex: 1; } .modal-footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); } /* ======================================================================== Empty state ======================================================================== */ .empty-state { text-align: center; padding: var(--space-12) var(--space-6); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); } .empty-state-icon { display: block; margin: 0 auto var(--space-4); color: var(--text-muted); } .empty-state-title { font-size: 18px; font-weight: 600; color: var(--text-strong); margin: 0 0 var(--space-2); } .empty-state-description { font-size: 14px; color: var(--text-muted); margin: 0 0 var(--space-6); max-width: 380px; margin-left: auto; margin-right: auto; } /* ======================================================================== Toast notifications ======================================================================== */ .toast-container { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 100; display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; } .toast { padding: var(--space-3) var(--space-4); border-radius: var(--radius); box-shadow: var(--shadow-lg); background: var(--bg); border-left: 4px solid var(--aifin-red); font-size: 14px; pointer-events: auto; animation: slide-in 200ms ease-out; max-width: 360px; } .toast-success { border-left-color: var(--success); } .toast-error { border-left-color: var(--error); } .toast-info { border-left-color: var(--info); } .toast-warning { border-left-color: var(--warning); } @keyframes slide-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* ======================================================================== Loading spinner ======================================================================== */ .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 600ms linear infinite; } .spinner-md { width: 20px; height: 20px; border-width: 2px; } .spinner-lg { width: 32px; height: 32px; border-width: 3px; } @keyframes spin { to { transform: rotate(360deg); } } /* ======================================================================== Navigation ======================================================================== */ .nav-link { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); color: var(--text); border-radius: var(--radius); font-size: 14px; font-weight: 500; transition: background-color var(--transition-fast), color var(--transition-fast); text-decoration: none; } .nav-link:hover { background: var(--surface); color: var(--aifin-red); text-decoration: none; } .nav-link[aria-current="page"] { color: var(--aifin-red); background: var(--surface); } /* ======================================================================== Tables — dátová prezentácia (DESIGN_SYSTEM.md §8.2) ======================================================================== */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } /* Hlavička: label token — malé, uppercase, muted (§8.2). */ .table thead th { text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: var(--space-2) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--border-strong); white-space: nowrap; } .table tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); /* Riadky dýchajú — min. 48px výška cez vertikálny padding (§8.2). */ } .table tbody tr { min-height: 48px; } /* Jemný hover namiesto zebra pruhov — tie sú vizuálny šum (§8.2). */ .table tbody tr:hover { background: var(--surface); } .table tbody tr:last-child td { border-bottom: none; } /* Čísla a sumy: mono, tabular, vpravo — zarovnajú sa pod sebou (§8.2, §3). */ .table .num, .table th.num, .table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* Mono bez zarovnania vpravo — identifikátory (číslo FA, IČO/DIČ) (§3, §8.4). */ .mono { font-family: var(--font-mono); } /* Husté finančné cross-tab tabuľky (DPH), kde kartový režim nedáva zmysel: tabuľka scrolluje vodorovne sama v sebe (§7 variant a) → nikdy nepretečie stránku. Použiť keď nie je obaľujúci .overflow-x-auto div. */ .table-scroll { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll::-webkit-scrollbar { height: 6px; } .table-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } /* Total / „spolu" riadok — silnejší text, horná linka (§8.2). */ .table tfoot td, .table tr.is-total td { font-weight: 600; color: var(--text-strong); border-top: 1px solid var(--border-strong); border-bottom: none; background: var(--surface); } /* Sort indikátor pre klikateľné hlavičky. */ .table th[aria-sort] { cursor: pointer; } .table th[aria-sort]::after { content: " ↕"; opacity: 0.35; font-size: 11px; } .table th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; } .table th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; } /* Wrapper — orámovaná karta okolo tabuľky (nahrádza ad-hoc bg-white/shadow). */ .table-wrap { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } /* Variant (a) z §7: vodorovný scroll s primknutým prvým stĺpcom. */ .table-wrap.is-scroll { overflow-x: auto; } .table-scroll-sticky thead th:first-child, .table-scroll-sticky tbody td:first-child { position: sticky; left: 0; background: var(--bg); z-index: 1; } .table-scroll-sticky thead th:first-child { background: var(--surface); } /* ------------------------------------------------------------------------ Mobilný kartový fallback (DESIGN_SYSTEM.md §7) — variant (b), preferovaný pre faktúry. Každý sa pod md (768px) zmení na kartu, každý ukáže svoj data-label. Použitie: , na každom
. Bez data-label sa label jednoducho nezobrazí. ------------------------------------------------------------------------ */ @media (max-width: 767px) { .table-stack thead { display: none; } .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; /* border-box — nezávislosť od Tailwind preflight; padding+border sa nepripočítava k 100 % (inak overflow + clip cez .table-wrap). */ box-sizing: border-box; } .table-stack tr { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); } .table-stack tr:hover { background: var(--bg); } .table-stack tr:last-child { margin-bottom: 0; } .table-stack td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); text-align: right; min-width: 0; /* hodnota sa môže zalomiť, nie pretiecť */ overflow-wrap: anywhere; white-space: normal; /* zruší prípadné whitespace-nowrap z tabuľky */ /* Dotykový cieľ — riadok karty pohodlne tappovateľný (§7, §11). */ min-height: 36px; } .table-stack td:last-child { border-bottom: none; } .table-stack td::before { content: attr(data-label); flex: 0 0 auto; text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); } /* Číselné bunky aj v karte zarovnané vpravo, mono ostáva. */ .table-stack td.num { text-align: right; } /* Bunka skrytá v kartovom režime (napr. colspan label v total riadku). */ .table-stack .stack-hide { display: none !important; } /* Bunka bez labelu (napr. samostatná akcia) zaberie plnú šírku. */ .table-stack td[data-label=""]::before, .table-stack td:not([data-label])::before { content: none; } } /* ======================================================================== Novinky — Hero stats banner (Sprint 1.13.x) ======================================================================== */ .hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-6); margin-bottom: var(--space-8); background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); } .hero-stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .hero-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); } .hero-stat-value { font-size: 32px; font-weight: 700; color: var(--aifin-red); font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -0.02em; } .hero-stat-label { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .hero-stat-hint { font-size: 11px; color: var(--text-muted); margin-top: var(--space-1); } @media (max-width: 768px) { .hero-stats { grid-template-columns: repeat(2, 1fr); padding: var(--space-4); } .hero-stat-value { font-size: 26px; } } /* ======================================================================== Novinky — Featured "Sprint of the week" card ======================================================================== */ .featured-changelog { position: relative; background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--aifin-red); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow); margin-bottom: var(--space-6); } .featured-changelog .featured-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 10px; background: var(--aifin-red); color: white; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; border-radius: var(--radius-full); text-transform: uppercase; } .featured-changelog .featured-title { font-size: 22px; font-weight: 700; color: var(--text-strong); margin: var(--space-3) 0 var(--space-2) 0; letter-spacing: -0.01em; } .featured-changelog .featured-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: 12px; color: var(--text-muted); margin-bottom: var(--space-3); } .featured-changelog .featured-summary { font-size: 15px; color: var(--text); line-height: 1.6; margin-bottom: var(--space-4); } .featured-changelog .featured-test-box { background: var(--info-bg); border-left: 3px solid var(--info); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: 14px; color: var(--text-strong); } .featured-changelog .featured-test-box-label { display: block; font-weight: 600; margin-bottom: var(--space-1); color: var(--info); } /* ======================================================================== Novinky — Vertical timeline (compact past entries) ======================================================================== */ .changelog-timeline { position: relative; padding-left: var(--space-8); } .changelog-timeline::before { content: ""; position: absolute; left: 14px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient( to bottom, var(--aifin-red) 0%, var(--aifin-red-light) 50%, var(--border) 100% ); border-radius: 1px; } .timeline-entry { position: relative; margin-bottom: var(--space-6); } .timeline-entry:last-child { margin-bottom: 0; } .timeline-entry-node { position: absolute; left: calc(-1 * var(--space-8) + 4px); top: 4px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 2px solid var(--aifin-red); border-radius: 50%; font-size: 11px; line-height: 1; color: var(--aifin-red); z-index: 1; } .timeline-entry-node[data-category="feature"] { border-color: var(--info); color: var(--info); } .timeline-entry-node[data-category="improvement"] { border-color: #7c3aed; /* purple — improvement */ color: #7c3aed; } .timeline-entry-node[data-category="bugfix"] { border-color: var(--warning); color: var(--warning); } .timeline-entry-node[data-category="infrastructure"] { border-color: var(--text-muted); color: var(--text-muted); } .timeline-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4) var(--space-5); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .timeline-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--border-strong); } .timeline-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: 11px; color: var(--text-muted); margin-bottom: var(--space-2); } .timeline-card-title { font-size: 15px; font-weight: 600; color: var(--text-strong); margin: 0 0 var(--space-1) 0; } .timeline-card-summary { font-size: 13px; color: var(--text); line-height: 1.5; margin: 0; } /* ======================================================================== Novinky — Horizontal roadmap (FÁZA A-E) ======================================================================== */ .roadmap { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); margin-bottom: var(--space-2); scroll-snap-type: x mandatory; } .roadmap-phase { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-5); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); scroll-snap-align: start; min-width: 0; } .roadmap-phase:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); } .roadmap-phase.is-current { border-color: var(--aifin-red); background: linear-gradient(180deg, var(--bg) 0%, var(--aifin-red-light) 220%); } .roadmap-phase.is-current::before { content: "Práve teraz"; position: absolute; top: -10px; left: var(--space-4); padding: 2px 8px; background: var(--aifin-red); color: white; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; border-radius: var(--radius-full); text-transform: uppercase; } .roadmap-phase-header { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--border); padding-bottom: var(--space-3); } .roadmap-phase-id { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .roadmap-phase-name { font-size: 15px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.01em; } .roadmap-phase-months { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .roadmap-phase-features { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--text); } .roadmap-phase-feature { display: flex; align-items: flex-start; gap: var(--space-2); line-height: 1.4; } .roadmap-phase-feature-icon { flex-shrink: 0; width: 18px; text-align: center; } .roadmap-phase-deadline { margin-top: auto; padding-top: var(--space-3); border-top: 1px dashed var(--border); font-size: 11px; color: var(--text-muted); } .roadmap-phase-deadline strong { display: block; color: var(--text-strong); font-size: 12px; margin-top: 2px; } @media (max-width: 900px) { .roadmap { grid-template-columns: repeat(5, 80%); gap: var(--space-3); } } /* ======================================================================== Responsive helpers ======================================================================== */ @media (max-width: 640px) { .btn { min-height: 44px; } /* WCAG 44px touch target */ .form-input, .form-textarea, .form-select { min-height: 44px; font-size: 16px; } .modal { max-width: 100%; max-height: 100vh; border-radius: 0; } .nav-mobile-hide { display: none; } } /* ======================================================================== Reduced motion — quality floor (DESIGN_SYSTEM.md §5, §11). Povinné, nie nice-to-have: vypína všetky prechody/animácie pre používateľov, ktorí ich v systéme vypli. ======================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ======================================================================== Theme toggle — prepínač svetlá/tmavá v topbare (DESIGN_SYSTEM.md §2.3) ======================================================================== */ /* Topbar ikonové ovládače — jednotná mierka, 40px desktop / 44px mobil, pohodlný dotykový cieľ a rozostup (DESIGN_SYSTEM.md §7, Časť E). */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); cursor: pointer; font-size: 20px; line-height: 1; flex-shrink: 0; transition: background-color var(--transition-fast), border-color var(--transition-fast); } .icon-btn:hover { background: var(--surface); border-color: var(--border-strong); } .icon-btn:focus-visible { outline: 2px solid var(--aifin-red); outline-offset: 2px; } .icon-btn .icon { display: inline-block; line-height: 1; } /* Prepínač témy — JEDEN prvok, JEDNA cieľová ikona (Časť E §8): v light sa zobrazí mesiac (= prepni na tmavú), v dark slnko (= prepni na svetlú). Nikdy nie obe naraz. */ .theme-toggle .icon::before { content: "\263E"; } /* ☾ */ [data-theme="dark"] .theme-toggle .icon::before { content: "\2600"; } /* ☀ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon::before { content: "\2600"; } } /* ======================================================================== Mobilná navigácia — hamburger + zbalené menu (DESIGN_SYSTEM.md §6.1/§7) ======================================================================== */ .mobile-nav { background: var(--bg); } .nav-link-mobile { display: flex; align-items: center; width: 100%; padding: var(--space-3); min-height: 44px; /* dotykový cieľ (§7, §11) */ border-radius: var(--radius); } /* Hamburger — JEDNA ikona podľa stavu: ≡ zatvorené, × otvorené (Časť E §9). */ .nav-toggle .icon::before { content: "\2261"; } /* ≡ */ #navToggle[aria-expanded="true"] .icon::before { content: "\00D7"; } /* × */ /* Dotykové ciele topbar tlačidiel na mobile — 44×44, väčšia ikona (§7, §11). */ @media (max-width: 767px) { .icon-btn { width: 44px; height: 44px; font-size: 22px; } } /* Tab strip (napr. admin portál sub-nav) — vodorovný scroll bez viditeľného scrollbaru, aby tab bar nepretláčal šírku stránky (§7). */ .tab-strip { scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tab-strip::-webkit-scrollbar { display: none; } /* ======================================================================== Navigačné zóny — inbox ikony, dropdown, avatar (NAVIGATION_CONVENTION.md) ======================================================================== */ /* Zóna 2 — inbox ikona s číselným badge v rohu. */ .nav-inbox { position: relative; color: var(--text); } .nav-inbox:hover { color: var(--text-strong); } .nav-inbox-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; line-height: 17px; } /* Zóna 3/4 — dropdown (Nastavenia, účet). */ .dropdown { position: relative; } .dropdown-trigger { cursor: pointer; background: transparent; border: none; } .dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-1); z-index: 60; display: none; } .dropdown-menu-right { left: auto; right: 0; } .dropdown.is-open > .dropdown-menu { display: block; } .dropdown-item { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; white-space: nowrap; text-decoration: none; } .dropdown-item:hover { background: var(--surface); color: var(--text-strong); text-decoration: none; } .dropdown-header { padding: var(--space-2) var(--space-3); font-size: 12px; color: var(--text-muted); border-bottom: 1px solid var(--border); margin-bottom: var(--space-1); word-break: break-all; } /* Zóna 4 — avatar (krúžok s iniciálkami). */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--text-strong); border: 1px solid var(--border); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; flex-shrink: 0; transition: background-color var(--transition-fast), border-color var(--transition-fast); } .avatar:hover { background: var(--surface); border-color: var(--border-strong); } .avatar:focus-visible { outline: 2px solid var(--aifin-red); outline-offset: 2px; } @media (max-width: 767px) { .avatar { width: 44px; height: 44px; } }