*,
*::before,
*::after {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Disable text selection globally, but allow selection in inputs/textarea/contenteditable */
html, body, body *:not(input):not(textarea):not([contenteditable="true"]) {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Make selection invisible as an extra precaution */
::selection { background: transparent; }

/* Prevent basic image copying/dragging via CSS fallback */
img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


  .section-header .tt-date-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px; height:38px;
    background: var(--primary-blue);
    color:#fff;
    border:none;
    border-radius:8px;
    font-size:1rem;
    cursor:pointer;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink:0;
    position: relative;
    overflow: hidden;
    contain: layout style paint; /* Performance: isolate element */
  }
  .section-header .tt-date-btn::before{
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: rgba(255,255,255,0.28);
    border-radius:50%;
    transform: translate(-50%,-50%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width, height;
  }
  .section-header .tt-date-btn:hover::before{ width:100%; height:100%; }
  .section-header .tt-date-btn:hover{
    background: var(--primary-orange);
    transform: scale(1.05) translateY(-2px);
  }
  .section-header .tt-date-btn:hover i {
    animation: chevron-push 0.3s ease;
  }
  .section-header .tt-date-btn i {
    transition: transform 0.2s ease;
  }
  /* Chevron left pushes left, chevron right pushes right */
  @keyframes chevron-push {
    0% { transform: translateX(0); }
    50% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
  }
  .section-header .tt-date-btn:hover .fa-chevron-right {
    animation: chevron-push-right 0.3s ease;
  }
  @keyframes chevron-push-right {
    0% { transform: translateX(0); }
    50% { transform: translateX(3px); }
    100% { transform: translateX(0); }
  }
  /* Active/click state animations for tt-date-btn */
  .section-header .tt-date-btn:active {
    transform: scale(0.9);
  }
  .section-header .tt-date-btn:active .fa-chevron-left {
    animation: tt-click-left 0.15s ease-out forwards;
  }
  .section-header .tt-date-btn:active .fa-chevron-right {
    animation: tt-click-right 0.15s ease-out forwards;
  }
  @keyframes tt-click-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-5px); }
  }
  @keyframes tt-click-right {
    0% { transform: translateX(0); }
    100% { transform: translateX(5px); }
  }
/* Mobile repaint stability tweaks (sticky headers and scroll containers) */
@media (max-width: 1039px) {
  .schedule-table thead th,
  .subst-grid thead th {
    will-change: transform, scroll-position;
    backface-visibility: hidden;
  }
  .subst-scroll,
  .schedule-container {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* Mobile repaint stability for custom-select dropdown */
@media (max-width: 1039px) {
  .custom-select .cs-list {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
  }
  .custom-select .cs-option,
  .custom-select .cs-option.cls-cat-ab,
  .custom-select .cs-option.cls-cat-cd,
  .custom-select .cs-option.cls-cat-e {
    -webkit-font-smoothing: antialiased;
    transform: none;
    will-change: auto;
    backface-visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  /* Marquee animaci nechat běžet - je to informační prvek, ne dekorativní */
}

/* Use Poppins as the global UI font */
/* NOTE: font is preloaded from the document <head> for better render performance */
:root {
  --ui-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Global performance optimizations */
* {
  /* Reduce repaints on box-sizing changes */
  box-sizing: border-box;
}

html {
  /* Enable smooth scrolling (respects prefers-reduced-motion) */
  scroll-behavior: smooth;
}

html, body {
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Optimize text rendering */
  font-feature-settings: "kern" 1;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.modal-open {
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Ensure form controls inherit the page font */
input, button, textarea, select, optgroup {
  font-family: inherit;
}

/* Performance: GPU acceleration for interactive elements */
button, a, .btn, .menu-btn {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* --- Mobile overflow safety overrides (ensure they win in cascade) --- */
@media (max-width: 1039px) {
  .subst-grid { table-layout: auto !important; }
  .subst-grid th.hour-head,
  .subst-grid td:not(.cls-col):not(.groups-col) { width: auto !important; }
  /* On small screens keep cell min width so columns remain scrollable
     instead of forcing each cell to 100% and hiding other columns. */
  .subst-grid .grid-cell { min-width: 70px !important; width: auto !important; }
  .subst-grid .grid-item { max-width: 100% !important; white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; }
}

/* --- Modal overlay (univerzální) - inspirováno popover designem --- */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
    /* removed blur for performance on weaker devices */
    backdrop-filter: none;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
  --modal-edge-gap: clamp(16px, 4vh, 32px);
  --modal-safe-top: 0px;
  --modal-safe-top: env(safe-area-inset-top);
  --modal-safe-bottom: 0px;
  --modal-safe-bottom: env(safe-area-inset-bottom);
  --modal-safe-left: 0px;
  --modal-safe-left: env(safe-area-inset-left);
  --modal-safe-right: 0px;
  --modal-safe-right: env(safe-area-inset-right);
  --modal-vp-height: 100vh;
  --modal-vp-width: 100vw;
  padding: calc(var(--modal-edge-gap) + var(--modal-safe-top))
           calc(var(--modal-edge-gap) + var(--modal-safe-right))
           calc(var(--modal-edge-gap) + var(--modal-safe-bottom))
           calc(var(--modal-edge-gap) + var(--modal-safe-left));
  box-sizing:border-box;
  overflow:auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  animation:modalOverlayFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-overlay.active{display:flex}

.modal-dialog{
  position:relative;
  width: min(420px, max(0px, calc(var(--modal-vp-width) - var(--modal-safe-left) - var(--modal-safe-right) - 2 * var(--modal-edge-gap))));
  max-width: min(420px, max(0px, calc(var(--modal-vp-width) - var(--modal-safe-left) - var(--modal-safe-right) - 2 * var(--modal-edge-gap))));
  max-height: max(0px, calc(var(--modal-vp-height) - var(--modal-safe-top) - var(--modal-safe-bottom) - 2 * var(--modal-edge-gap)));
  overflow:auto;
  box-sizing:border-box;
  margin:0 auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  border-radius:20px;
  background:linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border:2px solid var(--primary-blue, #1f6feb);
  /* shadows removed to reduce paint cost */
  animation:modalDialogSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, rgb(255 180 90) 0%, rgb(255 225 180) 45%, rgb(42 129 186) 100%);
  border-radius: 20px 20px 0 0;
  pointer-events: none;
}

.modal-content{
  padding:1.5rem;
  color:var(--text, #1e293b);
  line-height:1.5;
  font-size:0.9rem;
}

.modal-title{
  font-weight:700;
  font-size:1.1rem;
  margin:0 0 1rem;
  color:var(--primary-blue, #1f6feb);
  letter-spacing:0.5px;
  padding-right:2rem;
}

.modal-section{
  margin:0.8rem 0;
}

.qr-login-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.qr-login-canvas-wrap {
  width: 240px;
  height: 240px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 1px solid rgba(0,0,0,0.08);
}

.qr-login-hint {
  color: var(--text-light, #64748b);
  font-size: 0.85rem;
}

.qr-login-timer {
  font-size: 0.95rem;
  color: var(--text, #1e293b);
  margin-top: 0.25rem;
  font-weight: 600;
}

.qr-login-actions .btn { padding: 0.35rem 0.6rem; font-size: 0.9rem; }

.qr-login-link {
  word-break: break-all;
  font-size: 0.8rem;
}

.qr-login-fallback {
  color: var(--text-light, #64748b);
  font-size: 0.85rem;
}

.modal-section h4{
  font-size:0.85rem;
  margin:0 0 0.4rem;
  color:var(--text-light, #64748b);
  font-weight:600;
}

.modal-close{
  position:absolute;
  top:0.8rem;
  right:1rem;
  z-index: 2;
  pointer-events: auto;
  background:transparent;
  border:none;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  color:var(--text-light, #64748b);
  padding:0.2rem;
  border-radius:50%;
  transition: background-color 0.2s ease, 
              color 0.2s ease, 
              transform 0.2s ease;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  contain: layout style paint; /* Performance optimization */
}

.modal-close:hover{
  background:var(--danger, #dc2626);
  color:white;
  transform:scale(1.1);
}

@keyframes modalOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalDialogSlideIn {
  from { 
    opacity: 0; 
    transform: translateY(-20px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

/* Performance: Hint browser about animation properties */
.modal-overlay.active {
  will-change: opacity;
}

.modal-content {
  will-change: opacity, transform;
}

/* Remove will-change after animation completes */
.modal-overlay.active:not(:hover):not(:focus-within) {
  will-change: auto;
}

.modal-content:not(:hover):not(:focus-within) {
  will-change: auto;
}

@media (max-width: 640px){
  .modal-overlay{
    --modal-edge-gap: clamp(14px, 6vh, 28px);
  }
  .modal-dialog{
    border-radius:16px;
  }
  .modal-dialog::before {
    border-radius: 16px 16px 0 0;
  }
}

/* Allow modal to align to top when space is constrained (mobile dynamic chrome) */
.modal-overlay.align-top{
  align-items: flex-start !important;
}

/* --- Performance optimalizace pro mobilní zařízení --- */
@media (max-width: 1039px) {
  /* Redukce backdrop-filter na mobilech pro lepší výkon */
  .entity-item,
  .sidebar,
  .mobile-overlay {
    backdrop-filter: none !important;
  }
  
  /* Zjednodušené box-shadow na mobilech (shadows removed) */
  
  /* Vypnutí hover efektů na touch zařízeních */
  @media (hover: none) {
    .lesson-box:hover,
    .entity-item:hover,
    .subst-card:hover,
    .schedule-table tbody tr:hover {
      transform: none !important;
    }
  }
  
  /* --- OPRAVA: Mobilní scroll problémy s text renderováním --- */
  
  /* PROBLÉM: Na některých mobilních zařízeních při horizontálním scrollu rozvrhu
     dochází k situaci, kdy se text v lesson-box nezobrazuje (mizí), přestože
     pozadí zůstává viditelné. Text se znovu objeví až po kliknutí na hodinu.
     
     PŘÍČINA: Hardware acceleration (transform: translateZ(0)) + will-change
     optimalizace v kombinaci s komplexními animacemi způsobují problémy
     s invalidací textových uzlů během scrollu.
     
     ŘEŠENÍ: Na mobilech (<= 1039px) vypneme tyto optimalizace a přidáme
     stabilnější renderovací kontext. */
  
  /* Vypnutí hardware acceleration a will-change na lesson-box pro mobily */
  .lesson-box {
    will-change: auto !important; /* Vypnout will-change optimalizace */
    transform: none !important; /* Vypnout translateZ(0) hardware acceleration */
    contain: none !important; /* Vypnout containment */
    isolation: isolate; /* Zajistit proper stacking context */
  }
  
  /* Lepší scroll chování pro schedule kontejner */
  .content-section .schedule-container {
    -webkit-overflow-scrolling: touch;
    contain: none !important; /* Vypnout containment na kontejneru */
    isolation: isolate;
  }
  
  /* Zajistit stabilní vykreslování textu během scrollu */
  .lesson-box .lb-subj,
  .lesson-box .lb-teacher,
  .lesson-box .lb-room,
  .lesson-box .lb-group {
    will-change: auto !important;
    transform: none !important;
    contain: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  /* Hover efekty úplně vypnout na mobilech */
  .lesson-box:hover {
    transform: none !important;
    will-change: auto !important;
  }
  
  /* Ensure proper layering and no transform issues on mobile */
  .schedule-table {
    transform: none !important;
    will-change: auto !important;
  }
  
  /* Oprava pro mobilní problémy s vykreslováním suplování */
  .subst-grid,
  .subst-card,
  .substitutions-list {
    will-change: auto !important;
    transform: none !important;
    contain: none !important;
    backface-visibility: visible !important;
  }
  
  /* Force repaint trigger pro problémové elementy */
  .subst-grid::after,
  .subst-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0.001;
    pointer-events: none;
    z-index: -1;
  }
  
  /* Stabilní styling pro substituční tabulky */
  .subst-grid th,
  .subst-grid td {
    will-change: auto !important;
    transform: none !important;
    backface-visibility: visible;
  }
  
  /* Performance: Optimize scroll containers */
  .subst-scroll,
  .schedule-container {
    contain: layout style paint;
    overflow: auto;
    overscroll-behavior: auto; /* Allow scroll chaining to parent on mobile */
  }
  
  /* Prevent layout thrashing během touch scrollu */
  .content-section.active {
    contain: layout style;
  }
  
  /* Smooth scroll behavior ale pouze pokud není reduced motion */
  @media (prefers-reduced-motion: no-preference) {
    .content-section.active {
      scroll-behavior: auto; /* Rychlejší než smooth na mobilech */
    }
  }
}

/* --- Prefers-reduced-motion optimalizace --- */
/* Omezené globální pravidlo - pouze pro scroll a kritické animace */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
  
  /* Vypnout pouze dlouhé/opakující se animace */
  .loading-spinner,
  .spinner,
  [class*="animate-"],
  [class*="loading"] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --- Dodatečné optimalizace pro mobilní problémy s vykreslováním --- */
@media (max-width: 1039px) {
  /* Na mobilech zpomalit blikající animace aby nebyly příliš rychlé */
  :root {
    --animation-blink: 3.5s;
  }
  
  /* Vylepšené touch handling pro kontrolní elementy */
  .subst-controls,
  .subst-date-controls,
  .class-selector,
  .teacher-selector,
  .room-selector {
    touch-action: manipulation;
    /* Avoid aggressive containment which can cause children to not repaint on some mobile browsers */
    contain: none !important;
    position: relative;
    z-index: 5;
  }
  
  /* Force hardware acceleration pouze tam kde je potřeba a stabilně funguje */
  .menu-btn,
  .btn,
  button {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
  }
  
  /* Vypnout problémové optimalizace na obsahových kontejnerech */
  .content-section,
  .timetable-scale,
  .schedule-container {
    contain: none !important;
    will-change: auto !important;
  }

  /* Repaint helper for subst-controls: small invisible pseudo-element toggles paint in some browsers */
  .subst-controls::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 1px;
    height: 1px;
    opacity: 0.001;
    pointer-events: none;
    transform: translateZ(0);
  }
  
  /* Stabilní text rendering pro všechny významné textové elementy */
  .lesson-box *,
  .subst-card *,
  .subst-grid *,
  th,
  td {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  /* Speciální handling pro iOS Safari a Chrome na Android */
  @supports (-webkit-touch-callout: none) {
    /* iOS Safari optimalizace */
    .content-section.active {
      -webkit-overflow-scrolling: touch;
      isolation: isolate;
    }
    
    .subst-grid,
    .schedule-table {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
  }
  
  /* Android Chrome specific fixes */
  @media screen and (-webkit-min-device-pixel-ratio: 1) and (max-width: 1039px) {
    .lesson-box,
    .subst-card {
      -webkit-perspective: 1000px;
      perspective: 1000px;
    }
  }
  
  /* Force layout stability po scrollu */
  .content-section.active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    z-index: -999;
    transform: translateZ(0);
  }
}

/* --- Highlight current hour --- */
.hour-now {
  background: linear-gradient(180deg, rgba(31,111,235,0.06), rgba(31,111,235,0.03));
  border-bottom: 3px solid var(--primary-blue, #1f6feb);
}
.hour-now .hh-num { font-weight: 700; color: var(--primary-blue, #1f6feb); }
.hour-now .hh-time { color: var(--text-dark, #0f172a); font-weight:600; }

/* Explicitní styling pro schedule-table hlavičky, když jsou označeny jako hour-now */
.schedule-table th.hour-head.hour-now {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%);
  color:#fff !important;
  /* Zachovat sticky pozici z existujícího th */
  position: sticky !important;
  /* shadows removed to reduce paint cost */
  transition: background .3s ease;
}
.schedule-table th.hour-head.hour-now::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,0.35), transparent 60%);
  mix-blend-mode: screen;
}
.schedule-table th.hour-head.hour-now .hh-num,
.schedule-table th.hour-head.hour-now .hh-time {
  color: #000000 !important;
  background-color: #ffffff42;
  border-radius: 5px;
  padding: 3px;
}
.hh-num, .hh-time {
  background-color: #00000042;
  border-radius: 5px;
  padding: 3px;
}

/* Highlight v tabulkách suplování (subst-grid) */
.subst-grid .hour-head.hour-now {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%);
  color:#fff !important;
  /* Zachovat sticky pozici, pokud je nastavena */
  position: sticky !important;
  /* highlight inset shadow removed */
  transition: background .3s ease;
}
.subst-grid .hour-head.hour-now::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,0.35), transparent 60%);
  mix-blend-mode: screen;
}

/* Apply same hour-now styling to absence matrices (subst-matrix) */
.subst-matrix .hour-head.hour-now {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%);
  color:#fff !important;
  position: sticky !important;
  transition: background .3s ease;
}
.subst-matrix .hour-head.hour-now::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,0.35), transparent 60%);
  mix-blend-mode: screen;
}

/* Theme-specific absence header overrides to match theme .hour-now visuals */

body.theme-caro .subst-matrix .hour-head.hour-now { border-bottom-color: #ff6f00; color: #fff !important; position: sticky !important; }
body.theme-caro .subst-matrix .hour-head.hour-now .hh-num { color: #ff6f00; }

body.theme-valentine .subst-matrix .hour-head.hour-now { border-bottom-color: #e91e63; color: #fff !important; position: sticky !important; }
body.theme-valentine .subst-matrix .hour-head.hour-now .hh-num { color: #e91e63; }

body.theme-vanoce .subst-matrix .hour-head.hour-now { border-bottom-color: #c62828; color: #fff !important; position: sticky !important; }
body.theme-vanoce .subst-matrix .hour-head.hour-now .hh-num { color: #c62828; }

body.theme-svatek .subst-matrix .hour-head.hour-now { border-bottom-color: #D7141A; color: #fff !important; position: sticky !important; }
body.theme-svatek .subst-matrix .hour-head.hour-now .hh-num { color: #D7141A; }


  /* Poppins se načítá lokálně z assets/fonts.css (lokální @font-face). */

  /* Vylepšené animační proměnné pro konzistenci */
  :root {
    /* Easing funkcí pro různé typy animací */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);          /* Standard Material Design */
    --ease-accelerated: cubic-bezier(0.4, 0, 1, 1);         /* Zrychlený pohyb */
    --ease-decelerated: cubic-bezier(0, 0, 0.2, 1);         /* Zpomalený pohyb */
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);          /* Zdůrazněný pohyb */
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);  /* Bounce efekt */
    
    /* Timing pro různé typy interakcí */
  --duration-instant: 0.06s;   /* Okamžité feedback (faster) */
  --duration-fast: 0.12s;      /* Rychlé transitions (faster) */
  --duration-standard: 0.18s;  /* Standardní timing (faster) */
  --duration-medium: 0.24s;    /* Střední animace (faster) */
  --duration-slow: 0.18s;      /* Pomalé animace (rychlejší) */
  --duration-loading: 0.18s;   /* Loading animace (rychlejší) */
  --animation-blink: 2.5s;     /* Blikající efekty (na PC) */
    /* Globální font aplikace - upravte podle potřeby (např. jiný Google font nebo lokální @font-face) */
    --app-font: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  /* Global font rules - enforce a single font across the whole page */
  /* Main document font (uses --app-font) */
  html, body {
    font-family: var(--app-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Ensure form controls and common UI elements use the same font */
  input, textarea, select, button, [role="button"],
  .btn, .entity-item, .custom-select .cs-trigger, .custom-select .cs-option {
    font-family: var(--app-font) !important;
  }

  /* If you truly want to force everything (including <code>/<pre>), uncomment below */
  /* * { font-family: var(--app-font) !important; } */

  /* Globální micro-interactions */
  * {
    /* Vylepšený focus ring pro přístupnost */
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color var(--duration-fast) var(--ease-standard);
  }

  *:focus-visible {
    outline-color: var(--primary-blue);
    outline-offset: 2px;
  }

  /* Jemný click efekt pro všechny clickable elementy */
  button,
  [role="button"],
  .clickable,
  .btn,
  .entity-item,
  .custom-select .cs-trigger,
  .custom-select .cs-option {
    position: relative;
    overflow: hidden;
  }

  /* Remove scale/press animation and prevent ripple pseudo-element
     so buttons don't show a white circle or extra shadow on click. */
  button:active,
  [role="button"]:active,
  .clickable:active,
  .btn:active,
  .entity-item:active,
  .custom-select .cs-trigger:active,
  .custom-select .cs-option:active {
  /* keep accessibility (focus styles) but disable click animations */
  transform: none !important;
  transition: none !important;
  }

  /* Disable ripple pseudo-element used for click animation */
  button::before,
  .btn::before {
    display: none !important;
    content: none !important;
  }

  /* Ensure active pseudo-element cannot appear */
  button:active::before,
  .btn:active::before {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  /* Disable default mobile tap highlight (iOS/Android) */
  button,
  .btn,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  /* Base button styles (used also in announcement modal) - popover inspired */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    padding:.5rem .85rem;
    border-radius:8px;
    border:1px solid var(--border, #e2e8f0);
    background:#fff;
    color:var(--text, #1e293b);
    cursor:pointer;
    text-decoration:none;
    font-weight:600;
    font-size:0.85rem;
    transition:all 0.2s ease;
  }
  .btn:hover{
    background:#f2f4f8;
  }
  .btn--primary{
    background:var(--primary-blue, #1f6feb);
    border-color:var(--primary-blue, #1f6feb);
    color:#fff;
    /* primary button shadow removed */
  }
  .btn--primary:hover{
    filter:brightness(1.03);
    /* hover shadow removed */
  }

  /* Dodatečné CSS třídy pro JS animace suplování */
  .subst-animation-loaded {
    animation: none;
  }

  .subst-card-loaded {
    animation: none;
    will-change: auto;
  }

  .subst-grid-loaded {
    animation: none;
    will-change: auto;
  }

  /* Custom select search input styling - vizuálně integrované s aplikací */
  .custom-select .cs-search-wrap { 
    display: none; 
    padding: .5rem .65rem .35rem; 
  }
  
  .custom-select.open .cs-search-wrap { 
    display: block; 
  }
  
  .custom-select .cs-search-wrap { 
    position: relative; 
  }
  
  .custom-select .cs-search {
    width: 100%;
    padding: .55rem 1rem .55rem 3rem;
    border-radius: 12px;
    border: 2px solid rgba(42, 129, 186, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.98));
    font-size: .95rem;
    color: var(--text, #1e293b);
    font-family: var(--app-font);
    box-sizing: border-box;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
    -webkit-appearance: none;
    /* shadows removed to improve performance */
  }
  
  .custom-select .cs-search::placeholder { 
    color: rgba(30, 41, 59, 0.45); 
  }
  
  /* Use outline for focus to keep accessibility without shadows */
  .custom-select .cs-search:focus { 
    outline: 3px solid rgba(42, 129, 186, 0.15);
    border-color: var(--primary-blue); 
    background: #ffffff;
  }

  /* Inline SVG lupa jako pozadí (více konzistentní než ikonová fonta) */
  .custom-select .cs-search {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232a81ba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 18px 18px;
  }

  .custom-select .cs-list{ max-height: 18rem; overflow: auto; padding: .25rem; }
  .custom-select .cs-list .cs-option[style*="display: none"]{ display: none !important; }
  .custom-select .cs-list::-webkit-scrollbar{ height:8px; width:8px; }
  .custom-select .cs-list::-webkit-scrollbar-thumb{ background: rgba(15,23,42,0.06); border-radius:6px; }

  /* When the search is moved into the trigger (inline) */
  .custom-select .cs-trigger + .cs-search-wrap{ display:none; }
  .custom-select.open .cs-trigger + .cs-search-wrap{ display:block; }
  .custom-select .cs-search-wrap.in-trigger{ display:block; position:absolute; left:8px; right:8px; top:calc(100% + 6px); z-index:40; }
  .custom-select .cs-search-wrap.in-trigger .cs-search{ border-radius:8px; padding-left:2.6rem; }
  .custom-select .cs-trigger{ position:relative; }
  .custom-select .cs-trigger:focus{ outline: none; }

  .subst-row-loaded {
    animation: none;
    will-change: auto;
  }

  @keyframes substRowSlideIn {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Vylepšení substitutions wrapper s animacemi */
  .substitutions-wrapper {
    animation: none;
  }

  /* Tipy (subst-tip) byly odstraněny z projektu */

  /* Vysvětlivky pro absence učitelů */
  .subst-legend {
    padding: 3px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
  }

  .subst-legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .subst-legend-item:last-child {
    margin-bottom: 0;
  }

  .legend-key {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #374151;
    background: #e5e7eb;
    padding: 2px 6px;
    border-radius: 3px;
    min-width: 80px;
    text-align: center;
  }

  .legend-desc {
    color: #6b7280;
    font-style: italic;
  }

  @keyframes substWrapperFadeIn {
    from {
      opacity: 0;
      transform: scale(0.98);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Vylepšené animace pro subst matrix s lepší performance */
  .subst-matrix {
    animation: none;
    transition: none;
    will-change: auto;
    transform: none;
  }

  /* Zrušeno: hover efekty na celé .subst-matrix */

  @keyframes substMatrixSlideIn {
    from {
      opacity: 1;
      transform: translateY(0) rotateX(0deg);
    }
    to {
      opacity: 1;
      transform: translateY(0) rotateX(0deg);
    }
  }

  /* Vylepšené hover efekty pro matrix buňky s performance optimalizací */
  .subst-matrix td {
    transition: all var(--duration-fast) var(--ease-standard);
    will-change: transform, background-color;
  }

  /* Mobilní override pro problémové matrix animace */
  @media (max-width: 1039px) {
    .subst-matrix {
      animation: none !important;
      will-change: auto !important;
      transform: none !important;
    }
    .subst-matrix td {
      transition: none !important;
      will-change: auto !important;
      transform: none !important;
    }
  }

  /* Zrušeno: hover zvýraznění buněk v .subst-matrix */

  .subst-matrix td.ent {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Zrušeno: hover zvýraznění ent buněk v .subst-matrix */

  /* Školní nástěnka - Modrá a oranžová barevná paleta */
  :root {
    --primary-blue: #2a81ba;
    --light-blue: #0a4a75;
    --primary-orange: #f4a024;
    --light-orange: #976213;
    --sidebar-width: 290px;
    /* Tri-color pro kategorie (A/B, C/D, E) – použijeme i pro scrollbary a loading bar */
    --cls-ab: #d7338a;
    --cls-cd: #f9af15;
    --cls-e: #56af31;
    --tri-gradient-h: linear-gradient(90deg, rgba(255,180,90,0.85) 0%, rgba(255,225,180,0.85) 45%, rgb(42 129 186) 100%) !important;
    --tri-gradient-v: linear-gradient(180deg, rgba(255,180,90,0.85) 0%, rgba(255,225,180,0.85) 45%, rgb(42 129 186) 100%) !important;
    --bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    --panel: #ffffff;
    --text: #1e293b;
    --text-light: #64748b;
    --border: #e2e8f0;
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-hover: rgba(0, 0, 0, 0.15);
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --glass: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    /* 1% viewport výšky – default (vh), přepneme na dvh v @supports a na mobilech ještě JS nastaví přesnou px hodnotu */
    --app-vh: 1vh;
  }

  /* Gradient variable using the primary blues */
  :root {
    --primary-gradient: linear-gradient(90deg, var(--primary-blue), var(--light-blue));
  }

  /* Utility for gradient text using primary-blue -> light-blue */
  .text-gradient-primary {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* Apply gradient headings to main H2/H3 uses that previously used primary-blue */
  .section-header h2,
  .subst-block h3,
  .info-card h3,
  .tt-pop-head,
  .canteen-day-group h3 {
    /* fallback */
    color: var(--primary-blue);
    /* gradient */
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .subst-block h3 {
    font-size: 1.5rem;
  }

  /* Preferuj nové jednotky 1dvh, když jsou k dispozici (správně reagují na mobilní lišty) */
  @supports (height: 100dvh) {
    :root { --app-vh: 1dvh; }
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* ===== Custom Select Component ===== */
  .visually-hidden-select { position:absolute !important; left:-9999px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; }
  .custom-select { position:relative; display:inline-block; font-size:1.05rem; }
  
  .custom-select .cs-trigger { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 1rem; 
    background: linear-gradient(180deg, #ffffff, #f4a02447);
    border: 2.5px solid var(--border); 
    border-radius: 16px; 
    padding: 0.8rem 2.5rem 0.8rem .8rem; 
    width: auto;
    cursor: pointer; 
    font-weight: 600; 
    color: var(--text); 
  /* shadows removed to reduce paint cost */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; 
    font-size: 1.05rem; 
    will-change: transform, border-color;
    overflow: hidden;
  }
  
  .custom-select .cs-trigger::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(42, 129, 186, 0.08) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  
  .custom-select .cs-trigger:hover { 
    border-color: var(--light-blue);
    transform: translateY(-2px) translateZ(0);
    background: linear-gradient(0deg, #ffffff, #f4a02447);
  }
  
  .custom-select .cs-trigger:hover::before {
    opacity: 1;
  }
  
  .custom-select .cs-trigger:hover::after {
    width: 100%;
  }
  
  .custom-select.open .cs-trigger {
    border-color: var(--primary-blue);
    /* shadows removed to reduce paint */
    background: linear-gradient(180deg, #ffffff, #f4a02447);
  }
  
  .custom-select.open .cs-trigger::after {
    width: 100%;
    background: var(--primary-blue);
  }
  
  .custom-select .cs-trigger:focus { 
    /* Use outline for focus rather than box-shadow */
    outline: 4px solid rgba(42, 129, 186, 0.25);
    border-color: var(--primary-blue);
  }
  
  .custom-select .cs-arrow { 
    position: absolute; 
    right: 1.2rem; 
    top: 50%; 
    width: 16px; 
    height: 16px; 
    transform: translateY(-50%); 
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .custom-select .cs-arrow:before { 
    content: ""; 
    display: block; 
    width: 100%; 
    height: 100%; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%232a81ba' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* removed drop-shadow filter for performance */
    filter: none;
  }
  
  .custom-select.open .cs-arrow:before { 
    transform: rotate(180deg);
  }
  
  .custom-select .cs-list { 
    list-style: none; 
    margin: 8px 0 0; 
    padding: 12px; 
    position: absolute; 
    left: 0; 
    right: auto; 
    top: 100%; 
    background: linear-gradient(to bottom, #ffffff, #fafcff);
    border: 2.5px solid var(--primary-blue); 
    border-radius: 16px; 
    max-height: 420px; 
    overflow: auto; 
  z-index: 1200; 
  /* shadows removed from dropdown */
    display: none;
    /* removed heavy backdrop blur for performance */
    backdrop-filter: none;
    min-width: 300px; /* Stabilní šířka drop-downu nezávisle na šířce tlačítka */
  }
  /* Při otevření drž původní širší základ (aby dropdown nezasahoval pod sidebar a zarovnání bylo stabilní) */
  .custom-select.open .cs-trigger{ min-width: 300px; }

  /* Mobile: prevent dropdown from extending beyond viewport */
  @media (max-width: 1039px) {
    .custom-select .cs-list {
      /* Match width of trigger button instead of fixed min-width */
      min-width: 0;
      width: 100%;
      /* Ensure dropdown stays within viewport boundaries */
      left: 0;
      right: 0;
      max-width: 100%;
    }
    .custom-select.open .cs-trigger {
      /* Don't force wider trigger on mobile */
      min-width: 0;
    }
  }
  
  .custom-select.open .cs-list { 
    display: block; 
    animation: dropdownSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  @keyframes dropdownSlideIn {
    from {
      opacity: 0;
      transform: translateY(-10px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  .custom-select .cs-list::-webkit-scrollbar {
    width: 8px;
  }
  
  .custom-select .cs-list::-webkit-scrollbar-track {
    background: rgba(42, 129, 186, 0.05);
    border-radius: 4px;
    margin: 4px;
  }
  
  .custom-select .cs-list::-webkit-scrollbar-thumb {
    background: rgba(42, 129, 186, 0.3);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .custom-select .cs-list::-webkit-scrollbar-thumb:hover {
    background: rgba(42, 129, 186, 0.5);
  }
  
  .custom-select .cs-option { 
    padding: .85rem 1rem; 
    border-radius: 12px; 
    cursor: pointer; 
    line-height: 1.35; 
    position: relative; 
    font-size: .98rem; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: background-color, transform;
    margin-bottom: .3rem;
    border: 1.5px solid transparent;
  }
  
  .custom-select .cs-option::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--primary-blue);
    border-radius: 0 2px 2px 0;
  }
  
  .custom-select .cs-option:hover, 
  .custom-select .cs-option:focus { 
    background: linear-gradient(135deg, #eef5ff 0%, #f0f7ff 100%);
    outline: none; 
    transform: translateX(6px) translateZ(0);
    /* shadow removed */
    border-color: rgba(42, 129, 186, 0.2);
  }
  
  .custom-select .cs-option:hover::before {
    height: 50%;
  }
  
  .custom-select .cs-option.selected { 
    background: linear-gradient(135deg, var(--primary-blue) 0%, #3b95c7 100%);
    color: #fff; 
    font-weight: 600; 
    transform: translateX(4px) translateZ(0);
    border-color: rgba(255, 255, 255, 0.2);
  }
  
  .custom-select .cs-option.selected::before {
    height: 70%;
    background: #ffffff;
  }
  
  .custom-select .cs-option.last-saved:not(.selected) { 
    /* inset border highlight kept, shadow removed */
    border-color: var(--primary-orange);
  }
  
  .custom-select .cs-option.cls-cat-ab { background: linear-gradient(135deg, #D7338A15 0%, #D7338A22 100%); }
  .custom-select .cs-option.cls-cat-cd { background: linear-gradient(135deg, #F9AF1510 0%, #F9AF1522 100%); }
  .custom-select .cs-option.cls-cat-e  { background: linear-gradient(135deg, #56AF3115 0%, #56AF3122 100%); }
  .custom-select .cs-option.cls-cat-ab.selected { background: linear-gradient(135deg, #D7338A 0%, #e04a9b 100%); }
  .custom-select .cs-option.cls-cat-cd.selected { background: linear-gradient(135deg, #F9AF15 0%, #fbbf3d 100%); }
  .custom-select .cs-option.cls-cat-e.selected  { background: linear-gradient(135deg, #56AF31 0%, #6bc547 100%); }

  /* Make entity grid items follow the same category tinting as custom-select options */
  .entity-grid-item.cls-cat-ab { background: linear-gradient(135deg, #D7338A15 0%, #D7338A22 100%); color: var(--text); border-color: var(--border); }
  .entity-grid-item.cls-cat-cd { background: linear-gradient(135deg, #F9AF1510 0%, #F9AF1522 100%); color: var(--text); border-color: var(--border); }
  .entity-grid-item.cls-cat-e  { background: linear-gradient(135deg, #56AF3115 0%, #56AF3122 100%); color: var(--text); border-color: var(--border); }

  /* Stronger solid colour when active/selected or hovered to match selected cs-option */
  .entity-grid-item.cls-cat-ab.selected,
  .entity-grid-item.cls-cat-ab:hover { background: linear-gradient(135deg, #D7338A 0%, #e04a9b 100%); color: #fff; border-color: var(--primary-blue); }
  .entity-grid-item.cls-cat-cd.selected,
  .entity-grid-item.cls-cat-cd:hover { background: linear-gradient(135deg, #F9AF15 0%, #fbbf3d 100%); color: #000; border-color: var(--primary-blue); }
  .entity-grid-item.cls-cat-e.selected,
  .entity-grid-item.cls-cat-e:hover  { background: linear-gradient(135deg, #56AF31 0%, #6bc547 100%); color: #fff; border-color: var(--primary-blue); }

  /* Nové třídy pro custom select generované JS */
  .custom-select .custom-select__button { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 1rem; 
    background: linear-gradient(180deg, #ffffff, #f0f4f9);
    border: 2.5px solid var(--border); 
    border-radius: 16px; 
    padding: 1.1rem 3.2rem 1.1rem 1.4rem; 
    min-width: 300px; 
    cursor: pointer; 
    font-weight: 600; 
    color: var(--text); 
  /* shadows removed from custom-select button */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; 
    font-size: 1.05rem; 
    width: 100%;
  }
  
  .custom-select .custom-select__button:hover { 
    border-color: var(--light-blue);
    transform: translateY(-2px);
    /* hover shadow removed */
    background: linear-gradient(180deg, #ffffff, #f0f4f9);
  }
  
  .custom-select .custom-select__button:focus { 
    /* use outline for focus instead of shadow */
    outline: 4px solid rgba(42, 129, 186, 0.25);
    border-color: var(--primary-blue);
  }
  
  .custom-select .custom-select__arrow { 
    position: absolute; 
    right: 1.2rem; 
    top: 50%; 
    width: 16px; 
    height: 16px; 
    transform: translateY(-50%); 
    pointer-events: none; 
    color: var(--primary-blue); 
    display: inline-flex; 
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .custom-options { 
    list-style: none; 
    margin: 8px 0 0; 
    padding: 12px; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 100%; 
    background: linear-gradient(to bottom, #ffffff, #fafcff);
    border: 2.5px solid var(--primary-blue); 
    border-radius: 16px; 
    max-height: 420px; 
    overflow: auto; 
    z-index: 500; 
  /* shadow removed */
    /* removed backdrop blur for performance */
    backdrop-filter: none;
  }
  
  .custom-option { 
    padding: .85rem 1rem; 
    border-radius: 12px; 
    cursor: pointer; 
    line-height: 1.35; 
    position: relative; 
    font-size: .98rem; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: .3rem;
    border: 1.5px solid transparent;
  }
  
  .custom-option:hover, 
  .custom-option:focus { 
    background: linear-gradient(135deg, #eef5ff 0%, #f0f7ff 100%);
    outline: none;
    transform: translateX(6px);
    /* shadow removed */
    border-color: rgba(42, 129, 186, 0.2);
  }
  
  .custom-option[aria-selected="true"] { 
    background: linear-gradient(135deg, var(--primary-blue) 0%, #3b95c7 100%);
    color: #fff; 
    font-weight: 600;
    transform: translateX(4px);
    /* shadow removed */
    border-color: rgba(255, 255, 255, 0.2);
  }
  
  .custom-option.last-saved:not([aria-selected="true"]) { 
    /* inset highlight kept, shadow removed */
    border-color: var(--primary-orange);
  }
  
  .custom-option.cls-cat-ab { background: linear-gradient(135deg, #D7338A15 0%, #D7338A22 100%); }
  .custom-option.cls-cat-cd { background: linear-gradient(135deg, #F9AF1510 0%, #F9AF1522 100%); }
  .custom-option.cls-cat-e  { background: linear-gradient(135deg, #56AF3115 0%, #56AF3122 100%); }
  .custom-option.cls-cat-ab[aria-selected="true"] { background: linear-gradient(135deg, #D7338A 0%, #e04a9b 100%); }
  .custom-option.cls-cat-cd[aria-selected="true"] { background: linear-gradient(135deg, #F9AF15 0%, #fbbf3d 100%); }
  .custom-option.cls-cat-e[aria-selected="true"]  { background: linear-gradient(135deg, #56AF31 0%, #6bc547 100%); }

  /* Skryje nativní select použitý pro logiku, zachová přístupnost */
  .select--hidden { position:absolute !important; left:-9999px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; }

  body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    color: var(--text);
    /*line-height: 1.6;*/
    overflow: hidden;
    font-weight: 400;
    /* Prevence náhodných scroll jumps na mobilech */
    overflow-anchor: none;
    scroll-behavior: auto;
  }

  .app-container {
  display: flex;
  height: calc(var(--app-vh) * 100);
    width: 100vw;
  }

  /* Hlavní obsah */
  .main-content {
    flex: 1;
    background: var(--bg);
    overflow-y: auto;
  }

  .content-area {
    background: linear-gradient(135deg, rgb(244 160 36 / 56%) 0%, rgb(42 129 186 / 52%) 100%) !important;
    padding: 0.5rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    height: 100%;
  }

  /* Note: bottom navigation removed; no extra bottom padding needed */

  /* U suplování potřebujeme, aby celá stránka mohla scrollovat (větší mřížka) */
  .content-area.auto-height {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .content-area.auto-height .content-section#substitutions {
    overflow: visible;
  }

  .content-section {
    display: none;
    height: 100%;
    overflow: hidden;
    /* Rozvrhové sekce budou mít vlastní scroll přes schedule-container */
  }

  .content-section.active {
    display: flex;
    flex-direction: column;
  }

  /* Úprava pro rozvrh sekce */
  .content-section .schedule-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto; /* Povolit horizontální scroll pro mobilní zařízení */
    touch-action: auto; /* Ensure native touch scrolling is allowed */
  }

  /* Optimalizace pro menší obrazovky - zachovat scroll funkcionalitu */
  @media (max-width: 1199px) {
    .content-section .schedule-container {
      overflow-y: auto;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch; /* Smooth scrolling na iOS */
    }
    
    .schedule-table {
      min-width: 800px; /* Zajistit minimální šířku pro horizontální scroll */
    }
    
    .schedule-table th,
    .schedule-table td {
      min-width: 70px; /* Zachovat minimální šířku buněk */
    }
  }

  /* Optimalizace pro větší obrazovky - zachovat scroll jako zálohu */
  @media (min-width: 1200px) {
    .content-section .schedule-container {
      overflow: auto; /* Zachovat scroll jako zálohu pro případ přetečení */
      /* Skrýt scrollbary když nejsou potřeba, ale zachovat funkcionalitet */
      scrollbar-width: thin;
      scrollbar-color: var(--primary-orange) transparent;
    }
    
    .content-section .schedule-container::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    
    .content-section .schedule-container::-webkit-scrollbar-track {
      background: transparent;
    }
    
    .content-section .schedule-container::-webkit-scrollbar-thumb {
      background: var(--primary-blue);
      border-radius: 4px;
      opacity: 0.6;
    }
    
    .content-section .schedule-container::-webkit-scrollbar-thumb:hover {
      background: var(--primary-orange);
      opacity: 1;
    }
    
    .schedule-table {
      width: 100%;
      height: 100%;
      table-layout: fixed; /* Fixní layout pro konzistentní velikosti */
      min-width: 800px; /* Minimální šířka pro zajištění scroll při potřebě */
    }
  }

  /* Extra optimalizace pro velmi malé obrazovky */
  @media (max-width: 768px) {
    .schedule-table {
      min-width: 600px; /* Zmenšit minimální šířku pro mobily */
      font-size: 0.8rem;
    }
    
    .schedule-table th,
    .schedule-table td {
      padding: 0.2rem 0.15rem;
      min-width: 60px;
    }
    
    .lesson-box {
      padding: 0.25rem 0.2rem;
      font-size: 0.65rem;
      border-radius: 8px;
    }
  }

  /* Přepínače režimu rozvrhu */
  .timetable-mode {
    display: flex;
    gap: .5rem;
    margin-left: 1rem;
  }
  .tt-mode-btn {
    background: linear-gradient(180deg, #ffffff, #2a81ba47);
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    padding: .85rem 1.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-standard);
    line-height:1.1;
    will-change: transform, background-color;
    position: relative;
    overflow: visible;
  }
  
  .tt-mode-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left var(--duration-medium) var(--ease-standard);
  }
  
  .tt-mode-btn:hover::before {
    left: 100%;
  }
  
  .tt-mode-btn.active {
    background: var(--primary-blue);
    color: #fff;
    transform: translateY(-1px) translateZ(0);
  }
  
  .tt-mode-btn:not(.active):hover { 
    background: var(--light-blue); 
    color:#fff; 
    transform: translateY(-2px) translateZ(0);
  }
  
  .tt-mode-btn:active {
    transform: translateY(0) scale(0.98) translateZ(0);
    transition: transform var(--duration-instant) var(--ease-standard);
  }

  /* Make tt-date-pill and subst-date visually match tt-mode-btn */
  .section-header .tt-date-pill,
  .substitutions-nav .subst-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff, #2a81ba47);
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    padding:.45rem .8rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-standard);
    line-height:1.1;
  will-change: transform, background-color;
    position: relative;
    /* Clip the shining ::before to the pill's rounded shape to avoid a sharp white rectangle */
    overflow: hidden;
    /* Fixed minimum width to prevent layout shift when date changes */
    min-width: 180px;
    text-align: center;
  }
  .section-header .tt-date-pill::before,
  .substitutions-nav .subst-date::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: none;
    border-radius: inherit;
    pointer-events: none;
  }
  .section-header .tt-date-pill:hover::before,
  .substitutions-nav .subst-date:hover::before { left: -100%; }
  /* Make hover behavior match .tt-mode-btn (only when not active) */
  .section-header .tt-date-pill:not(.active):hover,
  .substitutions-nav .subst-date:not(.active):hover {
    background: var(--light-blue);
    color: #fff;
    transform: none;
  }
  /* Active state should match .tt-mode-btn.active */
  .section-header .tt-date-pill.active,
  .substitutions-nav .subst-date.active {
    background: var(--primary-blue);
    color: #fff;
    transform: none;
  }
  .section-header .tt-date-pill:focus,
  .substitutions-nav .subst-date:focus {
    outline: 3px solid rgba(31,111,235,.25);
  }
  .section-header .tt-date-pill:active,
  .substitutions-nav .subst-date:active {
    transform: none;
    transition: none;
  }

  /* Beta badge pro tlačítko Změny příští */
  .tt-mode-btn .beta-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* badge shadows removed */
    z-index: 1;
    pointer-events: none;
  }

  /* Úvodní obrazovka a její karty byly odstraněny z DOM; styly ponechány pro možnou pozdější potřebu. */

  /* --- Absence učitele v rozvrhu --- */
  td.lesson.absent-overlay { position: relative; }
  .absence-box { display:flex; align-items:center; justify-content:center; height:100%; width:100%; border-radius:12px; font-weight:700; font-size:1.2rem; text-align:center; padding:.4rem; line-height:1.3; } /* Zvětšený font, padding a border-radius */
  .absence-box.teacher-absent-hour { background: #ffe5e5; color: var(--danger); border:3px solid var(--danger); } /* Silnější border */
  .absence-box.teacher-free-hour { background:#e6f9ef; color: var(--success); border:3px solid var(--success); } /* Silnější border */
  .absence-box .absence-label { display:none; }
  /* Varianta když existuje skutečná hodina – pouze podbarvení */
  td.lesson.absence-cancel { background: linear-gradient(135deg,#ffe5e5,#ffc9c9); position:relative; } /* Přidán border */
  td.lesson.absence-free { background: linear-gradient(135deg,#e6f9ef,#c4f1dc); position:relative; border: 2px solid var(--success); } /* Přidán border */
  .lesson-box .absence-badge { margin-top:.3rem; letter-spacing:.6px; text-transform:uppercase; padding:.1rem .1rem; border-radius:8px; font-weight:700; display:inline-block; text-align: center; } /* Zvětšený font, padding a border-radius */
  .lesson-box .absence-badge.ab-cancel { background:#ef4444; color:#fff; } 
  .lesson-box .absence-badge.ab-free { background:#059669; color:#fff; }
  /* Druhý text typu změny (ChgType2) v mřížce suplování */
  .gi-type2 { display:inline-block; margin-left:.4rem; font-weight:600; color:var(--text-light); font-size:.7rem; background:rgba(0,0,0,.08); padding:.2rem .5rem; border-radius:8px; } /* Zvětšený font, padding a border-radius */

  /* --- Absence místnosti (room) / syntetické události --- */
  .lesson-box.synthetic-event.room-absence { background:#ecfdf5; border:3px solid var(--success); color:#065f46; font-weight:700; font-size:1.1rem; } /* Silnější border and larger font */
  td.lesson.room-absence-overlay { position:relative; }
  /* barvení přímo boxu, aby překrylo celé pozadí i když má box vlastní bílý bg */
  td.lesson.room-absence-overlay .lesson-box,
  td.lesson.room-absence-overlay .lesson-box.mini {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%) !important;
    border: 3px solid var(--success) !important; /* Silnější border */
    color:#065f46;
    font-weight: 700; /* Tučnější font */
    font-size: 1.1rem; /* Větší font */
  }
  td.lesson.room-absence-overlay .lesson-box { position:relative; }
  /* skrytí :after u overlaye – nechceme druhý pseudo prvek */
  td.lesson.room-absence-overlay .lesson-box:after { content:none !important; display:none !important; }

  /* skrytí :after ("AKCE" chipu) pro syntetické room-absence boxy – ponecháme jen ::before efekt */
  .lesson-box.synthetic-event.room-absence:after { content:none !important; display:none !important; }

  /* skrytí :after pro obecné pedagogické dozory v učitelském rozvrhu */
  .lesson-box.synthetic-event:not(.room-absence):after { content:none !important; display:none !important; }

  /* Hlavičky sekcí */
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    border-bottom: 3px solid var(--primary-blue);
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    max-width: 100%;
  }

  .section-header > * {
    min-width: 0;
    max-width: 100%;
  }

  .section-header h2 {
    font-size: 2.5rem;
    color: var(--primary-blue) !important;
    -webkit-text-fill-color: var(--primary-blue) !important;
    background: rgba(255, 255, 255, 0.35) !important;
    -webkit-background-clip: padding-box !important;
    background-clip: padding-box !important;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.1rem 0.5rem;
    border-radius: 12px;
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
  }

  .section-header h2 i {
    color: var(--primary-orange);
    background: none !important;
    -webkit-text-fill-color: var(--primary-orange) !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    transition: transform 0.3s ease;
    animation: icon-entry-bounce 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
  }

  .section-header h2:hover i {
    animation: icon-wiggle 0.5s ease;
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }

  @keyframes icon-entry-bounce {
    0% { 
      transform: scale(0) rotate(-45deg);
      opacity: 0;
    }
    50% { 
      transform: scale(1.3) rotate(10deg);
      opacity: 1;
    }
    70% { 
      transform: scale(0.9) rotate(-5deg);
    }
    100% { 
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }

  @keyframes icon-wiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
  }

  #substitutions .section-header {
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(89deg, #f5c783 0%, #c9bc9d 100%) !important;
    padding-top: 0.5rem;
    margin-top: -0.5rem;
  }

  #substitutions {
    --section-header-height: 0px;
  }

  /* Some elements rely on animation to reach their final visible state (e.g. sticky
     table headers which start with opacity:0 / translated Y). When animations are
     globally disabled the header remains invisible. Restore final visual state for
     those critical elements while keeping animations disabled elsewhere. */
  .subst-grid thead th {
    /* Ensure header is visible even when animations are suppressed */
    opacity: 1 !important;
    transform: none !important;
  }
  /* If header uses pseudo-elements for decorative overlays, ensure they are still shown */
  .subst-grid thead th::before,
  .subst-grid thead th::after {
    opacity: 1 !important;
    transform: none !important;
  }

  #substitutions .section-header .substitutions-nav {
    margin-left: auto;
    max-width: 100%;
  }

  /* Re-enable animations for navigation buttons in substitutions header */
  #substitutions .section-header .nav-btn {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
  }

  #substitutions .section-header .nav-btn i {
    transition: transform 0.2s ease;
  }

  #substitutions .section-header h2 i {
    transition: transform 0.3s ease;
  }

  #substitutions .section-header h2:hover i {
    animation: icon-wiggle 0.5s ease;
  }

  #substitutions .section-header .nav-btn:hover {
    background: var(--primary-orange);
    transform: scale(1.05) translateY(-2px);
  }

  #substitutions .section-header .nav-btn:hover i.fa-chevron-left {
    animation: chevron-push 0.3s ease;
  }

  #substitutions .section-header .nav-btn:hover i.fa-chevron-right {
    animation: chevron-push-right 0.3s ease;
  }

  #substitutions .section-header .nav-btn:active {
    transform: scale(0.9);
  }

  #substitutions .section-header .nav-btn:active i.fa-chevron-left {
    animation: tt-click-left 0.15s ease-out forwards;
  }

  #substitutions .section-header .nav-btn:active i.fa-chevron-right {
    animation: tt-click-right 0.15s ease-out forwards;
  }

  /* Re-enable only the loading spinner animation inside substitutions.
     The substitutions section intentionally disables most animations for
     performance, but we want the status spinner to keep animating. */
  #substitutions .loading--spinner i,
  #substitutions .fa-spin,
  #substitutions .fas.fa-spinner {
    -webkit-animation: fa-spin 2s linear infinite !important;
    animation: fa-spin 2s linear infinite !important;
    -webkit-animation-duration: var(--fa-animation-duration, 2s) !important;
    animation-duration: var(--fa-animation-duration, 2s) !important;
    -webkit-animation-timing-function: linear !important;
    animation-timing-function: linear !important;
    -webkit-animation-iteration-count: infinite !important;
    animation-iteration-count: infinite !important;
  }

  .date-info {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    background: linear-gradient(135deg, rgba(31, 111, 235, 0.08) 0%, rgba(244, 160, 36, 0.08) 100%);
    padding: 0.65rem 1.2rem;
    border-radius: 50px;
  border: 1.5px solid rgba(31, 111, 235, 0.15);
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
  }

  /* Selektory */
  .class-selector,
  .teacher-selector,
  .room-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .class-selector select,
  .teacher-selector select,
  .room-selector select {
    padding: .85rem 2.6rem .85rem 1.05rem;
    font-size: 1rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(180deg,#ffffff,#f3f6fa);
    color: var(--text);
    min-width: 220px;
    cursor: pointer;
    transition: .25s cubic-bezier(.4,.0,.2,1);
    /* shadow removed from select */
    appearance:none;
    position:relative;
    font-weight:500;
  }

  .class-selector select:focus,
  .teacher-selector select:focus,
  .room-selector select:focus { outline: 3px solid rgba(59,130,246,.15); }

  /* Vlastní šipka */
  .class-selector, .teacher-selector, .room-selector { position:relative; }
  .class-selector select, .teacher-selector select, .room-selector select { background-repeat:no-repeat; background-position:right 1rem center; background-size:14px; }
  .class-selector select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%231e3a8a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/ %3E%3C/svg%3E"); }
  .teacher-selector select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%231e3a8a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/ %3E%3C/svg%3E"); }
  .room-selector select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%231e3a8a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/ %3E%3C/svg%3E"); }

  .class-selector select:hover,
  .teacher-selector select:hover,
  .room-selector select:hover { border-color:var(--light-blue); }

  .class-selector select.has-last-saved,
  .teacher-selector select.has-last-saved,
  .room-selector select.has-last-saved { border-color:var(--primary-orange); }

  /* Zvýraznění uložené položky v rozbaleném seznamu (podpora různá dle prohlížeče) */
  select option.last-saved { background: var(--primary-orange); color:#fff; font-weight:600; }

  .class-selector select:focus,
  .teacher-selector select:focus,
  .room-selector select:focus {
    outline: 3px solid rgba(30, 58, 138, 0.12);
    border-color: var(--primary-blue);
  }

  /* Pravý sidebar */
  .sidebar {
    width: 300px;
    background: linear-gradient(112deg, var(--primary-orange) 0%, var(--light-blue) 40%, var(--primary-blue) 100%);
    display: flex;
    flex-direction: column;
    padding: 0;
  /* sidebar shadow removed */
    height: 100vh;
    position: relative;
    overflow: hidden;
  }
  /* Sidebar sections layout */
  .sidebar .logo-section {
    flex-shrink: 0;
  }

  .sidebar .scrollable-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-orange) transparent;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    min-height: 0;
  }

  .sidebar .scrollable-content::-webkit-scrollbar {
    width: 6px;
  }

  .sidebar .scrollable-content::-webkit-scrollbar-track {
    background: transparent;
  }

  .sidebar .scrollable-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
  }

  .sidebar .scrollable-content #app-bottom-bar-mobile {
    margin-top: auto;
  }

  .sidebar .time-section {
    flex-shrink: 0;
    padding: 0.5rem;
  }

  /* Per-schedule entity list removed — styles cleaned up. */

  /* Home button removed along with bottom navigation */
  
  .entity-item { 
    position: relative;
    display: flex; 
    align-items: center; 
    gap: .75rem; 
    padding: .7rem .85rem .7rem .75rem; 
    background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 100%);
    color: #fff; 
    border: 1.5px solid rgba(255,255,255,0.2); 
    border-radius: 12px; 
    margin-bottom: .55rem; 
    cursor: pointer; 
    font-weight: 500; 
    font-size: 1.05rem; 
    letter-spacing: 0.2px;
  /* removed blur for performance */
  backdrop-filter: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, background-color;
    overflow: hidden;
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
  }
  
  .entity-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }
  
  .entity-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(to bottom, #fff, rgba(255,255,255,0.6));
    border-radius: 0 2px 2px 0;
    transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .entity-item:hover { 
    background: linear-gradient(135deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.18) 100%);
    transform: translateY(-2px) translateX(3px) translateZ(0); 
    /* shadow removed on hover */
    border-color: rgba(255,255,255,0.35);
  }
  
  .entity-item:hover::before {
    opacity: 1;
  }
  
  .entity-item:hover::after {
    height: 50%;
  }
  
  .entity-item.active { 
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
  color: var(--primary-blue); 
  /* active shadow removed */
    transform: translateX(4px) translateZ(0);
    border-color: rgba(42, 129, 186, 0.3);
    font-weight: 600;
  }
  
  .entity-item.active::after {
    height: 70%;
    background: linear-gradient(to bottom, var(--primary-blue), rgba(42, 129, 186, 0.6));
  }
  
  /* Animace pro entity items */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Odstupňované načítání animace */
  .entity-item:nth-child(1) { animation-delay: 0s; }
  .entity-item:nth-child(2) { animation-delay: 0.05s; }
  .entity-item:nth-child(3) { animation-delay: 0.1s; }
  .entity-item:nth-child(4) { animation-delay: 0.15s; }
  .entity-item:nth-child(5) { animation-delay: 0.2s; }
  .entity-item:nth-child(n+6) { animation-delay: 0.25s; }
  /* Bottom navigation removed - any stray elements should be hidden */
  .bottom-nav, .bn-btn, .home-button-wrapper, .content-area.with-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hodiny jiného učitele v teacherském rozvrhu */
  .lesson-box.other-teacher-slot {
    opacity: .45;
    filter: grayscale(.55);
    background: linear-gradient(135deg, #e0e4e8, #c8ced4) !important;
    color:#444;
    position: relative;
  }
  .lesson-box.other-teacher-slot .lb-teacher { font-weight:600; }
  .lesson-box.other-teacher-slot::after {
    content:'';
    position:absolute; inset:0;
    background:repeating-linear-gradient(45deg,rgba(255,255,255,0),rgba(255,255,255,0) 6px,rgba(255,255,255,.15) 6px,rgba(255,255,255,.15) 12px);
    pointer-events:none;
    border-radius:inherit;
  }

  @media (max-width: 1400px){
    /* Lehce menší inset na užších větších monitorech */
    .bottom-nav { left:.75rem; right:calc(var(--sidebar-width) + .75rem); }
  }

  @media (max-width: 1100px){
    /* Pokud se layout zužuje, necháme lištu zarovnat na celou šířku mimo sidebar */
    .bottom-nav { left:0; right:var(--sidebar-width); border-radius:16; }
  }

  @media (max-width: 1039px){
    .bottom-nav { display:none; }
    .home-button-wrapper { display:none !important; }
  }

  /* Global bottom bar (desktop-only). Spans from left edge to just before the sidebar. */
  #app-bottom-bar {
    position: fixed;
    left: 0;
    right: calc(var(--sidebar-width, 290px) + 1rem);
  bottom: .5rem;
    height: 40px;
  background: linear-gradient(90deg, var(--primary-blue, rgba(31,111,235,0.95)), var(--light-blue, rgba(187,222,251,0.95)));
    color: #fff;
    border-radius: 10px;
    /* bottom bar shadow removed */
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 120ms ease, visibility 120ms ease;
    align-items: center;
    z-index: 1200;
    padding: 0.35rem 0.9rem;
    pointer-events: auto;
    font-size: 0.9rem;
  }

  #app-bottom-bar .app-bottom-bar__inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    font-weight:600;
    font-size:0.95rem;
  }

  /* Red exclamation mark at the start of the bottom bar */
  /* Dedicated icon element to left of the text */
  .app-bottom-bar__icon{ display:none; }
  body.has-bottom-bar #app-bottom-bar .app-bottom-bar__icon{
    display:inline-flex;
    width: 1.9rem;
    height: 1.9rem;
    align-items:center;
    justify-content:center;
    margin-right: .6rem;
    background:#fff;
    color:#c62828;
    border-radius:50%;
    font-weight:800;
    /* icon shadow removed */
    flex: 0 0 auto;
    font-size: 1rem;
  }

  /* Marquee (continuous scrolling) for overflowing left text */
  body.has-bottom-bar #app-bottom-bar .app-bottom-bar__left {
    overflow: hidden;
  }
  .app-bottom-bar__marquee-wrap {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2.5rem; /* comfortable visual gap between copies */
    white-space: nowrap;
    will-change: transform;
  }
  .app-bottom-bar__marquee-wrap > span {
    flex: 0 0 auto;
    white-space: inherit;
  }
  .app-bottom-bar__marquee-wrap.marquee-anim {
    /* --marquee-distance and --marquee-duration are set dynamically from JS */
    animation-name: app-bottom-marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--marquee-duration, 8s);
  }

  @keyframes app-bottom-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--marquee-distance, 100%))); }
  }

  /* visual separator between copies (bullet point for better visual appeal) */
  .app-bottom-bar__marquee-sep{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color: rgba(255,255,255,0.9);
    font-weight:700;
    font-size:1.2rem;
    padding: 0 1rem;
    transform: none;
    user-select: none;
    opacity: .95;
    /* text-shadow removed for performance */
    text-shadow: none;
  }

  /* Mobile bottom bar inside sidebar */
  #app-bottom-bar-mobile {
    position: relative;
    display: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease;
    background: linear-gradient(167deg, var(--primary-blue), var(--light-blue));
    color: #fff;
    border-radius: 14px;
    /* mobile bottom bar shadow removed */
    padding: 0.75rem 1rem;
    pointer-events: none;
    cursor: default;
  }

  #app-bottom-bar-mobile.app-bottom-bar--clickable {
    pointer-events: auto;
    cursor: pointer;
  }

  /* hover shadow removed for mobile bottom bar */

  #app-bottom-bar-mobile.app-bottom-bar--clickable:active {
    transform: scale(0.98);
  }

  #app-bottom-bar-mobile.app-bottom-bar--clickable:focus-visible {
    outline: 2px solid rgba(255,255,255,0.75);
    outline-offset: 3px;
  }

  #app-bottom-bar-mobile .app-bottom-bar__inner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
  }

  #app-bottom-bar-mobile.app-bottom-bar--clickable .app-bottom-bar__inner::after {
    content: '';
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255,255,255,0.85);
    border-bottom: 2px solid rgba(255,255,255,0.85);
    transform: rotate(-45deg);
    margin-left: 0.5rem;
    transition: transform 160ms ease;
    opacity: 0.85;
  }

  #app-bottom-bar-mobile.app-bottom-bar--clickable:hover .app-bottom-bar__inner::after,
  #app-bottom-bar-mobile.app-bottom-bar--clickable:focus-visible .app-bottom-bar__inner::after {
    transform: rotate(-45deg) translateX(2px);
  }

  #app-bottom-bar-mobile .app-bottom-bar__icon {
    display: none;
  }

  #app-bottom-bar-mobile .app-bottom-bar__left {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
  }

  #app-bottom-bar-mobile.app-bottom-bar--clickable .app-bottom-bar__left::after {
    content: ' · klepnutím otevřeš';
    font-weight: 500;
    font-size: 0.85rem;
    margin-left: 0.35rem;
    opacity: 0.9;
    white-space: inherit;
  }

  #app-bottom-bar-mobile .app-bottom-bar__right {
    display: none;
  }

  /* Show only on larger viewports (match mobile breakpoint used elsewhere) */
  @media (min-width: 1040px) {
    #app-bottom-bar { display:flex; }
    #app-bottom-bar-mobile { display: none !important; }
    /* Add bottom padding to main content only when body has .has-bottom-bar */
    body.has-bottom-bar .content-area { padding-bottom: calc(40px + 0.5rem); }
  }

  @media (max-width: 1039px) {
    #app-bottom-bar-mobile {
      display: flex;
    }
    body.has-bottom-bar #app-bottom-bar-mobile {
      visibility: visible;
      opacity: 1;
    }
  }

  /* On very wide screens, keep a small inset from left */
  @media (min-width: 1600px) {
    #app-bottom-bar { left: 1rem; right: calc(var(--sidebar-width, 290px) + 2rem); }
  }

  /* Mobile: zmenšit některé ovládací prvky (tlačítka režimu a výběry) */
  @media (max-width: 1039px) {
    /* Menší přepínače režimu (stálý / aktuální) */
    .tt-mode-btn {
      padding: .5rem;
      font-size: .9rem;
      border-radius: 10px;
    }

  /* active tt-mode-btn shadow removed */

    /* Nativní selecty (třída / učitel / místnost) */
    .class-selector select,
    .teacher-selector select,
    .room-selector select {
      padding: .5rem 1.6rem .5rem .85rem;
      font-size: .95rem;
      min-width: 160px;
      border-radius: 10px;
    }

    /* Custom select component zmenšení */
    .custom-select { font-size: .95rem; }
    .custom-select .custom-select__button {
      padding: .65rem 2rem .65rem .9rem;
      min-width: 180px;
      border-radius: 12px;
      font-size: .96rem;
    }
    .custom-options { max-height: 320px; }

    /* Pokud je sidebar v mobilu, zmenšíme jeho padding pro více místa */
    .sidebar { padding: 1rem; width: 240px; }
  }

  /* Logo sekce */
  .logo-section {
    text-align: center;
    margin-bottom: 0.2rem;
    padding: 0.2rem;
    /*background: linear-gradient(135deg, var(--primary-orange) 0%, var(--light-blue) 50%, var(--primary-blue) 100%);*/
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 0 0 15px 15px;
    /* removed blur for performance */
    backdrop-filter: none;
  }

  .logo-link {
    display: inline-block;
    text-decoration: none;
  }

  .logo-link:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.6);
    outline-offset: 4px;
    border-radius: 10px;
  }

  .school-logo {
    max-width: 210px;
    max-height: 150px;
    width: auto;
    height: auto;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 0.2rem;
    transition: transform 0.3s ease;
  }

  .school-logo:hover {
    transform: scale(1.05) rotate(2deg);
  }

  .logo-link:active .school-logo {
    transform: scale(0.95) rotate(-2deg);
  }

  .menu-section h3 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
  }

  .menu-btn {
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 1.2rem;
    border-radius: 15px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* removed blur for performance */
    backdrop-filter: none;
  }

  .menu-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
    /* hover shadow removed */
  }

  .menu-btn:active {
    transform: scale(0.96) translateX(2px);
  }

  .menu-btn:active i {
    animation: menu-btn-press 0.2s ease-out;
  }

  @keyframes menu-btn-press {
    0% { transform: scale(1); }
    50% { transform: scale(0.8) rotate(-10deg); }
    100% { transform: scale(1.1) rotate(5deg); }
  }

  .menu-btn.active {
    background: var(--primary-orange);
    border-color: var(--light-orange);
    /* active shadow removed */
  }

  .menu-btn i {
    font-size: 1.3rem;
    min-width: 20px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .menu-btn:hover i {
    transform: scale(1.2) rotate(-5deg);
  }

  .menu-btn.active i {
    animation: icon-bounce 0.5s ease forwards;
    transform: scale(1.6) rotate(-3deg);
  }

  @keyframes icon-bounce {
    0% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(1.3) rotate(10deg); }
    50% { transform: scale(0.9) rotate(-5deg); }
    70% { transform: scale(1.15) rotate(3deg); }
    100% { transform: scale(1.6) rotate(-3deg); }
  }

  /* Čas sekce */
  .time-section {
    /* Dříve margin-top: auto; (přilepeno úplně dole) – posuneme blok výše, aby se vše vešlo */
    /*margin-top: .75rem;*/
    border-radius: 15px 15px 0 0;
    /*padding: 1rem 1.25rem;*/ /* menší vertikální padding pro úsporu místa */
    /* removed blur for performance */
    backdrop-filter: none;
    border: 2px solid rgba(255, 255, 255, 0.2);
  }

  /* Info section (uses same visual style as time-section) */
  #info-section {
    padding: .2rem .3rem;
    border-bottom: 0px;
    display: flex;
    flex-direction: column;
    gap: .2rem;
  }
  #info-section .info-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .15rem .4rem;
    border: 0;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
  }
  #info-section .info-toggle i {
    transition: transform 0.2s ease;
    transform: rotate(180deg);
  }
  #info-section .info-toggle:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
  }
  #info-section .info-toggle:active {
    transform: scale(0.98);
  }
  #info-section.is-collapsed .info-toggle {
    border-radius: 12px;
  }
  #info-section.is-collapsed .info-toggle i {
    transform: rotate(0deg);
  }
  #info-section.is-collapsed .info-content {
    display: none;
  }
  #info-section .info-content {
    padding: .2rem .6rem;
    color: #fff;
    border-radius: 15px 15px 0 0;
  }
  #info-section .info-block {
    display: flex;
    flex-direction: column;
    gap: .35rem;
  }
  #info-section .info-block:last-child {
    margin-bottom: 0;
  }
  #info-section .info-row { display:flex; justify-content:space-between; gap:.5rem; align-items:center; font-size: 13px; }
  #info-section .info-row strong { color: rgba(255,255,255,0.9); font-weight:600; }
  #info-section .info-row span { color: rgba(255,255,255,0.95); }
  #info-section .info-row.info-room-controls { justify-content: flex-start; gap: .6rem; flex-wrap: wrap; }
  #info-section .info-room-day-nav { display: inline-flex; align-items: center; gap: .35rem; }
  #info-section .info-room-day-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
  }
  #info-section .info-room-day-btn:active { transform: scale(0.98); }
  #info-section .info-room-day-pill {
    min-width: 120px;
    text-align: center;
    padding: .2rem .5rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
  }
  #info-section .info-room-hour-nav { display: inline-flex; align-items: center; gap: .35rem; }
  #info-section .info-room-hour-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
  }
  #info-section .info-room-hour-btn:active { transform: scale(0.98); }
  #info-section .info-room-hour-pill {
    min-width: 120px;
    text-align: center;
    padding: .2rem .5rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
  }
  #info-section .info-room-select {
    min-width: 120px;
    padding: .2rem .4rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 12px;
  }
  #info-section .info-room-select option { color: #000; }
  #info-section .info-room-free { color: rgba(255,255,255,0.95); font-size: 12px; }
  #info-section .info-room-free-list { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.1rem; }
  #info-section .info-room-free-item {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    padding: .15rem .4rem;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }
  #info-section .info-room-free-item:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.35);
    transform: translateY(-1px);
  }
  #info-section .info-room-free-item:focus {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 2px;
  }

  .current-time {
    text-align: center;
  }

  .time-display .time {
    display: block;
    font-size: 2rem; /* nepatrně menší */
    font-weight: 700;
    color: white;
    margin-bottom: 0.2rem; /* zmenšená mezera k datu */
    /* Prefer the local digital-7 display font for the clock, with sensible fallbacks */
    font-family: 'NotoSans', 'Cascadia Mono', 'Segoe UI Mono', ui-monospace, 'SF Mono', 'Consolas', monospace;
  /* removed text-shadow to reduce repaint cost */
  text-shadow: none;
    letter-spacing: 0.05em; /* Slight spacing for better readability */
    }
  .time-display .password {
    cursor: pointer;
  }
  .time-display .password:hover {
    text-decoration: underline;
  }
  /* When info-section is visible, the following time-section (sidebar) should have square top corners */
  /* Use multiple selectors for robustness: inline style not equal to display:none, .active class or aria-hidden */
  /* Only remove rounded corners for the time-section when viewing the class schedule.
     We toggle `body.view-class-schedule` from JS in showSection to make this deterministic. */
  /* Apply to the actual time-section (exclude the info-section which also uses .time-section) */
  body.view-class-schedule .time-section:not(#info-section),
  body.view-teacher-schedule .time-section:not(#info-section),
  body.view-room-schedule .time-section:not(#info-section) {
    border-radius: 0; /* square top corners while on class schedule */
  }

  /* Floating info FAB in the time-section (top-left) */
  .time-section { position: relative; }
  .fab-info {
    position: absolute;
    top: .55rem;
    left: .55rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--light-blue, #1f6feb);
    color: #fff;
    border: 1.5px solid #fff; /* white border */
    /* fab shadow removed */
    cursor: pointer;
    z-index: 30;
    font-size: 1.05rem;
  }
  .fab-info i { 
    color: #fff; 
    pointer-events: none;
    transition: transform 0.3s ease;
  }

  .fab-info:hover {
    transform: scale(1.1);
  }

  .fab-info:hover i {
    animation: info-pulse 0.6s ease;
  }

  @keyframes info-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2) rotate(15deg); }
    100% { transform: scale(1) rotate(0deg); }
  }

  .fab-info:active {
    transform: scale(0.9);
  }

  .fab-info:active i {
    animation: info-press 0.15s ease-out;
  }

  @keyframes info-press {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(0.8) rotate(-20deg); }
  }

  /* Mobile: show FAB inside opened sidebar (left-bottom corner of sidebar) */
  @media (max-width: 1039px) {
    .fab-info { display:none; }
    .sidebar.mobile-open .time-section .fab-info {
      display: inline-flex;
      position: absolute;
      top: .75rem;
      left: .75rem;
      bottom: auto;
      right: auto;
      width: 40px; height: 40px;
      /* mobile fab shadow removed */
    }
  }

  /* Suplování: plovoucí tlačítko pro návrat nahoru (pravý dolní roh vedle sidebaru) */
  .back-to-top-btn{ display:none; }
  body.view-substitutions .back-to-top-btn{
    position: fixed;
    right: calc(var(--sidebar-width, 290px) + 1rem);
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-blue, #1f6feb);
    color: #fff;
    border: 1.5px solid #fff;
    cursor: pointer;
    z-index: 1100;
    font-size: 1.05rem;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.96);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  }

  body.view-substitutions .back-to-top-btn.is-visible{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
  }
  body.view-substitutions .back-to-top-btn i{ color:#fff; pointer-events:none; transition: transform 0.2s ease; }
  body.view-substitutions .back-to-top-btn:hover{ filter: brightness(1.05); transform: scale(1.05); }
  body.view-substitutions .back-to-top-btn:hover i{ transform: translateY(-2px); }
  body.view-substitutions .back-to-top-btn:active{ transform: scale(0.96); }
  body.view-substitutions .back-to-top-btn:active i{ animation: back-to-top-press 0.2s ease-out; }
  body.view-substitutions .back-to-top-btn:focus-visible{ outline: 2px solid rgba(255,255,255,0.8); outline-offset: 3px; }

  @keyframes back-to-top-press {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.15); }
    100% { transform: translateY(0) scale(1); }
  }

  /* Když je aktivní desktopová spodní lišta, zvednout tlačítko výš */
  body.has-bottom-bar.view-substitutions .back-to-top-btn{
    bottom: calc(1rem + 40px + 0.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Na mobilech (sidebar překrývá obsah) držet tlačítko u pravého okraje okna */
  @media (max-width: 1039px){
    body.view-substitutions .back-to-top-btn{ right: 1rem; }
  }

  .time-display .date {
    display: block;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
  }

  .time-display .nameday {
    display:block;
    margin-top:.15rem; /* menší mezera pod datem */
    font-size:.85rem; /* mírně menší pro úsporu vertikálního prostoru */
    color:#ffe2b8;
    font-weight:600;
    letter-spacing:.4px;
    min-height:1.05rem;
    /* removed text-shadow for performance */
    text-shadow: none;
  }

  /* Display for the password shown in the time block */
  .time-display .password,
  .time-display #display-password {
    display: block;
    margin-top: .25rem;
    font-size: .95rem;
    color: #ffffff; /* explicitly white */
    font-weight: 600;
    opacity: 0.98;
    line-height: 1.1;
    letter-spacing: .2px;
    /* translucent white background to increase contrast while keeping sidebar visible */
    display: inline-block;
    background: rgba(255,255,255,0.08);
    padding: 4px 8px;
    border-radius: 8px;
    position: relative;
    text-decoration: underline dotted rgba(255,255,255,0.35);
    text-underline-offset: 2px;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .time-display #display-password::after {
    content: "QR";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-radius: 999px;
    color: #fff;
    background: rgba(31,111,235,0.9);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    vertical-align: middle;
  }

  /* Suplování */
  .substitutions-grid { width:100%; }
  .substitutions-grid.mode-classes { display:block; }
  .substitutions-grid .substitutions-wrapper { width:100%; }
  /* Allow horizontal scrolling when the grid cannot fit on screen */
  .substitutions-grid .substitutions-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Prevent substitution grid items from overflowing their table/grid cells.
     Ensures long words or wide elements wrap or get clipped instead of breaking layout. */
  .subst-grid, .substitutions-grid, .substitutions-grid .subst-cards {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

  .subst-grid th, .subst-grid td {
    min-width: 70px; /* ensure table columns are at least 70px like grid-cells */
    overflow: hidden; /* clip overflowing children */
    vertical-align: top;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

  .subst-grid .grid-cell, .subst-grid .grid-item {
    min-width: 70px; /* ensure cells have at least 70px */
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    white-space: normal; /* allow wrapping */
    word-break: break-word;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    margin: 0.1rem;
  }

  /* Make sure images and other replaced elements scale down inside cells */
  .subst-grid img, .substitutions-grid img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* On wider screens prefer fixed table layout to keep column bounds stable */
  @media (min-width: 1200px) {
    .subst-grid { table-layout: fixed; }
    .subst-grid th, .subst-grid td { white-space: normal; }
  }

  /* Karty režim (učitelé) použij mřížku jen pro karty uvnitř */
  .substitutions-grid:not(.mode-classes) .subst-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } /* Zvětšená minimální šířka karet */
  .subst-class-grid .subst-scroll { overflow:visible; }
  /* Mobilní specifika pro horizontální scroll pouze uvnitř mřížky */
  @media (max-width: 1039px) {
    .subst-class-grid .subst-scroll,
    .subst-teacher-grid .subst-scroll { 
      overflow-x:auto; 
    /* Povolit vertikální posun stránky při přetažení nahoru/dolů */
    overflow-y:visible; 
      -webkit-overflow-scrolling:touch; 
      overscroll-behavior-inline:contain; 
      scroll-snap-type:x proximity; 
      padding-bottom:.4rem; 
    /* Zabrání zablokování vertikálního gesta jen na osu X */
    touch-action: pan-y pan-x; 
    }
  .subst-grid { table-layout: auto; }
  /* Zabránit přetečení buněk – sloupce se přizpůsobí a obsah se zalomí */
  .subst-grid th.hour-head,
  .subst-grid td:not(.cls-col):not(.groups-col) { width: auto; }
  .subst-grid .grid-cell { min-width: 70px; width: auto; }
  .subst-grid .grid-item { box-sizing: border-box; width: auto; white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
  .subst-class-grid .subst-scroll table.subst-grid,
  .subst-teacher-grid .subst-scroll table.subst-grid { min-width: 780px; }
  /* Širší scrollbar pro dotykové ovládání na mobilech */
  .subst-class-grid .subst-scroll::-webkit-scrollbar,
  .subst-teacher-grid .subst-scroll::-webkit-scrollbar { height:14px; }
  .subst-class-grid .subst-scroll::-webkit-scrollbar-track,
  .subst-teacher-grid .subst-scroll::-webkit-scrollbar-track { background:transparent; border-radius:0; }
  .subst-class-grid .subst-scroll::-webkit-scrollbar-thumb,
  .subst-teacher-grid .subst-scroll::-webkit-scrollbar-thumb { background:var(--primary-blue); border-radius:7px; }
  .subst-class-grid .subst-scroll::-webkit-scrollbar-thumb:active,
  .subst-teacher-grid .subst-scroll::-webkit-scrollbar-thumb:active { background:var(--primary-orange); }
  }
  .subst-class-grid .subst-scroll::-webkit-scrollbar { height:16px; }
  .subst-class-grid .subst-scroll::-webkit-scrollbar-thumb { background:var(--primary-blue); border-radius:8px; }
  .subst-class-grid .subst-scroll::-webkit-scrollbar-track { background:transparent; }

  /* odstraněno: legacy .substitution-* styly (nepoužívané) */

  /* Nové vykreslení suplování s animacemi */
  .subst-block { 
    margin-bottom: .5rem;
    animation: none;
  }

  /* Substitution headings keep default styling unless a seasonal theme applies */
  body.theme-vanoce .subst-block h3,
  body.theme-svatek .subst-block h3 { 
    font-size:1.5rem; 
    /* gradient heading: explicit red->blue for substitutions */
    background: linear-gradient(90deg, #D7141A 0%, #11457E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: none;
  }

  .subst-cards { 
    display:flex; 
    flex-wrap:wrap; 
    gap:.75rem;
  }

  .subst-card { 
    background:#fff; 
    border:1px solid var(--border); 
    border-radius:8px; 
    padding:.6rem .7rem .7rem; /* Zvětšený padding */
    width:180px; /* Zvětšená šířka karet */
  /* card shadow removed */
    font-size:.85rem; /* Zvětšený font */
    display:flex; 
    flex-direction:column; 
    gap:.3rem; /* Zvětšená mezera */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: substCardSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: both;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .subst-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
  }

  .subst-card:hover::before {
    left: 100%;
  }

  .subst-card:hover {
    transform: translateY(-4px) scale(1.02);
    /* hover shadow removed */
    border-color: var(--primary-blue);
  }

  .subst-card .head { 
    display:flex; 
    justify-content:space-between; 
    font-weight:600; 
    font-size:.82rem; /* Zvětšený font hlavičky karty */
    letter-spacing:.5px;
    position: relative;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .subst-card:hover .head {
    transform: translateY(-1px);
    /* removed text-shadow for performance */
    text-shadow: none;
  }

  .subst-card .body { 
    line-height:1.2; /* Zvětšená výška řádku */
    position: relative;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .subst-card:hover .body {
    transform: translateY(-1px);
  }

  .subst-card .body strong { 
    display:block; 
    font-size:.92rem; /* Zvětšený font pro důležité texty */
    margin-bottom:.2rem; /* Zvětšená mezera */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .subst-card:hover .body strong {
    color: var(--primary-blue);
      /* decorative gradient for subst card headings: explicit red->blue */
      background: linear-gradient(90deg, #D7141A 0%, #11457E 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
  }

  .subst-card .meta { 
    font-size:.65rem; 
    color:var(--text-light);
    position: relative;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .subst-card:hover .meta {
    color: var(--text);
    transform: translateY(-1px);
  }

  .subst-card .chg-type { 
    font-size:.62rem; 
    font-weight:600; 
    color:var(--primary-orange); 
    margin-top:.25rem;
    position: relative;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .subst-card:hover .chg-type {
    transform: scale(1.05) translateY(-1px);
    /* removed text-shadow for performance */
    text-shadow: none;
  }

  .subst-card.cancel { 
    background:#fff5f5; 
    border-color:#ffd6d6;
    animation-name: substCardCancelSlide;
  }

  .subst-card.cancel:hover {
    background: linear-gradient(135deg, #fff5f5 0%, #ffebee 100%);
    border-color: #ff6b6b;
    /* cancel hover shadow removed */
  }

  .subst-card.change { 
    background:#f5f9ff; 
    border-color:#c9e3ff;
    animation-name: substCardChangeSlide;
  }

  .subst-card.change:hover {
    background: linear-gradient(135deg, #f5f9ff 0%, #e3f2fd 100%);
    border-color: var(--primary-blue);
    /* change hover shadow removed */
  }

  .subst-card.guard { 
    background:#fffaf0; 
    border-color:#ffe2b8;
    animation-name: substCardGuardSlide;
  }

  .subst-card.guard:hover {
    background: linear-gradient(135deg, #fffaf0 0%, #fff8e1 100%);
    border-color: var(--primary-orange);
    /* guard hover shadow removed */
  }

  .subst-card.breakguard { 
    background:#eefbff; 
    border-color:#b6ebff;
    animation-name: substCardGuardSlide;
  }
  .subst-card.breakguard:hover {
    background: linear-gradient(135deg, #eefbff 0%, #ddf5ff 100%);
    border-color:#33c3ff;
    /* breakguard hover shadow removed */
  }
  .subst-card.breakguard .paid-badge { font-size:.75rem; font-weight:700; color:#0d6d00; background:#dffadf; padding:4px 8px; border-radius:12px; } /* Zvětšený font a padding */

  .subst-card.group { 
    background:#f7f7f7;
    animation-name: substCardGroupSlide;
  }

  .subst-card.group:hover {
    background: linear-gradient(135deg, #f7f7f7 0%, #f0f0f0 100%);
    border-color: var(--text-light);
    /* group hover shadow removed */
  }

  /* Zvýrazněná a zvětšená absence matice */
  .subst-matrix { width:100%; border-collapse:separate; border-spacing:0; font-size:1.02rem; line-height:1.18; table-layout:fixed; }
  .subst-matrix th, .subst-matrix td { border:1px solid var(--border); padding:.1rem .45rem; text-align:center; }
  .subst-matrix thead th { background:linear-gradient(228deg, var(--primary-blue) 0%, var(--primary-orange) 100%); color:#fff; font-weight:630; position:sticky; top:0; font-size:1em; letter-spacing:.35px; border-radius: 5px; }
  .subst-matrix td.ent { color:#fff; font-weight:660; background:linear-gradient(135deg, var(--primary-orange) 0%, var(--light-orange) 100%); font-size:1.04em; border-radius: 5px; }
  .subst-matrix .hour-head { background: var(--primary-blue)}
  .subst-matrix td { font-weight:470; }
  /* Jemné zvýraznění ne-prázdných buněk */
  .subst-matrix td:not(.ent):not(:empty) { background:#fff; border-color:#d4e3ef; }
  .subst-matrix td:not(.ent):empty { background:#f8fafc; }
  /* Větší tlačítka zkratek učitelů uvnitř absence */
  /* Ensure teacher abbrev buttons inside the matrix use consistent sizing */
  .subst-matrix td.ent .tch-abbrev-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Responzivní škálování pro široké displeje */
  @media (min-width:1400px){
    .subst-matrix { font-size:1.07rem; }
    .subst-matrix thead th { font-size:1.02em; }
    .subst-matrix td.ent { font-size:1.06em; }
  }
  @media (min-width:1800px){
    .subst-matrix { font-size:1.12rem; }
    .subst-matrix thead th { font-size:1.04em; }
    .subst-matrix td.ent { font-size:1.08em; }
  }
  .subst-scroll { overflow-x:auto; overflow-y:visible; max-width:100%; border-radius:6px; -webkit-overflow-scrolling:touch; background: #fff; }

  .tt-mobile-fullscreen {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 12px;
    border: none;
    background: rgba(31, 111, 235, 0.12);
    color: var(--primary-blue);
    font-size: 0.95rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }

  .tt-mobile-fullscreen i {
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .tt-mobile-fullscreen:hover {
    background: rgba(31, 111, 235, 0.2);
    transform: scale(1.05);
  }

  .tt-mobile-fullscreen:hover i {
    animation: external-link-pop 0.4s ease;
  }

  @keyframes external-link-pop {
    0% { transform: translate(0, 0); }
    50% { transform: translate(3px, -3px); }
    100% { transform: translate(0, 0); }
  }

  .tt-mobile-fullscreen:active {
    transform: scale(0.9);
  }

  .tt-mobile-fullscreen:active i {
    animation: external-link-click 0.15s ease-out forwards;
  }

  @keyframes external-link-click {
    0% { transform: translate(0, 0); }
    100% { transform: translate(4px, -4px) scale(1.1); }
  }

  .tt-mobile-fullscreen:focus-visible {
    outline: 2px solid rgba(31, 111, 235, 0.35);
    outline-offset: 2px;
  }

  @media (max-width: 1039px) {
    .tt-mobile-fullscreen {
      display: inline-flex;
      margin-left: 0.45rem;
    }
  }

  .timetable-fullscreen-overlay {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 4100;
    background: 
      radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
      radial-gradient(ellipse 60% 40% at 80% 100%, rgba(251, 146, 60, 0.08) 0%, transparent 40%),
      linear-gradient(180deg, #f0f5ff 0%, #e8eef8 50%, #dce4f0 100%);
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
  }

  .timetable-fullscreen-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
  }

  .timetable-fullscreen-overlay.active {
    display: flex;
    animation: timetableOverlayFade 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .timetable-fullscreen-inner {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: clamp(0.75rem, 2.5vw, 1.25rem);
    box-sizing: border-box;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 255, 0.88) 100%);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: none;
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 0 0 1px rgba(148, 163, 184, 0.2);
    isolation: isolate;
    animation: timetablePanelRise 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
  }

  .timetable-fullscreen-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    font-weight: 600;
    color: var(--text, #111827);
    padding: clamp(0.75rem, 1.8vw, 1.1rem) clamp(0.85rem, 2vw, 1.25rem);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.96) 100%);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 20px;
    box-shadow: 
      0 4px 6px -1px rgba(15, 23, 42, 0.05),
      0 10px 20px -5px rgba(15, 23, 42, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 1);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
  }

  .timetable-fullscreen-toolbar::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: linear-gradient(180deg, var(--primary-blue, #3b82f6) 0%, var(--primary-orange, #f97316) 100%);
    border-radius: 999px;
    opacity: 0.85;
  }

  .timetable-fullscreen-heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-left: 0.75rem;
  }

  .timetable-fullscreen-title {
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  .timetable-fullscreen-meta {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .timetable-fullscreen-meta::before {
    content: '💡';
    font-size: 0.75rem;
  }

  .timetable-fullscreen-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
    background: rgba(15, 23, 42, 0.04);
    padding: 0.35rem;
    border-radius: 14px;
  }

  .tt-toolbar-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    border: none;
    background: #fff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
      0 1px 2px rgba(15, 23, 42, 0.06),
      0 4px 8px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
  }

  .tt-toolbar-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-blue, #3b82f6), var(--primary-orange, #f97316));
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .tt-toolbar-btn i {
    position: relative;
    z-index: 1;
  }

  .tt-toolbar-btn:hover {
    background: #f1f5f9;
    transform: translateY(-2px);
    box-shadow: 
      0 4px 8px rgba(15, 23, 42, 0.1),
      0 8px 16px rgba(15, 23, 42, 0.06);
  }

  .tt-toolbar-btn:hover::before {
    opacity: 0.08;
  }

  .tt-toolbar-btn:active {
    transform: translateY(0) scale(0.96);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  }

  .tt-toolbar-btn:focus-visible {
    outline: 2px solid var(--primary-blue, #3b82f6);
    outline-offset: 2px;
  }

  .timetable-fullscreen-scale-pill {
    min-width: 3.4rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    border: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 3px rgba(15, 23, 42, 0.08);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  .timetable-fullscreen-close {
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
      0 4px 6px rgba(15, 23, 42, 0.2),
      0 10px 20px rgba(15, 23, 42, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
  }

  .timetable-fullscreen-close::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .timetable-fullscreen-close i {
    position: relative;
    z-index: 1;
  }

  .timetable-fullscreen-close:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
      0 6px 12px rgba(15, 23, 42, 0.25),
      0 15px 30px rgba(15, 23, 42, 0.2);
  }

  .timetable-fullscreen-close:hover::before {
    opacity: 1;
  }

  .timetable-fullscreen-close:active {
    transform: translateY(0) scale(0.98);
  }

  .timetable-fullscreen-close:focus-visible {
    outline: 2px solid rgba(239, 68, 68, 0.6);
    outline-offset: 3px;
  }

  body.timetable-fullscreen-open {
    overflow: hidden;
  }

  .timetable-fullscreen-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: 
      radial-gradient(ellipse 100% 100% at 50% 0%, rgba(59, 130, 246, 0.04) 0%, transparent 50%),
      linear-gradient(135deg, #fafbff 0%, #f1f5fb 50%, #e8eef6 100%);
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 
      inset 0 2px 4px rgba(255, 255, 255, 0.8),
      inset 0 -1px 2px rgba(15, 23, 42, 0.03),
      0 20px 50px rgba(15, 23, 42, 0.12),
      0 8px 20px rgba(15, 23, 42, 0.08);
    min-height: 0;
    padding: clamp(0.65rem, 2vw, 1rem);
    touch-action: none;
    cursor: grab;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .timetable-fullscreen-stage.timetable-pan-active {
    cursor: grabbing;
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 
      inset 0 2px 4px rgba(255, 255, 255, 0.8),
      inset 0 0 0 2px rgba(59, 130, 246, 0.15),
      0 25px 60px rgba(15, 23, 42, 0.16),
      0 10px 25px rgba(59, 130, 246, 0.08);
  }

  .timetable-fullscreen-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
      radial-gradient(circle at 1px 1px, rgba(15, 23, 42, 0.06) 1px, transparent 0);
    background-size: 24px 24px;
    opacity: 0.6;
    pointer-events: none;
    border-radius: inherit;
  }

  .timetable-fullscreen-stage::after {
    content: '🖱️ Táhni pro posun • 🔍 Kolečko myši pro zoom';
    position: absolute;
    left: 50%;
    bottom: 0.75rem;
    transform: translateX(-50%);
    font-size: 0.72rem;
    color: #64748b;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    padding: 0.35rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(4px);
    opacity: 0.9;
    transition: opacity 0.3s ease;
  }

  .timetable-fullscreen-stage.timetable-pan-active::before {
    opacity: 0.8;
  }

  .timetable-fullscreen-stage.timetable-pan-active::after {
    opacity: 0.5;
  }

  .timetable-fullscreen-canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    will-change: transform;
    background: #fff;
    border-radius: 20px;
    box-shadow: 
      0 0 0 1px rgba(15, 23, 42, 0.08),
      0 10px 25px rgba(15, 23, 42, 0.12),
      0 30px 60px rgba(15, 23, 42, 0.18),
      0 50px 100px rgba(15, 23, 42, 0.08);
    border: none;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }

  .timetable-fullscreen-stage.timetable-pan-active .timetable-fullscreen-canvas {
    box-shadow: 
      0 0 0 2px rgba(59, 130, 246, 0.3),
      0 15px 35px rgba(15, 23, 42, 0.15),
      0 40px 80px rgba(15, 23, 42, 0.12);
  }

  .timetable-fullscreen-overlay .schedule-table {
    width: auto;
    min-width: unset;
    background: #fff;
    box-shadow: none;
  }

  .timetable-fullscreen-overlay .schedule-table,
  .timetable-fullscreen-overlay .schedule-table * {
    transition: none !important;
  }

  .timetable-fullscreen-overlay .lesson-box,
  .timetable-fullscreen-overlay .lesson-box.mini {
    pointer-events: none;
  }

  .timetable-fullscreen-empty {
    position: absolute;
    inset: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #64748b;
    font-size: 1.05rem;
    font-weight: 500;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 255, 0.9) 100%);
    border-radius: 20px;
    border: 2px dashed rgba(148, 163, 184, 0.4);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8);
  }

  .timetable-fullscreen-empty::before {
    content: '📋';
    font-size: 2.5rem;
    opacity: 0.6;
  }

  @media (max-width: 640px) {
    .timetable-fullscreen-inner {
      padding: 0.55rem;
      gap: 0.7rem;
    }

    .timetable-fullscreen-toolbar {
      flex-direction: column;
      align-items: stretch;
      gap: 0.65rem;
      padding: 0.65rem 0.75rem;
      border-radius: 16px;
    }

    .timetable-fullscreen-toolbar::before {
      display: none;
    }

    .timetable-fullscreen-heading {
      padding-left: 0;
      text-align: center;
    }

    .timetable-fullscreen-controls {
      justify-content: center;
      order: 2;
    }

    .timetable-fullscreen-close {
      width: 2.4rem;
      height: 2.4rem;
      font-size: 1rem;
      position: absolute;
      top: 0.65rem;
      right: 0.75rem;
    }

    .timetable-fullscreen-stage {
      border-radius: 18px;
      padding: 0.5rem;
    }

    .timetable-fullscreen-stage::after {
      font-size: 0.65rem;
      padding: 0.25rem 0.75rem;
      bottom: 0.5rem;
    }

    .tt-toolbar-btn {
      width: 2.3rem;
      height: 2.3rem;
      font-size: 0.85rem;
    }

    .timetable-fullscreen-scale-pill {
      font-size: 0.78rem;
      padding: 0.35rem 0.55rem;
      min-width: 2.8rem;
    }

    .timetable-fullscreen-meta::before {
      display: none;
    }
  }

  @media (max-width: 480px) {
    .timetable-fullscreen-stage::after {
      content: '🖱️ Táhni • 🔍 Zoom';
    }
  }

  @keyframes timetableOverlayFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes timetablePanelRise {
    0% { transform: translateY(20px) scale(0.98); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
  }

  /* Rozvrhy */
  .schedule-container {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    overflow: auto; /* Vždy povolit scroll pro bezpečnost */
    /* shadows removed for performance */
    box-shadow: none;
    border: 1px solid rgba(226, 232, 240, 0.6);
    flex: 1;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    position: relative;
  /* removed heavy backdrop blur to improve rendering performance */
  backdrop-filter: none;
    /* Vylepšené scrollbary */
    scrollbar-width: thin;
    scrollbar-color: var(--primary-orange) rgba(0,0,0,0.1);
  }

  .schedule-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .schedule-container::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
  }

  .schedule-container::-webkit-scrollbar-thumb {
    background: var(--primary-blue);
    border-radius: 4px;
    transition: background 0.3s ease;
  }

  .schedule-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-orange);
  }

  .schedule-container::-webkit-scrollbar-corner {
    background: rgba(0,0,0,0.05);
  }

  .schedule-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgb(255 180 90) 0%, rgb(255 225 180) 45%, rgb(42 129 186) 100%) !important;
    z-index: 1;
    /* decorative shadow removed */
  }

  .schedule-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    height: 100%;
    table-layout: fixed;
    background: transparent;
  }

  /* Adaptivní škálování rozvrhu */
  .timetable-scale {
    position: relative;
    height: 100%;
    overflow: auto; /* Vždy povolit scroll jako zálohu */
    display: flex;
    flex-direction: column;
  }

  .timetable-scale .schedule-table {
    flex: 1;
    min-height: 0; /* umožní flexbox správně vypočítat výšku */
    min-width: 800px; /* Minimální šířka pro horizontální scroll při potřebě */
  }

  /* Auto-fit režim na velkých displejích: tabulka se škáluje pouze vertikálně
     pro zachování čitelnosti a konzistentní šířky sloupců napříč zařízeními.
     
     POŽADAVKY PRO AKTIVACI:
     - Minimální šířka: 1400px
     - Minimální výška: 920px
     
     V fit módu je KOMPLETNĚ ZAKÁZÁN jakýkoliv scroll (vertikální i horizontální).
     Rozvrh je přesně přizpůsoben výšce obrazovky pomocí vertikálního škálování.
     Pod prahy zůstává standardní scrollování jako bezpečná záloha.
  */
  @media (min-width: 1400px) and (min-height: 920px) {
    /* V fit módu ÚPLNĚ vypnout scroll - rozvrh se vždy vejde */
    .timetable-scale.fit-mode,
    .schedule-container.timetable-scale.fit-mode {
      overflow: hidden !important;     /* Zakázat scroll v obou osách */
      overflow-x: hidden !important;   /* Explicitně zakázat horizontální scroll */
      overflow-y: hidden !important;   /* Explicitně zakázat vertikální scroll */
      display: block !important;       /* Vypnout flexbox v fit módu */
      position: relative;
      /* Výška se nastavuje dynamicky v JS podle scaledH */
    }
    
    .timetable-scale.fit-mode .schedule-table {
      flex: none;                      /* Vypnout flex růst/shrink */
      display: block;                  /* Tabulka jako blokový element */
      position: relative;
      height: auto;                    /* Použít vlastní výšku tabulky */
      min-height: 0;                   /* Reset min-height */
      overflow: hidden;                /* Žádný overflow z tabulky */
      will-change: transform;
      /* Plynulejší přechody pro vertikální škálování s sub-pixel rendering hints */
      transition: transform 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
      /* Zlepšit vykreslování škálovaného textu */
      -webkit-font-smoothing: subpixel-antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      /* GPU akcelerace pro hladší vykreslování na velkých obrazovkách */
      transform-style: preserve-3d;
      backface-visibility: hidden;
    }
    
    /* Skrýt všechny scrollbary v fit módu */
    .timetable-scale.fit-mode::-webkit-scrollbar,
    .schedule-container.timetable-scale.fit-mode::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }
    .timetable-scale.fit-mode,
    .schedule-container.timetable-scale.fit-mode {
      scrollbar-width: none !important; /* Firefox */
      -ms-overflow-style: none !important; /* IE/Edge */
    }
  }

  /* Vizuální indikátor pro režim scrollování (pod prahy 1400x920) */
  @media (max-width: 1399px), (max-height: 919px) {
    .timetable-scale {
      /* Subtilní indikace, že je aktivní scrollování */
      scrollbar-width: thin;
    }
    .timetable-scale::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    .timetable-scale::-webkit-scrollbar-track {
      background: var(--panel-dark, #1a1d24);
      border-radius: 4px;
    }
    .timetable-scale::-webkit-scrollbar-thumb {
      background: var(--primary-blue, #1f6feb);
      border-radius: 4px;
    }
    .timetable-scale::-webkit-scrollbar-thumb:hover {
      background: var(--primary-blue-hover, #388bfd);
    }
  }

  /* Pro extra velké obrazovky (Full HD+) - vylepšit celkovou kvalitu renderingu */
  @media (min-width: 1920px) and (min-height: 1080px) {
    .timetable-scale.fit-mode .schedule-table {
      /* Agresivnější font rendering pro velké displeje */
      image-rendering: crisp-edges;
      image-rendering: -webkit-optimize-contrast;
    }
  }

  /* Pro WQHD displeje (2560x1440+) - optimalizace pro vysoké rozlišení */
  @media (min-width: 2560px) and (min-height: 1440px) {
    .timetable-scale.fit-mode .schedule-table {
      /* Zachovat maximální ostrost textu */
      text-rendering: geometricPrecision;
    }
  }

  /* Pro ultra-wide a 4K displeje (3840x2160+) - maximální ostrost */
  @media (min-width: 3840px) and (min-height: 2160px) {
    .timetable-scale.fit-mode .schedule-table {
      /* Zachovat maximální ostrost na vysokých DPI displejích */
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      perspective: 1000px;
      -webkit-perspective: 1000px;
    }
  }

  /* Substitutions day navigation s animacemi */
  .substitutions-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: none;
    justify-content: flex-end;
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .substitutions-nav:hover {
    transform: none;
    box-shadow: none;
  }

  .substitutions-nav .nav-btn {
    background: var(--primary-blue);
    color:#fff;
    border:none;
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    border-radius:8px;
    font-size:1rem;
    cursor:pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    flex-shrink:0;
    position: relative;
    overflow: hidden;
  }

  .substitutions-nav .nav-btn::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .substitutions-nav .nav-btn:hover::before {
    width: 0; height: 0;
  }

  .substitutions-nav .nav-btn:hover { 
    background: var(--primary-orange);
    transform: none;
    /* nav button hover shadow removed */
  }

  .substitutions-nav .nav-btn:active {
    transform: scale(0.92);
  }

  .substitutions-nav .nav-btn:active .fa-chevron-left {
    animation: nav-click-left 0.15s ease-out forwards;
  }

  .substitutions-nav .nav-btn:active .fa-chevron-right {
    animation: nav-click-right 0.15s ease-out forwards;
  }

  @keyframes nav-click-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-6px); }
  }

  @keyframes nav-click-right {
    0% { transform: translateX(0); }
    100% { transform: translateX(6px); }
  }

  .substitutions-nav .nav-btn i {
    transition: transform 0.2s ease;
  }

  .substitutions-nav .nav-btn:hover .fa-chevron-left {
    animation: nav-chevron-left 0.3s ease;
  }

  .substitutions-nav .nav-btn:hover .fa-chevron-right {
    animation: nav-chevron-right 0.3s ease;
  }

  @keyframes nav-chevron-left {
    0% { transform: translateX(0); }
    50% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
  }

  @keyframes nav-chevron-right {
    0% { transform: translateX(0); }
    50% { transform: translateX(4px); }
    100% { transform: translateX(0); }
  }

  .substitutions-nav .today-btn {
    margin-left:auto;
    background: var(--primary-orange);
    color:#fff;
    border:none; 
    padding:.55rem 1rem; 
    border-radius:8px; 
    cursor:pointer; 
    font-weight:600; 
    letter-spacing:.5px; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  .substitutions-nav .today-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 100%);
    transition: none;
  }

  .substitutions-nav .today-btn:hover::before {
    left: -100%;
  }

  .substitutions-nav .today-btn:hover { 
    background:#f19915;
    transform: none;
    /* today button hover shadow removed */
  }

  .substitutions-nav .subst-date { 
    /* Unified with .tt-mode-btn visuals */
    font-size:1.05rem;
    font-weight:600;
    letter-spacing:.5px;
    transition: none;
    background: linear-gradient(180deg, #ffffff, #2a81ba47);
    padding: .45rem .8rem;
    border-radius: 12px;
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    line-height:1.1;
    will-change: auto;
    position: relative;
  }

  .substitutions-nav .subst-date::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left var(--duration-medium) var(--ease-standard);
  }

  .substitutions-nav .subst-date:hover::before { left: 100%; }

  .substitutions-nav .subst-date:hover {
    background: var(--light-blue);
    color: #fff;
    transform: none;
  }

  .substitutions-nav .subst-date:active {
    transform: none;
    transition: none;
  }
  .subst-filter { 
    display:flex; 
    gap:.4rem; 
    margin-left:1rem;
    animation: none;
  }

  .subst-filter .sf-btn { 
    background: linear-gradient(180deg, #ffffff, #2a81ba47);
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    padding: .85rem 1.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: none;
    /* filter button shadow removed */
    line-height: 1.1;
    will-change: auto;
    position: relative;
    overflow: visible;
  }

  .subst-filter .sf-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: none;
  }

  .subst-filter .sf-btn:hover::before {
    left: -100%;
  }

  .subst-filter .sf-btn.active { 
    background: var(--primary-blue);
    color: #fff;
    /* active filter shadow removed */
    transform: none;
  }

  .subst-filter .sf-btn:not(.active):hover { 
    background: var(--light-blue);
    color: #fff;
    transform: none;
    /* hover shadow removed */
  }

  .subst-filter .sf-btn:active {
    transform: none;
    transition: none;
  }

  /* Mřížka suplování tříd / učitelů s animacemi */
  .subst-class-grid { 
    font-size:.7rem;
  }

  .subst-grid { 
    border-collapse: separate; 
    border-spacing:0; 
    width:100%; 
    table-layout:fixed;
  }

  .subst-grid th, .subst-grid td { 
    border:1px solid var(--border); 
    background:#fff; 
    vertical-align:top;
    font-size: 1.05rem; /* Zvětšený font */
  }

  /* Zrušeno: hover efekty na řádcích a buňkách v .subst-grid */

  .subst-grid thead th { 
    position:sticky; 
    top:0; 
    background:var(--primary-blue); 
    color:#fff; 
    font-weight:600; 
    font-size:1.4rem; /* Zvětšený font hlaviček */
    z-index:2;
    /* Prevence blikání - zajistit stabilní výchozí stav */
    opacity: 0;
    transform: translateY(-15px);
  }

  /* Ensure sticky headers remain visible on larger screens
     - Use a CSS variable for top offset in case there's a top bar/header
     - Apply on desktop (>= 992px) where layout has more space */
  @media (min-width: 992px) {
    /* Make substitution headers flush to top of viewport */
    :root { --subst-header-top: 0px; } /* set to 0 so header sits at very top */
    
    /* Section header height for sticky positioning calculation */
    #substitutions { --section-header-height: 4.5rem; }

    /* Make sure the scroll container allows sticky children to stick to viewport
       If the table is inside a scrollable wrapper, thead sticky will stick to the wrapper.
       We prefer sticking to the viewport top, so ensure the wrapper doesn't create a new stacking context */
    .substitutions-grid .substitutions-wrapper,
    .subst-class-grid .subst-scroll,
    .subst-teacher-grid .subst-scroll {
      overflow: visible; /* allow the thead to escape wrapper when sticky */
    }

    /* Sticky header offset and visual style */
    .subst-grid thead th {
      position: sticky !important;
      top: var(--section-header-height) !important; /* positioned below section-header */
      z-index: 40 !important; /* above most content */
  /* shadow removed - keep layout but avoid paint-heavy shadows */
  box-shadow: none;
      opacity: 1 !important;
      transform: none !important;
    }

    /* cls-head (left column header) should stay sticky as well with same top offset */
    .subst-grid th.cls-head {
      position: sticky !important;
      top: var(--section-header-height) !important;
      z-index: 45 !important;
    }
  }


  .subst-grid th.cls-head {
    left: 0;
    z-index: 15; /* header stays above data cells */
    min-width: 85px;
    width: 85px;
    background: linear-gradient(228deg, var(--primary-blue) 0%, var(--primary-orange) 100%);
    position: sticky;
    overflow: hidden;
    border-radius: 5px
  }

  /* Remove decorative ::before hover animation on cls-head */
  .subst-grid th.cls-head::before {
    content: none !important;
    display: none !important;
  }
  .subst-grid td.cls-col {
    position: sticky;
    left: 0;
    background: linear-gradient(135deg, var(--primary-orange) 0%, var(--light-orange) 100%);
    color: white;
    font-weight: 600;
    font-size: 1.8rem;
    white-space: nowrap;
    min-width: 85px;
    width: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 10;
    /* Center the abbreviated text horizontally and vertically while keeping the
       background box and sizing untouched */
    text-align: center;
    vertical-align: middle;
    line-height: 1.1; /* keep compact multiline spacing if needed */
    border-radius: 5px
  } /* Zvětšený font a šířka */
  .subst-grid .hour-head { text-align:center; border-radius: 5px }

  /* Zajistit konzistentní šířku sloupců hodin – různé odečty dle režimu */
  /* Režim tříd: třída (85px) + skupiny (160px) -> 245px */
  .substitutions-grid.mode-classes .subst-grid th.hour-head,
  .substitutions-grid.mode-classes .subst-grid td:not(.cls-col):not(.groups-col) { width: calc((100% - 245px)/11); }
  /* Ostatní režimy (učitel, místnost): jen třída/dny sloupec (85px) */
  .substitutions-grid:not(.mode-classes) .subst-grid th.hour-head,
  .substitutions-grid:not(.mode-classes) .subst-grid td:not(.cls-col):not(.groups-col) { width: calc((100% - 85px)/11); }

  /* Sloupec skupiny (první po třídě) */
  .subst-grid th[data-hour="-1"], .subst-grid td.groups-col { width:160px; }
  .subst-grid .hg-groups { font-weight:600; color:#ffd9a8; }
  .grid-cell { display:flex; flex-direction:column; gap:6px; min-width:110px; } /* Zvětšená minimální šířka a mezery */
  .grid-item { border:1px solid var(--border); border-radius:6px; padding:.0rem .25rem .25rem; background:#f7f8fa; font-size:.85rem; box-sizing:border-box; max-width:100%; white-space:normal; word-break:break-word; overflow-wrap:anywhere; } /* Zvětšený font a padding */
  /* Add the requested elevated shadow + subtle inset and translate for visual lift */
  .subst-grid .grid-item:hover {
    transform: translateY(-1px);
    transition: transform .16s ease;
  }
  .grid-item.cancel { background:#fff5f5; border-color:#ffc9c9; }
  .grid-item.change { background:#f2f7ff; border-color:#c7e0ff; }
  .grid-item.group { background:#f0f0f0; border-color:#d9d9d9; font-style:italic; }
  .grid-item.guard { background:#fff9ec; border-color:#ffd9a8; font-size:.85rem; line-height:1.2; } /* Zvětšený font dozorů */
  .grid-item.breakguard { background:#eefbff; border-color:#b6ebff; font-size:.85rem; line-height:1.2; } /* Zvětšený font dozorů */
  /* inset paid highlight removed */
  .grid-item .gi-subj { font-weight:600; font-size:1rem; letter-spacing:.4px; } /* Zvětšený font předmětu */
  .grid-item .gi-group { font-size:.88rem; color:var(--primary-blue); } /* Zvětšený font skupiny */
  .grid-item .gi-meta { font-size:.84rem; color:var(--text-light); } /* Zvětšený font meta */
  .grid-item .gi-type { font-size:.67rem; font-weight:600; color:var(--primary-orange); margin-top:.25rem; } /* Zvětšený font typu */
  .g-empty { background:#fafbfc; }

  /* Střední šířky: povolit větší flexibilitu buňkám, aby nepřetékaly při specifických rozměrech */
  @media (min-width: 1040px) and (max-width: 1280px) {
    .subst-grid .grid-cell { min-width: 0; }
    .subst-grid .grid-item { max-width: 100%; }
  }

  /* Timetable popover */
  .tt-popover { position:fixed; z-index:1000; background:#ebebeb; border:1px solid var(--border); border-radius:10px; padding:.75rem .9rem 1rem; width:260px; font-size:.8rem; animation:popoverEntrance .4s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: center; overflow:hidden; }
  .tt-popover::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 4px;
    background: linear-gradient(90deg, rgb(255 180 90) 0%, rgb(255 225 180) 45%, rgb(42 129 186) 100%) !important;
    border-radius: 10px 10px 0 0;
    pointer-events: none;
    z-index: 1;
  }
  .tt-pop-head { font-size:1.05rem; font-weight:700; margin:0 0 .4rem; letter-spacing:.5px; 
    background: var(--primary-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
  .tt-pop-row { display:flex; gap:.4rem; margin:.25rem 0; }
  .tt-pop-row .lbl { min-width:64px; font-weight:600; color:var(--text-light); }
  .tt-pop-row .val { flex:1; font-weight:500; color:var(--text); }
  .tt-pop-close {
    position:absolute;
    top:-2px;
    right:6px;
    background:transparent;
    border:none;
    font-size:1.35rem;
    line-height:1;
    cursor:pointer; 
    color:var(--text-light);
    padding:6px 8px;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    min-height:36px;
  }
  .tt-pop-close:hover { background:#f0f2f536; color:var(--text); }
  .lesson-box[role="button"] { cursor:pointer; }
  /* Date picker popover */
  .tt-date-popover { width: min(340px, 95vw); }
  .tt-date-popover .dp-calendar { display:flex; flex-direction:column; gap:.5rem; }
  .tt-date-popover .dp-cal-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
  .tt-date-popover .dp-month-name { font-weight:700; color:var(--text); }
  .tt-date-popover .dp-week-indicator { text-align:right; font-size:.85rem; font-weight:600; color:var(--primary-blue); }
  .tt-date-popover .dp-nav { background:#fff; border:1px solid var(--border); color:var(--text); width:28px; height:28px; border-radius:6px; line-height:1; display:flex; align-items:center; justify-content:center; }
  .tt-date-popover .dp-nav:hover { background:#f2f4f8; }
  .tt-date-popover .dp-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem; padding-top:.25rem; }
  .tt-date-popover .dp-wd { text-align:center; color:var(--text-light); font-weight:600; font-size:.75rem; }
  .tt-date-popover .dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem; }
  .tt-date-popover .dp-day { background:#fff; border:1px solid var(--border); border-radius:8px; padding:.4rem 0; text-align:center; cursor:pointer; color:var(--text); }
  .tt-date-popover .dp-day:hover { background:#f7f9fc; }
  .tt-date-popover .dp-day.outside { opacity:.45; }
  .tt-date-popover .dp-day.today { border-color:#9ec2ff; outline: 2px solid rgba(31,111,235,.12); }
  .tt-date-popover .dp-day.selected { background:var(--primary-blue); color:#fff; border-color:transparent; outline: 3px solid rgba(31,111,235,.18); }
  .tt-date-popover .dp-actions { display:flex; gap:.4rem; flex-wrap:wrap; }
  .tt-date-popover .dp-actions button { background:transparent; border:1px dashed var(--border); color:var(--text); padding:.3rem .6rem; border-radius:999px; font-size:.75rem; }
  .tt-date-popover .dp-actions button:hover { background:#f2f4f8; }
  .tt-date-popover .dp-apply-row { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.25rem; }
  .tt-date-popover .dp-apply { background:var(--primary-blue); color:#fff; border:none; padding:.5rem .85rem; border-radius:8px; font-weight:600; }
  .tt-date-popover .dp-apply:hover { filter:brightness(1.03); }
  .tt-date-popover .dp-cancel { background:transparent; border:1px solid var(--border); color:var(--text); padding:.5rem .85rem; border-radius:8px; font-weight:600; }
  .tt-date-popover .dp-cancel:hover { background:#f2f4f8; }
  /* Detaily suplování v popoveru */
  .subst-pop-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3rem; }
  .subst-pop-item { font-size:.72rem; background:#f7f9fc; padding:.3rem .4rem; border-radius:6px; line-height:1.15; }
  .subst-pop-item strong { color:var(--primary-orange); font-weight:600; margin-right:.35rem; }
  .subst-pop-item.subst-cancel { background:#ffecec; }
  .subst-pop-item.subst-change { background:#eef6ff; }
  .subst-pop-item.subst-group, .subst-pop-item.subst-guard { background:#fff9ec; }

  /* Popover celé jméno učitele */
  .tch-abbrev-btn {
    font: inherit;
    margin: 0;
    cursor: pointer;
    color: white;
    font-weight: 600;
    position: relative;
    border-radius: 6px;
  /* removed text-shadow to avoid extra paint */
  text-shadow: none;
    background: transparent;
    padding: 0.15rem 0.4rem;
  /* removed blur for performance */
  backdrop-filter: none;
  /* removed box-shadow for performance */
  box-shadow: none;
    border-color: var(--primary-orange);

    /* Layout rules to make all abbrev buttons consistent */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0; /* allow shrinking inside flex containers */
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
  }
  .tch-abbrev-btn:hover, .tch-abbrev-btn:focus { background:rgba(59,130,246,.1); outline:none; }
  .tch-name-pop { 
    position: fixed;
    background:#1e293b; 
    color:#fff; 
    padding:.45rem .7rem .5rem; 
    border-radius:10px; 
    font-size:.72rem; 
    font-weight:500; 
  /* removed heavy popover shadow for performance */
  box-shadow: none;
    opacity:0; 
    /* use translate3d for smoother, GPU-accelerated animation */
    transform:translate3d(0,-4px,0) scale(.95); 
    transition:.18s cubic-bezier(.4,0,.2,1); 
    pointer-events:none; 
    white-space:nowrap;
    z-index: 10000;
  }

  /* Ensure teacher abbrev buttons inside the teacher/grid view stretch to fill the
     available space in their table cell. This primarily affects the substitutions
     teacher grid where left column or cells contain only the abbrev button. */
  .substitutions-grid.mode-teachers .subst-grid td .tch-abbrev-btn,
  .substitutions-grid.mode-teachers .subst-grid td > .tch-abbrev-btn,
  .subst-grid td.cls-col > .tch-abbrev-btn {
    display: inline-flex; /* keep inline flow but allow flex sizing */
    align-items: center;
    justify-content: center;
    width: 100%; /* fill horizontal space */
    box-sizing: border-box;
    /*padding: .35rem .5rem; /* comfortable hit area */
    background: transparent;
    height: 100%; /* attempt to fill vertical space when parent allows it */
    min-height: 34px; /* ensure tappable area */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* If the cell uses a flex wrapper (mobile sticky left column) ensure the button
     expands to fill the available area via flex:1. This keeps mobile behaviour intact. */
  .subst-grid .cls-col > .tch-abbrev-btn,
  .subst-grid .cls-col > * > .tch-abbrev-btn {
    flex: 1 1 auto;
  }
  .tch-name-pop--large { 
    font-size:.9rem; 
    padding:.65rem .95rem .7rem; 
    border-radius:14px; 
    font-weight:600; 
    max-width:340px; 
    white-space:normal; 
    line-height:1.25; 
    /* removed blur/saturate for performance */
    backdrop-filter: none;
    background:rgba(30,41,59,.9); 
  }
  @media (min-width:1400px){
    .tch-name-pop--large { font-size:.95rem; max-width:380px; }
  }
  @media (min-width:1800px){
    .tch-name-pop--large { font-size:1rem; max-width:420px; }
  }
  .tch-name-pop.show { 
    opacity:1; 
    transform:translate3d(0,0,0) scale(1); 
    /* allow interactions inside the popover when visible (clicks should not
       immediately close it before user can interact/select text) */
    pointer-events: auto;
  }

  /* Mobile performance guardrails */
  @media (max-width: 1039px) {
    /* Zjemnit stíny a zrychlit interakce v gridu a rozvrzích */
    .grid-item { box-shadow: none; border-radius:5px; transition: none; }
    .lesson-box { box-shadow: none !important; border-radius:8px !important; transition: transform .12s ease; }
    .tt-popover { box-shadow: none; transition: none; }
    /* Vypnout těžké efekty na scrollu */
    .substitutions-wrapper, .schedule-container, .subst-scroll { backdrop-filter: none !important; }
    /* Hinty pro plynulost */
    .substitutions-wrapper, .schedule-container { contain: content; }
    .subst-grid .grid-cell, .schedule-table { will-change: auto; }
    
    /* Fix pro mizející obsah v suplování na mobilu při scrollu */
    .subst-matrix { 
      will-change: auto !important; 
      transform: none !important; 
      contain: none !important; 
    }
    .subst-matrix th, .subst-matrix td { 
      will-change: auto !important; 
      transform: none !important; 
      contain: none !important; 
    }
    .tch-abbrev-btn { 
      will-change: auto !important; 
      transform: none !important; 
      contain: none !important; 
      -webkit-backface-visibility: visible !important; 
      backface-visibility: visible !important; 
    }
    .subst-grid { 
      will-change: auto !important; 
      transform: none !important; 
      contain: none !important; 
    }
    .subst-grid th, .subst-grid td { 
      will-change: auto !important; 
      transform: none !important; 
      contain: none !important; 
    }
    /* Vynucení překreslení pro problémové prvky */
    .subst-matrix, .subst-grid, .tch-abbrev-btn { 
      -webkit-transform: translateZ(0) !important; 
      transform: translateZ(0) !important; 
    }

    /* --- Sticky první sloupec pro mobilní zobrazení ---
       Umožní, aby zkratky tříd/učitelů/místností zůstaly přilepené
       během horizontálního scrollu. Zachovává barvy a stíny. */
    
    /* Ensure table rows have proper height so td can expand to 100% */
    .subst-grid tbody tr {
      height: 1px; /* trick to make td height:100% work */
    }
    
    /* Pro matici absence (subst-matrix) */
    .subst-matrix td.ent, .subst-matrix thead th:first-child {
      position: -webkit-sticky !important;
      position: sticky !important;
      left: 0 !important;
      z-index: 8 !important; /* Nad běžnými buňkami, pod záhlavím (které má vyšší z-index) */
      /*background: #f4f6f9 !important; /* zachovat barvu z .subst-matrix td.ent */
      border-right: 1px solid rgba(0,0,0,0.06) !important;
  /* removed inset shadow for sticky column - kept border for separation */
  box-shadow: none !important;
    }
    /* Pokud je záhlaví zároveň první sloupec (horní levý), zajistit překrytí */
    .subst-matrix thead th:first-child {
      z-index: 12 !important;
      /*background: var(--primary-blue) !important;*/
      color: #fff !important;
    }

    /* Pro mřížku (subst-grid) - třídy / učitelé */
    .subst-grid .cls-col, .subst-grid th.cls-head {
      position: -webkit-sticky !important;
      position: sticky !important;
      left: 0 !important;
      z-index: 8 !important;
      /* use same visual style as schedule day column */
      color: white !important;
  /* removed inset shadow for sticky column - kept border for separation */
  box-shadow: none !important;
      /* Remove padding from td itself and use a wrapper approach via pseudo-flex */
      padding: 0 !important;
      vertical-align: middle !important;
    }
    
    /* Create a flex wrapper effect inside the td using direct child styling */
    .subst-grid .cls-col,
    .subst-grid th.cls-head {
      /* Make the cell itself behave as flex container for centering */
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      /* Restore the padding inside the flex context */
      padding: 0.45rem 0.5rem !important;
      box-sizing: border-box !important;
    }
    /* Ensure children of the sticky cls-col don't have stray margins or inline formatting
       that would prevent proper vertical centering on small screens. Keep this scoped
       to mobile rules so desktop table layout is unchanged. */
    .subst-grid .cls-col > *,
    .subst-grid th.cls-head > * {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      /* make inline text/controls participate correctly in flex centering */
      display: block !important;
      text-align: center !important;
    }
    /* Pokud je v mřížce hlavička sloupce */
    .subst-grid th.cls-head {
      z-index: 11 !important;
      /*background: var(--primary-blue) !important;*/
      color: #fff !important;
    }

    /* Jemná korekce pro tlačítka zkratek v mobilu: vyplní sloupec a centrovat */
    .subst-matrix td.ent .tch-abbrev-btn, .subst-grid .cls-col .tch-abbrev-btn {
      position: relative !important;
      z-index: 9 !important;
      background: transparent !important;

      /* Make the abbrev fill the sticky cls-col area and center text */
      display: inline-flex !important;
      width: 100% !important;
      align-items: center !important;
      justify-content: center !important;
      padding: .35rem .5rem !important;
      box-sizing: border-box !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
  }

  /* Iframe styly (školní web, mapy) */
  iframe {
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 18px;
    /* iframe shadow removed to reduce repaint cost */
    box-shadow: none;
    animation: fadeIn .45s ease;
    transition: all var(--duration-normal) var(--ease-standard);
    scrollbar-width: thin;
    scrollbar-color: var(--primary-orange) rgba(0,0,0,.1);
  }

  iframe:hover {
    /* hover shadow removed */
    box-shadow: none;
    border-color: var(--primary-blue);
  }

  /* Hide iframe scrollbars completely - scroll is handled by container */
  iframe::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  iframe {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  /* Specifické styly pro jednotlivé iframe */
  #school-site iframe,
  #dod-map iframe {
    min-height: 400px;
    overflow: hidden; /* Disable iframe's own scrolling */
  }

  /* Loading states pro iframe */
  iframe[src="about:blank"] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-color: var(--border);
  }

  /* Barevné kategorie tříd ve selectu */
  select#class-select option.cls-cat-ab { background:#b6638f1b; color:#222; }
  select#class-select option.cls-cat-cd { background:#F9AF151b; color:#222; }
  select#class-select option.cls-cat-e  { background:#56AF311b; color:#222; }
  /* zvýraznění při hoveru (některé prohlížeče je neumožní) */
  @supports selector(option:hover) {
    select#class-select option.cls-cat-ab:hover { background:#D7338A44; }
    select#class-select option.cls-cat-cd:hover { background:#F9AF1544; }
    select#class-select option.cls-cat-e:hover  { background:#56AF3144; }
  }

  .schedule-table th,
  .schedule-table td {
    padding: 0.3rem 0.25rem;
    text-align: center;
    border: none;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Optimalizace pro větší obrazovky - rozvrh bez scrollu */
  @media (min-width: 1200px) {
    .schedule-table th,
    .schedule-table td {
      padding: 0.35rem 0.3rem;
    }
    
    .lesson-box {
      padding: 0.45rem 0.4rem;
      font-size: clamp(0.65rem, 1.1vw, 0.8rem);
      border-radius: 10px;
    }
    
    .schedule-table th {
      height: 65px;
      font-size: clamp(0.8rem, 1.3vw, 1.1rem);
    }
    
    .schedule-table .day-col {
      font-size: clamp(1.3rem, 2.2vw, 1.8rem);
      width: 85px;
    }
  }

  @media (min-width: 1400px) {
    .schedule-table th,
    .schedule-table td {
      padding: 0.4rem 0.35rem;
    }
    
    .lesson-box {
      padding: 0.5rem 0.45rem;
      font-size: clamp(0.7rem, 1.2vw, 0.85rem);
      border-radius: 12px;
    }
    
    .schedule-table th {
      height: 70px;
      font-size: clamp(0.85rem, 1.4vw, 1.2rem);
    }
    
    .schedule-table .day-col {
      font-size: clamp(1.4rem, 2.3vw, 1.9rem);
      width: 90px;
    }
  }

  @media (min-width: 1600px) {
    .schedule-table th,
    .schedule-table td {
      padding: 0.45rem 0.4rem;
    }
    
    .lesson-box {
      padding: 0.55rem 0.5rem;
      font-size: clamp(0.75rem, 1.3vw, 0.9rem);
      border-radius: 14px;
    }
    
    .schedule-table th {
      height: 75px;
      font-size: clamp(0.9rem, 1.5vw, 1.3rem);
    }
    
    .schedule-table .day-col {
      font-size: clamp(1.5rem, 2.4vw, 2rem);
      width: 95px;
    }
  }

  @media (min-width: 1920px) {
    .schedule-table th,
    .schedule-table td {
      padding: 0.5rem 0.45rem;
    }
    
    .lesson-box {
      padding: 0.6rem 0.55rem;
      font-size: clamp(0.8rem, 1.4vw, 0.95rem);
      border-radius: 16px;
    }
    
    .schedule-table th {
      height: 80px;
      font-size: clamp(0.95rem, 1.6vw, 1.4rem);
    }
    
    .schedule-table .day-col {
      font-size: clamp(1.6rem, 2.5vw, 2.1rem);
      width: 100px;
    }
  }

  .schedule-table th {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%);
    color: white;
    font-weight: 600;
    font-size: clamp(0.75rem, 1.2vw, 1rem);
    line-height: 1.1;
    width: calc((100vw - 350px) / 11);
    height: 60px;
    position: relative;
    border-radius: 5px;
  }

  .schedule-table th.cls-head {
    background: linear-gradient(228deg, var(--primary-blue) 0%, var(--primary-orange) 100%);
  }

  .schedule-table th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  }

  .schedule-table th:last-child {
    border-right: none;
  }

  /* Název dne (první sloupec) */
  .schedule-table .day-col {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-weight: 700;
    letter-spacing: 1px;
    color: white;
    background: linear-gradient(135deg, var(--primary-orange) 0%, var(--light-orange) 100%);
    text-align: center;
    width: 80px;
    border-right: 2px solid rgba(255, 255, 255, 0.2);
    padding: 0.3rem 0.25rem;
    border-radius: 5px;
  }

  .schedule-table .day-col .day-abbrev {
    font-size: inherit;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0; /* removed extra bottom gap - separator provides spacing */
  }

  /* Decorative separator between day abbrev and date */
  .schedule-table .day-col .day-abbrev::after{
    content: "";
    display: block;
    height: 1px;
    margin: 0.5rem 0 0 0; /* equal gap above and below separator */
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
    width: 100%;
    opacity: 0.9;
  }

  .schedule-table .day-col .day-date {
    font-size: clamp(0.7rem, 1.15vw, 1.1rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.02em;
    display: inline-block;
    margin-top: 0; /* ensure no extra gap above date */
    padding: 0.15rem 0.4rem;
  }

  /* Zvýraznění aktuálního dne (pondělí..pátek) v rozvrzích */
  .schedule-table tbody tr.day-now td.day-col {
    background: linear-gradient(135deg, var(--primary-orange) 0%, var(--light-orange) 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(15, 81, 136, 0.12);
    transform: translateZ(0);
  }
  .schedule-table tbody tr.day-now td.day-col .day-abbrev {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 6px;
    padding: 0.1rem 0.35rem;
    font-weight: 800;
  }
  .schedule-table tbody tr.day-now td.day-col .day-date {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 6px;
    padding: 0.1rem 0.35rem;
  }

  /* Responzivní optimalizace pro šířky sloupců */
  @media (min-width: 1200px) {
    .schedule-table th {
      width: calc((100vw - 380px) / 11); /* Optimalizace pro větší obrazovky */
    }
  }

  @media (min-width: 1400px) {
    .schedule-table th {
      width: calc((100vw - 390px) / 11);
    }
  }

  @media (min-width: 1600px) {
    .schedule-table th {
      width: calc((100vw - 395px) / 11);
    }
  }

  @media (min-width: 1920px) {
    .schedule-table th {
      width: calc((100vw - 400px) / 11);
    }
  }

  /* Zachovat původní chování pro menší obrazovky */
  @media (max-width: 1199px) {
    .schedule-table th {
      width: calc((100vw - 350px) / 11);
    }
  }

  .schedule-table td {
    background: rgba(255, 255, 255, 0.8);
    border-right: 1px solid rgba(226, 232, 240, 0.4);
    border-bottom: 1px solid rgba(226, 232, 240, 0.4);
  }

  /* Nové rozvrhové buňky - pokročilý design */
  .lesson-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 0.4rem 0.35rem;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 12px;
    font-size: clamp(0.6rem, 1vw, 0.74rem);
    line-height: 1.1;
    color: #1e293b;
    overflow: hidden;
    transition: transform var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
    transform: translateZ(0); /* Optimalizace pro animace */
    will-change: transform; /* Removed box-shadow from will-change to avoid extra paint work */
  }

  /* Výkonnostní optimalizace pro větší obrazovky */
  @media (min-width: 1200px) {
    .lesson-box {
      will-change: auto; /* Vypnout will-change pro lepší výkon na větších obrazovkách */
      backface-visibility: hidden; /* Optimalizace pro 3D transformace */
      transform: translate3d(0,0,0); /* Hardware acceleration */
    }
    
    .lesson-box:hover {
      transform: translate3d(0,-2px,0) scale(1.02);
      border-color: var(--primary-blue);
    }
    
    /* Optimalizace tabulky pro větší obrazovky */
    .schedule-table {
      contain: layout style; /* Optimalizace re-renderingu */
    }
    
    .schedule-table th,
    .schedule-table td {
      contain: layout; /* Izolace layoutu pro lepší výkon */
    }
  }

  /* Zjednodušené animace pro mobily */
  @media (max-width: 1199px) {
    .lesson-box {
      transition: transform 0.2s ease;
    }
    
    .lesson-box:hover {
      transform: translateY(-1px);
    }
  }

  /* Vylepšené styly pro AKCE hodiny (zelené) */
  .lesson-box.synthetic-event { 
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%); 
    border: 2px solid var(--success); 
    /* replaced multi-layer shadow with an accessible outline to avoid heavy paints */
    box-shadow: none;
    outline: 3px solid rgba(16, 185, 129, 0.12);
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    padding: 1.1rem .55rem .55rem;
    position: relative;
    overflow: hidden;
  }

  .lesson-box.synthetic-event::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, 
      rgba(16, 185, 129, 0.1) 0%,
      rgba(16, 185, 129, 0.05) 50%,
      rgba(16, 185, 129, 0.15) 100%);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
    z-index: 1;
    will-change: opacity;
  }

  .lesson-box.synthetic-event:hover::before {
    opacity: 1;
  }

  /* Odstranění ::before pro synthetic-event když je zvýrazněný jako suplování */
  .lesson-box.synthetic-event.subst-affected-box::before {
    display: none !important;
  }

  .lesson-box.synthetic-event:hover {
    transform: translateY(-3px) scale(1.02) translateZ(0);
    /* hover shadow removed to avoid repaint; keep border color highlight */
    box-shadow: none;
    border-color: #059669;
  }

  .lesson-box.synthetic-event .lb-subj, 
  .lesson-box.synthetic-event .lesson-subject { 
    color: #065f46; 
    font-weight: 700; 
    font-size: clamp(0.95rem, 1.9vw, 1.2rem); 
    line-height: 1.15;
    position: relative;
    z-index: 2;
    transition: transform var(--duration-fast) var(--ease-standard);
    will-change: transform;
  }

  .lesson-box.synthetic-event:hover .lb-subj,
  .lesson-box.synthetic-event:hover .lesson-subject {
    transform: translateY(-1px) translateZ(0);
    /* removed text-shadow for performance */
    text-shadow: none;
  }

  .lesson-box.synthetic-event:after { 
    content: "AKCE"; 
    position: absolute; 
    top: 6px; 
    left: 50%; 
    transform: translateX(-50%) translateZ(0); 
    font-size: .55rem; 
    font-weight: 700; 
    letter-spacing: .6px; 
    background: linear-gradient(135deg, var(--success) 0%, #059669 100%); 
    color: #fff; 
    padding: 3px 8px 4px; 
    border-radius: 12px; 
    /* removed decorative shadows from badge */
    box-shadow: none;
    z-index: 3;
    transition: transform var(--duration-fast) var(--ease-standard);
    will-change: transform;
  }

  .lesson-box.synthetic-event:hover:after {
    transform: translateX(-50%) translateY(-1px) scale(1.05) translateZ(0);
    /* hover badge shadow removed */
    box-shadow: none;
  }

  .lesson-box:hover {
    transform: translateY(-3px) scale(1.03) translateZ(0);
    border-color: var(--primary-blue) !important;
    z-index: 10;
  }

  .lesson-box:hover::before {
    opacity: 1;
  }

  /* Zvýraznění hodin dotčených suplováním – SINGLE buňky: gradient přenesen na vnitřní .lesson-box místo TD */
  td.lesson.subst-affected:not(.multi) {
    position:relative;
    /* Přestaň barvit celé TD, necháme TD průhledné */
    background: transparent !important;
    /* pulse animation removed: keep static highlight */
    animation: none;
  }
  /* Aplikuj původní žluto-modrý gradient přímo na vnitřní .lesson-box, ale pouze pokud má skutečnou změnu */
  td.lesson.subst-affected:not(.multi) .lesson-box.subst-affected-box {
    background:linear-gradient(135deg, rgb(255 180 90 / 39%) 0%, rgba(255, 225, 180, 0.85) 45%, rgb(42 129 186 / 41%) 100%) !important;
  }
  /* VÝJIMKA: synthetic-event (např. room-absence) má vyšší prioritu než subst-affected gradient */
  td.lesson.subst-affected:not(.multi) .lesson-box.subst-affected-box.synthetic-event {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%) !important;
    border: 2px solid var(--success) !important;
    box-shadow: 
      0 0 0 3px rgba(16, 185, 129, 0.2),
      0 8px 25px rgba(16, 185, 129, 0.15),
      0 4px 12px rgba(0, 0, 0, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  }
  /* Přesun – SINGLE buňky: gradient přenesen na vnitřní .lesson-box místo TD */
  td.lesson.subst-affected.subst-move:not(.multi) {
    background: transparent !important;
  }
  td.lesson.subst-affected.subst-move:not(.multi) .lesson-box.subst-affected-box {
    background: linear-gradient(135deg, rgba(255, 120, 120, 0.44) 0%, rgb(42 129 186 / 41%) 100%) !important;
  }
  /* Přesun – badge v prázdné buňce (placeholder) také s tónovaným gradientem */
  td.lesson.subst-affected.subst-move .subst-empty-ind {
    background: linear-gradient(135deg, rgba(255, 120, 120, 0.18) 0%, rgba(42, 129, 186, 0.18) 100%);
    border-color: rgba(42, 129, 186, 0.45);
    color: #0f2a3a;
  }
  /* Zrušené – SINGLE buňky: červený gradient jen na celé buňce u single */
  td.lesson.subst-affected.subst-cancelled:not(.multi) { 
    background:linear-gradient(135deg, rgba(255, 120, 120, 0.44) 0%, rgba(255,180,180,0.85) 45%, rgba(255,255,255,0.95) 100%) !important; 
    /* pulse animation removed: keep static cancelled highlight */
    animation: none;
  }
  /* Zrušené – MULTI buňka: pokud celá multi buňka je označena jako cancelled, vybarvíme celý TD */
  td.lesson.multi.subst-affected.subst-cancelled {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 120, 120, 0.44) 0%, rgba(255,180,180,0.85) 45%, rgba(255,255,255,0.95) 100%) !important;
    /* pulse animation removed for multi cancelled */
    animation: none;
  }
  /* Pokud je buňka zároveň .subst-move i .subst-cancelled, TD zobrazí červené pozadí (odpadá) */
  td.lesson.subst-affected.subst-move.subst-cancelled:not(.multi) {
    background: linear-gradient(135deg, rgba(255, 120, 120, 0.44) 0%, rgba(255,180,180,0.85) 45%, rgba(255,255,255,0.95) 100%) !important;
  }
  /* Přesunutá hodina v cancelled buňce má modro-červený gradient na lesson-boxu */
  td.lesson.subst-affected.subst-move.subst-cancelled:not(.multi) .lesson-box.subst-affected-box:not(.subst-cancelled-box) {
    background: linear-gradient(135deg, rgba(255, 120, 120, 0.44) 0%, rgb(42 129 186 / 41%) 100%) !important;
  }
  /* Odpadající hodina v move+cancelled buňce má bílé pozadí */
  td.lesson.subst-affected.subst-move.subst-cancelled:not(.multi) .lesson-box.subst-cancelled-box {
    background: #ffffff !important;
  }
  /* Pokud je ve stejné buňce současně 'move' i 'cancel', ale vnitřní lesson-box
     nese obě pomocné třídy (subst-affected-box + subst-cancelled-box),
     preferujme vizuál pro přesun (modro-červený gradient). */
  td.lesson.subst-affected.subst-move.subst-cancelled:not(.multi) .lesson-box.subst-affected-box.subst-cancelled-box {
    background: linear-gradient(135deg, rgba(255, 120, 120, 0.44) 0%, rgb(42 129 186 / 41%) 100%) !important;
  }
  td.lesson.subst-affected.subst-cancelled .lesson-box.subst-cancelled-box { border-color:#ef4444; }
  /* MULTI: zrušené mini boxy vyznačit červeně */
  td.lesson.multi.subst-affected .lesson-box.mini.subst-cancelled-box {
    border-color: #ef4444;
    background: linear-gradient(135deg, rgba(255, 120, 120, 0.28) 0%, rgba(255, 180, 180, 0.45) 45%, rgba(255, 255, 255, 0.35) 100%) !important;
    /* pulse animation removed for mini cancelled box */
    animation: none;
    will-change: transform, box-shadow;
  }
  /* Ensure multi-hour cancelled entries have the same red border as single cancelled lesson-boxes */
  td.lesson.multi.subst-affected.subst-cancelled .lesson-box,
  td.lesson.multi.subst-affected.subst-cancelled .lesson-box.mini,
  td.lesson.multi.subst-affected .lesson-box.subst-cancelled-box,
  td.lesson.multi.subst-affected .lesson-box.mini.subst-cancelled-box {
    border-color: #ef4444 !important;
  }
  .subst-empty-ind.subst-cancel-badge { background:rgba(255,255,255,0.6); border-color:#ef4444aa; color:#7f1d1d; }
  /* V prázdné buňce s .subst-move přepiš cancel badge do přesunového vizuálu */
  td.lesson.subst-affected.subst-move .subst-empty-ind.subst-cancel-badge {
    background: linear-gradient(135deg, rgb(255 120 120) 0%, rgba(42, 129, 186) 100%);
    border-color: rgba(42, 129, 186, 0.45);
    color: #ffffff;
  }
  td.lesson.synthetic-event-cell { background:rgba(236,253,245,0.9) !important; animation:none; }
  td.lesson.subst-affected .lesson-box,
  td.lesson.multi.subst-affected .lesson-box,
  td.lesson.multi.subst-affected .lesson-box.mini {
    /* Make inner lesson boxes opaque white so they are not transparent over the TD gradient */
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.6);
  }

  /* Storno (odpadá) – SINGLE: vnitřní .lesson-box nech bílý (základ), bez přebarvení */
  td.lesson.subst-affected.subst-cancelled:not(.multi) .lesson-box.subst-cancelled-box {
    background: #ffffff;
  }

  /* MULTI buňky: gradient jen na konkrétním mini boxu, který je dotčen změnou */
  td.lesson.multi.subst-affected .lesson-box.mini.subst-affected-box {
    background:linear-gradient(135deg, rgb(255 180 90 / 39%) 0%, rgba(255, 225, 180, 0.85) 45%, rgb(42 129 186 / 41%) 100%) !important;
    /* pulse animation removed for mini affected box */
    animation: none;
    will-change: transform, box-shadow;
  }
  /* Pokud je multi buňka zároveň .subst-cancelled, zachovej gradient pro ty mini boxy, které nejsou označené jako cancelled */
  td.lesson.multi.subst-affected.subst-cancelled .lesson-box.mini.subst-affected-box:not(.subst-cancelled-box) {
    background:linear-gradient(135deg, rgb(255 180 90 / 39%) 0%, rgba(255, 225, 180, 0.85) 45%, rgb(42 129 186 / 41%) 100%) !important;
  }
  /* MULTI: přesun – gradient pouze na odpovídající mini box */
  td.lesson.multi.subst-affected .lesson-box.mini.subst-move-box {
    background: linear-gradient(135deg, rgba(255, 120, 120, 0.44) 0%, rgb(42 129 186 / 41%) 100%) !important;
    /* pulse animation removed for mini move box */
    animation: none;
    will-change: transform, box-shadow;
  }
  /* Pokud má mini box současně cancel i move, preferuj vizuál přesunu */
  td.lesson.multi.subst-affected .lesson-box.mini.subst-move-box.subst-cancelled-box {
    background: linear-gradient(135deg, rgba(255, 120, 120, 0.44) 0%, rgb(42 129 186 / 41%) 100%) !important;
    border-color: rgba(42 129 186, 0.55);
    /* pulse animation removed for combined mini move+cancel box */
    animation: none;
    will-change: transform, box-shadow;
  }

  /* PRIORITA: zelené hodiny (AKCE) mají vždy přednost – nikdy je nepřebarvuj subst. gradienty */
  td.lesson.subst-affected .lesson-box.synthetic-event,
  td.lesson.multi.subst-affected .lesson-box.synthetic-event,
  td.lesson.multi.subst-affected .lesson-box.mini.synthetic-event {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%) !important;
    border: 2px solid var(--success) !important;
    box-shadow: 
      0 0 0 3px rgba(16, 185, 129, 0.2),
      0 8px 25px rgba(16, 185, 129, 0.15),
      0 4px 12px rgba(0, 0, 0, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  }
  td.lesson.subst-affected .lesson-box .lb-room,
  td.lesson.subst-affected .lesson-box .lb-group,
  td.lesson.multi.subst-affected .lesson-box .lb-room,
  td.lesson.multi.subst-affected .lesson-box .lb-group { background:rgba(255,255,255,0.25); }

  /* Pulse keyframes removed — pulsing/scale effect disabled for highlighted hours */
  .subst-empty-ind { font-size:.6rem; font-weight:600; letter-spacing:.5px; padding:.25rem .35rem; background:rgba(255,255,255,0.5); border:1px solid rgba(255,140,0,.5); border-radius:6px; display:inline-block; margin:.2rem; color:#8a4600; }

  .lesson-box .lb-top {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: clamp(0.55rem, 0.9vw, 0.85rem);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--primary-blue);
    margin-bottom: 0.2rem;
  }

  .lesson-box .lb-room {
    align-self: flex-start;
    background: rgba(42, 129, 186, 0.06);
    padding: 0.1rem 0.3rem;
    border-radius: 6px;
    border: 1.5px solid rgba(42, 129, 186, 0.3);
    font-weight: 700;
  }

  .lesson-box .lb-group {
    align-self: flex-start;
    background: rgba(244, 160, 36, 0.06);
    padding: 0.1rem 0.3rem;
    border-radius: 6px;
    border: 1.5px solid rgba(244, 160, 36, 0.35);
    font-weight: 700;
    color: var(--primary-orange);
  }

  .lesson-box .lb-subj {
    text-align: center;
    font-size: clamp(0.9rem, 1.8vw, 1.4rem);
    font-weight: 700;
    letter-spacing: .5px;
    margin: 0.2rem 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    /* removed text-shadow for performance */
    text-shadow: none;
  }

  .lesson-box .lb-teacher {
    text-align: center;
    font-size: clamp(0.6rem, 1.1vw, 0.9rem);
    font-weight: 500;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(135deg, rgb(255, 180, 90, 0.1) 0%, rgb(42, 129, 186, 0.1) 100%) !important;;
    padding: 0.1rem 0.3rem;
    border-radius: 6px;
    margin-top: 0.2rem;
  }

  /* Spodní lišta pro pedagogické dozory v učitelském rozvrhu */
  .lesson-box .lb-guard {
    margin-top: 0.25rem;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    font-size: clamp(0.55rem, 0.95vw, 0.75rem);
    font-weight: 700;
    line-height: 1;
    color: #065f46; /* tmavší zelená */
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    text-align: center;
    display: block;
  }

  /* Break guard chip – dozor o přestávce mezi hodinami v učitelském rozvrhu */
  .schedule-container.rel-pos { position: relative; }
  .break-guard-chip {
    position: absolute;
    /* Force a narrow column so text wraps into multiple lines (mobile-like stacked layout) */
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    background: var(--primary-blue);
    color: #fff;
    font-size: 0.55rem;
    line-height: 1.0;
    padding: 0.25rem 0.15rem; /* tighter horizontal padding to fit narrow column */
    border-radius: 4px;
    text-align: center;
    pointer-events: auto;
    cursor: default;
    opacity: .92;
    display: flex;
    flex-direction: column; /* stack words into multiple lines */
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    font-weight:600;
    letter-spacing:0;
    border:1px solid rgba(255,255,255,0.35);
    /* removed blur for performance */
    backdrop-filter: none;
    z-index: 3; /* keep below schedule day-col (which uses z-index:5/15) to avoid overlapping the day name */
  }
  .break-guard-chip:hover { opacity: 1; }
  .break-guard-chip[data-hour-boundary="0"] { left:0; }

  /* Chip pro dohled v jídelně uvnitř hodiny */
  td.lesson.has-canteen-guard { position: relative; }
  .guard-canteen-chip {
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    background: var(--primary-blue);
    color:#fff;
    font-size: .55rem;
    line-height:1.15;
    padding: .25rem .45rem;
    border-radius:4px;
    font-weight:600;
    letter-spacing:.3px;
    max-width:90%;
    text-align:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    cursor:default;
    border:1px solid rgba(255,255,255,0.35);
    /* removed blur for performance */
    backdrop-filter: none;
    z-index:4;
  }
  .guard-canteen-chip:hover { opacity:1; }
  /* Keep the centering transform during active/focus states: global [role="button"]:active
     rule sets transform:none which makes this absolutely positioned chip jump horizontally.
     Reapply the translateX(-50%) here with higher specificity. */
  .guard-canteen-chip:active,
  .guard-canteen-chip:focus,
  .guard-canteen-chip:focus-visible {
    transform: translateX(-50%) !important;
  }

  /* Více paralelních skupin - vylepšený design s pevnou výškou */
  .lesson-multi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    max-height: 100%; /* Zabránit překročení výšky řádku */
    padding: 2px;
    overflow: hidden; /* Skrýt obsah, který se nevejde */
  }

  /* Ochrana pořadí mini boxů v multi buňce – zamezí nežádoucímu propadnutí na konec */
  .lesson-multi > .lesson-box.mini { order: 0; }

  .lesson-box.mini {
    height: auto;
    flex: 1;
    min-height: 0; /* Umožní flex items zmenšit se podle potřeby */
    background: linear-gradient(145deg, #ffffff 0%, #ffffff 100%);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 6px; /* Menší border-radius pro mini boxy */
    padding: 0.15rem 0.2rem; /* Menší padding */
    transition: 
      transform var(--duration-instant) var(--ease-standard),
      box-shadow var(--duration-instant) var(--ease-standard);
    will-change: transform;
  }

  .lesson-box.mini:hover {
    transform: translateY(-1px) translateZ(0);
  }

  /* Syntetické akce v mini variantě – zelený gradient jako normální synthetic-event */
  .lesson-box.mini.synthetic-event {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%) !important;
    border: 1px solid var(--success) !important;
  }

  .lesson-box.mini .lb-subj { 
    font-size: clamp(0.6rem, 1.2vw, 1rem); /* Menší font pro více místa */
    margin: 0.05rem 0;
    font-weight: 700;
    line-height: 1;
  }
  .lesson-box.mini .lb-top { 
    font-size: clamp(0.55rem, 0.7vw, 0.75rem); /* Menší font */
    margin-bottom: 0.05rem;
  }
  .lesson-box.mini .lb-teacher { 
    font-size: clamp(0.55rem, 0.8vw, 0.75rem); /* Menší font */
    margin-top: 0.05rem;
    padding: 0.05rem 0.2rem;
  }

  /* Časový rozsah hodiny v hlavičce - vylepšený design */
  .hh-time {
    font-size: clamp(0.6rem, 1vw, 0.75rem);
    font-weight: 500;
    margin-top: 4px;
    opacity: .9;
    color: rgba(255, 255, 255, 0.9);
  }

  /* ===== RESPONZIVNÍ DESIGN PRO MOBILNÍ ZAŘÍZENÍ ===== */
  @media (max-width: 1039px) {
    /* Stabilizace viewport pro zabránění náhodným scroll jumpům */
    html, body {
      overflow-anchor: none;
      scroll-behavior: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: none;
    }
    
    .app-container {
      flex-direction: column;
      position: relative;
    }
    
  /* Hamburger menu button */
    .mobile-menu-toggle {
      display: block;
      position: fixed;
      top: 1rem;
      left: 1rem;
      z-index: 1000;
      background: var(--primary-blue);
      color: white;
      border: none;
      padding: 0.75rem;
      border-radius: 8px;
      cursor: pointer;
      font-size: 1.2rem;
      overflow: hidden;
    }

    .mobile-menu-toggle .menu-icon {
      display: block;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    }

    .mobile-menu-toggle .menu-icon-bars {
      opacity: 1;
      transform: rotate(0deg) scale(1);
    }

    .mobile-menu-toggle .menu-icon-close {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-90deg) scale(0);
      opacity: 0;
    }

    .mobile-menu-toggle.is-open .menu-icon-bars {
      opacity: 0;
      transform: rotate(90deg) scale(0);
    }

    .mobile-menu-toggle.is-open .menu-icon-close {
      opacity: 1;
      transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }

    .mobile-menu-toggle:active {
      transform: scale(0.9);
    }

    .mobile-menu-toggle:active .menu-icon {
      transform: scale(0.85);
    }
    
    /* Sidebar na mobilu */
    .sidebar {
      position: fixed;
      top: 0;
      left: -100vw;
      width: 100vw;
      height: calc(var(--app-vh) * 100);
      z-index: 999;
      transition: left 0.3s ease;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      overflow: hidden; /* Zabránit dvojitému scrollování */
    }
    
    .sidebar.mobile-open {
      left: 0;
    }
    
    /* Logo sekce na mobilu */
    .sidebar .logo-section {
      flex-shrink: 0;
      padding: 1rem 1rem 0.5rem 1rem;
    }
    
    /* Scrollovatelný obsah na mobilu */
    .sidebar .scrollable-content {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0 1rem;
    }
    
    /* Entity list removed; menu-section remains */
    
    .sidebar .menu-section {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    
    .sidebar .menu-section .menu-btn {
      margin-bottom: 0;
    }
    
    /* Time sekce na mobilu - fixovaná na spodku */
    .sidebar .time-section {
      flex-shrink: 0;
      padding: 0.5rem;
      margin-top: 0;
    }
    
    /* Overlay pro sidebar */
  .mobile-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
  height: calc(var(--app-vh) * 100);
      background: rgba(0,0,0,0.5);
      z-index: 998;
      margin: 0;
      padding: 0;
    }
    
    .mobile-overlay.active {
      display: block;
    }
    
    /* Main content na mobilu */
    .main-content {
      width: 100vw;
      position: relative;
      overflow-anchor: none;
      scroll-behavior: auto;
    }
    
    .content-area {
      padding: 0.5rem;
      padding-bottom: 1rem;
      overflow-anchor: none;
      scroll-behavior: auto;
    }
    
    /* Horizontální scroll pro rozvrh */
  .schedule-container {
    /* Povolit horizontální i vertikální scroll uvnitř rozvrhu na mobilu.
      Flex-grow zajistí, že kontejnér využije dostupný prostor a zobrazí se v něm svislý scroll
      pokud je obsah vyšší než dostupné místo (např. dlouhý rozvrh). */
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 300px;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    
    .schedule-table {
      min-width: 600px;
      font-size: 0.8rem;
    }
    
    .schedule-table .day-col {
      width: 60px;
      font-size: 0.9rem;
      padding: 0.5rem 0.25rem;
      /* Sticky position pro dnů při horizontálním scrollu */
      position: sticky;
      left: 0;
      z-index: 20; /* ensure day column sits above floating chips */
      background: linear-gradient(135deg, var(--primary-orange) 0%, var(--light-orange) 100%);
    }
    
    .schedule-table th {
      min-width: 90px;
      padding: 0.5rem 0.25rem;
      font-size: 0.75rem;
      /* Sticky position pro hlavičky hodin při vertikálním scrollu */
      position: sticky;
      top: 0;
      /* Make headers sit above the day column */
      z-index: 40;
    }
    
    /* Zvýšená priorita pro průsečík dne a hlavičky */
    .schedule-table th.day-col {
      z-index: 25; /* top-most for header intersection */
    }
    
    .schedule-table td {
      min-width: 90px;
      padding: 0.25rem;
      height: 60px;
    }
    
    .lesson-box {
      padding: 0.2rem 0.15rem;
      font-size: 0.6rem;
    }
    
    .lesson-box .lb-subj {
      /*font-size: 0.7rem;*/
      margin: 0.1rem 0;
    }
    
    .lesson-box .lb-teacher {
      /*font-size: 0.55rem;*/
      margin-top: 0.1rem;
    }
    
    .lesson-box .lb-top {
      /*font-size: 0.5rem;*/
      margin-bottom: 0.1rem;
    }
    
    /* Section header na mobilu */
    .section-header {
      flex-direction: column;
      text-align: center;
      margin-bottom: 1rem;
    }
    
    .section-header h2 {
      font-size: 1.4rem;
    }

    /* Date-info na menších displejích */
    .date-info {
      font-size: 0.85rem;
      padding: 0.45rem 0.8rem;
      border-radius: 20px;
      letter-spacing: 0.2px;
    }
    
    /* Selektory na mobilu: zobraz datumové ovladače v jednom řádku vpravo,
       ostatní ovladače (mode) pod nimi */
    .class-selector, .teacher-selector, .room-selector {
      display:flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
      text-align: right;
      flex-wrap: wrap;
    }
    
    .class-selector select, .teacher-selector select, .room-selector select {
      align-self: flex-end;
      min-width: auto;
      width: auto;
      max-width: 280px;
    }
    
    /* Reorganizace pořadí ovladačů v hlavičce sekce pro mobil
       Pořadí: 1) režim (Aktuální/Příští/Stálý), 2) ovladače data, 3) selektor entity */
    .timetable-mode {
      order: 1;               /* nahoře */
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin: 0.5rem 0 0 0;   /* mezera pod tlačítky režimu */
    }

    /* 2) Ovladače data (předchozí, datum, další) pod režimy */
    .class-selector #class-prev,
    .class-selector #class-date,
    .class-selector #class-next { order: 2; }

    .teacher-selector #teacher-prev,
    .teacher-selector #teacher-date,
    .teacher-selector #teacher-next { order: 2; }

    /* Room date controls should follow same mobile order as class/teacher */
    .room-selector #room-prev,
    .room-selector #room-date,
    .room-selector #room-next { order: 2; }

    /* 3) Selektor entity až poslední (třída / učitel) */
    .class-selector .custom-select,
    .teacher-selector .custom-select,
    #class-select,
    #teacher-select { order: 3; }

    /* Room selector should be last as well */
    .room-selector .custom-select,
    #room-select { order: 3; }
    
    /* Custom selectory na mobilu – stabilní, ale responzivní šířka
       Zmenší se na velmi úzkých displejích pomocí min(..., vw),
       ale jinak bude stejná jako šířka otevřeného dropdownu. */
    .custom-select .cs-trigger {
      padding: 0.3rem;
      width: min(200px, 92vw); /* ještě o něco kratší varianta na mobilu */
      min-width: min(200px, 92vw);
      font-size: 0.9rem;
      border-radius: 10px;
      gap: 0.75rem;
    }
    .custom-select.open .cs-trigger{ min-width: min(200px, 92vw); }
    
    .custom-select .cs-arrow {
      right: 0.5rem;
      width: 12px;
      height: 12px;
    }
    
    .custom-select .cs-option {
      padding: 0.5rem 0.5rem;
      font-size: 0.85rem;
    }

    /* Vynucení levého zarovnání obsahu v rozevřeném selektru na mobilu */
    .class-selector .custom-select,
    .teacher-selector .custom-select,
    .room-selector .custom-select { text-align: left; }
    .class-selector .custom-select .cs-list,
    .class-selector .custom-select .custom-options,
    .teacher-selector .custom-select .cs-list,
    .teacher-selector .custom-select .custom-options,
    .room-selector .custom-select .cs-list,
    .room-selector .custom-select .custom-options { text-align: left; }
    .class-selector .custom-select .cs-option,
    .class-selector .custom-select .custom-option,
    .teacher-selector .custom-select .cs-option,
    .teacher-selector .custom-select .custom-option,
    .room-selector .custom-select .cs-option,
    .room-selector .custom-select .custom-option { text-align: left; }

  /* Room selector: no special mobile stacking – inherit same mobile layout as class/teacher
     Removed custom mobile-specific rules so room controls align and order like class selectors. */
    
    .subst-filter .sf-btn { padding:.55rem 1rem; font-size:.72rem; border-radius:8px; }

  @media (min-width:1400px){
    .tt-mode-btn { padding:1rem 1.9rem; font-size:1.15rem; }
    .subst-filter .sf-btn { padding:.85rem 1.4rem; font-size:.85rem; }
    .section-header .tt-date-pill,
    .substitutions-nav .subst-date { padding:1rem 1.9rem; font-size:1.15rem; }
  }
    
    /* Popover na mobilu */
    .tt-popover {
      max-width: 90vw !important;
      font-size: 0.85rem;
    }
    
    /* Badge na mobilu */
    .subst-empty-ind {
      font-size: 0.5rem;
      padding: 0.2rem 0.25rem;
    }
    
    /* Section header na mobilu */
    .section-header {
      flex-direction: column;
      align-items: flex-end;
      margin-bottom: 0.5rem;
      text-align: right;
    }
    
    .section-header h2 {
      align-self: flex-end;
    }

    #substitutions .section-header .substitutions-nav {
      align-self: stretch;
      justify-content: flex-end;
    }
    
    /* Substitutions grid na mobilu */
    .substitutions-grid {
      grid-template-columns: 1fr;
    }
    
    /* Welcome screen na mobilu */
    .welcome-screen h1 {
      font-size: 2.5rem;
    }
    
    /* Schedule container na mobilu */
    .schedule-container {
      flex: 1;
      min-height: 300px;
      border-radius: 12px;
    }
    
    /* ===== SUPLOVÁNÍ - MOBILNÍ ÚPRAVY ===== */
    
    /* Substitutions navigation na mobilu */
    .substitutions-nav {
      flex-direction: column;
      gap: 0.75rem;
      padding: 0;
      margin: 0.5rem 0 0;
      width: 100%;
    }
    
    /* První řádek - navigační tlačítka a datum */
    .substitutions-nav > button:first-child,
    .substitutions-nav > .subst-date,
    .substitutions-nav > button:nth-child(3),
    .substitutions-nav > .today-btn {
      display: flex;
    }
    
    /* Hlavní navigace - změníme na flexbox layout */
    .substitutions-nav::before {
      content: '';
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      order: -1;
    }
    
    .substitutions-nav .nav-btn {
      width: 32px;
      height: 32px;
      font-size: 0.9rem;
    }
    
    .substitutions-nav .today-btn {
      padding: 0.4rem 0.8rem;
      font-size: 0.8rem;
      margin-left: 0;
    }
    
    .substitutions-nav .subst-date {
      font-size: 0.95rem;
      text-align: center;
      flex: 1;
      margin: 0;
    }
    
    /* Reorganizace layoutu pro mobilní navigaci */
    .substitutions-nav {
      display: grid;
      grid-template-areas: 
        "prev date next today"
        "filter filter filter filter";
      grid-template-columns: auto 1fr auto auto;
      gap: 0.5rem;
      align-items: center;
    }
    
    .substitutions-nav #subst-prev { grid-area: prev; }
    .substitutions-nav .subst-date { grid-area: date; }
    .substitutions-nav #subst-next { grid-area: next; }
    .substitutions-nav .today-btn { grid-area: today; }
    .substitutions-nav .subst-filter { grid-area: filter; }
    
    /* Subst filter na mobilu */
    .subst-filter {
      margin-left: 0;
      justify-content: center;
      flex-wrap: wrap;
    }
    
    .subst-filter .sf-btn {
      padding: 0.4rem 0.7rem;
      font-size: 0.65rem;
    }
    
    /* Substitution cards na mobilu - zachovat desktop layout s horizontal scroll */
    .substitutions-grid:not(.mode-classes) .subst-cards {
      /* Zachovat desktop grid layout ale s horizontal scroll */
      display: flex; /* Change to flex for horizontal scroll */
      flex-wrap: nowrap; /* Prevent wrapping */
      gap: .75rem;
      /* Přidat horizontal scroll pro více karet */
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 0.5rem; /* Prostor pro scrollbar */
      /* Scrollbar styling */
      scrollbar-width: thin;
      scrollbar-color: var(--primary-orange) #e2e8f0;
    }
    
    /* Scrollbar pro substitution cards */
    .substitutions-grid:not(.mode-classes) .subst-cards::-webkit-scrollbar {
      height: 8px;
    }
    
    .substitutions-grid:not(.mode-classes) .subst-cards::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 4px;
    }
    
    .substitutions-grid:not(.mode-classes) .subst-cards::-webkit-scrollbar-thumb {
      background: var(--primary-blue);
      border-radius: 4px;
    }
    
    .substitutions-grid:not(.mode-classes) .subst-cards::-webkit-scrollbar-thumb:hover {
      background: var(--primary-orange);
    }
    
    /* odstraněno: responsive varianty legacy .substitution-* (nepoužívané) */
    
    /* Subst cards (nový layout) na mobilu - zachovat desktop proporce */
    .subst-cards {
      /* Zachovat desktop flex layout ale s horizontal scroll */
      display: flex;
      flex-wrap: nowrap; /* Prevent wrapping pro horizontal scroll */
      gap: .75rem;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 0.5rem;
      /* Scrollbar styling */
      scrollbar-width: thin;
      scrollbar-color: var(--primary-orange) #e2e8f0;
    }
    
    .subst-cards::-webkit-scrollbar {
      height: 8px;
    }
    
    .subst-cards::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 4px;
    }
    
    .subst-cards::-webkit-scrollbar-thumb {
      background: var(--primary-blue);
      border-radius: 4px;
    }
    
    .subst-cards::-webkit-scrollbar-thumb:hover {
      background: var(--primary-orange);
    }
    
    .subst-card {
      /* Zachovat originální velikosti z desktop */
      width: 150px;
      min-width: 150px; /* Prevent shrinking */
      flex-shrink: 0;
      padding: .45rem .55rem .55rem;
      font-size: .72rem;
    }
    
    /* Subst class grid na mobilu - zachovat desktop velikosti */
    .subst-class-grid {
      /* Zachovat originální font-size z desktop verze */
      font-size: .7rem;
    }
    
    /* Subst grid na mobilu - zachovat desktop proporce */
    .subst-grid {
      /* Zachovat originální velikosti z desktop verze */
      min-width: 1200px; /* Minimální šířka pro zachování proporcí */
      font-size: 1rem; /* Originální font-size */
    }
    
    .subst-grid th,
    .subst-grid td {
      /* Zachovat originální padding z desktop verze */
      padding: .45rem .5rem;
    }
    
    .subst-grid thead th {
      /* Zachovat originální font-size z desktop verze */
      font-size: 1.2rem;
    }
    
    .subst-grid th.cls-head {
      /* Zachovat originální šířky z desktop verze */
      width: 70px;
      z-index: 15; /* Stejně jako desktop verze */
    }
    
    .subst-grid td.cls-col {
      /* Zachovat originální velikosti */
      min-width: 70px;
      width: 70px;
      font-size: 1.6rem; /* Originální velikost */
      z-index: 10; /* Zajistit, že sloupec tříd zůstane nad ostatními buňkami při scrollování */
      background: linear-gradient(135deg, var(--primary-orange) 0%, var(--light-orange) 100%);
      color: white;
    }

    /* Make subst-grid rows/cells use the app viewport height calc on mobile so
       sticky cls-col backgrounds cover full cell height (match schedule-table sizing) */
    @media (max-width: 1039px) {
      .subst-grid td, .subst-grid th {
        /*height: calc((calc(var(--app-vh) * 100) - 280px) / 6) !important;
        max-height: calc((calc(var(--app-vh) * 100) - 280px) / 6) !important;
        min-height: calc((calc(var(--app-vh) * 100) - 280px) / 6) !important;*/
        overflow: hidden;
        box-sizing: border-box;
      }
      .subst-grid tbody tr { height: auto !important; }
      /* Ensure sticky cls-col stretches to full cell area */
      .subst-grid td.cls-col {
        /* Keep table-cell semantics for reliable row-height behavior */
        display: table-cell !important;
        vertical-align: middle !important;
        padding: .45rem .5rem !important;
      }
      /* Ensure the direct child (e.g. button) fills the cell and centers its content */
      .subst-grid td.cls-col > * {
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        background: transparent !important;
      }
      /* Fix: make cls-head and hour-head have consistent vertical sizing on mobile */
      .subst-grid th.cls-head,
      .subst-grid th.hour-head,
      .subst-grid td.cls-col {
        padding-top: .45rem !important;
        padding-bottom: .45rem !important;
        line-height: 1.1 !important;
      }
    }
    
    .subst-grid th.hour-head, 
    .subst-grid td:not(.cls-col):not(.groups-col) {
      /* Fixní šířka místo calc pro stabilní layout */
      width: 80px;
      min-width: 80px;
    }
    
    .subst-grid th[data-hour="-1"], 
    .subst-grid td.groups-col {
      /* Zachovat originální šířku groups sloupce */
      width: 160px;
      min-width: 160px;
    }
    
    /* Enhanced horizontal scroll pro subst grid a všechny suplování elementy */
    .subst-scroll {
      overflow-x: auto;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
      /* Přidat scroll indikátor */
      scrollbar-width: thin;
      scrollbar-color: var(--primary-orange) #e2e8f0;
    }
    
    /* Horizontal scroll pro subst-matrix tabulky */
    .subst-matrix {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--primary-orange) #e2e8f0;
    }
    
    /* Horizontal scroll pro absence matrix */
    .subst-block .subst-matrix {
      min-width: 600px; /* Minimální šířka pro lepší scroll */
    }
    
    .subst-scroll::-webkit-scrollbar {
      height: 8px;
    }
    
    .subst-scroll::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 4px;
    }
    
    .subst-scroll::-webkit-scrollbar-thumb {
      background: var(--primary-blue);
      border-radius: 4px;
    }
    
    .subst-scroll::-webkit-scrollbar-thumb:hover {
      background: var(--primary-orange);
    }
    .lesson-box .lb-room {
    align-self: flex-start;
    background: rgba(42, 129, 186, 0.1);
    padding: 0.1rem;
    border-radius: 6px;
    font-weight: 700;
  }

  .lesson-box .lb-group {
    align-self: flex-start;
    background: rgba(244, 160, 36, 0.1);
    padding: 0.1rem;
    border-radius: 6px;
    font-weight: 700;
    color: var(--primary-orange);
  }
  }

  /* Desktop - skrýt hamburger */
  @media (min-width: 1040px){
    .mobile-menu-toggle {
      display: none;
    }
    
    .mobile-overlay {
      display: none !important;
    }
  }

  /* Stavy změn s vylepšeným designem */
  .lesson.cell-change-sub .lesson-box { 
    background: linear-gradient(145deg, #e7f3ff 0%, #dbeafe 100%); 
    border-color: var(--primary-blue);
  }

  .lesson.cell-change-cancel .lesson-box { 
    background: linear-gradient(145deg, #ffeaea 0%, #fee2e2 100%); 
    border-color: var(--danger);
    text-decoration: line-through;
    opacity: 0.7;
  }

  .lesson.cell-change-add .lesson-box { 
    background: linear-gradient(145deg, #eaffea 0%, #dcfce7 100%); 
    border-color: var(--success);
  }

  /* Zrušení hover zvýraznění řádků rozvrhu: ponecháváme bez vizuálních změn při hoveru */
  .schedule-room {
    color: var(--primary-orange);
    font-weight: 600;
  }

  /* Loading indikátor */
  .loading {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-light);
  }

  .loading i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--primary-blue);
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .loading p {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text);
  }

  /* Vylepšené stavy loading komponent s odlišnými barvami a ikonami */
  .loading--no-data {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 20px;
    padding: 3rem 2rem;
    margin: 2rem auto;
    max-width: 500px;
    border: 2px solid rgba(59, 130, 246, 0.2);
  }

  .loading--no-data i {
    font-size: 4rem;
    color: #3b82f6;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1.5rem;
  }

  .loading--no-data p {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e40af;
    margin: 0;
  }

  .loading--error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 20px;
    padding: 3rem 2rem;
    margin: 2rem auto;
    max-width: 500px;
    border: 2px solid rgba(239, 68, 68, 0.2);
  }

  .loading--error i {
    font-size: 4rem;
    color: #ef4444;
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1.5rem;
    animation: pulse-error var(--animation-blink) ease-in-out infinite;
  }

  /* Animation duration now controlled by --animation-blink CSS variable (unified across devices) */

  .loading--error p {
    font-size: 1.3rem;
    font-weight: 600;
    color: #991b1b;
    margin: 0;
  }

  /* Entity grid (zobrazení všech entit ve sloupcích na prázdné stránce rozvrhu) */
  .entity-grid-wrapper {
    /* Fill the available schedule area */
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: auto; /* allow scroll when items don't fit */
  }

  .entity-grid-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.75rem;
    text-align: center;
    flex-shrink: 0;
  }

  .entity-grid {
    display: grid;
    /* auto-fit makes columns shrink to fit all items without overflow */
    grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
    gap: 0.75rem;
    padding: 0;
    flex: 1; /* take remaining height */
    min-height: 0; /* allow shrinking */
    /* let rows size to their content so grid can scroll if needed */
    grid-auto-rows: auto;
    grid-auto-flow: row;
    align-content: start;
    align-items: stretch;
    justify-items: stretch;
    overflow: auto; /* allow scrolling when grid exceeds available space */
  }

  .entity-grid-item {
    background: var(--primary-blue);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    height: 100%; /* fill grid cell */
    box-sizing: border-box;
    color: white;
  }

  /* Prevent mid-word hyphenation/breaking for teacher names in entity grid */
  .entity-grid-item,
  .entity-grid-abbrev,
  .entity-grid-title {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    /* keep normal white-space so multi-word names can wrap between words but not inside words */
    white-space: normal !important;
  }

  .entity-grid-item:hover {
    background: var(--primary-orange);
    color: #fff;
    border-color: var(--primary-blue);
    transform: translateY(-2px);
  }

  .entity-grid-item:active {
    transform: translateY(0);
  }

  .entity-grid-abbrev {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  .entity-grid-name-last,
  .entity-grid-name-first {
    display: block;
    line-height: 1.1;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  .entity-grid-name-last {
    font-weight: 700;
  }

  .entity-grid-name-first {
    font-weight: 500;
  }

  /* Provide a safe baseline and allow JS to shrink if needed */
  .entity-grid-abbrev {
    font-size: 1rem; /* baseline */
    line-height: 1.1;
    transition: font-size 120ms ease;
  }

  /* === Responsivní breakpointy pro entity-grid === */

  /* Extra velké obrazovky (1600px+) - větší položky, více prostoru */
  @media (min-width: 1600px) {
    .entity-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
      gap: 1rem;
    }

    .entity-grid-item {
      padding: 1rem 0.75rem;
      min-height: 75px;
      border-radius: 14px;
    }

    .entity-grid-abbrev {
      font-size: 1.15rem;
    }

    .entity-grid-name-last {
      font-size: 1rem;
    }

    .entity-grid-name-first {
      font-size: 0.9rem;
    }

    .entity-grid-title {
      font-size: 1.75rem;
      margin-bottom: 1rem;
    }
  }

  /* Velké obrazovky (1200px - 1599px) - standardní velikost */
  @media (min-width: 1200px) and (max-width: 1599px) {
    .entity-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
      gap: 0.85rem;
    }

    .entity-grid-item {
      padding: 0.85rem 0.6rem;
      min-height: 65px;
    }

    .entity-grid-abbrev {
      font-size: 1.05rem;
    }
  }

  /* Střední obrazovky (1040px - 1199px) - mírně zmenšeno */
  @media (min-width: 1040px) and (max-width: 1199px) {
    .entity-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(95px, 100%), 1fr));
      gap: 0.7rem;
    }

    .entity-grid-item {
      padding: 0.7rem 0.4rem;
      min-height: 58px;
      border-radius: 10px;
    }

    .entity-grid-abbrev {
      font-size: 0.95rem;
    }

    .entity-grid-title {
      font-size: 1.35rem;
    }
  }

  /* Tablet landscape (721px - 1039px) - kompaktnější */
  @media (min-width: 721px) and (max-width: 1039px) {
    .entity-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(85px, 100%), 1fr));
      gap: 0.5rem;
    }

    .entity-grid-item {
      padding: 0.55rem 0.3rem;
      min-height: 52px;
      border-radius: 8px;
    }

    .entity-grid-abbrev {
      font-size: 0.9rem;
    }

    .entity-grid-name-last {
      font-size: 0.85rem;
    }

    .entity-grid-name-first {
      font-size: 0.75rem;
    }

    .entity-grid-title {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }

    .entity-grid-wrapper {
      padding: 0.35rem;
    }
  }

  /* Tablet portrait (481px - 720px) - menší položky */
  @media (min-width: 481px) and (max-width: 720px) {
    .entity-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(75px, 100%), 1fr));
      gap: 0.4rem;
    }

    .entity-grid-item {
      padding: 0.5rem 0.25rem;
      min-height: 48px;
      border-radius: 8px;
      border-width: 1.5px;
    }

    .entity-grid-abbrev {
      font-size: 0.85rem;
    }

    .entity-grid-name-last {
      font-size: 0.8rem;
    }

    .entity-grid-name-first {
      font-size: 0.7rem;
    }

    .entity-grid-title {
      font-size: 1.15rem;
      margin-bottom: 0.4rem;
    }

    .entity-grid-wrapper {
      padding: 0.25rem;
    }
  }

  /* Mobilní obrazovky (max 480px) - maximálně kompaktní */
  @media (max-width: 480px) {
    .entity-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(65px, 100%), 1fr));
      gap: 0.3rem;
    }

    .entity-grid-item {
      padding: 0.4rem 0.2rem;
      min-height: 44px;
      border-radius: 6px;
      border-width: 1px;
    }

    .entity-grid-abbrev {
      font-size: 0.8rem;
    }

    .entity-grid-name-last {
      font-size: 0.75rem;
    }

    .entity-grid-name-first {
      font-size: 0.65rem;
    }

    .entity-grid-title {
      font-size: 1rem;
      margin-bottom: 0.35rem;
    }

    .entity-grid-wrapper {
      padding: 0.2rem;
    }

    /* Na mobilu skryj hover efekt (problematický na touch) */
    .entity-grid-item:hover {
      transform: none;
    }
  }

  /* Velmi malé obrazovky (max 360px) - ultra kompaktní */
  @media (max-width: 360px) {
    .entity-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(55px, 100%), 1fr));
      gap: 0.25rem;
    }

    .entity-grid-item {
      padding: 0.35rem 0.15rem;
      min-height: 40px;
      border-radius: 5px;
    }

    .entity-grid-abbrev {
      font-size: 0.75rem;
    }

    .entity-grid-name-last {
      font-size: 0.7rem;
    }

    .entity-grid-name-first {
      font-size: 0.6rem;
    }

    .entity-grid-title {
      font-size: 0.9rem;
      margin-bottom: 0.3rem;
    }
  }

  /* Landscape orientace na mobilech - více sloupců */
  @media (max-width: 720px) and (orientation: landscape) {
    .entity-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(70px, 100%), 1fr));
    }

    .entity-grid-item {
      min-height: 42px;
      padding: 0.35rem 0.2rem;
    }

    .entity-grid-title {
      font-size: 1rem;
      margin-bottom: 0.3rem;
    }
  }

  /* Vysoká hustota pixelů (retina) - ostřejší okraje */
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .entity-grid-item {
      border-width: 1px;
    }
  }

  @keyframes pulse-error {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
  }

  .loading--spinner {
    padding: 4rem 2rem;
  }

  .loading--spinner i {
    font-size: 3rem;
  }

  @keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* Spinner speed adjustments for mobile: slow down FontAwesome spin on small devices */
  @media (max-width: 600px) {
    .fa-spin, .fas.fa-spinner, .loading--spinner i {
      -webkit-animation-duration: 2.5s !important;
      animation-duration: 2.5s !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .loading--spinner i,
    .fa-spin,
    .fas.fa-spinner {
      -webkit-animation-duration: var(--fa-animation-duration, 2s) !important;
      animation-duration: var(--fa-animation-duration, 2s) !important;
      -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite) !important;
      animation-iteration-count: var(--fa-animation-iteration-count, infinite) !important;
      -webkit-animation-timing-function: var(--fa-animation-timing, linear) !important;
      animation-timing-function: var(--fa-animation-timing, linear) !important;
    }
  }


  /* ===== Jídelníček - Fullscreen Design ===== */
  .canteen-toolbar { 
    display: flex; 
    gap: 1rem; 
    margin: 0 0 1.5rem; 
    padding: 1rem 1.5rem; 
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    border: 1px solid var(--border);
    align-items: center;
  }

  .canteen-day-scroll { 
    display: flex; 
    gap: 0.75rem; 
  overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    padding: 0.5rem; 
  flex: 1; 
  min-width: 0; /* umožní zmenšení v rámci flex containeru */
  max-width: 100%;
  flex-wrap: nowrap; /* držet v jedné řadě a umožnit horizontální scroll */
  overscroll-behavior-inline: contain; /* nevyhazovat stránku při horizontálním posunu */
  touch-action: pan-x pan-y; /* lepší gesto posunu na dotykových zařízeních */
  scroll-snap-type: x proximity; /* jemné zarovnání na položky */
    scrollbar-width: thin; 
    scrollbar-color: var(--primary-orange) #e2e8f0;
    border-radius: 15px;
    background: rgba(255,255,255,0.7);
  }

  .canteen-day-scroll::-webkit-scrollbar { height: 10px; }
  .canteen-day-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 6px; }
  .canteen-day-scroll::-webkit-scrollbar-thumb { background: var(--primary-blue); border-radius: 6px; }
  .canteen-day-scroll::-webkit-scrollbar-thumb:hover { background: var(--primary-orange); }

  .canteen-day-btn { 
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid var(--border); 
    padding: 0.8rem 1rem; 
    border-radius: 15px; 
    font-size: 0.8rem; 
    font-weight: 600; 
    letter-spacing: 0.5px; 
    cursor: pointer; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    min-width: 110px; 
    position: relative; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    text-align: center;
  flex: 0 0 auto; /* nenechat zmenšovat – umožní skutečný horizontální scroll */
  scroll-snap-align: start; /* hezčí zarovnání při scrollu */
  }

  .canteen-day-btn:hover {
    transform: translateY(-3px);
    border-color: var(--primary-blue);
  }

  .canteen-day-btn .cdb-date { 
    font-size: 1rem; 
    font-weight: 700; 
    color: var(--primary-blue); 
    margin-bottom: 0.2rem;
  }

  .canteen-day-btn .cdb-weekday { 
    font-size: 0.7rem; 
    text-transform: uppercase; 
    color: var(--text-light); 
    letter-spacing: 0.8px; 
  }

  .canteen-day-btn.today { 
    border-color: var(--primary-orange); 
    background: linear-gradient(145deg, #fff7ed 0%, #fed7aa 100%);
  }

  .canteen-day-btn.today .cdb-date {
    color: var(--primary-orange);
  }

  .canteen-day-btn.active { 
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%);
    color: #fff; 
    border-color: var(--primary-blue);
    transform: translateY(-2px);
  }

  .canteen-day-btn.active .cdb-date { color: #fff; }
  .canteen-day-btn.active .cdb-weekday { color: #e2e8f0; }
  .canteen-day-btn:focus { outline: 3px solid var(--primary-orange); outline-offset: 3px; }

  /* Skryté tlačítko pro aktualizaci jídelníčku */
  .canteen-refresh { 
    display: none !important;
  }

  .canteen-container { 
    flex: 1; 
    min-height: 0; 
    display: flex; 
    flex-direction: column;
    padding: 0 1rem;
  }

  .canteen-list { 
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto; 
    padding: 0;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .canteen-day-group { 
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--border); 
    border-radius: 25px; 
    padding: 2rem; 
    position: relative; 
    display: flex; 
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .canteen-day-group::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 4px;
    background: var(--tri-gradient-h);
    border-radius: 25px 25px 0 0;
    z-index: 1;
    pointer-events: none;
  }

  .canteen-day-group h3 { 
    margin: 0 0 1.5rem; 
    font-size: 1.8rem; 
    display: flex; 
    align-items: center; 
    gap: 0.8rem;
    font-weight: 700;
    text-align: center;
    justify-content: center;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .canteen-meals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    width: 100%;
  }

  /* Cap to max 3 columns on desktop */
  @media (min-width: 1040px) {
    .canteen-meals-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .canteen-meal { 
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid var(--border); 
    border-radius: 20px; 
    padding: 1.5rem; 
    font-size: 0.95rem; 
    line-height: 1.4; 
    position: relative; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    cursor: pointer;
  }

  .canteen-meal:focus {
    outline: 3px solid var(--primary-orange);
    outline-offset: 2px;
  }

  /* ===== Canteen Meal Popover ===== */
  
  /* Overlay pod popoverem */
  .canteen-popover-overlay {
    position: fixed;
    inset: 0;
    z-index: 1999;
    animation: overlayFadeIn 0.25s ease-out;
    -webkit-tap-highlight-color: transparent;
  }

  @keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .canteen-meal-popover {
    position: fixed;
    z-index: 2000;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid var(--primary-blue);
    border-radius: 20px;
    padding: 1.5rem;
    width: 350px;
    max-width: 90vw;
    max-height: calc(100vh - 40px);
    font-size: 0.9rem;
    animation: canteenPopoverFadeIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Mobilní zobrazení - bottom sheet */
  @media (max-width: 768px) {
    .canteen-meal-popover {
      left: 0 !important;
      right: 0;
      bottom: 0 !important;
      top: auto !important;
      width: 100%;
      max-width: 100%;
      max-height: 85vh;
      border-radius: 24px 24px 0 0;
      padding: 1.2rem 1.5rem 2rem;
      animation: slideUpFromBottom 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .canteen-meal-popover::before {
      border-radius: 24px 24px 0 0;
    }

    /* Přidání drag handle pro vizuální indikaci že lze zavřít gestem */
    .canteen-meal-popover::after {
      content: '';
      position: absolute;
      top: 0.5rem;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 4px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 2px;
      z-index: 3;
    }
  }

  @keyframes slideUpFromBottom {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .canteen-meal-popover::before {
    content: '';
    position: absolute;
    /* place the decorative bar flush to the very top and above inset highlights */
    top: 0;
    left: 0;
    right: 0;
    /* slightly taller so it visually fills the top area including any soft highlight */
    height: 8px;
    background: var(--tri-gradient-h);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    z-index: 2;
    box-sizing: border-box;
    pointer-events: none;
  }

  .cmp-close {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-light);
    padding: 0.2rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
  }

  .cmp-close:hover,
  .cmp-close:active {
    background: var(--danger);
    color: white;
    transform: scale(1.1);
  }

  @media (max-width: 768px) {
    .cmp-close {
      top: 1.2rem;
      right: 1.2rem;
      width: 36px;
      height: 36px;
      font-size: 1.6rem;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }

  .cmp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-right: 2rem;
  }

  .cmp-category {
    background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .cmp-type {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-orange);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .cmp-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
    line-height: 1.3;
  }

  .cmp-desc {
    margin-bottom: 0.8rem;
    line-height: 1.5;
    color: var(--text);
  }

  .cmp-desc strong {
    color: var(--primary-blue);
    font-weight: 600;
  }

  .cmp-allergens {
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
    border: 1px solid rgba(244,160,36,0.3);
    border-radius: 12px;
    padding: 0.8rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .cmp-allergens strong {
    color: #8b4513;
    font-weight: 600;
  }

  .cmp-footer {
    text-align: center;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
    color: var(--text-light);
  }

  .cmp-footer small {
    font-size: 0.7rem;
    font-style: italic;
  }

  @media (max-width: 768px) {
    .cmp-header {
      margin-top: 0.8rem;
    }

    .cmp-footer small {
      display: none; /* Na mobilu je overlay a gesto zřejmé */
    }
  }

  @keyframes canteenPopoverFadeIn {
    0% {
      opacity: 0;
      transform: translateY(-20px) scale(0.7);
    }
    50% {
      opacity: 0.8;
      transform: translateY(-5px) scale(1.05);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .canteen-meal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    transition: width 0.3s ease;
  }

  .canteen-meal:hover {
    transform: translateY(-5px);
  }

  .canteen-meal:hover::before {
    width: 12px;
  }

  .canteen-meal.primary::before { background: linear-gradient(180deg, rgba(255,180,90,0.85) 0%, rgba(255,225,180,0.85) 45%, rgb(42 129 186) 100%) !important; }
  .canteen-meal.soup::before { background: linear-gradient(360deg, rgba(255, 180, 90, 0.85) 0%, rgba(255, 225, 180, 0.85) 45%, rgb(42 129 186) 100%) !important; }
  .canteen-meal.alt::before { background: linear-gradient(180deg, rgba(255,180,90,0.85) 0%, rgba(255,225,180,0.85) 45%, rgb(42 129 186) 100%) !important; }

  .canteen-meal .cm-head { 
    font-weight: 700; 
    font-size: 1rem; 
    margin: 0 0 0.8rem; 
    letter-spacing: 0.5px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    text-transform: uppercase;
  }

  .canteen-meal .cm-head .meal-type {
    color: var(--primary-blue);
  }

  .canteen-meal .cm-head .meal-category {
    font-size: 0.75rem;
    background: rgba(42,129,186,0.1);
    color: var(--primary-blue);
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-weight: 600;
  }

  .canteen-meal .cm-name { 
    font-size: 1.1rem; 
    font-weight: 600; 
    color: var(--text); 
    margin: 0 0 0.8rem; 
    line-height: 1.3;
  }

  .canteen-meal .cm-desc { 
    font-size: 0.85rem; 
    color: var(--text-light); 
    margin: 0 0 1rem; 
    font-style: italic;
    line-height: 1.4;
  }

  .canteen-meal .cm-al { 
    font-size: 0.7rem; 
    font-weight: 600; 
    color: #8b4513; 
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
    padding: 0.5rem 0.8rem; 
    border-radius: 12px; 
    display: inline-block; 
    max-width: 100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
    border: 1px solid rgba(244,160,36,0.3);
  }

  .canteen-empty { 
    font-size: 1.2rem; 
    color: var(--text-light); 
    font-style: italic; 
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 25px;
    border: 2px dashed var(--border);
  }

  .canteen-list::-webkit-scrollbar { width: 12px; }
  .canteen-list::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 8px; margin: 10px; }
  .canteen-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary-blue), var(--light-blue)); border-radius: 8px; }
  .canteen-list::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--primary-orange), var(--light-orange)); }

  @media (max-width:1039px){
    .canteen-list { grid-template-columns: 1fr; }
    .canteen-day-group { padding: 1.5rem 1rem; }
    .canteen-meals-grid { grid-template-columns: 1fr; gap: 1rem; }
    .canteen-meal { padding: 1rem; }
    .canteen-toolbar { padding: 0.8rem 1rem; flex-direction: column; gap: 1rem; }
    .canteen-day-scroll { padding: 0.5rem; gap: 0.5rem; }
    .canteen-day-btn { min-width: 90px; padding: 0.6rem 0.8rem; }
    .canteen-day-btn .cdb-date { font-size: 0.9rem; }
  }

  /* Responzivní design pro dotykové obrazovky */
  @media (max-width: 1024px) {
    .sidebar {
      width: 300px;
    }
    
    .menu-btn {
      padding: 1.2rem;
      font-size: 1rem;
    }
    
    .time-display .time {
      font-size: 2rem;
    }

    /* Úprava rozvrhu pro menší obrazovky */
    .schedule-container {
      flex: 1;
      min-height: 400px;
      border-radius: 15px;
    }
    
    .schedule-table th {
      width: calc((100vw - 370px) / 11);
      height: 55px;
    }
    
    .schedule-table .day-col {
      width: 70px;
    }
    
    .schedule-table th,
    .schedule-table td {
    /* height: calc((100vh - 240px) / 6); *//* Oprava pro tablet - 6 řádků */
      max-height: calc((100vh - 240px) / 6);
      min-height: calc((100vh - 240px) / 6);
    }
    
    .lesson-box {
      padding: 0.3rem 0.25rem;
      border-radius: 10px;
    }
  }

  /* Vylepšené keyframe animace pro suplování s lepší performance */
  @keyframes substBlockFadeIn {
    0% {
      opacity: 0;
      transform: translateY(40px) scale(0.92) translateZ(0);
      /* removed filter blur from keyframes for performance */
      filter: none;
    }
    60% {
      opacity: 0.8;
      transform: translateY(10px) scale(0.98) translateZ(0);
      filter: none;
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1) translateZ(0);
      filter: none;
    }
  }

  @keyframes substHeadingSlide {
    0% {
      opacity: 0;
      transform: translateX(-60px) rotateY(-20deg) translateZ(0);
    }
    70% {
      opacity: 0.9;
      transform: translateX(5px) rotateY(2deg) translateZ(0);
    }
    100% {
      opacity: 1;
      transform: translateX(0) rotateY(0deg) translateZ(0);
    }
  }

  @keyframes substCardSlideIn {
    0% {
      opacity: 0;
      transform: translateY(30px) scale(0.85) translateZ(0);
      filter: none;
    }
    50% {
      opacity: 0.7;
      transform: translateY(8px) scale(0.95) translateZ(0);
      filter: none;
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1) translateZ(0);
      filter: none;
    }
  }

  @keyframes substCardCancelSlide {
    from {
      opacity: 0;
      transform: translateX(-30px) rotateZ(-5deg);
      background: #ffffff;
    }
    to {
      opacity: 1;
      transform: translateX(0) rotateZ(0deg);
      background: #fff5f5;
    }
  }

  @keyframes substCardChangeSlide {
    from {
      opacity: 0;
      transform: translateX(30px) rotateZ(5deg);
      background: #ffffff;
    }
    to {
      opacity: 1;
      transform: translateX(0) rotateZ(0deg);
      background: #f5f9ff;
    }
  }

  @keyframes substCardGuardSlide {
    from {
      opacity: 0;
      transform: translateY(-30px) scale(0.8);
      background: #ffffff;
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
      background: #fffaf0;
    }
  }

  @keyframes substCardGroupSlide {
    from {
      opacity: 0;
      transform: scale(0.7) rotate(10deg);
      background: #ffffff;
    }
    to {
      opacity: 1;
      transform: scale(1) rotate(0deg);
      background: #f7f7f7;
    }
  }

  @keyframes substNavSlideIn {
    0% {
      opacity: 0;
      transform: translateY(-30px) scale(0.95) translateZ(0);
      filter: none;
    }
    60% {
      opacity: 0.8;
      transform: translateY(-5px) scale(0.99) translateZ(0);
      filter: none;
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1) translateZ(0);
      filter: none;
    }
  }

  @keyframes substDatePulse {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes substFilterSlideIn {
    from {
      opacity: 0;
      transform: translateX(50px) rotateY(15deg);
    }
    to {
      opacity: 1;
      transform: translateX(0) rotateY(0deg);
    }
  }

  @keyframes substClassGridFadeIn {
    from {
      opacity: 0;
      transform: translateY(40px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes substScrollContainerSlide {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes substGridTableFadeIn {
    0% {
      opacity: 0;
      transform: scale(0.9) rotateX(8deg) translateZ(0);
      filter: none;
    }
    40% {
      opacity: 0.6;
      transform: scale(0.96) rotateX(3deg) translateZ(0);
      filter: none;
    }
    100% {
      opacity: 1;
      transform: scale(1) rotateX(0deg) translateZ(0);
      filter: none;
    }
  }

  @keyframes substGridHeaderSlide {
    from {
      opacity: 0;
      transform: translateY(-15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Staggered animace pro subst karty */
  .subst-card:nth-child(1) { animation-delay: 0.1s; }
  .subst-card:nth-child(2) { animation-delay: 0.15s; }
  .subst-card:nth-child(3) { animation-delay: 0.2s; }
  .subst-card:nth-child(4) { animation-delay: 0.25s; }
  .subst-card:nth-child(5) { animation-delay: 0.3s; }
  .subst-card:nth-child(6) { animation-delay: 0.35s; }
  .subst-card:nth-child(7) { animation-delay: 0.4s; }
  .subst-card:nth-child(8) { animation-delay: 0.45s; }
  .subst-card:nth-child(9) { animation-delay: 0.5s; }
  .subst-card:nth-child(10) { animation-delay: 0.55s; }
  .subst-card:nth-child(n+11) { animation-delay: 0.6s; }

  /* Staggered animace pro grid hlavičky */
  .subst-grid thead th:nth-child(1) { animation-delay: 0.1s; }
  .subst-grid thead th:nth-child(2) { animation-delay: 0.15s; }
  .subst-grid thead th:nth-child(3) { animation-delay: 0.2s; }
  .subst-grid thead th:nth-child(4) { animation-delay: 0.25s; }
  .subst-grid thead th:nth-child(5) { animation-delay: 0.3s; }
  .subst-grid thead th:nth-child(6) { animation-delay: 0.35s; }
  .subst-grid thead th:nth-child(7) { animation-delay: 0.4s; }
  .subst-grid thead th:nth-child(8) { animation-delay: 0.45s; }
  .subst-grid thead th:nth-child(9) { animation-delay: 0.5s; }
  .subst-grid thead th:nth-child(10) { animation-delay: 0.55s; }

  /* Mobilní optimalizace - redukované delays pro staggered animace */
  @media (max-width: 1039px) {
    .subst-card:nth-child(1) { animation-delay: 0.05s; }
    .subst-card:nth-child(2) { animation-delay: 0.08s; }
    .subst-card:nth-child(3) { animation-delay: 0.1s; }
    .subst-card:nth-child(4) { animation-delay: 0.12s; }
    .subst-card:nth-child(5) { animation-delay: 0.15s; }
    .subst-card:nth-child(6) { animation-delay: 0.17s; }
    .subst-card:nth-child(7) { animation-delay: 0.2s; }
    .subst-card:nth-child(8) { animation-delay: 0.22s; }
    .subst-card:nth-child(9) { animation-delay: 0.25s; }
    .subst-card:nth-child(10) { animation-delay: 0.27s; }
    .subst-card:nth-child(n+11) { animation-delay: 0.3s; }

    .subst-grid thead th:nth-child(1) { animation-delay: 0.05s; }
    .subst-grid thead th:nth-child(2) { animation-delay: 0.08s; }
    .subst-grid thead th:nth-child(3) { animation-delay: 0.1s; }
    .subst-grid thead th:nth-child(4) { animation-delay: 0.12s; }
    .subst-grid thead th:nth-child(5) { animation-delay: 0.15s; }
    .subst-grid thead th:nth-child(6) { animation-delay: 0.17s; }
    .subst-grid thead th:nth-child(7) { animation-delay: 0.2s; }
    .subst-grid thead th:nth-child(8) { animation-delay: 0.22s; }
    .subst-grid thead th:nth-child(9) { animation-delay: 0.25s; }
    .subst-grid thead th:nth-child(10) { animation-delay: 0.27s; }
  }

  /* Velmi malé obrazovky - minimální delays */
  @media (max-width: 480px) {
    .subst-card:nth-child(n) { animation-delay: 0s !important; }
    .subst-grid thead th:nth-child(n) { animation-delay: 0s !important; }
  }

  /* Dokončení staggered animací pro grid hlavičky */
  .subst-grid thead th:nth-child(n+11) { animation-delay: 0.6s; }

  /* Simple fade-in animation for timetable elements - replaced complex animations */
  @keyframes simpleFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes popoverScale {
    0% {
      opacity: 0;
      transform: scale(0.7);
    }
    50% {
      opacity: 0.8;
      transform: scale(1.05);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes popoverEntrance {
    0% {
      opacity: 0;
      transform: scale(0.92) translateY(-8px);
      filter: none;
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
      filter: none;
    }
  }

  @keyframes shimmer {
    0% {
      background-position: -1200px 0;
      opacity: 0.6;
    }
    50% {
      opacity: 0.9;
    }
    100% {
      background-position: 1200px 0;
      opacity: 0.6;
    }
  }

  .content-section.active {
    animation: fadeIn var(--duration-slow) var(--ease-standard);
  }

  .schedule-container {
    animation: simpleFadeIn 0.3s ease;
  }

  /* Simple fade animation for lesson boxes - removed complex slide/bounce effects */
  .lesson-box.loading-animation {
    animation: simpleFadeIn 0.3s ease;
    animation-fill-mode: both;
  }

  .lesson-box.loading-animation:nth-child(odd),
  .lesson-box.loading-animation:nth-child(even) {
    animation: simpleFadeIn 0.3s ease;
  }

  /* Simple fade for table headers - removed staggered bounce animation */
  .schedule-table th.loading-animation {
    animation: simpleFadeIn 0.3s ease;
    animation-fill-mode: both;
  }

  /* Remove all animation delays - instant unified fade */
  .schedule-table th.loading-animation:nth-child(1),
  .schedule-table th.loading-animation:nth-child(2),
  .schedule-table th.loading-animation:nth-child(3),
  .schedule-table th.loading-animation:nth-child(4),
  .schedule-table th.loading-animation:nth-child(5),
  .schedule-table th.loading-animation:nth-child(6),
  .schedule-table th.loading-animation:nth-child(7),
  .schedule-table th.loading-animation:nth-child(8),
  .schedule-table th.loading-animation:nth-child(9),
  .schedule-table th.loading-animation:nth-child(10),
  .schedule-table th.loading-animation:nth-child(11) {
    animation-delay: 0s;
  }

  /* Vylepšený loading shimmer efekt */
  .schedule-container.loading::before {
    content: '';
    position: absolute;
    top: 0; 
    left: -1200px;
    width: 1200px; 
    height: 100%;
    background:
      linear-gradient(90deg, 
        transparent 0%, 
        rgba(255,255,255,0.4) 25%, 
        rgba(255,255,255,0.8) 50%, 
        rgba(255,255,255,0.4) 75%, 
        transparent 100%),
      linear-gradient(90deg, rgba(255,180,90,0.85) 0%, rgba(255,225,180,0.85) 45%, rgb(42 129 186) 100%) !important;
    background-blend-mode: overlay, normal;
    animation: shimmer 2s infinite var(--ease-standard);
    z-index: 1;
    opacity: 0.9;
    border-radius: 25px;
    will-change: transform;
  }

  /* Optimalizace shimmer pro mobilní */
  @media (max-width: 1039px) {
    .schedule-container.loading::before {
      animation: shimmer 3s infinite var(--ease-standard);
      background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255,255,255,0.2) 50%, 
        transparent 100%);
      background-blend-mode: normal;
    }
  }

  /* Micro-animace pro hover efekty */
  .lesson-box .lb-subj {
    transition: transform var(--duration-fast) var(--ease-standard);
    will-change: transform;
  }

  .lesson-box:hover .lb-subj {
    transform: scale(1.05) translateZ(0);
    /* removed text-shadow for performance */
    text-shadow: none;
  }

  .lesson-box .lb-room,
  .lesson-box .lb-group,
  .lesson-box .lb-teacher {
    transition: 
      background-color var(--duration-instant) var(--ease-standard),
      transform var(--duration-instant) var(--ease-standard);
    will-change: transform, background-color;
  }

  .lesson-box:hover .lb-room {
    background: rgba(42, 129, 186, 0.2);
    transform: translateY(-1px) translateZ(0);
  }

  .lesson-box:hover .lb-group {
    background: rgba(244, 160, 36, 0.2);
    transform: translateY(-1px) translateZ(0);
  }

  .lesson-box:hover .lb-teacher {
    background: rgba(100, 116, 139, 0.1);
    transform: translateY(-1px) translateZ(0);
  }

  /* Scrollbary */
  /* Vylepšené tri‑color scrollbary – diagonální opakující se pruhy, aby byly všechny barvy vždy viditelné i u velmi úzkého thumbu */
  ::-webkit-scrollbar { width:12px; height:12px; }
  ::-webkit-scrollbar-track { background: transparent; border-radius:8px; }
  ::-webkit-scrollbar-thumb {
    /* Diagonální opakující se pattern: 6px pásy A/B/C/E cyklu (AB, CD, E) */
    background: var(--primary-orange);
    border-radius:8px;
    border:2px solid #ffffff33; /* lehké orámování pro kontrast */
  }
  ::-webkit-scrollbar-thumb:hover { filter:brightness(1.1) saturate(1.1); }
  /* Horizontální scroll – stejný vzor */
  body ::-webkit-scrollbar:horizontal { height:12px; }
  body ::-webkit-scrollbar-thumb:horizontal {
    background: var(--primary-orange)}
  /* Firefox fallback (jen jedna barva + track) */
  * { scrollbar-width:auto; scrollbar-color: var(--primary-orange) transparent; }

  /* Mobilní optimalizace animací pro rozvrhy a tabulky */
  @media (max-width: 1039px) {
    /* Zjednodušené animace pro kritické výkonnostní situace */
    .backdrop-filter,
    .backdrop-filter:before,
    .backdrop-filter:after {
      backdrop-filter: none !important;
    }
    
    /* Odstranit složité box-shadows z rozvrhových kontejnerů */
    .schedule-container {
      backdrop-filter: none !important;
      /* Simple fade only - removed complex mobile animation */
      animation: simpleFadeIn 0.25s ease;
    }
    
    /* Simplified lesson-box animation for mobile */
    .lesson-box.loading-animation {
      animation: simpleFadeIn 0.25s ease;
      animation-fill-mode: both;
    }
    
    .lesson-box.loading-animation:nth-child(odd),
    .lesson-box.loading-animation:nth-child(even) {
      animation: simpleFadeIn 0.25s ease;
      animation-delay: 0s;
    }
    
    /* Optimalizace timetable mode tlačítek - hlavní zdroj sekání */
    .tt-mode-btn {
      transition: background-color var(--duration-fast) var(--ease-standard),
                  color var(--duration-fast) var(--ease-standard) !important;
      will-change: background-color, color !important;
    }
    
    .tt-mode-btn::before {
      display: none !important; /* Odstranit shimmer efekt */
    }
    
    .tt-mode-btn:hover::before {
      display: none !important;
    }
    
    .tt-mode-btn.active {
      transform: none !important;
    }
    
    .tt-mode-btn:not(.active):hover { 
      transform: none !important;
    }
    
    .tt-mode-btn:active {
      transform: none !important;
    }
    
    /* Optimalizace custom selectů pro entity (učitelé, třídy, místnosti) */
    .custom-select .cs-trigger {
      transition: border-color var(--duration-fast) var(--ease-standard),
                  background-color var(--duration-fast) var(--ease-standard) !important;
      will-change: border-color, background-color !important;
    }
    
    .custom-select .cs-trigger:hover { 
      transform: none !important;
    }
    
    .custom-select .cs-option:hover,
    .custom-select .cs-option:focus {
      transform: none !important;
    }
    
    .entity-item:hover,
    .entity-item:active {
      transform: none !important;
    }
    
    /* Odstranit hover efekty z tabulek na mobilních zařízeních */
    .schedule-table tbody tr:hover,
    .lesson-box:hover {
      transform: none !important;
    }
    
    /* Simplified navigation animation */
    .substitutions-nav {
      animation: simpleFadeIn 0.25s ease;
    }
    
    .substitutions-nav:hover {
      transform: none !important;
    }
  }

  /* Velmi slabá zařízení - minimální animace */
  @media (max-width: 480px) {
    .schedule-container,
    .lesson-box.loading-animation,
    .substitutions-nav {
      animation: none !important;
    }

    /* Úplné vypnutí složitých efektů na slabých zařízeních */
    .tt-mode-btn,
    .custom-select .cs-trigger,
    .entity-item {
      transition: none !important;
      will-change: auto !important;
    }
    
    /* Optimalizované entity items pro mobil */
    .entity-item {
      padding: .6rem .75rem;
      font-size: 1rem;
      border-radius: 10px;
      backdrop-filter: none;
      animation: none;
    }
    
    .entity-item::before,
    .entity-item::after {
      display: none;
    }
    
    .entity-item:hover {
      transform: none !important;
    }
    
    .entity-item.active {
      transform: none !important;
    }
    
    .tt-mode-btn::before,
    .custom-select .cs-trigger::before {
      display: none !important;
    }
  }

  /* Mobilní optimalizace animací */
  @media (max-width: 1039px) {
    /* Zrychlené animace na mobilních zařízeních pro lepší responzivitu */
    * {
      --duration-instant: 0.08s;
      --duration-fast: 0.15s;
      --duration-standard: 0.2s;
      --duration-medium: 0.25s;
      --duration-slow: 0.35s;
      --duration-loading: 0.5s;
    }

    /* Menší transform hodnoty pro touch zařízení */
    .entity-item:hover,
    .entity-item:active {
      transform: translateY(-1px) translateZ(0);
    }

    .custom-select .cs-option:hover,
    .custom-select .cs-option:focus {
      transform: translateX(2px) translateZ(0);
    }

    .tt-mode-btn:not(.active):hover,
    .tt-mode-btn:active {
      transform: translateY(-1px) translateZ(0);
    }

    /* Menší ripple efekt na mobile */
    button:active::before,
    .btn:active::before,
    .bn-btn:active::before {
      width: 150px;
      height: 150px;
    }

    /* Touch-friendly tap feedback */
    button,
    .btn,
    .bn-btn,
    .entity-item,
    .custom-select .cs-trigger,
    .tt-mode-btn {
      -webkit-tap-highlight-color: rgba(59, 130, 246, 0.1);
    }
    
    /* Simplified schedule table headers for mobile - no staggered delays */
    .schedule-table th.loading-animation {
      animation: simpleFadeIn 0.25s ease !important;
      animation-fill-mode: both !important;
    }
    
    .schedule-table th.loading-animation:nth-child(1),
    .schedule-table th.loading-animation:nth-child(2),
    .schedule-table th.loading-animation:nth-child(3),
    .schedule-table th.loading-animation:nth-child(4),
    .schedule-table th.loading-animation:nth-child(5),
    .schedule-table th.loading-animation:nth-child(6),
    .schedule-table th.loading-animation:nth-child(7),
    .schedule-table th.loading-animation:nth-child(8),
    .schedule-table th.loading-animation:nth-child(9),
    .schedule-table th.loading-animation:nth-child(10),
    .schedule-table th.loading-animation:nth-child(11) {
      animation-delay: 0s !important;
    }
  }

  /* Reduce motion preference respecting */
  @media (prefers-reduced-motion: reduce) {
    /* Vypnout pouze loading animace, transitions pro interakce ponechat */
    .loading-animation,
    [class*="loading"] {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }

    * {
      scroll-behavior: auto !important;
    }

    /* Zachovat transitions pro UX - důležité pro feedback */
    button,
    .btn,
    .bn-btn,
    .entity-item {
      transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }

    /* Mobilní iframe optimalizace */
    iframe {
      border-radius: 12px;
      transition: none;
    }

    iframe::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
  }

  /* Performance optimalizace - automatické vypnutí will-change po animaci */
  .subst-animation-loaded,
  .subst-card-loaded,
  .subst-grid-loaded,
  .subst-row-loaded,
  .subst-matrix {
    animation-fill-mode: both;
  }

  .subst-animation-loaded.animation-complete,
  .subst-card-loaded.animation-complete,
  .subst-grid-loaded.animation-complete,
  .subst-row-loaded.animation-complete {
    will-change: auto;
  }

  /* GPU acceleration pro kritické elementy */
  .schedule-container,
  .sidebar,
  .bottom-nav,
  .content-section {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }

  /* Optimalizace pro velmi slabá zařízení */
  @media (max-width: 480px) {
    /* Minimální animace na velmi malých obrazovkách */
    * {
      --duration-instant: 0.05s;
      --duration-fast: 0.1s;
      --duration-standard: 0.15s;
      --duration-medium: 0.2s;
      --duration-slow: 0.25s;
      --duration-loading: 0.3s;
    }

    /* Date-info ještě menší na velmi malých displejích */
    .date-info {
      font-size: 0.75rem;
      padding: 0.35rem 0.65rem;
      border-radius: 20px;
      letter-spacing: 0.1px;
    }

    /* Vypnout blur efekty na slabých zařízeních */
    .subst-animation-loaded,
    .subst-card-loaded,
    .subst-grid-loaded,
    .subst-nav-loaded {
      filter: none !important;
    }

    /* Jednodušší transformace */
    .entity-item:hover,
    .bn-btn:hover,
    .custom-select .cs-trigger:hover {
      transform: none;
    }
    
    /* Vypnout animace hlaviček rozvrhů na slabých zařízeních */
    .schedule-table th.loading-animation {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }

/* ===== About Page Styling ===== */

/* About section with subtle gradient background */
.content-section#about {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* remove top padding so the sticky header can sit flush at the top */
  padding: 0 1.25rem 1.25rem;
  background: linear-gradient(135deg, 
    rgba(31, 111, 235, 0.02) 0%, 
    rgba(244, 160, 36, 0.02) 100%);
}

/* Keep the section header pinned at the top within the About scroll container */
#about .section-header{
  position: sticky;
  top: 0;
  z-index: 10;
  /* Use a warm gradient for the About header (scoped to #about only) */
  background: linear-gradient(89deg, #f5c783 0%, #c9bc9d 100%) !important;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* Main content panel with enhanced styling */
#about .about-content {
  max-width: 900px;
  width: min(900px, 100%);
  margin: 0 auto 2rem auto;
  padding: 2.5rem;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.8;
  color: var(--text);
  background: var(--panel);
  border-radius: 20px;
  animation: aboutContentFadeIn 0.4s ease-out;
}

@keyframes aboutContentFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Intro paragraph styling */
#about .about-content > p:first-of-type {
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 2rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, 
    rgba(31, 111, 235, 0.05) 0%, 
    rgba(244, 160, 36, 0.05) 100%);
  border-left: 4px solid var(--primary-blue);
  border-radius: 8px;
}

/* Section headings with icons */
#about .about-content h3 {
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid transparent;
  background: linear-gradient(to right, var(--primary-orange), transparent) bottom/100% 3px no-repeat;
  transition: all 0.3s ease;
}

#about .about-content h3:hover {
  transform: translateX(5px);
}

#about .about-content h3::before {
  content: '📋';
  font-size: 1.4rem;
  /* removed drop-shadow for performance */
  filter: none;
}

#about .about-content h3:first-of-type {
  margin-top: 0;
}

/* Override icon for specific sections */
#about .about-content h3:nth-of-type(2)::before {
  content: '🐛'; /* Nahlášení chyb */
}

#about .about-content h3:nth-of-type(3)::before {
  content: '🏷️'; /* Aktuální verze */
}

#about .about-content h3:nth-of-type(4)::before {
  content: '📝'; /* Changelog */
}

/* Paragraph styling */
#about .about-content p {
  margin-bottom: 1.25rem;
  font-size: 1.05rem;
  color: var(--text);
}

/* Enhanced list styling with better spacing and icons */
#about .about-content ul {
  margin: 1.25rem 0 2rem 0;
  list-style: none;
  padding-left: 0;
}

#about .about-content ul li {
  position: relative;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.7;
  background: linear-gradient(135deg, 
    rgba(31, 111, 235, 0.03) 0%, 
    rgba(244, 160, 36, 0.03) 100%);
  border-radius: 10px;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

#about .about-content ul li:hover {
  transform: translateX(5px);
  border-left-color: var(--primary-orange);
}

#about .about-content > ul li::before {
  /* keep checkmark for regular top-level lists in About */
  content: '✓';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary-orange);
  font-weight: bold;
  font-size: 1.2rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 160, 36, 0.1);
  border-radius: 50%;
}

/* Fallback for changelog lists (dynamically generated). Use a neutral diamond bullet */
#changelog .changelog-entry ul li::before {
  content: '🔹' !important;
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.05rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  color: var(--primary-blue);
  border-radius: 50%;
}

#about .about-content strong {
  color: var(--primary-blue);
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  background: rgba(31, 111, 235, 0.08);
  border-radius: 4px;
}

/* Enhanced footer styling */
#about .about-footer {
  margin-top: 3rem;
  padding: 1.5rem 2rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-light);
  background: linear-gradient(135deg, 
    rgba(31, 111, 235, 0.05) 0%, 
    rgba(244, 160, 36, 0.05) 100%);
  border-top: 2px solid rgba(31, 111, 235, 0.1);
  border-radius: 0 0 20px 20px;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  margin-bottom: -2.5rem;
}

/* Version display styling with modern badge */
#app-version {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, 
    var(--primary-orange) 0%, 
    #f59e0b 100%);
  color: white;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1.05rem;
  transition: all 0.3s ease;
}

#app-version:hover {
  transform: translateY(-2px);
}

#app-version em {
  font-style: normal;
  opacity: 0.9;
}

/* Changelog styling with enhanced visual hierarchy */
#changelog-updated {
  font-size: 0.95rem;
  color: var(--text-light);
  margin-bottom: 1.5rem;
  font-style: italic;
  padding: 0.5rem 1rem;
  background: rgba(31, 111, 235, 0.05);
  border-radius: 8px;
  border-left: 3px solid var(--primary-blue);
}

#changelog {
  margin-top: 1.5rem;
}

.changelog-load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 1rem 0 0;
}

#changelog-load-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
}

.changelog-entry {
  position: relative;
  padding: 1.75rem;
  margin-bottom: 2rem;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.7) 0%, 
    rgba(248, 250, 252, 0.7) 100%);
  border-radius: 16px;
  border-left: 5px solid var(--primary-blue);
  transition: all 0.3s ease;
}

.changelog-entry:hover {
  border-left-color: var(--primary-orange);
}

.changelog-entry h4 {
  margin: 0 0 1.25rem 0;
  font-size: 1.3rem;
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(31, 111, 235, 0.1);
}

.changelog-entry h4 .version-badge {
  background: linear-gradient(135deg, var(--primary-orange) 0%, #f59e0b 100%);
  color: white;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.changelog-entry h4 .date-badge {
  background: rgba(31, 111, 235, 0.1);
  color: var(--primary-blue);
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.changelog-entry h4 .date-badge::before {
  content: '📅';
  font-size: 0.9rem;
}

/* Changelog categories */
.changelog-section {
  margin: 1rem 0;
}

.changelog-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1rem 0 0.75rem 0;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.changelog-section-title.new-features {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(134, 239, 172, 0.1) 100%);
  color: #16a34a;
  border-left: 3px solid #22c55e;
}

.changelog-section-title.new-features::before {
  content: '✨';
  font-size: 1.2rem;
}

.changelog-section-title.improvements {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.1) 100%);
  color: #2563eb;
  border-left: 3px solid #3b82f6;
}

.changelog-section-title.improvements::before {
  content: '🚀';
  font-size: 1.2rem;
}

.changelog-section-title.bug-fixes {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(252, 165, 165, 0.1) 100%);
  color: #dc2626;
  border-left: 3px solid #ef4444;
}

.changelog-section-title.bug-fixes::before {
  content: '🐛';
  font-size: 1.2rem;
}

.changelog-section-title.changes {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(196, 181, 253, 0.1) 100%);
  color: #9333ea;
  border-left: 3px solid #a855f7;
}

.changelog-section-title.changes::before {
  content: '🔄';
  font-size: 1.2rem;
}

/* Enhanced list items with visual indicators */
.changelog-entry ul {
  margin: 0.75rem 0 0 0;
  padding-left: 0;
  list-style: none;
}

.changelog-entry ul li {
  position: relative;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  margin-bottom: 0.65rem;
  font-size: 1.02rem;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

/* Category-specific bullets for changelog list items (override generic checkmark) */
#about .about-content .changelog-section.new-features ul li::before,
#about .about-content .changelog-section.improvements ul li::before,
#about .about-content .changelog-section.bug-fixes ul li::before,
#about .about-content .changelog-section.changes ul li::before {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
}

#about .about-content .changelog-section.new-features ul li::before {
  content: '🚀';
  color: #16a34a; /* match new-features title color */
  background: rgba(34, 197, 94, 0.06);
}

#about .about-content .changelog-section.improvements ul li::before {
  content: '🔧';
  color: #2563eb; /* match improvements title color */
  background: rgba(59, 130, 246, 0.06);
}

#about .about-content .changelog-section.bug-fixes ul li::before {
  content: '🐛';
  color: #dc2626; /* match bug-fixes title color */
  background: rgba(239, 68, 68, 0.06);
}

#about .about-content .changelog-section.changes ul li::before {
  content: '🔁';
  color: #9333ea; /* match changes title color */
  background: rgba(168, 85, 247, 0.06);
}

/* New improved changelog entry styles */
#changelog .changelog-entry {
  margin: 0 0 1rem 0;
  padding: 0.6rem;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,250,0.85));
  border: 1px solid rgba(0,0,0,0.04);
}

#changelog .changelog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

#changelog .changelog-header h4 { margin: 0; font-size: 1.05rem; display:flex; align-items:center; gap:0.6rem; }

.changelog-toggle { background: transparent; border: 0; padding: 0.25rem; border-radius:6px; cursor:pointer; color:var(--text); }
.changelog-toggle i { transition: transform 0.18s ease; display:inline-block; }

#changelog .changelog-entry.collapsed ul.changelog-list,
#changelog .changelog-entry.collapsed .issues-list,
#changelog .changelog-entry.collapsed .issues-title { display: none; }

/* bullets by li category (more specific than fallback) */
#changelog .changelog-entry ul li.new-features::before { content: '🚀'; color: #16a34a; background: rgba(34,197,94,0.06); }
#changelog .changelog-entry ul li.improvements::before { content: '🔧'; color: #2563eb; background: rgba(59,130,246,0.06); }
#changelog .changelog-entry ul li.bug-fixes::before { content: '🐛'; color: #dc2626; background: rgba(239,68,68,0.06); }
#changelog .changelog-entry ul li.changes::before { content: '🔁'; color: #9333ea; background: rgba(168,85,247,0.06); }

/* fallback for changelog list items (neutral bullet) */
#changelog .changelog-entry ul li::before {
  content: '🔹' !important;
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.05rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--primary-blue);
  border-radius: 50%;
}

/* Known issues styling */
#changelog .issues-title {
  font-weight: 700;
  margin: 0.75rem 0 0.5rem 0;
  color: var(--text);
}

#changelog .issues-list {
  list-style: none;
  margin: 0.5rem 0 0 0;
  padding: 0;
}

#changelog .issues-list li.issue-item {
  position: relative;
  padding: 0.65rem 1rem 0.65rem 2.75rem;
  margin-bottom: 0.5rem;
  background: rgba(255,255,255,0.95);
  border-radius: 8px;
  border-left: 4px solid rgba(0,0,0,0.03);
  display: block;
}

#changelog .issues-list li.issue-item::before {
  content: '⚠️';
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.05rem;
}

#changelog .issue-text { font-size: 1rem; color: var(--text); }

.issue-status {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  vertical-align: middle;
}
.issue-status.status-wip { background: rgba(245,158,11,0.12); color: #b45309; border: 1px solid rgba(245,158,11,0.16); }
.issue-status.status-investigating { background: rgba(244,63,94,0.06); color: #b91c1c; border: 1px solid rgba(244,63,94,0.08); }
.issue-status.status-resolved { background: rgba(34,197,94,0.08); color: #15803d; border: 1px solid rgba(34,197,94,0.12); }
.issue-status.status-blocked { background: rgba(239,68,68,0.06); color: #991b1b; border: 1px solid rgba(239,68,68,0.08); }
.issue-status.status-unknown { background: rgba(100,116,139,0.06); color: #374151; border: 1px solid rgba(100,116,139,0.08); }

.issue-note { margin-top: 0.4rem; font-size: 0.92rem; color: var(--text-light); background: rgba(0,0,0,0.02); padding: 0.35rem 0.6rem; border-radius: 6px; }

/* slightly emphasize issues visually on hover */
#changelog .issues-list li.issue-item:hover { transform: translateY(-3px); }

/* Different bullet styles for different types */
.changelog-entry .new-features ul li::before {
  content: '✓';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #22c55e;
  font-weight: bold;
  font-size: 1.2rem;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 197, 94, 0.15);
  border-radius: 50%;
}

.changelog-entry .new-features ul li:hover {
  border-left-color: #22c55e;
}

.changelog-entry .improvements ul li::before {
  content: '→';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #3b82f6;
  font-weight: bold;
  font-size: 1.4rem;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.15);
  border-radius: 50%;
}

.changelog-entry .improvements ul li:hover {
  border-left-color: #3b82f6;
}

.changelog-entry .bug-fixes ul li::before {
  content: '×';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #ef4444;
  font-weight: bold;
  font-size: 1.5rem;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.15);
  border-radius: 50%;
}

.changelog-entry .bug-fixes ul li:hover {
  border-left-color: #ef4444;
}

.changelog-entry .changes ul li::before {
  content: '↻';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #a855f7;
  font-weight: bold;
  font-size: 1.3rem;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168, 85, 247, 0.15);
  border-radius: 50%;
}

.changelog-entry .changes ul li:hover {
  border-left-color: #a855f7;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  #about .about-content {
    padding: 1.5rem;
    border-radius: 16px;
  }
  
  #about .about-content h3 {
    font-size: 1.4rem;
    gap: 0.5rem;
  }

  #about .about-content h3::before {
    font-size: 1.2rem;
  }
  
  #about .about-content > p:first-of-type {
    font-size: 1rem;
    padding: 1rem;
  }

  #about .about-content p {
    font-size: 1rem;
  }

  #about .about-content ul li {
    padding: 0.6rem 0.75rem 0.6rem 2.25rem;
  }

  #about .about-footer {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    padding: 1.25rem 1rem;
    font-size: 0.85rem;
  }

  #changelog-updated {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
    margin-bottom: 1rem;
  }

  .changelog-entry {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border-left-width: 3px;
  }

  .changelog-entry:hover {
    transform: translateX(4px);
  }

  .changelog-entry h4 {
    font-size: 1.15rem;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
  }

  .changelog-entry h4 .version-badge {
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
  }

  .changelog-entry h4 .date-badge {
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
  }

  .changelog-section-title {
    font-size: 1rem;
    padding: 0.4rem 0.6rem;
    margin: 0.75rem 0 0.6rem 0;
    border-left-width: 2px;
  }

  .changelog-section-title::before {
    font-size: 1rem;
  }

  .changelog-entry ul li {
    font-size: 0.96rem;
    padding: 0.65rem 0.8rem 0.65rem 2.5rem;
    margin-bottom: 0.5rem;
  }

  .changelog-entry ul li::before {
    width: 22px;
    height: 22px;
    font-size: 1rem;
    left: 0.6rem;
  }

  .changelog-entry ul li:hover {
    transform: translateX(3px);
  }
  
  #app-version {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
  }
}
#app-version {
  display: inline-block;
  padding: 0.85rem 1.65rem;
  background: linear-gradient(135deg, var(--primary-orange) 0%, var(--light-orange) 100%);
  color: white;
  border-radius: 12px;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1.25rem 0 1.5rem;
  transition: all 0.3s ease;
  cursor: default;
}

#app-version:hover {
  transform: translateY(-3px);
}

#app-version strong {
  color: white;
  font-size: 1.3em;
  margin-left: 0.4rem;
  font-weight: 700;
}

/* Contact and bug report section highlighting */
#about .about-content h3:nth-of-type(2) {
  color: var(--primary-orange);
  border-bottom-color: var(--primary-blue);
}

/* Mobile responsive adjustments for About page second media query */
@media (max-width: 768px) {
  #about .about-content {
    padding: 1rem;
  }
  
  #about .about-content h3 {
    font-size: 1.3rem;
    margin-top: 2rem;
  }
  
  #app-version {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
  }
}

/* Reduce date-pill and date button size on small mobile devices to save space */
@media (max-width: 600px) {
  /* make the small date pill more compact */
  .section-header .tt-date-pill{
    padding: .3rem .55rem;
    margin: .15rem 0rem 0 0;
    gap: .35rem;
    border-radius:8px;
    font-size:0.88rem;
  }

/* Performance: remove shadows from individual lesson boxes and substitution grid items
   User request: odstranit stíny pro jednotlivé hodiny (lesson-box) a pro grid-itemy na stránce suplování.
   Přepisujeme box-shadow, ponecháváme ostatní dekorace (borders, backgrounds). */
.lesson-box,
.lesson-box.mini,
.subst-grid .grid-item,
.subst-grid .grid-cell .grid-item,
.grid-item {
  box-shadow: none !important;
  /* odstraníme přechody stínů také, aby nedocházelo k layout thrash při hoverech */
  transition: none !important;
}

/* Leave more specific inset/badge shadows intact unless explicitly requested. */
  /* make the substitutions date pill match size */
  .substitutions-nav .subst-date{
    padding: .3rem .55rem;
    border-radius:8px;
    font-size:0.88rem;
  }

  /* smaller square buttons (prev/next) in the header */
  .section-header .tt-date-btn{
    width:25px;
    height:25px;
    font-size:0.9rem;
    margin: .18rem .3rem 0 0;
    border-radius:6px;
  }
  .section-header .tt-date-btn::before{ top:50%; left:50%; }

  /* reduce icon sizes inside the button if present */
  .section-header .tt-date-btn svg,
  .section-header .tt-date-btn i{
    width:13px;
    height:16px;
    font-size:16px;
  }

  /* make the per-day date labels smaller to avoid wrapping */
  .day-date,
  .section-header .day-date,
  .section-header .tt-date-pill .day-date{
    font-size:12px;
    line-height:1;
  }

  /* ensure the pill doesn't force wide layout on very small screens */
  .section-header .tt-date-pill,
  .section-header .tt-date-btn{ min-width: auto; }

  /* slightly reduce gap in section headers on very narrow screens */
  .section-header{ gap: .4rem; }
}

/* Scroll controls for school iframe */
.iframe-scroll-controls {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 10;
}

/* Hide container scrollbar but keep scroll functionality */
#school-iframe-scroll-container {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

#school-iframe-scroll-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}

.iframe-scroll-btn {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.iframe-scroll-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.iframe-scroll-btn:hover {
  transform: scale(1.08) translateY(-2px);
  background: linear-gradient(135deg, var(--primary-orange), #ffb347);
}

.iframe-scroll-btn:hover::before {
  width: 100%;
  height: 100%;
}

.iframe-scroll-btn:active {
  transform: scale(0.96);
}

.iframe-scroll-btn i {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Hide scroll buttons on mobile */
@media (max-width: 1039px) {
  .iframe-scroll-controls {
    display: none;
  }
}

/* Abecední index pro učitele v suplování */
.teacher-letter-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.25rem 0 0.6rem;
}

.teacher-letter-index .letter-index-btn {
  /* Match appearance of .tch-abbrev-btn used in substitutions */
  font: inherit;
  margin: 0;
  cursor: pointer;
  color: white;
  font-weight: 600;
  position: relative;
  border-radius: 6px;
  background: transparent;
  padding: 0.5rem 0.5rem;
  backdrop-filter: none;
  box-shadow: none;
  border-color: var(--primary-orange);
  background: linear-gradient(135deg, var(--primary-orange) 0%, var(--light-orange) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  border-radius: 6px;
}

.teacher-letter-index .letter-index-btn:hover,
.teacher-letter-index .letter-index-btn:focus {
  background: linear-gradient(135deg, var(--primary-orange) 0%, var(--light-orange) 100%);
  outline: none;
}

.teacher-letter-index .letter-index-btn:active { transform: translateY(0); }

/* Override: center the index and make buttons larger and more tappable */
.teacher-letter-index {
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0.35rem 0 0.8rem !important;
}

.teacher-letter-index .letter-index-btn {
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.5rem !important;
  font-size: 1rem !important;
  min-width: 40px !important;
  transition: transform 140ms var(--ease-standard) !important;
}

@media (max-width: 1039px) {
  /* Slightly smaller buttons on mobile for better fit */
  .teacher-letter-index { gap: 0.35rem !important; margin: 0.22rem 0 0.5rem !important; }
  .teacher-letter-index .letter-index-btn { font-size: 0.9rem !important; padding: 0.28rem 0.62rem !important; min-width: 32px !important; }
}

/* === SEASONAL: VALENTINE'S DAY THEME === */
body.theme-valentine {
  --primary-blue: #e91e63;
  --light-blue: #c2185b;
  --primary-orange: #f06292;
  --light-orange: #ad1457;
  --cls-ab: #ec407a;
  --cls-cd: #f48fb1;
  --cls-e: #880e4f;
  --tri-gradient-h: linear-gradient(90deg, rgba(236,64,122,0.85) 0%, rgba(252,228,236,0.85) 45%, rgb(233,30,99) 100%) !important;
}

/* Valentine header accent */
body.theme-valentine .section-header h2::after,
body.theme-valentine .section-header h3::after {
  background: linear-gradient(90deg, #e91e63, #f06292, #e91e63) !important;
}

/* Valentine sidebar accent */
body.theme-valentine .sidebar {
  border-right-color: rgba(233,30,99,0.3);
}

body.theme-valentine .sidebar .sidebar-section:not(:last-child)::after {
  background: linear-gradient(90deg, transparent, rgba(233,30,99,0.3), transparent);
}

/* Valentine nav items */
body.theme-valentine .sidebar nav a.active,
body.theme-valentine .sidebar nav a:hover {
  background: linear-gradient(90deg, rgba(233,30,99,0.15) 0%, rgba(233,30,99,0.05) 100%);
  border-left-color: #e91e63;
}

body.theme-valentine .sidebar nav a.active i,
body.theme-valentine .sidebar nav a:hover i {
  color: #e91e63;
}

/* Valentine buttons */
body.theme-valentine .letter-index-btn {
  background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%) !important;
  border-color: #e91e63 !important;
}

body.theme-valentine .tch-abbrev-btn {
  background: linear-gradient(135deg, #f06292 0%, #e91e63 100%);
  border-color: #e91e63;
}

/* Valentine FAB button */
body.theme-valentine .fab-info-btn {
  background: linear-gradient(135deg, #e91e63, #f06292);
}

body.theme-valentine .fab-info-btn:hover {
  background: linear-gradient(135deg, #c2185b, #e91e63);
}

/* Valentine loading bar */
body.theme-valentine .loading-bar {
  background: linear-gradient(90deg, #e91e63, #f06292, #e91e63);
}

/* Valentine scrollbar */
body.theme-valentine ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #e91e63, #f06292);
}

/* Valentine modal accent */
body.theme-valentine .modal-content {
  border-top: 3px solid #e91e63;
}

/* Valentine toggle switch */
body.theme-valentine .toggle-switch input:checked + .slider {
  background: linear-gradient(135deg, #e91e63, #f06292);
}

/* Valentine background - content area */
body.theme-valentine .content-area {
  background: linear-gradient(135deg, rgba(233,30,99,0.45) 0%, rgba(240,98,146,0.40) 50%, rgba(252,228,236,0.50) 100%) !important;
}

/* Valentine popovers - top bar accent */
body.theme-valentine .tt-popover::before {
  background: linear-gradient(90deg, #e91e63 0%, #f48fb1 45%, #c2185b 100%) !important;
}

body.theme-valentine .canteen-meal-popover::before {
  background: linear-gradient(90deg, #e91e63 0%, #f48fb1 45%, #c2185b 100%) !important;
}

/* Valentine popover head gradient text */
body.theme-valentine .tt-pop-head {
  background: linear-gradient(90deg, #e91e63, #f06292) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Valentine cards/panels accent */
body.theme-valentine .hour-card {
  border-color: rgba(233,30,99,0.2);
}

body.theme-valentine .hour-now {
  border-bottom-color: #e91e63;
  background: linear-gradient(180deg, rgba(233,30,99,0.06), rgba(233,30,99,0.03));
}

body.theme-valentine .hour-now .hh-num {
  color: #e91e63;
}

/* Valentine primary gradient variable */
body.theme-valentine {
  --primary-gradient: linear-gradient(90deg, #e91e63, #f06292);
}

/* Valentine substitutions header */
body.theme-valentine #substitutions .section-header {
  background: linear-gradient(89deg, #f8bbd9 0%, #f48fb1 50%, #f06292 100%) !important;
}

/* === SEASONAL: ČARODĚJNICE (WITCHES' NIGHT) THEME === */
body.theme-caro {
  --primary-blue: #ff6f00;
  --light-blue: #e65100;
  --primary-orange: #ff3d00;
  --light-orange: #d84315;
  --cls-ab: #ff6f00;
  --cls-cd: #ffab00;
  --cls-e: #ff3d00;
  --tri-gradient-h: linear-gradient(90deg, rgba(255,111,0,0.85) 0%, rgba(255,171,0,0.85) 45%, rgb(255,61,0) 100%) !important;
  --primary-gradient: linear-gradient(90deg, #ff6f00, #ff3d00);
}

/* Čarodějnice background - fire glow effect */
body.theme-caro .content-area {
  background: linear-gradient(135deg, rgba(255,111,0,0.40) 0%, rgba(255,171,0,0.35) 50%, rgba(255,61,0,0.40) 100%) !important;
}

/* Čarodějnice header accent - flame gradient */
body.theme-caro .section-header h2::after,
body.theme-caro .section-header h3::after {
  background: linear-gradient(90deg, #ff6f00, #ffab00, #ff3d00) !important;
}

/* Čarodějnice sidebar accent */
body.theme-caro .sidebar {
  border-right-color: rgba(255,61,0,0.3);
}

body.theme-caro .sidebar .sidebar-section:not(:last-child)::after {
  background: linear-gradient(90deg, transparent, rgba(255,111,0,0.3), transparent);
}

/* Čarodějnice nav items */
body.theme-caro .sidebar nav a.active,
body.theme-caro .sidebar nav a:hover {
  background: linear-gradient(90deg, rgba(255,61,0,0.15) 0%, rgba(255,111,0,0.05) 100%);
  border-left-color: #ff3d00;
}

body.theme-caro .sidebar nav a.active i,
body.theme-caro .sidebar nav a:hover i {
  color: #ff6f00;
}

/* Čarodějnice buttons - fire effect */
body.theme-caro .letter-index-btn {
  background: linear-gradient(135deg, #ff6f00 0%, #e65100 100%) !important;
  border-color: #ff6f00 !important;
}

body.theme-caro .tch-abbrev-btn {
  background: linear-gradient(135deg, #ff3d00 0%, #d84315 100%) !important;
  border-color: #ff3d00;
}

/* Čarodějnice FAB button */
body.theme-caro .fab-info-btn {
  background: linear-gradient(135deg, #ff6f00, #ff3d00);
}

body.theme-caro .fab-info-btn:hover {
  background: linear-gradient(135deg, #e65100, #d84315);
}

/* Čarodějnice loading bar - flickering fire */
body.theme-caro .loading-bar {
  background: linear-gradient(90deg, #ff6f00, #ffab00, #ff3d00);
}

/* Čarodějnice scrollbar */
body.theme-caro ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff6f00, #ff3d00);
}

/* Čarodějnice modal accent */
body.theme-caro .modal-content {
  border-top: 3px solid #ff6f00;
}

/* Čarodějnice toggle switch */
body.theme-caro .toggle-switch input:checked + .slider {
  background: linear-gradient(135deg, #ff6f00, #ff3d00);
}

/* Čarodějnice popovers */
body.theme-caro .tt-popover::before {
  background: linear-gradient(90deg, #ff6f00 0%, #ffab00 45%, #ff3d00 100%) !important;
}

body.theme-caro .canteen-meal-popover::before {
  background: linear-gradient(90deg, #ff6f00 0%, #ffab00 45%, #ff3d00 100%) !important;
}

/* Čarodějnice popover head */
body.theme-caro .tt-pop-head {
  background: linear-gradient(90deg, #ff6f00, #ff3d00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Čarodějnice hour cards */
body.theme-caro .hour-card {
  border-color: rgba(255,61,0,0.2);
}

body.theme-caro .hour-now {
  border-bottom-color: #ff6f00;
  background: linear-gradient(180deg, rgba(255,111,0,0.06), rgba(255,61,0,0.03));
}

body.theme-caro .hour-now .hh-num {
  color: #ff6f00;
}

/* Čarodějnice substitutions header */
body.theme-caro #substitutions .section-header {
  background: linear-gradient(89deg, #ffccbc 0%, #ffab91 50%, #ff8a65 100%) !important;
}

/* Čarodějnice fire sparks decoration on section headers */
body.theme-caro .section-header {
  position: relative;
  padding-bottom: 0;
}

body.theme-caro .section-header::after {
  content: '🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨ 🔥 ✨';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 8px;
  overflow: hidden;
  text-align: left;
  animation: fireSparks 1.8s infinite;
  white-space: nowrap;
  pointer-events: none;
}

@keyframes fireSparks {
  0%, 100% {
    opacity: 1;
    filter: brightness(1.3) saturate(1.4);
  }
  15% {
    opacity: 0.85;
    filter: brightness(1.1) saturate(1.2);
  }
  30% {
    opacity: 1;
    filter: brightness(1.5) saturate(1.6);
  }
  45% {
    opacity: 0.75;
    filter: brightness(0.9) saturate(1);
  }
  60% {
    opacity: 1;
    filter: brightness(1.4) saturate(1.5);
  }
  75% {
    opacity: 0.9;
    filter: brightness(1.2) saturate(1.3);
  }
}

/* Čarodějnice asset (bonfire gif) in sidebar */
body.theme-caro .christmas-tree-wrap {
  display: block;
  padding: 0.35rem 0;
  text-align: center;
}

body.theme-caro .christmas-tree-wrap .christmas-tree-gif {
  width: auto;
  max-width: min(200px, 100%);
  height: 100%;
  max-height: 100%;
  display: inline-block;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(255,111,0,0.3);
  transform-origin: center bottom;
  animation: fire-flicker 2s ease-in-out infinite;
}

@keyframes fire-flicker {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  25% { transform: translateY(-2px) scale(1.02); filter: brightness(1.1); }
  50% { transform: translateY(-3px) scale(1.01); filter: brightness(0.95); }
  75% { transform: translateY(-1px) scale(1.03); filter: brightness(1.15); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

/* Hide on very small screens to save space */
@media (max-width: 720px) {
  body.theme-caro .christmas-tree-wrap { display: none; }
}

/* Čarodějnice realistic fire effect above time-section */
body.theme-caro .sidebar .time-section {
  position: relative;
  overflow: visible;
  z-index: 1;
}

body.theme-caro .sidebar .time-section::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 50px;
  background: 
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,200,50,0.9) 0%, rgba(255,120,20,0.7) 30%, rgba(255,60,0,0.4) 60%, transparent 80%),
    radial-gradient(ellipse 40% 50% at 30% 100%, rgba(255,180,50,0.8) 0%, rgba(255,100,0,0.5) 40%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 70% 100%, rgba(255,180,50,0.8) 0%, rgba(255,100,0,0.5) 40%, transparent 70%),
    radial-gradient(ellipse 25% 60% at 20% 100%, rgba(255,220,100,0.7) 0%, rgba(255,150,0,0.4) 50%, transparent 80%),
    radial-gradient(ellipse 25% 60% at 80% 100%, rgba(255,220,100,0.7) 0%, rgba(255,150,0,0.4) 50%, transparent 80%);
  filter: blur(3px);
  animation: realisticFireMain 0.8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 10;
}

body.theme-caro .sidebar .time-section::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 70px;
  background: 
    radial-gradient(ellipse 30% 70% at 50% 100%, rgba(255,255,200,0.95) 0%, rgba(255,200,50,0.6) 25%, rgba(255,100,0,0.3) 50%, transparent 70%),
    radial-gradient(ellipse 20% 50% at 35% 100%, rgba(255,220,150,0.8) 0%, rgba(255,150,50,0.4) 40%, transparent 70%),
    radial-gradient(ellipse 20% 50% at 65% 100%, rgba(255,220,150,0.8) 0%, rgba(255,150,50,0.4) 40%, transparent 70%);
  filter: blur(4px);
  animation: realisticFireInner 0.6s ease-in-out infinite alternate-reverse;
  pointer-events: none;
  z-index: 11;
}

/* Fire flames - individual tongues of fire */
body.theme-caro .sidebar .time-section .hour-card:first-child::before {
  content: '';
  position: fixed;
  bottom: calc(100% + 25px);
  left: calc(50% - 8px);
  width: 16px;
  height: 35px;
  background: linear-gradient(to top, rgba(255,200,50,0.9) 0%, rgba(255,100,0,0.6) 50%, transparent 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  filter: blur(2px);
  animation: flameTongue1 0.4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 12;
}

@keyframes realisticFireMain {
  0% {
    opacity: 0.85;
    transform: translateX(-50%) scaleY(0.9) scaleX(1);
    filter: blur(3px) brightness(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1.1) scaleX(0.95);
    filter: blur(2px) brightness(1.15);
  }
  100% {
    opacity: 0.9;
    transform: translateX(-50%) scaleY(1) scaleX(1.05);
    filter: blur(4px) brightness(1.05);
  }
}

@keyframes realisticFireInner {
  0% {
    opacity: 0.9;
    transform: translateX(-50%) scaleY(1) scaleX(0.95);
    filter: blur(4px) brightness(1.1);
  }
  33% {
    opacity: 1;
    transform: translateX(-48%) scaleY(1.15) scaleX(1);
    filter: blur(3px) brightness(1.2);
  }
  66% {
    opacity: 0.95;
    transform: translateX(-52%) scaleY(1.05) scaleX(1.05);
    filter: blur(5px) brightness(1);
  }
  100% {
    opacity: 0.85;
    transform: translateX(-50%) scaleY(0.95) scaleX(0.9);
    filter: blur(4px) brightness(1.15);
  }
}

@keyframes flameTongue1 {
  0% {
    opacity: 0.7;
    transform: scaleY(0.8) scaleX(1) rotate(-3deg);
  }
  100% {
    opacity: 1;
    transform: scaleY(1.2) scaleX(0.85) rotate(3deg);
  }
}

/* Fire glow effect on time-section background */
body.theme-caro .sidebar .time-section {
  background: radial-gradient(ellipse 80% 30% at 50% 0%, rgba(255,100,0,0.15) 0%, transparent 70%);
}

/* Ember particles floating up */
body.theme-caro .sidebar .time-section .hour-card {
  position: relative;
}

body.theme-caro .sidebar .time-section .hour-card::after {
  content: '✦';
  position: absolute;
  top: -15px;
  left: 50%;
  font-size: 6px;
  color: #ff8800;
  opacity: 0;
  animation: emberFloat 3s ease-out infinite;
  animation-delay: calc(var(--ember-delay, 0) * 0.5s);
  pointer-events: none;
  text-shadow: 0 0 4px #ff6600, 0 0 8px #ff4400;
}

body.theme-caro .sidebar .time-section .hour-card:nth-child(1)::after { --ember-delay: 0; left: 30%; }
body.theme-caro .sidebar .time-section .hour-card:nth-child(2)::after { --ember-delay: 1; left: 70%; }
body.theme-caro .sidebar .time-section .hour-card:nth-child(3)::after { --ember-delay: 2; left: 45%; }
body.theme-caro .sidebar .time-section .hour-card:nth-child(4)::after { --ember-delay: 3; left: 60%; }
body.theme-caro .sidebar .time-section .hour-card:nth-child(5)::after { --ember-delay: 4; left: 25%; }
body.theme-caro .sidebar .time-section .hour-card:nth-child(6)::after { --ember-delay: 5; left: 80%; }

@keyframes emberFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  10% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.7;
    transform: translateY(-25px) scale(0.8) translateX(5px);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px) scale(0.3) translateX(-3px);
  }
}

/* Hide fire effect on very small screens */
@media (max-width: 720px) {
  body.theme-caro .sidebar .time-section::before,
  body.theme-caro .sidebar .time-section::after {
    display: none;
  }
}

/* === SEASONAL: CHRISTMAS THEME === */
body.theme-vanoce {
  --primary-blue: #c62828;
  --light-blue: #8e0000;
  --primary-orange: #2e7d32;
  --light-orange: #1b5e20;
  --cls-ab: #c62828;
  --cls-cd: #ffd54f;
  --cls-e: #2e7d32;
  --tri-gradient-h: linear-gradient(90deg, rgba(198,40,40,0.85) 0%, rgba(255,213,79,0.85) 45%, rgb(46,125,50) 100%) !important;
  --primary-gradient: linear-gradient(90deg, #c62828, #2e7d32);
}

/* Christmas background */
body.theme-vanoce .content-area {
  background: linear-gradient(135deg, rgba(198,40,40,0.35) 0%, rgba(255,213,79,0.30) 50%, rgba(46,125,50,0.35) 100%) !important;
}

/* Christmas header accent */
body.theme-vanoce .section-header h2::after,
body.theme-vanoce .section-header h3::after {
  background: linear-gradient(90deg, #c62828, #ffd54f, #2e7d32) !important;
}

/* Christmas sidebar accent */
body.theme-vanoce .sidebar {
  border-right-color: rgba(46,125,50,0.3);
}

body.theme-vanoce .sidebar .sidebar-section:not(:last-child)::after {
  background: linear-gradient(90deg, transparent, rgba(198,40,40,0.3), transparent);
}

/* Christmas nav items */
body.theme-vanoce .sidebar nav a.active,
body.theme-vanoce .sidebar nav a:hover {
  background: linear-gradient(90deg, rgba(46,125,50,0.15) 0%, rgba(198,40,40,0.05) 100%);
  border-left-color: #2e7d32;
}

body.theme-vanoce .sidebar nav a.active i,
body.theme-vanoce .sidebar nav a:hover i {
  color: #c62828;
}

/* Christmas buttons */
body.theme-vanoce .letter-index-btn {
  background: linear-gradient(135deg, #c62828 0%, #8e0000 100%) !important;
  border-color: #c62828 !important;
}

body.theme-vanoce .tch-abbrev-btn {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  border-color: #2e7d32;
}

/* Christmas FAB button */
body.theme-vanoce .fab-info-btn {
  background: linear-gradient(135deg, #c62828, #2e7d32);
}

body.theme-vanoce .fab-info-btn:hover {
  background: linear-gradient(135deg, #8e0000, #1b5e20);
}

/* Christmas loading bar */
body.theme-vanoce .loading-bar {
  background: linear-gradient(90deg, #c62828, #ffd54f, #2e7d32);
}

/* Christmas scrollbar */
body.theme-vanoce ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c62828, #2e7d32);
}

/* Christmas modal accent */
body.theme-vanoce .modal-content {
  border-top: 3px solid #c62828;
}

/* Christmas toggle switch */
body.theme-vanoce .toggle-switch input:checked + .slider {
  background: linear-gradient(135deg, #c62828, #2e7d32);
}

/* Christmas popovers */
body.theme-vanoce .tt-popover::before {
  background: linear-gradient(90deg, #c62828 0%, #ffd54f 45%, #2e7d32 100%) !important;
}

body.theme-vanoce .canteen-meal-popover::before {
  background: linear-gradient(90deg, #c62828 0%, #ffd54f 45%, #2e7d32 100%) !important;
}

/* Christmas popover head */
body.theme-vanoce .tt-pop-head {
  background: linear-gradient(90deg, #c62828, #2e7d32) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Christmas hour cards */
body.theme-vanoce .hour-card {
  border-color: rgba(46,125,50,0.2);
}

body.theme-vanoce .hour-now {
  border-bottom-color: #c62828;
  background: linear-gradient(180deg, rgba(198,40,40,0.06), rgba(46,125,50,0.03));
}

body.theme-vanoce .hour-now .hh-num {
  color: #c62828;
}

/* Christmas substitutions header */
body.theme-vanoce #substitutions .section-header {
  background: linear-gradient(89deg, #ef9a9a 0%, #fff9c4 50%, #a5d6a7 100%) !important;
}

/* Christmas lights decoration on section headers */
body.theme-vanoce .section-header {
  position: relative;
  /* avoid increasing header layout height so sticky table header stays visible */
  padding-bottom: 0;
}

body.theme-vanoce .section-header::after {
  content: '🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣 🔴 🟢 🔵 🟡 🟣';
  position: absolute;
  /* place lights slightly outside header so they don't affect its measured height */
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 8px;
  overflow: hidden;
  text-align: left;
  animation: christmasLightsBlink var(--animation-blink) infinite;
  white-space: nowrap;
  pointer-events: none;
}

@keyframes christmasLightsBlink {
  0%, 100% {
    opacity: 1;
    filter: brightness(1.2) saturate(1.3);
  }
  10% {
    opacity: 0.7;
    filter: brightness(0.8) saturate(1);
  }
  20% {
    opacity: 1;
    filter: brightness(1.4) saturate(1.4);
  }
  30% {
    opacity: 0.85;
    filter: brightness(1) saturate(1.1);
  }
  40% {
    opacity: 1;
    filter: brightness(1.3) saturate(1.3);
  }
  50% {
    opacity: 0.75;
    filter: brightness(0.9) saturate(1);
  }
  60% {
    opacity: 1;
    filter: brightness(1.5) saturate(1.5);
  }
  70% {
    opacity: 0.9;
    filter: brightness(1.1) saturate(1.2);
  }
  80% {
    opacity: 1;
    filter: brightness(1.2) saturate(1.3);
  }
  90% {
    opacity: 0.8;
    filter: brightness(0.95) saturate(1.1);
  }
}

/* Christmas tree gif in sidebar */

body.theme-vanoce .christmas-tree-wrap {
  display: block;
  padding: 0.35rem 0;
  text-align: center;
}


body.theme-vanoce .christmas-tree-wrap .christmas-tree-gif,
body.theme-svatek .christmas-tree-wrap .christmas-tree-gif {
  width: auto;
  max-width: min(200px, 100%);
  height: 100%;
  max-height: 100%;
  display: inline-block;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.14);
  transform-origin: center bottom;
  animation: tree-bob 3s ease-in-out infinite;
}

@keyframes tree-bob {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}


/* === SEASONAL: CZECH HOLIDAY THEME (theme-svatek) === */
body.theme-svatek {
  --primary-blue: #11457E;
  --light-blue: #0d3560;
  --primary-orange: #D7141A;
  --light-orange: #a80f14;
  --cls-ab: #D7141A;
  --cls-cd: #ffffff;
  --cls-e: #11457E;
  --tri-gradient-h: linear-gradient(90deg, rgba(255,255,255,0.85) 0%, rgba(215,20,26,0.85) 45%, rgb(17,69,126) 100%) !important;
  --primary-gradient: linear-gradient(90deg, #ffffff, #D7141A, #11457E);
}

/* Czech theme background */
body.theme-svatek .content-area {
  background: linear-gradient(135deg, rgba(255,255,255,0.50) 0%, rgba(215,20,26,0.30) 50%, rgba(17,69,126,0.35) 100%) !important;
}

/* Czech theme header accent */
body.theme-svatek .section-header h2::after,
body.theme-svatek .section-header h3::after {
  background: linear-gradient(90deg, #ffffff, #D7141A, #11457E) !important;
}

/* Czech theme sidebar accent */
body.theme-svatek .sidebar {
  border-right-color: rgba(17,69,126,0.3);
}

body.theme-svatek .sidebar .sidebar-section:not(:last-child)::after {
  background: linear-gradient(90deg, transparent, rgba(215,20,26,0.3), transparent);
}

/* Czech theme nav items */
body.theme-svatek .sidebar nav a.active,
body.theme-svatek .sidebar nav a:hover {
  background: linear-gradient(90deg, rgba(17,69,126,0.15) 0%, rgba(215,20,26,0.05) 100%);
  border-left-color: #11457E;
}

body.theme-svatek .sidebar nav a.active i,
body.theme-svatek .sidebar nav a:hover i {
  color: #D7141A;
}

/* Czech theme buttons */
body.theme-svatek .letter-index-btn {
  background: linear-gradient(135deg, #D7141A 0%, #a80f14 100%) !important;
  border-color: #D7141A !important;
}

body.theme-svatek .tch-abbrev-btn {
  background: linear-gradient(135deg, #11457E 0%, #0d3560 100%) !important;
  border-color: #11457E;
}

/* Czech theme FAB button */
body.theme-svatek .fab-info-btn {
  background: linear-gradient(135deg, #D7141A, #11457E);
}

body.theme-svatek .fab-info-btn:hover {
  background: linear-gradient(135deg, #a80f14, #0d3560);
}

/* Czech theme loading bar */
body.theme-svatek .loading-bar {
  background: linear-gradient(90deg, #ffffff, #D7141A, #11457E);
}

/* Czech theme scrollbar */
body.theme-svatek ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ffffff, #D7141A, #11457E);
}

/* Czech theme modal accent */
body.theme-svatek .modal-content {
  border-top: 3px solid #D7141A;
}

/* Czech theme toggle switch */
body.theme-svatek .toggle-switch input:checked + .slider {
  background: linear-gradient(135deg, #D7141A, #11457E);
}

/* Czech theme popovers */
body.theme-svatek .tt-popover::before,
body.theme-svatek .tt-popover::after {
  background: linear-gradient(90deg, #ffffff 0%, #D7141A 45%, #11457E 100%) !important;
}

body.theme-svatek .canteen-meal-popover::before,
body.theme-svatek .canteen-meal-popover::after {
  background: linear-gradient(90deg, #ffffff 0%, #D7141A 45%, #11457E 100%) !important;
}

/* Czech theme popover head */
body.theme-svatek .tt-pop-head {
  background: linear-gradient(90deg, #D7141A, #11457E) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Czech theme hour cards */
body.theme-svatek .hour-card {
  border-color: rgba(17,69,126,0.2);
}

body.theme-svatek .hour-now {
  border-bottom-color: #D7141A;
  background: linear-gradient(180deg, rgba(215,20,26,0.06), rgba(17,69,126,0.03));
}

body.theme-svatek .hour-now .hh-num {
  color: #D7141A;
}

/* Czech theme substitutions header */
body.theme-svatek #substitutions .section-header {
  background: linear-gradient(89deg, #ffffff 0%, #f5a5a8 50%, #a8c4e0 100%) !important;
}

/* Czech theme sidebar wrapper visibility */
body.theme-svatek .christmas-tree-wrap {
  display: block;
  padding: 0.35rem 0;
  text-align: center;
}


/* === Image copy/drag prevention (global) === */
/* Reduce ability to drag/copy images via UI; not foolproof (devtools can still access files) */
img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Prevent image selection cursors and hints */
img, img * {
  pointer-events: auto;
}

/* For theme-specific assets ensure no drag cursor */
.christmas-tree-gif, .christmas-tree-gif img {
  -webkit-user-drag: none;
}

/* Seasonal sidebar asset sizing: fill available space under menu */
.sidebar .christmas-tree-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 70px;
  padding: 0.35rem 0;
  text-align: center;
}
.sidebar .christmas-tree-wrap .christmas-tree-gif {
  height: 100%;
  max-height: 100%;
  width: auto;
  max-width: min(200px, 100%);
  object-fit: contain;
}