/* =====================================================================
   ML Vision CRM · Handy-Ansicht & App-Modus (iPhone / Home-Bildschirm)
   Wird nach app.css und crm.css geladen und gilt für CRM, Buchhaltung,
   Kundenbereich und öffentliche Seiten.
   ===================================================================== */

/* ---------- Grundlagen für Touch-Geräte ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
a,button,.btn,summary,label,select,input[type=checkbox],input[type=radio]{touch-action:manipulation}
img,video,iframe{max-width:100%}
img{height:auto}
code,kbd,samp{overflow-wrap:anywhere;word-break:break-word}
pre{white-space:pre-wrap;overflow-wrap:anywhere}
.mailbody,.mailbody *{overflow-wrap:anywhere}
.mailbody img,.mailbody table{max-width:100%!important;height:auto}
.chip,.tag{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* Datumsfelder (Handy): iOS zeigt sie sonst zentriert, zu flach oder breiter als das Feld */
@media (max-width:860px){
  input[type=date].inp,input[type=time].inp,input[type=datetime-local].inp,input[type=month].inp{
    -webkit-appearance:none;appearance:none;display:block;width:100%;max-width:100%;min-width:0;min-height:42px;text-align:left;line-height:1.3}
  input[type=date].inp::-webkit-date-and-time-value,input[type=time].inp::-webkit-date-and-time-value,
  input[type=datetime-local].inp::-webkit-date-and-time-value{text-align:left;margin:0}
  input[type=date].inp.sm,input[type=date].inp.small{min-height:34px}
}

/* Raster: Spalten dürfen schrumpfen (sonst schiebt langer Inhalt die Seite breiter) */
.prgrid>*,.grid2>*,.grid3>*,.editor>*,.xgrid>*,.soc>*,.socgrid>*{min-width:0}
@media (max-width:980px){.prgrid{grid-template-columns:minmax(0,1fr)}}

/* Untere Leiste: auf großen Bildschirmen nicht vorhanden */
.tabbar{display:none}

/* =====================================================================
   Tablet & Handy (bis 860 px)
   ===================================================================== */
@media (max-width:860px){
  :root{--tabbar-h:58px}

  /* Kopfzeile: Platz für Statusleiste / Notch im App-Modus */
  .top{padding-top:max(10px,env(safe-area-inset-top,0px));min-height:56px}
  .app>.side{padding-top:max(18px,env(safe-area-inset-top,0px));height:100vh;height:100dvh}
  .main{min-height:100vh;min-height:100dvh}

  /* Untere Leiste */
  .has-tabbar .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
    padding:0 max(4px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(4px,env(safe-area-inset-left,0px));
    background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
    border-top:1px solid var(--line)}
  .tabbar>a,.tabbar>button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative;
    color:var(--muted);text-decoration:none!important;font:inherit;font-size:10.5px;font-weight:500;letter-spacing:.01em;background:none;border:0;padding:6px 2px 4px;cursor:pointer}
  .tabbar svg{width:23px;height:23px;flex:none}
  .tabbar span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar>a.on,.tabbar>button[aria-expanded="true"]{color:var(--accent)}
  .tabbar>a:active,.tabbar>button:active{opacity:.6}
  .tabbar .tbcnt{position:absolute;top:4px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:#E5484D;color:#fff;
    font-size:10px;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--surface)}
  .has-tabbar .content{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 32px)}
  /* Menü-Knopf oben ist durch die untere Leiste ersetzt → mehr Platz für die Suche */
  .has-tabbar .top .menubtn{display:none}
  .navopen .tabbar{z-index:80}

  /* Hinweise (Toasts) oben über die volle Breite */
  #toasts{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));top:calc(64px + env(safe-area-inset-top,0px));max-width:none;align-items:stretch}
  #toasts .toast{width:auto}

  /* Popups (Umbenennen, Stornieren …) als Blatt über der unteren Leiste */
  details.pop>.popform,details.pop>.pop-body{bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;z-index:90!important;flex-wrap:wrap}
  .has-tabbar details.pop>.popform,.has-tabbar details.pop>.pop-body{bottom:calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom,0px))!important}
  details.pop>.popform .inp{flex:1 1 160px;min-width:0}
  details.pop>.popform .stack{width:100%}

  /* Kanban (Pipeline, Projekte): Spalten rasten beim Wischen ein */
  .board{grid-template-columns:repeat(5,min(82vw,340px));scroll-padding-left:0;overscroll-behavior-x:contain}

  /* Mail-Ansicht: Inhalt ohne Querscrollen */
  .mailframe,iframe.mailhtml{width:100%!important}
}

/* =====================================================================
   Handy (bis 640 px)
   ===================================================================== */
@media (max-width:640px){
  /* Kopfzeile: kompakter */
  .top{gap:8px}
  .top .btn{padding:8px 11px;min-height:40px}
  .top .search{padding-left:12px}
  .top .search input{font-size:16px}
  .has-tabbar .top a.btn[href$="/aufgaben"]{display:none}   /* Aufgaben stehen in der unteren Leiste */
  .top .qstat span{display:none}

  /* Seitenkopf: Titel + Aktionen untereinander, Aktionen dürfen umbrechen */
  .head{align-items:stretch}
  .head>div:first-child{min-width:0;flex:1 1 100%}
  .head h1{overflow-wrap:anywhere}
  .head .actions{width:100%;min-width:0;gap:8px}
  .head .actions>.seg{max-width:100%}
  .actions .btn{max-width:100%}

  /* Umschalter (Seg) & Reiter: sauber wischbar statt abgeschnitten */
  .seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wrap>.tabs{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;scroll-padding-left:14px}
  .seg[role=radiogroup]{display:flex;flex-wrap:wrap;overflow:visible;border-radius:14px;gap:2px}
  .seg[role=radiogroup] .cbx{padding:5px 10px}

  /* Listenzeilen: rechte Elemente (Chips, Knöpfe) rutschen in die nächste Zeile, statt den Text zu quetschen */
  .row{flex-wrap:wrap;row-gap:8px}
  .row>.grow{flex:1 1 170px}
  .row>.grow+.chip,.row>.grow+.tag{margin-left:auto}
  .row.mrow{flex-wrap:nowrap}
  .row .actions,.row>form.inline+form.inline{flex-wrap:wrap}

  /* Mail-Liste: Betreff zweizeilig statt abgeschnitten */
  .maillist .mrow .sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .maillist .mrow .mside{flex:none;max-width:96px;align-items:flex-end;text-align:right}
  .maillist .mrow .mside .chip{font-size:11px}

  /* Vertrags-Baukasten: Leistung oben, Felder darunter */
  .row.mod{align-items:flex-start}
  .row.mod>label.cbx.grow{flex:1 1 100%}
  .row.mod>label.mini{flex:1 1 0;min-width:0;margin-left:0}
  .row.mod>label.mini:first-of-type{margin-left:26px}
  .row.mod>label.mini .inp{width:100%}

  /* Preisrechner: Titel volle Breite, Preis + Menge darunter */
  .prrow>.grow{flex:1 1 100%}
  .prrow>.num{flex:1 1 auto;margin-left:auto;text-align:right}
  .prrow .qty{width:84px}

  /* Angebots-Positionen: Menge, Preis und Entfernen in einer Zeile */
  .item{grid-template-columns:72px minmax(0,1fr) 40px!important}
  .items.opts .item{grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr) 40px!important}
  .item .item-main{grid-column:1/-1}
  .item>button,.item [data-rm],.item .rm{justify-self:center;align-self:center}

  /* Gesprächsverlauf (Tickets, Kundenbereich) */
  .bubble{max-width:100%}
  .bubble .bh{flex-wrap:wrap;gap:2px 12px}

  /* Kartenansicht der Tabellen: lange Werte dürfen umbrechen, Bezeichner bleiben schmal */
  table.stackable td{overflow:visible;overflow-wrap:anywhere}
  table.stackable td::before{max-width:40%}
  table.stackable td .inp,table.stackable td select{max-width:100%}
  table.stackable td form.inline{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}

  /* Dateien: Ablagefläche */
  .drop{padding:18px 14px;line-height:1.6}

  /* Code-Schnipsel in Anleitungen (Qonto, TikTok): umbrechen statt rausragen */
  ol.qsteps code,.note code,.panel-b code{word-break:break-all}

  /* Kennzahlen: Werte nicht abschneiden */
  .kpi .v{overflow-wrap:anywhere}

  /* Formularknöpfe am Ende: gut erreichbar */
  .formfoot,.form-actions{flex-wrap:wrap}
}

/* =====================================================================
   Sehr schmale Geräte (iPhone SE / mini, bis 380 px)
   ===================================================================== */
@media (max-width:380px){
  .tabbar span{font-size:10px}
  .top .btn.pri span{display:none}
  .kpis{grid-template-columns:1fr}
  .kpi{border-left:0!important;padding-left:0!important}
  .kpi:not(:first-child){border-top:1px solid var(--line)}
}

/* ---------- App-Modus (vom Home-Bildschirm gestartet) ---------- */
.standalone body{overscroll-behavior-y:none}
@media print{.tabbar{display:none!important}}
@media (max-width:640px){
  .subnav{margin-right:calc(-1 * max(14px,env(safe-area-inset-right,0px)));padding-right:max(14px,env(safe-area-inset-right,0px))}
}
@media (max-width:640px){
  /* Fortschritt (Vertrag): untereinander statt halb umgebrochen */
  .steps{flex-direction:column;align-items:flex-start;gap:10px}
  .step+.step::before{display:none}
  /* Umschalter etwas kompakter, damit vier Einträge auf eine Zeile passen */
  .seg>a,.seg>button{padding:5px 10px}
}
@media (max-width:860px){
  /* Seitenleiste endet über der unteren Leiste (Konto & Abmelden bleiben erreichbar) */
  .has-tabbar .app>.side{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 16px)}
}
@media (max-width:860px){
  /* Kundenbereich: Kopfzeile unter der Statusleiste (App-Modus) */
  .ptop{padding-top:env(safe-area-inset-top,0px)}
  .pfoot{padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
}
@media (max-width:640px){
  /* Einfache Tabellen (ohne Kartenansicht): Text umbrechen, notfalls seitlich wischen statt die Seite zu verbreitern */
  .tbl-wrap:has(>table:not(.stackable)){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl-wrap>table:not(.stackable) td:not(.num),.tbl-wrap>table:not(.stackable) th:not(.num){white-space:normal;overflow-wrap:anywhere}
  .tbl-wrap>table:not(.stackable) td,.tbl-wrap>table:not(.stackable) th{padding-left:12px;padding-right:12px}
  input[type=file]{max-width:100%;min-width:0;font-size:14px}
}
/* Social Media: Beitragsliste */
.pf{white-space:nowrap;display:inline-block}
@media (max-width:640px){
  .row.srow{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;row-gap:10px;align-items:start}
  .row.srow>.sthumb{grid-row:1}
  .row.srow>.grow{grid-column:2;min-width:0}
  .row.srow>.chip{grid-column:2;justify-self:start;margin:0}
  .row.srow>.actions{grid-column:2;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;white-space:normal;margin:-2px 0 0 -12px}
  .row.srow>.actions:empty{display:none}
  .row.srow .t{line-height:1.4}
  .row.srow .d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
/* Push-Mitteilungen (Mein Konto) */
.pushev{align-items:flex-start;gap:10px;padding:4px 0}
.pushbox .actions{gap:8px}
.pushbox [hidden]{display:none!important}
.pushbox .btn svg{width:17px;height:17px;flex:none}