/* === variables.css === */
/**
* CSS Variables - Single Source of Truth
* Created: 2026-02-02
*
* Všetky CSS premenné na jednom mieste pre konzistentnosť.
* Importuj tento súbor PRVÝ pred všetkými ostatnými CSS.
*/
:root {
/* ==========================================================================
COLORS - Brand
========================================================================== */
--color-primary: #742A8D;
--color-primary-light: #B83CDE;
--color-primary-dark: #5a1f6d;
--color-primary-gradient-start: #B83CDE;
--color-primary-gradient-end: #742A8D;
--color-accent: #ffb400;
--color-primary-accent: #8b3fb6;
--color-primary-accent-hover: #9b4fc6;
--color-primary-accent-dark: #7a2fa8;
--color-primary-accent-bg: #f3e8ff;
--color-primary-accent-bg-hover: #ede5ff;
--color-primary-accent-glow: rgba(139, 63, 182, 0.1);
--color-primary-accent-glow-hover: rgba(139, 63, 182, 0.2);
/* ==========================================================================
COLORS - UI States
========================================================================== */
--color-success: #10b981;
--color-success-light: #d1fae5;
/* WCAG 2.1 AA (1.4.3): #10b981 dava 2,54:1 na bielej / 2,23:1 na #f0f0f0 - pod hranicou.
#146c43 dava 6,45:1 / 5,66:1 (kontrastny audit, uloha T-163). Pouzi pre TEXT/graficke
plochy vyzadujuce kontrast (napr. rating priemer, distribution bar), NIE ako plosnu
nahradu --color-success (ta ostava pre plne farebne bloky bez textovej naroky). */
--color-success-text: #146c43;
--color-error: #ef4444;
--color-error-light: #fee2e2;
/* WCAG 2.1 AA (1.4.3): #ef4444 dava 3,76:1 na bielej / 3,45:1 na #f0f0f0 - pod hranicou.
#b02a37 dava 6,50:1 / 5,96:1 (kontrastny audit, uloha T-472). Pouzi pre TEXT/graficke
plochy vyzadujuce kontrast, NIE ako plosnu nahradu --color-error (ta ostava pre plne
farebne bloky bez textovej naroky). */
--color-error-text: #b02a37;
--color-warning: #f59e0b;
--color-warning-light: #fef3c7;
/* WCAG 2.1 AA (1.4.3): #f59e0b dava 2,15:1 na bielej / 1,88:1 na #f0f0f0 - pod hranicou.
#a04a08 dava 6,04:1 / 5,54:1 (kontrastny audit, uloha T-472). Povodna hodnota #b45309
z T-163 davala 5,02:1 / 4,41:1, co na novom tabulator hover pozadi #f3e8ff kleslo na
4,26:1 - pod hranicou, preto T-472 hodnotu stmavila. Pouzi pre TEXT/graficke plochy
vyzadujuce kontrast, NIE ako plosnu nahradu --color-warning. */
--color-warning-text: #a04a08;
--color-info: #3b82f6;
--color-info-light: #dbeafe;
/* WCAG 2.1 AA (1.4.3): #3b82f6 dava 3,01:1 na --color-info-light (#dbeafe) - pod hranicou.
#1d4ed8 dava 5,49:1 (kontrastny audit, uloha T-472). Pouzi pre TEXT/graficke plochy
vyzadujuce kontrast, NIE ako plosnu nahradu --color-info. */
--color-info-text: #1d4ed8;
/* ==========================================================================
COLORS - Text & Background
========================================================================== */
--color-text: #333;
--color-text-muted: #666;
/* WCAG 2.1 AA (1.4.3): #999 malo 2,85:1 na #fff a 2,61:1 na --color-bg-alt (#f5f5f5) — pod hranicou.
#6f6f6f dáva 5,02:1 na #fff a 4,61:1 na #f5f5f5 (kontrastný audit, úloha T-163). */
--color-text-light: #6f6f6f;
--color-bg: #fff;
--color-bg-alt: #f5f5f5;
--color-bg-hover: #f5e6fa;
--color-border: #ddd;
--color-border-focus: #742A8D;
--color-instructor-photo-border: #f0e8ff;
/* ==========================================================================
SIZING - Inputs & Buttons
========================================================================== */
--input-height: 28px;
--button-height: 28px;
--tap-target-min: 44px;
/* ==========================================================================
SPACING
========================================================================== */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 24px;
--spacing-2xl: 32px;
/* ==========================================================================
TYPOGRAPHY
========================================================================== */
--font-family: Tahoma, Verdana, sans-serif;
--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-base: 13px;
--font-size-md: 14px;
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-2xl: 24px;
/* ==========================================================================
BREAKPOINTS (for reference - use in media queries)
========================================================================== */
--breakpoint-mobile: 480px;
--breakpoint-tablet: 768px;
--breakpoint-desktop: 1024px;
--breakpoint-wide: 1280px;
--breakpoint-ultrawide: 1440px;
/* ==========================================================================
Z-INDEX Scale
========================================================================== */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
--z-toast: 9000;
--z-nav-drawer: 10000;
--z-nav-overlay: 9999;
/* ==========================================================================
BORDERS & SHADOWS
========================================================================== */
--border-radius-sm: 3px;
--border-radius: 4px;
--border-radius-lg: 6px;
--box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
--box-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
/* ==========================================================================
CALENDAR Specific
========================================================================== */
--calendar-width-mobile: 1200px;
--calendar-cell-width-mobile: 155px;
--calendar-hours-width-mobile: 52px;
--calendar-cell-height: 34px;
--calendar-hour-height: 32px;
--calendar-color-ride: #c0e8a0;
--calendar-color-additional: #80FFFF;
--calendar-color-reserved: #a0d0f0;
--calendar-color-cancelled: #f0c0c0;
--calendar-color-free: #ffffff;
/* ==========================================================================
TABULATOR - Thumbnails
========================================================================== */
--thumb-width: 100px;
--thumb-height: 60px;
}
/* === global.css === */
/**
* ==========================================================================
* GLOBAL.CSS - Base Reset & Form Layout
* ==========================================================================
*
* Dependencies: variables.css (loaded first)
*
* Contents:
* 1. CSS Reset
* 2. Typography base
* 3. Form layout (float-based, legacy)
* 4. Links & basic elements
* 5. Dialog scroll lock
* 6. Select2 base overrides
*
* NOTE: Form rules use opt-in .legacy-form class
* Only forms that need float layout get it
* ==========================================================================
*/
/* ==========================================================================
1. CSS RESET
========================================================================== */
* {margin:0;padding:0}
html, body {
font: normal 13px Tahoma, Verdana, sans-serif;
-webkit-font-smoothing: antialiased;
/* iOS Safari fix - zabrániť zmenšovaniu textu */
-webkit-text-size-adjust: 100%;
/* Jeden scroll - len body, nie html aj body */
overflow-x: hidden;
}
html {
height: 100%;
overflow-y: auto; /* Hlavný scroll na html */
}
body {
min-height: 100%;
overflow: visible; /* Body nescrolluje, len html */
}
a {cursor:hand;cursor:pointer}
small {font-size:11px}
img {border:none}
div {-webkit-font-smoothing:antialiased}
/* Legacy form layout: 30% label + 65% field using float.
Opt-in via .legacy-form class — current forms: grep -rn 'class="legacy-form"' --include=*.php .
All other forms use flexbox/grid natively.
*/
.legacy-form,
.legacy-form > div,
.legacy-form fieldset div {
width: 100%;
float: left;
display: block;
}
.legacy-form div label,
.legacy-form fieldset div label {
width: 30%;
float: left;
margin: 3px 0 2px 0;
text-align: right;
padding: 4px 0 0 0;
font-size: 13px;
letter-spacing: 0.5px;
}
.legacy-form div > span,
.legacy-form fieldset div > span {
width: 65%;
float: right;
margin: 3px 0 2px 0;
}
input[type='text'], input[type='number'], input[type='password'], select {padding:4px 3px 4px 3px;border:#cf4deb 1px inset;border-radius:3px;box-shadow:inset 2px 2px 10px -5px rgba(0,0,0,0.65)}
input[type='submit'], input[type='button'] {padding:5px 7px 5px 7px;border:#cf4deb 1px solid;border-radius:5px;color:var(--color-primary);font-weight:bold;cursor:hand;cursor:pointer;background:linear-gradient(to bottom, #f0f9ff 0%, #bbb2c9 100%);box-shadow:3px 3px 10px -4px rgba(0,0,0,0.75)}
input[type='submit']:hover, input[type='button']:hover {box-shadow:3px 3px 10px -6px rgba(0,0,0,0.75)}
input[type='submit']:active, input[type='button']:active {box-shadow:none;color:#000}
select {padding:2px}
fieldset {text-align:left;padding:10px 10px 10px 10px;border:#CCC 2px dotted;border-radius:5px;margin:0 0 10px 0}
legend {padding:0 10px 0 10px;color:var(--color-primary);font:normal 17px Tahoma,Verdana,sans-serif}
/* Desktop navigation - skrytá na mobile (používa sa .mobile-header a drawer) */
nav {
display: none;
text-align: center;
position: relative;
width: 100%;
z-index: 9999;
}
@media (min-width: 1024px) {
nav {
display: block;
min-width: 1000px;
}
}
/* Desktop navigation styles - EXCLUDE mobile drawer via :not() */
nav:not(.nav-mobile) ul {text-align:left;display:inline;margin:0;padding:10px 4px 12px 0;list-style:none;box-shadow:0 0 5px rgba(0,0,0,0.15);background:linear-gradient(to bottom, #ba3de0 0%, var(--color-primary) 100%)}
nav:not(.nav-mobile) ul li {font:bold 12px/18px Tahoma,Verdana,sans-serif;color:#FFF;display:inline-block;margin-right:-4px;position:relative;padding:9px 15px 10px 15px;background:transparent;cursor:pointer;z-index:999}
nav:not(.nav-mobile) ul li:hover {background:#555;color:#FFF}
nav:not(.nav-mobile) ul li ul {padding:0;position:absolute;top:37px;left:0;width:150px;box-shadow:none;display:none;opacity:0;visibility:hidden}
nav:not(.nav-mobile) ul li ul li {background:#555;display:block;color:#fff}
nav:not(.nav-mobile) ul li ul li:hover {background:#666}
nav:not(.nav-mobile) ul li:hover ul {display:block;opacity:1;visibility:visible}
nav:not(.nav-mobile) ul li a, nav:not(.nav-mobile) ul li ul li a {color:#FFF;text-decoration:none;padding:10px 0 10px 0}
section {
width: 100%;
text-align: center;
}
/* Clearfix pre floated content - kompatibilné so starým iOS */
section::after {
content: "";
display: table;
clear: both;
}
/* ==========================================================================
DIALOG SCROLL LOCK
NOTE: These use !important because they must override inline styles set by JS
when opening dialogs. This is a LEGITIMATE use case.
========================================================================== */
html.dialog-open, body.dialog-open { overflow: hidden !important; }
.dialog-open #calendar { overflow: hidden !important; }
/* Select2 */
html body .select2-container .select2-selection--single {
margin-top: 1px;
margin-bottom: 1px;
vertical-align: middle;
height: 32px;
border: 1px inset #cf4deb;
border-radius: 3px;
font-size: 13px;
padding: 2px 6px;
box-shadow: inset 2px 2px 10px -5px rgba(0,0,0,0.65);
transition: border 0.2s;
background-color: #e9e9ed;
}
html body .select2-container .select2-selection--single:focus,
html body .select2-container .select2-selection--single.select2-selection--focus {
border: 1.5px solid var(--color-primary);
outline: none;
}
html body .select2-container .select2-selection--single .select2-selection__arrow {
height: 30px;
right: 6px;
}
html body .select2-dropdown {
font-size: 13px;
border: 1px solid #cf4deb;
}
/* Mobile: Obmedziť výšku Select2 dropdown aby nepresahoval popup */
@media (max-width: 767px) {
html body .select2-dropdown {
max-height: 40vh !important;
overflow: hidden !important;
}
html body .select2-dropdown .select2-results__options {
max-height: 30vh !important;
overflow-y: auto !important;
}
html body .select2-results {
max-height: 30vh !important;
overflow-y: auto !important;
}
}
/* Ensure dropdown renders above popups/modals */
html body .select2-dropdown { z-index: 100000; }
html body .select2-container--open { z-index: 100000; }
html body .select2-container.select2-container--default.select2-container--open { z-index: 100000; }
html body .select2-results__option--highlighted {
background: #cf4deb;
}
html body .select2-container {
vertical-align: middle;
}
html body .select2-results__option--highlighted .select2-result-content > div {
color: #fff;
}
/* Šírka a zarovnanie Select2 */
html body .select2-container {
width: 100%;
min-width: 0;
max-width: 100%;
}
/* Select2 pre inštruktorov/vozidlá - fit-content s max 250px */
html body #control select#id + .select2-container,
html body .control__filters select#id + .select2-container {
width: fit-content !important;
min-width: 120px;
max-width: 250px;
}
html body .select2-container .select2-selection--single {
height: 28px;
min-height: 28px;
line-height: 28px;
font-size: 13px;
padding: 2px 6px;
}
html body .select2-container .select2-selection--single .select2-selection__arrow {
height: 26px;
right: 6px;
}
html body .select2-selection,
html body .select2-selection.select2-selection--single.select2-selection--clearable {
width: 100%;
}
@media (max-width: 600px) {
html body .select2-container {
min-width: 100%;
max-width: 100%;
}
}
/* Zarovnanie labelov a selectu */
html body .right label {
text-align: right;
padding-right: 8px;
}
html body .right .select2-container {
margin-left: 0;
}
html body .select2-container .select2-name,
html body .select2-container .select2-results .select2-name {
font-weight: 700;
}
html body .select2-container .select2-meta {
color: #444;
font-size: 12px;
line-height: 1.4;
}
html body .select2-container .select2-tags,
html body .select2-container .select2-results .select2-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
column-gap: 8px;
row-gap: 6px;
}
html body .select2-container .select2-result-content,
html body .select2-container .select2-result-content.select2--selection {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
word-break: break-word;
float: unset;
}
html body .select2-container .select2-result-content > .select2-name,
html body .select2-container .select2-result-content > .select2-meta,
html body .select2-container .select2-result-content.select2--selection > .select2-name,
html body .select2-container .select2-result-content.select2--selection > .select2-meta {
display: inline-flex;
align-items: center;
width: auto;
padding: 0;
margin: 0;
}
html body .select2-container .select2-name::after {
content: " -";
display: inline;
padding-left: 7px;
}
html body .select2-container .select2-name:only-child::after { content: ""; }
html body .select2-container .select2-tag,
html body .select2-container .select2-results .select2-tag {
display: inline-flex;
align-items: center;
padding: 4px 10px;
font-size: 11px;
color: #5a1f6e;
border: 1px solid rgba(207, 77, 235, 0.4);
width: auto;
max-width: 100%;
white-space: normal;
word-break: break-word;
}
html body .select2-container .select2--selection { display: flex; align-items: center; gap: 0.5em; }
html body .select2-container .select2--selection { width: 100%; line-height: 1.4; }
/* Select2 selection box - higher specificity for theme override */
html body .select2-container.select2-container--default .select2-selection--single {
border: #cf4deb 1px inset;
border-radius: 3px;
height: 26px;
box-shadow: inset 2px 2px 10px -5px rgba(0,0,0,0.65);
padding: 3px;
display: flex;
align-items: center;
box-sizing: border-box;
}
html body .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
width: 100%;
min-height: 26px;
line-height: 1.3;
color: var(--color-primary);
font-weight: 600;
padding: 0 32px 0 5px;
white-space: normal;
text-overflow: clip;
overflow: hidden;
}
/* Override default theme ellipsis - higher specificity */
html body .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered,
html body .select2-container.select2-container--default .select2-selection--single .select2-selection__placeholder {
text-overflow: clip;
white-space: normal;
}
/* Also cover classic theme */
html body .select2-container.select2-container--classic .select2-selection--single .select2-selection__rendered,
html body .select2-container.select2-container--classic .select2-selection--single .select2-selection__placeholder {
text-overflow: clip;
white-space: normal;
}
html body .select2-container .select2-selection--single .select2-selection__placeholder {
color: rgba(115, 41, 140, 0.7);
font-weight: 600;
}
html body .select2-container .select2-selection--single .select2-selection__arrow {
height: 26px;
color: var(--color-primary);
top: 50%;
transform: translateY(-50%);
}
html body .select2-container .select2-results > .select2-results__options {
max-height: 320px;
padding: 10px;
background-color: #e9e9ed;
overflow-y: auto;
overflow-x: hidden;
}
html body .select2-container .select2-selection--single .select2-selection__arrow b {
right: 0%;
left: unset;
}
html body .select2-container .select2-results__option--highlighted.select2-results__option--selectable {
background-color: #cf4deb;
color: #fff;
}
/* Select2 dropdown options - left aligned */
html body .select2-container .select2-results__option,
html body .select2-container--default .select2-results__option,
html body .select2-results__option {
text-align: left;
padding-left: 8px;
}
/* Select2 selection text - left aligned */
html body .select2-container .select2-selection--single .select2-selection__rendered {
text-align: left;
}
html body .select2-student-wrapper {
width: 80%;
}
/* Vypnutie float:right pre Select2 vo formulári */
#select2 div span,
#select2 div span {
float: none;
}
@media (max-width: 768px) {
.add-student-from-crm .crm-popup {
padding: 20px 22px 24px;
}
.add-student-from-crm form label,
.add-student-from-crm form span {
width: 100%;
text-align: left;
}
.select2-container--open .select2-dropdown {
max-width: calc(100vw - 32px);
}
}
.add-user-page .select2-container {
width: 100%;
}
html body .add-user-page .selection {
width: 100%;
}
html body .add-user-page .select2-container .select2-selection--single .select2-selection__rendered {
line-height: 16px;
width: 85%;
}
html body .select2-container--default .select2-selection--single .select2-selection__clear {
margin-right: 3px;
}
/* Branch badge in header */
.nav-branch-badge {
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.15);
padding: 2px 8px;
border-radius: 3px;
margin-left: 8px;
vertical-align: middle;
line-height: 16px;
}
/* Pending count badge v menu (napr. backride žiadosti) */
.nav-pending-badge {
display: inline-block;
min-width: 18px;
height: 18px;
line-height: 18px;
padding: 0 5px;
font-size: 11px;
font-weight: 700;
color: #fff;
background: #dc3545;
border-radius: 9px;
text-align: center;
margin-left: 4px;
vertical-align: middle;
box-sizing: border-box;
}
/* Branch stripe under header */
header::after {
content: '';
display: block;
height: 3px;
background: rgba(255, 255, 255, 0.3);
}
/* Branch-specific stripe colors (subtle pastels) */
body.branch-po header::after { background: #9b59b6; }
body.branch-ke header::after { background: #3498db; }
body.branch-sb header::after { background: #27ae60; }
body.branch-mi header::after { background: #e67e22; }
body.branch-tv header::after { background: #1abc9c; }
body.branch-he header::after { background: #c0392b; }
body.branch-pp header::after { background: #e91e63; }
/* Password toggle (eye icon) — pre input[type=password] s class .password-with-toggle */
/* Použitie:
*
*
*
*
*
*
*/
.password-toggle-wrapper {
position: relative;
display: inline-block;
}
.password-toggle-wrapper input.password-with-toggle {
padding-right: 30px;
margin: 0;
vertical-align: middle;
}
.password-toggle-wrapper .password-toggle {
position: absolute !important;
right: 4px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: transparent !important;
border: 0 !important;
padding: 2px !important;
cursor: pointer !important;
color: #888 !important;
line-height: 0 !important;
height: 22px !important;
width: 22px !important;
min-width: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
border-radius: 0 !important;
z-index: 2;
}
.password-toggle-wrapper .password-toggle:hover {
color: #333 !important;
}
.password-toggle-wrapper .password-toggle:hover {
color: #333;
}
.password-toggle-wrapper .password-toggle:focus {
outline: 1px dotted #999;
}
.password-toggle-wrapper .password-toggle svg {
display: block;
pointer-events: none;
}
/* === ui8.css === */
/* ==========================================================================
CONTENT WRAPPER - Mobile-First
========================================================================== */
/* Base = Mobile */
.content {
width: 100%;
max-width: 100%;
position: relative;
margin: 0 auto 50px auto;
padding: 0 10px;
box-sizing: border-box;
overflow-x: auto; /* Horizontálny scroll pre kalendár na mobile */
-webkit-overflow-scrolling: touch; /* Smooth scroll na iOS */
}
/* Clearfix pre floated content - kompatibilné so starým iOS Safari */
.content::after {
content: "";
display: table;
clear: both;
}
.contentt {
width: 100%;
float: left;
}
/* Tablet */
@media (min-width: 768px) {
.content {
padding: 0 16px;
margin-bottom: 50px;
}
}
/* Desktop - menšie obrazovky */
@media (min-width: 1024px) {
.content {
width: 100%;
max-width: 100%;
padding: 0 20px;
overflow-x: visible;
margin-bottom: 50px;
}
.contentt {
width: 100%;
}
}
/* Desktop - veľké obrazovky */
@media (min-width: 1200px) {
.content {
width: 1150px;
max-width: 1150px;
padding: 0;
margin: 0 auto 50px auto;
}
.contentt {
width: 1150px;
}
}
.error span {float:left;width:200px;font-size:13px;line-height:1.3}
.error #closebutton {width:25px;height:25px;display:block;float:right;background:#EEE url('img/errorclosebutton.png') 0 0 no-repeat;margin:-7px -7px 0 0;cursor:hand;cursor:pointer}
.gradientPanel {background-image:linear-gradient(to bottom, #D24FEC 0%, #B439DD 16%, var(--color-primary) 100%)}
/* ==========================================================================
.left / .right - Helper triedy pre layout
Poznámka: Tieto triedy sú prepisované v #control kontexte (styles2.css)
========================================================================== */
.left,
.right {
display: block;
width: 100%;
}
#control .control__filters {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
}
#control .control__filters-item {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
flex: 0 0 auto;
}
#control .control__filters-item--wide {
flex: 1 1 0;
min-width: 200px;
}
/* ==========================================================================
SELECT2 WIDTH OVERRIDES
NOTE: Select2 sets width via inline style. !important is required here.
TODO: Consider JS solution to remove inline width after Select2 init.
========================================================================== */
html body #control .control__filters-item--wide .select2-container {
flex: 1 1 auto;
width: 100% !important; /* Required: Select2 inline width */
min-width: 0;
}
#control .control__filters-label {
margin: 0;
font-weight: bold;
white-space: nowrap;
}
html body #control .control__filters .select2,
html body #control .control__filters .select2-container {
width: auto !important; /* Required: Select2 inline width */
min-width: 0;
flex: 0 0 auto;
}
#control .control__filters .select2-container .select2-selection--single {
width: auto;
min-width: 0;
}
#control .control__filters .select2-selection__rendered {
min-width: 0;
}
/* Prefer single-row filters on wide screens; wrap only on narrow */
@media (max-width: 800px) {
#control .control__filters { flex-wrap: wrap; }
}
/* Mobilné zobrazenie filtrov: prehľadné stohovanie a plná šírka */
@media (max-width: 680px) {
#control .control__filters {
flex-direction: column;
align-items: stretch;
gap: 10px;
flex-wrap: nowrap;
}
#control .control__filters-item {
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
}
#control .control__filters-label {
text-align: left;
font-size: 13px;
}
/* Selecty vo filtroch na 100% šírky */
#control .control__filters .select2,
#control .control__filters .select2-container {
width: 100% !important;
min-width: 0 !important;
flex: 1 1 auto;
}
#control .control__filters .select2-container .select2-selection--single {
width: 100% !important;
min-width: 0 !important;
}
/* Odstránenie minimálnych šírok, ktoré rozbíjali layout na mobile */
#control select#by + .select2,
#control #by + .select2,
#control select#id + .select2,
#control #id + .select2,
#control select#course_id + .select2,
#control #course_id + .select2 {
min-width: 0 !important;
}
/* Week navigation štýly presunuté do styles2.css */
}
/* Min widths for planner selects */
#control select#by { min-width: 130px; }
#control select#id { min-width: 200px; }
#control select#course_id { min-width: 160px; }
/* Ensure Select2-rendered controls respect the min widths above */
#control select#by + .select2,
#control #by + .select2,
#control select#by + .select2 .select2-selection--single { min-width: 130px !important; }
#control select#id + .select2,
#control #id + .select2,
#control select#id + .select2 .select2-selection--single { min-width: 240px !important; }
/* Courses select min width */
#control select#course_id + .select2,
#control #course_id + .select2,
#control select#course_id + .select2 .select2-selection--single { min-width: 160px !important; }
#control .control__filters-action {
white-space: nowrap;
font-size: 13px;
text-decoration: underline;
cursor: pointer;
}
h1 {width:100%;display:block;text-align:left;color:var(--color-primary);margin:10px 0 15px 0;font-size:25px}
h2 {width:100%;display:block;text-align:left}
h3 {width:100%;display:block;text-align:left;color:var(--color-primary)}
.noselectable {user-select:none}
.polalpha {opacity:0.9}
.jazda span, .jazdat span, .jazdad span, .volno span, .free span, .auto span, .storno span, .prestoj span {display:table-cell;vertical-align:middle}
.jazda {background-color:#ccffd7}
.jazda:hover {background-color:#78ff95}
.jazdad {background-color:#80FFFF}
.jazdad:hover {background-color:#BFFFFF}
.jazdat {background-color:#FFFF33}
.jazdat:hover {background-color:#ECEC00}
.volno, .storno {background-color:#ffcccc}
.volno:hover, .storno:hover {background-color:#ffb2b2}
.free {background-color:#FFF}
.free:hover {background-color:#EEE}
.auto {background-color:#ccffd7;cursor:default}
.block {background-color:#000;cursor:default;opacity:0.15}
.reserve {background-color:#bbe3fe}
.reserve:hover {background-color:#92d3ff}
.prestoj {background-color:#DF2E1B;color:#fff}
.prestoj:hover {background-color:#C42818;color:#fff}
.prestoj .studentarea, .prestoj .instruktorarea, .prestoj .infoarea,
.prestoj .studentareas, .prestoj .instruktorareas,
.prestoj .mestoarea, .prestoj .pocetjazdarea, .prestoj .vozikarea, .prestoj .cararea, .prestoj .poznamkaarea {color:#fff}
.reserve_admin {background-color:rgb(238,170,238)}
.reserve_admin:hover {background-color:orchid}
.reserve_instructor {background-color:rgb(247,186,74)}
.reserve_instructor:hover {background-color:darkorange}
.kondicna {background-color:#12826C;color:#fff}
.kondicna:hover {background-color:#107461;color:#fff}
.kondicna .studentarea, .kondicna .instruktorarea, .kondicna .infoarea,
.kondicna .studentareas, .kondicna .instruktorareas,
.kondicna .mestoarea, .kondicna .pocetjazdarea, .kondicna .vozikarea, .kondicna .cararea, .kondicna .poznamkaarea {color:#fff}
.doplnkova {background-color:#207AB7;color:#fff}
.doplnkova:hover {background-color:#1D6CA1;color:#fff}
.doplnkova .studentarea, .doplnkova .instruktorarea, .doplnkova .infoarea,
.doplnkova .studentareas, .doplnkova .instruktorareas,
.doplnkova .mestoarea, .doplnkova .pocetjazdarea, .doplnkova .vozikarea, .doplnkova .cararea, .doplnkova .poznamkaarea {color:#fff}
.trenazer {background-color:#9C27B0;color:#fff}
.trenazer:hover {background-color:#7B1FA2}
.trenazer .studentarea, .trenazer .instruktorarea, .trenazer .studentarea_time, .trenazer .viac_studentov_time, .trenazer a {color:#fff}
.nehoda {background-color:#B25E14 !important;color:#fff}
.nehoda:hover {background-color:#9B5211 !important;color:#fff}
.nehoda .studentarea, .nehoda .instruktorarea, .nehoda .infoarea,
.nehoda .studentareas, .nehoda .instruktorareas,
.nehoda .mestoarea, .nehoda .pocetjazdarea, .nehoda .vozikarea, .nehoda .cararea, .nehoda .poznamkaarea {color:#fff}
.porucha {background-color:#6B7778 !important;color:#fff}
.porucha:hover {background-color:#5D6768 !important;color:#fff}
.porucha .studentarea, .porucha .instruktorarea, .porucha .infoarea,
.porucha .studentareas, .porucha .instruktorareas,
.porucha .mestoarea, .porucha .pocetjazdarea, .porucha .vozikarea, .porucha .cararea, .porucha .poznamkaarea {color:#fff}
.kkv {background-color:#936F16;color:#fff}
.kkv:hover {background-color:#816213;color:#fff}
.kkv .studentarea, .kkv .instruktorarea, .kkv .studentareas, .kkv .instruktorareas, .kkv .infotext {color:#fff}
.pocetjazd {position:absolute;margin:7px 0 0 -4px;color:#BBB;font-size:10px;font-weight:normal}
span.mesto {width:20px;display:table-cell;vertical-align:middle;line-height:1.1;text-transform:uppercase}
span.instruktor {width:95px;display:table-cell;vertical-align:middle;text-align:right;padding:0 1px 0 0;line-height:1.1}
span.student {width:100%;display:table-cell;vertical-align:middle;text-align:center}
div.studentarea, div.studentareas {float:left;width:137px;height:17px;display:table-cell;vertical-align:middle;text-align:center;border-bottom:#CCC 1px solid;padding:2px 0 0 0;font-size:11px}
div.studentareas {padding:2px 0 0 0}
div.infoarea {float:left;width:155px;vertical-align:middle;box-sizing:border-box}
div.mestoarea {float:left;width:15px;height:13px;display:block;vertical-align:middle;text-transform:uppercase;font-size:9px;padding:2px 0 0 0;border-right:#CCC 1px solid;box-sizing:border-box}
div.pocetjazdarea {float:left;width:15px;height:13px;display:block;vertical-align:middle;font-size:9px;padding:2px 0 0 0;border-right:#CCC 1px solid;box-sizing:border-box}
div.vozikarea {float:left;width:11px;height:13px;display:block;vertical-align:middle;font-size:9px;padding:2px 0 0 0;border-right:#CCC 1px solid;box-sizing:border-box}
div.cararea {float:left;width: 15px;height:13px;display:block;vertical-align:middle;font-size:9px;padding:2px 0 0 0;border-right:#CCC 1px solid;box-sizing:border-box}
div.poznamkaarea {float:right;width:95px;display:block;vertical-align:middle;text-align:right;font-size:9px;padding:2px 0 0 0;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
div.instruktorarea, div.instruktorareas {float:right;width:17px;border-left:#CCC 1px solid;border-bottom:#CCC 1px solid;height:15px;padding:2px 0 0 0;text-transform:uppercase;font-size:10px}
div.instruktorareas {padding:2px 0 0 0}
.parentDisable {position:fixed;top:0;left:0;background:#000 url('img/loader.gif') center 30% no-repeat;background-size:56px 56px;opacity:0.5;z-index:10040;height:100%;width:100%}
.spanUp {position:relative;top:4px}
.hiddenheadline {display:none}
/* ==========================================================================
POPUP DIALOG - Mobile-First with Higher Specificity
========================================================================== */
/* Base dialog styles - mobile first */
html body .dialog {
display: flex;
justify-content: center;
position: fixed;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 16px);
top: 6vh;
max-height: 88vh;
height: auto;
overflow-y: auto;
overflow-x: hidden;
padding: 0;
background: #FFF;
border-radius: 5px;
border: 2px solid #cf4deb;
box-shadow: 0 26px 50px -22px rgba(115, 41, 140, 0.55);
z-index: 10050;
box-sizing: border-box;
}
/* Desktop dialog - wider */
@media (min-width: 768px) {
html body .dialog {
width: min(640px, calc(100% - 24px));
top: 8vh;
max-height: 86vh;
}
}
html body .dialog #close-but {
position: absolute;
top: 6px;
right: 6px;
width: 28px;
height: 28px;
display: block;
background: #FFF;
cursor: pointer;
float: right;
border: 2px solid #cf4deb;
border-radius: 50%;
box-shadow: 0 6px 14px -8px rgba(0,0,0,0.35);
z-index: 10060;
}
html body .dialog #close-but::after {
content: '\00D7';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--color-primary);
text-indent: 0;
}
html body .dialog #close-but:hover {
background: rgba(255,255,255,0.95);
}
html body .dialog #close-but:hover::after {
color: #4a1a5a;
}
/* Dialog content - mobile first */
html body .dialog #cont {
float: left;
width: 100%;
padding: 12px;
margin: 0;
text-align: left;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
max-height: calc(88vh - 24px);
padding-bottom: 72px; /* Space for sticky actions on mobile */
}
/* Desktop dialog content */
@media (min-width: 768px) {
html body .dialog #cont {
padding: 16px;
max-height: calc(86vh - 24px);
padding-bottom: 16px;
}
}
/* Pop-up wrapper - mobile allows scroll, desktop has min-width */
html body .dialog #cont > .pop-up-wrapper {
min-width: 0;
width: 100%;
}
@media (min-width: 768px) {
html body .dialog #cont > .pop-up-wrapper {
min-width: 600px;
}
}
html body .dialog #cont #warning {
width: 100%;
margin-top: 16px;
font-size: 17px;
color: var(--color-primary);
text-align: center;
}
html body .dialog #log {
float: right;
width: 100%;
margin-top: 5px;
font-size: 10px;
text-align: center;
color: var(--color-text-light);
}
/* Dialog heading - mobile first */
html body .dialog h3 {
width: 100%;
margin: 0 0 20px;
padding: 14px 22px;
font-size: 18px;
font-weight: bold;
color: #fff;
text-align: left;
background: var(--color-primary);
box-shadow: inset 0 -5px 12px rgba(0,0,0,0.18);
box-sizing: border-box;
}
@media (min-width: 768px) {
html body .dialog h3 {
margin: 0 0 26px;
padding: 18px 34px;
font-size: 20px;
text-align: center;
}
}
html body .dialog form {
display: block;
width: 100%;
}
/* ==========================================================================
POPUP FORM GRID - Mobile-First
Targets both .dialog form and .pop-up-wrapper form (AJAX loaded content)
global.css používa :where() s 0 špecificitou, takže tu netreba !important
========================================================================== */
/* Form grid - mobile first (single column) */
html body .dialog .pop-up-wrapper form > div,
html body .dialog form > div,
html body .pop-up-wrapper form > div {
display: grid;
grid-template-columns: 1fr;
align-items: center;
gap: 8px;
margin-bottom: 14px;
float: none;
width: 100%;
}
/* Desktop form grid (two columns): Label LEFT, Field RIGHT, vertically centered */
@media (min-width: 768px) {
html body .dialog .pop-up-wrapper form > div,
html body .dialog form > div,
html body .pop-up-wrapper form > div {
grid-template-columns: 110px minmax(0, 1fr);
gap: 16px;
align-items: center;
padding: 0 20px;
}
}
/* Actions row - centered, full width */
html body .dialog .pop-up-wrapper form > div.pop-up-wrapper__actions,
html body .dialog .pop-up-wrapper form > .pop-up-wrapper__actions,
html body .dialog form > div:last-child,
html body .pop-up-wrapper form > div.pop-up-wrapper__actions,
html body .pop-up-wrapper form > .pop-up-wrapper__actions {
margin-bottom: 0;
display: block;
text-align: center;
grid-column: 1 / -1;
}
/* Labels - LEFT aligned, vertically centered */
html body .dialog .pop-up-wrapper form > div > label,
html body .dialog form > div > label,
html body .pop-up-wrapper form > div > label {
width: auto;
float: none;
text-align: left;
justify-self: start;
padding: 0;
margin: 0;
}
/* Fields container - full width on right side */
html body .dialog .pop-up-wrapper form > div > span,
html body .dialog .pop-up-wrapper form > div > input,
html body .dialog .pop-up-wrapper form > div > select,
html body .dialog .pop-up-wrapper form > div > textarea,
html body .dialog .pop-up-wrapper form > div > .select2-container,
html body .dialog .pop-up-wrapper form > div > .select2-wrapper,
html body .dialog form > div > span,
html body .dialog form > div > input,
html body .dialog form > div > select,
html body .dialog form > div > textarea,
html body .dialog form > div > .select2-container,
html body .dialog form > div > .select2-wrapper,
html body .pop-up-wrapper form > div > span,
html body .pop-up-wrapper form > div > input,
html body .pop-up-wrapper form > div > select,
html body .pop-up-wrapper form > div > textarea,
html body .pop-up-wrapper form > div > .select2-container,
html body .pop-up-wrapper form > div > .select2-wrapper {
width: 100%;
float: none;
justify-self: start;
}
/* SpanUp in popup forms - reset float and position */
html body .dialog .pop-up-wrapper form > div > .spanUp,
html body .pop-up-wrapper form > div > .spanUp {
float: none;
width: 100%;
position: relative;
top: 0;
}
html body .dialog form > div > :nth-child(2) {
min-width: 0;
}
html body .dialog form div,
html body .dialog form div span {
float: none;
}
html body .dialog form span {
display: block;
}
html body .dialog .spanUp {
top: 2px;
}
html body .dialog form > div .spanUp {
justify-self: start;
margin: 0;
width: 100%;
float: none;
}
html body .dialog form > div.flex-span {
display: flex;
justify-content: flex-end;
align-items: center;
}
html body .dialog form > div.flex-span > span {
width: auto;
margin: 0;
}
html body .dialog label {
font-weight: bold;
}
/* Dialog inputs - mobile first (100% width) */
html body .dialog input[type='text'],
html body .dialog input[type='number'],
html body .dialog input[type='password'],
html body .dialog input[type='email'],
html body .dialog select,
html body .dialog textarea {
width: 100%;
height: 26px;
line-height: 26px;
padding: 0 10px;
border-radius: 0;
box-sizing: border-box;
background-color: #e9e9ed;
}
/* Desktop dialog inputs - 80% width */
@media (min-width: 768px) {
html body .dialog input[type='text'],
html body .dialog input[type='number'],
html body .dialog input[type='password'],
html body .dialog input[type='email'],
html body .dialog select,
html body .dialog textarea {
width: 80%;
}
}
/* Dialog Select2 - mobile first (100% width) */
html body .dialog .select2-container,
html body .dialog .select2-wrapper .select2 {
width: 100% !important; /* Required: Select2 uses inline width */
max-width: 100%;
}
/* Desktop dialog Select2 - 80% width */
@media (min-width: 768px) {
html body .dialog .select2-container,
html body .dialog .select2-wrapper .select2 {
width: 80% !important; /* Required: Select2 uses inline width */
max-width: 80%;
}
}
/* Native select for yes/no truck in dialogs should fit content */
html body .dialog select[name="truck"] {
width: fit-content;
min-width: 110px;
display: inline-block;
}
/* Compact width for short yes/no selects in dialogs */
html body .dialog select.select2-auto-width + .select2 {
display: inline-block;
width: fit-content !important; /* Required: Select2 inline width */
max-width: 100%;
}
html body .dialog select.select2-auto-width + .select2 .select2-selection--single {
width: auto;
}
html body .dialog select.select2-auto-width + .select2 .select2-selection__rendered {
width: auto;
}
/* Time and date rows - mobile first */
html body .dialog .time-row,
html body .dialog .date-row {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
@media (min-width: 768px) {
html body .dialog .time-row,
html body .dialog .date-row {
flex-wrap: nowrap;
}
}
html body .dialog .time-row .select2-wrapper,
html body .dialog .date-row .select2-wrapper {
width: auto;
}
/* Mobile: time row full width */
@media (max-width: 767px) {
html body .dialog .time-row .select2-wrapper {
width: 100%;
}
}
html body .dialog .time-select,
html body .dialog .time-select select,
html body .dialog .time-select .select2-container {
width: auto !important;
min-width: 90px;
}
html body .dialog .date-row .select2-container {
min-width: 70px;
}
html body .dialog .pop-up-wrapper__checkbox {
display: block;
text-align: center;
}
/* Checkbox pre odosielanie emailov - centrovane */
html body .dialog form > div:has(input[type="checkbox"]),
html body .pop-up-wrapper form > div:has(input[type="checkbox"]) {
display: block;
text-align: center;
grid-template-columns: 1fr;
}
html body .dialog form > div:has(input[type="checkbox"]) label,
html body .pop-up-wrapper form > div:has(input[type="checkbox"]) label {
display: inline;
width: auto;
text-align: center;
}
html body .dialog .dialog-state,
html body .student-state,
html body #dialog-state {
display: block !important;
margin-top: 8px;
font-size: 12px;
font-style: italic;
color: var(--color-primary);
text-align: center;
width: 100%;
}
html body .dialog .dialog-state--loading {
color: #5a1f6e;
}
html body .dialog .dialog-state--empty,
html body .dialog .dialog-state--error {
color: #a02cc7;
}
/* Default actions/links alignment in popups */
html body .dialog .pop-up-wrapper__actions,
html body .dialog .pop-up-wrapper__links,
html body .pop-up-wrapper .pop-up-wrapper__actions,
html body .pop-up-wrapper .pop-up-wrapper__links {
display: block;
text-align: center;
margin-bottom: 0;
position: static;
box-shadow: none;
padding: 0;
margin: 0;
}
/* Give links row a bit of spacing from content above */
html body .dialog .pop-up-wrapper__links,
html body .pop-up-wrapper .pop-up-wrapper__links {
margin-top: 8px;
}
/* Center by default */
html body .dialog .pop-up-wrapper__actions > span,
html body .dialog .pop-up-wrapper__links > span,
html body .pop-up-wrapper .pop-up-wrapper__actions > span,
html body .pop-up-wrapper .pop-up-wrapper__links > span {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
/* Right-aligned variant (use modifier class) */
html body .dialog .pop-up-wrapper__actions.pop-up-wrapper__actions--right,
html body .pop-up-wrapper .pop-up-wrapper__actions.pop-up-wrapper__actions--right,
html body .dialog .pop-up-wrapper__links.pop-up-wrapper__links--right,
html body .pop-up-wrapper .pop-up-wrapper__links.pop-up-wrapper__links--right {
text-align: center;
}
html body .dialog .pop-up-wrapper__actions.pop-up-wrapper__actions--right > span,
html body .pop-up-wrapper .pop-up-wrapper__actions.pop-up-wrapper__actions--right > span,
html body .dialog .pop-up-wrapper__links.pop-up-wrapper__links--right > span,
html body .pop-up-wrapper .pop-up-wrapper__links.pop-up-wrapper__links--right > span {
justify-content: center;
}
html body .dialog--crm {
padding: 16px 0 28px;
}
html body .dialog--crm #cont {
padding: 0 8px;
}
/* Mobile adjustments already handled by mobile-first approach above */
.plan--disabled {
pointer-events: none;
cursor: default;
}
.plan--disabled .calendar-disabled__cell {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: #f5f5f5;
color: var(--color-primary);
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.calendar-disabled-message {
margin: 18px 0;
padding: 12px 16px;
background: #f5e6ff;
border: 1px dashed #a757c4;
color: var(--color-primary);
text-align: center;
font-weight: bold;
border-radius: 6px;
clear: both; /* ensure it sits below floated filters */
}
/* ==========================================================================
POP-UP WRAPPER - Mobile-First
========================================================================== */
/* Pop-up wrapper Select2 - mobile first (100% width) */
html body .pop-up-wrapper .select2-container,
html body .pop-up-wrapper .select2-wrapper .select2 {
width: 100% !important; /* Required: Select2 inline width */
max-width: 100%;
}
/* Desktop pop-up wrapper Select2 - 80% width */
@media (min-width: 768px) {
html body .pop-up-wrapper .select2-container,
html body .pop-up-wrapper .select2-wrapper .select2 {
width: 80% !important; /* Required: Select2 inline width */
max-width: 80%;
}
}
/* Compact yes/no Select2 in popup wrapper */
html body .pop-up-wrapper select.select2-auto-width + .select2 {
display: inline-block;
width: fit-content !important; /* Required: Select2 inline width */
max-width: 100%;
}
html body .pop-up-wrapper select.select2-auto-width + .select2 .select2-selection--single,
html body .pop-up-wrapper select.select2-auto-width + .select2 .select2-selection__rendered {
width: auto;
}
/* Compact native yes/no where Select2 is not used */
html body .pop-up-wrapper select[name="truck"] {
width: fit-content;
min-width: 110px;
display: inline-block;
}
/* Storno warning - menší text */
.ride-cancel-student__warning {
grid-column: 1 / -1;
font-size: 11px;
line-height: 1.4;
color: #c0392b;
padding: 6px 10px;
margin-top: 4px;
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
box-sizing: border-box;
}
.ride-cancel-student__warning strong {
font-weight: 600;
}
/* Student popup - menšia medzera pod h3 */
.ride-plan-student h3,
.ride-cancel-student h3 {
margin-bottom: 14px;
}
@media (min-width: 768px) {
.ride-plan-student h3,
.ride-cancel-student h3 {
margin-bottom: 16px;
}
}
/* Note: Mobile responsive adjustments are now handled by mobile-first approach above */
/* === styles2.css === */
/**
* ==========================================================================
* STYLES2.CSS - Legacy Styles & Calendar Fallback
* ==========================================================================
*
* Dependencies: global.css
*
* Contents:
* 1. List layouts (#list, #riadok)
* 2. Print button
* 3. Calendar fallback (hlavné štýly sú v calendar.css)
* 4. Error messages
*
* NOTE: Toto sú legacy štýly. Nové komponenty používajú moderné CSS.
* DEPRECATION: Postupne migrovať do calendar.css a komponentových súborov.
* ==========================================================================
*/
/* ==========================================================================
1. LIST LAYOUTS (Legacy)
========================================================================== */
#list {width:100%;float:left;display:block}
#list #riadok {width:100%;float:left;display:block;border-bottom:var(--color-primary) 1px dotted;padding:4px}
#list #riadok:hover {background-color:#EEE}
#list .riadok-extra-ride {background-color:#e74c3c !important;color:#fff !important;border-bottom-color:#c0392b}
#list .riadok-extra-ride:hover {background-color:#c0392b !important}
#list .riadok-extra-ride div {color:#fff !important}
#list #riadok #id, #list #riadok #skratka {width:60px;float:left}
#list #riadok #meno {width:400px;float:left;text-align:left;display:block}
#list #riadok #oznacenie, #list #riadok #ec, #list #riadok #celemeno {width:150px;float:left;text-align:left;display:block}
#list #riadok #mobil {width:150px;float:left;text-align:left;display:block;padding-left:4px}
#list #riadok #email {width:50px;float:left;text-align:left;display:block}
#list #riadok #active {width:80px;float:right;text-align:left;padding-left:4px}
#list #riadok #act {float:right}
#list #riadok #act a {text-decoration:none;color:#333}
#list #riadok #act a:hover {text-decoration:underline;color:var(--color-primary)}
#print {width:52px;float:left;display:block}
#print img {margin:7px 0 0 0;opacity:0.7}
#print img:hover {opacity:1}
/* ==========================================================================
#CALENDAR - Legacy fallback styles (hlavné štýly sú v calendar.css)
========================================================================== */
#calendar, #calendar #hlavicka {width:100%;float:left;display:block}
#calendar #hlavicka .den {color:#FFF;font-weight:bolder;min-width:155px;float:left;display:block;border:var(--color-primary) 1px solid;border-radius:5px 5px 0 0;background-image: linear-gradient(to bottom, #B83CDE 0%, var(--color-primary) 100%);padding:2px 0 3px 0}
#calendar #hlavicka .den span {font-size:11px;font-weight:normal}
#calendar #hodiny {width:52px;float:left;display:block}
#calendar #hodiny .hodina {width:50px;height:34px;font:bold 12px Arial,Helvetica,sans-serif;color:#FFF;padding:0 0 0 0;float:left;display:block;border:var(--color-primary) 1px solid;border-radius:5px 0 0 5px;background:#b83cde;background:linear-gradient(to right, #b83cde 0%,var(--color-primary) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b83cde', endColorstr='var(--color-primary)',GradientType=1 );box-sizing:border-box}
#calendar #hodiny .hodina span {float:left;margin:2px 0 0 10px;line-height:1.2}
#calendar #stlpce {float:left}
#calendar #stlpce .stlpec {min-width:155px;float:left;display:block;border-left:#999 1px solid}
#calendar #stlpce .stlpec .plan {height:34px;width:155px;display:flex;align-items:center;float:left;clear:both;border-bottom:#999 1px solid;font-size:95%;vertical-align:middle;box-sizing:border-box;overflow:hidden}
#calendar #stlpce .stlpec .plans {height:34px;width:155px;display:flex;align-items:center;float:left;clear:both;border-bottom:#999 1px solid;font-size:95%;vertical-align:middle;box-sizing:border-box;overflow:hidden}
#calendar #hlavicka6, #calendar #hlavicka7 {
}
/* ==========================================================================
#CONTROL - Mobile-First
========================================================================== */
/* Base = Mobile - stacked vertikálne */
#control {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
margin: 0 0 8px 0;
}
#control > .left {
width: 100%;
}
/* ==========================================================================
RIGHT PANEL - Week Navigation (28px výška ako ostatné prvky)
========================================================================== */
#control > .right {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
/* Week navigation šípky - 28px výška */
#week-left, #week-right {
float: none;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
margin: 0;
background: #fff;
border: 1px solid var(--color-primary);
border-radius: 4px;
transition: background 0.15s ease;
}
#week-left:hover, #week-right:hover {
background: #f3e8f7;
}
#week-left img, #week-right img {
width: 16px;
height: auto;
}
/* Číslo týždňa */
#week-number {
float: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
color: var(--color-primary);
min-width: 30px;
height: 28px;
margin: 0 2px;
}
/* Label "týždeň:" */
#week-label {
float: none;
display: flex;
align-items: center;
color: #333;
font-size: 13px;
height: 28px;
margin: 0 4px 0 0;
}
/* Správne poradie: label | ← | číslo | → */
#week-label { order: 1; }
#week-left { order: 2; }
#week-number { order: 3; }
#week-right { order: 4; }
/* ==========================================================================
DESKTOP - Vedľa seba
========================================================================== */
@media (min-width: 1024px) {
#control {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
}
#control > .left {
flex: 1 1 auto;
width: auto;
}
#control > .right {
flex: 0 0 auto;
width: auto;
justify-content: flex-end;
}
}
/* Legacy behavior: no responsive calendar scrolling */
#calendar { overflow-x: visible; }
/* Week navigation štýly presunuté do #CONTROL sekcie vyššie */
/* ==========================================================================
#LEGENDA - Responsive
========================================================================== */
#legenda {
width: 100%;
max-width: 1152px;
float: left;
text-align: left;
margin: 3px 0 0 0;
box-sizing: border-box;
}
#legenda table {
width: 100%;
border-collapse: collapse;
}
#legenda td {
padding: 4px 8px;
font-size: 13px;
}
/* Mobile - stack vertically */
@media (max-width: 767px) {
#legenda table,
#legenda tbody,
#legenda tr,
#legenda td {
display: block;
width: 100%;
}
#legenda tr {
margin-bottom: 8px;
}
#legenda td {
padding: 6px 10px;
}
}
#legenda img {position:relative;top:3px}
/* ==========================================================================
#ANNOUNCEMENT BANNER - Responsive
========================================================================== */
.announcement-banner {
text-align: center;
background: rgb(116, 42, 141);
color: white;
margin: 0 auto;
width: 100%;
max-width: 1000px;
padding: 5px 15px;
box-sizing: border-box;
}
.announcement-banner--first {
padding-top: 20px;
line-height: 1.5;
}
.announcement-banner--last {
padding-bottom: 20px;
}
@media (min-width: 1024px) {
.announcement-banner {
width: 50%;
min-width: 1000px;
}
}
#instructors {width:100%;float:left;margin:15px 0 0 0}
#instructors div {float:left;width:300px;margin:0 0 5px 0}
#instructors div img {float:left; width: 100px; height: auto;}
#instructors div span {float:right;text-align:left;width:185px;margin:10px 0 0 0}
#instruktori {float:left;width:100%;margin:10px 0 0 0;font-size:11px}
#instruktori div {float:left;width:220px;margin:0 10px 5px 0;border:#CCC 1px solid;padding:2px}
#instruktori div .short {float:left;width:25px;font-weight:bold;text-transform:uppercase}
#instruktori div .fullname {float:left}
#instruktori div .phone {float:right}
/* === calendar.css === */
/**
* CALENDAR - Mobile-First Responsive Styles
* Created: 2026-01-28
* Refactored: 2026-01-28
*
* MOBILE-FIRST: Base styles pre mobile, min-width queries pre tablet/desktop.
* Povodny layout zo styles2.css zostava ako fallback.
*
* ROLLBACK: Zakomentuj tento subor v index.php
*/
/* ==========================================================================
CALENDAR ZOOM CONTROLS (Mobile only)
========================================================================== */
.calendar-zoom {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
margin-bottom: 8px;
background: #f5f5f5;
border-radius: 6px;
}
.calendar-zoom__label {
font-size: 13px;
font-weight: 600;
color: var(--color-primary);
}
.calendar-zoom__slider {
flex: 1;
height: 20px;
cursor: pointer;
}
.calendar-zoom__level {
min-width: 40px;
text-align: right;
font-size: 13px;
font-weight: 700;
color: var(--color-primary);
}
/* Skryť na desktop */
@media (min-width: 1024px) {
.calendar-zoom {
display: none;
}
}
/* ==========================================================================
CSS CUSTOM PROPERTIES
========================================================================== */
:root {
/* Rozmery - Calendar */
/* WEEK VIEW: Rovnaké rozmery na všetkých zariadeniach, horizontálny scroll na mobile */
--calendar-width-mobile: 1200px;
--calendar-width-tablet: 1200px;
--calendar-width-desktop: 1200px;
/* Rozmery - Bunky */
/* WEEK VIEW: Desktop šírka na všetkých zariadeniach aby sa údaje neorezávali */
--calendar-cell-width-mobile: 155px;
--calendar-cell-width-tablet: 155px;
--calendar-cell-width-desktop: 155px;
/* Rozmery - Hodiny stlpec */
--calendar-hours-width-mobile: 52px;
--calendar-hours-width-tablet: 52px;
--calendar-hours-width-desktop: 52px;
/* Rozmery - Bunka vyska */
--calendar-cell-height: 34px;
--calendar-hour-height: 34px;
/* Farby - Typy jazd (povodne pastelove) */
--calendar-color-ride: #c0e8a0;
--calendar-color-reserved: #a0d0f0;
--calendar-color-cancelled: #f0c0c0;
--calendar-color-blocked: #e8e8e8;
--calendar-color-free: #ffffff;
/* Farby - Header gradient */
--calendar-header-gradient-start: #B83CDE;
--calendar-header-gradient-end: var(--color-primary);
--calendar-header-border: var(--color-primary);
}
/* ==========================================================================
BASE STYLES (MOBILE - pod 768px)
========================================================================== */
/* Mobile: kalendár má fixnú šírku a scrolluje horizontálne v .content wrapperi */
#calendar {
width: 1200px; /* fallback pre iOS < 11 */
width: var(--calendar-width-mobile);
min-width: 1200px; /* fallback pre iOS < 11 */
min-width: var(--calendar-width-mobile);
box-sizing: border-box;
}
/* ==========================================================================
iOS SAFARI FIX - Staré iOS (iPhone 5/6/SE)
Kalendár má VŽDY 1200px šírku s horizontálnym scrollom.
Nepoužívame menšie šírky ktoré rozbíjajú float layout.
========================================================================== */
#calendar #hlavicka {
width: 100%;
box-sizing: border-box;
}
/* Hlavicka - dni */
#calendar #hlavicka .den,
#calendar .calendar__day-header {
min-width: 155px; /* fallback */
min-width: var(--calendar-cell-width-mobile);
}
/* Hodiny stlpec */
#calendar #hodiny,
#calendar .calendar__hours {
width: 52px; /* fallback */
width: var(--calendar-hours-width-mobile);
}
#calendar #hodiny .hodina,
#calendar .calendar__hour {
width: 52px; /* fallback */
width: var(--calendar-hours-width-mobile);
}
/* Print button */
#calendar #print,
#calendar .calendar__print {
width: 52px; /* fallback */
width: var(--calendar-hours-width-mobile);
}
/* Stlpce */
#calendar #stlpce .stlpec,
#calendar .calendar__column {
min-width: 155px; /* fallback */
min-width: var(--calendar-cell-width-mobile);
}
/* Bunky */
#calendar #stlpce .stlpec .plan,
#calendar #stlpce .stlpec .plans,
#calendar .calendar__cell {
width: 155px; /* fallback */
width: var(--calendar-cell-width-mobile);
}
/* Week controls - mobile */
#week-number,
.calendar-control__week-number {
font-size: 16px;
}
#week-label,
.calendar-control__week-label {
font-size: 11px;
}
/* ==========================================================================
TABLET (768px - 1023px)
========================================================================== */
@media (min-width: 768px) {
#calendar {
width: var(--calendar-width-tablet);
min-width: var(--calendar-width-tablet);
}
#calendar #hlavicka .den,
#calendar .calendar__day-header {
min-width: var(--calendar-cell-width-tablet);
}
#calendar #hodiny,
#calendar .calendar__hours {
width: var(--calendar-hours-width-tablet);
}
#calendar #hodiny .hodina,
#calendar .calendar__hour {
width: var(--calendar-hours-width-tablet);
}
#calendar #print,
#calendar .calendar__print {
width: var(--calendar-hours-width-tablet);
}
#calendar #stlpce .stlpec,
#calendar .calendar__column {
min-width: var(--calendar-cell-width-tablet);
}
#calendar #stlpce .stlpec .plan,
#calendar #stlpce .stlpec .plans,
#calendar .calendar__cell {
width: var(--calendar-cell-width-tablet);
}
#week-number,
.calendar-control__week-number {
font-size: 18px;
}
#week-label,
.calendar-control__week-label {
font-size: 12px;
}
}
/* ==========================================================================
DESKTOP (1024px+)
========================================================================== */
@media (min-width: 1024px) {
#calendar {
width: var(--calendar-width-desktop);
min-width: var(--calendar-width-desktop);
}
#calendar #hlavicka .den,
#calendar .calendar__day-header {
min-width: var(--calendar-cell-width-desktop);
}
#calendar #hodiny,
#calendar .calendar__hours {
width: var(--calendar-hours-width-desktop);
}
#calendar #hodiny .hodina,
#calendar .calendar__hour {
width: var(--calendar-hours-width-desktop);
}
#calendar #print,
#calendar .calendar__print {
width: var(--calendar-hours-width-desktop);
}
#calendar #stlpce .stlpec,
#calendar .calendar__column {
min-width: var(--calendar-cell-width-desktop);
}
#calendar #stlpce .stlpec .plan,
#calendar #stlpce .stlpec .plans,
#calendar .calendar__cell {
width: var(--calendar-cell-width-desktop);
}
#week-number,
.calendar-control__week-number {
font-size: 20px;
}
#week-label,
.calendar-control__week-label {
font-size: 14px;
}
}
/* ==========================================================================
VSEOBECNE VYLEPSENIA (vsetky viewporty)
========================================================================== */
/* Pointer cursor pre klikatelne bunky */
#calendar #stlpce .stlpec .plan,
#calendar #stlpce .stlpec .plans,
#calendar .calendar__cell {
cursor: pointer;
transition: filter 0.15s ease;
/* iOS Safari touch support */
-webkit-tap-highlight-color: rgba(139, 63, 182, 0.3);
}
#calendar #stlpce .stlpec .plan:hover,
#calendar #stlpce .stlpec .plans:hover,
#calendar .calendar__cell:hover {
filter: brightness(0.95);
}
/* Disabled bunky */
#calendar #stlpce .stlpec .plan.plan--disabled,
#calendar #stlpce .stlpec .plans.plan--disabled,
#calendar .calendar__cell--disabled {
cursor: not-allowed;
background: #f8f8f8;
}
#calendar #stlpce .stlpec .plan.plan--disabled:hover,
#calendar .calendar__cell--disabled:hover {
filter: none;
}
/* Centrovanie textu v bunkach */
#calendar #stlpce .stlpec .plan,
#calendar #stlpce .stlpec .plans,
#calendar .calendar__cell {
justify-content: center;
text-align: center;
}
/* Parne bunky - border-bottom (namiesto inline stylov) */
#calendar .calendar__cell--even,
#calendar #stlpce .stlpec .plan:nth-child(even) {
border-bottom: 1px solid #000;
}
/* Disabled message */
.calendar-disabled-message {
padding: 12px 16px;
margin-bottom: 12px;
background: #fff3cd;
border: 1px solid #ffc107;
border-radius: 6px;
color: #856404;
font-weight: 500;
text-align: center;
}
/* Disabled cell text */
#calendar .calendar-disabled__cell {
color: #aaa;
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
text-align: center;
}
/* ==========================================================================
BEM TRIEDY PRE TYPY JAZD (buducnost)
Tieto triedy budu pouzite po migraci templates
========================================================================== */
.calendar__cell--ride {
background-color: var(--calendar-color-ride);
}
.calendar__cell--additional {
background-color: var(--calendar-color-additional);
}
.calendar__cell--reserved {
background-color: var(--calendar-color-reserved);
}
.calendar__cell--cancelled {
background-color: var(--calendar-color-cancelled);
}
.calendar__cell--blocked {
background-color: var(--calendar-color-blocked);
}
.calendar__cell--free {
background-color: var(--calendar-color-free);
}
.calendar__cell--extra-ride { background-color: #DF2E1B; color: #fff; }
.calendar__cell--extra-ride:hover { background-color: #C42818; }
.calendar__cell--extra-ride .calendar__student,
.calendar__cell--extra-ride .calendar__instructor,
.calendar__cell--extra-ride .calendar__info { color: #fff; }
.calendar__cell--blocked-prestoj,
.blocked_prestoj { background-color: #A66908; color: #fff; }
.calendar__cell--blocked-prestoj:hover,
.blocked_prestoj:hover { background-color: #925D07; }
.calendar__cell--blocked-prestoj .calendar__student,
.calendar__cell--blocked-prestoj .calendar__instructor,
.calendar__cell--blocked-prestoj .calendar__info { color: #fff; }
.calendar__cell--kondicna { background-color: #12826C; color: #fff; }
.calendar__cell--kondicna:hover { background-color: #107461; }
.calendar__cell--kondicna .calendar__student,
.calendar__cell--kondicna .calendar__instructor,
.calendar__cell--kondicna .calendar__info { color: #fff; }
.calendar__cell--doplnkova { background-color: #207AB7; color: #fff; }
.calendar__cell--doplnkova:hover { background-color: #1D6CA1; }
.calendar__cell--doplnkova .calendar__student,
.calendar__cell--doplnkova .calendar__instructor,
.calendar__cell--doplnkova .calendar__info { color: #fff; }
.calendar__cell--nehoda { background-color: #B25E14; color: #fff; }
.calendar__cell--nehoda:hover { background-color: #9B5211; }
.calendar__cell--nehoda .calendar__student,
.calendar__cell--nehoda .calendar__instructor,
.calendar__cell--nehoda .calendar__info { color: #fff; }
.calendar__cell--porucha { background-color: #6B7778; color: #fff; }
.calendar__cell--porucha:hover { background-color: #5D6768; }
.calendar__cell--porucha .calendar__student,
.calendar__cell--porucha .calendar__instructor,
.calendar__cell--porucha .calendar__info { color: #fff; }
/* Trenažér */
.calendar__cell--trenazer {
background-color: #9C27B0;
color: #fff;
}
.calendar__cell--trenazer:hover {
background-color: #7B1FA2;
}
.calendar__cell--trenazer .calendar__ride-name,
.calendar__cell--trenazer .calendar__ride-info,
.calendar__cell--trenazer .calendar__ride-type {
color: #fff;
}
/* KKV jazda */
.calendar__cell--kkv { background-color: #936F16; color: #fff; }
.calendar__cell--kkv:hover { background-color: #816213; }
.calendar__cell--kkv .calendar__student,
.calendar__cell--kkv .calendar__instructor,
.calendar__cell--kkv .calendar__info { color: #fff; }
/* ==========================================================================
DAY VIEW MODE (Prepínač týždeň/deň - všetky zariadenia)
========================================================================== */
/* Toggle button container - viditeľné na všetkých zariadeniach */
.calendar-view-toggle {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
/* Toggle buttons container */
.calendar-view-toggle__buttons {
display: flex;
gap: 8px;
}
/* Toggle buttons */
.calendar-view-toggle__btn {
padding: 8px 16px;
border: 1px solid var(--color-primary);
background: #fff;
color: var(--color-primary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease;
min-height: 44px;
}
.calendar-view-toggle__btn:hover {
background: #f5e6fa;
}
.calendar-view-toggle__btn--active {
background: var(--color-primary);
color: #fff;
}
.calendar-view-toggle__btn--active:hover {
background: #5a1f6d;
}
/* Day navigation (viditelne len v day view) */
.calendar-day-nav {
display: none;
flex-direction: column;
gap: 8px;
margin-top: 12px;
width: 100%;
}
.calendar-day-nav--visible {
display: flex;
}
/* Day dropdown */
.calendar-day-nav__day-select {
position: relative;
width: 100%;
}
.calendar-day-nav__dropdown-btn {
width: 100%;
min-height: 44px;
padding: 10px 16px;
border: 1px solid var(--color-primary);
background: #fff;
color: #333;
font-size: 15px;
font-weight: 500;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.2s ease;
}
.calendar-day-nav__dropdown-btn:hover {
background: #f5e6fa;
}
.calendar-day-nav__dropdown-icon {
font-size: 12px;
color: var(--color-primary);
transition: transform 0.2s ease;
}
.calendar-day-nav__dropdown-btn.active .calendar-day-nav__dropdown-icon {
transform: rotate(180deg);
}
.calendar-day-nav__dropdown-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 4px;
background: #fff;
border: 1px solid var(--color-primary);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.2s ease;
z-index: 1000;
}
.calendar-day-nav__dropdown-menu.active {
max-height: 400px;
opacity: 1;
}
.calendar-day-nav__dropdown-item {
width: 100%;
padding: 12px 16px;
border: none;
background: #fff;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
transition: background 0.15s ease;
}
.calendar-day-nav__dropdown-item:last-child {
border-bottom: none;
}
.calendar-day-nav__dropdown-item:hover {
background: #f5e6fa;
}
.calendar-day-nav__dropdown-item--active {
background: var(--color-primary);
color: #fff;
}
.calendar-day-nav__dropdown-item--active:hover {
background: #5a1f6d;
}
.calendar-day-nav__dropdown-day {
font-weight: 600;
font-size: 14px;
}
.calendar-day-nav__dropdown-date {
font-size: 13px;
opacity: 0.8;
}
/* ==========================================================================
DAY VIEW MODE - Všetky zariadenia
Higher specificity to override inline styles from JS
========================================================================== */
/* V day view mode skryt vsetky stlpce */
html body .calendar--day-view #stlpce .stlpec,
html body .calendar--day-view .calendar__column {
display: none;
}
/* Zobrazit len aktivny stlpec */
html body .calendar--day-view #stlpce .stlpec.calendar__column--active,
html body .calendar--day-view .calendar__column.calendar__column--active {
display: block;
}
/* Skryt hlavicku dni okrem aktivnej */
html body .calendar--day-view #hlavicka .den,
html body .calendar--day-view .calendar__day-header {
display: none;
}
html body .calendar--day-view #hlavicka .den.calendar__day-header--active,
html body .calendar--day-view .calendar__day-header.calendar__day-header--active {
display: block;
}
/* Desktop day view - zachovat povodne rozmery buniek */
html body .calendar--day-view #stlpce .stlpec.calendar__column--active {
width: var(--calendar-cell-width-desktop);
min-width: var(--calendar-cell-width-desktop);
}
html body .calendar--day-view #hlavicka .den.calendar__day-header--active {
width: var(--calendar-cell-width-desktop);
min-width: var(--calendar-cell-width-desktop);
}
/* Day view - šírka na 100%, štýly buniek zostávajú rovnaké ako week view */
html body .calendar--day-view {
width: 100%;
max-width: 100%;
min-width: 100%;
}
html body .calendar--day-view #stlpce {
width: calc(100% - 52px);
}
html body .calendar--day-view #stlpce .stlpec.calendar__column--active {
width: 100%;
min-width: 100%;
box-sizing: border-box;
}
html body .calendar--day-view #hlavicka .den.calendar__day-header--active {
width: calc(100% - 52px);
min-width: calc(100% - 52px);
box-sizing: border-box;
}
html body .calendar--day-view #stlpce .stlpec.calendar__column--active .plan,
html body .calendar--day-view #stlpce .stlpec.calendar__column--active .plans {
width: 100%;
min-width: 100%;
box-sizing: border-box;
}
/* ==========================================================================
STICKY HOURS COLUMN (Mobile + Tablet only)
Hodiny zostávajú fixné vľavo pri horizontálnom scrollovaní
Scroll container je #calendar
Vyžaduje .calendar__body wrapper okolo #hodiny a #stlpce
========================================================================== */
@media (max-width: 1023px) {
/* Calendar container - scrollable, not the whole page */
#calendar {
width: 100% !important;
min-width: 0 !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Content wrapper should not scroll horizontally */
.content {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100vw !important;
margin-bottom: 50px;
}
/* Calendar inner content keeps its width */
#calendar #hlavicka,
#calendar .calendar__body,
.calendar__body {
min-width: 1200px;
}
/* Flex layout for calendar body (columns + hours side by side) */
#calendar .calendar__body,
.calendar__body {
display: flex;
flex-direction: row;
}
/* Hours column - sticky left within #calendar scroll */
#calendar .calendar__body #hodiny,
#calendar .calendar__body .calendar__hours,
.calendar__body #hodiny,
.calendar__body .calendar__hours {
position: sticky;
left: 0;
z-index: 10;
background: linear-gradient(to bottom, #B83CDE 0%, var(--color-primary) 100%);
box-shadow: 2px 0 4px rgba(0,0,0,0.15);
flex-shrink: 0;
}
/* Columns should not shrink */
#calendar .calendar__body #stlpce,
#calendar .calendar__body .calendar__columns,
.calendar__body #stlpce,
.calendar__body .calendar__columns {
flex-shrink: 0;
}
}
/* ==========================================================================
PRINT
========================================================================== */
@media print {
#calendar #print,
#calendar .calendar__print {
display: none;
}
#control,
.calendar-control {
display: none;
}
/* V printe vzdy week view */
.calendar-view-toggle {
display: none;
}
.calendar--day-view #stlpce .stlpec,
.calendar--day-view .calendar__column,
.calendar--day-view #hlavicka .den,
.calendar--day-view .calendar__day-header {
display: block;
}
}
/* ==========================================================================
NOTIFICATION HIGHLIGHT - Pulzujúci border na stĺpci z notifikácie
Používa ::after overlay - neovplyvňuje layout, viditeľný nad obsahom
========================================================================== */
@keyframes calendar-highlight-pulse {
0% { opacity: 1; }
50% { opacity: 0.2; }
100% { opacity: 1; }
}
.calendar-highlight {
position: relative;
}
.calendar-highlight::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid rgba(123, 45, 142, 0.7);
pointer-events: none;
z-index: 10;
animation: calendar-highlight-pulse 1s ease-in-out 5;
}
#hlavicka .den.calendar-highlight {
background: rgba(123, 45, 142, 0.08);
}
/* Cell-level highlight - červený rámik na konkrétnej bunke z notifikácie */
@keyframes calendar-cell-highlight-pulse {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}
.calendar-cell-highlight {
position: relative;
}
.calendar-cell-highlight::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 3px solid rgba(220, 53, 69, 0.9);
pointer-events: none;
z-index: 12;
animation: calendar-cell-highlight-pulse 0.8s ease-in-out 6;
}
.prestoj.calendar-cell-highlight::after,
.calendar__cell--extra-ride.calendar-cell-highlight::after,
.trenazer.calendar-cell-highlight::after,
.calendar__cell--trenazer.calendar-cell-highlight::after,
.kondicna.calendar-cell-highlight::after,
.calendar__cell--kondicna.calendar-cell-highlight::after,
.doplnkova.calendar-cell-highlight::after,
.calendar__cell--doplnkova.calendar-cell-highlight::after,
.nehoda.calendar-cell-highlight::after,
.calendar__cell--nehoda.calendar-cell-highlight::after,
.porucha.calendar-cell-highlight::after,
.calendar__cell--porucha.calendar-cell-highlight::after,
.kkv.calendar-cell-highlight::after,
.calendar__cell--kkv.calendar-cell-highlight::after {
border-color: rgba(255, 255, 255, 0.95);
}
/* ==========================================================================
CAR BLOCK LABEL
========================================================================== */
.calendar__block-label {
font-size: 10px;
font-weight: bold;
color: #fff;
text-align: center;
display: block;
padding: 2px 0;
}
/* ============================================================
Calendar redirect banner — info block po presune jazdy/plánu
============================================================ */
.calendar-redirect-banner {
margin: 8px 0;
padding: 0;
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
border: 1px solid #ffc107;
border-left: 4px solid #ffc107;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(255, 193, 7, 0.15);
animation: calendarRedirectSlideIn 0.35s ease-out;
}
.calendar-redirect-banner__inner {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
font-size: 13px;
color: #856404;
flex-wrap: wrap;
}
.calendar-redirect-banner__icon {
font-size: 18px;
font-weight: bold;
color: #856404;
flex-shrink: 0;
}
.calendar-redirect-banner__msg {
flex: 1 1 auto;
min-width: 0;
line-height: 1.4;
}
.calendar-redirect-banner__msg strong {
color: #5d4500;
}
.calendar-redirect-banner__link {
display: inline-block;
padding: 5px 14px;
background: #742A8D;
color: #fff !important;
text-decoration: none;
border-radius: 4px;
font-weight: 600;
font-size: 12px;
box-shadow: 0 1px 3px rgba(116, 42, 141, 0.3);
transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
flex-shrink: 0;
}
.calendar-redirect-banner__link:hover {
background: #5b1f70;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(116, 42, 141, 0.4);
}
.calendar-redirect-banner__link:active {
transform: translateY(0);
}
.calendar-redirect-banner__close {
background: transparent;
border: none;
color: #856404;
font-size: 22px;
line-height: 1;
cursor: pointer;
padding: 0 6px;
flex-shrink: 0;
opacity: 0.6;
transition: opacity 0.12s;
}
.calendar-redirect-banner__close:hover {
opacity: 1;
}
@keyframes calendarRedirectSlideIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
.calendar-redirect-banner__inner {
gap: 8px;
padding: 8px 10px;
font-size: 12px;
}
.calendar-redirect-banner__link {
padding: 4px 10px;
font-size: 11px;
}
}
/* ===== Focus highlight (z URL ?focus=DAY-HOUR, napr. backride_requests link) ===== */
.calendar__cell--focused {
animation: calendar-cell-focus-pulse 1.2s ease-in-out 4;
outline: 3px solid #1976d2;
outline-offset: -3px;
box-shadow: 0 0 12px rgba(25, 118, 210, 0.6);
position: relative;
z-index: 5;
}
@keyframes calendar-cell-focus-pulse {
0%, 100% { outline-color: #1976d2; }
50% { outline-color: #ff9800; }
}
/* ===== Plan refresh banner (cross-tab notification) ===== */
.plan-refresh-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fff3cd;
border-bottom: 2px solid #ffc107;
color: #856404;
padding: 10px 16px;
z-index: 9999;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.plan-refresh-banner__btn {
background: #ffc107;
border: none;
padding: 5px 14px;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
color: #1a1a1a;
}
.plan-refresh-banner__btn:hover {
background: #ffb300;
}
.plan-refresh-banner__close {
margin-left: auto;
background: transparent;
border: none;
color: #856404;
cursor: pointer;
font-size: 20px;
line-height: 1;
padding: 0 4px;
}
/* === toast.css === */
/**
* Toast Notification Styles
* Modern notification system for OnlinePlanovac
*
* @author OnlinePlanovac Team
* @version 1.0.0
*/
/* Container - vpravo dole */
.toast-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column-reverse; /* Nové toasty idú nahor */
gap: 12px;
pointer-events: none;
max-width: 400px;
}
/* Toast base styles */
.toast {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
padding: 16px;
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 300px;
max-width: 400px;
position: relative;
overflow: hidden;
pointer-events: auto;
opacity: 0;
transform: translateY(100px); /* Animácia zdola */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast.toast-show {
opacity: 1;
transform: translateY(0);
}
.toast.toast-hide {
opacity: 0;
transform: translateY(100px);
}
/* Toast types */
.toast-success {
border-left: 4px solid #10b981;
}
.toast-success .toast-icon {
color: #10b981;
background: #d1fae5;
}
.toast-error {
border-left: 4px solid #ef4444;
}
.toast-error .toast-icon {
color: #ef4444;
background: #fee2e2;
}
.toast-info {
border-left: 4px solid #3b82f6;
}
.toast-info .toast-icon {
color: #3b82f6;
background: #dbeafe;
}
.toast-warning {
border-left: 4px solid #f59e0b;
}
.toast-warning .toast-icon {
color: #f59e0b;
background: #fef3c7;
}
/* Toast icon */
.toast-icon {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
flex-shrink: 0;
}
/* Toast message */
.toast-message {
flex: 1;
font-size: 14px;
line-height: 1.5;
color: #1f2937;
word-wrap: break-word;
padding-top: 4px;
}
/* Close button */
.toast-close {
background: none;
border: none;
color: #6b7280;
font-size: 24px;
line-height: 1;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.2s;
flex-shrink: 0;
}
.toast-close:hover {
background: #f3f4f6;
color: #1f2937;
}
.toast-close:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* Progress bar */
.toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: rgba(0, 0, 0, 0.2);
width: 100%;
transform-origin: left;
animation: toast-progress linear forwards;
}
@keyframes toast-progress {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
/* Responsive design - Mobile */
@media (max-width: 640px) {
.toast-container {
bottom: 16px;
right: 8px;
left: 8px;
max-width: none;
}
.toast {
min-width: auto;
max-width: none;
width: 100%;
}
}
/* Dark mode support (optional, for future) */
@media (prefers-color-scheme: dark) {
.toast {
background: #1f2937;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.toast-message {
color: #f9fafb;
}
.toast-close {
color: #9ca3af;
}
.toast-close:hover {
background: #374151;
color: #f9fafb;
}
}
/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {
.toast {
transition: opacity 0.1s;
}
.toast.toast-show {
transform: none;
}
.toast.toast-hide {
transform: none;
}
}
/* Print - Hide toasts */
@media print {
.toast-container {
display: none;
}
}
/* === responsive.css === */
/*
* ONLINEPLANOVAC - RESPONSIVE DESIGN
* Created: 2026-01-27
* Approach: Mobile-first progressive enhancement
*
* Breakpoints:
* - Mobile: 320px - 767px (default, no media query)
* - Tablet: 768px - 1023px
* - Desktop: 1024px - 1439px
* - Wide: 1440px+
*/
/* ========================================
1. CSS VARIABLES (BREAKPOINTS)
======================================== */
:root {
/* Breakpoints */
--breakpoint-tablet: 768px;
--breakpoint-desktop: 1024px;
--breakpoint-wide: 1440px;
/* Container max-widths */
--container-mobile: 100%;
--container-tablet: 768px;
--container-desktop: 1200px;
--container-wide: 1400px;
/* Spacing scale (mobile-first) */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
/* Touch target minimum (iOS/Android guidelines) */
--tap-target-min: 44px;
/* Font sizes (responsive) */
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-3xl: 30px;
}
/* Tablet adjustments */
@media (min-width: 768px) {
:root {
--spacing-lg: 32px;
--spacing-xl: 48px;
--spacing-2xl: 64px;
}
}
/* Desktop adjustments */
@media (min-width: 1024px) {
:root {
--spacing-xl: 64px;
--spacing-2xl: 80px;
--font-size-lg: 20px;
--font-size-xl: 22px;
--font-size-2xl: 28px;
--font-size-3xl: 36px;
}
}
/* ========================================
2. CONTAINER SYSTEM
======================================== */
.container {
width: 100%;
max-width: var(--container-desktop);
margin: 0 auto;
padding: 0 var(--spacing-md);
}
@media (min-width: 768px) {
.container {
padding: 0 var(--spacing-lg);
}
}
@media (min-width: 1440px) {
.container {
max-width: var(--container-wide);
}
}
/* Fluid container (no max-width) */
.container-fluid {
width: 100%;
padding: 0 var(--spacing-md);
}
/* ========================================
3. RESPONSIVE UTILITIES
======================================== */
/* Hide/Show by breakpoint */
.mobile-only {
display: block;
}
.tablet-only,
.desktop-only {
display: none;
}
@media (min-width: 768px) {
.mobile-only {
display: none;
}
.tablet-only {
display: block;
}
}
@media (min-width: 1024px) {
.tablet-only {
display: none;
}
.desktop-only {
display: block;
}
}
/* Text alignment */
.text-center-mobile {
text-align: center;
}
@media (min-width: 768px) {
.text-center-mobile {
text-align: left;
}
}
/* Spacing utilities */
.mt-mobile {
margin-top: var(--spacing-md);
}
.mb-mobile {
margin-bottom: var(--spacing-md);
}
@media (min-width: 768px) {
.mt-mobile {
margin-top: 0;
}
.mb-mobile {
margin-bottom: 0;
}
}
/* ========================================
4. FLEXBOX UTILITIES
======================================== */
/* Flex container that stacks on mobile */
.flex-stack-mobile {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
@media (min-width: 768px) {
.flex-stack-mobile {
flex-direction: row;
flex-wrap: wrap;
gap: var(--spacing-lg);
}
}
/* Flex container with wrap */
.flex-wrap {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
}
/* ========================================
5. GRID UTILITIES
======================================== */
/* Responsive grid (1 col mobile, 2 col tablet, 3+ col desktop) */
.grid-responsive {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
@media (min-width: 768px) {
.grid-responsive {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
}
}
@media (min-width: 1024px) {
.grid-responsive {
grid-template-columns: repeat(3, 1fr);
}
}
/* 2-column grid (stacks on mobile) */
.grid-2col {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
@media (min-width: 768px) {
.grid-2col {
grid-template-columns: repeat(2, 1fr);
}
}
/* ========================================
6. BUTTON / INPUT UNIFIED HEIGHT
======================================== */
/* UNIVERSAL: All buttons and inputs have 28px height */
/* Higher specificity via html body prefix */
html body .btn,
html body button:not(.nav-mobile-toggle):not(.nav-mobile-close):not(.tabulator-page):not(.notification-bell__trigger),
html body input[type="button"],
html body input[type="submit"],
html body a.button {
height: 28px;
min-height: 28px;
max-height: 28px;
line-height: 1.2;
padding: 4px 12px;
box-sizing: border-box;
}
/* VÝNIMKA: Mobile hamburger menu - 44px touch target */
html body .nav-mobile-toggle,
html body button.nav-mobile-toggle {
height: 44px;
min-height: 44px;
max-height: 44px;
width: 44px;
min-width: 44px;
padding: 0;
}
/* MOBILE ONLY: Full-width buttons */
@media (max-width: 767px) {
.btn-mobile-full {
width: 100%;
}
}
/* DESKTOP: Keep auto width */
@media (min-width: 768px) {
.btn-mobile-full {
width: auto;
}
}
/* ========================================
7. TABLE RESPONSIVE WRAPPER
======================================== */
/* MOBILE ONLY: Horizontal scroll wrapper for wide tables */
@media (max-width: 767px) {
.table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
}
.table-responsive table {
min-width: 800px; /* Prevent table from collapsing */
}
/* Hide non-critical columns on mobile */
.table-responsive .hide-mobile {
display: none;
}
}
/* DESKTOP: No table modifications, keep original layout */
@media (min-width: 768px) {
.table-responsive {
/* Desktop tables work as before - no wrapper needed */
width: auto;
overflow-x: visible;
}
}
/* ========================================
8. NAVIGATION RESPONSIVE BASE
======================================== */
/* Mobile navigation (will be extended in specific navigation CSS) */
.nav-mobile-toggle {
display: block;
background: none;
border: none;
font-size: var(--font-size-2xl);
padding: var(--spacing-sm);
cursor: pointer;
min-height: var(--tap-target-min);
min-width: var(--tap-target-min);
}
@media (min-width: 1024px) {
.nav-mobile-toggle {
display: none;
}
}
/* Mobile menu (hidden by default) */
.nav-mobile-menu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 280px;
height: 100vh;
background: #fff;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
overflow-y: auto;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
}
.nav-mobile-menu.active {
display: block;
transform: translateX(0);
}
/* Overlay when mobile menu is open */
.nav-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.nav-overlay.active {
display: block;
}
@media (min-width: 1024px) {
.nav-mobile-menu {
display: block;
position: static;
width: auto;
height: auto;
box-shadow: none;
transform: translateX(0);
}
html body .nav-overlay {
display: none;
}
}
/* ========================================
9. FORM RESPONSIVE ENHANCEMENTS
======================================== */
/* MOBILE ONLY: Full-width inputs with DESKTOP height */
@media (max-width: 767px) {
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
width: 100%;
max-width: 100%;
box-sizing: border-box;
font-size: 16px; /* Prevent iOS zoom on focus */
padding: 4px 3px; /* Match desktop padding for compact design */
height: 28px; /* Match desktop height */
line-height: 1.2;
}
/* Select2 dropdowns - match desktop compact size */
/* Higher specificity to override Select2 defaults */
html body .select2-container.select2-container--default .select2-selection--single {
height: 28px;
min-height: 28px;
line-height: 24px;
padding: 2px 6px;
font-size: 13px;
}
html body .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 24px;
padding: 0;
}
html body .select2-container.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 26px;
}
/* Textarea exception - allow natural height */
textarea {
height: auto;
min-height: 60px;
}
}
/* DESKTOP: Keep original widths, no changes */
@media (min-width: 768px) {
/* Desktop forms keep their original layout - no forced widths */
}
/* Label stacking on mobile */
.form-group {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
@media (min-width: 768px) {
.form-group.form-horizontal {
flex-direction: row;
align-items: center;
}
.form-group.form-horizontal label {
min-width: 150px;
}
}
/* ========================================
10. CALENDAR RESPONSIVE BASE
======================================== */
/* MOBILE ONLY: Calendar responsive adjustments */
@media (max-width: 767px) {
/* Kalendár ponecháva pôvodnú šírku (1200px) a scrolluje horizontálne */
/* NEPOUŽÍVAŤ width: 100% - rozbije float layout! */
#calendar {
/* width zostáva z inline style (1200px) */
position: relative;
}
}
/* DESKTOP: Keep original calendar layout */
@media (min-width: 768px) {
#calendar {
/* Desktop calendar keeps original layout - no forced widths */
}
}
/* ========================================
11. PRINT STYLES
======================================== */
@media print {
html body .mobile-only,
html body .nav-mobile-toggle,
html body .btn,
html body button {
display: none;
}
.container {
max-width: 100%;
padding: 0;
}
}
/* ========================================
12. ACCESSIBILITY ENHANCEMENTS
==========================================================================
NOTE: prefers-reduced-motion MUST use !important to override ALL animations
including inline styles and third-party libraries. This is the ONE legitimate
use case for !important in this codebase.
========================================================================== */
/* Respect user's motion preferences - LEGITIMATE !important usage */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Focus styles for keyboard navigation */
*:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* Skip to main content link (accessibility) */
.skip-to-main {
position: absolute;
top: -100px;
left: 0;
background: #000;
color: #fff;
padding: var(--spacing-sm) var(--spacing-md);
text-decoration: none;
z-index: 10000;
}
.skip-to-main:focus {
top: 0;
}
/* ========================================
13. LOGIN PAGE STYLES
======================================== */
/* Login page styles moved to separate login.css file.
This file is loaded conditionally only on login page.
See: assets/login.css */
/* === navigation.css === */
/*
* NAVIGATION - RESPONSIVE MOBILE MENU (MODERN DESIGN)
* Created: 2026-01-27
* Phase 2A: Hamburger menu + off-canvas drawer
* Phase 2B: Modern design with Material Design principles
*
* Features:
* - Jemnejšie gradienty a tieňe
* - Vizuálna hierarchia (žltý akcent pre submenu)
* - Plynulé animácie a hover efekty
* - Backdrop blur efekty
* - Čistý dizajn bez emoji
*/
/* ========================================
1. MOBILE HEADER BAR (Always visible)
======================================== */
.nav-mobile-bar {
display: none; /* Hidden on desktop */
position: fixed;
top: 0;
left: 0;
width: 100vw; /* Fixed to viewport width, not content width */
height: 52px; /* Taller for better touch target */
background: linear-gradient(135deg, #8b3fa8 0%, #6a2c87 100%);
z-index: 100002;
padding: 0 12px 0 60px; /* More space for bigger hamburger */
align-items: center;
justify-content: flex-start; /* Align logo to left after hamburger */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
max-width: 100vw;
box-sizing: border-box;
}
.nav-mobile-bar .nav-mobile-logo {
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
min-width: 0;
}
html body .nav-mobile-bar .nav-mobile-title {
font-size: 16px;
font-weight: bold;
color: #fff;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
html body .nav-mobile-bar .nav-mobile-subtitle {
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.2;
}
html body .nav-mobile-bar .nav-mobile-toggle {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
color: #fff;
border: none;
border-radius: 8px;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
font-size: 26px;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(4px);
flex-shrink: 0;
}
html body .nav-mobile-bar .nav-mobile-toggle:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-50%) scale(1.05);
}
/* Ensure toggle is always visible on mobile */
@media (max-width: 1023px) {
html body .nav-mobile-toggle {
display: flex;
visibility: visible;
opacity: 1;
}
}
/* Show on mobile only */
@media (max-width: 1023px) {
.nav-mobile-bar {
display: flex;
}
html body {
padding-top: 52px;
}
/* Horizontálny scroll je na .content, nie na section */
}
/* ========================================
2. OFF-CANVAS MOBILE DRAWER
======================================== */
.nav-mobile-drawer {
display: none; /* Hidden on desktop */
position: fixed;
top: 52px; /* Below the header bar */
left: 0; /* At edge */
right: auto;
width: auto;
min-width: 280px; /* Wider for larger touch targets */
max-width: 90%; /* More space on mobile */
max-height: calc(100vh - 52px);
background: #fff;
box-shadow:
0 16px 24px rgba(0, 0, 0, 0.14),
0 6px 8px rgba(0, 0, 0, 0.12),
0 2px 4px rgba(0, 0, 0, 0.08);
z-index: 100001;
overflow-x: hidden; /* Prevent horizontal scroll that cuts off text */
overflow-y: auto;
transform: translateX(-100%); /* Slide from left */
transition: transform 0.3s ease-in-out;
border-radius: 0 8px 8px 0;
}
/* Malé obrazovky (iPhone SE, staršie zariadenia) - full width drawer */
@media (max-width: 400px) {
.nav-mobile-drawer {
width: 100%;
max-width: 100%;
min-width: 100%;
right: 0;
border-radius: 0; /* Žiadne zaoblenie na full width */
}
.nav-mobile-drawer.active {
transform: translateX(0);
}
}
@media (max-width: 1023px) {
.nav-mobile-drawer {
display: block;
}
}
.nav-mobile-drawer.active {
transform: translateX(0); /* Slide in from left */
}
/* ========================================
3. DRAWER HEADER (User + Close)
======================================== */
.nav-mobile-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
border-bottom: 1px solid #e9d5ff;
box-sizing: border-box;
width: 100%;
overflow: hidden; /* Prevent horizontal overflow */
}
.nav-mobile-drawer-header .nav-mobile-user {
display: flex;
align-items: center;
gap: 8px;
padding: 0;
background: none;
border: none;
flex: 1;
min-width: 0; /* Allow flex item to shrink below content size */
overflow: hidden;
}
.nav-mobile-drawer-header .nav-mobile-user-icon {
font-size: 20px;
}
.nav-mobile-drawer-header .nav-mobile-user-name {
font-weight: 600;
color: var(--color-primary);
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 150px; /* Limit width on small screens */
}
.nav-mobile-drawer-header .nav-mobile-user-role {
font-size: 11px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);
padding: 3px 10px;
border-radius: 12px;
}
.nav-mobile-close {
background: rgba(139, 63, 168, 0.15);
color: var(--color-primary);
border: none;
border-radius: 8px;
width: 36px;
height: 36px;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: none;
opacity: 0.7;
}
.nav-mobile-close:hover {
background: rgba(139, 63, 168, 0.25);
opacity: 1;
transform: scale(1.05);
}
/* ========================================
4. OVERLAY BACKDROP
======================================== */
.nav-overlay {
display: none;
position: fixed;
top: 52px;
left: 0;
width: 100%;
height: calc(100% - 52px);
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
z-index: 99999;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.nav-overlay.active {
display: block;
opacity: 1;
}
/* ========================================
5. MOBILE MENU STYLES (Very Compact)
======================================== */
/* Desktop nav - visible by default */
.nav-desktop {
display: block;
}
/* Hide desktop nav on mobile */
@media (max-width: 1023px) {
html body .nav-desktop {
display: none;
}
}
/* Mobile nav inside drawer */
.nav-mobile-drawer .nav-mobile {
display: block;
}
/* Reset desktop min-width to prevent overflow */
html body .nav-mobile-drawer nav {
min-width: auto;
width: 100%;
}
/* Mobile menu list styles */
.nav-mobile-drawer nav ul,
.nav-mobile-drawer nav ul.menuul {
list-style: none;
margin: 0;
padding: 0;
display: block;
float: none;
}
.nav-mobile-drawer nav > ul > li,
.nav-mobile-drawer nav ul.menuul > li {
border-bottom: 1px solid #f5f5f5;
display: block;
float: none;
width: 100%;
background: #fff;
position: relative;
padding: 0;
margin: 0;
}
.nav-mobile-drawer nav > ul > li:last-child {
border-bottom: none;
}
.nav-mobile-drawer nav > ul > li > a,
.nav-mobile-drawer nav > ul > li > a:link,
.nav-mobile-drawer nav > ul > li > a:visited {
display: block;
padding: 14px 16px; /* Larger touch target */
color: var(--color-primary);
font-weight: bold;
font-size: 15px; /* Bigger font for readability */
text-decoration: none;
text-align: left; /* Override global.css nav centering */
background: #fff;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
max-width: 100%;
width: auto;
box-sizing: border-box;
border-radius: 4px;
margin: 0 4px;
}
.nav-mobile-drawer nav > ul > li > a:hover,
.nav-mobile-drawer nav > ul > li > a:active {
background: linear-gradient(90deg, #faf5ff 0%, #f3e8ff 100%);
transform: translateX(2px);
}
/* Emoji icons removed for cleaner, professional design */
/* Arrow indicator for items with submenu - Yellow accent for visibility */
.nav-mobile-drawer nav > ul > li.has-submenu > a {
position: relative;
padding-right: 50px; /* Space for chevron touch area */
background: linear-gradient(90deg, #fefce8 0%, #fef3c7 100%);
border-left: 3px solid #eab308;
}
/* Visual separator for chevron click area - Gold accent */
.nav-mobile-drawer nav > ul > li.has-submenu > a::before {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 50px;
border-left: 1px solid rgba(234, 179, 8, 0.2);
background: linear-gradient(to right, rgba(234, 179, 8, 0.05), rgba(234, 179, 8, 0.1));
pointer-events: none;
}
/* Big visible chevron for submenu items - Gold color */
.nav-mobile-drawer nav > ul > li.has-submenu > a::after,
.nav-mobile-drawer nav ul.menuul > li.has-submenu > a::after {
content: '›';
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
font-weight: bold;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: #ca8a04;
opacity: 1;
line-height: 1;
}
/* Chevron rotates when submenu is open */
.nav-mobile-drawer nav > ul > li.has-submenu.open > a::after,
.nav-mobile-drawer nav ul.menuul > li.has-submenu.open > a::after {
content: '›';
transform: translateY(-50%) rotate(90deg);
color: #a16207;
}
/* Submenu styles - hidden by default */
.nav-mobile-drawer nav ul ul,
.nav-mobile-drawer nav ul.menuul ul {
background: #f9fafb;
padding-left: 0;
display: none;
max-height: 0;
overflow: hidden;
position: relative;
z-index: 1;
width: 100%;
min-width: 100%;
left: 0;
top: auto;
box-shadow: none;
}
/* Show submenu when parent has .open class */
.nav-mobile-drawer nav > ul > li.open > ul,
.nav-mobile-drawer nav ul.menuul > li.open > ul {
display: block;
max-height: 500px;
opacity: 1;
visibility: visible;
}
/* Keep submenu visible even when not hovering parent */
.nav-mobile-drawer nav > ul > li.open:hover > ul,
.nav-mobile-drawer nav ul.menuul > li.open:hover > ul,
.nav-mobile-drawer nav > ul > li.open > ul:hover,
.nav-mobile-drawer nav ul.menuul > li.open > ul:hover {
display: block;
max-height: 500px;
opacity: 1;
visibility: visible;
}
.nav-mobile-drawer nav ul ul li {
border-bottom: 1px solid #e5e7eb;
background: #f9fafb;
padding: 0;
margin: 0;
}
.nav-mobile-drawer nav ul ul li:last-child {
border-bottom: none;
}
/* Submenu links - high specificity for mobile styling */
.nav-mobile-drawer nav ul li ul li a,
.nav-mobile-drawer nav ul li ul li a:link,
.nav-mobile-drawer nav ul li ul li a:visited,
.nav-mobile-drawer nav ul.menuul li ul li a,
.nav-mobile-drawer nav ul.menuul li ul li a:link,
.nav-mobile-drawer nav ul.menuul li ul li a:visited {
display: block;
padding: 12px 16px 12px 28px; /* Larger touch target */
color: #4b5563;
font-size: 14px; /* Readable font size */
text-decoration: none;
text-align: left; /* Override global.css nav centering */
line-height: 1.4;
background: linear-gradient(90deg, #fafaf9 0%, #f5f5f4 100%);
font-weight: normal;
transition: all 0.2s ease;
}
/* Handle structure (legacy HTML) */
.nav-mobile-drawer nav ul li ul > a,
.nav-mobile-drawer nav ul.menuul li ul > a {
display: block;
padding: 12px 16px 12px 28px; /* Larger touch target */
color: #4b5563;
font-size: 14px; /* Readable font size */
text-decoration: none;
text-align: left; /* Override global.css nav centering */
line-height: 1.4;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
font-weight: normal;
}
.nav-mobile-drawer nav ul ul > a > li,
.nav-mobile-drawer nav ul.menuul ul > a > li {
list-style: none;
display: inline;
color: inherit;
}
.nav-mobile-drawer nav ul li ul li a:hover,
.nav-mobile-drawer nav ul li ul li a:active,
.nav-mobile-drawer nav ul li ul li a:focus,
.nav-mobile-drawer nav ul li ul > a:hover,
.nav-mobile-drawer nav ul li ul > a:active,
.nav-mobile-drawer nav ul li ul > a:focus {
background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
color: #78350f;
padding-left: 32px;
}
/* Prevent ALL color changes on submenu items */
.nav-mobile-drawer nav ul ul li,
.nav-mobile-drawer nav ul ul li:hover,
.nav-mobile-drawer nav ul ul li:active,
.nav-mobile-drawer nav ul ul li:focus {
color: #4b5563;
background: #f9fafb;
}
.nav-mobile-drawer nav ul ul a,
.nav-mobile-drawer nav ul ul a *,
.nav-mobile-drawer nav ul ul li a,
.nav-mobile-drawer nav ul ul li a * {
color: #4b5563;
}
/* ========================================
6. DESKTOP - HIDE MOBILE ELEMENTS
======================================== */
@media (min-width: 1024px) {
html body .nav-mobile-bar,
html body .nav-mobile-drawer,
html body .nav-overlay {
display: none;
}
html body .nav-desktop {
display: block;
visibility: visible;
opacity: 1;
}
}
/* ========================================
7. ACCESSIBILITY
======================================== */
.nav-mobile-toggle:focus-visible,
.nav-mobile-close:focus-visible,
.nav-mobile-drawer a:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ========================================
8. BODY STATE
======================================== */
body.nav-open {
overflow: hidden;
}
.nav-mobile-drawer {
-webkit-overflow-scrolling: touch;
}
/* ========================================
9. HIDE SELECT2 WHEN NAV IS OPEN
======================================== */
html body.nav-open .select2-container--open,
html body.nav-open .select2-dropdown {
display: none;
visibility: hidden;
}
html body.nav-open .select2-container {
pointer-events: none;
}
/* ========================================
10. REMINDER BADGE (Birthday/Nameday)
======================================== */
.nav-reminder-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
padding: 6px 10px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.nav-reminder-badge:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
text-decoration: none;
color: #fff;
}
/* Today highlight - pulsing red */
.nav-reminder-badge--today {
background: #dc3545;
animation: pulse-reminder 2s infinite;
}
@keyframes pulse-reminder {
0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5); }
50% { box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
}
/* Mobile bar positioning */
@media (max-width: 1023px) {
.nav-mobile-bar .nav-reminder-badge {
position: absolute;
right: 60px;
top: 50%;
transform: translateY(-50%);
padding: 4px 8px;
font-size: 12px;
}
.nav-mobile-bar .nav-reminder-badge:hover {
transform: translateY(-50%) scale(1.05);
}
}
/* Desktop positioning - right side */
.nav-reminder-badge--desktop {
display: none;
}
.nav-reminder-wrapper {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
@media (min-width: 1024px) {
.nav-reminder-badge--desktop {
display: inline-flex;
}
.nav-desktop {
position: relative;
}
}
/* Reminder Dropdown */
.nav-reminder-dropdown {
display: none;
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 280px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
z-index: 10001;
overflow: hidden;
}
.nav-reminder-dropdown.is-open {
display: block;
animation: dropdownFadeIn 0.2s ease;
}
@keyframes dropdownFadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.nav-reminder-dropdown__header {
background: linear-gradient(135deg, var(--color-primary) 0%, #5a1f6e 100%);
color: #fff;
padding: 12px 16px;
font-weight: 600;
font-size: 14px;
}
.nav-reminder-dropdown__section {
padding: 10px 16px;
border-bottom: 1px solid #eee;
}
.nav-reminder-dropdown__section:last-of-type {
border-bottom: none;
}
.nav-reminder-dropdown__title {
font-size: 12px;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 8px;
text-transform: uppercase;
}
.nav-reminder-dropdown__item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
font-size: 13px;
border-bottom: 1px solid #f5f5f5;
}
.nav-reminder-dropdown__item:last-child {
border-bottom: none;
}
.nav-reminder-dropdown__item--today {
background: #fff3cd;
margin: 0 -16px;
padding: 6px 16px;
font-weight: 500;
}
.nav-reminder-dropdown__date {
min-width: 55px;
color: #666;
font-size: 12px;
}
.nav-reminder-dropdown__item--today .nav-reminder-dropdown__date {
color: var(--color-primary);
font-weight: 600;
}
.nav-reminder-dropdown__name {
flex: 1;
color: #333;
}
.nav-reminder-dropdown__age {
color: var(--color-text-muted);
font-size: 11px;
}
.nav-reminder-dropdown__link {
display: block;
padding: 12px 16px;
text-align: center;
color: var(--color-primary);
font-size: 13px;
font-weight: 500;
text-decoration: none;
border-top: 1px solid #eee;
transition: background 0.2s;
}
.nav-reminder-dropdown__link:hover {
background: #f8f4fa;
text-decoration: none;
}
/* === header.css === */
/**
* HEADER - Modern Desktop Header Design
* Created: 2026-02-04
* Updated: 2026-02-06 - Responsive breakpoints
*
* Features:
* - Full-width purple gradient background
* - Logo + Menu + Notification bell in one row
* - Dynamic gaps that shrink with screen size
* - Multiple breakpoints for smooth transitions
*
* Breakpoints:
* - >= 1400px: Full layout, comfortable spacing
* - 1200-1399px: Slightly tighter
* - 1024-1199px: Compact, smaller fonts
* - < 1024px: Mobile hamburger menu
*/
/* ========================================
DESKTOP HEADER - BASE (>=1024px)
======================================== */
@media (min-width: 1024px) {
/* Header wrapper */
header {
position: sticky;
top: 0;
z-index: 1000;
background: linear-gradient(135deg, #8b3fa8 0%, #6a2c87 100%);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* Inner container - flex with dynamic gap */
.header-inner {
display: flex;
align-items: center;
max-width: 1600px;
margin: 0 auto;
padding: 0 clamp(10px, 2vw, 20px);
height: 56px;
gap: clamp(8px, 1.5vw, 20px);
}
/* Logo area */
.header-logo {
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.header-logo__title {
font-size: clamp(14px, 1.2vw, 18px);
font-weight: 700;
color: #fff;
line-height: 1.2;
letter-spacing: -0.3px;
white-space: nowrap;
}
.header-logo__subtitle {
font-size: clamp(9px, 0.8vw, 11px);
color: rgba(255, 255, 255, 0.8);
line-height: 1.2;
white-space: nowrap;
}
/* Desktop navigation inside header */
header .nav-desktop {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
/* Menu styles */
header .nav-desktop > ul,
header .nav-desktop > ul.menuul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
gap: clamp(0px, 0.5vw, 4px);
background: transparent !important;
box-shadow: none !important;
}
header .nav-desktop > ul > li,
header nav.nav-desktop ul > li {
position: relative;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
header .nav-desktop > ul > li > a,
header nav.nav-desktop ul > li > a {
display: flex;
align-items: center;
padding: 8px clamp(8px, 1vw, 14px) !important;
color: rgba(255, 255, 255, 0.95) !important;
text-decoration: none;
font-size: clamp(12px, 1vw, 13px);
font-weight: 500;
border-radius: 6px;
transition: background-color 0.15s ease;
background: transparent !important;
white-space: nowrap;
}
header .nav-desktop > ul > li > a:hover,
header nav.nav-desktop ul > li > a:hover {
background: rgba(255, 255, 255, 0.15) !important;
color: #fff !important;
}
/* Dropdown menus */
header .nav-desktop > ul > li > ul,
header nav.nav-desktop ul li ul {
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
background: #fff !important;
border-radius: 6px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
padding: 4px 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
z-index: 1001;
}
header .nav-desktop > ul > li:hover > ul,
header nav.nav-desktop ul li:hover ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
display: block;
}
header .nav-desktop > ul > li > ul li,
header nav.nav-desktop ul li ul li {
list-style: none;
background: #fff !important;
display: block !important;
padding: 0 !important;
}
header .nav-desktop > ul > li > ul li a,
header .nav-desktop > ul > li > ul a li,
header nav.nav-desktop ul li ul li a,
header nav.nav-desktop ul li ul a {
display: block;
padding: 6px 14px !important;
color: #333 !important;
text-decoration: none;
font-size: 13px;
line-height: 1.3;
background: #fff !important;
transition: all 0.15s ease;
}
header .nav-desktop > ul > li > ul li a:hover,
header .nav-desktop > ul > li > ul a:hover,
header .nav-desktop > ul > li > ul a:hover li,
header nav.nav-desktop ul li ul li a:hover,
header nav.nav-desktop ul li ul a:hover {
background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%) !important;
color: #78350f !important;
}
/* Right side - actions */
.header-actions {
display: flex;
align-items: center;
margin-left: auto;
gap: clamp(4px, 0.5vw, 8px);
flex-shrink: 0;
}
/* Notification bell in header - white icon */
.header-actions .notification-bell__icon {
color: rgba(255, 255, 255, 0.9);
}
.header-actions .notification-bell__trigger:hover {
background: rgba(255, 255, 255, 0.15);
}
.header-actions .notification-bell__trigger:hover .notification-bell__icon {
color: #fff;
}
/* Birthday/nameday link - matches notification bell style */
.header-birthday-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
box-sizing: border-box;
border: 2px solid #fff;
border-radius: 50%;
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.header-birthday-link:hover {
background: rgba(255, 255, 255, 0.15);
border-color: #fff;
color: #fff;
}
.header-birthday-link svg {
width: 20px;
height: 20px;
}
/* Logout wrapper - logout + user vertikálne */
.header-logout-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
/* Logout button */
.header-logout {
display: flex;
align-items: center;
padding: 6px clamp(8px, 1vw, 14px);
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-size: clamp(11px, 1vw, 13px);
font-weight: 500;
border-radius: 6px;
transition: background-color 0.15s ease;
white-space: nowrap;
}
.header-logout:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
/* User info - pod odhlásením */
.header-user {
color: rgba(255, 255, 255, 0.6);
font-size: 9px;
cursor: default;
white-space: nowrap;
}
.header-user__name {
font-weight: 400;
}
}
/* ========================================
COMPACT DESKTOP (1024px - 1199px)
======================================== */
@media (min-width: 1024px) and (max-width: 1199px) {
.header-logo__subtitle {
display: none;
}
.header-user {
display: none;
}
header .nav-desktop > ul > li > a,
header nav.nav-desktop ul > li > a {
padding: 6px 8px !important;
font-size: 12px;
}
.header-birthday-link {
width: 36px;
height: 36px;
}
.header-birthday-link svg {
width: 18px;
height: 18px;
}
/* Zjednotenie s birthday link */
html body button.notification-bell__trigger {
width: 36px;
height: 36px;
min-height: 36px;
max-height: 36px;
}
.notification-bell__icon {
width: 18px;
height: 18px;
}
.header-logout {
padding: 6px 10px;
font-size: 12px;
}
}
/* ========================================
MOBILE - Hamburger menu
======================================== */
@media (max-width: 1023px) {
/* Header wrapper does nothing on mobile */
header {
display: contents;
}
/* Hide desktop-only elements */
.header-inner,
.header-logo,
.header-actions,
.header-user {
display: none;
}
}
/* ===== Backride Inbox header icon (super-admin only) ===== */
.backride-inbox-link {
position: relative;
}
.backride-inbox-icon {
font-size: 20px;
line-height: 1;
filter: grayscale(0.2) brightness(1.1);
}
.backride-inbox-link--active {
animation: backride-inbox-pulse 2s ease-in-out infinite;
border-color: #ffc107 !important;
background: rgba(255, 193, 7, 0.15);
}
.backride-inbox-link--active .backride-inbox-icon {
filter: none;
}
.backride-inbox-link:hover {
background: rgba(255, 193, 7, 0.25);
}
.backride-inbox-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
line-height: 18px;
padding: 0 5px;
font-size: 11px;
font-weight: 700;
color: #fff;
background: #dc3545;
border-radius: 9px;
border: 2px solid rgba(255,255,255,0.5);
box-sizing: border-box;
text-align: center;
}
@keyframes backride-inbox-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5); }
50% { box-shadow: 0 0 0 6px rgba(255, 193, 7, 0); }
}
/* ===== Backride inbox dropdown ===== */
.backride-inbox {
position: relative;
display: inline-flex;
flex-shrink: 0;
--backride-trigger-size: 40px;
}
.nav-mobile-bar .backride-inbox {
--backride-trigger-size: 36px;
margin-right: 4px;
}
@media (min-width: 1024px) and (max-width: 1199px) {
.backride-inbox {
--backride-trigger-size: 36px;
}
}
/* Circle trigger: out-competes the global 28px button rule (responsive.css) the same way the bell does. */
html body button.backride-inbox-link.header-birthday-link.backride-inbox__trigger[aria-haspopup] {
width: var(--backride-trigger-size);
height: var(--backride-trigger-size);
min-height: var(--backride-trigger-size);
max-height: var(--backride-trigger-size);
margin: 0;
padding: 0;
background: transparent;
cursor: pointer;
font: inherit;
}
html body button.backride-inbox-link.backride-inbox-link--active.header-birthday-link.backride-inbox__trigger[aria-haspopup] {
background: rgba(255, 193, 7, 0.15);
}
html body button.backride-inbox-link.header-birthday-link.backride-inbox__trigger[aria-haspopup]:hover {
background: rgba(255, 193, 7, 0.25);
}
.backride-inbox__trigger:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.backride-inbox__menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 240px;
max-width: calc(100vw - 20px);
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
padding: 6px;
z-index: 100003;
}
.backride-inbox__menu[hidden] {
display: none;
}
.backride-inbox__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
color: #333;
text-decoration: none;
font-size: 14px;
}
.backride-inbox__item:hover,
.backride-inbox__item:focus-visible {
background: #f3e9f7;
outline: none;
}
.backride-inbox__count {
min-width: 22px;
padding: 0 6px;
border-radius: 11px;
background: #e9ecef;
color: #555;
font-size: 12px;
font-weight: 700;
line-height: 22px;
text-align: center;
box-sizing: border-box;
}
.backride-inbox__count--active {
background: #dc3545;
color: #fff;
}
/* === control.css === */
/**
* CONTROL SECTION - Mobile-First Responsive Styles
* Created: 2026-01-29
*
* Štruktúra:
* - .control__main - vždy viditeľné (filtre + mobile toggle)
* - .control__display - na mobile skryté, na desktop viditeľné
*/
/* ==========================================================================
BASE STYLES (MOBILE)
========================================================================== */
#control,
.control {
width: 100%;
max-width: 100%;
margin-bottom: 12px;
box-sizing: border-box;
/* Controls musia byť vždy viditeľné - žiadny overflow */
overflow: visible;
}
/* HLAVNÉ FILTRE - vždy viditeľné */
.control__main {
display: flex;
flex-direction: column;
gap: 8px;
}
.control__filters {
display: flex;
flex-direction: column;
gap: 8px;
}
.control__filters-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.control__filters-label {
font-size: 13px;
font-weight: 600;
color: #333;
}
/* Mobile toggle button */
.control__display-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #eee;
}
.control__display-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: #fff;
border: 1px solid var(--color-primary);
border-radius: 4px;
color: var(--color-primary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.control__display-btn:hover {
background: #f5e6fa;
}
.control__display-btn.active {
background: var(--color-primary);
color: #fff;
}
.control__display-icon {
font-size: 10px;
transition: transform 0.2s ease;
}
.control__display-btn.active .control__display-icon {
transform: rotate(180deg);
}
.control__week-indicator {
font-size: 14px;
font-weight: 600;
color: var(--color-primary);
}
/* ZOBRAZENIE OPTIONS - skryté na mobile */
.control__display {
display: none;
flex-direction: column;
gap: 12px;
margin-top: 12px;
padding: 12px;
background: #f9f9f9;
border: 1px solid #eee;
border-radius: 6px;
}
.control__display.active {
display: flex;
}
/* Týždeň/Deň toggle */
.control__view-toggle {
display: flex;
gap: 8px;
}
.control__view-btn {
flex: 1;
padding: 8px 16px;
border: 1px solid var(--color-primary);
background: #fff;
color: var(--color-primary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease;
}
.control__view-btn:hover {
background: #f5e6fa;
}
.control__view-btn--active {
background: var(--color-primary);
color: #fff;
}
.control__view-btn--active:hover {
background: #5a1f6d;
}
/* Navigácia týždňov */
.control__week-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.control__week-label {
font-size: 13px;
color: #666;
}
.control__week-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: #fff;
border: 1px solid var(--color-primary);
border-radius: 4px;
color: var(--color-primary);
font-size: 14px;
font-weight: bold;
text-decoration: none;
transition: all 0.2s ease;
}
.control__week-arrow:hover {
background: #f5e6fa;
}
.control__week-today {
display: flex;
align-items: center;
justify-content: center;
height: 28px;
padding: 0 8px;
background: #fff;
border: 1px solid var(--color-primary);
border-radius: 4px;
color: var(--color-primary);
font-size: 12px;
font-weight: bold;
text-decoration: none;
transition: all 0.2s ease;
}
.control__week-today:hover {
background: #f5e6fa;
}
.control__week-number {
font-size: 16px;
font-weight: 700;
color: var(--color-primary);
min-width: 24px;
text-align: center;
}
/* Date picker */
.control__date-picker {
display: flex;
align-items: center;
gap: 8px;
}
.control__date-label {
font-size: 13px;
color: #666;
}
.control__date-input {
flex: 1;
padding: 4px 8px;
border: 1px solid var(--color-primary);
border-radius: 4px;
font-size: 14px;
max-width: 160px;
min-height: 28px;
height: 28px;
box-sizing: border-box;
cursor: pointer;
background: #fff;
}
.control__date-input:hover {
background: #f5e6fa;
}
.control__date-input:focus {
outline: none;
border-color: #5a1f6d;
}
/* Väčší klikateľný priestor pre picker ikonu */
.control__date-input::-webkit-calendar-picker-indicator {
cursor: pointer;
padding: 4px;
margin: 0;
}
/* Day selector (viditeľný len v day view) */
.control__day-select {
display: none;
position: relative;
}
.control__day-select.active {
display: block;
}
.control__day-dropdown-btn {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--color-primary);
background: #fff;
color: #333;
font-size: 14px;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.2s ease;
}
.control__day-dropdown-btn:hover {
background: #f5e6fa;
}
.control__day-icon {
font-size: 10px;
color: var(--color-primary);
transition: transform 0.2s ease;
}
.control__day-dropdown-btn.active .control__day-icon {
transform: rotate(180deg);
}
.control__day-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 4px;
background: #fff;
border: 1px solid var(--color-primary);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.2s ease;
z-index: 1000;
}
.control__day-menu.active {
max-height: 400px;
opacity: 1;
}
.control__day-item {
width: 100%;
padding: 10px 12px;
border: none;
background: #fff;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
transition: background 0.15s ease;
}
.control__day-item:last-child {
border-bottom: none;
}
.control__day-item:hover {
background: #f5e6fa;
}
.control__day-item--active {
background: var(--color-primary);
color: #fff;
}
.control__day-item--active:hover {
background: #5a1f6d;
}
.control__day-name {
font-weight: 600;
font-size: 13px;
}
.control__day-date {
font-size: 12px;
opacity: 0.8;
}
/* ==========================================================================
TABLET (768px+)
========================================================================== */
@media (min-width: 768px) {
#control,
.control {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 8px 16px;
}
.control__main {
flex: 1 1 auto;
min-width: 0;
flex-direction: row;
align-items: center;
}
.control__filters {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.control__filters-item {
flex-direction: row;
align-items: center;
gap: 6px;
}
.control__filters-label {
font-size: 12px;
}
/* Skryť mobile toggle na tablete */
.control__display-toggle {
display: none;
}
/* Zobraziť display options - wrapping povolený */
.control__display {
display: flex;
flex: 1 1 auto;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 8px 12px;
margin-top: 0;
padding: 0;
background: transparent;
border: none;
}
.control__view-toggle {
flex: 0 0 auto;
}
.control__view-btn {
flex: 0 0 auto;
padding: 4px 8px;
font-size: 12px;
}
.control__week-nav {
flex: 0 0 auto;
}
.control__week-label {
font-size: 12px;
}
.control__week-number {
font-size: 14px;
}
.control__date-picker {
flex: 0 0 auto;
}
.control__date-label {
font-size: 12px;
}
.control__date-input {
padding: 4px 6px;
font-size: 13px;
max-width: 130px;
}
.control__day-select {
flex: 0 0 auto;
min-width: 140px;
}
}
/* ==========================================================================
DESKTOP (1024px+)
========================================================================== */
@media (min-width: 1024px) {
#control,
.control {
flex-wrap: wrap;
gap: 10px 16px;
}
.control__filters-label {
font-size: 13px;
}
.control__display {
gap: 10px 16px;
flex-wrap: wrap;
}
.control__view-btn {
padding: 4px 10px;
font-size: 13px;
}
.control__week-label,
.control__date-label {
font-size: 13px;
}
.control__week-number {
font-size: 15px;
}
.control__date-input {
max-width: 140px;
}
.control__day-select {
min-width: 160px;
}
}
/* ==========================================================================
WIDE DESKTOP (1280px+)
========================================================================== */
@media (min-width: 1280px) {
#control,
.control {
flex-wrap: wrap;
gap: 16px;
}
.control__display {
flex-wrap: nowrap;
gap: 16px;
}
.control__day-select {
min-width: 180px;
}
}
/* ==========================================================================
RESET FILTER BUTTON
========================================================================== */
.reset-filter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid var(--color-border);
border-radius: 4px;
background-color: var(--color-bg-alt);
color: var(--color-text-light);
cursor: not-allowed;
font-size: 16px;
font-weight: bold;
text-decoration: none;
transition: all 0.3s ease;
margin-right: 10px;
vertical-align: middle;
}
.reset-filter-btn:hover {
background-color: var(--color-bg-alt);
border-color: var(--color-border);
}
.reset-filter-btn.active {
border-color: var(--color-primary-accent);
background-color: var(--color-primary-accent-bg);
color: var(--color-primary-accent);
cursor: pointer;
box-shadow: 0 0 0 3px var(--color-primary-accent-glow);
}
.reset-filter-btn.active:hover {
background-color: var(--color-primary-accent-bg-hover);
border-color: var(--color-primary-accent);
color: var(--color-primary-accent-dark);
box-shadow: 0 0 0 3px var(--color-primary-accent-glow-hover);
}
/* ==========================================================================
LEGACY SUPPORT - Staré triedy pre kompatibilitu
========================================================================== */
/* Staré .left a .right triedy - ponechané pre kompatibilitu so students.php a inými stránkami */
/* NESKRÝVAŤ - používajú sa na viacerých miestach! */
/* Staré calendar-view-toggle - už nepoužívané */
.calendar-view-toggle {
display: none;
}
/* ==========================================================================
SELECT2 - Zarovnanie textu doľava v control sekcii
========================================================================== */
#control .select2-container .select2-selection--single .select2-selection__rendered,
.control .select2-container .select2-selection--single .select2-selection__rendered {
justify-content: flex-start;
text-align: left;
}
/* ==========================================================================
PAGINATION - Stránkovanie pre tabuľky
========================================================================== */
.pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px;
margin-top: 15px;
font-size: 13px;
}
.pagination a {
text-decoration: none;
}
.pagination_button,
.pagination_page,
.pagination_page_active {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 4px 8px;
border: 1px solid var(--color-primary);
border-radius: 4px;
background: #fff;
color: var(--color-primary);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
box-sizing: border-box;
}
.pagination_button:hover,
.pagination_page:hover {
background: #f5e6fa;
}
.pagination_page_active {
background: var(--color-primary);
color: #fff;
cursor: default;
}
.pagination_page_active:hover {
background: #5a1f6d;
}
/* Pagination info text */
.pagination > span {
margin-left: 12px;
color: #666;
font-size: 13px;
}
/* Mobile pagination */
@media (max-width: 767px) {
.pagination {
gap: 3px;
}
.pagination_button,
.pagination_page,
.pagination_page_active {
min-width: 36px;
height: 36px;
font-size: 14px;
}
.pagination > span {
width: 100%;
text-align: center;
margin-left: 0;
margin-top: 8px;
}
}
/* Search All button */
.search-all-btn {
padding: 6px 12px;
background: linear-gradient(to bottom, var(--color-primary-accent) 0%, var(--color-primary-dark) 100%);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
transition: all 0.2s;
margin-left: 8px;
}
.search-all-btn:hover {
background: linear-gradient(to bottom, var(--color-primary-accent-hover) 0%, var(--color-primary-accent-dark) 100%);
}
.search-all-btn:disabled {
background: #ccc;
cursor: not-allowed;
}
.search-all-btn.loaded {
background: linear-gradient(to bottom, var(--color-success) 0%, #059669 100%);
}
/* === tabulator-custom.css === */
/**
* Tabulator VaV Theme
* Custom styling for VaV Autoskola tables
*/
/* Base table styling */
.tabulator {
font-family: Tahoma, Verdana, sans-serif;
font-size: 13px;
border: 1px solid #ccc;
background-color: #fff;
}
/* Header styling - VaV purple gradient */
.tabulator .tabulator-header {
background: linear-gradient(to bottom, #b83cde 0%, var(--color-primary) 100%);
color: #fff;
border-bottom: 2px solid #5a1f70;
font-weight: bold;
}
.tabulator .tabulator-header .tabulator-col {
background: transparent;
border-right: 1px solid rgba(255,255,255,0.2);
}
.tabulator .tabulator-header .tabulator-col:last-child {
border-right: none;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
padding: 8px 6px;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
color: #fff;
white-space: nowrap;
}
/* Column header hover */
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
background: rgba(255,255,255,0.1);
}
/* Sort arrow styling */
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-sorter {
color: rgba(255,255,255,0.7);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-sorter,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-sorter {
color: #fff;
}
/* Row styling — height is controlled by JS rowHeight option per table */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
border-bottom: 1px solid #ddd;
min-height: 32px;
}
/* Alternating row colors */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row-even {
background: #f5f5f5;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row-odd {
background: #fff;
}
/* Row hover - VaV purple tint - higher specificity */
/* WCAG 2.1 AA (1.4.3): pôvodný rgb(223,179,255) zhadzoval kontrast farebných odkazov v bunkách
(napr. #7a5c00 na 3,58:1, #c0392b na 3,12:1). --color-primary-accent-bg (#f3e8ff) dáva
#7a5c00 -> 5,30:1, #c0392b -> 4,61:1 (kontrastný audit, úloha T-472). */
html body .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
background: var(--color-primary-accent-bg, #f3e8ff);
}
/* Cell styling */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
padding: 6px 8px;
border-right: 1px solid #eee;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell:last-child {
border-right: none;
}
/* Center aligned cells (for icons, status) */
.tabulator .tabulator-cell.tabulator-center {
text-align: center;
}
/* Compact icon cells - minimal padding for icon-only columns */
html body .tabulator .tabulator-cell.icon-cell {
padding: 4px 2px;
text-align: center;
}
.tabulator .tabulator-header .tabulator-col.icon-col .tabulator-col-content {
padding: 8px 4px;
}
/* Email cell truncation */
.tabulator .tabulator-cell.email-cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Compact cell */
.tabulator .tabulator-cell.compact-cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Links in cells */
.tabulator .tabulator-cell a {
color: var(--color-primary);
text-decoration: none;
}
.tabulator .tabulator-cell a:hover {
color: #b83cde;
text-decoration: underline;
}
/* Footer/pagination styling */
.tabulator .tabulator-footer {
background: #f5f5f5;
border-top: 1px solid #ccc;
padding: 8px;
}
/* Column visibility menu button */
.tabulator-columns-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 12px;
height: 28px;
border: 1px solid #8b3fb6;
border-radius: 4px;
background-color: #f3e8ff;
color: #8b3fb6;
cursor: pointer;
font-size: 13px;
font-weight: normal;
transition: all 0.2s ease;
margin-left: 10px;
}
.tabulator-columns-btn:hover {
background-color: #e9d5ff;
border-color: #7a2fa8;
}
.tabulator-columns-btn.active {
background-color: #8b3fb6;
color: #fff;
}
/* Column visibility dropdown menu */
.tabulator-column-menu {
display: none;
position: absolute;
z-index: 1000;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
padding: 8px 0;
min-width: 200px;
max-height: 400px;
overflow-y: auto;
}
.tabulator-column-menu.show {
display: block;
}
.tabulator-column-menu-item {
display: flex;
align-items: center;
padding: 8px 16px;
cursor: pointer;
transition: background 0.15s ease;
}
.tabulator-column-menu-item:hover {
background: #f3e8ff;
}
.tabulator-column-menu-item input[type="checkbox"] {
margin-right: 10px;
accent-color: #8b3fb6;
}
.tabulator-column-menu-item label {
cursor: pointer;
flex: 1;
color: #333;
}
/* Menu header with toggle all buttons */
.tabulator-column-menu-header {
display: flex;
gap: 8px;
padding: 8px 16px;
border-bottom: 1px solid #eee;
margin-bottom: 4px;
}
.tabulator-column-menu-header button {
flex: 1;
padding: 6px 12px;
border: 1px solid #8b3fb6;
border-radius: 4px;
background: #fff;
color: #8b3fb6;
cursor: pointer;
font-size: 12px;
font-weight: 500;
transition: all 0.2s ease;
}
.tabulator-column-menu-header button:hover {
background: #f3e8ff;
}
.tabulator-column-menu-header button.show-all {
background: #4CAF50;
border-color: #4CAF50;
color: #fff;
}
.tabulator-column-menu-header button.show-all:hover {
background: #43a047;
}
.tabulator-column-menu-header button.hide-all {
background: #f44336;
border-color: #f44336;
color: #fff;
}
.tabulator-column-menu-header button.hide-all:hover {
background: #e53935;
}
/* Separator line */
.tabulator-column-menu-separator {
height: 1px;
background: #eee;
margin: 4px 0;
}
/* Responsive - horizontal scroll wrapper */
.tabulator-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 10px;
}
/* Scroll indicator hint */
.tabulator-wrapper::-webkit-scrollbar {
height: 8px;
}
.tabulator-wrapper::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.tabulator-wrapper::-webkit-scrollbar-thumb {
background: #8b3fb6;
border-radius: 4px;
}
.tabulator-wrapper::-webkit-scrollbar-thumb:hover {
background: var(--color-primary);
}
/* Scroll slider (horizontal scroll control for table) */
.tabulator-scroll-slider {
display: none;
align-items: center;
gap: 10px;
padding: 6px 12px;
background: #f9f5fc;
border: 1px solid #e0d0e8;
border-radius: 6px;
}
.tabulator-scroll-slider--active {
display: flex;
}
.tabulator-scroll-slider__label {
font-size: 13px;
font-weight: 600;
color: var(--color-primary);
white-space: nowrap;
}
.tabulator-scroll-slider__input {
-webkit-appearance: none;
appearance: none;
flex: 1;
height: 6px;
background: #e0d0e8;
border-radius: 3px;
outline: none;
cursor: pointer;
}
/* Thumb - default (disabled / no scroll) */
.tabulator-scroll-slider__input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ccc;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
cursor: pointer;
transition: all 0.2s ease;
}
.tabulator-scroll-slider__input::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: #ccc;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
cursor: pointer;
transition: all 0.2s ease;
}
/* Thumb - active (scroll available) */
.tabulator-scroll-slider--active .tabulator-scroll-slider__input::-webkit-slider-thumb {
width: 20px;
height: 20px;
background: #8b3fb6;
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(139,63,182,0.4);
}
.tabulator-scroll-slider--active .tabulator-scroll-slider__input::-moz-range-thumb {
width: 20px;
height: 20px;
background: #8b3fb6;
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(139,63,182,0.4);
}
/* Thumb - hover */
.tabulator-scroll-slider--active .tabulator-scroll-slider__input::-webkit-slider-thumb:hover {
background: var(--color-primary);
box-shadow: 0 2px 8px rgba(139,63,182,0.6);
transform: scale(1.15);
}
.tabulator-scroll-slider--active .tabulator-scroll-slider__input::-moz-range-thumb:hover {
background: var(--color-primary);
box-shadow: 0 2px 8px rgba(139,63,182,0.6);
transform: scale(1.15);
}
/* Track fill for active state */
.tabulator-scroll-slider--active .tabulator-scroll-slider__input {
background: linear-gradient(to right, #d4b5e8, #e0d0e8);
}
.tabulator-scroll-slider__input:disabled {
cursor: default;
opacity: 0.6;
}
.tabulator-scroll-slider__value {
min-width: 32px;
text-align: right;
font-size: 12px;
font-weight: 600;
color: #666;
}
/* Add button styled like control panel */
.control__add-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 16px;
height: 28px;
border: 1px solid #4CAF50;
border-radius: 4px;
background: #4CAF50;
color: #fff;
cursor: pointer;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
}
.control__add-btn:hover {
background: #43a047;
border-color: #43a047;
color: #fff;
text-decoration: none;
}
/* Global search input */
.tabulator-global-search {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.tabulator-global-search label {
font-size: 13px;
color: #666;
font-weight: 500;
}
.tabulator-global-search input {
padding: 6px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 13px;
width: 250px;
transition: border-color 0.2s ease;
}
.tabulator-global-search input:focus {
outline: none;
border-color: #8b3fb6;
box-shadow: 0 0 0 2px rgba(139, 63, 182, 0.1);
}
.tabulator-global-search .search-clear {
padding: 4px 10px;
border: 1px solid #ddd;
border-radius: 4px;
background: #f5f5f5;
color: #666;
cursor: pointer;
font-size: 12px;
}
.tabulator-global-search .search-clear:hover {
background: #eee;
}
.tabulator-global-search .search-submit {
padding: 4px 12px;
border: 1px solid #007bff;
border-radius: 4px;
background: #007bff;
color: #fff;
cursor: pointer;
font-size: 12px;
height: 28px;
}
.tabulator-global-search .search-submit:hover { background: #0056b3; border-color: #0056b3; }
.tabulator-global-search .search-submit:disabled { opacity: 0.6; cursor: wait; }
.students-truncation-banner {
padding: 10px 14px;
background: #fff3cd;
border: 1px solid #ffc107;
border-radius: 4px;
margin: 0 0 10px 0;
font-size: 13px;
color: #856404;
line-height: 1.4;
}
.students-truncation-banner kbd {
padding: 1px 5px;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 11px;
font-family: monospace;
}
.students-truncation-banner a { color: #0056b3; text-decoration: underline; }
/* ==========================================================================
SEARCH MODULE - Unified search component (diacritics-free)
========================================================================== */
.search-module {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.search-module__input-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.search-module__input {
padding: 6px 32px 6px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 13px;
width: 280px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-module__input:focus {
outline: none;
border-color: #8b3fb6;
box-shadow: 0 0 0 2px rgba(139, 63, 182, 0.15);
}
.search-module__input::placeholder {
color: var(--color-text-light);
}
.search-module__clear {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
border: none;
background: transparent;
color: var(--color-text-light);
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.2s, color 0.2s;
}
.search-module__clear:hover {
background: #f0f0f0;
color: #666;
}
.search-module__status {
font-size: 12px;
color: #666;
}
/* Responsive */
@media (max-width: 768px) {
.search-module {
flex-direction: column;
align-items: stretch;
}
.search-module__input {
width: 100%;
}
}
/* No data message */
.tabulator .tabulator-tableholder .tabulator-placeholder {
padding: 20px;
text-align: center;
color: #666;
}
/* Loading overlay */
.tabulator .tabulator-tableholder .tabulator-loader {
background: rgba(255,255,255,0.9);
}
.tabulator .tabulator-tableholder .tabulator-loader .tabulator-loader-msg {
color: var(--color-primary);
font-weight: bold;
}
/* Selected row */
html body .tabulator .tabulator-row.tabulator-selected {
background: #d4a5f9;
}
/* Matrix column - uppercase bold */
.tabulator .tabulator-cell.matrix-cell {
text-transform: uppercase;
font-weight: bold;
}
/* Utility classes for Tabulator cells */
.tabulator .tabulator-cell.font-bold {
font-weight: bold;
}
.tabulator .tabulator-cell.uppercase {
text-transform: uppercase;
}
/* Image sizing in cells */
.tabulator .tabulator-cell img {
vertical-align: middle;
max-height: 20px;
}
/* Car photo cell - larger images */
html body .tabulator .tabulator-cell.photo-cell {
padding: 4px 8px;
}
html body .tabulator .tabulator-cell.photo-cell img {
max-height: 50px;
max-width: 80px;
width: auto;
height: auto;
}
/* Rides column styling */
.tabulator .tabulator-cell .rides-completed {
color: green;
font-weight: bold;
}
.tabulator .tabulator-cell .rides-extra {
color: #ff9800;
font-size: 11px;
}
/* [INVARIANT:test-boundary-isolation] — badge pre syntetické testovacie entity (is_test=1)
v admin zoznamoch, samostatný stĺpec (nesúčasť searchovateľných textových polí). */
.tabulator .tabulator-cell .test-entity-badge {
display: inline-block;
padding: 1px 6px;
border-radius: 3px;
background: #f0ad4e;
color: #fff;
font-size: 10px;
font-weight: bold;
}
/* Phone link styling */
.tabulator .tabulator-cell a[href^="tel:"] {
color: #333;
text-decoration: none;
}
.tabulator .tabulator-cell a[href^="tel:"]:hover {
color: var(--color-primary);
}
/* Row status colors (future/today/past rides) */
.tabulator .tabulator-row.row-future {
background-color: rgba(0, 140, 0, 0.15);
}
.tabulator .tabulator-row.row-future:hover {
background-color: rgba(0, 140, 0, 0.25);
}
.tabulator .tabulator-row.row-today {
background-color: rgba(255, 140, 0, 0.2);
}
.tabulator .tabulator-row.row-today:hover {
background-color: rgba(255, 140, 0, 0.3);
}
.tabulator .tabulator-row.row-past {
background-color: rgba(200, 200, 200, 0.2);
}
.tabulator .tabulator-row.row-past:hover {
background-color: rgba(200, 200, 200, 0.35);
}
/* ==========================================================================
THUMBNAILS - Car photos in tables
Veľkosť meniť cez variables.css: --thumb-width, --thumb-height
========================================================================== */
.car-thumb {
width: var(--thumb-width);
height: var(--thumb-height);
object-fit: contain;
border-radius: var(--border-radius-sm);
display: block;
}
/* ==========================================================================
RESPONSIVE - Mobile first
========================================================================== */
/* Mobile (< 768px) */
@media (max-width: 767px) {
/* Search - full width */
.tabulator-global-search {
flex-wrap: wrap;
}
.tabulator-global-search input {
width: 100%;
min-width: 0;
}
.tabulator-global-search label {
width: 100%;
}
/* Column menu - full width dropdown, larger touch targets */
.tabulator-column-menu {
position: fixed;
left: 10px;
right: 10px;
top: auto;
bottom: 10px;
max-height: 60vh;
min-width: auto;
border-radius: 8px;
box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.tabulator-column-menu-item {
padding: 12px 16px;
min-height: 44px;
}
.tabulator-column-menu-item input[type="checkbox"] {
width: 20px;
height: 20px;
}
.tabulator-column-menu-header button {
padding: 10px 12px;
font-size: 13px;
min-height: 40px;
}
/* Column menu button */
.tabulator-columns-btn {
margin-left: 0;
}
/* Scroll slider - compact */
.tabulator-scroll-slider {
padding: 4px 8px;
}
.tabulator-scroll-slider__label {
font-size: 12px;
}
}
/* ── Badge & Action Button Components ── */
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
border: none;
}
.badge--success { background: #28a745; color: #fff; }
.badge--danger { background: #dc3545; color: #fff; }
.badge--info { background: #17a2b8; color: #fff; }
.badge--muted { background: #e9ecef; color: #6a6a6a; }
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 4px;
border: 1px solid #ddd;
background: #fff;
cursor: pointer;
font-size: 14px;
margin: 0 1px;
padding: 0;
transition: background 0.15s, border-color 0.15s;
}
.btn-icon:hover {
background: #f0f0f0;
border-color: #aaa;
}
/* Print button */
.tabulator-print-btn {
height: 28px;
padding: 0 10px;
font-size: 12px;
cursor: pointer;
background: #f8f8f8;
border: 1px solid #ccc;
border-radius: 3px;
white-space: nowrap;
}
.tabulator-print-btn:hover {
background: #e8e8e8;
}
/* === calendar-legend.css === */
/**
* Calendar Legend Styles
* Shared component for all calendar views (admin, instructor, student)
*/
.calendar-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 8px;
margin: 16px 0;
}
.calendar-legend__title {
font-weight: 600;
color: var(--color-primary);
font-size: 13px;
margin-right: 8px;
}
.calendar-legend__item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #555;
}
.calendar-legend__color {
width: 16px;
height: 16px;
border-radius: 3px;
flex-shrink: 0;
}
.calendar-legend__color--free {
background-color: #c0e8a0; /* calendar.css BEM */
}
.calendar-legend__color--trailer {
background-color: #FFFF33; /* .jazdat in ui8.css */
}
.calendar-legend__color--reserved {
background-color: #a0d0f0; /* calendar.css BEM */
}
.calendar-legend__color--cancelled {
background-color: #f0c0c0; /* calendar.css BEM */
}
.calendar-legend__color--empty {
background-color: #e8e8e8; /* calendar.css BEM */
}
.calendar-legend__color--extra-ride {
background-color: #DF2E1B; /* .prestoj in ui8.css */
}
.calendar-legend__color--kondicna { background-color: #12826C; }
.calendar-legend__color--doplnkova { background-color: #207AB7; }
.calendar-legend__color--trenazer { background-color: #9C27B0; }
.calendar-legend__color--kkv { background-color: #936F16; }
.calendar-legend__color--additional { background-color: #80FFFF; }
.calendar-legend__color--reserve-admin { background-color: rgb(238,170,238); }
.calendar-legend__color--reserve-instructor { background-color: rgb(247,186,74); }
.calendar-legend__color--nehoda { background-color: #B25E14; }
.calendar-legend__color--porucha { background-color: #6B7778; }
.calendar-legend__color--blocked-prestoj { background-color: #A66908; }
/* Teória (typ 11) — zelená (zdieľa farbu s voľnou jazdou, odlišená v ikonke) */
.calendar-legend__color--teoria { background-color: #c0e8a0; border: 2px solid #5a9a3a; }
/* Blokované vozidlo (car_blocks) — tmavá sivá s diagonálnymi pruhmi */
.calendar-legend__color--car-blocked {
background-color: #95a5a6;
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 3px,
rgba(0,0,0,0.25) 3px,
rgba(0,0,0,0.25) 6px
);
}
/* Servisné typy (obed, skúšky, porada, servis, STK, ...) — tmavosivá */
.calendar-legend__color--servis { background-color: #bdc3c7; border: 1px solid #95a5a6; }
/* Responsive */
@media (max-width: 768px) {
.calendar-legend {
padding: 10px 12px;
gap: 10px;
}
}
/* === progress-bar.css === */
/**
* Progress Bar Component
* BEM convention, CSS variables from variables.css
*/
/* ==========================================================================
FULL CARD VARIANT
========================================================================== */
.progress-card {
background: var(--color-bg);
border-radius: var(--border-radius-lg);
box-shadow: var(--box-shadow);
padding: 16px 20px;
margin-bottom: 16px;
text-align: left;
}
.progress-card__header {
font-size: var(--font-size-md);
font-weight: bold;
color: var(--color-text);
margin: 0 0 12px 0;
}
/* --- Main bar --- */
.progress-card__bar-wrapper {
margin-bottom: 8px;
}
.progress-card__bar {
height: 14px;
background: var(--color-primary-accent-bg);
border-radius: 7px;
overflow: hidden;
position: relative;
}
.progress-card__bar-fill {
height: 100%;
border-radius: 7px;
transition: width 0.4s ease;
}
.progress-card__bar-fill--low { background: linear-gradient(90deg, #ef4444, #f97316); }
.progress-card__bar-fill--mid { background: linear-gradient(90deg, #f59e0b, #eab308); }
.progress-card__bar-fill--high { background: linear-gradient(90deg, var(--color-primary-gradient-start), var(--color-primary-gradient-end)); }
.progress-card__bar-fill--complete { background: linear-gradient(90deg, #10b981, #059669); }
.progress-card__bar-fill--pulse {
animation: progress-pulse 2s ease-in-out infinite;
}
@keyframes progress-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.75; }
}
/* --- Milestones --- */
.progress-card__milestones {
position: relative;
height: 14px;
margin-top: 2px;
}
.progress-card__milestone {
position: absolute;
top: 0;
width: 2px;
height: 8px;
background: var(--color-text-light);
transform: translateX(-50%);
}
.progress-card__milestone::after {
content: attr(data-label);
position: absolute;
top: 9px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
color: var(--color-text-light);
white-space: nowrap;
}
.progress-card__milestone--passed {
background: var(--color-success);
}
.progress-card__milestone--passed::after {
color: var(--color-success-text, #146c43);
}
.progress-card__text {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-top: 4px;
}
.progress-card__text strong {
color: var(--color-text);
font-size: var(--font-size-base);
}
/* --- Trainer + Cvicisko row --- */
.progress-card__details {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px 20px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--color-border);
}
.progress-card__detail-item {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.progress-card__detail-item strong {
color: var(--color-text);
}
.progress-card__check {
color: var(--color-success-text, #146c43);
font-weight: bold;
margin-left: 2px;
}
.progress-card__detail-note {
flex-basis: 100%;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
font-style: italic;
}
/* ==========================================================================
INFO GRID
========================================================================== */
.progress-card__info-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px 16px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--color-border);
}
.progress-card__info-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
font-size: var(--font-size-sm);
min-width: 0;
}
.progress-card__info-icon {
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 50%;
background: var(--color-primary-accent-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--color-primary);
font-weight: bold;
}
.progress-card__info-content {
display: flex;
flex-direction: column;
min-width: 0;
}
.progress-card__info-label {
font-size: 10px;
color: var(--color-text-light);
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.progress-card__info-value {
color: var(--color-text);
font-weight: 600;
font-size: var(--font-size-sm);
line-height: 1.3;
}
/* ==========================================================================
EXAM READINESS
========================================================================== */
.progress-card__exam {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--color-border);
}
.progress-card__exam-title {
font-size: var(--font-size-sm);
font-weight: bold;
color: var(--color-text);
margin: 0 0 8px 0;
}
.progress-card__exam-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 6px 16px;
}
.progress-card__exam-item {
font-size: var(--font-size-sm);
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.progress-card__exam-item--ok {
color: var(--color-success-text, #146c43);
}
.progress-card__exam-item--missing {
color: var(--color-error-text, #b02a37);
font-weight: bold;
}
.progress-card__exam-icon {
font-weight: bold;
font-size: 14px;
width: 16px;
text-align: center;
}
/* Payment badge */
.progress-card__payment {
display: inline-block;
font-size: var(--font-size-sm);
padding: 1px 8px;
border-radius: 10px;
font-weight: 600;
}
.progress-card__payment--0 { background: var(--color-error-light); color: var(--color-error-text, #b02a37); }
.progress-card__payment--1 { background: var(--color-warning-light); color: var(--color-warning-text, #a04a08); }
.progress-card__payment--2 { background: var(--color-info-light); color: var(--color-info-text, #1d4ed8); }
.progress-card__payment--3 { background: var(--color-success-light); color: var(--color-success-text, #146c43); }
/* ==========================================================================
INLINE VARIANT
========================================================================== */
.progress-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.progress-inline__bar {
width: 200px;
height: 10px;
background: var(--color-primary-accent-bg);
border-radius: 5px;
overflow: hidden;
}
.progress-inline__bar-fill {
height: 100%;
border-radius: 5px;
transition: width 0.4s ease;
}
.progress-inline__bar-fill--low { background: linear-gradient(90deg, #ef4444, #f97316); }
.progress-inline__bar-fill--mid { background: linear-gradient(90deg, #f59e0b, #eab308); }
.progress-inline__bar-fill--high { background: linear-gradient(90deg, var(--color-primary-gradient-start), var(--color-primary-gradient-end)); }
.progress-inline__bar-fill--complete { background: linear-gradient(90deg, #10b981, #059669); }
.progress-inline__text {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
white-space: nowrap;
}
/* ==========================================================================
MINI VARIANT
========================================================================== */
.progress-mini {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
}
.progress-mini__bar {
flex: 1;
height: 6px;
background: var(--color-primary-accent-bg);
border-radius: 3px;
overflow: hidden;
min-width: 40px;
}
.progress-mini__bar-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
}
.progress-mini__text {
font-size: 11px;
color: var(--color-text-muted);
white-space: nowrap;
}
/* ==========================================================================
POPUP VARIANT — ultra compact, sits inside h3 title
========================================================================== */
.popup-progress {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 10px;
vertical-align: middle;
}
.popup-progress__bar {
width: 60px;
height: 6px;
background: rgba(255,255,255,0.3);
border-radius: 3px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
.popup-progress__fill {
display: block;
height: 100%;
border-radius: 3px;
background: #fff;
}
.popup-progress__text {
font-size: 11px;
font-weight: 600;
color: #fff;
white-space: nowrap;
background: rgba(0,0,0,0.25);
padding: 2px 7px;
border-radius: 3px;
}
@media (max-width: 480px) {
.popup-progress__bar { width: 40px; }
.popup-progress__text { font-size: 10px; }
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 767px) {
.progress-card {
padding: 12px;
}
.progress-card__info-grid {
grid-template-columns: 1fr 1fr;
}
.progress-card__exam-list {
flex-direction: column;
gap: 4px;
}
}
@media (max-width: 480px) {
.progress-card__info-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
SCHEDULED RIDES OVERLAY
========================================================================== */
.progress-card__bar-fill--scheduled {
position: absolute;
top: 0;
height: 100%;
border-radius: 0 8px 8px 0;
background: repeating-linear-gradient(
45deg,
var(--color-primary-light, #c9a0dc),
var(--color-primary-light, #c9a0dc) 4px,
var(--color-primary-lighter, #e0c8ec) 4px,
var(--color-primary-lighter, #e0c8ec) 8px
);
opacity: 0.7;
transition: width 0.8s ease;
}
.progress-card__scheduled-label {
color: var(--color-text-light);
font-size: 0.85em;
font-weight: normal;
}
/* Inline variant scheduled overlay */
.progress-inline__bar {
position: relative;
}
.progress-inline__bar-fill--scheduled {
position: absolute;
top: 0;
height: 100%;
background: repeating-linear-gradient(
45deg,
#c9a0dc,
#c9a0dc 3px,
#e0c8ec 3px,
#e0c8ec 6px
);
opacity: 0.7;
}