/* ========================================================================== DataDent Formulare — Main Stylesheet Přesně odpovídá BEM třídám v PHP šablonách ========================================================================== */ /* ========================================================================== 1. CSS PROMĚNNÉ ========================================================================== */ :root { --color-primary: #2d3346; --color-primary-light: #3d4663; --color-primary-dark: #1e2433; /* --color-accent / --color-accent-hover slouží jako TEXT color (links, btn--outline, .text-accent, focus outlines). Posunuto na teal-700/-800 kvůli WCAG AA kontrastu vůči bílému pozadí (#0d9488 = 3.7:1 → pod prahem; #0f766e = 5.07:1 ✓ AA). Brandová „světlejší" teal #0d9488 zůstává v gradientech/headerech inline (kde je bílý text nad ní), viz `--color-accent-brand` níže. */ --color-accent: #0f766e; --color-accent-hover: #115e59; --color-accent-light: #eefbfa; --color-accent-lighter:#5eead4; --color-accent-brand: #0d9488; --color-heading: #2d3346; --color-success: #059669; --color-success-light: #ecfdf5; --color-danger: #dc2626; --color-danger-light: #fef2f2; --color-warning: #d97706; --color-warning-light: #fffbeb; --color-warning-bg: #fef3c7; --color-warning-text: #92400e; --color-info: #0891b2; --color-info-light: #ecfeff; --color-info-strong: #1e40af; --color-slate-100: #f1f5f9; --color-slate-300: #cbd5e1; --color-bg: #f0f2f5; --color-surface: #ffffff; --color-surface-alt: #f4f5f7; --color-border: #e5e7ec; --color-text: #1a1d2b; --color-text-secondary:#3d4255; --color-text-muted: #6e7389; --color-text-inverse: #ffffff; --radius-sm: 5px; --radius: 8px; --radius-lg: 11px; --radius-xl: 16px; --font-size-xs: 0.78rem; --font-size-sm: 0.88rem; --font-size-base: 1rem; --font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace; --shadow-sm: 0 1px 2px rgba(58,64,90,.05); --shadow: 0 2px 8px rgba(58,64,90,.06), 0 1px 2px rgba(58,64,90,.03); --shadow-lg: 0 6px 20px rgba(58,64,90,.08), 0 2px 4px rgba(58,64,90,.04); --shadow-accent: 0 4px 14px rgba(13,148,136,.15), 0 2px 6px rgba(15,23,42,.06); --transition: .15s ease; /* ── Modal design system tokens (2026-05-20) ────────────────────────── */ --modal-title-size: 1.05rem; --modal-title-weight: 700; --modal-subtitle-size: .82rem; --modal-subtitle-color: #475569; /* čitelná na světlém i bílém pozadí */ --modal-body-size: .9rem; --modal-label-size: .72rem; --modal-label-tracking: .07em; --modal-bg: var(--color-surface); --modal-text: #0f172a; --modal-text-muted: #64748b; --modal-border: var(--color-border); --modal-header-bg: #f8fafc; --modal-footer-bg: #f8fafc; --modal-shadow: 0 20px 50px rgba(15,23,42,.2); --modal-pad-sm: 1rem; --modal-pad-md: 1.25rem; --modal-pad-lg: 1.5rem; --modal-gap: .75rem; --modal-themed-grad: linear-gradient(135deg, #1e293b 0%, #334155 50%, #0f766e 100%); --modal-themed-text: #ffffff; --modal-danger-accent: #dc2626; --modal-danger-bg: #fef2f2; } /* ========================================================================== 2. RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Pozadí i na — při přechodu mezi stránkami neprosvítá bílé plátno prohlížeče */ html { font-size: 16px; scroll-behavior: smooth; background: var(--color-bg); } /* A11y — fallback focus ring pro keyboard users na elementech bez custom focus. Neovlivňuje mouse hover/click (:focus-visible = jen keyboard triggered focus). */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 3px; } /* Vypnout default :focus ring pro mouse — jen pokud element má :focus-visible nastaveno výše */ :focus:not(:focus-visible) { outline: none; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-hover); text-decoration: underline; } img { max-width: 100%; display: block; } /* Inline SVG ikona bez explicitních rozměrů → rozumný default (ne 300×150 px). :where() = nulová specificita → jakékoli cílené pravidlo (.parent svg{…}) ji přebije. Brání probliknutí „obří ikony" při navigaci / pozdě načteném page-CSS. */ :where(svg:not([width]):not([height])) { width: 1.5rem; height: 1.5rem; } h1, h2, h3, h4, h5, h6 { color: var(--color-primary); line-height: 1.25; font-weight: 700; } p { margin-bottom: .75rem; } p:last-child { margin-bottom: 0; } ul, ol { padding-left: 1.5rem; } code { font-family: 'Courier New', monospace; font-size: .82rem; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .15rem .4rem; word-break: break-all; } /* ========================================================================== 2b. UTILITY CLASSES (nahrazují opakující se inline styly) ========================================================================== */ /* Spacing */ .mb-0 { margin-bottom: 0; } .mb-xs { margin-bottom: .35rem; } .mb-sm { margin-bottom: .75rem; } .mb-md { margin-bottom: 1rem; } .mb-lg { margin-bottom: 1.25rem; } .mb-xl { margin-bottom: 1.5rem; } .mt-0 { margin-top: 0; } .mt-xs { margin-top: .15rem; } .mt-md { margin-top: 1rem; } .mt-lg { margin-top: 1.25rem; } .mt-xl { margin-top: 1.5rem; } /* Flex */ .d-flex { display: flex; } .d-grid { display: grid; } .d-none { display: none; } .d-inline { display: inline-block; } .flex-1 { flex: 1; min-width: 0; } .flex-shrink-0 { flex-shrink: 0; } .flex-center { display: flex; align-items: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-end { display: flex; justify-content: flex-end; } .flex-wrap { flex-wrap: wrap; } .gap-xs { gap: .25rem; } .gap-sm { gap: .5rem; } .gap-md { gap: .75rem; } .gap-lg { gap: 1rem; } /* Typography */ .text-xs { font-size: .75rem; } .text-sm { font-size: .82rem; } .text-md { font-size: .88rem; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; } .text-muted { color: var(--color-text-muted); } .text-white { color: #fff; } .text-accent { color: var(--color-accent); } .text-danger { color: var(--color-danger); } .text-success { color: #16a34a; } .text-sep { color: var(--color-slate-300); } .text-right { text-align: right; } .text-center { text-align: center; } .border-b { border-bottom: 1px solid var(--color-border); } /* Card body reset & card section title */ .card__body--np { padding: 0; } .card__body--pad { padding: 1.25rem 1.5rem; } .card-section-title { padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border); font-size: .88rem; font-weight: 700; color: var(--color-primary); } /* Resource detail row (key-value pairs in card lists) */ .detail-row { display: flex; padding: .6rem 1.5rem; border-bottom: 1px solid var(--color-border); font-size: .82rem; } .detail-row__label { flex-shrink: 0; font-weight: 600; color: var(--color-text); } .detail-row__label--w140 { width: 140px; } .detail-row__label--w160 { width: 160px; } /* Table header small uppercase */ .th-sm { padding: .65rem 1rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; } /* Grid 2-col / 4-col helpers */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); } /* Inline form hint (tiny) */ .form-hint-xs { font-size: .68rem; color: var(--color-text-muted); margin: .2rem 0 0; } /* Form label block (replaces repeated inline label styling) */ .form-label-block { font-weight: 600; font-size: .85rem; margin-bottom: .35rem; display: block; } /* Section heading */ .section-heading { font-size: 1.1rem; font-weight: 700; color: var(--color-text); } /* Actions row (form submit area) */ .actions-row { display: flex; gap: .75rem; justify-content: flex-end; } /* Info table row (admin detail etc.) */ .info-row { padding: 2px 12px 2px 0; color: #6e7389; } /* Hint text below form fields */ /* Form control sizing */ .form-control--lg { font-size: .92rem; padding: .6rem .85rem; } .form-control--xl { font-size: .95rem; padding: .65rem .9rem; } /* Icon in button (vertical alignment fix) */ .btn-icon { vertical-align: middle; margin-right: .35rem; margin-top: -1px; } /* ========================================================================== 3. LAYOUT ========================================================================== */ :root { --app-content-width: 90%; --app-content-max: 1800px; --app-content-padding: 1.25rem; } .container { width: var(--app-content-width); max-width: var(--app-content-max); margin: 0 auto; padding: 0 var(--app-content-padding); } /* Tablet+ mobile: full width padding */ @media (max-width: 900px) { :root { --app-content-width: 100%; --app-content-padding: 1rem; } } @media (max-width: 520px) { :root { --app-content-padding: .75rem; } } .container--narrow { width: 100%; max-width: 740px; margin: 0 auto; padding: 0 1.5rem; } .main-content { flex: 1; padding: 2rem 0; } /* ========================================================================== 4. NAVBAR ========================================================================== */ .navbar { background: #1a2035; box-shadow: 0 1px 3px rgba(0,0,0,.15); position: sticky; top: 0; z-index: 200; } /* 2026-05-29 (v0.61.26): defensive fix — zaručí že navbar tlačítka jsou * vždy klikatelná i kdyby nějaký invisible overlay zůstal v DOM. user QA * report: navbar nefunguje po scrollu od v0.49.3+ notif modal změn. */ .navbar, .navbar *, .navbar__inner, .navbar__brand, .navbar__links, .navbar__links a, .navbar__logout, .navbar__search-toggle, .navbar__notif-btn { pointer-events: auto !important; } .navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 48px; gap: .85rem; } .navbar__brand { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; } .navbar__brand-link { display: flex; align-items: center; gap: .55rem; text-decoration: none; transition: opacity .15s; } .navbar__brand-link:hover { opacity: .8; text-decoration: none; } .navbar__logo-icon { display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; text-decoration: none; } .navbar__logo-icon svg { width: 41.14px; height: 41.14px; stroke-width: 1.6; } .navbar__logo-text { font-weight: 800; font-size: 1.5125rem; color: #fff; text-decoration: none; transition: opacity .15s; letter-spacing: -.02em; } .navbar__logo-text span { color: var(--color-accent-lighter); } .navbar__logo-text:hover { color: #fff; text-decoration: none; } .navbar__hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: .4rem; } .navbar__hamburger span { display: block; width: 22px; height: 2px; background: rgba(255,255,255,.85); border-radius: 2px; transition: var(--transition); } .navbar__links { display: flex; align-items: center; gap: .2rem; list-style: none; padding: 0; margin: 0; } .navbar__links a { color: rgba(255,255,255,.82); padding: .4rem .85rem; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500; text-decoration: none; display: flex; align-items: center; gap: .3rem; transition: background var(--transition), color var(--transition); } .navbar__links a:hover, .navbar__links a.active { background: rgba(255,255,255,.16); color: #fff; text-decoration: none; } .navbar__logout { margin-left: .5rem; display: inline-flex; align-items: center; justify-content: center; height: 34px; width: 34px; border-radius: 17px; color: rgba(255,255,255,.55); transition: color .2s, background .2s; } .navbar__logout:hover { color: #fff; background: rgba(255,255,255,.12); } .navbar__logout-icon { display: block; flex-shrink: 0; } /* Zařízení nav icon — vertikální RVG senzor, otočený o 180° (kabel směřuje nahoru), bez animací */ .nav-icon-zarizeni { transform: rotate(180deg); transform-origin: center; } .nav-icon-zarizeni__sensor, .nav-icon-zarizeni__led { animation: none !important; } .navbar__logout-text { display: none; } /* Navbar role switch (toggle slider) */ /* ── Global search v header baru (Task I) ──────────────── */ .navbar__search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: rgba(255,255,255,.75); cursor: pointer; margin-left: auto; margin-right: .5rem; transition: background .15s, color .15s, border-color .15s; flex-shrink: 0; } .navbar__search-toggle:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); } .navbar__search-wrap { flex: 1 1 auto; position: relative; max-width: 620px; margin-left: auto; margin-right: .5rem; } .navbar__search-inner { display: flex; align-items: center; gap: .5rem; padding: .5rem .85rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 10px; transition: background .15s, border-color .15s; } .navbar__search-inner:focus-within { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45); } .navbar__search-icon { color: rgba(255,255,255,.6); flex-shrink: 0; } .navbar__search-inner input { flex: 1; background: transparent; border: none; color: #fff; font-size: .92rem; outline: none; padding: 0; font-family: inherit; } .navbar__search-inner input::placeholder { color: rgba(255,255,255,.55); } .navbar__search-close { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: transparent; border: none; color: rgba(255,255,255,.6); cursor: pointer; border-radius: 6px; flex-shrink: 0; } .navbar__search-close:hover { color: #fff; background: rgba(255,255,255,.12); } .navbar__search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.25); max-height: 440px; overflow-y: auto; z-index: 900; /* Pod modaly (1000+), nad běžným obsahem */ } .navbar__search-group { border-bottom: 1px solid var(--color-border); } .navbar__search-group:last-child { border-bottom: none; } .navbar__search-group-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); padding: .65rem 1rem .35rem; background: var(--color-surface-alt); display: flex; align-items: center; gap: .4rem; } .navbar__search-item { display: block; padding: .65rem 1rem; border-bottom: 1px solid var(--color-slate-100); text-decoration: none; color: var(--color-text); transition: background .12s; } .navbar__search-item:last-child { border-bottom: none; } .navbar__search-item:hover, .navbar__search-item.is-active { background: #f0fdfa; color: var(--color-accent); text-decoration: none; } .navbar__search-item-label { font-size: .9rem; font-weight: 600; color: var(--color-primary); } .navbar__search-item-sub { font-size: .75rem; color: var(--color-text-muted); margin-top: .15rem; } .navbar__search-empty { padding: 1.25rem 1rem; text-align: center; color: var(--color-text-muted); font-size: .85rem; } /* Když je search rozbalený, pravá část menu se skryje */ .navbar--searching .navbar__links { display: none !important; } .navbar--searching .navbar__hamburger { display: none !important; } @media (max-width: 768px) { .navbar__search-wrap { max-width: none; margin-right: 0; } } .navbar__role-switch { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; cursor: pointer; padding: .2rem .1rem; border-radius: 20px; transition: opacity .2s; } .navbar__role-switch:hover { opacity: .85; text-decoration: none; } .navbar__role-switch-label { font-size: .7rem; font-weight: 600; color: rgba(255,255,255,.35); letter-spacing: .02em; transition: color .2s; } .navbar__role-switch-label--active { color: #fff; } .navbar__role-switch-track { position: relative; width: 32px; height: 18px; background: rgba(255,255,255,.2); border-radius: 9px; flex-shrink: 0; transition: background .2s; } .navbar__role-switch:hover .navbar__role-switch-track { background: rgba(255,255,255,.3); } .navbar__role-switch-knob { position: absolute; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .2s; } .navbar__role-switch-knob--left { left: 2px; } .navbar__role-switch-knob--right { left: 16px; } @media (max-width: 768px) { .navbar__role-switch { margin: .25rem 0; } } /* Navbar admin log */ /* ── Admin top-nav dropdown trigger (Dokumenty · Klienti · Systém · Přehledy · Exporty · Wiki · Blog) ── */ .navbar__adm-drop { position: relative; display: inline-block; margin-left: .5rem; } .navbar__adm-drop-trigger { margin-left: 0; background: none; border: none; outline: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; height: 34px; width: 34px; border-radius: 17px; color: rgba(255,255,255,.55); transition: color .2s, background .2s; position: relative; } .navbar__adm-drop-trigger:hover { color: #fff; background: rgba(255,255,255,.12); } .navbar__adm-drop.open .navbar__adm-drop-trigger { color: #fff; background: rgba(255,255,255,.18); } .navbar__adm-drop-menu { display: none; position: absolute; right: 0; left: auto; top: calc(100% + 8px); z-index: 1000; min-width: 200px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .35rem 0; } .navbar__adm-drop.open > .navbar__adm-drop-menu { display: block !important; animation: dropIn .15s ease; } .navbar__adm-drop-menu .dropdown__item { color: var(--color-text); padding: .55rem 1.1rem; font-size: .88rem; display: block; text-decoration: none; } .navbar__adm-drop-menu .dropdown__item:hover { color: var(--color-text); background: var(--color-surface-alt); text-decoration: none; } .navbar__adm-drop-title { display: flex; align-items: center; gap: .55rem; padding: .75rem 1.1rem .65rem; margin: 0 0 .25rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); background: linear-gradient(180deg, var(--color-surface-alt) 0%, var(--color-surface) 100%); border-bottom: 1px solid var(--color-border); } .navbar__adm-drop-title svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--color-accent); } .navbar__adm-drop-toggle { display: flex !important; align-items: center; justify-content: space-between; gap: .75rem; } .navbar__adm-drop-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(0,0,0,.05); } @media (max-width: 1024px) { .navbar__adm-drop-menu { position: fixed; right: .5rem; left: auto; max-width: calc(100vw - 1rem); max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; } } /* Navbar notifications */ .navbar__notif-wrap { position: relative; /* Notifikační zvonek vždy úplně první v navbar__links (před „Přehled"/„Dokumenty"…). Flexbox order, takže DOM zůstává tam kde je (admin i doctor branch) — 2026-05-22. */ order: -1; } .navbar__notif-btn { display: flex; align-items: center; justify-content: center; position: relative; width: 34px; height: 34px; border: none; border-radius: 17px; background: none; color: rgba(255,255,255,.65); cursor: pointer; transition: background .2s, color .2s; } .navbar__notif-btn:hover { background: rgba(255,255,255,.15); color: #fff; } /* Icon-only navbar link (Číselníky atd. — pro doctor navbar) */ @keyframes notifRing { 0% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } 100% { transform: rotate(0); } } .navbar__notif-btn--ring { animation: notifRing .8s ease; } .navbar__notif-badge { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #ef4444; color: #fff; font-size: .65rem; font-weight: 700; line-height: 17px; text-align: center; pointer-events: none; } .navbar__notif-panel { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 460px; max-width: calc(100vw - 1.5rem); max-height: 500px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 8px 30px rgba(0,0,0,.18); z-index: 300; overflow: hidden; } .navbar__notif-panel.open { display: block; } /* ── Modal varianta (doctor bell — větší okno uprostřed obrazovky) ──────── */ .navbar__notif-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); z-index: 9998; animation: notifBackdropIn .18s ease; } .navbar__notif-backdrop.open { display: block; } @keyframes notifBackdropIn { from { opacity: 0; } to { opacity: 1; } } .navbar__notif-panel--modal.navbar__notif-panel { position: fixed; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: 65vw; height: 75vh; max-width: 65vw; max-height: 75vh; display: none; flex-direction: column; border-radius: 20px; box-shadow: 0 30px 80px rgba(15, 23, 42, .28), 0 0 0 1px rgba(148, 163, 184, .14); z-index: 9999; overflow: hidden; background: #fff; } .navbar__notif-panel--modal.navbar__notif-panel.open { display: flex; animation: notifPanelIn .22s cubic-bezier(.25, 1.2, .5, 1); } @keyframes notifPanelIn { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* ── Header — editoriální minimalismus ─────────────────────────────────── */ .navbar__notif-panel--modal .navbar__notif-header { flex-shrink: 0; padding: 1.15rem 1.5rem; background: #fff; color: var(--color-text); border-bottom: 1px solid #eef2f7; gap: .75rem; position: relative; } .navbar__notif-panel--modal .navbar__notif-header strong { font-size: 1.3rem; font-weight: 700; color: var(--color-primary); letter-spacing: -.01em; line-height: 1.15; } .navbar__notif-panel--modal .navbar__notif-count { background: var(--color-accent); color: #fff; font-size: .72rem; padding: .2rem .55rem; font-weight: 800; border-radius: 999px; letter-spacing: .02em; } .navbar__notif-panel--modal .navbar__notif-all-btn { background: transparent; color: var(--color-accent); padding: .5rem .9rem; font-size: .78rem; font-weight: 700; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; transition: background .15s, color .15s; margin-left: auto; box-shadow: inset 0 0 0 1.5px var(--color-accent); } .navbar__notif-panel--modal .navbar__notif-all-btn:hover { background: var(--color-accent); color: #fff; text-decoration: none; } .navbar__notif-modal-close { background: #f1f5f9; color: #475569; border: 0; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 0; /* glyph přes ::before */ line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .15s; flex-shrink: 0; padding: 0; margin-left: auto; } .navbar__notif-modal-close::before { content: "\2715"; font-size: 1.15rem; font-weight: 400; line-height: 1; color: inherit; } .navbar__notif-modal-close:hover { background: #fee2e2; color: #b91c1c; transform: rotate(90deg); } /* ── Filtry (tags) ──────────────────────────────────────────────────────── */ .navbar__notif-panel--modal .navbar__notif-tags { flex-shrink: 0; padding: .75rem 1.5rem; border-bottom: 1px solid #eef2f7; background: #fff; display: flex; flex-wrap: wrap; gap: .35rem; } /* ── Hide sloupcový thead (nový dvouřádkový layout ho nepotřebuje) ─────── */ .navbar__notif-panel--modal .navbar__notif-thead { display: none; } /* ── Seznam ─────────────────────────────────────────────────────────────── */ .navbar__notif-panel--modal .navbar__notif-list { flex: 1 1 0% !important; min-height: 0 !important; max-height: none !important; height: auto !important; overflow-y: auto; overflow-x: hidden; padding: 0; display: block; background: #fff; } /* Last section vyplní zbytek listu, aby pozadí pokračovalo až ke konci */ .navbar__notif-panel--modal .navbar__notif-section:last-child { min-height: 100%; } /* ── Sekce: Akce + Chronologické skupiny (Dnes/Včera/...) ─────────────── */ .navbar__notif-panel--modal .navbar__notif-section { display: block; } .navbar__notif-panel--modal .navbar__notif-section-header { position: sticky; z-index: 2; padding: .5rem 1.75rem; font-size: .72rem; font-weight: 700; letter-spacing: .015em; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: .5rem; } .navbar__notif-panel--modal .navbar__notif-section--actions .navbar__notif-section-header { top: 0; background: linear-gradient(180deg, #fef2f2 0%, #fef7f7 100%); color: #991b1b; border-bottom-color: #fecaca; font-size: .82rem; text-transform: none; } .navbar__notif-panel--modal .navbar__notif-section--info .navbar__notif-section-header { top: 0; background: #f8fafc; color: #64748b; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; } .navbar__notif-panel--modal .navbar__notif-section--actions + .navbar__notif-section--info .navbar__notif-section-header, .navbar__notif-panel--modal .navbar__notif-section--info ~ .navbar__notif-section--info .navbar__notif-section-header { top: 36px; /* Pod akčním headerem (cca 38px) */ } .navbar__notif-panel--modal .navbar__notif-section-count { background: rgba(220, 38, 38, .12); color: #991b1b; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; margin-left: auto; } .navbar__notif-panel--modal .navbar__notif-section--actions { background: #fef7f7; } /* ── Akční řádek — levý červený strip + bg ──────────────────────────── */ .navbar__notif-panel--modal .navbar__notif-row--actionable { border-left: 3px solid #dc2626; background: #fff; } .navbar__notif-panel--modal .navbar__notif-row--actionable:hover { background: #fef9f9; } /* ── Inline kategorie badge (drop separate column) ─────────────────── */ .navbar__notif-panel--modal .navbar__notif-cat-inline { display: inline-flex; align-items: center; padding: .12rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .015em; white-space: nowrap; flex-shrink: 0; max-width: 110px; overflow: hidden; text-overflow: ellipsis; } /* ── Inline akční tlačítka (uvnitř akčního řádku) ───────────────────── */ .navbar__notif-panel--modal .navbar__notif-row-actions { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; flex-shrink: 0; min-width: 110px; } .navbar__notif-panel--modal .navbar__notif-action-btn { display: inline-flex; align-items: center; justify-content: center; padding: .35rem .65rem; font-size: .74rem; font-weight: 700; border-radius: 6px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter .12s, transform .12s; line-height: 1.2; } .navbar__notif-panel--modal .navbar__notif-action-btn:hover { filter: brightness(.95); text-decoration: none; } .navbar__notif-panel--modal .navbar__notif-action-btn:active { transform: translateY(1px); } .navbar__notif-panel--modal .navbar__notif-action-btn:disabled { opacity: .5; cursor: not-allowed; } .navbar__notif-panel--modal .navbar__notif-action-btn--accept { background: #dcfce7; color: #166534; border-color: #86efac; } .navbar__notif-panel--modal .navbar__notif-action-btn--reject { background: #fef2f2; color: #991b1b; border-color: #fecaca; } .navbar__notif-panel--modal .navbar__notif-action-btn--neutral { background: #f1f5f9; color: #475569; border-color: #e2e8f0; } /* ── Akční řádek: časový sloupec se schová pod buttony ─────────────── */ .navbar__notif-panel--modal .navbar__notif-row--actionable .navbar__notif-c-time { display: none; } .navbar__notif-panel--modal .navbar__notif-row--actionable { grid-template-columns: 40px 1fr auto; } /* ── Notif Detail Modal (unified styling jako main panel) ────────── */ #notifDetailModal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); z-index: 9999; animation: notifBackdropIn .18s ease; } #notifDetailModal.open { display: flex; } .navbar__notif-detail-card { width: 65vw; height: 75vh; max-width: 65vw; max-height: 75vh; background: #fff; border-radius: 20px; box-shadow: 0 30px 80px rgba(15, 23, 42, .28), 0 0 0 1px rgba(148, 163, 184, .14); display: flex; flex-direction: column; overflow: hidden; position: relative; animation: notifPanelIn .22s cubic-bezier(.25, 1.2, .5, 1); } .navbar__notif-detail-header { flex-shrink: 0; padding: 1.15rem 1.75rem; background: #fff; border-bottom: 1px solid #eef2f7; display: flex; align-items: flex-start; gap: .75rem; } .navbar__notif-detail-header__title { font-size: 1.25rem; font-weight: 700; color: var(--color-primary); letter-spacing: -.01em; line-height: 1.3; margin: 0 0 .2rem 0; } .navbar__notif-detail-header__meta { font-size: .78rem; color: #94a3b8; letter-spacing: .015em; } .navbar__notif-detail-header__body { flex: 1; min-width: 0; } .navbar__notif-detail-close { background: #f1f5f9; color: #475569; border: 0; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 0; line-height: 1; /* glyph přes ::before */ display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .15s; flex-shrink: 0; padding: 0; } .navbar__notif-detail-close::before { content: "\2715"; font-size: 1.15rem; font-weight: 400; line-height: 1; color: inherit; } .navbar__notif-detail-close:hover { background: #fee2e2; color: #b91c1c; transform: rotate(90deg); } .navbar__notif-detail-body { flex: 1 1 0%; min-height: 0; overflow-y: auto; padding: 1.5rem 1.75rem; font-size: .95rem; color: var(--color-text); line-height: 1.7; } .navbar__notif-detail-body p:first-child { margin-top: 0; } .navbar__notif-detail-body p:last-child { margin-bottom: 0; } .navbar__notif-detail-footer { flex-shrink: 0; padding: 1rem 1.75rem; background: #fafbfc; border-top: 1px solid #eef2f7; display: flex; align-items: center; justify-content: flex-end; gap: .6rem; } .navbar__notif-detail-footer .btn { min-width: 110px; } @media (max-width: 800px) { .navbar__notif-detail-card { width: 95vw; max-width: 95vw; height: 90vh; max-height: 90vh; border-radius: 14px; } } /* ── Fade-out animace pro dokončené akce ──────────────────────────── */ .navbar__notif-panel--modal .navbar__notif-row--fading { opacity: 0; transform: translateX(20px); transition: opacity .25s, transform .25s, max-height .3s ease .25s, padding .3s ease .25s; max-height: 100px; pointer-events: none; overflow: hidden; } .navbar__notif-panel--modal .navbar__notif-row--fading.is-collapsed { max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; } /* ── Item — klidný Gmail/Linear styl s kruhovým avatarem ──────────────── */ .navbar__notif-panel--modal .navbar__notif-item { display: grid; grid-template-columns: 32px 1fr auto; column-gap: .85rem; align-items: center; padding: .65rem 1.75rem; border-bottom: 1px solid #f1f5f9; color: var(--color-text); text-decoration: none; transition: background .15s; position: relative; } .navbar__notif-panel--modal .navbar__notif-item:last-child { border-bottom: 0; } .navbar__notif-panel--modal .navbar__notif-item:hover { background: #f8fafc; text-decoration: none; } /* Avatar — kruh 40×40 se soft colored bg + SVG ikona typu */ .navbar__notif-panel--modal .navbar__notif-c-type { grid-column: 1; display: flex; align-items: center; justify-content: center; } .navbar__notif-panel--modal .navbar__notif-c-type .navbar__notif-type-badge { display: none; } .navbar__notif-panel--modal .navbar__notif-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #f1f5f9; color: #64748b; box-shadow: none; transition: transform .2s cubic-bezier(.25, 1.2, .5, 1); } .navbar__notif-panel--modal .navbar__notif-icon svg { width: 15px; height: 15px; } .navbar__notif-panel--modal .navbar__notif-item:hover .navbar__notif-icon { transform: scale(1.06); } /* Typ-specific barvy avataru (soft pastelové pozadí + sytá barva ikony) */ .navbar__notif-panel--modal .navbar__notif-item[data-ntype="form"] .navbar__notif-icon { background: #ccfbf1; color: #0f766e; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="supplement"] .navbar__notif-icon { background: #fef3c7; color: #b45309; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="edited"] .navbar__notif-icon { background: #dbeafe; color: #1d4ed8; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="deletion"] .navbar__notif-icon { background: #fee2e2; color: #b91c1c; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="admin_msg"] .navbar__notif-icon { background: #e0e7ff; color: #4338ca; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="form_request"] .navbar__notif-icon { background: #ffedd5; color: #c2410c; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="mention"] .navbar__notif-icon { background: #ede9fe; color: #6d28d9; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="tooth_alert_due"] .navbar__notif-icon { background: #fee2e2; color: #b91c1c; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="tooth_alert_invite"] .navbar__notif-icon { background: #ffedd5; color: #c2410c; } /* Tělo — dvě linie (klient, typ · kontext · lékař) */ .navbar__notif-panel--modal .navbar__notif-item-body { grid-column: 2; display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .navbar__notif-panel--modal .navbar__notif-item-line1 { display: flex; align-items: center; gap: .5rem; min-width: 0; } /* Eyebrow je skryt — typ se projevuje barvou avataru + textovým "type label" v line2 */ .navbar__notif-panel--modal .navbar__notif-eyebrow { display: none; } .navbar__notif-panel--modal .navbar__notif-c-client { font-weight: 700; color: var(--color-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; letter-spacing: -.01em; line-height: 1.25; min-width: 0; } .navbar__notif-panel--modal .navbar__notif-item-line2 { display: flex; align-items: center; gap: .4rem; font-size: .74rem; color: #64748b; min-width: 0; line-height: 1.25; } .navbar__notif-panel--modal .navbar__notif-item-body { gap: .12rem; } .navbar__notif-panel--modal .navbar__notif-type-label { font-weight: 600; font-size: .78rem; flex-shrink: 0; letter-spacing: -.005em; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="form"] .navbar__notif-type-label { color: #0f766e; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="supplement"] .navbar__notif-type-label { color: #b45309; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="edited"] .navbar__notif-type-label { color: #1d4ed8; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="deletion"] .navbar__notif-type-label { color: #b91c1c; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="admin_msg"] .navbar__notif-type-label { color: #4338ca; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="form_request"] .navbar__notif-type-label { color: #c2410c; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="mention"] .navbar__notif-type-label { color: #6d28d9; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="tooth_alert_due"] .navbar__notif-type-label { color: #b91c1c; } .navbar__notif-panel--modal .navbar__notif-item[data-ntype="tooth_alert_invite"] .navbar__notif-type-label { color: #c2410c; } .navbar__notif-panel--modal .navbar__notif-c-ctx { color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .navbar__notif-panel--modal .navbar__notif-item-sep { width: 3px; height: 3px; background: #cbd5e1; border-radius: 50%; flex-shrink: 0; } .navbar__notif-panel--modal .navbar__notif-c-doctor { color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; } /* Čas vpravo */ .navbar__notif-panel--modal .navbar__notif-c-time { grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; line-height: 1.15; flex-shrink: 0; padding-right: 0; min-width: 70px; } .navbar__notif-panel--modal .navbar__notif-time-rel { font-weight: 700; color: #475569; font-size: .78rem; letter-spacing: -.005em; } .navbar__notif-panel--modal .navbar__notif-time-abs, .navbar__notif-panel--modal .navbar__notif-time-abs-full { color: #94a3b8; font-size: .7rem; font-variant-numeric: tabular-nums; } .navbar__notif-panel--modal .navbar__notif-c-arrow { display: none; } .navbar__notif-panel--modal .navbar__notif-all { flex-shrink: 0; display: block; padding: .85rem 1.75rem; text-align: center; font-size: .82rem; font-weight: 600; color: #0f766e; background: #fafbfc; border-top: 1px solid #eef2f7; text-decoration: none; transition: background .15s, color .15s; } .navbar__notif-panel--modal .navbar__notif-all:hover, .navbar__notif-panel--modal .navbar__notif-all:focus { background: #ccfbf1; color: #115e59; text-decoration: none; } .navbar__notif-panel--modal .navbar__notif-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; color: #94a3b8; font-size: .95rem; } .navbar__notif-panel--modal .navbar__notif-empty svg { margin-bottom: .75rem; opacity: .6; } /* Default (dropdown) variant hides the column header */ .navbar__notif-panel:not(.navbar__notif-panel--modal) .navbar__notif-thead { display: none; } @media (max-width: 820px) { .navbar__notif-panel--modal .navbar__notif-header { padding: 1.1rem 1.25rem .9rem; } .navbar__notif-panel--modal .navbar__notif-header::before { left: 1.25rem; } .navbar__notif-panel--modal .navbar__notif-tags { padding: .7rem 1.25rem; } .navbar__notif-panel--modal .navbar__notif-item { padding: .85rem 1.25rem .85rem 0; column-gap: 1rem; } .navbar__notif-panel--modal .navbar__notif-c-doctor { display: none; } .navbar__notif-panel--modal .navbar__notif-c-client { font-size: .92rem; } } @media (max-width: 640px) { .navbar__notif-panel--modal.navbar__notif-panel { width: calc(100vw - 1rem); height: 90vh; max-height: 90vh; border-radius: 14px; } .navbar__notif-panel--modal .navbar__notif-all-btn span, .navbar__notif-panel--modal .navbar__notif-all-btn { font-size: .72rem; padding: .4rem .7rem; } .navbar__notif-panel--modal .navbar__notif-item { padding: .8rem 1rem .8rem 0; } } .navbar__notif-header { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; border-bottom: 1px solid var(--color-border); font-size: .82rem; color: var(--color-text); } .navbar__notif-count { background: #ef4444; color: #fff; font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 9px; flex-shrink: 0; } .navbar__notif-empty { padding: 2rem 1rem; text-align: center; font-size: .85rem; color: var(--color-text-muted); } .navbar__notif-list { margin: 0; padding: 0; max-height: 340px; overflow-y: auto; } .navbar__notif-item { display: flex; flex-direction: row; align-items: center; gap: .7rem; padding: .65rem 1rem; border-bottom: 1px solid var(--color-border); text-decoration: none; transition: background .15s; } .navbar__notif-item:hover { background: rgba(13,148,136,.05); text-decoration: none; } /* Ikona typu formuláře */ .navbar__notif-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: var(--color-surface-alt, var(--color-slate-100)); display: flex; align-items: center; justify-content: center; color: var(--color-accent); } .navbar__notif-icon svg { width: 18px; height: 18px; } /* Tělo notifikace */ .navbar__notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; } /* Řádek 1: jméno + badge */ .navbar__notif-r1 { display: flex; align-items: center; gap: .4rem; } /* Řádek 2: typ, lékař, čas */ .navbar__notif-r2 { display: flex; align-items: center; gap: .3rem; } .navbar__notif-name { font-size: .88rem; font-weight: 700; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .navbar__notif-form { font-size: .75rem; font-weight: 500; color: var(--color-accent); white-space: nowrap; } .navbar__notif-doctor { font-size: .72rem; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; } .navbar__notif-time { font-size: .72rem; font-variant-numeric: tabular-nums; color: var(--color-text-muted); white-space: nowrap; } .navbar__notif-sep { color: var(--color-text-muted); opacity: .3; font-size: .7rem; } /* Akční tlačítka */ /* `.modal-notif` prefix bumpuje specificitu nad `.navbar__links a` (0,1,1) → (0,2,0+). * Bez prefixu by navbar leak (modal je v ) přebarvil link na bílo. */ .modal-notif .navbar__notif-all, .navbar__notif-panel .navbar__notif-all { display: block; padding: .7rem 1rem; text-align: center; font-size: .8rem; font-weight: 600; color: var(--color-accent); background: transparent; text-decoration: none; border-top: 1px solid var(--color-border); } .modal-notif .navbar__notif-all:hover, .navbar__notif-panel .navbar__notif-all:hover { background: rgba(13,148,136,.06); color: var(--color-accent-hover); text-decoration: none; } /* Modifikátor pro umístění v hlavičce panelu (nahradil count badge): * kompaktní pill místo full-width spodního linku. Pořadí po base pravidle * přebíjí display:block/border-top/padding při shodné specificity (0,2,0). */ .modal-notif .navbar__notif-all--header { display: inline-block; flex-shrink: 0; padding: .26rem .7rem; border: 1px solid var(--color-accent); border-top: 1px solid var(--color-accent); border-radius: 999px; font-size: .82rem; font-weight: 600; line-height: 1.3; white-space: nowrap; } .modal-notif .navbar__notif-all--header:hover, .modal-notif .navbar__notif-all--header:focus { background: var(--color-accent); color: #fff; } /* ========================================================================== 5. TLAČÍTKA ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .5rem 1.15rem; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: .88rem; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.4; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; box-shadow: 0 4px 14px rgba(13,148,136,.30); } .btn--secondary { background: var(--color-surface); color: var(--color-text-secondary); border-color: var(--color-border); } .btn--secondary:hover { background: var(--color-surface-alt); color: var(--color-text); border-color: #c5cdd8; } .btn--outline { background: transparent; color: var(--color-accent); border-color: var(--color-accent); } .btn--outline:hover { background: var(--color-accent-light); color: var(--color-accent-hover); } /* Outline bílé (v navbaru / hero na tmavém pozadí) */ .navbar__links .btn--outline { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.45); } .navbar__links .btn--outline:hover { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.7); } .btn--danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); } .btn--danger:hover { background: #b91c1c; color: #fff; } .btn--copied { background: var(--color-success-light); color: var(--color-success); border-color: var(--color-success); pointer-events: none; transition: background .2s, color .2s, border-color .2s; } .btn--sm { padding: .35rem .85rem; font-size: .84rem; } .btn--xs { padding: .22rem .6rem; font-size: .78rem; } .btn--lg { padding: .75rem 1.75rem; font-size: 1.05rem; } /* Mobile touch target increase — btn--xs je moc malý pro prst (audit P1 2026-04-17) */ @media (max-width: 640px) { .btn--xs { padding: .38rem .75rem; font-size: .8rem; min-height: 32px; } } .btn--full { width: 100%; } .btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none; } /* Loading spinner */ @keyframes btn-spin { to { transform: rotate(360deg); } } /* ========================================================================== 6. FLASH ZPRÁVY ========================================================================== */ .flash-container { width: var(--app-content-width); max-width: var(--app-content-max); margin: 0 auto; padding: .75rem var(--app-content-padding) 0; } .alert { padding: .9rem 1.1rem; border-radius: var(--radius); font-size: .92rem; display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; border: 1px solid transparent; line-height: 1.5; } .alert--success { background: var(--color-success-light); color: #065f46; border-color: #a7f3d0; } .alert--danger, .alert--error { background: var(--color-danger-light); color: #991b1b; border-color: #fecaca; } .alert--warning { background: var(--color-warning-light); color: var(--color-warning-text); border-color: #fde68a; } .alert--info { background: var(--color-info-light); color: #155e75; border-color: #a5f3fc; } .alert__close { background: none; border: none; cursor: pointer; font-size: 1.2rem; line-height: 1; opacity: .5; padding: 0 .2rem; flex-shrink: 0; } .alert__close:hover { opacity: 1; } .alert__list { margin: .25rem 0 0 1rem; padding: 0; font-size: .87rem; } .alert__list li { margin-bottom: .2rem; } /* ========================================================================== 7. BADGES ========================================================================== */ .badge { display: inline-flex; align-items: center; padding: .25rem .7rem; border-radius: 99px; font-size: .78rem; /* unified tiny */ font-weight: 700; line-height: 1; white-space: nowrap; } .badge--success { background: var(--color-success-light); color: var(--color-success); } .badge--danger { background: var(--color-danger-light); color: var(--color-danger); } .badge--muted { background: var(--color-slate-100); color: var(--color-text-muted); } .badge--warning { background: var(--color-warning-bg); color: var(--color-warning-text); } .badge--info { background: #dbeafe; color: var(--color-info-strong); } .lang-badge { display: inline-flex; align-items: center; padding: .12rem .4rem; border-radius: 99px; font-size: .65rem; font-weight: 600; opacity: .8; text-transform: uppercase; letter-spacing: .04em; } .lang-badge--cs { background: #e0e4ed; color: var(--color-primary); } .lang-badge--en { background: #dcfce7; color: #166534; } .lang-badge--de { background: #fef9c3; color: #854d0e; } .lang-badge--ua { background: #dbeafe; color: var(--color-info-strong); } .lang-badge--ru { background: #fce7f3; color: #9d174d; } /* ========================================================================== 8. FORMULÁŘOVÉ PRVKY (doctor/admin stránky) ========================================================================== */ .form-group { margin-bottom: 1.15rem; } .form-group--inline { display: flex; align-items: center; gap: .5rem; } .form-label { display: block; font-size: .9rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: .4rem; } .required-star { color: var(--color-danger); margin-left: .15rem; } .form-control { display: block; width: 100%; padding: .55rem .85rem; font-size: .9rem; font-family: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition); line-height: 1.5; } .form-control:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(13,148,136,.12); } .form-control::placeholder { color: var(--color-text-muted); } .form-control:disabled { background: var(--color-surface-alt); opacity: .7; cursor: not-allowed; } select.form-control { cursor: pointer; } textarea.form-control { resize: vertical; min-height: 90px; } .phone-wrap { display: flex; gap: .4rem; } .phone-prefix { width: 85px; flex-shrink: 0; text-align: center; } .phone-number { flex: 1; } .has-error .form-control { border-color: var(--color-danger); } .input-group { position: relative; display: flex; } .input-group .form-control { flex: 1; } .checkbox-label { display: flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--color-text-secondary); cursor: pointer; } .checkbox-label input { accent-color: var(--color-accent); } /* ========================================================================== 9. FOOTER ========================================================================== */ .footer { background: linear-gradient(160deg, #141b2d, #1e293b); color: rgba(255,255,255,.6); margin-top: auto; } .footer__inner { display: grid; grid-template-columns: 2fr 1fr 1.4fr 1fr auto; gap: 2rem; padding: 2rem 1.75rem; max-width: 1240px; margin: 0 auto; box-sizing: border-box; } .footer__logo { font-size: 1.1rem; font-weight: 800; color: #fff; display: block; margin-bottom: .6rem; } .footer__desc { font-size: .85rem; color: rgba(255,255,255,.5); line-height: 1.65; margin: 0; } .footer__links h4, .footer__contact h4, .footer__heading { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); margin-bottom: .85rem; } .footer__links ul, .footer__contact ul { list-style: none; padding: 0; margin: 0; } .footer__links li, .footer__contact li { margin-bottom: .5rem; } .footer__links a, .footer__contact a { color: rgba(255,255,255,.65); font-size: .88rem; text-decoration: none; transition: color .2s; } .footer__links a:hover, .footer__contact a:hover { color: var(--color-accent-lighter); } .footer__legal { margin-top: .5rem; max-width: 360px; line-height: 1.55; } .footer__demo { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fbbf24; margin-bottom: .15rem; } .footer__gdpr { display: block; font-size: .68rem; font-weight: 400; color: rgba(255,255,255,.25); text-transform: none; letter-spacing: 0; } .footer__time { display: block; margin-top: .4rem; font-size: .72rem; color: rgba(255,255,255,.25); } .footer__company-btn { background: none; border: none; color: rgba(255,255,255,.45); font: inherit; font-size: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; padding: 0; transition: color .2s; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .footer__company-btn:hover { color: var(--color-accent-lighter); } .footer__contact--logo { display: flex; align-items: flex-start; justify-content: flex-end; } .footer__logo-btn { background: none; border: none; cursor: pointer; padding: .5rem; border-radius: 8px; transition: opacity .2s; opacity: .4; } .footer__logo-btn:hover { opacity: .85; } .footer__company-logo { height: 32px; width: auto; display: block; } .footer__company-btn--bottom { font-size: .8rem; text-transform: none; letter-spacing: 0; font-weight: 400; color: rgba(255,255,255,.35); } .footer__company-btn--bottom:hover { color: var(--color-accent-lighter); } .footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 1rem 0; text-align: center; font-size: .8rem; color: rgba(255,255,255,.35); } /* ========================================================================== 10. LANDING PAGE ========================================================================== */ /* Demo banner */ /* Hero sekce */ .hero { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 55%, #4a6b7a 100%); color: #fff; padding: 5rem 0 4rem; overflow: hidden; position: relative; } .hero__title { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; color: #fff; line-height: 1.15; margin-bottom: .85rem; } .hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; } /* Hero mockup (dekorativní) */ /* Sekce obecně */ .section { padding: 4.5rem 0; } /* Features grid */ /* Formuláře list */ /* Steps */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-top: 2.5rem; counter-reset: steps; } .step { text-align: center; } /* CTA sekce */ /* ========================================================================== 11. AUTH (přihlášení, registrace) ========================================================================== */ .page-auth .main-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; } .page-auth .flash-container { width: 100%; max-width: 440px; padding: 0 0 .5rem; } .page-auth .container--narrow { max-width: 440px; padding: 0; } /* Registration page */ .page-auth--register .main-content { flex-direction: column; align-items: center; justify-content: flex-start; padding: 0; } .reg { width: 100%; max-width: 1021px; margin: 0 auto; padding: 0 1.5rem 3rem; } /* Hero banner */ .reg__hero { text-align: center; padding: 2.5rem 1rem 2rem; } .reg__title { font-size: 1.65rem; /* unified h1 */ font-weight: 800; color: var(--color-primary); margin-bottom: .4rem; } .reg__subtitle { font-size: .93rem; color: var(--color-text-muted); margin: 0; max-width: 440px; margin-left: auto; margin-right: auto; line-height: 1.55; } /* Sections with numbered badges */ .reg__section { display: flex; gap: 1.25rem; margin-bottom: 1.25rem; } .reg__section-badge { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: .9rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1.35rem; box-shadow: 0 2px 8px rgba(58,64,90,.25); } .reg__section-body { flex: 1; min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem 1.5rem 0.5rem; box-shadow: var(--shadow-sm); } .reg__section-title { font-size: 1.15rem; font-weight: 700; color: var(--color-primary); margin: 0 0 .15rem; } .reg__section-desc { font-size: .87rem; color: var(--color-text-muted); margin: 0 0 1.1rem; line-height: 1.5; } /* 2-col fields grid inside section */ .reg__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .reg__field { margin-bottom: 1rem; } .reg__field--full { grid-column: 1 / -1; } /* Submit area */ .reg__submit { text-align: center; margin-top: .75rem; } .reg__submit .btn { min-width: 280px; } @media (max-width: 320px) { .reg__submit .btn { min-width: auto; } } .reg__login-link { margin-top: .9rem; font-size: .87rem; color: var(--color-text-muted); } /* ── Office hours table ── */ .oh-table { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; margin-bottom: .5rem; } .oh-table__head { display: grid; grid-template-columns: 85px 1fr 1fr; gap: .4rem; background: var(--color-surface-alt); padding: .35rem .65rem; border-bottom: 1px solid var(--color-border); } .oh-table__th { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); text-align: center; } .oh-table__th--day { text-align: left; } .oh-table__row { display: grid; grid-template-columns: 85px 1fr 1fr; gap: .4rem; padding: .3rem .65rem; align-items: center; border-bottom: 1px solid var(--color-border); background: var(--color-surface); transition: background var(--transition); } .oh-table__row:last-child { border-bottom: none; } .oh-table__row--active { background: var(--color-accent-light); } .oh-table__day { display: flex; align-items: center; gap: .35rem; cursor: pointer; font-size: .78rem; font-weight: 500; color: var(--color-text-muted); } .oh-table__row--active .oh-table__day { color: var(--color-text); font-weight: 600; } .oh-table__day input[type="checkbox"] { accent-color: var(--color-accent); width: 13px; height: 13px; } .oh-table__times { display: flex; align-items: center; gap: .3rem; } .oh-table__sep { color: var(--color-text-muted); font-size: .8rem; flex-shrink: 0; } .form-control--time { width: auto; min-width: 0; flex: 1; padding: .32rem .4rem; font-size: .82rem; text-align: center; } /* ── Fieldsets — profile page (kept for backward compat) ── */ .auth-card { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 2.5rem 2.25rem; width: 100%; max-width: 440px; margin: 0 auto; border: 1px solid var(--color-border); } .auth-card__header { text-align: center; margin-bottom: 1.75rem; } .auth-card__logo { display: flex; align-items: center; justify-content: center; margin: 0 auto .8rem; color: var(--color-primary); } .auth-card__logo svg { width: 32px; height: 32px; stroke-width: 1.6; } .auth-card__title { font-size: 1.65rem; font-weight: 800; color: var(--color-primary); margin-bottom: .2rem; } .auth-card__subtitle { font-size: .92rem; color: var(--color-text-muted); margin: 0; } .auth-card__footer { margin-top: 1.5rem; text-align: center; font-size: .92rem; color: var(--color-text-muted); } .auth-card__footer p { margin: 0; } /* Fieldset sekce (registrace) */ .fieldset { border: none; padding: 0; margin: 0 0 1.5rem; min-inline-size: 0; } /* Řádek se dvěma poli vedle sebe */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* Nápověda pod polem */ .form-hint { font-size: .82rem; color: var(--color-text-muted); margin-top: .35rem; line-height: 1.5; } /* Chybová hláška u pole */ .invalid-feedback { font-size: .8rem; color: var(--color-danger); margin-top: .3rem; } .form-control.is-invalid { border-color: var(--color-danger); } /* ========================================================================== 12. DASHBOARD — PAGE HEADER ========================================================================== */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--color-border); margin-bottom: 1.5rem; flex-wrap: wrap; } .page-header__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; flex-shrink: 0; } .page-title { font-size: 1.75rem; font-weight: 800; color: var(--color-primary); margin-bottom: .35rem; } .page-subtitle { font-size: .95rem; color: var(--color-text-muted); margin: 0; } /* ========================================================================== 12b. DASHBOARD — NEW LAYOUT ========================================================================== */ .dash { width: var(--app-content-width); max-width: var(--app-content-max); margin: 0 auto; padding: 0 var(--app-content-padding) 2rem; } .dash > * { max-width: 100%; min-width: 0; } .dash .card { max-width: 100%; box-sizing: border-box; } .dash .card__body { overflow: hidden; } .dash .card__body .table-responsive, .dash .card__body table.dh-aids, .dash .card__body > div[style*="overflow-x:auto"] { overflow-x: auto; max-width: 100%; } /* Hero welcome + inline stats */ /* ── Unified Hero typography (Task J) ──────────────────────── Sdílené varianty padding / font-size / color pro všechny Hero komponenty: .dash__hero, .prof__hero, veřejné profily. Proměnné umožňují lokální override bez duplikace hodnot. */ :root { --hero-padding: 1.25rem 1.75rem; --hero-padding-tight: 1rem 1.75rem .85rem; --hero-name-size: 1.35rem; --hero-name-weight: 800; --hero-name-line: 1.2; --hero-label-size: .88rem; --hero-label-weight: 500; --hero-label-color: rgba(255,255,255,.6); --hero-clinic-size: .92rem; --hero-clinic-color: rgba(255,255,255,.65); --hero-bg: linear-gradient(160deg, #1a2035 0%, #2d3a52 50%, #3d4a65 100%); } /* Laptop+ — větší horizontální odsazení v hero sekcích (≥1024px). */ @media (min-width: 1024px) { :root { --hero-padding: 1.25rem 2.75rem; --hero-padding-tight: 1rem 2.75rem .85rem; } .reg__hero { padding: 2.5rem 2.75rem 2rem; } } .dash__hero { margin-bottom: 1.25rem; background: var(--hero-bg); border-radius: 12px; color: #fff; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.12); } /* Muted text na tmavém hero pozadí — světlejší barva pro čitelnost (override pro .text-muted které má v utilities !important) */ .dash__hero .text-muted, .dash__hero p.text-sm, .dash__hero .text-sm.text-muted { color: rgba(255, 255, 255, 0.82) !important; } .dash__hero-top { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: var(--hero-padding); } /* Dashboard hero — stats bar přidává výšku, top padding kompaktnější */ .page-dashboard .dash__hero-top { padding: var(--hero-padding-tight); } .dash__greeting { font-size: var(--hero-label-size); color: var(--hero-label-color); margin: 0 0 .2rem; font-weight: var(--hero-label-weight); letter-spacing: .02em; } .dash__name { font-size: var(--hero-name-size); font-weight: var(--hero-name-weight); color: #fff; margin: 0; line-height: var(--hero-name-line); } .dash__name-link { color: inherit; text-decoration: none; transition: color .15s; } .dash__name-link:hover { color: var(--color-accent-lighter); text-decoration: none; } .dash__name-link:hover svg { stroke: var(--color-accent-lighter); opacity: 1; } .dash__clinic { font-size: var(--hero-clinic-size); color: var(--hero-clinic-color); margin: .3rem 0 0; font-weight: 400; } /* ========================================================================== HERO ACTIONS — sjednocený styl napříč stránkami Tmavý hero (slate gradient) + frosted glass prvky vpravo s teal akcentem. ========================================================================== */ .dash__hero-actions { display: flex; gap: .5rem; flex-shrink: 0; align-items: center; flex-wrap: wrap; } /* Všechna tlačítka v hero actions — frosted glass base */ .dash__hero-actions .btn { font-size: .82rem; padding: .45rem .9rem; border-radius: 8px; font-weight: 600; min-height: 34px; transition: background .15s, border-color .15s, color .15s, transform .15s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Outline (sekundární) */ .dash__hero-actions .btn--outline { background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.22); } .dash__hero-actions .btn--outline:hover { background: rgba(94,234,212,.15); color: #fff; border-color: rgba(94,234,212,.5); } /* Primary (hlavní akce) — teal solid */ .dash__hero-actions .btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; box-shadow: 0 2px 8px rgba(13,148,136,.3); } .dash__hero-actions .btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(13,148,136,.45); } /* Danger (koš, delete) — jemně červený na tmavém pozadí */ .dash__hero-actions .btn--danger { background: rgba(220,38,38,.15); color: #fca5a5; border-color: rgba(252,165,165,.35); } .dash__hero-actions .btn--danger:hover { background: rgba(220,38,38,.3); color: #fff; border-color: #fca5a5; } /* Select / select-like v hero (filtry) */ .dash__hero-actions select, .dash__hero-actions .form-control { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: .4rem .75rem; font-size: .82rem; font-weight: 500; min-height: 34px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .dash__hero-actions select option { background: #2d3a52; color: #fff; } .dash__hero-actions select:hover, .dash__hero-actions select:focus { border-color: rgba(94,234,212,.5); outline: none; } /* Text linky / dropdowny (details) */ .dash__hero-actions details > summary, .dash__hero-actions .hero-link { background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: .4rem .85rem; font-size: .82rem; font-weight: 600; cursor: pointer; min-height: 34px; display: inline-flex; align-items: center; gap: .35rem; list-style: none; transition: background .15s, border-color .15s; } .dash__hero-actions details > summary::-webkit-details-marker { display: none; } .dash__hero-actions details > summary:hover, .dash__hero-actions .hero-link:hover { background: rgba(94,234,212,.15); border-color: rgba(94,234,212,.5); color: #fff; text-decoration: none; } /* Ikona-only kruhová tlačítka (např. back arrow, edit) */ .dash__hero-actions .btn-icon, .dash__hero-actions .hero-icon-btn { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.22); cursor: pointer; transition: background .15s, border-color .15s; } .dash__hero-actions .btn-icon:hover, .dash__hero-actions .hero-icon-btn:hover { background: rgba(94,234,212,.15); border-color: rgba(94,234,212,.5); color: #fff; } /* Odznak s počtem (např. "12 kolegů") */ .dash__hero-actions .hero-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; background: rgba(94,234,212,.12); color: var(--color-accent-lighter); border: 1px solid rgba(94,234,212,.3); border-radius: 20px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; min-height: 28px; } /* Office hours status in hero */ /* Stats bar inside hero */ /* ── Hero grid: notifikace vs. status (v0.15.1) ────────────── */ /* hero-top: jméno vlevo, stav ordinace vpravo */ .page-dashboard .dash__hero-top { display: grid; grid-template-columns: 1fr minmax(300px, 420px); align-items: stretch; gap: 1.5rem; } /* hero-grid: notifikace plná šířka (single column) */ .dash__hero-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; padding: .85rem 1.75rem 1.15rem; border-top: 1px solid rgba(255,255,255,.06); } /* Levá polovina: notifikace */ .dash__hero-notifs { display: flex; flex-direction: column; min-width: 0; } .dash__hero-section-label { font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .65rem; display: flex; align-items: center; gap: .5rem; } .dash__hero-section-label::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.08); } .dash__hero-notifs-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; flex: 1; } .dash__hero-notif { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .3rem; padding: .6rem .75rem .55rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; color: rgba(255,255,255,.75); text-decoration: none; transition: background .15s, border-color .15s, transform .15s; min-height: 72px; overflow: hidden; } .dash__hero-notif::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background .18s; } .dash__hero-notif:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.18); text-decoration: none; } .dash__hero-notif--active { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); } .dash__hero-notif--active::before { background: var(--notif-color, rgba(255,255,255,.4)); } .dash__hero-notif-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.08); flex-shrink: 0; } .dash__hero-notif--active .dash__hero-notif-icon { background: color-mix(in srgb, var(--notif-color) 25%, transparent); } .dash__hero-notif-val { font-size: 1.4rem; font-weight: 800; line-height: 1; color: rgba(255,255,255,.35); font-variant-numeric: tabular-nums; } .dash__hero-notif--active .dash__hero-notif-val { color: #fff; } .dash__hero-notif-lbl { font-size: .7rem; font-weight: 600; color: rgba(255,255,255,.7); line-height: 1.25; } .dash__hero-notif--active .dash__hero-notif-lbl { color: rgba(255,255,255,.95); } /* 6. dlaždice: link na všechny notifikace */ .dash__hero-notifs-all { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .3rem; padding: .6rem .75rem .55rem; background: transparent; border: 1px dashed rgba(255,255,255,.18); border-radius: 8px; color: rgba(255,255,255,.7); text-decoration: none; min-height: 72px; transition: background .18s, border-color .18s, color .18s, transform .18s; } .dash__hero-notifs-all:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.4); color: #fff; transform: translateY(-1px); text-decoration: none; } .dash__hero-notifs-all-txt { font-size: .78rem; font-weight: 600; line-height: 1.25; } /* Pravá polovina: stav ord. doby / nepřítomnosti / účtu */ .dash__hero-status { display: flex; flex-direction: column; min-width: 0; } .dash__hero-status-list { display: flex; flex-direction: column; gap: .35rem; flex: 1; } .dash__hero-status-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .85rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; color: #fff; text-decoration: none; font-family: inherit; text-align: left; width: 100%; min-height: 42px; /* Sjednocená výška — první pillow obsahuje 24×24 button, druhý jen SVG 13px; bez min-height by oba měly různou výšku. */ cursor: pointer; transition: background .18s, border-color .18s, transform .18s, box-shadow .18s; flex: 1; box-sizing: border-box; } .dash__hero-status-row:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.18); text-decoration: none; color: #fff; } .dash__hero-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 0 8px currentColor; } @media (max-width: 1024px) { .page-dashboard .dash__hero-top { grid-template-columns: 1fr; } .dash__hero-notifs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .dash__hero-grid { padding: 1rem 1.25rem 1.25rem; gap: 1.15rem; } .dash__hero-notifs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .dash__hero-notif, .dash__hero-notifs-all { min-height: 84px; padding: .7rem .8rem; } .dash__hero-notif-val { font-size: 1.6rem; } .dash__hero-status-row { padding: .75rem .9rem; gap: .85rem; } } /* Sections */ .dash__section { margin-bottom: 1.75rem; } .dash__section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; min-height: 44px; } /* Sjednocené left/right wrappery pro head */ .dash__section-head-left { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1 1 auto; } .dash__section-head-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } /* Sjednocený collapse toggle button */ .dash-collapse-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text-muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s; flex-shrink: 0; } .dash-collapse-toggle:hover { background: var(--color-surface-alt); color: var(--color-primary); border-color: var(--color-primary); } .dash__section[data-collapsed="1"] .dash-collapse-toggle svg { transform: rotate(-90deg); transition: transform .2s; } .dash__section:not([data-collapsed="1"]) .dash-collapse-toggle svg { transition: transform .2s; } /* Při sbalené sekci: skrýt filter UI (tlačítka, selecty) → zbude jen titulek + toggle. Tím všechny karty získají stejnou minimalistickou výšku a stejnou informační hustotu. */ .dash__section[data-collapsed="1"] .dash__section-head { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; min-height: 32px; } .dash__section[data-collapsed="1"] .dash__section-head .dash-collapse-hide { display: none !important; } /* Sjednocený kontejner pro karty v dashboardu — stejná výška i padding ve sbaleném stavu */ .page-dashboard .dash__section[data-collapsed="1"] { padding: .85rem 1.35rem !important; } /* Malý indikátor (count/label) se naopak ve sbaleném stavu zvýrazní vedle titulku */ .dash-collapse-summary { font-size: .78rem; font-weight: 600; color: var(--color-text-muted); padding: .15rem .6rem; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 999px; white-space: nowrap; } .dash__section-title { font-size: 1.15rem; font-weight: 700; color: var(--color-primary); margin: 0 0 .75rem; padding-left: 0; } .dash__section-head .dash__section-title { margin-bottom: 0; } .dash__section-head .dash__section-title { margin-bottom: 0; } /* Form stats — full width horizontal strip */ .dash__colleague-card { transition: box-shadow .2s; } .dash__colleague-card:hover { box-shadow: var(--shadow); } .dash__colleague-stat { transition: background .15s, box-shadow .15s; } a.dash__colleague-stat:hover { background: var(--color-surface-alt); box-shadow: var(--shadow-sm); } .dash__colleague-card a[title]:hover { color: var(--color-accent) !important; } .dash__recent-row { display: grid; align-items: center; gap: .5rem; padding: .55rem 1rem; font-size: .82rem; border-bottom: 1px solid var(--color-border); transition: background .15s; position: relative; } .dash__recent-row--hidden { display: none !important; } .dash__recent-row:hover { background: var(--color-surface-alt) !important; z-index: 2; } .dash__recent-row:has(.dropdown__menu.open) { z-index: 200; } a.dash__link-name { display: block; font-size: .95rem; font-weight: 700; color: var(--color-primary); margin-bottom: .2rem; text-decoration: none; cursor: pointer; } a.dash__link-name:hover { color: var(--color-accent); text-decoration: none; } /* Responsive */ @media (max-width: 768px) { .dash__hero-top { flex-direction: column; text-align: center; padding: 1.25rem 1rem; } .dash__link-card { flex-wrap: wrap; } } @media (max-width: 540px) { .dash__link-card { flex-direction: column; align-items: flex-start; gap: .6rem; } } /* ========================================================================== 13. STATS GRID ========================================================================== */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; } .stat-card { background: var(--color-surface); border: none; border-radius: var(--radius-lg); padding: 1rem 1.15rem; box-shadow: 0 1px 3px rgba(0,0,0,.04); display: flex; align-items: center; gap: .85rem; } .stat-card__icon { width: 44px; height: 44px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; background: var(--color-accent-light); } .stat-card__icon svg { width: 28px; height: 28px; } .stat-card--primary .stat-card__icon { background: var(--color-accent-light); } .stat-card--accent .stat-card__icon { background: #f0fdf4; } .stat-card--success .stat-card__icon { background: var(--color-success-light); } .stat-card__value { font-size: 1.6rem; font-weight: 800; color: var(--color-primary); line-height: 1.1; } .stat-card__label { font-size: .8rem; color: var(--color-text-muted); font-weight: 500; margin-top: .1rem; } /* ========================================================================== 14. SECTION HEADER + SECTION TITLE ========================================================================== */ .section-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; } .section-title { font-size: 1.05rem; font-weight: 700; color: var(--color-primary); margin: 0; } /* ========================================================================== 17. PRÁZDNÝ STAV ========================================================================== */ .empty-state { text-align: center; padding: 3.5rem 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .empty-state__icon { font-size: 3rem; display: flex; align-items: center; justify-content: center; opacity: .35; margin-bottom: .75rem; color: var(--color-text-muted); } .empty-state__icon svg { width: 48px; height: 48px; stroke-width: 1.5; } .empty-state__title { font-size: 1.25rem; font-weight: 700; color: var(--color-text-secondary); margin-bottom: .5rem; } .empty-state__desc { font-size: .95rem; color: var(--color-text-muted); margin-bottom: 1.35rem; line-height: 1.6; } /* ========================================================================== 18. TABULKA ========================================================================== */ .table-responsive { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .card__body .table-responsive { border: none; border-radius: 0; box-shadow: none; } .table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--color-surface); } .table th { background: transparent; color: var(--color-text-muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; padding: .6rem .85rem; border-bottom: 2px solid var(--color-border); text-align: left; border-bottom: 1.5px solid var(--color-border); white-space: nowrap; } .table th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 1.6rem; } .table th.sortable:hover { color: var(--color-accent); } .table th.sortable::after { content: '⇅'; position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); font-size: .7rem; opacity: .3; transition: opacity .15s; } .table th.sortable:hover::after { opacity: .55; } .table th.sortable[data-sort="asc"]::after { content: '▲'; opacity: .85; color: var(--color-accent); font-size: .55rem; } .table th.sortable[data-sort="desc"]::after { content: '▼'; opacity: .85; color: var(--color-accent); font-size: .55rem; } .table td { padding: .6rem .85rem; font-size: .88rem; color: var(--color-text); border-bottom: 1px solid var(--color-border); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table--striped tbody tr:nth-child(even) { background: #f9fafb; } .table tbody tr:hover { background: var(--color-accent-light); } /* ========================================================================== 19. STRÁNKOVÁNÍ ========================================================================== */ /* ── Pagination bar (wrapper) ── */ .pagination-bar { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; } /* ── Page numbers ── */ .pagination { margin: 0; } .pagination__list { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; } .pagination__link { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 .5rem; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 500; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); text-decoration: none; transition: background var(--transition), color var(--transition), border-color var(--transition); } a.pagination__link:hover { background: var(--color-accent-light); color: var(--color-accent); border-color: var(--color-accent); text-decoration: none; } .pagination__item--active .pagination__link { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .pagination__item--disabled .pagination__link { opacity: .4; pointer-events: none; } .pagination__item--ellipsis .pagination__link { border-color: transparent; background: transparent; } /* ── Meta: info + per-page ── */ .pagination-bar__meta { display: flex; align-items: center; gap: .75rem; } .pagination__info { font-size: .82rem; color: var(--color-text-secondary); white-space: nowrap; } .pagination-bar__per-page { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--color-text-secondary); white-space: nowrap; cursor: pointer; } .pagination-bar__per-page select { padding: .2rem .4rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: .82rem; color: var(--color-text); cursor: pointer; } /* Stack on small screens */ @media (max-width: 600px) { .pagination-bar { flex-direction: column; gap: .5rem; } } /* ========================================================================== 21. FILTER FORMULÁŘ (submissions) ========================================================================== */ .filter-form .form-group { margin-bottom: 0; flex: 1; min-width: 150px; } /* ========================================================================== 22. MODAL ========================================================================== */ .modal-overlay { position: fixed; inset: 0; /* 9500 = nad navbar (200), nad chat-fab (9000), pod notif panel (9999) a maintenance (99999). Modal MUSÍ překrývat navbar, jinak by uživatel mohl klikat na navi položky během modalu. */ z-index: 9500; background: rgba(26, 29, 43, .55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: modalFadeIn .25s ease; } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--modal-shadow); padding: 2rem 2rem 1.75rem; max-width: 480px; width: 100%; text-align: center; animation: modalSlideUp .3s ease; max-height: calc(100vh - 3rem); max-height: calc(100dvh - 3rem); overflow-y: auto; position: relative; } .modal::-webkit-scrollbar { width: 6px; } .modal::-webkit-scrollbar-track { background: transparent; } .modal::-webkit-scrollbar-thumb { background: var(--color-slate-300); border-radius: 3px; } .modal::-webkit-scrollbar-thumb:hover { background: #94a3b8; } @keyframes modalSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .modal__icon { font-size: 2.8rem; margin-bottom: .6rem; } /* Sjednocený zavírací křížek modalů — vzor #notifBackdrop (.navbar__notif-modal-close) */ .modal__close { position: absolute; top: .55rem; right: .55rem; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1f5f9; color: #475569; display: inline-flex; align-items: center; justify-content: center; font-size: 0; /* skryje textový × / × — glyph přes ::before */ line-height: 1; cursor: pointer; transition: background .15s, color .15s, transform .15s; z-index: 10; padding: 0; flex-shrink: 0; } .modal__close::before { content: "\2715"; font-size: 1.15rem; font-weight: 400; line-height: 1; color: inherit; } .modal__close:hover { background: #fee2e2; color: #b91c1c; transform: rotate(90deg); } .modal__close:focus-visible { outline: 2px solid var(--color-accent, #0d9488); outline-offset: 2px; } /* Varianta pro tmavou hlavičku — nyní identická (šedý kruh čitelný i na tmavém pozadí) */ .modal__close--on-dark { background: #f1f5f9; color: #475569; } .modal__title { font-size: 1.4rem; font-weight: 700; color: var(--color-primary); margin: 0 0 .85rem; padding-right: 2rem; } .modal__text { font-size: .92rem; color: var(--color-text-secondary); line-height: 1.6; margin: 0 0 1rem; } .modal__text--sm { font-size: .85rem; color: var(--color-text-muted); } .modal__notice { background: var(--color-warning-light); border: 1px solid #fde68a; border-radius: var(--radius); padding: .85rem 1rem; font-size: .87rem; color: var(--color-warning-text); line-height: 1.55; margin-bottom: 1rem; text-align: left; } .modal__close-btn { margin-top: .5rem; min-width: 220px; } .modal__timer { margin-top: .75rem; font-size: .75rem; color: var(--color-text-muted); } /* ========================================================================== 22b. MODAL — UNIFIED SIZE & LAYOUT SYSTEM Tři standardní velikosti + strukturální elementy pro modaly aplikace. Přehlížejí legacy text-center `.modal` (která zůstává pro confirm-style popup). Použití v HTML:
← jedna ze 3 velikostí

…

…

…
Barvy chipů (scope / presety) řídí třídy `.modal__chip[--checked]`. Kritické modaly (mazání, heslo, danger zone) používají `.modal--danger` → levý červený accent strip + varovný header. ========================================================================== */ /* Velikosti — přepíší base .modal max-width (480px) */ .modal--sm { max-width: 420px; } .modal--md { max-width: 560px; } .modal--lg { max-width: 720px; } @media (max-width: 480px) { .modal--sm, .modal--md, .modal--lg { max-width: calc(100vw - 1rem) !important; padding: 1rem 0.85rem !important; } .modal__body { padding: 0.85rem !important; } } /* Form-style modal: padding 0 na kontejneru, padding řídí header/body/footer. * Flex column zajistí, že header + footer jsou pinned a body může scrollovat. */ .modal--form { padding: 0; text-align: left; border-radius: 14px; box-shadow: var(--modal-shadow); display: flex; flex-direction: column; overflow: hidden; } .modal--form > .modal__header, .modal--form > .modal__footer { flex-shrink: 0; } .modal--form > form { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; } .modal--form > .modal__body, .modal--form > form > .modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Strukturální elementy */ .modal__header { padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--modal-border); background: var(--modal-header-bg); display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .modal__header-text { flex: 1; min-width: 0; } .modal__header .modal__title { margin: 0; font-size: var(--modal-title-size); font-weight: var(--modal-title-weight); color: var(--modal-text); text-align: left; } .modal__subtitle { margin: .2rem 0 0; font-size: var(--modal-subtitle-size); color: var(--modal-subtitle-color); line-height: 1.4; } /* Sjednocený zavírací křížek modalů — vzor #notifBackdrop (.navbar__notif-modal-close) */ .modal__close-x { background: #f1f5f9; border: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 0; /* skryje vlastní text content (× / ×) — glyph se vykreslí přes ::before */ color: #475569; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; border-radius: 50%; transition: background .15s, color .15s, transform .15s; } .modal__close-x::before { content: "\2715"; font-size: 1.15rem; font-weight: 400; line-height: 1; color: inherit; } .modal__close-x:hover { background: #fee2e2; color: #b91c1c; transform: rotate(90deg); } .modal__close-x:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .modal__body { padding: 1.15rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; text-align: left; } .modal__body--tight { gap: .6rem; } .modal__footer { padding: .9rem 1.4rem 1.15rem; border-top: 1px solid var(--modal-border); background: var(--modal-footer-bg); display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; align-items: stretch; } /* Akční tlačítka v patičce modalu — sjednocené rozměry (Zavřít / Upravit / Klonovat / OK / Uložit…). min-width srovná šířku krátkých tlačítek, align-items:stretch srovná výšku napříč patičkou. */ .modal__footer .btn { min-width: 104px; justify-content: center; } @media (max-width: 400px) { .modal__footer { flex-direction: column-reverse; gap: 0.5rem; } .modal__footer .btn { width: 100%; flex: 1 1 100%; } } /* Field label pattern — uppercase .72rem s letter-spacingem */ .modal__field-label { display: block; font-size: var(--modal-label-size); font-weight: 700; text-transform: uppercase; letter-spacing: var(--modal-label-tracking); color: var(--modal-subtitle-color); margin-bottom: .4rem; } /* Info box — success / warn / danger */ .modal__info { padding: .55rem .75rem; border-radius: 8px; font-size: .75rem; line-height: 1.45; } .modal__info--success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; } .modal__info--warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; } /* Error box — pro zobrazení chyb z API. Default je skrytý přes inline style="display:none". */ .modal__error { padding: .55rem .75rem; background: var(--modal-danger-bg); border: 1px solid #fecaca; border-radius: 8px; font-size: var(--modal-subtitle-size); color: #991b1b; } /* Chip radio — pro scope / presety / opce (sjednocený s due-preset pattern) */ .modal__chip { display: inline-block; padding: .38rem .85rem; border: 1.5px solid var(--color-border); border-radius: 999px; font-size: .82rem; font-weight: 600; color: #475569; background: #fff; transition: all .12s; cursor: pointer; user-select: none; } .modal__chip:hover { border-color: var(--color-accent, #0d9488); color: var(--color-accent, #0d9488); } .modal__chip--sm { padding: .32rem .7rem; font-size: .77rem; } /* Stav :checked se aplikuje přes sibling selector — input musí být .display:none; + label>.modal__chip */ input[type="radio"]:checked + .modal__chip, input[type="checkbox"]:checked + .modal__chip { background: var(--color-accent, #0d9488); border-color: var(--color-accent, #0d9488); color: #fff; } /* Chip row — wrap container */ .modal__chip-row { display: flex; flex-wrap: wrap; gap: .35rem; } /* Danger modal variant — vizuální varování pro kritické akce (mazání, heslo, force actions) */ .modal--danger .modal__header { border-bottom-color: #fecaca; background: linear-gradient(to right, rgba(220,38,38,.04), transparent); } .modal--danger .modal__title { color: #991b1b; } .modal--danger::before { content: ''; display: block; height: 4px; background: linear-gradient(90deg, var(--modal-danger-accent), #ef4444); } /* Themed modal variant — slate→teal gradient header (vzor: companyModal) */ .modal--themed { border-radius: 16px; box-shadow: var(--modal-shadow); overflow: hidden; } .modal--themed > .modal__header { background: var(--modal-themed-grad); border-bottom: none; padding: 1.5rem 1.75rem 1.25rem; position: relative; overflow: hidden; z-index: 0; } .modal--themed > .modal__header::before { content: ''; position: absolute; top: -50%; left: -20%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 50%, rgba(13,148,136,.18) 0%, transparent 50%); pointer-events: none; z-index: 0; } .modal--themed > .modal__header > * { position: relative; z-index: 1; } .modal--themed .modal__title { color: var(--modal-themed-text); } .modal--themed .modal__subtitle { color: rgba(255,255,255,.85); } /* Themed modals — stejný šedý kruh jako všude jinde (čitelný i na tmavém gradientu) */ .modal--themed .modal__close-x { background: #f1f5f9; color: #475569; border-radius: 50%; } .modal--themed .modal__close-x:hover { background: #fee2e2; color: #b91c1c; transform: rotate(90deg); } .modal--themed > .modal__footer { background: var(--modal-footer-bg); border-top-color: var(--modal-border); } /* Responzivní úpravy */ @media (max-width: 600px) { .modal--lg, .modal--md { max-width: 100%; } .modal__header, .modal__footer { padding-left: 1rem; padding-right: 1rem; } .modal__body { padding-left: 1rem; padding-right: 1rem; } } /* ── modal--doc — PDF / dokumentové modaly (max-width 1080px, 96vh) ── */ .modal-overlay > .modal.modal--doc { max-width: 1080px; width: 96vw; height: 96vh; display: flex; flex-direction: column; } .modal.modal--doc > .modal__header { flex-shrink: 0; } .modal.modal--doc > .modal__body { flex: 1 1 auto; overflow: auto; padding: 0; } .modal.modal--doc > .modal__body > iframe { width: 100%; height: 100%; border: 0; display: block; } .modal.modal--doc > .modal__footer { flex-shrink: 0; } @media (max-width: 720px) { .modal-overlay > .modal.modal--doc { width: 100vw; height: 100vh; max-width: none; border-radius: 0; } } /* ── 22c. MODAL — NOTIFIKAČNÍ PANEL (Type 2) ─────────────────────────── */ /* Overlay/backdrop pro Notif panel — tmavší pozadí, blokující */ .modal-overlay.modal-overlay--notif { background: rgba(15, 23, 42, .35); /* Zastavit scroll chaining: wheel events nesmí propustit do pozadí stránky. */ overscroll-behavior: contain; } /* Hlavní kontejner — 1 velikost. * `height: 80vh` (NE max-height) — modal zůstává stejně velký napříč filtry * (lékařka 2026-05-29: „Modal by měl být stejně veliký pro všechny záložky filtru"). * List má vlastní scroll, takže obsah s méně položkami nezmenší modal. */ .modal-notif { background: var(--modal-bg); border-radius: 12px; box-shadow: var(--modal-shadow); width: 560px; max-width: 92vw; height: 80vh; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; color: var(--modal-text); } /* Dashboard „Nevyřízené události" — 2× širší než výchozí .modal-notif */ #notifBackdrop .modal-notif { width: 1120px; } /* Větší vnitřní odsazení od okrajů (modal je dvojnásob široký, 1rem působí těsně). */ #notifBackdrop .modal-notif__header, #notifBackdrop .modal-notif__filter, #notifBackdrop .modal-notif__section-header, #notifBackdrop .modal-notif__item, #notifBackdrop .modal-notif__footer, #notifBackdrop .modal-notif__empty { padding-left: 1.5rem; padding-right: 1.5rem; } /* Header — title + close */ .modal-notif__header { flex-shrink: 0; display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--modal-border); background: var(--modal-header-bg); } .modal-notif__title { font-size: var(--modal-title-size); font-weight: var(--modal-title-weight); color: var(--modal-text); margin: 0; flex: 1 1 auto; } .modal-notif__count { font-size: .75rem; font-weight: 700; background: #0d9488; color: #fff; padding: .1rem .45rem; border-radius: 999px; } /* Filter row — textový řádek se stavy/filtry */ .modal-notif__filter { flex-shrink: 0; display: flex; align-items: center; gap: .15rem; padding: .55rem 1rem; border-bottom: 1px solid var(--modal-border); background: var(--modal-bg); font-size: .8rem; color: var(--modal-text-muted); flex-wrap: wrap; } /* Specificity bump (`.modal-notif` ancestor) — modal renderuje uvnitř , * jinak by `.navbar__links a:hover` (bílý text na bílém pozadí) přepsal lokální styl. */ .modal-notif .modal-notif__filter-item { cursor: pointer; padding: .2rem .55rem; border-radius: 999px; color: inherit; background: transparent; text-decoration: none; font-weight: inherit; transition: background .15s, color .15s; } .modal-notif .modal-notif__filter-item:hover { background: #e2e8f0; color: var(--modal-text); } .modal-notif .modal-notif__filter-item.is-active { background: #ccfbf1; color: #115e59; font-weight: 600; } .modal-notif .modal-notif__filter-item.is-active:hover { background: #5eead4; color: #115e59; } .modal-notif__filter-sep { color: #cbd5e1; user-select: none; } /* Scrollovatelný seznam */ .modal-notif__list { flex: 1 1 auto; overflow-y: auto; /* Zastavit propagaci wheel events na pozadí stránky, když list nemá co rolovat * (typicky po aplikaci filtru, kdy se sekce schovají a obsah se vejde bez scrollu). */ overscroll-behavior: contain; background: var(--modal-bg); } /* Sekce s sticky headerem — fix scroll bugu (header neprosvítá) */ .modal-notif__section + .modal-notif__section { border-top: 1px solid var(--modal-border); } .modal-notif__section-header { position: sticky; top: 0; z-index: 2; /* Decentní tónovaný pruh — odliší časové skupiny (Dnes/Včera/…) v seznamu. * OPAQUE (solid) — nutné pro sticky (header nesmí prosvítat při scrollu). */ background: #eef2f7; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--modal-label-tracking); color: #475569; padding: .5rem 1rem .45rem; border-bottom: 1px solid var(--modal-border); } /* Položka — 3-sloupcový grid: ikona | tělo | čas * Specificity bump — viz komentář u .modal-notif__filter-item výše. */ .modal-notif .modal-notif__item { display: grid; grid-template-columns: 36px 1fr auto; gap: .65rem; padding: .7rem 1rem; border-bottom: 1px solid var(--modal-border); text-decoration: none; color: inherit; background: transparent; font-weight: inherit; align-items: start; transition: background .15s, color .15s; } .modal-notif .modal-notif__item:hover { background: #f1f5f9; color: inherit; } .modal-notif__item-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: var(--modal-text-muted); flex-shrink: 0; } .modal-notif__item-body { min-width: 0; } .modal-notif__item-cat { font-size: .68rem; text-transform: uppercase; letter-spacing: var(--modal-label-tracking); color: var(--modal-text-muted); margin-bottom: .15rem; font-weight: 600; } .modal-notif__item-title { font-size: .88rem; font-weight: 600; color: var(--modal-text); margin: 0 0 .15rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modal-notif__item-desc { font-size: .78rem; color: var(--modal-text-muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modal-notif__item-time { font-size: .72rem; color: var(--modal-text-muted); white-space: nowrap; align-self: start; padding-top: .2rem; } /* Empty state */ .modal-notif__empty { padding: 2rem 1rem; text-align: center; color: var(--modal-text-muted); font-size: .85rem; } /* Footer (volitelný) */ .modal-notif__footer { flex-shrink: 0; padding: .7rem 1rem; border-top: 1px solid var(--modal-border); background: var(--modal-footer-bg); display: flex; justify-content: flex-end; gap: .5rem; } /* ── Inline expand notifikace (lékařka 2026-05-29) ───────────────────────── * Klik na admin_msg/zprávu/form → natáhne řádek o detail PŘÍMO v listu. * Detail je full-width span pod 3-sloupcovým gridem. * 2026-05-29 (v0.61.7): sjednocené velikosti — meta, body i buttons všechny * na .72rem (= velikost meta řádku) + kompaktní padding/gap pro hustý * dashboard look. Žádné inline font-size override v message HTML — dědí. */ .modal-notif__item-detail { /* 2026-05-29 (v0.61.9): detail box jen v body sloupci (grid-column 2). * 2026-05-29 (v0.61.11): zvětšeno písmo (.85rem body / .8rem meta+buttons) * + reset

margin (browser default 16px top+bottom dělal mezery) + * stylizace uvnitř message HTML (předtím skoro neviditelný „Otevřít…"). */ grid-column: 2; margin-top: .55rem; padding: .6rem .75rem; background: #f8fafc; border-radius: 6px; border: 1px solid var(--modal-border); font-size: .85rem; line-height: 1.5; color: var(--modal-text); } .modal-notif__item-detail-meta { font-size: .8rem; color: var(--modal-text-muted); margin-bottom: .4rem; } .modal-notif__item-detail p { margin: 0 0 .4rem; /* reset browser default 1em → jen drobný spacing mezi odstavci */ font-size: inherit; line-height: 1.5; } .modal-notif__item-detail p:last-of-type { margin-bottom: 0; } .modal-notif__item-detail div { font-size: inherit; line-height: 1.5; } /* Bumpneme specificitu (0,2,1) přes prefix .modal-notif — jinak `.navbar__links a` * (0,1,1) `color: rgba(255,255,255,.82)` z navbar kontextu kaskáduje sem (modal je * uvnitř