/* Bellissimi – gemeinsame iPhone-Optimierung */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
input,select,textarea{max-width:100%}

@media(max-width:700px){
  body{font-size:14px}
  main,.page,.management,.container,.content{max-width:100%!important}
  main,.page,.management{padding-left:12px!important;padding-right:12px!important}
  h1{font-size:24px!important;line-height:1.15!important}
  h2{font-size:19px!important;line-height:1.2!important}
  h3{line-height:1.2}
  p,.muted,.small{line-height:1.35}

  /* Navigation: horizontal statt riesig untereinander */
  .top,.topbar,header.top,header.topbar{
    padding:10px 12px!important;
    gap:7px!important;
  }
  .nav{
    width:100%;
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    gap:4px!important;
    padding-bottom:2px;
  }
  .nav a,.top a,.topbar a{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    padding:7px 9px!important;
    font-size:12px!important;
  }

  /* Fingerfreundliche Formulare ohne iPhone-Zoom */
  input,select,textarea{
    min-height:42px;
    font-size:16px!important;
    padding:8px 9px!important;
  }
  button,.btn{
    min-height:40px;
    padding:9px 11px!important;
    font-size:13px!important;
  }

  /* Karten */
  .dashboard-grid,.grid,.cards,.personnel-cards{
    gap:10px!important;
  }
  .dashboard-card,.card,.panel,.person-card{
    border-radius:13px!important;
  }
  .dashboard-card,.card,.person-card{
    padding:12px!important;
  }

  /* Tabellen bleiben nutzbar statt die Seite zu sprengen */
  .tablewrap,.table-wrap,.table-container{
    width:100%;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  table{font-size:12px}
  th,td{padding:7px 6px!important}

  /* Dialoge/Popups */
  .modal,.modal-content,.dialog,.popup,.login-box{
    max-width:calc(100vw - 20px)!important;
  }
  .modal-content,.dialog,.popup,.login-box{
    padding:15px!important;
  }
}

@media(max-width:430px){
  .dashboard-grid{grid-template-columns:1fr!important}
  .management-kopf,.head{
    gap:10px!important;
  }
  .management-kopf h1{font-size:23px!important}
  .dashboard-card h2{font-size:18px!important;margin:6px 0!important}
  .dashboard-card p{font-size:13px!important}
  .dashboard-icon{font-size:24px!important}

  /* Zweispaltige Kennzahlen dürfen kompakt bleiben */
  .numbers{gap:5px!important}
}

/* 17.08.2026 – kompakter Salon/Management-Kopf auf iPhone */
.daily-note-button{position:relative;overflow:visible!important}
.daily-note-button.has-note::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-8px;
  width:8px;
  height:8px;
  margin-left:-4px;
  border-radius:50%;
  background:#d62828;
  box-shadow:0 0 0 2px #fff;
}

@media(max-width:700px){
  /* Kalenderkopf im Hochformat */
  .topbar{
    min-height:0!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    padding:8px 10px!important;
    gap:5px 10px!important;
  }
  .topbar .logo{min-width:0!important;margin:0!important;flex:1 1 100%}
  .topbar .logo-main{font-size:17px!important;line-height:1.05!important;letter-spacing:1.4px!important}
  .topbar .logo-sub{font-size:8px!important;line-height:1.1!important;letter-spacing:2px!important;margin-top:2px}
  .topbar .nav{flex:1 1 100%;gap:2px!important;padding:0!important}
  .topbar .nav button{min-height:30px!important;padding:5px 8px!important;font-size:11px!important;border-radius:6px!important}
  .calendar-controls-sticky{top:0!important}
  .toolbar{padding:7px 9px!important;gap:7px!important;justify-content:flex-start!important}
  .date-control{gap:4px!important;flex:1 1 100%;justify-content:space-between}
  .current-date-wrap{min-width:0!important;flex:1 1 auto}
  .current-date{font-size:16px!important;line-height:1.1!important;text-align:center}
  .toolbar button{min-height:34px!important;padding:5px 9px!important;font-size:11px!important}
  .toolbar .arrow{min-width:36px!important;font-size:20px!important}
  .daily-note-button.has-note::after{bottom:-6px;width:7px;height:7px;margin-left:-3.5px}
  .legend{padding:5px 9px!important;gap:6px 10px!important;min-height:0!important}
  .legend strong,.legend-item{font-size:10px!important}
  .legend .help{flex-basis:100%;font-size:9px!important;line-height:1.2!important}

  /* Management-Startseite kompakter */
  .management{padding:12px!important}
  .management-kopf{margin-bottom:12px!important;gap:8px!important;align-items:center!important}
  .management-kopf h1{font-size:22px!important;line-height:1.05!important}
  .management-sub{font-size:13px!important;margin-top:3px!important}
  .management-kopf .logout{padding:8px 11px!important;font-size:13px!important;white-space:nowrap}
  .dashboard-grid{gap:9px!important}
  .dashboard-card{padding:12px 14px!important;border-radius:12px!important}
  .dashboard-icon{font-size:21px!important;line-height:1!important}
  .dashboard-card h2{font-size:18px!important;margin:5px 0 4px!important;line-height:1.12!important}
  .dashboard-card p{font-size:13px!important;line-height:1.3!important}
  .dashboard-card .badge{margin-top:8px!important;padding:4px 8px!important;font-size:10px!important}
}

/* iPhone quer: Kalenderfläche priorisieren. Auch bei >700px Breite aktiv. */
@media(orientation:landscape) and (max-height:500px){
  .topbar{
    min-height:38px!important;
    height:auto!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    padding:4px 8px!important;
    gap:10px!important;
  }
  .topbar .logo{min-width:165px!important;margin:0!important;flex:0 0 auto!important}
  .topbar .logo-main{font-size:13px!important;line-height:1!important;letter-spacing:1.2px!important}
  .topbar .logo-sub{font-size:7px!important;line-height:1!important;letter-spacing:1.5px!important;margin-top:2px!important}
  .topbar .nav{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:2px!important;padding:0!important}
  .topbar .nav button{min-height:28px!important;padding:4px 7px!important;font-size:10px!important;border-radius:6px!important;white-space:nowrap!important}
  .calendar-controls-sticky{top:38px!important}
  .toolbar{padding:4px 8px!important;gap:5px!important;flex-wrap:nowrap!important;justify-content:flex-start!important}
  .date-control{gap:3px!important;flex:0 0 auto!important}
  .current-date-wrap{min-width:190px!important}
  .current-date{font-size:13px!important;line-height:1!important;white-space:nowrap!important}
  .toolbar button{min-height:28px!important;height:28px!important;padding:3px 7px!important;font-size:10px!important;border-radius:6px!important;white-space:nowrap!important}
  .toolbar .arrow{min-width:30px!important;font-size:17px!important}
  .legend{padding:3px 8px!important;min-height:24px!important;gap:4px 8px!important;flex-wrap:nowrap!important;overflow-x:auto!important;white-space:nowrap!important}
  .legend strong,.legend-item{font-size:9px!important}
  .legend-color{width:9px!important;height:9px!important}
  .legend .help{font-size:8px!important;margin-left:auto!important}
  .calendar-wrap{padding:5px 8px 12px!important}
  .daily-note-button.has-note::after{bottom:-5px;width:6px;height:6px;margin-left:-3px}
}

/* 17.08.2026 – Management-Kalender quer komplett in den sichtbaren iPhone-Bereich */
@media (orientation:landscape) and (max-height:500px){
  /* Die Desktop-Mindestbreite von 980px erzeugte auf dem iPhone horizontales Abschneiden. */
  .calendar{
    min-width:0!important;
    width:100%!important;
  }
  .calendar-header>div{
    padding:8px 4px!important;
    font-size:13px!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .staff-status{
    font-size:9px!important;
    margin-top:1px!important;
  }
}