/* DrivePilot V4.0.1 – bessere iPhone / PWA Anpassung */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

img,
svg,
canvas,
video,
iframe{
  max-width:100%;
  height:auto;
}

input,
select,
textarea,
button{
  max-width:100%;
  font:inherit;
}

body{
  padding-left:0;
  padding-right:0;
}

/* Allgemeine Standalone/PWA Anpassung */
@media(display-mode:standalone){
  body{
    min-height:100vh;
  }
}

/* Header */
.topbar,
.login-topbar{
  padding-left:max(14px, env(safe-area-inset-left));
  padding-right:max(14px, env(safe-area-inset-right));
}

.topbar{
  min-height:auto;
  padding-top:10px;
  padding-bottom:10px;
  flex-wrap:wrap;
  gap:10px 12px;
  align-items:center;
}

.brand{
  min-width:0;
  gap:12px;
  flex:1 1 auto;
}

.brand-logo-wrap{
  width:64px;
  height:48px;
  flex:0 0 auto;
}

.brand-company-logo{
  max-width:100%;
  max-height:38px;
}

.brand-text{
  min-width:0;
}

.brand-text strong{
  font-size:23px;
  line-height:1.05;
}

.brand-text small{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.2;
  word-break:break-word;
}

.top-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.user-pill{
  max-width:150px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Seitencontainer */
.shell{
  width:100%;
  max-width:100%;
  margin:0;
  padding-left:max(14px, env(safe-area-inset-left));
  padding-right:max(14px, env(safe-area-inset-right));
  overflow-x:hidden;
}

/* Abschnitte */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.section-head .btn,
.section-head .btn.secondary{
  width:auto;
}

/* Karten allgemein */
.card{
  width:100%;
  max-width:100%;
  min-width:0;
}

.form-card{
  padding:18px;
}

/* Formularraster */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.form-grid .full{
  grid-column:1 / -1;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.actions .btn,
.actions .btn.secondary,
.actions .btn.danger{
  width:auto;
}

/* Mögliche Kachel-/Dashboard-Raster */
.dashboard-grid,
.stats-grid,
.tiles-grid,
.tile-grid,
.cards-grid,
.menu-grid,
.quick-grid,
.overview-grid,
.settings-grid,
.reservation-grid,
.sales-grid,
.metrics-grid,
.home-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(4, minmax(0,1fr));
}

/* Benutzerraster bleibt flexibel */
.user-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

/* Tabellen */
.table-wrap,
.responsive-table{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

table{
  width:100%;
  border-collapse:collapse;
}

/* Buttons/Tabs oben */
.tab-row,
.tabs-row,
.quick-links,
.app-tabs,
.dashboard-tabs,
.nav-pills,
.top-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Textgrössen etwas harmonischer mobil */
h1{
  font-size:38px;
}
h2{
  font-size:28px;
}
h3{
  font-size:22px;
}

/* Login verfeinern */
.login-shell{
  padding-left:max(18px, env(safe-area-inset-left));
  padding-right:max(18px, env(safe-area-inset-right));
}

.login-card{
  width:min(470px,100%);
  max-width:100%;
}

/* iPad / kleine Tablets */
@media (max-width: 980px){
  .dashboard-grid,
  .stats-grid,
  .tiles-grid,
  .tile-grid,
  .cards-grid,
  .menu-grid,
  .quick-grid,
  .overview-grid,
  .settings-grid,
  .reservation-grid,
  .sales-grid,
  .metrics-grid,
  .home-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .user-grid{
    grid-template-columns:1fr;
  }
}

/* iPhone / sehr schmale Geräte */
@media (max-width: 700px){
  .topbar{
    padding-top:12px;
    padding-bottom:12px;
  }

  .brand{
    align-items:center;
  }

  .brand-logo-wrap{
    width:54px;
    height:42px;
    border-radius:12px;
  }

  .brand-company-logo{
    max-height:32px;
  }

  .brand-text strong{
    font-size:20px;
  }

  .brand-text small{
    font-size:11px;
  }

  .top-actions{
    width:100%;
    justify-content:space-between;
  }

  .user-pill{
    max-width:calc(100% - 110px);
  }

  .shell{
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }

  h1{
    font-size:30px;
  }

  h2{
    font-size:22px;
  }

  h3{
    font-size:19px;
  }

  .form-card{
    padding:16px;
    border-radius:18px;
  }

  .form-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .dashboard-grid,
  .stats-grid,
  .tiles-grid,
  .tile-grid,
  .cards-grid,
  .menu-grid,
  .quick-grid,
  .overview-grid,
  .settings-grid,
  .reservation-grid,
  .sales-grid,
  .metrics-grid,
  .home-grid,
  .user-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .actions{
    justify-content:stretch;
  }

  .actions .btn,
  .actions .btn.secondary,
  .actions .btn.danger,
  .section-head .btn,
  .section-head .btn.secondary{
    width:100%;
    text-align:center;
  }

  .tab-row,
  .tabs-row,
  .quick-links,
  .app-tabs,
  .dashboard-tabs,
  .nav-pills,
  .top-links{
    gap:10px;
  }

  .tab-row > *,
  .tabs-row > *,
  .quick-links > *,
  .app-tabs > *,
  .dashboard-tabs > *,
  .nav-pills > *,
  .top-links > *{
    flex:1 1 calc(50% - 10px);
    min-width:calc(50% - 10px);
  }

  .table-wrap table,
  .responsive-table table{
    min-width:640px;
  }
}

/* Extra schmal – bessere PWA Ansicht wie im Screenshot */
@media (max-width: 430px){
  .shell{
    padding-left:max(10px, env(safe-area-inset-left));
    padding-right:max(10px, env(safe-area-inset-right));
  }

  .topbar,
  .login-topbar{
    padding-left:max(10px, env(safe-area-inset-left));
    padding-right:max(10px, env(safe-area-inset-right));
  }

  .brand{
    gap:10px;
  }

  .brand-text strong{
    font-size:18px;
  }

  .brand-text small{
    font-size:10px;
  }

  .form-card{
    padding:14px;
  }
}