/* 

// Created :: 2025-08-30
// Updated :: 2025-08-30

// 

*/

/* BREAKPOINTS MENU */

@media (max-width: 960px) {
  #menu { display: none; } 
  .nav_toggle { display: inline-flex; align-items: center; justify-content: center; }
  
  /* ZÁHLAVÍ - MOBIL */
  #zahlavi { height: auto; min-height: 60px; }
  #zahlavi .in { 
    padding-left: 10px; 
    padding-right: 10px; 
    gap: 10px; 
    flex-wrap: wrap; /* Umožní zalomení na více řádků */
  }
  #zahlavi .logo img { padding-top: 5px; height: 40px; } /* Menší logo */
  
  /* Search wrapper na celou šířku pod logem a menu */
  #zahlavi .search_wrapper { 
    flex: 1 1 100%; /* Zabere celou šířku */
    order: 3; /* Přesune search box pod logo a burger */
    max-width: 100%; 
    margin: 0;
  }
  
  #zahlavi nav { 
    margin-left: auto; /* Burger vpravo */
  }
  
  .search_box { 
    padding: 8px; 
    gap: 8px; 
  }
  
  /* HP SPZ */
  .hp_container { max-width: 90%; margin-left: auto; margin-right: auto; }
  .hp_spz_list { gap: 10px; max-width: 95%; margin-left: auto; margin-right: auto; }
  .hp_spz_list .spz_item { padding: 0px 0px; }
  
  /* Patička */

  #paticka { flex-direction: column; gap: 30px; padding: 30px 0; }
  #paticka .column, #paticka .column_popisek { flex: 1; width: 100%; }

  body#hlavnistrana footer { display: none; }
  #paticka_hp { gap: 5px 10px; padding: 20px 10px; }
  #paticka_hp span.break { 
    display: block;
    flex-basis: 100%; 
    height: 0;
    margin: 0;
  }
}

@media (min-width: 961px) {
  .nav_toggle { display: none; }
  #menu { display: block; }
}

/* OSTATNI  */

@media (max-width: 1024px) {
  /* úpravy pro tablety a mobily */
}

@media (max-width: 768px) {
  /* úpravy pro mobily */
}




@media (max-width: 768px) {
    .spz-sledovani-box {flex-direction: column; align-items: stretch; gap: 10px;}
    .btn-spz-sledovani, .btn-spz-status {max-width: 100%; min-width: 0;}
    .spz-info-link, .spz-zrusit-link {text-align: center;}
    .spz-tooltip {max-width: 90%; padding: 16px 20px;}
}


/* ========================================
   DARK MODE
   ======================================== */

@media (prefers-color-scheme: dark) {
    .x_btn-spz-sledovani {background: #0056b3;}
    .x_btn-spz-sledovani:hover {background: #004085;}
    .x_btn-spz-status {background: #1e4620; color: #90ee90; border-color: #2d6a2f;}
    .x_spz-tooltip {background: #2a2a2a; color: #e0e0e0; border-color: #444;}
    .x_spz-login-msg {background: #3a3000; border-left-color: #ffc107; color: #ffc107;}
}



/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .spz-hodnoceni-section__stats { flex-direction: column; gap: 20px; }
    .spz-hodnoceni-section__stars { font-size: 36px; }
    .spz-modal__content { padding: 20px; width: 95%; }
    .spz-modal__buttons { flex-direction: column-reverse; }
    .spz-modal__btn-primary, .spz-modal__btn-secondary { width: 100%; }
}