/* ============================================================================
   SolarPro ERP – App-Theme (iOS-nah: ruhig, flach, viel Weissraum, grosse Touch-Flaechen)
   Wirkt NUR im Mobil-/App-Modus (html.mobile-app). Web-Oberflaeche bleibt unveraendert.
   Safe-Areas (Notch, Home-Indicator, Panzerglas-Rand) ueber env(safe-area-inset-*).
   ============================================================================ */
:root {
  --sp-accent: #00A651;
  --sp-accent-soft: #e6f6ee;
  --sp-bg: #f2f2f7;          /* iOS grouped background */
  --sp-card: #ffffff;
  --sp-text: #111111;
  --sp-text-2: #6e6e73;
  --sp-hairline: rgba(60, 60, 67, 0.12);
  --sp-radius: 16px;
  --sp-tab-h: 56px;
  --sp-safe-b: env(safe-area-inset-bottom, 0px);
  --sp-safe-l: env(safe-area-inset-left, 0px);
  --sp-safe-r: env(safe-area-inset-right, 0px);
  --sp-safe-t: env(safe-area-inset-top, 0px);
}

html.mobile-app, html.mobile-app body {
  background: var(--sp-bg) !important;
  color: var(--sp-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
html.mobile-app * { -webkit-tap-highlight-color: transparent; }

/* ---------- Inhalt + Safe-Areas ---------- */
html.mobile-app .main-content {
  padding-left: max(16px, var(--sp-safe-l)) !important;
  padding-right: max(16px, var(--sp-safe-r)) !important;
  padding-bottom: calc(var(--sp-tab-h) + var(--sp-safe-b) + 24px) !important;
}
html.mobile-app .main-content > .p-8, html.mobile-app .main-content > div[class*="p-"] { padding-left: 0 !important; padding-right: 0 !important; }

/* ---------- Kopfzeile: grosser Titel, ruhig ---------- */
html.mobile-app .top-bar {
  position: sticky; top: 0;
  padding: calc(10px + var(--sp-safe-t)) max(16px, var(--sp-safe-r)) 10px max(16px, var(--sp-safe-l)) !important;
  background: linear-gradient(180deg, rgba(242, 242, 247, 0.92), rgba(242, 242, 247, 0.72)) !important;
  -webkit-backdrop-filter: saturate(200%) blur(26px); backdrop-filter: saturate(200%) blur(26px);
  border-bottom: 0.5px solid var(--sp-hairline) !important;
}
html.mobile-app .top-bar #pageTitle { font-size: 22px !important; font-weight: 700; letter-spacing: -0.3px; color: var(--sp-text); }
html.mobile-app .top-bar #pageSubtitle { font-size: 13px; color: var(--sp-text-2); }
html.mobile-app #mobileProfileBtn { width: 36px; height: 36px; background: var(--sp-accent-soft) !important; }
/* Persoenlich/Admin-Umschalter in der App ausblenden (Mehr-Menue reicht, Kopfzeile bleibt ruhig) */
html.mobile-app #globalModeToggle { display: none !important; }

/* ---------- Karten: ohne Rahmen, weiche Schatten ---------- */
html.mobile-app .card, html.mobile-app .stat-card {
  background: var(--sp-card); border: 0 !important; border-radius: var(--sp-radius) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
}
html.mobile-app .card-header { border-bottom: 0.5px solid var(--sp-hairline) !important; padding: 14px 16px !important; }
html.mobile-app .card-header h3, html.mobile-app .card-header .font-semibold { font-size: 17px; font-weight: 600; }
html.mobile-app .stat-card { padding: 16px !important; }
html.mobile-app .stat-card .text-3xl, html.mobile-app .stat-card .text-2xl { font-size: 28px !important; font-weight: 700; letter-spacing: -0.5px; }
html.mobile-app .badge { font-weight: 600; }
html.mobile-app .bg-surface-50 { background: var(--sp-bg) !important; }
html.mobile-app .border, html.mobile-app .border-surface-100, html.mobile-app .border-surface-200 { border-color: var(--sp-hairline) !important; }
html.mobile-app .rounded-lg, html.mobile-app .rounded-xl { border-radius: 14px !important; }
html.mobile-app .rounded-2xl { border-radius: var(--sp-radius) !important; }
html.mobile-app .shadow-xl, html.mobile-app .shadow-lg { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important; }

/* ---------- Buttons: 44px Touch-Hoehe, flach ---------- */
html.mobile-app .btn-primary, html.mobile-app .btn-secondary, html.mobile-app .btn-danger {
  min-height: 44px; padding: 10px 16px !important; border-radius: 12px !important;
  font-size: 15px !important; font-weight: 600 !important; transition: transform .08s ease, background .15s ease;
}
html.mobile-app .btn-primary { background: var(--sp-accent) !important; box-shadow: none !important; }
html.mobile-app .btn-primary:hover { transform: none; box-shadow: none !important; }
html.mobile-app .btn-primary:active, html.mobile-app .btn-secondary:active, html.mobile-app .btn-danger:active { transform: scale(0.98); }
html.mobile-app .btn-secondary { background: var(--sp-accent-soft) !important; color: #0b7a3e !important; border: 0 !important; }
html.mobile-app .btn-danger { background: #fdecec !important; color: #c62828 !important; border: 0 !important; }
html.mobile-app .btn-primary svg, html.mobile-app .btn-secondary svg { width: 18px; height: 18px; }

/* ---------- Eingaben: 44px, 16px Schrift (kein iOS-Zoom), weiche Flaechen ---------- */
html.mobile-app .input-field, html.mobile-app input[type="text"], html.mobile-app input[type="password"],
html.mobile-app input[type="email"], html.mobile-app input[type="tel"], html.mobile-app input[type="number"],
html.mobile-app input[type="date"], html.mobile-app input[type="time"], html.mobile-app select, html.mobile-app textarea {
  min-height: 44px; font-size: 16px !important; border-radius: 12px !important;
  border: 0.5px solid var(--sp-hairline) !important; background: #fff !important; padding: 10px 14px !important;
}
html.mobile-app .input-field:focus, html.mobile-app input:focus, html.mobile-app select:focus, html.mobile-app textarea:focus {
  outline: none !important; border-color: var(--sp-accent) !important; box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.15) !important;
}
html.mobile-app label { font-size: 13px; color: var(--sp-text-2); font-weight: 500; }
/* Icon-Innenabstaende der Suchfelder erhalten */
html.mobile-app .input-field.pl-10 { padding-left: 2.5rem !important; }
html.mobile-app .input-field.pr-9 { padding-right: 2.25rem !important; }
html.mobile-app .input-field.pr-10 { padding-right: 2.5rem !important; }
/* Tabellen: horizontal wischbar statt abgeschnitten */
html.mobile-app .card > .overflow-x-auto, html.mobile-app .table-wrap { -webkit-overflow-scrolling: touch; }
html.mobile-app table { min-width: 100%; }
html.mobile-app .card:has(> table), html.mobile-app .card > div:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Login ---------- */
html.mobile-app #loginPage { background: var(--sp-bg) !important; padding: var(--sp-safe-t) max(16px, var(--sp-safe-r)) var(--sp-safe-b) max(16px, var(--sp-safe-l)); }
html.mobile-app #loginPage .card { box-shadow: none !important; padding: 28px 22px !important; margin: 0 !important; width: 100%; }
html.mobile-app #loginPage h1 { font-size: 24px; letter-spacing: -0.3px; }
html.mobile-app #loginPage .btn-primary { width: 100%; min-height: 50px; font-size: 17px !important; }

/* ---------- Bottom-Tab-Bar: schwebende Glas-Kapsel (Liquid-Glass-Richtung, wie Telegram/WhatsApp auf iOS 26) ---------- */
html.mobile-app .mobile-bottom-nav {
  left: max(14px, var(--sp-safe-l)) !important; right: max(14px, var(--sp-safe-r)) !important;
  bottom: calc(10px + var(--sp-safe-b)) !important;
  height: 66px !important; padding: 6px 6px !important;
  border-radius: 33px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.58)) !important;
  -webkit-backdrop-filter: saturate(200%) blur(28px); backdrop-filter: saturate(200%) blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.03) !important;
}
html.mobile-app .main-content { padding-bottom: calc(66px + 10px + var(--sp-safe-b) + 28px) !important; }
html.mobile-app .mobile-bottom-nav .tab-item {
  gap: 2px; min-width: 0; padding: 2px 0; border-radius: 26px; position: relative;
  font-size: 9.5px !important; font-weight: 600; letter-spacing: -0.3px; color: #5c5c61 !important;
  white-space: nowrap; overflow: visible; padding-left: 0; padding-right: 0; transition: color .18s ease;
}
/* Beschriftung nie in den Nachbar-Tab laufen lassen (QA 04.10.: "Übersicht" und "Buchhaltung" klebten aneinander) */
html.mobile-app .mobile-bottom-nav .tab-item span { display: block; max-width: none; overflow: visible; }
html.mobile-app .mobile-bottom-nav .tab-item svg {
  width: 26px !important; height: 26px !important; stroke-width: 2;
  padding: 3px 12px; box-sizing: content-box; border-radius: 14px;
  transition: background .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease;
}
html.mobile-app .mobile-bottom-nav .tab-item.active { color: #0b7a3e !important; font-weight: 700; }
/* aktive Pille: gruenes Glas mit Lichtkante */
html.mobile-app .mobile-bottom-nav .tab-item.active svg {
  background: linear-gradient(180deg, rgba(0, 166, 81, 0.22), rgba(0, 166, 81, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 8px rgba(0, 166, 81, 0.18);
  color: var(--sp-accent); stroke-width: 2.4; animation: spTabPop .28s cubic-bezier(.2, .8, .2, 1);
}
@keyframes spTabPop { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
html.mobile-app .mobile-bottom-nav .tab-item:active svg { transform: scale(.92); }
html.mobile-app .mobile-bottom-nav .tab-item:active { opacity: 1; background: transparent; }

/* KI-Button ueber der Tab-Bar */
html.mobile-app #kiChatBtn { bottom: calc(66px + 10px + var(--sp-safe-b) + 14px) !important; right: max(16px, var(--sp-safe-r)) !important; box-shadow: 0 6px 20px rgba(0, 166, 81, 0.35) !important; }
html.mobile-app #kiChatPanel { bottom: calc(66px + 10px + var(--sp-safe-b) + 74px) !important; }

/* ---------- Modale als Bottom-Sheet (statt mittig aufploppen) ---------- */
@keyframes spSheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes spFadeIn { from { opacity: 0; } to { opacity: 1; } }
html.mobile-app #modalContainer > div {
  align-items: flex-end !important; padding: 0 !important;
  background: rgba(0, 0, 0, 0.35) !important; animation: spFadeIn .18s ease;
}
html.mobile-app #modalContainer > div > div {
  max-width: none !important; width: 100% !important; max-height: calc(100vh - var(--sp-safe-t) - 32px) !important;
  border-radius: 20px 20px 0 0 !important; padding-bottom: var(--sp-safe-b);
  animation: spSheetUp .26s cubic-bezier(.2, .8, .2, 1); position: relative;
}
html.mobile-app #modalContainer > div > div::before {
  content: ""; display: block; width: 36px; height: 5px; border-radius: 3px; background: #d1d1d6;
  margin: 8px auto 0; position: sticky; top: 8px;
}

/* ---------- Einstellungen (Mehr): iOS-Grouped-Liste ---------- */
html.mobile-app .sp-sheet { padding: 8px 16px 16px; }
html.mobile-app .sp-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 12px; }
html.mobile-app .sp-sheet-head h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin: 0; }
html.mobile-app .sp-sheet-head .sp-close { width: 30px; height: 30px; border-radius: 50%; background: #e5e5ea; border: 0; display: flex; align-items: center; justify-content: center; color: #6e6e73; }
html.mobile-app .sp-profile { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: var(--sp-radius); padding: 14px 16px; margin-bottom: 16px; }
html.mobile-app .sp-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 20px; }
html.mobile-app .sp-profile p { margin: 0; }
html.mobile-app .sp-profile .sp-name { font-size: 17px; font-weight: 600; }
html.mobile-app .sp-profile .sp-role { font-size: 13px; color: var(--sp-text-2); }
html.mobile-app .sp-group { background: #fff; border-radius: var(--sp-radius); overflow: hidden; margin-bottom: 16px; }
html.mobile-app .sp-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 12px 16px;
  border: 0; background: none; text-align: left; font-size: 16px; color: var(--sp-text); text-decoration: none;
}
html.mobile-app .sp-item { position: relative; }
html.mobile-app .sp-item + .sp-item::before { content: ""; position: absolute; left: 56px; right: 0; top: 0; height: 0.5px; background: var(--sp-hairline); }
html.mobile-app .sp-item:active { background: #f2f2f7; }
html.mobile-app .sp-item .sp-ico { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
html.mobile-app .sp-item .sp-ico svg { width: 17px; height: 17px; }
html.mobile-app .sp-item span.sp-label { flex: 1; }
html.mobile-app .sp-item .sp-sub { font-size: 13px; color: var(--sp-text-2); }
html.mobile-app .sp-item .sp-chev { width: 16px; height: 16px; color: #c7c7cc; }
html.mobile-app .sp-item.sp-danger { color: #ff3b30; justify-content: center; }
html.mobile-app .sp-foot { text-align: center; font-size: 12px; color: #aeaeb2; padding: 4px 0 8px; }
/* Bereiche ohne Berechtigung */
html.mobile-app .sp-item.sp-locked { color: #aeaeb2; }
html.mobile-app .sp-item.sp-locked .sp-sub { color: #c7c7cc; }
html.mobile-app .sp-item.sp-locked .sp-chev { color: #c7c7cc; }
html.mobile-app .sp-hint { font-size: 12px; color: var(--sp-text-2); padding: 8px 16px 12px; margin: 0; }
html.mobile-app .mobile-bottom-nav .tab-item.sp-locked { color: #c7c7cc !important; }
html.mobile-app .mobile-bottom-nav .tab-item.sp-locked svg { opacity: .45; }
/* Profil */
html.mobile-app .sp-profile-btn { width: 100%; border: 0; text-align: left; cursor: pointer; }
html.mobile-app .sp-profile-btn:active { background: #f2f2f7; }
html.mobile-app img.sp-avatar { object-fit: cover; }
html.mobile-app .sp-profile-hero { flex-direction: column; align-items: center; text-align: center; padding: 22px 16px 16px; }
html.mobile-app .sp-avatar-wrap { position: relative; }
html.mobile-app .sp-avatar-wrap .sp-avatar { width: 84px; height: 84px; font-size: 32px; }
html.mobile-app .sp-avatar-edit { position: absolute; right: -4px; bottom: -4px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; background: var(--sp-accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
html.mobile-app .sp-avatar-edit svg { width: 16px; height: 16px; }
html.mobile-app .sp-link { border: 0; background: none; color: #ff3b30; font-size: 14px; margin-top: 8px; }
html.mobile-app .sp-group-label { font-size: 12px; color: var(--sp-text-2); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; margin: 4px 4px 6px; }
html.mobile-app .sp-muted { color: var(--sp-text-2); font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
html.mobile-app .sp-rows .sp-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; position: relative; }
html.mobile-app .sp-rows .sp-row + .sp-row::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 0.5px; background: var(--sp-hairline); }
html.mobile-app .sp-row-label { flex: 0 0 38%; font-size: 14px; color: var(--sp-text-2); }
html.mobile-app .sp-row-value { flex: 1; font-size: 16px; color: var(--sp-text); word-break: break-word; font-variant-numeric: tabular-nums; }
html.mobile-app .sp-eye { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--sp-bg); color: var(--sp-text-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
html.mobile-app .sp-eye svg { width: 18px; height: 18px; }
html.mobile-app .sp-done { display: block; width: 100%; min-height: 50px; margin: 4px 0 12px; border: 0; border-radius: 14px; background: #e5e5ea; color: var(--sp-text); font-size: 17px; font-weight: 600; }
html.mobile-app .sp-done:active { background: #d9d9de; }
html.mobile-app .sp-sheet-head .sp-close { width: 34px; height: 34px; }
/* Mehr-Tab bleibt gruen, solange das Sheet offen ist */
html.mobile-app.sp-sheet-open .mobile-bottom-nav .tab-item[data-mobile-section="more"] { color: #0b7a3e !important; font-weight: 700; }
html.mobile-app.sp-sheet-open .mobile-bottom-nav .tab-item[data-mobile-section="more"] svg { background: linear-gradient(180deg, rgba(0, 166, 81, 0.22), rgba(0, 166, 81, 0.12)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 8px rgba(0, 166, 81, 0.18); color: var(--sp-accent); stroke-width: 2.4; }
html.mobile-app #modalContainer > div > div { touch-action: pan-y; }
/* Tab-Bar bleibt ueber dem Sheet-Hintergrund sichtbar und tippbar (Rueckweg immer da);
   das Sheet endet oberhalb der Tab-Bar */
/* NUR beim Mehr-Sheet — bei Formular-Dialogen bleibt die Tab-Bar hinter dem Hintergrund, damit
   ein Tipp auf die Leiste kein bearbeitetes Formular ohne Rueckfrage ersetzt */
html.mobile-app.sp-sheet-open .mobile-bottom-nav { z-index: 10000 !important; }
html.mobile-app.sp-sheet-open #modalContainer > div { padding-bottom: calc(66px + 20px + var(--sp-safe-b)) !important; }
html.mobile-app.sp-sheet-open #modalContainer > div > div { max-height: calc(100vh - var(--sp-safe-t) - 66px - 56px) !important; padding-bottom: 8px; border-radius: 24px !important; margin: 0 10px; width: calc(100% - 20px) !important; }
html.mobile-app .sp-mode { padding: 12px 16px 14px; }
html.mobile-app .sp-mode-label { font-size: 12px; color: var(--sp-text-2); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; margin-bottom: 8px; }
html.mobile-app .sp-segment { display: flex; background: #e9e9ee; border-radius: 10px; padding: 3px; }
html.mobile-app .sp-segment button { flex: 1; min-height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 500; color: var(--sp-text); }
html.mobile-app .sp-segment button.on { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

/* ---------- Kleinigkeiten ---------- */
html.mobile-app h3.font-semibold, html.mobile-app h2.font-bold { letter-spacing: -0.2px; }
html.mobile-app .text-surface-500 { color: var(--sp-text-2) !important; }
html.mobile-app ::-webkit-scrollbar { display: none; }

/* ---------- Kalender: 7 Spalten passen auf den Schirm (kleine Zellen statt Abschneiden) ---------- */
html.mobile-app #calendarGrid { min-width: 0 !important; gap: 4px !important; }
html.mobile-app #calendarGrid > div { min-height: 64px !important; padding: 5px 4px !important; border-radius: 10px !important; font-size: 15px; font-weight: 500; }
html.mobile-app #calendarGrid > div .text-xs { font-size: 10px !important; line-height: 1.2; padding: 2px 4px !important; margin-top: 3px !important; border-radius: 5px !important; }
html.mobile-app #calendar .grid-cols-7 > div { font-size: 12px; }
html.mobile-app #calendar .card { margin-left: -4px; margin-right: -4px; }
html.mobile-app #calendar .card .card-header, html.mobile-app #calendar .card > .p-5 { padding: 12px 10px !important; }
/* Suche im Kalender: eingeklappt, erscheint beim Herunterziehen am Seitenanfang oder per Lupe */
html.mobile-app #calendar .sp-search-wrap { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .25s ease, opacity .2s ease, margin .25s ease; margin-bottom: 0 !important; }
html.mobile-app #calendar .sp-search-wrap.open { max-height: 64px; opacity: 1; margin-bottom: 12px !important; }
html.mobile-app .sp-search-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--sp-accent-soft); border: 0; display: flex; align-items: center; justify-content: center; color: var(--sp-accent); margin-right: 8px; }
html.mobile-app .sp-search-btn svg { width: 18px; height: 18px; }

/* ---------- Kundenliste: Tabellenzeilen als Karten (CSS-only, Markup unveraendert) ---------- */
html.mobile-app #crm .table-container { overflow: visible !important; }
html.mobile-app #crm table, html.mobile-app #crm tbody, html.mobile-app #crm tr, html.mobile-app #crm td { display: block; width: 100% !important; min-width: 0 !important; }
html.mobile-app #crm thead { display: none; }
html.mobile-app #crm tbody tr { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-top: 0.5px solid var(--sp-hairline); }
html.mobile-app #crm tbody tr:first-child { border-top: 0; }
html.mobile-app #crm td { padding: 0 !important; width: auto !important; }
html.mobile-app #crm td:nth-child(1) { order: 2; font-size: 12px; color: var(--sp-text-2); }     /* Kunden-Nr. */
html.mobile-app #crm td:nth-child(2) { order: 1; }                                                /* Name + E-Mail */
html.mobile-app #crm td:nth-child(2) p:first-child { font-size: 17px; font-weight: 600; }
html.mobile-app #crm td:nth-child(3) { order: 3; }                                                /* Adresse */
html.mobile-app #crm td:nth-child(4) { order: 4; }                                                /* Kontakt */
html.mobile-app #crm td:nth-child(5), html.mobile-app #crm td:nth-child(6) { order: 5; display: inline-block; width: auto !important; margin-right: 8px; margin-top: 4px; }
html.mobile-app #crm td:nth-child(7) { order: 6; margin-top: 8px; display: flex; gap: 8px; }     /* Aktionen */
html.mobile-app #crm td:nth-child(7) button { min-width: 44px; min-height: 40px; border-radius: 10px; background: var(--sp-bg); }
html.mobile-app #crm td[colspan] { text-align: center; padding: 24px 0 !important; color: var(--sp-text-2); }
/* Kalender-Wrapper hat min-w-[640px] fuer Desktop — in der App auf Schirmbreite */
html.mobile-app #calendar [class*="min-w-"] { min-width: 0 !important; }
html.mobile-app #calendar .overflow-x-auto { overflow-x: hidden !important; }
/* Kalender-Kopf in der App: Suche (ausgeklappt) und Button untereinander in voller Breite */
html.mobile-app #calendar > .flex.flex-wrap { flex-direction: column; align-items: stretch; gap: 10px !important; margin-bottom: 12px !important; }
html.mobile-app #calendar > .flex.flex-wrap > .relative { max-width: none !important; min-width: 0 !important; }
html.mobile-app #calendar > .flex.flex-wrap > .btn-primary { justify-content: center; }
/* Solange das Sheet offen ist, ist nur "Mehr" hervorgehoben (nicht zusaetzlich der Bereichs-Tab) */
html.mobile-app.sp-sheet-open .mobile-bottom-nav .tab-item.active:not([data-mobile-section="more"]) { color: #6e6e73 !important; font-weight: 600; }
html.mobile-app.sp-sheet-open .mobile-bottom-nav .tab-item.active:not([data-mobile-section="more"]) svg { background: transparent; box-shadow: none; color: inherit; stroke-width: 2; animation: none; }

/* App: Anmeldung passiert auf dem Startbildschirm (index.html) – das Web-Login der ERP-Seite nie anzeigen (kein Aufblitzen beim Token-Check) */
html.mobile-app #loginPage { display: none !important; }

/* App: Start ohne Verbindung – Hinweis mit Wiederholung (showAppRetry) */
html.mobile-app .sp-retry { position: fixed; inset: 0; z-index: 900; background: var(--sp-bg, #F2F2F7); display: flex; align-items: center; justify-content: center; padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); }
html.mobile-app .sp-retry-card { width: 100%; max-width: 420px; background: #fff; border-radius: 16px; padding: 24px 20px; text-align: center; }
html.mobile-app .sp-retry-card h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
html.mobile-app .sp-retry-card p { color: #6E6E73; font-size: 15px; margin: 0 0 18px; line-height: 1.45; }
html.mobile-app .sp-retry-link { display: block; width: 100%; margin-top: 12px; padding: 10px; border: 0; background: none; color: #0B7A3E; font-size: 15px; font-weight: 600; }

/* Leerzustand-Zeilen in Tabellen (z. B. Kundenportale "Noch keine Portal-Links") nicht abschneiden (QA 04.10.) */
html.mobile-app td[colspan] { white-space: normal !important; text-align: center !important; display: block; position: sticky; left: 0; max-width: calc(100vw - 64px); }

/* Reiter in Detail-Sheets (Kundendetails: Protokolle/Projekte/Termine/Dokumente) umbrechen statt rechts verschwinden (QA 04.10.) */
html.mobile-app #modalContainer .flex.gap-4.-mb-px.overflow-x-auto { flex-wrap: wrap; gap: 6px 14px; white-space: normal; overflow: visible; }

/* Editor-Seiten (Angebot/Rechnung/Auftrag): Aktionsknoepfe passen nicht in eine Zeile – auf dem Handy umbrechen (QA 04.10.) */
html.mobile-app [id$="EditPage"] > .flex.flex-wrap > .shrink-0.flex.items-center.gap-2 { flex-basis: 100%; flex-wrap: wrap; justify-content: flex-end; }
html.mobile-app [id$="EditPage"] > .flex.flex-wrap > .shrink-0.flex.items-center.gap-2 > button { flex: 1 1 auto; min-height: 40px; }
html.mobile-app [id$="EditPage"] { left: 0 !important; padding-bottom: calc(66px + 10px + var(--sp-safe-b)); }

/* Mitarbeiter-Dialog: Zeile "Passwort zuruecksetzen" (Feld + Knopf) lief rechts aus dem Bild (QA 04.10.) */
html.mobile-app #employeeDetailModal .flex.gap-2:has(> #empAccPassword) { flex-wrap: wrap; }
html.mobile-app #employeeDetailModal .flex.gap-2:has(> #empAccPassword) > button { flex: 1 1 100%; white-space: normal !important; }