/*
* root_variables.css
* MA-PRO Global Design System — Semantic & Component Tokens
*
* Loaded in layout.html after Bootstrap and after theme-tokens.css.
*
* ⚠️ RELATIONSHIP TO THEME ENGINE:
* - theme-tokens.css defines UI Shell tokens (--app-bg, --card-bg, --panel-bg,
* --dash-bg, --dash-card-bg, --brand-primary) that the user can customise.
* - THIS FILE defines semantic / status colors and component defaults.
* - theme-core.js (inline in ) applies user overrides at :root level
* via inline styles, which take precedence over both CSS files.
*
* ⛔ SEMANTIC COLORS — NOT THEME-ENGINE CONTROLLED
* --color-success, --color-danger, --color-warning, --color-info and their
* variants carry data meaning. They MUST remain fixed regardless of user theme.
* DO NOT move these into theme-tokens.css.
*
* Conventions:
* - All tokens are CSS custom properties on :root
* - Dark-mode overrides live in [data-bs-theme="dark"]
* - Component-level resets (cards, etc.) at the bottom
*
* Sections:
* 1. Color palette (semantic tokens) — ⛔ NOT theme-engine controlled
* 2. Surface aliases (bridge to theme-tokens.css)
* 3. Typography
* 4. Border-radius & shadow scale
* 5. Glass-effect tokens
* 6. Component resets (cards, badges, forms)
* 7. Dark-mode overrides
*/
/* =========================================================================
1. COLOR PALETTE — Semantic tokens
========================================================================= */
:root {
/* Brand */
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-primary-light: rgba(37, 99, 235, 0.12);
--color-primary-rgb: 37, 99, 235;
/* Status */
--color-success: #16a34a;
--color-success-rgb: 22, 163, 74;
--color-success-light: rgba(var(--color-success-rgb), 0.12);
--color-danger: #dc2626;
--color-danger-rgb: 220, 38, 38;
--color-danger-light: rgba(var(--color-danger-rgb), 0.12);
--color-warning: #d97706;
--color-warning-rgb: 217, 119, 6;
--color-warning-light: rgba(var(--color-warning-rgb), 0.12);
--color-info: #0891b2;
--color-info-rgb: 8, 145, 178;
--color-info-light: rgba(var(--color-info-rgb), 0.12);
/* Special / brand accent — user-configurable via Theme Builder */
--color-special: #7c3aed;
--color-special-rgb: 124, 58, 237;
--color-special-light: rgba(var(--color-special-rgb), 0.12);
/* Surface — fallback values; overridden by theme-tokens.css and theme-core.js */
--body-bg: #f1f5f9; /* alias for --app-bg (kept for legacy compatibility) */
--card-bg: #ffffff; /* also defined in theme-tokens.css (later file wins) */
--text-dark: #0f172a; /* ⛔ NOT theme-engine controlled — component text colour */
--text-muted: #64748b; /* ⛔ NOT theme-engine controlled — muted text */
--border-color: rgba(0, 0, 0, 0.07);
--hover-bg: rgba(0, 0, 0, 0.03);
}
/* =========================================================================
2. SURFACE ALIASES — bridge legacy tokens to theme-engine tokens
theme-core.js sets inline styles on :root for --app-bg / --card-bg etc.
These aliases ensure legacy code using --body-bg stays in sync.
========================================================================= */
:root {
/* --body-bg mirrors --app-bg (set by theme-core.js via inline style) */
/* Note: theme-core.js also explicitly sets --body-bg in legacy aliases */
}
/* =========================================================================
3. TYPOGRAPHY
========================================================================= */
:root {
--font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-size-xs: 0.72rem;
--font-size-sm: 0.82rem;
--font-size-base: 0.9375rem; /* 15px — slightly tighter than Bootstrap default */
--font-size-lg: 1.0625rem;
--line-height-base: 1.6;
}
body {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
/* =========================================================================
3. BORDER-RADIUS & SHADOW SCALE
========================================================================= */
:root {
/* Unified radius — every card/widget/modal uses one of these */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 12px; /* ← PRIMARY: all cards & widgets */
--radius-xl: 16px; /* Dashboard widgets, large panels */
--radius-pill: 9999px;
/* Unified shadow scale */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 10px 24px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.09), 0 24px 48px rgba(0, 0, 0, 0.08);
--shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.10), 0 16px 32px rgba(0, 0, 0, 0.07);
}
/* Also keep legacy alias used in existing layout.html styles */
:root {
--radius-std: var(--radius-lg);
}
/* =========================================================================
4. GLASS-EFFECT TOKENS
========================================================================= */
:root {
--glass-bg: rgba(255, 255, 255, 0.78);
--glass-blur: 12px;
--glass-border: 1px solid rgba(255, 255, 255, 0.65);
--glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* =========================================================================
5. COMPONENT RESETS — applied globally to unify look across modules
========================================================================= */
/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
border-radius: var(--radius-lg) !important;
border: 1px solid var(--border-color) !important;
box-shadow: var(--shadow-sm) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
background-color: var(--card-bg);
/*
* CSS CONTAINMENT — P2 GPU Optimisation (Wave 2)
* Isolates each card so that hover effect or content change inside one card
* does NOT trigger Reflow/Repaint of the surrounding grid/flex layout.
* `layout style paint` = safe for cards (no size-containment to avoid
* cutting off box-shadows / overflow).
*/
contain: layout style paint;
}
.card:hover {
box-shadow: var(--shadow-hover) !important;
transform: translateY(-2px);
/*
* will-change: transform — hints the browser to promote this card to its
* own GPU compositing layer BEFORE the hover interaction starts.
* Eliminates the 1-frame stutter caused by on-demand layer promotion.
* Scoped to :hover only (vs. always-on) to avoid wasting VRAM on
* dozens of cards simultaneously.
*/
will-change: transform;
}
/* Flat cards (no hover lift) */
.card.card-flat:hover {
transform: none;
box-shadow: var(--shadow-sm) !important;
}
/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-content {
border-radius: var(--radius-xl) !important;
border: 1px solid var(--border-color) !important;
box-shadow: var(--shadow-lg) !important;
}
/* ── Buttons — consistent radius ────────────────────────────────────────── */
.btn {
border-radius: var(--radius-md) !important;
font-weight: 500;
}
.btn-sm {
border-radius: var(--radius-sm) !important;
}
.btn-pill {
border-radius: var(--radius-pill) !important;
}
/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
font-weight: 500;
letter-spacing: 0.01em;
}
/* ── Form controls ───────────────────────────────────────────────────────── */
.form-control,
.form-select {
border-radius: var(--radius-md) !important;
border-color: var(--border-color);
}
.form-control:focus,
.form-select:focus {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15) !important;
}
/* ── Tables ──────────────────────────────────────────────────────────────── */
.table {
--bs-table-border-color: var(--border-color);
}
.table th {
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
}
/* ── Dropdowns ───────────────────────────────────────────────────────────── */
.dropdown-menu {
border-radius: var(--radius-lg) !important;
border: 1px solid var(--border-color) !important;
box-shadow: var(--shadow-md) !important;
padding: 0.4rem;
}
.dropdown-item {
border-radius: var(--radius-sm) !important;
}
/* ── List groups ─────────────────────────────────────────────────────────── */
.list-group-item:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
.list-group-item:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; }
.list-group-flush .list-group-item:first-child { border-radius: 0 !important; }
.list-group-flush .list-group-item:last-child { border-radius: 0 !important; }
/* =========================================================================
6. DARK-MODE OVERRIDES
========================================================================= */
[data-bs-theme="dark"] {
--body-bg: transparent;
--card-bg: #22262e;
--text-dark: #dde1e8;
--text-muted: #8892a4;
--border-color: rgba(255, 255, 255, 0.08);
--hover-bg: rgba(255, 255, 255, 0.04);
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(0, 0, 0, 0.30);
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.45), 0 24px 48px rgba(0, 0, 0, 0.40);
--shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.50), 0 16px 32px rgba(0, 0, 0, 0.35);
/* Glassmorphism — šedý tón místo modrého */
--glass-bg: rgba(28, 33, 43, 0.75);
--glass-border: 1px solid rgba(255, 255, 255, 0.08);
--glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.35);
--color-primary-light: rgba(108, 142, 191, 0.15);
}
/* =========================================================================
7. GLOBAL SCROLLBARS — tmavý Glassmorphism scrollbar (Bod 5)
========================================================================= */
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.28);
}
::-webkit-scrollbar-corner {
background: transparent;
}
/* =========================================================================
8. BADGE PASTELOVÉ PŘEPSÁNÍ — pro tmavý Glassmorphism design (Bod 4)
========================================================================= */
[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.text-bg-danger {
background: rgba(201, 115, 115, 0.18) !important;
color: #C97373 !important;
border: 1px solid rgba(201, 115, 115, 0.3);
}
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.text-bg-success {
background: rgba(126, 190, 165, 0.18) !important;
color: #7EBEA5 !important;
border: 1px solid rgba(126, 190, 165, 0.3);
}
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.text-bg-warning {
background: rgba(200, 168, 90, 0.18) !important;
color: #C8A85A !important;
border: 1px solid rgba(200, 168, 90, 0.3);
}
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.text-bg-primary {
background: rgba(108, 142, 191, 0.18) !important;
color: #6C8EBF !important;
border: 1px solid rgba(108, 142, 191, 0.3);
}
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.text-bg-info {
background: rgba(109, 184, 191, 0.18) !important;
color: #6DB8BF !important;
border: 1px solid rgba(109, 184, 191, 0.3);
}
[data-bs-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.text-bg-secondary {
background: rgba(255, 255, 255, 0.08) !important;
color: #8892a4 !important;
border: 1px solid rgba(255, 255, 255, 0.12);
}
/* =========================================================================
9. BOOTSTRAP COMPONENT RESETS — Theme Engine napojení
Přepisuje výchozí Bootstrap modrou (#0d6efd) na tokeny Theme Enginu.
Pravidla platí globálně; nesahají na sémantické třídy .text-danger atd.
========================================================================= */
/* ── 9a. Obecné odkazy ───────────────────────────────────────────────
Bootstrap defaultní modrá (#0d6efd) → --brand-primary (uživatelova barva).
!important potřebné kvůli specificitě Bootstrap reboot.
Výjimky:
- .btn → Bootstrap/vlastní tlačítka
- .text-danger atd. → sémantické Bootstrap utility
- .nav-link → navigace (sidebar, topbar, taby — mají vlastní pravidla)
- .list-group-item-action → seznamy (profese, kontakty) — color řeší lokální CSS */
a:not(.btn):not([class*="text-danger"]):not([class*="text-success"]):not([class*="text-warning"]):not([class*="text-info"]):not([class*="nav-link"]):not(.list-group-item-action) {
color: var(--brand-primary, #2563eb);
}
a:not(.btn):not([class*="text-danger"]):not([class*="text-success"]):not([class*="text-warning"]):not([class*="text-info"]):not([class*="nav-link"]):not(.list-group-item-action):hover {
color: var(--brand-primary-hover, #1d4ed8);
opacity: 0.85;
}
/* ── 9b. Bootstrap .text-primary utility → --brand-primary ──────────────
Platí pro ikony a texty s třídou .text-primary uvnitř karet a panelů. */
.text-primary {
color: var(--brand-primary, #2563eb) !important;
}
/* ── 9c. Nav-tabs (.nav-tabs) — Moderní Underline styl ─────────────────
Cíl: čistý underline design bez Bootstrap rámečků.
- neaktivní ouško → --text-muted, border-bottom: transparent
- hover → --text-main, border-bottom: brand-primary/40
- aktivní ouško → --brand-primary, border-bottom: 2px solid brand-primary
margin-bottom: -1px překryje spodní linku kontejneru (Bootstrap technika). */
/* Spodní linka kontejneru záložek — sleduje --border-color */
.nav-tabs {
border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1)) !important;
}
/* Reset všech záložek — zruší veškeré Bootstrap border-radius a rámy */
/* ⚠️ ANTI-FLICKER: transition záměrně VYPNUTO.
Záložky jsou server-side navigační linky (full page reload).
Jakákoliv transition by způsobila animaci při každém načtení stránky,
protože theme-core.js aplikuje CSS proměnné po prvním vykreslení.
Barva aktivní záložky musí být aplikována OKAMŽITĚ, bez animace. */
.nav-tabs .nav-link {
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--text-muted, #64748b) !important;
font-weight: 500;
padding: 0.75rem 1rem;
margin-bottom: -1px; /* Překryje spodní linku .nav-tabs kontejneru */
transition: none !important; /* ← KLÍČOVÉ: žádná animace → žádný flicker */
}
/* Hover stav */
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
color: var(--text-main, #0f172a) !important;
background: transparent !important;
border-bottom-color: rgba(var(--brand-primary-rgb, 37,99,235), 0.4) !important;
}
/* Aktivní záložka — čistý brand-primary underline */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
color: var(--brand-primary, #2563eb) !important;
background: transparent !important;
border-bottom: 2px solid var(--brand-primary, #2563eb) !important;
font-weight: 600;
}
/* ── 9d. Nav-pills (.nav-pills) ─────────────────────────────────────────
Cíl: neaktivní pill → --text-muted na průhledném bg,
aktivní pill → bílý text na --brand-primary pozadí. */
.nav-pills .nav-link {
color: var(--text-muted, #64748b) !important;
background-color: transparent !important;
border-radius: var(--radius-md, 10px) !important;
transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
color: var(--text-main, #0f172a) !important;
background-color: var(--hover-bg, rgba(0,0,0,0.04)) !important;
}
/* Aktivní pill */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
background-color: var(--brand-primary, #2563eb) !important;
color: #ffffff !important;
}
/* ── 9e. Obecné .nav-link mimo sidebar a topbar ─────────────────────────
Zabraňuje Bootstrap výchozí modré u nav-link v modulech (Nabídky atd.) */
.nav-link:not(.sidebar .nav-link):not(.top-navbar .nav-link) {
color: var(--text-muted, #64748b);
}
.nav-link:not(.sidebar .nav-link):not(.top-navbar .nav-link):hover {
color: var(--text-main, #0f172a);
}
/* ── 9f. Bootstrap .bg-primary → brand-primary (tlačítka, badges) ───────
POZOR: Platí pouze pro .badge a .btn — neovlivňuje .bg-success atd.
Pro .btn-primary použijeme specifičtější selektor. */
.btn-primary {
background-color: var(--brand-primary, #2563eb) !important;
border-color: var(--brand-primary, #2563eb) !important;
color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background-color: var(--brand-primary-hover, #1d4ed8) !important;
border-color: var(--brand-primary-hover, #1d4ed8) !important;
}
.btn-outline-primary {
color: var(--brand-primary, #2563eb) !important;
border-color: var(--brand-primary, #2563eb) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
background-color: var(--brand-primary, #2563eb) !important;
border-color: var(--brand-primary, #2563eb) !important;
color: #ffffff !important;
}
/* ── 9g. Form-check inputs (checkbox, radio) — sledují --brand-primary ── */
.form-check-input:checked {
background-color: var(--brand-primary, #2563eb) !important;
border-color: var(--brand-primary, #2563eb) !important;
}
.form-check-input:focus {
border-color: var(--brand-primary, #2563eb) !important;
box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb, 37,99,235), 0.25) !important;
}
/* =========================================================================
10. SOFT SEMANTIC BADGE SYSTEM — Pastelový sémantický systém
=========================================================================
Filozofie: Informace musí být zřetelná, ale ne agresivní.
Plné barvy (bg-danger text-white) jsou ZAKÁZÁNY pro odznaky, štítky
stavů a role. Používáme výhradně tyto "soft" varianty.
Třídy .badge-soft-* — kombinace lehkého pozadí + tmavší text téhož odstínu.
Třídy .text-semantic-* — pouze barva textu/ikony (bez pozadí).
Napojení na tokeny (root_variables.css sekce 1):
--color-* → text (fixní sémantická barva, nikdy se nemění)
--color-*-light → pozadí (rgba varianta, ~12% opacity)
--color-*-rgb → pro rgba() rámeček
⚠️ PRAVIDLO: Soft badges NEZTRÁCEJÍ svou barvu ani v Clean Mode.
Sémantika (červená = nebezpečí) musí zůstat čitelná vždy.
Soft varianty jsou již dostatečně jemné pro glassmorphism design.
⛔ Plné barvy (bg-danger text-white, bg-success, bg-warning text-dark)
NESMÍ být používány pro odznaky, role, stavy ani modal headers.
Jediná povolená výjimka: .btn-primary pro primární akční tlačítka.
========================================================================= */
/* ── Soft Success — Přijato, Uhrazeno, Active, Přidat ─────────────────── */
.badge-soft-success {
background-color: var(--color-success-light) !important;
color: var(--color-success) !important;
border: 1px solid rgba(var(--color-success-rgb), 0.20);
}
/* ── Soft Danger — Nezaplaceno, Po termínu, Superadmin, Smazat ────────── */
.badge-soft-danger {
background-color: var(--color-danger-light) !important;
color: var(--color-danger) !important;
border: 1px solid rgba(var(--color-danger-rgb), 0.20);
}
/* ── Soft Warning — Čeká, Probíhá, Investor, Archivovat ──────────────── */
.badge-soft-warning {
background-color: var(--color-warning-light) !important;
color: var(--color-warning) !important;
border: 1px solid rgba(var(--color-warning-rgb), 0.20);
}
/* ── Soft Info — Closed, Účetní, Vícepráce, Informace ────────────────── */
.badge-soft-info {
background-color: var(--color-info-light) !important;
color: var(--color-info) !important;
border: 1px solid rgba(var(--color-info-rgb), 0.20);
}
/* ── Soft Special — Mimořádné, VIP, primární akce ───────────────────────── */
.badge-soft-special {
background-color: var(--color-special-light) !important;
color: var(--color-special) !important;
border: 1px solid rgba(var(--color-special-rgb), 0.20);
}
/* ── Soft Secondary — Externista, neutrální stavy, archivní položky ────── */
.badge-soft-secondary {
background-color: rgba(100, 116, 139, 0.10) !important; /* slate-500 @ 10% */
color: var(--text-muted) !important;
border: 1px solid rgba(100, 116, 139, 0.20);
}
/* ── Text Semantic — jen barva ikony/textu, bez pozadí ───────────────────
Použití:
Smazat
Úspěch
──────────────────────────────────────────────────────────────────────── */
.text-semantic-success { color: var(--color-success) !important; }
.text-semantic-danger { color: var(--color-danger) !important; }
.text-semantic-warning { color: var(--color-warning) !important; }
.text-semantic-info { color: var(--color-info) !important; }
/* ── Modal Header Semantic — border-top místo plného barevného bg ────────
Glassmorphism přístup: modal header zůstává průhledný/neutrální,
pouze horní border signalizuje sémantiku.
Použití:
──────────────────────────────────────────────────────────────────────── */
.modal-header-danger {
border-top: 4px solid var(--color-danger) !important;
background: var(--color-danger-light) !important;
}
.modal-header-warning {
border-top: 4px solid var(--color-warning) !important;
background: var(--color-warning-light) !important;
}
.modal-header-success {
border-top: 4px solid var(--color-success) !important;
background: var(--color-success-light) !important;
}
.modal-header-info {
border-top: 4px solid var(--color-info) !important;
background: var(--color-info-light) !important;
}