/* ===================================================================== Design system — modern admin, slate-blue paleta s barevnými akcenty. - Sidebar je trvale tmavý navy (i ve světlém režimu) → "do modra". - Glassmorphic header, jemné karty s volitelným barevným pruhem. - Žádné webfonty, žádné emoji v UI, čisté CSS s custom properties. - Přepínání světlý / tmavý: ===================================================================== */ :root { /* ============ Brand (sytá modrá) ============ */ --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-200: #bfdbfe; --brand-300: #93c5fd; --brand-400: #60a5fa; --brand-500: #3b82f6; --brand-600: #2563eb; --brand-700: #1d4ed8; --brand-800: #1e40af; --brand-900: #1e3a8a; /* ============ Akcenty pro ikonky / kategorie ============ */ --c-violet: #8b5cf6; --c-violet-d: #6d28d9; --c-pink: #ec4899; --c-pink-d: #be185d; --c-teal: #14b8a6; --c-teal-d: #0f766e; --c-amber: #f59e0b; --c-amber-d: #b45309; --c-emerald: #10b981; --c-emerald-d: #047857; --c-rose: #ef4444; --c-rose-d: #b91c1c; --c-orange: #f97316; --c-orange-d: #c2410c; --c-indigo: #6366f1; --c-indigo-d: #4338ca; --c-cyan: #06b6d4; --c-cyan-d: #0e7490; /* ============ Slate-blue ramp (světlý režim) ============ */ --gray-50: #f1f5fa; --gray-100: #e7eef8; --gray-200: #cfd8e8; --gray-300: #a0adc4; --gray-400: #6f7e9a; --gray-500: #4d5b75; --gray-600: #364056; --gray-700: #1c2538; --gray-800: #0f172a; --gray-900: #060c1a; /* BC aliasy — některé views si pamatují primary-* */ --primary-50: #eff6ff; --primary-100: #dbeafe; --primary-500: #2563eb; --primary-600: #1d4ed8; --primary-700: #1e40af; --primary-900: #1e3a8a; --success-50: #ecfdf5; --success-100: #d1fae5; --success-600: #059669; --success-700: #047857; --warning-50: #fffbeb; --warning-100: #fef3c7; --warning-600: #d97706; --warning-700: #b45309; --danger-50: #fef2f2; --danger-100: #fee2e2; --danger-600: #dc2626; --danger-700: #b91c1c; --info-50: #eff6ff; --info-100: #dbeafe; --info-600: #2563eb; --info-700: #1d4ed8; /* ============ Sémantické tokeny — používají všechny komponenty ============ */ --bg: #e8eef9; --bg-gradient: radial-gradient(1100px 520px at 105% -10%, rgba(37,99,235,.10), transparent 60%), radial-gradient(900px 480px at -10% 110%, rgba(139,92,246,.08), transparent 55%), linear-gradient(180deg, #eef2fb 0%, #e3eaf6 100%); --surface: #ffffff; --surface-2: #f6f8fc; --surface-3: #eef2fa; --border: #dde4f0; --border-strong: #c2cce0; --text: #1c2538; --text-strong: #0a1224; --text-muted: #5a6781; --link: var(--brand-700); --link-hover: var(--brand-800); --primary-soft: #e6efff; --primary-soft-text: var(--brand-700); --focus-ring: rgba(37,99,235,.28); --backdrop: rgba(8,12,28,.55); --soft-success-bg: #ecfdf5; --soft-warning-bg: #fffbeb; --soft-danger-bg: #fef2f2; --soft-info-bg: #eff6ff; /* Sidebar — světlejší slate-navy v light módu, s decentním dot patternem */ --sidebar-bg: #1b2742; /* o ~3 odstíny světlejší než dřív */ --sidebar-bg-2: #243358; --sidebar-border: rgba(148,163,184,.14); --sidebar-text: #cad4ec; --sidebar-text-strong: #ffffff; --sidebar-text-muted: #8893b3; --sidebar-hover: rgba(255,255,255,.07); --sidebar-active-text: #ffffff; --sidebar-shadow: 4px 0 24px rgba(8,12,28,.10); --sidebar-dot: rgba(255,255,255,.05); --sidebar-glow: rgba(96,165,250,.18); /* Header — glassy */ --header-bg: rgba(255,255,255,.78); --header-border: rgba(220,228,243,.85); /* Radii — o trochu velkorysejší */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 24px; /* Shadows — měkké, modré */ --shadow-xs: 0 1px 2px rgba(15,23,42,.06); --shadow-sm: 0 2px 4px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); --shadow-md: 0 8px 18px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05); --shadow-lg: 0 18px 38px rgba(15,23,42,.10), 0 6px 12px rgba(15,23,42,.06); --shadow-xl: 0 32px 64px rgba(15,23,42,.16), 0 14px 24px rgba(15,23,42,.08); --shadow-glow: 0 0 0 6px rgba(37,99,235,.12); --transition: 220ms cubic-bezier(.4,0,.2,1); --transition-fast: 140ms cubic-bezier(.4,0,.2,1); --sidebar-width: 272px; --header-height: 64px; --bottom-nav-height: 64px; } /* ===================================================================== DARK MODE — hluboký navy se sytějšími akcenty. ===================================================================== */ :root[data-theme="dark"] { --gray-50: #1a253f; --gray-100: #1f2a44; --gray-200: #2a3658; --gray-300: #3d4b73; --gray-400: #64748b; --gray-500: #94a3b8; --gray-600: #cbd5e1; --gray-700: #e2e8f0; --gray-800: #f1f5f9; --gray-900: #ffffff; --primary-50: #15203a; --primary-100: #1e3a8a; --primary-500: #3b82f6; --primary-600: #60a5fa; --primary-700: #93c5fd; --primary-900: #dbeafe; --success-50: #052e1c; --success-100: #064e3b; --success-600: #34d399; --success-700: #6ee7b7; --warning-50: #2c1b00; --warning-100: #451a03; --warning-600: #fbbf24; --warning-700: #fcd34d; --danger-50: #2c0606; --danger-100: #450a0a; --danger-600: #f87171; --danger-700: #fca5a5; --info-50: #15203a; --info-100: #1e3a8a; --info-600: #60a5fa; --info-700: #93c5fd; --bg: #060c1a; --bg-gradient: radial-gradient(1300px 640px at 105% -10%, rgba(37,99,235,.20), transparent 60%), radial-gradient(1000px 540px at -10% 110%, rgba(139,92,246,.13), transparent 55%), linear-gradient(180deg, #0a1325 0%, #050a18 100%); --surface: #0e1830; --surface-2: #0a1226; --surface-3: #14213d; --border: #1f2c4a; --border-strong: #2d3c62; --text: #d6dfee; --text-strong: #f8fafc; --text-muted: #8a98b6; --link: #93c5fd; --link-hover: #bfdbfe; --primary-soft: #15203a; --primary-soft-text: #93c5fd; --focus-ring: rgba(96,165,250,.35); --backdrop: rgba(2,6,18,.7); --soft-success-bg: #052e1c; --soft-warning-bg: #2c1b00; --soft-danger-bg: #2c0606; --soft-info-bg: #15203a; --sidebar-bg: #0c1428; --sidebar-bg-2: #131f3a; --sidebar-border: rgba(148,163,184,.10); --sidebar-text: #b3c0db; --sidebar-text-muted: #6e7c9a; --sidebar-hover: rgba(255,255,255,.06); --sidebar-dot: rgba(255,255,255,.045); --sidebar-glow: rgba(96,165,250,.22); --header-bg: rgba(10,18,38,.72); --header-border: rgba(31,44,74,.85); --shadow-xs: 0 1px 2px rgba(0,0,0,.5); --shadow-sm: 0 2px 4px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.45); --shadow-md: 0 8px 18px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); --shadow-lg: 0 18px 38px rgba(0,0,0,.6), 0 6px 12px rgba(0,0,0,.45); --shadow-xl: 0 32px 64px rgba(0,0,0,.7), 0 14px 24px rgba(0,0,0,.5); --shadow-glow: 0 0 0 6px rgba(96,165,250,.18); color-scheme: dark; } /* ===================================================================== Reset & základ ===================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); background-image: var(--bg-gradient); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--transition), color var(--transition); } h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.25; color: var(--text-strong); font-weight: 700; letter-spacing: -.015em; } h1 { font-size: 1.875rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.125rem; } p { margin: 0 0 1em; } a { color: var(--link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--link-hover); text-decoration: underline; } hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; } small, .text-sm { font-size: .875rem; } .text-muted { color: var(--text-muted); } .text-danger { color: var(--danger-600); } .text-success { color: var(--success-600); } .text-warning { color: var(--warning-600); } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } .d-flex { display: flex; } .d-grid { display: grid; } .gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; } .flex-1 { flex: 1; } .justify-between { justify-content: space-between; } .align-center { align-items: center; } .flex-wrap { flex-wrap: wrap; } ::selection { background: var(--brand-200); color: var(--brand-900); } :root[data-theme="dark"] ::selection { background: var(--brand-300); color: #04101f; } /* Scrollbary — dlouhé seznamy */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; } /* ===================================================================== Layout ===================================================================== */ .app-layout { display: flex; min-height: 100vh; } .app-main { flex: 1; min-width: 0; padding-top: var(--header-height); padding-left: var(--sidebar-width); transition: padding-left var(--transition); } .app-content { padding: 2rem 1.75rem; max-width: 1320px; margin: 0 auto; } /* ===================================================================== Header — glassy s blur ===================================================================== */ .app-header { position: fixed; top: 0; left: var(--sidebar-width); right: 0; height: var(--header-height); background: var(--header-bg); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--header-border); display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem; z-index: 30; transition: left var(--transition), background var(--transition), border-color var(--transition); } .app-header h1 { font-size: 1.05rem; margin: 0; flex: 1; color: var(--text-strong); font-weight: 650; letter-spacing: -.01em; } .header-actions { display: flex; align-items: center; gap: .35rem; } .header-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-muted); background: transparent; border: 0; cursor: pointer; position: relative; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .header-btn:hover { background: var(--surface-3); color: var(--text-strong); } .header-btn:active { transform: scale(.94); } .header-btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } .menu-toggle { display: none; } /* Theme toggle s indikátorem aktuálního stavu */ .theme-toggle .theme-dot { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 999px; background: var(--brand-500); box-shadow: 0 0 0 2px var(--surface), 0 0 8px var(--brand-500); pointer-events: none; transition: background var(--transition-fast), box-shadow var(--transition-fast); } :root[data-theme="dark"] .theme-toggle .theme-dot { background: #fbbf24; box-shadow: 0 0 0 2px var(--surface-2), 0 0 8px rgba(251,191,36,.7); } /* ===================================================================== Firma switcher ===================================================================== */ .firma-switcher { position: relative; } .firma-switcher-btn { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .85rem; max-width: 280px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; color: var(--text); font-size: .85rem; font-weight: 600; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .firma-switcher-btn:hover { background: var(--surface); border-color: var(--brand-500); color: var(--text-strong); } .firma-switcher-label { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .firma-switcher-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 280px; max-height: 360px; overflow-y: auto; padding: .35rem; z-index: 50; } .firma-switcher-item, .firma-switcher-item button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .55rem .7rem; text-align: left; background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; color: var(--text); text-decoration: none; font-size: .85rem; line-height: 1.3; } .firma-switcher-item button { padding: 0; } .firma-switcher-item { margin: 0; } .firma-switcher-item:hover, .firma-switcher-item button:hover { background: var(--surface-3); color: var(--text-strong); text-decoration: none; } .firma-switcher-item.active { background: var(--primary-soft); color: var(--primary-soft-text); } .firma-switcher-item.active button { color: var(--primary-soft-text); } .firma-switcher-item small { margin-left: auto; } .firma-switcher-check { color: var(--success-600); margin-left: auto; } @media (max-width: 640px) { .firma-switcher-label { max-width: 100px; } } /* ===================================================================== Sidebar — vždy tmavý navy. Aktivní položka = modrý gradient s glow. ===================================================================== */ .app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--sidebar-bg); /* Vrstvy: 1) modrý glow blob nahoře u brand-marku pro jemný akcent, 2) spodní fade do tmavšího odstínu pro hloubku. */ background-image: radial-gradient(640px 420px at 50% -10%, var(--sidebar-glow), transparent 60%), linear-gradient(180deg, var(--sidebar-bg-2) 0%, var(--sidebar-bg) 100%); border-right: 1px solid var(--sidebar-border); box-shadow: var(--sidebar-shadow); color: var(--sidebar-text); display: flex; flex-direction: column; z-index: 40; transition: transform var(--transition); } /* Jemný separátor pod brand barem — odděluje logo od navigace, ale nerušivě. */ .app-sidebar .sidebar-brand { background: linear-gradient(180deg, rgba(255,255,255,.03), transparent); } .sidebar-brand { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--sidebar-border); height: var(--header-height); flex-shrink: 0; } .sidebar-brand-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--brand-400), var(--brand-700)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.25); } .sidebar-brand-name { font-weight: 700; color: var(--sidebar-text-strong); font-size: .98rem; letter-spacing: -.01em; } .sidebar-nav { flex: 1; overflow-y: auto; padding: .85rem .75rem; display: flex; flex-direction: column; gap: .15rem; } .sidebar-nav-section { font-size: .68rem; text-transform: uppercase; color: var(--sidebar-text-muted); font-weight: 700; padding: 1.1rem .9rem .4rem; letter-spacing: .1em; } .nav-link { display: flex; align-items: center; gap: .85rem; padding: .55rem .75rem; border-radius: var(--radius-sm); color: var(--sidebar-text); text-decoration: none; font-size: .9rem; font-weight: 500; border: 1px solid transparent; /* drží výšku konzistentní vůči .active */ transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); position: relative; } .nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); text-decoration: none; } .nav-link.active { /* Poloprůhledné modré sklíčko — pozadí sidebaru jím lehce prosvítá. */ background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(37,99,235,.16)); color: var(--sidebar-active-text); font-weight: 600; border: 1px solid rgba(96,165,250,.28); /* Jemný inset highlight; venkovní glow potlačený, aby tlačítko nesvítilo. */ box-shadow: inset 0 1px 0 rgba(255,255,255,.10); } .nav-icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: inherit; } .sidebar-footer { padding: .85rem; border-top: 1px solid var(--sidebar-border); flex-shrink: 0; background: rgba(0,0,0,.15); } .sidebar-footer .btn-ghost { color: var(--sidebar-text); } .sidebar-footer .btn-ghost:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); } /* Sidebar overlay (mobile) */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--backdrop); z-index: 35; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .sidebar-overlay.show { display: block; } /* ===================================================================== Cards — surface + volitelný barevný horní pruh ===================================================================== */ .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); margin-bottom: 1.5rem; overflow: hidden; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); } .card-header { padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: linear-gradient(180deg, var(--surface-2), var(--surface)); } .card-header h2, .card-header h3 { margin: 0; } .card-body { padding: 1.35rem; } /* Volitelné barevné akcenty (3px horní pruh) */ .card-accent-blue, .card-accent-violet, .card-accent-teal, .card-accent-amber, .card-accent-rose, .card-accent-emerald { padding-top: 0; } .card-accent-blue::before, .card-accent-violet::before, .card-accent-teal::before, .card-accent-amber::before, .card-accent-rose::before, .card-accent-emerald::before { content: ''; display: block; height: 3px; width: 100%; } .card-accent-blue::before { background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); } .card-accent-violet::before { background: linear-gradient(90deg, var(--c-violet), var(--c-violet-d)); } .card-accent-teal::before { background: linear-gradient(90deg, var(--c-teal), var(--c-teal-d)); } .card-accent-amber::before { background: linear-gradient(90deg, var(--c-amber), var(--c-amber-d)); } .card-accent-rose::before { background: linear-gradient(90deg, var(--c-rose), var(--c-rose-d)); } .card-accent-emerald::before { background: linear-gradient(90deg, var(--c-emerald), var(--c-emerald-d)); } /* ===================================================================== Page header — barevný "vlevo bullet" ===================================================================== */ .page-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .page-header h1 { margin: 0; position: relative; padding-left: 14px; } .page-header h1::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 28px; border-radius: 4px; background: linear-gradient(180deg, var(--brand-400), var(--brand-700)); } /* ===================================================================== Buttons — gradient primary, jasné stavy ===================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1.15rem; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; letter-spacing: -.005em; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast); white-space: nowrap; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.32), inset 0 1px 0 rgba(255,255,255,.2); } .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 10px 24px rgba(37,99,235,.4), inset 0 1px 0 rgba(255,255,255,.25); color: #fff; } .btn-outline { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-outline:hover { background: var(--surface-3); color: var(--text-strong); border-color: var(--brand-500); } .btn-danger { background: linear-gradient(135deg, var(--danger-600), var(--danger-700)); color: #fff; box-shadow: 0 6px 14px rgba(220,38,38,.3), inset 0 1px 0 rgba(255,255,255,.15); } .btn-danger:hover { filter: brightness(1.08); color: #fff; } .btn-success { background: linear-gradient(135deg, var(--success-600), var(--success-700)); color: #fff; box-shadow: 0 6px 14px rgba(5,150,105,.3), inset 0 1px 0 rgba(255,255,255,.15); } .btn-success:hover { filter: brightness(1.08); color: #fff; } .btn-ghost { background: transparent; color: var(--text-muted); } .btn-ghost:hover { background: var(--surface-3); color: var(--text-strong); } .btn-sm { padding: .4rem .7rem; font-size: .825rem; } .btn-lg { padding: .8rem 1.6rem; font-size: 1rem; } .btn-block { width: 100%; } /* ===================================================================== Forms ===================================================================== */ .form-group { margin-bottom: 1.1rem; } .form-label { display: block; font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: .4rem; } .form-label-required::after { content: ' *'; color: var(--danger-600); } .form-input, .form-select, .form-textarea { width: 100%; padding: .65rem .85rem; font-size: .95rem; background: var(--surface); color: var(--text-strong); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); opacity: .85; } .form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--brand-300); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--focus-ring); } .form-textarea { resize: vertical; min-height: 100px; font-family: inherit; } .form-help { font-size: .8rem; color: var(--text-muted); margin-top: .3rem; } .form-error { font-size: .8rem; color: var(--danger-600); margin-top: .3rem; } .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } .checkbox-label { display: flex; align-items: flex-start; gap: .55rem; font-size: .9rem; color: var(--text); cursor: pointer; } .checkbox-label input { margin-top: .2rem; accent-color: var(--brand-600); width: 16px; height: 16px; } /* Info list — key/value pairs v detail views (Modbus brána, zařízení, sync log apod.) */ .info-list { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.25rem; margin: 0; } .info-list dt { font-weight: 600; color: var(--text-muted); font-size: .85rem; align-self: center; } .info-list dd { margin: 0; font-size: .9rem; word-break: break-word; } @media (max-width: 480px) { .info-list { grid-template-columns: 1fr; gap: .15rem .5rem; } .info-list dt { margin-top: .5rem; } } :root[data-theme="dark"] .form-select { background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; appearance: none; } /* ===================================================================== Alerts — barevný levý pruh ===================================================================== */ .alert { padding: .95rem 1.1rem; border-radius: var(--radius-md); margin-bottom: 1rem; display: flex; align-items: flex-start; gap: .75rem; border: 1px solid transparent; font-size: .9rem; border-left-width: 4px; box-shadow: var(--shadow-xs); } .alert-success { background: var(--soft-success-bg); border-color: var(--success-100); border-left-color: var(--success-600); color: var(--success-700); } .alert-danger { background: var(--soft-danger-bg); border-color: var(--danger-100); border-left-color: var(--danger-600); color: var(--danger-700); } .alert-warning { background: var(--soft-warning-bg); border-color: var(--warning-100); border-left-color: var(--warning-600); color: var(--warning-700); } .alert-info { background: var(--soft-info-bg); border-color: var(--info-100); border-left-color: var(--brand-600); color: var(--brand-700); } :root[data-theme="dark"] .alert-info { color: var(--brand-300); } .alert > span { flex: 1; } .alert-close { background: transparent; border: 0; cursor: pointer; color: inherit; opacity: .6; padding: 0 .25rem; font-size: 1.25rem; line-height: 1; } .alert-close:hover { opacity: 1; } /* ===================================================================== Stats grid — barevné gradient ikony ===================================================================== */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; margin-bottom: 1.75rem; } .stat-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.35rem; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); } .stat-card::after { content: ''; position: absolute; top: -30px; right: -30px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(37,99,235,.12), transparent 70%); pointer-events: none; } .stat-value { font-size: 2rem; font-weight: 700; color: var(--text-strong); line-height: 1.15; letter-spacing: -.025em; } .stat-label { color: var(--text-muted); font-size: .82rem; margin-top: .35rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .stat-card-warning::before { background: linear-gradient(90deg, var(--c-amber), var(--c-amber-d)); } .stat-card-warning::after { background: radial-gradient(circle, rgba(245,158,11,.16), transparent 70%); } .stat-card-warning { border-color: var(--warning-100); } .stat-card-warning .stat-value { color: var(--warning-700); } .stat-card-danger::before { background: linear-gradient(90deg, var(--c-rose), var(--c-rose-d)); } .stat-card-danger::after { background: radial-gradient(circle, rgba(239,68,68,.16), transparent 70%); } .stat-card-danger { border-color: var(--danger-100); } .stat-card-danger .stat-value { color: var(--danger-700); } /* ===================================================================== Quick actions — barevné dlaždice ===================================================================== */ .quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.1rem; margin-bottom: 1.75rem; } .quick-action-btn { display: flex; flex-direction: column; align-items: center; gap: .85rem; padding: 1.4rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); text-align: center; box-shadow: var(--shadow-xs); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .quick-action-btn:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-500); } .quick-action-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: #fff; box-shadow: 0 8px 18px rgba(37,99,235,.32), inset 0 1px 0 rgba(255,255,255,.2); } .quick-action-label { font-weight: 650; color: var(--text-strong); font-size: .92rem; letter-spacing: -.005em; } /* Když je víc dlaždic, daj jim alternující barvy (n-th-child) */ .quick-actions .quick-action-btn:nth-child(6n+2) .quick-action-icon { background: linear-gradient(135deg, var(--c-violet), var(--c-violet-d)); box-shadow: 0 8px 18px rgba(139,92,246,.32), inset 0 1px 0 rgba(255,255,255,.2); } .quick-actions .quick-action-btn:nth-child(6n+3) .quick-action-icon { background: linear-gradient(135deg, var(--c-emerald), var(--c-emerald-d)); box-shadow: 0 8px 18px rgba(16,185,129,.32), inset 0 1px 0 rgba(255,255,255,.2); } .quick-actions .quick-action-btn:nth-child(6n+4) .quick-action-icon { background: linear-gradient(135deg, var(--c-amber), var(--c-amber-d)); box-shadow: 0 8px 18px rgba(245,158,11,.32), inset 0 1px 0 rgba(255,255,255,.2); } .quick-actions .quick-action-btn:nth-child(6n+5) .quick-action-icon { background: linear-gradient(135deg, var(--c-pink), var(--c-pink-d)); box-shadow: 0 8px 18px rgba(236,72,153,.32), inset 0 1px 0 rgba(255,255,255,.2); } .quick-actions .quick-action-btn:nth-child(6n+6) .quick-action-icon { background: linear-gradient(135deg, var(--c-teal), var(--c-teal-d)); box-shadow: 0 8px 18px rgba(20,184,166,.32), inset 0 1px 0 rgba(255,255,255,.2); } /* ===================================================================== Spravovat tiles ===================================================================== */ .spravovat-groups { display: grid; gap: 1.5rem; } .spravovat-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem; box-shadow: var(--shadow-xs); } .spravovat-group h3 { margin: 0 0 1rem; padding-left: 12px; position: relative; } .spravovat-group h3::before { content: ''; position: absolute; left: 0; top: 4px; width: 4px; height: calc(100% - 8px); border-radius: 4px; background: linear-gradient(180deg, var(--brand-400), var(--brand-700)); } .spravovat-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .85rem; } .spravovat-tile { display: flex; align-items: center; gap: .85rem; padding: .9rem 1.1rem; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; color: var(--text); transition: all var(--transition-fast); font-weight: 600; } .spravovat-tile:hover { background: var(--surface); border-color: var(--brand-500); color: var(--brand-700); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); } :root[data-theme="dark"] .spravovat-tile:hover { color: var(--brand-300); } .spravovat-tile-icon { color: var(--brand-600); flex-shrink: 0; } :root[data-theme="dark"] .spravovat-tile-icon { color: var(--brand-400); } .spravovat-tile-label { font-size: .9rem; } /* ===================================================================== Profil tiles ===================================================================== */ .profil-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; } .profil-tile { display: flex; flex-direction: column; gap: .8rem; padding: 1.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); box-shadow: var(--shadow-xs); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .profil-tile:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-500); } .profil-tile-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: #fff; box-shadow: 0 8px 18px rgba(37,99,235,.3), inset 0 1px 0 rgba(255,255,255,.2); } .profil-tile-name { font-weight: 700; color: var(--text-strong); font-size: 1.02rem; letter-spacing: -.01em; } .profil-tile-desc { font-size: .87rem; color: var(--text-muted); } /* ===================================================================== Badges ===================================================================== */ .badge { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; font-size: .75rem; font-weight: 700; border-radius: 999px; background: var(--surface-3); color: var(--text); border: 1px solid var(--border); letter-spacing: .01em; } .badge-success { background: var(--soft-success-bg); color: var(--success-700); border-color: var(--success-100); } .badge-warning { background: var(--soft-warning-bg); color: var(--warning-700); border-color: var(--warning-100); } .badge-danger { background: var(--soft-danger-bg); color: var(--danger-700); border-color: var(--danger-100); } .badge-info { background: var(--primary-soft); color: var(--primary-soft-text); border-color: var(--brand-200); } .badge-count { position: absolute; top: 4px; right: 4px; background: linear-gradient(135deg, var(--c-rose), var(--c-rose-d)); color: #fff; font-size: .65rem; font-weight: 700; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--surface); box-shadow: 0 2px 6px rgba(239,68,68,.4); } /* ===================================================================== Tables — jasná hlavička, zebra ===================================================================== */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); } .table { width: 100%; border-collapse: collapse; } .table th, .table td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--border); font-size: .9rem; } .table th { background: linear-gradient(180deg, var(--surface-2), var(--surface-3)); font-weight: 700; color: var(--text-muted); white-space: nowrap; text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; position: sticky; top: 0; } .table tbody tr { transition: background var(--transition-fast); } .table tbody tr:nth-child(even) { background: var(--surface-2); } .table tbody tr:hover { background: var(--primary-soft); } .table tbody tr:last-child td { border-bottom: 0; } /* ===================================================================== Modals ===================================================================== */ .modal-backdrop { position: fixed; inset: 0; background: var(--backdrop); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 100; animation: fadeIn var(--transition); } .modal-backdrop[hidden] { display: none; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); max-width: 500px; width: 100%; box-shadow: var(--shadow-xl); animation: slideUp var(--transition); } .modal-header { padding: 1.25rem 1.4rem; border-bottom: 1px solid var(--border); } .modal-body { padding: 1.4rem; } .modal-footer { padding: 1rem 1.4rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .5rem; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ===================================================================== Auth pages — bohatý gradient ===================================================================== */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: radial-gradient(1200px 600px at 20% 10%, rgba(37,99,235,.22), transparent 55%), radial-gradient(1000px 500px at 85% 100%, rgba(139,92,246,.18), transparent 55%), radial-gradient(800px 400px at 50% 50%, rgba(236,72,153,.08), transparent 60%), var(--bg); } .auth-card { background: var(--surface); padding: 2.25rem; border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); max-width: 440px; width: 100%; position: relative; overflow: hidden; } .auth-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brand-500), var(--c-violet), var(--c-pink)); } .auth-brand { display: flex; align-items: center; gap: .7rem; justify-content: center; margin-bottom: 1.5rem; } .auth-brand-icon { width: 46px; height: 46px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--brand-400), var(--brand-700)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px rgba(37,99,235,.4), inset 0 1px 0 rgba(255,255,255,.25); } .auth-brand-name { font-weight: 700; font-size: 1.15rem; color: var(--text-strong); letter-spacing: -.015em; } .auth-card h1 { font-size: 1.55rem; text-align: center; margin-bottom: 1.5rem; } /* ===================================================================== Public landing ===================================================================== */ .landing-hero { padding: 5.5rem 1.5rem 4rem; text-align: center; background: radial-gradient(1400px 700px at 50% 0%, rgba(37,99,235,.22), transparent 60%), radial-gradient(1000px 500px at 80% 100%, rgba(139,92,246,.14), transparent 55%), var(--bg); border-bottom: 1px solid var(--border); } .landing-hero h1 { font-size: 3rem; letter-spacing: -.025em; } .landing-hero p { font-size: 1.15rem; color: var(--text-muted); max-width: 660px; margin: 1rem auto; } .landing-cta { display: inline-flex; gap: .8rem; margin-top: 1.25rem; flex-wrap: wrap; justify-content: center; } .landing-section { padding: 3.5rem 1.5rem; max-width: 1024px; margin: 0 auto; } /* Strohá varianta — minimum informací, centrovaný card */ .landing-minimal { min-height: calc(100vh - 4rem); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; gap: 1.5rem; background: radial-gradient(900px 500px at 50% 30%, rgba(37,99,235,.08), transparent 60%), var(--bg); } .landing-minimal-card { text-align: center; max-width: 400px; width: 100%; padding: 2.5rem 2rem 2rem; background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06), 0 24px 60px rgba(15, 23, 42, .08); } .landing-logo { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: 16px; background: linear-gradient(135deg, var(--primary-600), #8b5cf6); color: #fff; box-shadow: 0 10px 30px rgba(37, 99, 235, .25); } .landing-minimal h1 { font-size: 1.75rem; letter-spacing: -.02em; margin: 0 0 .5rem; font-weight: 600; } .landing-minimal p { color: var(--text-muted); margin: 0 0 1.5rem; font-size: .95rem; } .landing-minimal .landing-cta { margin-top: 0; } .landing-minimal-footer { color: var(--text-muted); font-size: .8rem; display: inline-flex; gap: .65rem; align-items: center; } .landing-minimal-footer a { color: var(--text-muted); text-decoration: none; } .landing-minimal-footer a:hover { color: var(--text); text-decoration: underline; } .landing-minimal-footer span { opacity: .5; } /* Login form přímo na landingu */ .landing-login { text-align: left; margin: 1rem 0 .75rem; } .landing-login .form-group { margin-bottom: .65rem; } .landing-remember { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-muted); margin-bottom: .85rem; } .landing-links { text-align: center; font-size: .85rem; margin-top: 1rem; color: var(--text-muted); } .landing-links a { color: var(--text-muted); text-decoration: none; } .landing-links a:hover { color: var(--primary-600); text-decoration: underline; } .landing-links span { margin: 0 .4rem; opacity: .5; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===================================================================== Bottom-nav (mobile, theme-moderni přepisuje) ===================================================================== */ .bottom-nav { display: none; } /* ===================================================================== Responsive ===================================================================== */ @media (max-width: 1024px) { .menu-toggle { display: inline-flex; } .app-sidebar { transform: translateX(-100%); } .app-sidebar.show { transform: translateX(0); box-shadow: var(--shadow-xl); } .app-header { left: 0; } .app-main { padding-left: 0; } } @media (max-width: 640px) { .app-content { padding: 1.25rem 1rem; } .page-header { flex-direction: column; align-items: flex-start; } .auth-card { padding: 1.5rem; } .landing-hero { padding: 3.5rem 1.25rem 2.5rem; } .landing-hero h1 { font-size: 2.1rem; } h1 { font-size: 1.55rem; } } /* ===================================================================== Reduced motion ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }