/**
 * Mobilní CSS pro base.html template
 * Kompletní přepracování layoutu pro mobilní zařízení
 */

/* Import Google Fonts - Poppins for mobile readability */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700&display=swap');

:root {
  /* Unified mobile padding according to mobile-base 
     DOPORUČENÉ HODNOTY:
       0.3rem  = ≈4.8px  (kompaktní)
       0.4rem  = ≈6.4px  (úzké - AKTUÁLNÍ)
       0.5rem  = ≈8px    (optimální)
       0.75rem = ≈12px   (komfortní)
       1rem    = ≈16px   (prostorné)
  */
  --mobile-horizontal-padding: 1.5rem;  /* výchozí komfortní okraje pro všechny mobilní layouty */
  /* Konsolidované horizontální odsazení pro všechny mobilní layouty */
  /* mobile-side-gap drží rezervu pro globální boční odsazení, které lze zvětšit bez úprav jednotlivých komponent */
  --mobile-side-gap: 0rem;

  /* Jemné globální odsazení obsahu pod fixním mobile headerem */
  --mobile-top-offset: 10px;
}

/* =================================================================
   METODIKA BODOVÁNÍ (ikonka ⚖️ u disciplín)
   ================================================================= */

.metodika-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.35rem;
  text-decoration: none;
  line-height: 1;
}

.metodika-icon:hover {
  text-decoration: none;
}

/* =================================================================
   MOBILNÍ REŽIM - Base Layout
   ================================================================= */

.mobile-base-mode {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif !important;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Pozadí podobně jako u desktop verze - s nízkou opacity */
.mobile-base-mode::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/static/mobilni_pozadi.png') center / cover no-repeat fixed;
  opacity: 0.2;
  z-index: -100;
  pointer-events: none;
}

/* =================================================================
   ℹ️ / 🖨️ inline ikonky (touch target min. 44px) – pouze mobil
   ================================================================= */

@media (max-width: 768px) {
  body.mobile-interface .table-info-inline,
  body.mobile-base-mode .table-info-inline,
  body.mobile-interface .table-print-inline,
  body.mobile-base-mode .table-print-inline {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-left: 10px;
    border-radius: 10px;
    font-size: 14px;
  }

  /* ℹ️: jen samotná emoji ikonka (bez viditelného wrapperu), ale zachovaný touch target 44px */
  body.mobile-interface .table-info-inline,
  body.mobile-base-mode .table-info-inline {
    position: relative;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }

  body.mobile-interface .table-info-inline::before,
  body.mobile-base-mode .table-info-inline::before {
    content: none;
  }

  body.mobile-interface .table-info-inline .table-info-icon,
  body.mobile-base-mode .table-info-inline .table-info-icon,
  body.mobile-interface .table-print-inline .table-print-icon,
  body.mobile-base-mode .table-print-inline .table-print-icon {
    font-size: 18px;
  }

  body.mobile-interface .table-info-inline .table-info-icon,
  body.mobile-base-mode .table-info-inline .table-info-icon {
    position: relative;
    z-index: 1;
  }
}

/* =================================================================
   SKRYTÍ DESKTOP ELEMENTŮ POUZE V AKTIVNÍM MOBILNÍM REŽIMU
   ================================================================= */

.mobile-base-mode .logo-home,
.mobile-base-mode .top-nav-container,
.mobile-base-mode .main-nav,
.mobile-base-mode .login-panel,
.mobile-base-mode .global-skolni-rok,
.mobile-base-mode .global-search,
.mobile-interface .logo-home,
.mobile-interface .top-nav-container,
.mobile-interface .main-nav,
.mobile-interface .login-panel,
.mobile-interface .global-skolni-rok,
.mobile-interface .global-search {
  display: none !important;
}

/* =================================================================
   MOBILNÍ HEADER S NAVIGACÍ
   ================================================================= */

.mobile-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #f57803 0%, #ff9533 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 1000;
  padding: 0.5rem;
  border-bottom: 3px solid #000;
  overflow: visible;
}

/* Zobrazit mobilní header v mobilním režimu */
.mobile-base-mode .mobile-header,
.mobile-interface .mobile-header {
  display: block;
}

.mobile-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  margin: 0 0rem;
  gap: 0.6rem; /* zvětšeno z 0.3rem na 0.6rem pro větší mezeru mezi ikonami */
}

.mobile-header-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.mobile-logo {
  height: 40px;
  width: auto;
  border: 2px solid #000;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  margin-left: 0; /* mezery řeší .mobile-header-left gap */
}

.mobile-app-title {
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  font-weight: bold;
  color: #000;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
  flex: 0 1 auto;
  text-align: center;
  margin: 0;
  white-space: nowrap;
  padding: 0 0.2rem; /* zmenšeno z 0.4rem */
}

/* Badge školy přímo v horní liště (nahrazuje textový titul) */
.mobile-header-school-badge {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-header-school-badge .mobile-school-name-badge {
  width: min(32vw, 150px);
  min-width: 0;
  height: 40px;
}

.mobile-header-school-badge .mobile-school-text {
  font-size: 0.56rem;
}

.mobile-menu-toggle {
  background: #000;
  color: #fff;
  border: none;
  padding: 0.5rem;
  border-radius: 0.3rem;
  font-size: 1.2rem;
  cursor: pointer;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-toggle:active {
  transform: scale(0.95);
  background: #333;
}

/* Kompaktní školní rok v headeru */
.mobile-header-year {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.55);
  border: 2px solid #000;
  padding: 2px 6px;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  max-width: 50%; /* zvětšeno z 38% */
  min-width: 110px; /* zajistí minimální šířku */
  margin-right: 0; /* pravý okraj řeší padding headeru (stejně jako vlevo) */
  flex-shrink: 0; /* zabráníme smrštění */
  margin-left: 0;
}

.mobile-header-year-emoji {
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
}

.mobile-header-year-select {
  background: transparent;
  border: none;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.95rem; /* zmenšeno z 1.35rem pro lepší vejití textu */
  padding: 2px 4px;
  outline: none;
  cursor: pointer;
  max-width: 100%;
  min-width: 80px; /* zajistí minimální šířku pro text */
}

.mobile-header-year-select:focus {
  outline: 2px dashed #000;
  outline-offset: 2px;
}

/* "Výstupek" se školou pod headerem (desktop-like badge) */
.mobile-header-school-protrusion {
  position: absolute;
  right: 8px;
  top: 100%;
  z-index: 1001;
  pointer-events: auto;
}

/* Pokud je výstupek zarovnán pod select školního roku (nastavuje JS), držíme šířku 1:1 */
.mobile-header-school-protrusion .mobile-school-name-badge {
  width: 100%;
  min-width: 0;
}

.mobile-school-name-badge {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: min(50vw, 220px);
  min-width: 160px;
  height: 40px;
  gap: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid #02140a;
}

.mobile-school-icon {
  background: linear-gradient(135deg, #239b4f 0%, #21c429 100%);
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 2px solid #02140a;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
}

.mobile-school-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-school-text {
  background: rgba(18, 20, 22, 0.95);
  color: #ffffff;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-weight: 800;
  font-size: 0.61rem;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0 6px;
  flex: 1;
  line-height: 1.15;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: normal;
  hyphens: auto;
  word-break: break-word;
}

/* Posuň obsah/flashy níž, aby badge nepřekrýval stránku */
body.mobile-base-mode.mobile-has-school-badge .mobile-content-wrapper {
  margin-top: calc(118px + var(--mobile-top-offset));
  min-height: calc(100vh - (118px + var(--mobile-top-offset)));
}

body.mobile-base-mode.mobile-has-school-badge .flash-messages {
  top: calc(118px + var(--mobile-top-offset));
}

/* Ultra malé displeje - zmenšíme šířku a font */
@media screen and (max-width: 380px) {
  .mobile-header-year { max-width: 52%; padding: 2px 4px; min-width: 100px; }
  .mobile-header-year-select { font-size: 0.85rem; }
  .mobile-school-name-badge { width: min(56vw, 210px); min-width: 140px; height: 38px; }
  .mobile-school-icon { width: 38px; }
  .mobile-school-text { font-size: 0.59rem; padding: 0 5px; }
  .mobile-app-title { margin: 0; padding: 0 0.2rem; }
  .mobile-header-content { margin: 0 0.2rem; gap: 0.2rem; }
}

/* =================================================================
   MOBILNÍ SIDE MENU
   ================================================================= */

.mobile-side-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 65%;
  max-width: 250px;
  height: auto;
  max-height: 100vh;
  background: linear-gradient(180deg, #fff 0%, rgb(197,186,164) 100%);
  box-shadow: 2px 0 10px rgba(0,0,0,0.3);
  z-index: 1001;
  transition: left 0.3s ease;
  border-right: 3px solid #000;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  border-radius: 0 1rem 1rem 0;
  overflow-y: auto;
}

/* Zobrazit mobilní side menu v mobilním režimu */
.mobile-base-mode .mobile-side-menu,
.mobile-interface .mobile-side-menu { display: block; }

.mobile-side-menu.open { left: 0; }

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* Zobrazit overlay v mobilním režimu */
.mobile-base-mode .mobile-menu-overlay,
.mobile-interface .mobile-menu-overlay { display: block; }

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-header {
  background: linear-gradient(135deg, #f57803 0%, #ff9533 100%);
  padding: 0.2rem;
  border-bottom: 1px solid #000;
  text-align: center;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 1rem 0 0;
}

.mobile-menu-close { display: none !important; }

.mobile-menu-title {
  font-size: 1.5rem !important; /* Zvětšeno z 1.5rem */
  font-weight: bold;
  color: #000;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
  margin: 0.7rem;
}

/* =================================================================
   MOBILNÍ NAVIGAČNÍ MENU
   ================================================================= */

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 1rem; /* míň místa nahoře, aby zmizel prázdný prostor */
}

.mobile-nav-item { margin: 0; border-bottom: 1px solid rgba(0,0,0,0.1); }

.mobile-nav-link {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  color: #000;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: bold;
  transition: all 0.2s ease;
  border-left: 4px solid transparent;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
  background: rgba(245,120,3,0.1);
  border-left-color: #f57803;
  transform: translateX(5px);
}

.mobile-nav-icon { font-size: 1.3rem; margin-right: 1rem; width: 30px; text-align: center; }
.mobile-nav-text { flex: 1; }

/* =================================================================
   UŽIVATELSKÉ INFORMACE V MENU
   ================================================================= */

.mobile-user-info {
  background: rgba(245,120,3,0.1);
  padding: 1rem 1.5rem;
  border-top: 3px solid #000;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}

.mobile-user-role { display: flex; align-items: center; margin-bottom: 0.5rem; }
.mobile-user-role-icon { font-size: 1.5rem; margin-right: 0.5rem; }
.mobile-user-role-text { font-weight: bold; font-size: 1.1rem; }

.mobile-logout-btn {
  width: 100%;
  background: #dc3545;
  color: #fff;
  border: 2px solid #000;
  padding: 0.8rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: all 0.2s ease;
}

.mobile-logout-btn:active { transform: scale(0.98); background: #c82333; }

/* =================================================================
   ŠKOLNÍ ROK SELECTOR V MENU
   ================================================================= */

.mobile-skolni-rok {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.5);
}

.mobile-skolni-rok-label { font-weight: bold; margin-bottom: 0.5rem; display: block; color: #000; }

.mobile-skolni-rok-select {
  width: 100%;
  padding: 0.8rem;
  border: 2px solid #000;
  border-radius: 0.5rem;
  background: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: bold;
}

/* =================================================================
   MOBILNÍ VYHLEDÁVÁNÍ
   ================================================================= */

.mobile-search-section {
  padding: 0.75rem 1.5rem 0.5rem; /* zmenšeno dole */
  background: rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.mobile-search-form { display: flex; gap: 0.5rem; align-items: stretch; }

.mobile-search-input {
  flex: 1;
  padding: 1rem;
  border: 2px solid #000;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  background: #fff;
}

.mobile-search-btn {
  background: linear-gradient(145deg, #dcdcdc, #f1f1f1); /* světle šedé jako info boxy */
  color: #000;
  border: 2px solid #000;
  padding: 0 var(--mobile-horizontal-padding); /* bez pevné výšky, přizpůsobí se inputu */
  border-radius: 0.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Zmenšení výšky tlačítka cca o 30 % oproti původnímu natažení */
  align-self: center; /* zabrání natažení do výšky inputu */
  height: 3.5rem; /* přibližně o 30 % nižší vizuální výška */
  line-height: 1; /* jistota, že obsah nebude tlačítko zbytečně zvětšovat */
}

.mobile-search-btn:active { transform: scale(0.96); background: linear-gradient(145deg, #cfcfcf, #e9e9e9); }

/* Specifické úpravy pro vyhledávání v bočním mobilním menu
   – zarovnání na střed a odstranění oranžového fokus efektu z jiných CSS */
.mobile-side-menu .mobile-search-form { align-items: center; }
.mobile-side-menu .mobile-search-input {
  margin-top: 15px !important; /* výraznější optické dorovnání */
  height: 3.5rem !important;  /* shodná výška jako .mobile-search-btn */
  box-sizing: border-box;      /* započítá padding a border do výšky */
  padding: 0 var(--mobile-horizontal-padding) !important;  /* vertikální padding na 0 pro perfektní výšku */
}
.mobile-side-menu .mobile-search-input:focus,
.mobile-side-menu .mobile-search-input:focus-visible {
  outline: none;
  box-shadow: none !important; /* potlačí box-shadow z jiných stylů */
  border-color: #000;          /* ponechá konzistentní černý rámeček */
}

/* =================================================================
   MOBILNÍ HLAVNÍ OBSAH
   ================================================================= */

/* TISK je určený pouze pro desktop – na mobilech úplně skrýt tiskové ikonky/tlačítka u tabulek */
body.mobile-interface .table-print-inline,
body.mobile-base-mode .table-print-inline,
body.mobile-student-mode .table-print-inline,
body.mobile-links-mode .table-print-inline {
  display: none !important;
}

.mobile-content-wrapper {
  margin-top: calc(70px + var(--mobile-top-offset));
  padding: 1rem 0;
  min-height: calc(100vh - (70px + var(--mobile-top-offset)));
}

.mobile-page-container {
  max-width: 100%;
  margin: 0 var(--mobile-horizontal-padding);
  background: transparent; /* removed white box */
  border-radius: 1rem;
  border: none; /* removed black border */
  padding: 1.5rem 0;
  box-shadow: none; /* removed box shadow */
}

/* =================================================================
   MOBILNÍ FLASH ZPRÁVY
   ================================================================= */

/*
  DŮLEŽITÉ: globální flash.css používá `left: 50%` + `transform: translateX(-50%)`.
  Na mobilu ale některé layouty nastavovaly `left/right` bez resetu transformu,
  což vedlo k posunu hlášek mimo střed. Tady explicitně držíme centrování.
*/
.mobile-base-mode .flash-messages {
  position: fixed;
  top: calc(70px + var(--mobile-top-offset));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: calc(100% - (2 * var(--mobile-horizontal-padding)));
  box-sizing: border-box;
  z-index: 999;
  margin: 0;
}

.mobile-base-mode .flash-message {
  background: #fff;
  border: 2px solid #000;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.mobile-base-mode .flash-message.success { background: #d4edda; border-color: #28a745; color: #155724; }
.mobile-base-mode .flash-message.error   { background: #f8d7da; border-color: #dc3545; color: #721c24; }
.mobile-base-mode .flash-message.warning { background: #fff3cd; border-color: #ffc107; color: #856404; }

/* =================================================================
   RESPONZIVNÍ BREAKPOINTY
   ================================================================= */

/* Malé mobily (320px - 480px) */
@media screen and (max-width: 480px) {
  .mobile-app-title { font-size: 1.5rem; margin: 0 var(--mobile-horizontal-padding); }
  .mobile-side-menu { width: 70%; max-width: 240px; }
  .mobile-content-wrapper { padding: 0.5rem 0; }
  .mobile-page-container { padding: 1rem 0; border-radius: 0.5rem; }
}

/* Větší mobily (481px - 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .mobile-app-title { font-size: 1.6rem; }
  .mobile-side-menu { width: 60%; max-width: 260px; }
}

/* Tablety na výšku (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .mobile-side-menu { width: 50%; max-width: 300px; }
  .mobile-content-wrapper { padding: 2rem 0; }
}

/* =================================================================
   ANIMACE A PŘECHODY
   ================================================================= */

@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideInLeft  { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.mobile-header { animation: slideInRight 0.3s ease; }
.mobile-side-menu.open { animation: slideInLeft 0.3s ease; }

/* =================================================================
   TOUCH OPTIMALIZACE
   ================================================================= */

.mobile-nav-link,
.mobile-menu-toggle,
.mobile-menu-close,
.mobile-search-btn,
.mobile-logout-btn {
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* =================================================================
   DARK MODE PODPORA (volitelné)
   ================================================================= */

@media (prefers-color-scheme: dark) {
  .mobile-base-mode { background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%); }
  .mobile-page-container { background: transparent; color: inherit; }
  .mobile-side-menu { background: linear-gradient(180deg, #3c3c3c 0%, #2c2c2c 100%); color: #fff; }
  .mobile-nav-link { color: #fff; }
}

/* =================================================================
   ULTIMÁTNÍ PŘEPSÁNÍ VŠECH FONTŮ PRO MOBILNÍ ZAŘÍZENÍ
   ================================================================= */

body.mobile-interface,
body.mobile-base-mode,
body.mobile-student-mode,
html.mobile-interface,
html.mobile-base-mode,
html.mobile-student-mode {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-style: normal !important;
}

body.mobile-interface *,
body.mobile-base-mode *,
body.mobile-student-mode *,
html.mobile-interface *,
html.mobile-base-mode *,
html.mobile-student-mode *,
.mobile-base-mode *,
.mobile-interface *,
.mobile-student-mode *,
body.mobile-interface .modal *,
body.mobile-base-mode .modal *,
body.mobile-student-mode .modal *,
body.mobile-interface #userManagementModal *,
body.mobile-base-mode #userManagementModal *,
body.mobile-student-mode #userManagementModal *,
body.mobile-interface .tab-content *,
body.mobile-base-mode .tab-content *,
body.mobile-student-mode .tab-content *,
body.mobile-interface .tab-pane *,
body.mobile-base-mode .tab-pane *,
body.mobile-student-mode .tab-pane *,
body.mobile-interface .form-control *,
body.mobile-base-mode .form-control *,
body.mobile-student-mode .form-control *,
body.mobile-interface .btn *,
body.mobile-base-mode .btn *,
body.mobile-student-mode .btn *,
body.mobile-interface .card *,
body.mobile-base-mode .card *,
body.mobile-student-mode .card *,
body.mobile-interface .card-body *,
body.mobile-base-mode .card-body *,
body.mobile-student-mode .card-body *,
body.mobile-interface .card-header *,
body.mobile-base-mode .card-header *,
body.mobile-student-mode .card-header *,
body.mobile-interface .list-group *,
body.mobile-base-mode .list-group *,
body.mobile-student-mode .list-group *,
body.mobile-interface .list-group-item *,
body.mobile-base-mode .list-group-item *,
body.mobile-student-mode .list-group-item *,
body.mobile-interface .badge *,
body.mobile-base-mode .badge *,
body.mobile-student-mode .badge *,
body.mobile-interface .alert *,
body.mobile-base-mode .alert *,
body.mobile-student-mode .alert *,
body.mobile-interface .table *,
body.mobile-base-mode .table *,
body.mobile-student-mode .table *,
body.mobile-interface input *,
body.mobile-base-mode input *,
body.mobile-student-mode input *,
body.mobile-interface select *,
body.mobile-base-mode select *,
body.mobile-student-mode select *,
body.mobile-interface textarea *,
body.mobile-base-mode textarea *,
body.mobile-student-mode textarea *,
body.mobile-interface button *,
body.mobile-base-mode button *,
body.mobile-student-mode button *,
body.mobile-interface label *,
body.mobile-base-mode label *,
body.mobile-student-mode label *,
body.mobile-interface h1 *,
body.mobile-base-mode h1 *,
body.mobile-student-mode h1 *,
body.mobile-interface h2 *,
body.mobile-base-mode h2 *,
body.mobile-student-mode h2 *,
body.mobile-interface h3 *,
body.mobile-base-mode h3 *,
body.mobile-student-mode h3 *,
body.mobile-interface h4 *,
body.mobile-base-mode h4 *,
body.mobile-student-mode h4 *,
body.mobile-interface h5 *,
body.mobile-base-mode h5 *,
body.mobile-student-mode h5 *,
body.mobile-interface h6 *,
body.mobile-base-mode h6 *,
body.mobile-student-mode h6 *,
body.mobile-interface p *,
body.mobile-base-mode p *,
body.mobile-student-mode p *,
body.mobile-interface span *,
body.mobile-base-mode span *,
body.mobile-student-mode span *,
body.mobile-interface div *,
body.mobile-base-mode div *,
body.mobile-student-mode div *,
body.mobile-interface a *,
body.mobile-base-mode a *,
body.mobile-student-mode a *,
body.mobile-interface li *,
body.mobile-base-mode li *,
body.mobile-student-mode li *,
body.mobile-interface ul *,
body.mobile-base-mode ul *,
body.mobile-student-mode ul *,
body.mobile-interface ol *,
body.mobile-base-mode ol *,
body.mobile-student-mode ol * {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-style: normal !important;
}

/* =================================================================
   KOMPAKTNÍ ŠKOLNÍ ROK – GLOBAL (mobilní režim)
   ================================================================= */
@media screen and (max-width: 820px) {
  body.mobile-interface select#skolni-rok,
  body.mobile-base-mode select#skolni-rok,
  body.mobile-interface .mobile-header-year-select,
  body.mobile-base-mode .mobile-header-year-select,
  body.mobile-interface .mobile-skolni-rok-select,
  body.mobile-base-mode .mobile-skolni-rok-select {
    font-size: clamp(.61rem, 2.1vw, .74rem) !important;
    padding: .15rem .35rem !important;
    min-width: 60px !important;
    width: auto !important;
    line-height: 1.05 !important;
    border-width: 1px !important;
  }

  body.mobile-interface label[for="skolni-rok"],
  body.mobile-base-mode label[for="skolni-rok"] {
    font-size: clamp(.5rem, 2.25vw, .6rem) !important;
    margin-bottom: .2rem !important;
  }

  body.mobile-interface .filter-item select#skolni-rok,
  body.mobile-base-mode .filter-item select#skolni-rok { display: inline-block; }
}

/* Ultra kompaktní varianta */
@media screen and (max-width: 820px) {
  body.mobile-interface .year-ultra-wrapper,
  body.mobile-base-mode .year-ultra-wrapper { position: relative; display: inline-flex; align-items: flex-start; max-width: 120px; }
  body.mobile-interface .year-ultra,
  body.mobile-base-mode .year-ultra {
    font-size: clamp(.65rem, 2vw, .78rem) !important;
    padding: .14rem .35rem .16rem .35rem !important;
    line-height: 1.05 !important;
    border-width: 1px !important;
    max-width: 118px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    transform: scale(0.83);
    transform-origin: left top;
    margin-top: -1px;
  }
  body.mobile-interface .year-ultra option,
  body.mobile-base-mode .year-ultra option { font-size: clamp(.55rem, 2vw, .6rem) !important; }
  body.mobile-interface .filter-item.year-ultra-wrapper,
  body.mobile-base-mode .filter-item.year-ultra-wrapper { flex: 0 0 auto !important; }
}

/* =================================================================
   GLOBÁLNÍ H1 STYLY PRO VŠECHNY MOBILNÍ STRÁNKY
   ================================================================= */

@media screen and (max-width: 768px) {
  /*
    Base (mobile-base-mode): stránka má fixní .mobile-header a obsah je odsazen přes .mobile-content-wrapper.
    H1 proto NESMÍ mít vlastní velký padding-top (jinak se posune příliš dolů).
    Zároveň potřebujeme přebít desktop typografii (typography.css), kde je H1 absolutně pozicované.
  */
  body.mobile-base-mode h1 {
    color: #000 !important;
    font-weight: bold !important;
    font-style: italic !important;
    font-size: clamp(2.4rem, 5.2vw, 2.7rem) !important;
    line-height: 1.25 !important;
    text-align: center !important;
    font-family: "Poppins", sans-serif !important;
    text-shadow: 0.3vw 0.3vw 0.6vw rgba(0, 0, 0, 0.4) !important;

    /* reset desktop absolute positioning */
    position: relative !important;
    left: auto !important;
    top: auto !important;
    float: none !important;

     /* spacing: .mobile-content-wrapper řeší odsazení POD headerem,
       ale H1 musí mít viditelný margin-top jako jiné mobilní stránky */
     margin: clamp(16px, 4.2vw, 28px) var(--mobile-horizontal-padding) 0.2rem !important;
     padding: 0 !important;

    display: block !important;
    width: auto !important;
    z-index: 10 !important;

    word-wrap: break-word;
    hyphens: auto;
  }

  /* Pomocná třída pro nadpisy, které se NESMÍ zalomit (např. „Žebříčky a statistiky“) */
  body.mobile-base-mode h1.mobile-h1-nowrap {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
  }

  body.mobile-interface h1,
  .mobile-interface h1,
  body.mobile-student-mode h1 {
    color: #000 !important;
    font-weight: bold !important;
    font-style: italic !important;
    font-size: clamp(2.4rem, 5.2vw, 2.7rem) !important;
    margin: 1vw var(--mobile-horizontal-padding) 0 !important;
    padding: 19.5vw var(--mobile-horizontal-padding) 3vw !important;
    line-height: 1.25 !important;
    text-align: center !important;
    font-family: "Poppins", sans-serif !important;
    text-shadow: 0.3vw 0.3vw 0.6vw rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
    z-index: 10 !important;
    display: block !important;
    width: auto !important;
    word-wrap: break-word;
    hyphens: auto;
  }

  /*
    Sjednocení umístění hlavních nadpisů napříč mobilními stránkami.
    Některé mobilní JS (např. seznam žáků) přidávají .mobile-interface nad existující .mobile-base-mode,
    což dříve vypnulo tento reset a výsledkem byl nadpis posunutý příliš dolů (dvojí odsazení).
    Reset proto aplikujeme pro všechny .mobile-interface stránky, bez ohledu na přítomnost .mobile-base-mode.
  */
  body.mobile-interface .mobile-content-wrapper { margin-top: 0 !important; padding-top: 0 !important; }
  body.mobile-interface .mobile-page-container { padding-top: 0 !important; }
  body.mobile-interface h1 + * { margin-top: 0 !important; }
  
  /* =================================================================
     FILE INPUT - Česká lokalizace s custom wrapperem
     ================================================================= */
  
  /* Wrapper pro custom file input */
  body.mobile-interface .custom-file-input-wrapper-cz,
  body.mobile-base-mode .custom-file-input-wrapper-cz {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px !important;
    border: 2px solid #ccc !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }
  
  /* Tlačítko "Vyberte soubor" */
  body.mobile-interface .custom-file-button-cz,
  body.mobile-base-mode .custom-file-button-cz {
    padding: 8px 16px !important;
    background: linear-gradient(90deg, #555 0%, #777 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  
  body.mobile-interface .custom-file-button-cz:hover,
  body.mobile-base-mode .custom-file-button-cz:hover {
    background: linear-gradient(90deg, #333 0%, #555 100%) !important;
  }
  
  body.mobile-interface .custom-file-button-cz:active,
  body.mobile-base-mode .custom-file-button-cz:active {
    transform: scale(0.98) !important;
  }
  
  /* Label "Žádný soubor nevybrán" / název souboru */
  body.mobile-interface .custom-file-label-cz,
  body.mobile-base-mode .custom-file-label-cz {
    flex: 1 !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    color: #666 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  body.mobile-interface .custom-file-label-cz.has-file,
  body.mobile-base-mode .custom-file-label-cz.has-file {
    color: #000 !important;
    font-weight: 500 !important;
  }
  
  /* Původní file input pro mobilní (fallback pro nativní zobrazení) */
  body.mobile-interface input[type="file"],
  body.mobile-base-mode input[type="file"],
  body.mobile-interface .upload-file-input,
  body.mobile-base-mode .upload-file-input {
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
  }
  
  /* Tlačítko "Choose File" - fallback */
  body.mobile-interface input[type="file"]::file-selector-button,
  body.mobile-base-mode input[type="file"]::file-selector-button,
  body.mobile-interface .upload-file-input::file-selector-button,
  body.mobile-base-mode .upload-file-input::file-selector-button,
  body.mobile-interface input[type="file"]::-webkit-file-upload-button,
  body.mobile-base-mode input[type="file"]::-webkit-file-upload-button,
  body.mobile-interface .upload-file-input::-webkit-file-upload-button,
  body.mobile-base-mode .upload-file-input::-webkit-file-upload-button {
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  
  /* Tlačítko "Importovat žáky" - zvětšení písma a border-radius */
  body.mobile-interface .modal .submit-btn,
  body.mobile-base-mode .modal .submit-btn,
  body.mobile-interface #importButton,
  body.mobile-base-mode #importButton {
    font-size: 19px !important;
    font-family: "Poppins", sans-serif !important;
    border-radius: 12px !important;
  }
}