/* mobile_patch.css
   Načti až PO main.css + toolbar.css + table.css (+ login_page.css)
*/

/* =========================
   ZÁKLAD
========================= */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* =========================
   MOBIL/TABLET (layout)
========================= */
@media (max-width: 900px){

  /* 0) Na mobilu vypnout FIXNÍ TOOLBAR (jinak překrývá obsah) */
  div.fix-toolbar{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    opacity: 1 !important;
  }
  body.toolbar-body-margin{ padding-top: 0 !important; }
  div.toolbar-placeholder{ height: auto !important; }

  /* 1) Toolbar: tlačítka jako horizontální scroll + breadcrumb POD nimi */
  .toolbarBox{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
  }

  .toolbarBox ul.cc_button{
    float: none !important;
    width: 100%;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 8px;
    margin: 0;
    order: 1;
  }
  .toolbarBox ul.cc_button li{
    float: none !important;
    height: auto;
    padding: 0;
    flex: 0 0 auto;
  }
  .toolbarBox a.toolbar_btn{
    float: none !important;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    min-width: 88px;
    white-space: nowrap;
  }

  .toolbarBox .pageTitle{
    float: none !important;
    clear: both !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 12px 6px 12px !important;
    line-height: 1.25 !important;
    order: 2;
    box-sizing: border-box;
  }
  .toolbarBox .pageTitle h3{
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    word-break: break-word;
  }

  /* 2) Layout se záložkami (levý panel + obsah) */
  #content2{
    flex-direction: column;
    margin: 8px auto;
    overflow: visible;
  }

  /* 3) Záložky (Osobní údaje, Služby...) jako horizontální lišta */
  #tab-container{
    min-width: 0 !important;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-left: 0;
    position: relative;
    z-index: 1;
  }
  #tab-container ul{
    display: flex;
    gap: 6px;
    padding: 6px;
    margin: 0;
  }
  #tab-container ul li{
    flex: 0 0 auto;
    line-height: 1.2;
    padding: 10px 12px;
    border: 1px solid #CCCED7;
    border-radius: 10px;
    background-color: #fff;
  }
  #tab-container ul li.selected,
  #tab-container ul li:hover{
    border-right: 1px solid #CCCED7;
    background-color: #EBEDF4;
  }

  /* 4) Obsah záložky */
  #content2 .main-container{
    margin: 0;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 10px;
  }

  /* 5) Data zákazníka + mapa: na mobilu pod sebe */
  #data_zakaznika{ float: none !important; width: 100%; }
  #mapa{
    width: 100% !important;
    max-width: 100% !important;
    height: 260px !important;
    margin-left: 0 !important;
    margin-top: 16px !important;
    box-sizing: border-box;
  }

  /* 6) Form tabulky */
  table.tab_form{ width: 100%; }
  .tab_form td{ word-break: break-word; }

  /* 7) Tabulky v přehledech: povolit horizontální scroll v rámci stránky */
  .container{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.table,
  table.pagination{
    width: max-content;
    min-width: 100%;
  }

  /* 8) jQuery UI dialogy (např. plánování) – ať se vejdou na mobil */
  .ui-dialog{
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    box-sizing: border-box;
  }
  .ui-dialog .ui-dialog-content{
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  /* Konkrétně dialog s plánem */
  #userDialog table{ width: 100%; }
  #userDialog table td{ vertical-align: top; }
  #userDialog input[type=text],
  #userDialog select,
  #userDialog textarea{
    max-width: 100%;
    box-sizing: border-box;
  }
  #userDialog ul#availableUsers,
  #userDialog ul#selectedUsers{
    width: 100% !important;
    height: 140px !important;
  }

  /* 9) Minikalendář vlevo: na mobilu doprostřed */
  #calendar_left_column{
    float: none !important;
    width: 100%;
    text-align: center;
  }
  #minicalendar{
    display: inline-block;
    margin: 12px auto 0 auto !important;
    text-align: left;
    max-width: calc(100vw - 24px);
  }
  #minicalendar table{
    width: 100%;
    max-width: 360px;
  }
  #minicalendar th,
  #minicalendar td{
    text-align: center;
  }

  /* 10) Hlavní kalendář a legenda pod minikalendář */
  #calendar_middle_column{
    float: none !important;
    width: 100%;
    margin-top: 12px !important;
  }
  #legenda{
    float: none !important;
    width: 100% !important;
  }

  /* 11) FullCalendar – roztáhnout na celou šířku (zrušit shrink-to-fit) */
  #wrap{ text-align: left !important; }
  #calendar_wrap{
    display: block !important;
    width: 100% !important;
  }
  #calendar_wrap::after{
    content: "";
    display: block;
    clear: both;
  }

  #calendar{
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #calendar .fc,
  #calendar .fc-view-container,
  #calendar .fc-view,
  #calendar .fc-view > table,
  #calendar .fc-time-grid,
  #calendar .fc-day-grid,
  #calendar .fc-bg,
  #calendar .fc-content-skeleton,
  #calendar .fc-slats{
    width: 100% !important;
    box-sizing: border-box;
  }

  #calendar .fc-scroller{
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================
   MOBIL (ovládání + iOS)
========================= */
@media (max-width: 600px){
  html, body{ font-size: 15px; }

  input[type=text],
  input[type=password],
  input[type=file],
  input[type=number],
  textarea,
  select{
    padding: 10px 10px;
    font-size: 16px;  /* iOS: zabrání zoomu při focusu */
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
  textarea{ min-height: 140px; }

  /* top-bar dropdown */
  .top-bar{ padding: 8px !important; }
  .dropdown{
    right: 8px !important;
    min-width: min(320px, calc(100vw - 16px)) !important;
  }

  /* login */
  div.form-bg{
    width: min(420px, calc(100vw - 24px));
    margin: 12px auto;
  }
  div.form-bg input[type=text],
  div.form-bg input[type=password],
  div.form-bg input[type=number]{
    width: calc(100% - 40px);
    height: 42px;
  }
}

/* =========================
   TOUCH zařízení / landscape
   (tahle media query často "vyhraje" – proto je tu i legenda + toolbar)
========================= */
@media (hover: none) and (pointer: coarse), (max-width: 1100px){

  /* FullCalendar – roztáhnout i v landscape */
  #wrap{ text-align: left !important; }
  #calendar_wrap{ display: block !important; width: 100% !important; }

  #calendar_left_column,
  #calendar_middle_column,
  #legenda{
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #calendar{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #calendar .fc,
  #calendar .fc-view-container,
  #calendar .fc-view,
  #calendar .fc-view > table{
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ===== Legenda: odskočení + vycentrovat CELEK, uvnitř doleva ===== */
  #legenda{
    display: flex !important;
    flex-direction: column;
    align-items: center !important;  /* vycentruje celý blok legendy */
    text-align: left !important;     /* uvnitř necentrovat text */
    margin-top: 16px !important;
    padding: 10px 12px !important;
    box-sizing: border-box;
  }

  /* vypnutý člověk = zešednout */
  #legenda .legenda_uzivatel{ cursor: pointer; user-select: none; }
  #legenda .legenda_uzivatel.legend-off{ opacity: .35; filter: grayscale(100%); }
  #legenda .legenda_uzivatel.legend-off > div{ opacity: .35; }

  /* řádek legendy: skupina ikonka+text doleva, ale celý řádek uprostřed stránky */
  #legenda .legenda_uzivatel{
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    width: max-content !important;   /* šířka podle obsahu */
    max-width: 100%;
    margin: 6px 0 !important;
    float: none !important;
    white-space: nowrap;
    text-align: left !important;
  }
  #legenda .legenda_uzivatel > div{
    margin: 0 8px 0 0 !important;
  }

  /* ===== FullCalendar toolbar vycentrovat ===== */
  #calendar .fc-toolbar{
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center;
    gap: 10px;
    margin: 8px 0 12px 0 !important;
  }

  #calendar .fc-toolbar .fc-left,
  #calendar .fc-toolbar .fc-center,
  #calendar .fc-toolbar .fc-right{
    float: none !important;
    width: auto !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 8px;
  }

  #calendar .fc-toolbar .fc-button-group{
    display: inline-flex !important;
  }
  
  #hodiny{
      text-align: center;
  }
  
    /* Na téhle stránce není .container, tak scroll povolíme v hlavním obsahu */
  #content2 .main-container{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabulky v obsahu: udělat z nich blok, který může scrollovat */
  #content2 .main-container table.table,
  #content2 .main-container table.pagination{
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: max-content !important;
    min-width: 100% !important;
  }
}