/* =========================================================================
AXIS Design Tokens
Extrahováno z https://axis.archdesign.cz/ (Bootstrap 5 frontend theme)
Použití: importuj tento soubor a používej proměnné --ax-* / utility třídy.
========================================================================= */
:root {
/* ---- Brand / company barvy ----
REBRAND 2026-07-03 (dokument klienta „barvy.pdf"): tyrkys → AZUROVÁ.
#17c3b2→#02d0ec, #80ffdb→#a7eeff (Uložit), #e7f9f7→#e1f9ff (Filtrovat, tinty).
Názvy proměnných ponechány (turquoise) kvůli zpětné kompatibilitě všech stránek. */
--ax-blue: #1a759f; /* hlavní akční modrá (odkazy, outline tlačítka) — dle rozhodnutí ZŮSTÁVÁ */
--ax-turquoise: #02d0ec; /* sytá azurová (akcent, okraje, aktivní menu) */
--ax-turquoise-light: #a7eeff; /* světlá azurová (pozadí primárního tlačítka „Uložit") */
--ax-turquoise-tint: #e1f9ff; /* jemný azurový tint (tlačítko „Filtrovat", vyplněný filtr, ikonová tlačítka) */
/* ---- Stavové barvy dle „barvy.pdf" (2026-07-03) ---- */
--ax-ok: #5ddd66; /* 100 % / schváleno (zelená) */
--ax-under: #b7f1ff; /* méně než 100 % / schválené volno (světle modrá) */
--ax-over: #ff5d5d; /* více než 100 % / neomluveno (červená) */
--ax-grey-1: #f2f2f2; /* podbarvení světlé (bez záznamu, zebra) */
--ax-grey-2: #e4e4e4; /* podbarvení tmavší (víkend, zvýrazněný pruh) */
--ax-plan-yellow: #ffff9b; /* Dovolená – plánovaná (i „zaokrouhleno" v Odprac. hodinách) */
--ax-plan-amber: #ffe989; /* Náhr. volno / Překážky / Neplac. volno – plánované */
/* Odpracované hodiny (zatím jen tokeny, obrazovka až na pokyn):
dle docházky = --ax-turquoise (#02d0ec), zaokrouhleno = --ax-plan-yellow,
zbývá rozdělit kladné = --ax-ok, záporné = --ax-over. */
/* ---- Sémantické barvy ---- */
--ax-primary: #0d6efd;
--ax-secondary: #6c757d;
--ax-success: #27ae60;
--ax-danger: #ed4848;
--ax-warning: #eb8700;
--ax-info: #0dcaf0;
--ax-light: #f8f9fa;
--ax-dark: #212529;
/* ---- Text a neutrály ---- */
--ax-text: #212529; /* základní text + nadpisy */
--ax-text-strong: #343a40; /* hlavičky tabulek, výraznější text */
--ax-text-muted: #6c757d; /* tlumený text / ikony */
--ax-border: #dee2e6; /* oddělovače, okraje tabulek */
--ax-border-input: #c8c8c8; /* okraje formulářových polí */
--ax-bg: #ffffff; /* pozadí stránky */
--ax-bg-subtle: #edeff5; /* sekundární plocha / hover řádku */
--ax-bg-total: #fafafa; /* souhrnný (Celkem) řádek tabulky */
--ax-border-strong: #c8c8c8; /* výraznější oddělovač (hlavička sekce, pod hlavičkou tabulky) */
/* ---- Typografie ---- */
--ax-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--ax-fs-base: 16px; /* line-height 24px */
--ax-fs-sm: 14px; /* line-height 18px */
--ax-fs-xs: 13px; /* nav taby, drobné popisky */
--ax-fs-h1: 30px; /* weight 800 */
--ax-fs-h2: 26px; /* weight 700 */
--ax-fs-h3: 20px;
--ax-lh-base: 1.5;
--ax-fw-normal: 400;
--ax-fw-bold: 700;
--ax-fw-heavy: 800;
/* ---- Spacing (4px škála) ---- */
--ax-space-1: 0.25rem; /* 4px */
--ax-space-2: 0.5rem; /* 8px */
--ax-space-3: 0.75rem; /* 12px */
--ax-space-4: 1rem; /* 16px */
--ax-space-5: 1.5rem; /* 24px */
--ax-space-6: 2rem; /* 32px */
--ax-space-7: 3rem; /* 48px */
/* ---- Radius ---- */
--ax-radius: 8px; /* tlačítka, karty */
--ax-radius-input: 10px; /* formulářová pole */
--ax-radius-pill: 100px; /* badge / pill */
/* ---- Stíny (jemné, modravý nádech) ---- */
--ax-shadow-1: 0 1px 2px rgb(20 45 82 / 2%), 0 3px 4px rgb(20 45 82 / 3%), 0 5px 8px rgb(20 45 82 / 4%);
--ax-shadow-2: 0 1px 2px rgb(20 45 82 / 2%), 0 3px 4px rgb(20 45 82 / 3%), 0 5px 8px rgb(20 45 82 / 4%), 0 20px 24px rgb(20 45 82 / 12%);
/* ---- Rozměry komponent ---- */
--ax-btn-height: 44px;
--ax-input-height: 48px;
/* ---- Hustota tabulek (rozhodnuto 2026-07-03: kompromis mezi AXIS ~44px a starou app ~26px) ----
Řádek = 14px písmo (lh 1.5 = 21px) + 2×6px padding + 1px border ≈ 34px. */
--ax-table-fs: 14px;
--ax-table-pad-y: 6px;
--ax-table-pad-x: 12px;
--ax-table-row: 34px;
/* ---- Appbar: boční odsazení (jako obsah) + šířka log. sloupce (pro zarovnání pod-nav s horním menu) ---- */
--ax-appbar-side: clamp(24px, 5vw, 75px);
--ax-appbar-logo: 140px;
/* ---- Paleta grafů (Chart.js) ---- */
--ax-chart-1: #02d0ec; /* azurová (rebrand 2026-07-03) */
--ax-chart-2: #1a759f; /* modrá */
--ax-chart-3: #32d23d; /* zelená */
--ax-chart-4: #9174bb; /* fialová */
--ax-chart-5: #eb8700; /* oranžová */
}
/* =========================================================================
Základ
========================================================================= */
/* Globální border-box — šířka prvků (karty, pole, tlačítka) zahrnuje padding+border,
takže max-width 1170 = skutečná šířka jako AXIS (Bootstrap). Řeší šířkové drift napříč. */
body.ax *, body.ax *::before, body.ax *::after { box-sizing: border-box; }
body.ax {
font-family: var(--ax-font);
font-size: var(--ax-fs-base);
line-height: var(--ax-lh-base);
color: var(--ax-text);
background: var(--ax-bg);
}
.ax h1 { font-size: var(--ax-fs-h1); font-weight: var(--ax-fw-heavy); color: var(--ax-text); margin: 0 0 var(--ax-space-4); }
.ax h2 { font-size: var(--ax-fs-h2); font-weight: var(--ax-fw-bold); color: var(--ax-text); margin: 0 0 var(--ax-space-3); }
.ax h3 { font-size: var(--ax-fs-h3); font-weight: var(--ax-fw-bold); color: var(--ax-text); margin: 0 0 var(--ax-space-2); }
.ax a { color: var(--ax-blue); text-decoration: none; }
.ax a:hover { text-decoration: underline; }
.ax small, .ax .ax-small { font-size: var(--ax-fs-sm); }
.ax .ax-muted { color: var(--ax-text-muted); }
/* =========================================================================
Tlačítka
========================================================================= */
.ax-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-family: var(--ax-font); font-size: var(--ax-fs-base); font-weight: var(--ax-fw-bold);
line-height: 24px; padding: 9px 15px; min-height: var(--ax-btn-height);
border: 1px solid transparent; border-radius: var(--ax-radius);
cursor: pointer; transition: all .15s ease; text-decoration: none;
box-sizing: border-box; /* výška = min-height (padding se nepřičítá) — jako AXIS/Bootstrap */
}
.ax-btn--sm { font-size: var(--ax-fs-sm); line-height: 18px; padding: 7px 12px; min-height: 36px; }
.ax-btn--lg { font-size: var(--ax-fs-base); padding: 12px 20px; min-height: 52px; }
.ax-btn--block { width: 100%; }
.ax-btn--icon { padding: 9px; gap: 0; } /* čtvercové tlačítko jen s ikonou (44px) */
.ax-btn--w50 { width: 50px; padding-left: 0; padding-right: 0; }
.ax-btn--w100 { width: 100px; }
/* Primární akce — světlý tyrkys */
.ax-btn--turquoise { background: var(--ax-turquoise-light); color: var(--ax-text-strong); border-color: var(--ax-turquoise-light); }
.ax-btn--turquoise:hover { background: var(--ax-turquoise); border-color: var(--ax-turquoise); color: #fff; }
/* Sytý tyrkys */
.ax-btn--turquoise-solid { background: var(--ax-turquoise); color: #fff; border-color: var(--ax-turquoise); }
/* Outline modrá */
.ax-btn--outline-blue { background: #fff; color: var(--ax-blue); border-color: var(--ax-blue); }
.ax-btn--outline-blue:hover { background: var(--ax-blue); color: #fff; }
/* Outline šedá */
.ax-btn--outline-grey { background: #fff; color: var(--ax-text-muted); border-color: var(--ax-text-muted); }
.ax-btn--outline-grey:hover { background: var(--ax-text-muted); color: #fff; }
/* Outline danger */
.ax-btn--outline-danger { background: #fff; color: var(--ax-danger); border-color: var(--ax-danger); }
.ax-btn--outline-danger:hover { background: var(--ax-danger); color: #fff; }
/* =========================================================================
Formuláře
========================================================================= */
.ax-input, .ax-select, .ax-textarea {
font-family: var(--ax-font); font-size: var(--ax-fs-base); color: var(--ax-text);
background: #fff; border: 1px solid var(--ax-border-input);
border-radius: var(--ax-radius-input); padding: 11px 15px; height: var(--ax-input-height);
width: 100%; box-sizing: border-box;
}
.ax-textarea { height: auto; min-height: 96px; }
.ax-input:focus, .ax-select:focus, .ax-textarea:focus {
outline: none; border-color: var(--ax-blue); box-shadow: 0 0 0 3px rgb(26 117 159 / .15);
}
/* Select: vlastní šipka odsazená od pravého kraje (jako AXIS), místo nalepené nativní */
.ax-select {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236c757d' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
}
.ax-textarea { padding: 11px 15px; min-height: 90px; resize: vertical; }
/* Form label: malý, tlumený (AXIS create-formuláře) */
.ax-label { display: block; font-size: var(--ax-fs-sm); font-weight: var(--ax-fw-normal); margin-bottom: 6px; color: var(--ax-text-muted); }
.ax-label.is-required::after { content: " *"; color: var(--ax-danger); }
/* Formulářová karta (obal sekce formuláře) — AXIS: VYCENTROVANÁ, max-width 1170px */
.ax-form-card { max-width: 1170px; margin: 0 auto; border: 1px solid var(--ax-border-input); border-radius: var(--ax-radius-input); padding: var(--ax-space-5) var(--ax-space-5) var(--ax-space-6); }
.ax-form-card__title { font-size: var(--ax-fs-base); font-weight: var(--ax-fw-bold); color: var(--ax-text-strong); margin: 0 0 var(--ax-space-4); }
.ax-form-card + .ax-form-card { margin-top: var(--ax-space-5); }
/* Mřížka polí — Bootstrap-like 12 sloupců (AXIS: .row > .col-lg-6/4/3). Na úzkém okně se vše stackuje. */
.ax-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--ax-space-4) var(--ax-space-5); }
.ax-col-12 { grid-column: span 12; }
.ax-col-6 { grid-column: span 6; }
.ax-col-4 { grid-column: span 4; }
.ax-col-3 { grid-column: span 3; }
@media (max-width: 768px) { .ax-col-6, .ax-col-4, .ax-col-3 { grid-column: span 12; } }
/* Zpětná kompatibilita: starý .ax-form-row = jedno pole na řádek */
.ax-form-row { display: grid; gap: var(--ax-space-4); }
/* Dropdowny používají Choices.js — vizuálně shodné s .ax-input (bílé, #c8c8c8, radius 10px, výška 48px). */
/* Custom radio / checkbox: čtvercové 48px boxy ve stylu pole; aktivní = tyrkysový tint */
.ax-choice {
appearance: none; -webkit-appearance: none; width: 48px; height: 48px;
background: #fff; border: 1px solid var(--ax-border-input); border-radius: var(--ax-radius-input);
cursor: pointer; display: inline-grid; place-content: center; position: relative;
}
/* Zaškrtnuto = 1:1 AXIS (změřeno 2026-07-03): tint #e7f9f7 + 2px tyrkysový okraj + SVG fajfka */
.ax-choice:checked {
background-color: var(--ax-turquoise-tint); border: 2px solid var(--ax-turquoise);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2302d0ec' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center; background-size: 55%;
}
/* Široká varianta (tabulka práv): 60×30, radius 2px */
.ax-choice--wide { width: 60px; height: 30px; border-radius: 2px; }
/* Malá varianta (např. „zapamatovat přihlášení") */
.ax-choice--sm { width: 22px; height: 22px; border-radius: 6px; font-size: 13px; }
/* Výběrové zaškrtávátko v tabulce (20×20, výběr řádku / select-all) */
.ax-check { width: 20px; height: 20px; border-radius: 4px; font-size: 13px; }
/* Radio/checkbox skupina (volba typu ve formulářích – „Typ odměny", „Stav"…)
OPRAVA 2026-07-03: AXIS NEpoužívá kulaté inputy — radio i checkbox = čtvercový box 48×48
(appearance:none, radius 10, border #c8c8c8; checked = tint + 2px tyrkys + SVG fajfka).
Změřeno na živém AXIS „Vytvořit kontakt": input 48×48, gap 20px, text 16px. */
.ax-radio-group { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 4px; }
.ax-radio-group--col { flex-direction: column; gap: 10px; }
.ax-radio, .ax-check-row { display: inline-flex; align-items: center; gap: 20px; font-size: var(--ax-fs-base); color: var(--ax-text); cursor: pointer; }
.ax-radio input, .ax-check-row input {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
width: 48px; height: 48px; flex: none; margin: 0; cursor: pointer;
background: #fff; border: 1px solid var(--ax-border-input); border-radius: var(--ax-radius-input);
}
.ax-radio input:checked, .ax-check-row input:checked {
background-color: var(--ax-turquoise-tint); border: 2px solid var(--ax-turquoise);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2302d0ec' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center; background-size: 24px 24px;
}
/* Poznámka / nápověda u pole */
.ax-form-note { font-size: var(--ax-fs-sm); font-weight: var(--ax-fw-normal); color: var(--ax-text-muted); padding: 0 15px; margin-top: 4px; }
/* Akční lišta formuláře: vycentrovaná, mezera 10px, odsazení 50px (AXIS „Vytvořit zakázku") */
.ax-form-actions { display: flex; justify-content: center; gap: 10px; margin-top: 50px; }
/* AXIS: tlačítka v akční liště formuláře jsou VYSOKÁ 52px (ne 44) */
.ax-form-actions .ax-btn { min-height: 52px; }
/* Primární submit „Uložit" = světlá azurová #a7eeff (rebrand; přes --ax-turquoise-light), tmavý text, 18px/700, výška 52, 380 široký */
.ax-btn--submit { background: var(--ax-turquoise-light); color: var(--ax-text-strong); border-color: var(--ax-turquoise-light); font-size: 18px; min-height: 52px; min-width: 380px; }
.ax-btn--submit:hover { background: var(--ax-turquoise); border-color: var(--ax-turquoise); color: #fff; }
/* Sekundární submit „Uložit a zůstat zde" = světlejší azurový tint (rebrand: #d1fff2 → tint) */
.ax-btn--submit-2 { background: var(--ax-turquoise-tint); color: var(--ax-text-strong); border-color: var(--ax-turquoise-tint); font-size: 18px; min-height: 52px; min-width: 380px; }
.ax-btn--submit-2:hover { background: var(--ax-turquoise); border-color: var(--ax-turquoise); color: #fff; }
/* Sekundární tlačítko v akční liště — lehce šedé, šířka jako AXIS (např. „Zpět") */
.ax-btn--secondary { background: #e9ecef; color: var(--ax-text-strong); border-color: #e9ecef; font-size: 18px; min-height: 52px; min-width: 380px; }
.ax-btn--secondary:hover { background: #dee2e6; border-color: #dee2e6; }
/* =========================================================================
Tabulky
========================================================================= */
.ax-table { width: 100%; border-collapse: collapse; font-size: var(--ax-table-fs); }
.ax-table th {
text-align: left; font-weight: var(--ax-fw-bold); color: var(--ax-text-strong);
background: #fff; padding: var(--ax-table-pad-y) var(--ax-table-pad-x); border-bottom: 1px solid var(--ax-border);
}
.ax-table td { color: var(--ax-text-strong); padding: var(--ax-table-pad-y) var(--ax-table-pad-x); border-bottom: 1px solid var(--ax-border); }
/* Řádkové ikony/toggle v hustých tabulkách zmenšeny, aby nezvyšovaly řádek nad ~34px */
.ax-table .ax-action-icon .ax-icon, .ax-table .ax-icon { font-size: 20px; }
.ax-table .ax-toggle .ax-icon { font-size: 24px; }
/* Badge v tabulce kompaktní (20px vysoký), aby řádek zůstal ~34px */
.ax-table .ax-badge { padding: 0 8px; line-height: 18px; }
.ax-table tbody tr:hover { background: var(--ax-bg-subtle); }
.ax-table--striped tbody tr:nth-child(even) { background: #fafbfc; }
/* =========================================================================
Badge / štítky (pill)
========================================================================= */
.ax-badge {
display: inline-flex; align-items: center; font-size: var(--ax-fs-sm); font-weight: var(--ax-fw-bold);
padding: 3px 10px; border-radius: var(--ax-radius-pill); border: 1px solid transparent; line-height: 18px;
}
.ax-badge--danger { background: #fff; color: var(--ax-danger); border-color: var(--ax-danger); }
.ax-badge--success { background: #fff; color: var(--ax-success); border-color: var(--ax-success); }
.ax-badge--warning { background: #fff; color: var(--ax-warning); border-color: var(--ax-warning); }
.ax-badge--blue { background: #fff; color: var(--ax-blue); border-color: var(--ax-blue); }
.ax-badge--muted { background: #fff; color: var(--ax-text-muted); border-color: var(--ax-border); }
.ax-badge--solid-success { background: var(--ax-success); color: #fff; }
.ax-badge--solid-danger { background: var(--ax-danger); color: #fff; }
/* =========================================================================
Karty a navigace
========================================================================= */
.ax-card { background: #fff; border: 1px solid var(--ax-border); border-radius: var(--ax-radius); box-shadow: var(--ax-shadow-1); }
.ax-card__header { padding: var(--ax-space-3) var(--ax-space-4); border-bottom: 1px solid var(--ax-border); font-weight: var(--ax-fw-bold); }
.ax-card__body { padding: var(--ax-space-4); }
.ax-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ax-border); }
.ax-tab { font-size: var(--ax-fs-xs); padding: 13px 17px; color: var(--ax-text); border-bottom: 2px solid transparent; cursor: pointer; }
.ax-tab--active { color: var(--ax-blue); border-bottom-color: var(--ax-blue); font-weight: var(--ax-fw-bold); }
/* Stránkování (pager) — plný tyrkys, bílý text, radius 4px */
/* Stránkování (pager) — dle AXIS: čtverce 40×40, radius 4, mezera 4;
neaktivní bílé (#c8c8c8 okraj, text #6c757d), aktivní plný tyrkys. */
.ax-pager { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: var(--ax-space-5) 0 0; }
.ax-pager a, .ax-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 4px; border-radius: 4px; font-size: var(--ax-fs-base); text-decoration: none; border: 1px solid var(--ax-border-input); color: var(--ax-text-muted); background: #fff; }
.ax-pager a:has(.ax-icon) { min-width: 48px; }
.ax-pager a { cursor: pointer; }
.ax-pager a:hover { border-color: var(--ax-turquoise); color: var(--ax-turquoise); }
.ax-pager .is-active a, .ax-pager .is-active span { background: var(--ax-turquoise); border-color: var(--ax-turquoise); color: #fff; }
.ax-pager .ax-icon { font-size: 20px; }
/* Patička seznamu (dle AXIS): počet řádků vlevo, pager vpravo */
.ax-list-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: var(--ax-space-5); }
.ax-list-foot .ax-pager { margin: 0; }
.ax-list-count { font-size: var(--ax-fs-sm); color: var(--ax-text-muted); }
/* Tříditelná hlavička tabulky */
.ax-table th a { color: var(--ax-text-strong); font-weight: var(--ax-fw-bold); text-decoration: none; }
.ax-table th.is-sorted a { color: var(--ax-blue); }
/* =========================================================================
Dropdown menu (řádkové akce, kontextové menu)
========================================================================= */
.ax-dropdown-menu { background: #fff; border: 1px solid var(--ax-border-input); border-radius: 6px; box-shadow: var(--ax-shadow-1); padding: 4px 0; min-width: 180px; }
.ax-dropdown-menu a, .ax-dropdown-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; color: var(--ax-text-strong); font-size: var(--ax-fs-base); padding: 10px 16px; text-decoration: none; }
.ax-dropdown-menu a:hover, .ax-dropdown-menu button:hover { background: var(--ax-bg-subtle); }
.ax-dropdown-menu .is-danger { color: var(--ax-danger); }
/* =========================================================================
Horní navigační lišta (AXIS app header) — sdílená komponenta
Tmavá lišta #383f51, dvě řady: hlavní sekce + pod-navigace aktivní sekce.
Bílý text, aktivní = tyrkysový (+ podtržení u pod-navigace).
========================================================================= */
.ax-appbar { background: #383f51; color: #fff; width: 100%; position: relative; z-index: 10; box-shadow: 0 4px 10px rgba(26,26,26,.2); }
.ax-appbar__top { display: flex; align-items: center; gap: var(--ax-space-5); padding: 0 var(--ax-appbar-side); height: 72px; }
.ax-appbar__logo { display: flex; align-items: center; height: 72px; width: var(--ax-appbar-logo); flex: none; }
.ax-appbar__logo img { height: 40px; width: auto; display: block; }
.ax-appbar__primary { display: flex; align-items: stretch; height: 72px; }
.ax-appbar__primary a { display: flex; align-items: center; gap: 6px; color: #fff; font-weight: var(--ax-fw-bold); font-size: var(--ax-fs-base); text-decoration: none; padding: 0 var(--ax-space-4); }
.ax-appbar__primary a:hover { color: var(--ax-turquoise); }
.ax-appbar__primary a.is-active { color: var(--ax-turquoise); }
/* Křížový odkaz do AXIS (vpravo, stejná mezera od ikon jako logo od 1. položky) */
.ax-appbar__cross { margin-left: auto; display: flex; align-items: center; height: 72px; }
.ax-appbar__cross a { display: flex; align-items: center; gap: 6px; color: #fff; font-weight: var(--ax-fw-bold); font-size: var(--ax-fs-base); text-decoration: none; padding: 0 var(--ax-space-4); }
.ax-appbar__cross a:hover { color: var(--ax-turquoise); }
.ax-appbar__utility { display: flex; align-items: center; gap: var(--ax-space-3); color: #fff; }
.ax-appbar__utility .ax-icon { color: #fff; cursor: pointer; }
/* Zvoneček (Oznámení) odebrán */
.ax-appbar__utility [title="Oznámení"] { display: none; }
/* Globální „+" pro nový obsah v hlavičce (otevírá dropdown se seznamem) */
.ax-appbar__add { position: relative; display: inline-flex; }
.ax-appbar__add > .ax-icon { color: #fff; cursor: pointer; }
.ax-appbar__add-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 280px; }
.ax-appbar__add:hover .ax-appbar__add-menu, .ax-appbar__add:focus-within .ax-appbar__add-menu { display: block; }
.ax-appbar__add-menu a { display: flex; align-items: center; gap: var(--ax-space-3); }
.ax-appbar__add-menu a .ax-icon { color: var(--ax-text-muted); font-size: 22px; }
/* Pod-navigace = BÍLÁ lišta, tmavý text, aktivní tyrkysový + podtržení */
/* Pod-nav začíná zarovnaná s prvním odkazem horního menu (za logem), jako AXIS */
.ax-appbar__sub { display: flex; align-items: stretch; gap: 0; padding: 0 var(--ax-appbar-side) 0 calc(var(--ax-appbar-side) + var(--ax-appbar-logo) + var(--ax-space-5)); background: #fff; border-bottom: 1px solid var(--ax-border); }
.ax-appbar__sub a { display: flex; align-items: center; color: var(--ax-text-strong); font-weight: var(--ax-fw-bold); font-size: var(--ax-fs-base); text-decoration: none; padding: 15px var(--ax-space-4) 12px; border-bottom: 3px solid transparent; }
.ax-appbar__sub a:hover { color: var(--ax-turquoise); }
.ax-appbar__sub a.is-active { color: var(--ax-turquoise); border-bottom-color: var(--ax-turquoise); }
/* Obsahová oblast: plná šířka, ale výrazné boční odsazení jako AXIS (~75px na širokém okně, škáluje dolů) */
.ax-content { padding: var(--ax-space-6) clamp(24px, 5vw, 75px) var(--ax-space-7); }
/* =========================================================================
Ikony — AXIS používá Material Symbols Rounded (ligatury, např. "edit", "filter_list").
POZOR: HTML výstup musí načíst font (váha 300):
========================================================================= */
.ax-icon {
font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal;
font-size: 24px; line-height: 1; display: inline-block; vertical-align: middle;
letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal;
-webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
/* AXIS používá tenčí váhu 300 (ne 400) */
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
/* Řádková akce-ikona (odkaz s ikonou, např. tužka edit) */
.ax-action-icon { color: var(--ax-text-muted); text-decoration: none; cursor: pointer; display: inline-flex; }
.ax-action-icon:hover { color: var(--ax-blue); }
.ax-action-icon--danger:hover { color: var(--ax-danger); }
/* Toggle přes ikonu Material Symbols (toggle_on / toggle_off) */
.ax-toggle { background: none; border: 0; cursor: pointer; padding: 0; display: inline-flex; }
.ax-toggle .ax-icon { font-size: 28px; }
.ax-toggle--on .ax-icon { color: var(--ax-turquoise); }
.ax-toggle--off .ax-icon { color: var(--ax-text-muted); }
/* =========================================================================
Filtr (AXIS „Filtrace" — kolabovatelná lišta + grid polí)
========================================================================= */
/* Filtr je oddělen horním dividerem (#c8c8c8) s 30px odsazením (jako AXIS).
Pod spodním dividerem 30px mezera k obsahu (AXIS) — u toolbaru se margin slije. */
/* ZHUŠTĚNO 2026-07-03 (rozhodnutí klienta, ladí s hustotou tabulek ~34px):
pole 36px/14px/š.200, rám úměrně (ikona 36, titulek 16, odsazení 20). AXIS originál: 48px pole, box 44, odsazení 30. */
.ax-filter { border-top: 1px solid var(--ax-border-strong); margin-bottom: 20px; }
.ax-filter__header { display: flex; align-items: center; gap: var(--ax-space-2); padding: 20px 0 0; }
.ax-filter__title { display: flex; align-items: center; gap: var(--ax-space-3); font-size: 16px; font-weight: var(--ax-fw-bold); color: var(--ax-text); }
/* Ikona filtru v tintovém boxu (36×36, azurový tint, radius 8px) */
.ax-filter__icon { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--ax-turquoise-tint); color: var(--ax-turquoise); border-radius: var(--ax-radius); }
.ax-filter__icon .ax-icon { font-size: 20px; }
/* Akce filtru přesunuty z hlavičky na řádek polí (2026-07-03): „Upravit filtr" a „Presety" ODSTRANĚNY,
„Zrušit filtr" = .ax-filter__clear vpravo na řádku polí, spodkem lícuje s boxy. */
.ax-filter__fields > .ax-filter__clear { width: auto; display: flex; align-items: flex-end; margin-left: auto; }
.ax-filter__clear .ax-btn { min-height: 36px; padding: 6px 14px; font-size: var(--ax-fs-sm); }
.ax-filter__clear .ax-icon { font-size: 18px !important; }
/* Pole pevné šířky, zarovnaná vlevo; spodní divider ukončuje filtr */
.ax-filter__fields { display: flex; flex-wrap: wrap; gap: var(--ax-space-3); padding: var(--ax-space-3) 0 20px; border-bottom: 1px solid var(--ax-border-strong); }
.ax-filter__fields > * { width: 200px; }
/* Kompaktní pole uvnitř filtru (create-formuláře zůstávají 48px) */
.ax-filter .ax-input, .ax-filter .ax-select, .ax-filter .ax-textarea { height: 36px; padding: 6px 12px; font-size: var(--ax-fs-sm); border-radius: var(--ax-radius); }
/* Aktivní (vybraný) filtr — dle „barvy.pdf": box s azurovým tintem + azurový okraj (AXIS vzor: chip uvnitř pole);
Docházka má single-select → zbarvuje se CELÝ box (2026-07-03). background-color (ne shorthand) kvůli chevronu selectu. */
.ax-filter .ax-select.is-active, .ax-filter .ax-input.is-active { background-color: var(--ax-turquoise-tint); border-color: var(--ax-turquoise); }
.ax-filter .ax-select { padding-right: 32px; background-position: right 12px center; }
.ax-filter .ax-label { font-size: var(--ax-fs-xs); margin-bottom: 4px; }
/* Potvrzovací tlačítko filtru — POŽADAVEK KLIENTA (AXIS filtr nemá; vizuál = AXIS primární akce).
Poslední prvek v .ax-filter__fields; lícuje spodkem s poli (výška 36px jako pole filtru). */
.ax-filter__fields > .ax-filter__submit { width: auto; display: flex; align-items: flex-end; }
.ax-filter__submit .ax-btn { min-height: 36px; padding: 6px 14px; font-size: var(--ax-fs-sm); }
.ax-filter__submit .ax-icon { font-size: 18px !important; }
/* Dle „barvy.pdf": Filtrovat = #E1F9FF (světlejší než Uložit #A7EEFF) */
.ax-filter__submit .ax-btn--turquoise { background: var(--ax-turquoise-tint); border-color: var(--ax-turquoise-tint); }
.ax-filter__submit .ax-btn--turquoise:hover { background: var(--ax-turquoise); border-color: var(--ax-turquoise); color: #fff; }
/* Nadpis stránky — vycentrovaný (jako AXIS) */
.ax-page-title { font-size: var(--ax-fs-h1); font-weight: var(--ax-fw-heavy); text-align: center; margin: 0 0 var(--ax-space-5); }
/* =========================================================================
Hlavička sekce / filtru (toolbar s názvem a akcemi vpravo)
========================================================================= */
.ax-section-header {
display: flex; align-items: center; gap: var(--ax-space-3);
padding-top: var(--ax-space-6); border-top: 1px solid var(--ax-border-strong);
}
.ax-section-header__title { display: flex; align-items: center; gap: var(--ax-space-2); font-size: 18px; font-weight: var(--ax-fw-bold); color: var(--ax-text); }
.ax-section-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--ax-space-2); }
/* Ikonové tlačítko s tyrkysovým tintem (např. Export) */
.ax-btn--icon-tint {
background: var(--ax-turquoise-tint); color: var(--ax-text-muted);
border-color: var(--ax-turquoise); gap: var(--ax-space-3);
}
.ax-btn--icon-tint:hover { background: var(--ax-turquoise); color: #fff; }
/* =========================================================================
Report tabulka — varianta s hustšími buňkami + souhrnný řádek
========================================================================= */
.ax-table--report td { padding: var(--ax-table-pad-y) var(--ax-table-pad-x); vertical-align: middle; }
/* Hlavička reportu: stejné vodorovné odsazení jako buňky (hrany lícují) */
.ax-table--report thead th { padding: var(--ax-table-pad-y) var(--ax-table-pad-x); border-bottom: 1px solid var(--ax-border-strong); }
.ax-table tr.ax-row-total td { background: var(--ax-bg-total); font-weight: var(--ax-fw-bold); }
/* Číselné / finanční buňky: zarovnané vpravo, tabulkové číslice; souhrny tučně */
.ax-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ax-num--total { font-weight: var(--ax-fw-bold); }
.ax-num--accent { color: var(--ax-blue); font-weight: var(--ax-fw-bold); } /* zvýrazněná metrika (procenta) */
/* Barevné odlišení skupin sloupců výkazů (klient 2026-07-03) — VELMI jemné tinty:
Odpracovaný čas = zelená, Neodpracovaný čas = červená, Odměny = žlutá.
Použití: v colgroup (tělo) + třída na th v thead. */
:root {
--ax-work-tint: #eef9f2;
--ax-abs-tint: #fdf1f1;
--ax-rew-tint: #fdf7e8;
}
.ax-table col.ax-g-work, .ax-table .ax-g-work { background: var(--ax-work-tint); }
.ax-table col.ax-g-abs, .ax-table .ax-g-abs { background: var(--ax-abs-tint); }
.ax-table col.ax-g-rew, .ax-table .ax-g-rew { background: var(--ax-rew-tint); }
/* Hlavička výkazu (Výkazy) — logo společnosti z filtru + parametry výkazu.
Dle staré app (logo + firma + „Pracovní výkaz za měsíc" + středisko), vizuál ohnutý do AXIS. */
.ax-report-head { display: flex; align-items: center; gap: var(--ax-space-4); margin: 0 0 var(--ax-space-4); }
.ax-report-head__logo { width: 72px; height: 72px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ax-border-input); border-radius: var(--ax-radius-input); background: #fff; }
.ax-report-head__logo img { max-width: 54px; max-height: 54px; display: block; }
.ax-report-head__company { font-size: 18px; font-weight: var(--ax-fw-bold); color: var(--ax-text-strong); }
.ax-report-head__meta { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 4px; font-size: var(--ax-fs-sm); color: var(--ax-text-muted); }
.ax-report-head__meta strong { color: var(--ax-text-strong); font-weight: var(--ax-fw-bold); }
/* Karta s grafem (AXIS používá Chart.js v kartě, radius 10px) */
.ax-chart-card { border: 1px solid var(--ax-border-input); border-radius: var(--ax-radius-input); padding: var(--ax-space-4); }
.ax-chart-card__title { font-size: var(--ax-fs-base); font-weight: var(--ax-fw-bold); color: var(--ax-text-strong); margin: 0 0 var(--ax-space-3); }
/* Prázdný stav (žádná data) */
.ax-empty { color: var(--ax-text-strong); font-size: var(--ax-fs-base); padding: var(--ax-space-6) var(--ax-space-4); text-align: center; background: #fff; }
.ax-empty .ax-empty__hint { display: block; color: var(--ax-text-muted); font-size: var(--ax-fs-sm); margin-top: var(--ax-space-1); }
/* =========================================================================
Matice docházky (Evidence > Kontrola vykázaných hodin)
⚠ BEZ přímého AXIS vzoru — postaveno z AXIS tokenů. Heatmapa stavů po dnech:
řádek = pracovník (sticky), sloupec = den v měsíci, barva buňky = stav.
Stavové barvy = jemné tinty AXIS sémantické palety (ne syté barvy staré app).
========================================================================= */
/* Staré jemné tinty (ponechány pro případné jiné použití; matice Kontroly už jede na barvách z „barvy.pdf") */
:root {
--ax-success-tint: #e3f5ea;
--ax-info-tint: #eaf2f8;
--ax-danger-tint: #fde3e3;
--ax-none-bg: #f5f5f2;
}
.ax-matrix-wrap { overflow-x: auto; }
.ax-matrix { border-collapse: collapse; font-size: var(--ax-fs-sm); width: max-content; min-width: 100%; }
/* AXIS: jen vodorovné linky řádků (žádné svislé čáry ani vnější rámeček) */
.ax-matrix th, .ax-matrix td { border-bottom: 1px solid var(--ax-border); text-align: center; }
.ax-matrix thead th { position: sticky; top: 0; z-index: 3; background: #fff; color: var(--ax-text-strong); font-weight: var(--ax-fw-bold); padding: 5px 0; }
.ax-matrix__day { width: 34px; min-width: 34px; }
.ax-matrix__day small { display: block; font-size: 10px; font-weight: var(--ax-fw-normal); color: var(--ax-text-muted); }
.ax-matrix__day--weekend { background: var(--ax-grey-2); }
/* Sticky první sloupec = jméno pracovníka. Box-shadow drží dělítko i při scrollu (border-collapse jinak sticky okraj „uteče"). */
.ax-matrix__name { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left; white-space: nowrap; font-weight: var(--ax-fw-bold); color: var(--ax-text-strong); padding: 6px 12px; min-width: 150px; box-shadow: 1px 0 0 var(--ax-border-strong); }
/* Sloupec Pracovník zarovnán vlevo (přebít centrované .ax-matrix th/td) */
.ax-matrix th.ax-matrix__name, .ax-matrix td.ax-matrix__name { text-align: left; }
.ax-matrix thead .ax-matrix__name { z-index: 4; padding: 5px 12px; }
.ax-matrix tbody td { height: var(--ax-table-row); }
.ax-matrix tbody tr:hover .ax-matrix__name { background: var(--ax-bg-subtle); }
.ax-matrix tbody tr:hover td { filter: brightness(.96); }
/* Stavy buněk — Kontrola vykázaných hodin dle „barvy.pdf" (2026-07-03):
100 % = zelená, méně = světle modrá, víc = červená, víkend/bez záznamu = šedé. */
.ax-cell--work { background: var(--ax-ok); } /* vykázáno 100 % */
.ax-cell--under { background: var(--ax-under); } /* méně než 100 % */
.ax-cell--issue { background: var(--ax-over); } /* více než 100 % */
.ax-cell--weekend { background: var(--ax-grey-2); } /* víkend / svátek */
.ax-cell--none { background: var(--ax-grey-1); } /* bez záznamu */
/* Sloupec součtu (sticky vpravo) — levé dělítko přes box-shadow (drží i při scrollu) */
.ax-matrix__total { position: sticky; right: 0; z-index: 2; background: var(--ax-bg-total); font-weight: var(--ax-fw-bold); color: var(--ax-text-strong); min-width: 64px; padding: 0 16px; text-align: right; box-shadow: -1px 0 0 var(--ax-border-strong); }
.ax-matrix thead .ax-matrix__total { z-index: 4; text-align: right; padding: 5px 16px; }
/* Total sloupec zarovnán vpravo (přebít centrované .ax-matrix td/th) */
.ax-matrix th.ax-matrix__total, .ax-matrix td.ax-matrix__total { text-align: right; }
/* Editovatelná buňka matice (např. Přehled dovolené – nárok/měsíc) — čisté inline:
bez stálého rámečku, rámeček/podklad až na hover/focus (jako inline edit). */
.ax-cell-input { width: 100%; min-width: 44px; text-align: right; font-family: var(--ax-font); font-size: var(--ax-fs-sm); color: var(--ax-text); padding: 4px 8px; border: 0; background: transparent; border-radius: 4px; box-sizing: border-box; }
.ax-cell-input:hover { background: var(--ax-bg-subtle); }
.ax-cell-input:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 1px var(--ax-blue); }
/* Legenda barev (k matici i jinde) */
.ax-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ax-space-4); margin: 0 0 var(--ax-space-4); font-size: var(--ax-fs-sm); color: var(--ax-text-strong); }
.ax-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.ax-legend__swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--ax-border); }
/* Lišta akcí nad obsahem (mezi filtrem a tabulkou): akce vpravo, period vlevo apod. */
.ax-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ax-space-3); margin: var(--ax-space-5) 0 var(--ax-space-4); }
.ax-toolbar--end { justify-content: flex-end; }
.ax-toolbar__spacer { margin-left: auto; }
/* Krokovač období (měsíc/rok) — ⚠ odvozeno, není přímý AXIS vzor */
.ax-period { display: inline-flex; align-items: center; gap: var(--ax-space-2); font-size: var(--ax-fs-base); font-weight: var(--ax-fw-bold); color: var(--ax-text); }
.ax-period button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--ax-border-input); border-radius: var(--ax-radius); background: #fff; color: var(--ax-text-strong); cursor: pointer; }
.ax-period button:hover { background: var(--ax-turquoise-tint); border-color: var(--ax-turquoise); color: var(--ax-turquoise); }