/* PATCH-MOBILE-RESPONSIVE-20260616
   Ziel: Intranet-Seiten ausser Rechner am iPhone/Android voll bedienbar machen.
   Nur Layout-/CSS-Haertung, keine bestehende Logik/EventListener veraendert. */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  width:100%;
  min-width:0;
}
body{
  width:100%;
  min-width:0;
  overflow-x:hidden;
}
*,*::before,*::after{box-sizing:border-box;}
img,svg,video,canvas,iframe{max-width:100%;}
button,a,input,select,textarea,label{touch-action:manipulation;}
button,a{ -webkit-tap-highlight-color: rgba(140,198,63,.22); }
input,select,textarea,button{font-size:16px;}

/* iPhone: keine horizontalen Ausreisser durch breite Container */
@media (max-width: 820px){
  body{min-width:0!important;overflow-x:hidden!important;}
  .container,.wrap,.app,.page,.shell,.main-wrap,.layout{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .wrap,.container,.app,.page,.shell{
    padding-left:max(12px, env(safe-area-inset-left))!important;
    padding-right:max(12px, env(safe-area-inset-right))!important;
  }
  header,.topbar,.top,.head,.header,.hero,.panel-head,.section-head,.modal-head{
    max-width:100%;
  }
  .topbar,header,.top,.head,.header,.hero,.panel-head,.section-head{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  .actions,.top-actions,.toolbar,.nav,.nav-ribbon,.filter-actions,.my-cal-actions{
    width:100%!important;
    justify-content:flex-start!important;
    gap:8px!important;
  }
  .actions > *, .top-actions > *, .toolbar > *, .nav > *, .filter-actions > *{
    min-height:44px;
  }
  .btn,button,.nav-btn,.logoutBtn,.my-cal-btn,.nav-chip,.quick-link,.card,.pill{
    max-width:100%;
  }
  h1{font-size:clamp(24px, 8vw, 34px)!important;line-height:1.08!important;}
  h2{font-size:clamp(20px, 6vw, 28px)!important;line-height:1.12!important;}
  h3{font-size:clamp(17px, 5vw, 22px)!important;line-height:1.16!important;}
  p,.sub,.subtitle,.section-sub,.small{line-height:1.45!important;}
  input,select,textarea,button{min-height:44px;}
  textarea{min-height:96px;}
  .grid,.grid2,.grid3,.main,.main-grid,.hero-grid,.cards3,.quick-grid,.button-grid,.section-grid,.week-plan-grid,.techMiniGrid,.field-grid,.summary-grid,.kpis{
    grid-template-columns:1fr!important;
  }
  .card,.panel,.section-card,.hero,.modal,.week-banner,.my-calendar-overview{
    border-radius:18px!important;
  }
  .table-scroll,.week,#calendar,.table-wrap,.list-scroll,.prospect-list{
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  table{
    max-width:none;
  }
  th,td{
    word-break:normal;
  }
  .modal-backdrop,.modalOverlay,.pr-modal-backdrop{
    padding:max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom))!important;
    align-items:flex-start!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .modal,.modal-card,.pr-modal-card{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 20px)!important;
    overflow:auto!important;
  }
}

/* Dashboard / uebersicht.html */
@media (max-width: 820px){
  body:has(.my-calendar-overview){padding:12px!important;align-items:flex-start!important;}
  .logo{width:42px!important;height:42px!important;flex:0 0 auto;}
  .brand{width:100%;min-width:0;}
  .brandtext{min-width:0;}
  .brandtext .t{font-size:16px!important;}
  .brandtext .s{font-size:12px!important;white-space:normal!important;}
  .topbar-actions .welcomeBox{width:100%;}
  .logoutBtn{width:100%;}
  .nav-ribbon{padding:0!important;overflow-x:auto;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch;}
  .nav-chip{flex:0 0 auto;white-space:nowrap;}
  .my-cal-grid{grid-template-columns:1fr!important;}
  .my-cal-week-head{align-items:flex-start!important;flex-direction:column!important;}
  .my-cal-item{grid-template-columns:1fr!important;gap:5px!important;}
  .my-cal-time{font-size:13px!important;}
  .button-grid{gap:12px!important;}
  .card{min-height:auto!important;padding:16px!important;}
  .card h2{font-size:18px!important;}
  .quick-link{min-height:auto!important;align-items:flex-start!important;}
  .section-shell{gap:12px!important;}
  footer{padding:0!important;}
}

/* Terminplanung route/index.html */
@media (max-width: 820px){
  body:has(#appointmentCard){background:#f5f7fb!important;}
  body:has(#appointmentCard) header{padding:14px 12px!important;position:relative!important;}
  body:has(#appointmentCard) .wrap{display:block!important;padding:12px!important;}
  #appointmentCard{margin-bottom:12px!important;}
  .calendar-head{align-items:stretch!important;}
  .calendar-head .nav,.calendar-head .filter-actions{width:100%;}
  .calendar-head button,.top-actions button{width:100%;}
  .calendar-filter-bar{overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
  .filter-chip{flex:0 0 auto;white-space:nowrap;}
  #calendar{display:block;overflow-x:auto!important;-webkit-overflow-scrolling:touch;border-radius:14px;}
  #calendar table{min-width:980px!important;width:max-content!important;}
  #calendar th:first-child,#calendar td:first-child{position:sticky;left:0;z-index:2;background:#f8fafc;}
  #calendar tbody th{position:sticky;left:0;z-index:3;background:#fff;min-width:150px;max-width:170px;}
  #calendar td{height:auto;min-height:150px;}
  .weekday-col{min-width:180px!important;}
  .weekend-col{min-width:140px!important;}
  .slot{padding:8px!important;}
  .dayrow,.grid2,.grid3,.row{grid-template-columns:1fr!important;display:grid!important;}
  .row>*{width:100%;}
  .quick-date-actions button{width:100%;}
}

/* Vertrieb */
@media (max-width: 820px){
  body:has(#kpis) .wrap{padding-top:12px!important;padding-bottom:24px!important;}
  body:has(#kpis) .topbar{padding:14px!important;border-radius:18px!important;}
  body:has(#kpis) .brand{align-items:flex-start!important;}
  body:has(#kpis) .logo{width:42px!important;height:42px!important;border-radius:14px!important;}
  body:has(#kpis) .hero{padding:18px!important;border-radius:20px!important;margin-top:12px!important;}
  body:has(#kpis) .hero h2{font-size:30px!important;letter-spacing:-.03em!important;}
  body:has(#kpis) .health{padding:14px!important;}
  body:has(#kpis) .score{font-size:34px!important;}
  body:has(#kpis) .kpi{min-height:auto!important;padding:14px!important;}
  body:has(#kpis) .chart{overflow-x:auto!important;padding-bottom:8px;height:260px!important;}
  body:has(#kpis) .bar-wrap{min-width:58px!important;}
  body:has(#kpis) .sales-table{min-width:980px!important;}
}

/* Dokumente */
@media (max-width: 820px){
  body:has(#docsRoot) .hero{padding:18px!important;}
  .file{display:grid!important;grid-template-columns:42px 1fr!important;gap:10px!important;}
  .file-name{max-width:100%!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:break-word;}
  .download-pill{display:inline-flex!important;grid-column:2!important;width:max-content!important;margin-top:6px;}
}

/* Maps / Marketing / Montage / Zeiterfassung: Tabellen und Seitenspalten robust */
@media (max-width: 820px){
  #mapWrap,#map{height:58dvh!important;min-height:420px!important;}
  .customerOverlay{left:10px!important;right:10px!important;top:10px!important;max-width:calc(100% - 20px)!important;}
  .side,.panel,.card{max-width:100%;}
  .adminTable,.table,.resultsTable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .todayGrid,.metrics,.stats,.monthGrid{grid-template-columns:1fr!important;}
}

/* PATCH_NO_HORIZONTAL_SCROLL_GLOBAL: Keine Quer-Scrollbalken auf Mobile-Seiten */
@media (max-width: 820px){
  html,body{max-width:100%!important;overflow-x:clip!important;}
  @supports not (overflow-x: clip){html,body{overflow-x:hidden!important;}}
  .table-wrap,.table-container,.overflow-x-auto,[class*="tableWrap"],[class*="table-wrap"]{
    max-width:100%!important;
    overflow-x:visible!important;
  }
  table{max-width:100%!important;}
  img,svg,canvas,video,iframe{max-width:100%!important;height:auto;}
}