/* ============================================================
   mobile-bridge.css  (v2, 26.05.2026)
   Universelle Mobile-Anpassungen für SOLARDESK.
   Wird zusätzlich zu mobile-perf.css geladen, deckt:
   - Tabellen als Cards (Stack-Layout)
   - Topbar kompakter
   - Sidebar als Drawer mit Hamburger
   - Detail-Drawer als Bottom-Sheet
   - Forms/Inputs Touch-optimiert
   - Safe-Area für iPhone-Notch
   ============================================================ */

/* ============================================================
   SIDEBAR-DRAWER-OVERRIDE (KEINE @media, gilt sobald
   body.is-mobile-nav per JS gesetzt ist)
   Reparatur: andere CSS-Files setzen z-index:100 und blur(40px)
   mit hoher Specificity, die mobile-nav-v6.css ueberstimmt.
   Diese Block hier hat die hoechste Specificity und gewinnt
   in jedem Fall (Tablet im Landscape, iPad, iPhone).
   ============================================================ */
html body.is-mobile-nav aside.sidebar,
html body.is-mobile-nav.premium-dark aside.sidebar,
html body.is-mobile-nav .sidebar,
html body.is-mobile-nav.premium-dark .sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  width: min(82vw, 320px) !important;
  max-width: 320px !important;
  transform: translateX(-100%) !important;
  z-index: 260 !important;
  background: linear-gradient(180deg, var(--panel-solid,#17130D) 0%, var(--bg-solid,#0C0907) 60%, var(--panel-solid,#17130D) 100%) !important;
  background-color: var(--bg-solid,#0C0907) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: 4px 0 32px -8px rgba(0,0,0,0.6) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  isolation: isolate !important;
  pointer-events: auto !important;
  transition: transform 0.28s cubic-bezier(.2,.7,.2,1) !important;
}
html body.is-mobile-nav aside.sidebar.open,
html body.is-mobile-nav.premium-dark aside.sidebar.open,
html body.is-mobile-nav .sidebar.open,
html body.is-mobile-nav.premium-dark .sidebar.open {
  transform: translateX(0) !important;
}
html body.is-mobile-nav .sidebar::before,
html body.is-mobile-nav .sidebar::after {
  display: none !important;
}
/* Backdrop: korrekter z-index, klickbar nur wenn .open */
html body.is-mobile-nav #solardesk-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(var(--surf-deep-rgb),0.55) !important;
  z-index: 240 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.22s ease !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}
html body.is-mobile-nav #solardesk-backdrop.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}
html body.is-mobile-nav .main-content,
html body.is-mobile-nav .app-layout > .main-content {
  margin-left: 0 !important;
}


@media (max-width: 768px) {

  /* ---- iPhone-Notch / Safe-Area-Padding ---- */
  body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
  .topbar,
  .sidebar {
    padding-top: env(safe-area-inset-top, 0);
  }

  /* ---- Topbar kompakter ---- */
  .topbar {
    padding: 10px 14px !important;
    min-height: 56px !important;
    gap: 10px !important;
  }
  .topbar-title {
    font-size: 18px !important;
    line-height: 1.15 !important;
  }
  .topbar-breadcrumb {
    display: none !important; /* zu wenig Platz, Breadcrumb verschwindet */
  }
  .topbar-date-pill,
  .topbar-search-pill .tsp-kbd {
    display: none !important;
  }
  .topbar-search-pill .tsp-text {
    font-size: 12.5px !important;
  }

  /* ---- Main-Content: kein Sidebar-Offset auf Mobile ---- */
  .main-content,
  .app-layout > .main-content {
    margin-left: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .app-layout {
    display: block !important;
  }



  /* ---- Page-Padding mobile ---- */
  .page-content,
  .aufp-page,
  .aufp-main {
    padding: 12px 0 80px !important;
  }

  /* ============================================================
     TABELLEN ALS CARDS
     Tabellen werden auf Mobile in gestapelte Karten umgewandelt.
     Voraussetzung: th[data-label] oder td[data-label] gesetzt,
     bei vielen SOLARDESK-Tabellen ist data-label nicht vorhanden,
     deshalb Fallback per ::before unter nth-of-type-Selektor zu
     unzuverlässig. Wir nutzen daher Standard-Mobile-Pattern:
     Tabelle in display:block, jedes Row als Karte, Cells als
     Label/Value-Stack.
     ============================================================ */
  table.solardesk-data-table,
  table.projekte-table,
  table.leads-table,
  table.anfragen-table,
  table.crm-table,
  table.kunden-table,
  table.angebote-table,
  table.tasks-table,
  table.investor-table,
  table.partner-table {
    display: block !important;
    border: 0 !important;
  }
  table.solardesk-data-table thead,
  table.projekte-table thead,
  table.leads-table thead,
  table.anfragen-table thead,
  table.crm-table thead,
  table.kunden-table thead,
  table.angebote-table thead,
  table.tasks-table thead,
  table.investor-table thead,
  table.partner-table thead {
    display: none !important;
  }
  table.solardesk-data-table tbody,
  table.projekte-table tbody,
  table.leads-table tbody,
  table.anfragen-table tbody,
  table.crm-table tbody,
  table.kunden-table tbody,
  table.angebote-table tbody,
  table.tasks-table tbody,
  table.investor-table tbody,
  table.partner-table tbody {
    display: block !important;
  }
  table.solardesk-data-table tbody tr,
  table.projekte-table tbody tr,
  table.leads-table tbody tr,
  table.anfragen-table tbody tr,
  table.crm-table tbody tr,
  table.kunden-table tbody tr,
  table.angebote-table tbody tr,
  table.tasks-table tbody tr,
  table.investor-table tbody tr,
  table.partner-table tbody tr {
    display: block !important;
    background: var(--panel-solid,#17130D) !important;
    border: 1px solid #1E2731 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
  }
  table.solardesk-data-table tbody td,
  table.projekte-table tbody td,
  table.leads-table tbody td,
  table.anfragen-table tbody td,
  table.crm-table tbody td,
  table.kunden-table tbody td,
  table.angebote-table tbody td,
  table.tasks-table tbody td,
  table.investor-table tbody td,
  table.partner-table tbody td {
    display: block !important;
    border: 0 !important;
    padding: 4px 0 !important;
    font-size: 13px !important;
  }
  /* td[data-label] zeigt Label vor Value */
  table.solardesk-data-table tbody td[data-label]::before,
  table.projekte-table tbody td[data-label]::before,
  table.leads-table tbody td[data-label]::before,
  table.anfragen-table tbody td[data-label]::before,
  table.crm-table tbody td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: #8FA3B3;
    margin-right: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-block;
    min-width: 110px;
  }

  /* ---- Row-Containers (Anfragen, Projekte custom DIVs) ---- */
  .anfragen-row,
  .projekte-row,
  .lead-row,
  .kunde-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 14px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }
  .anfragen-row > *,
  .projekte-row > * {
    width: 100% !important;
  }

  /* ============================================================
     DASHBOARD: GridStack-Lock auf Mobile
     Widgets werden in 1-Spalten-Stack rendered. GridStack-Drag
     wird per JS deaktiviert (siehe mobile-guard.js), CSS sorgt
     für saubere Stack-Optik.
     ============================================================ */
  .grid-stack,
  .dashboard-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
  }
  .grid-stack > .grid-stack-item,
  .dashboard-grid > * {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    left: 0 !important;
    top: 0 !important;
  }
  .grid-stack-item-content {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 140px;
  }
  .dashboard-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ============================================================
     KANBAN / BOARDS auf Mobile: horizontal scrollbar
     ============================================================ */
  .kanban-board,
  .aufp-board,
  .deal-board {
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding-bottom: 12px !important;
  }
  .kanban-board > *,
  .aufp-board > *,
  .deal-board > * {
    min-width: 82vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* ============================================================
     TABELLEN auf Mobile: horizontal scrollbar statt rechts abgeschnitten
     (Audit 30.05.2026: bestand, crm, reports, anfragen liefen aus dem Bild)
     ============================================================ */
  .b-table-wrap,
  .table-wrapper,
  .rp-card .heat-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  .b-table-wrap > table,
  .table-wrapper > table {
    min-width: 600px !important;
  }
  /* Tabellen ohne eigenen Scroll-Wrapper: Tabelle selbst scrollbar machen */
  table.heat-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  /* ============================================================
     AUFGABEN-PRO Page Mobile-Layout
     3-Spalten (Side, Main, Drawer) -> 1 Spalte, Drawer als Sheet
     ============================================================ */
  .aufp-page {
    display: block !important;
  }
  .aufp-side {
    display: none !important; /* Saved Views erstmal aus auf Mobile */
  }
  .aufp-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .aufp-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  .aufp-tabs::-webkit-scrollbar { display: none; }
  .aufp-search { width: 100% !important; }
  .aufp-search input { width: 100% !important; }

  /* Right-Drawer als Bottom-Sheet */
  .aufp-drawer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 75vh !important;
    max-height: 75vh !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -20px 60px rgba(0,0,0,0.6) !important;
    z-index: 180 !important;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
  }
  .aufp-drawer.open {
    transform: translateY(0) !important;
  }

  /* ============================================================
     LEAD-KARTEN INDEX Hero-Tiles
     Bereits responsive via existing @media (max-width: 820px),
     hier nur Feintuning: Höhe begrenzen, Margin reduzieren.
     ============================================================ */
  .lkx-page { padding: 16px 12px 60px !important; }
  .lkx-tile { min-height: 360px !important; aspect-ratio: auto !important; }
  .lkx-title { font-size: 30px !important; line-height: 1.1 !important; }
  .lkx-desc { font-size: 12.5px !important; }

  /* ============================================================
     FORMS auf Mobile
     ============================================================ */
  input, select, textarea {
    font-size: 16px !important; /* verhindert iOS-Zoom */
    min-height: 44px;
    border-radius: 10px !important;
  }
  button,
  .btn,
  .aufp-btn {
    min-height: 44px;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  label {
    font-size: 13px !important;
  }

  /* ============================================================
     STAGE-BG (Hintergrund-Effekt) auf Mobile aus, GPU-Spar
     ============================================================ */
  .stage-bg .stars,
  .stage-bg .spotlight,
  .stage-bg .deep,
  .stage-bg .grain {
    display: none !important;
  }
  .stage-bg {
    background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(var(--surf-card-rgb),.18), transparent 60%), var(--bg-solid,#0C0907) !important;
  }

  /* ---- KPI Cards Stack ---- */
  .kpi-grid,
  .kpi-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .kpi-card,
  .stat-card {
    padding: 12px !important;
  }
  .kpi-card .value,
  .stat-card .value {
    font-size: 22px !important;
  }

  /* ---- Map-Iframe vollflächig ---- */
  .leads-frame-wrap {
    left: 0 !important;
    right: 0 !important;
    top: 56px !important;
  }
  .leads-frame-wrap > iframe#leads-frame {
    width: 100% !important;
    height: 100% !important;
  }
}

/* ============================================================
   HEAVY-JS-GUARD CSS-Klasse (wird von mobile-guard.js gesetzt)
   ============================================================ */
body.no-fancy-fx .stage-bg,
body.no-fancy-fx .mouse-glow,
body.no-fancy-fx .ken-burns {
  display: none !important;
  animation: none !important;
}
body.no-fancy-fx * {
  transition-duration: 0.15s !important;
  animation-duration: 0.15s !important;
}

/* === Mobile-Topbar-Fix 14.06.2026: flex statt grid verhindert Spalten-Overlap,
   Topbar entschlackt (Firmenname-Pill + Claude-Suche raus), fixed Theme-Toggle
   nur als Icon mit reserviertem Platz rechts. === */
@media (max-width: 768px) {
  /* Spezifitaet html body.premium-dark (0,2,2) schlaegt die Original-Regeln
     body.premium-dark .topbar (grid) und .topbar-right > * (inline-flex), die
     sonst auch mit !important gewinnen wuerden (siehe CDP-Audit 14.06.). */
  html body.premium-dark .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-right: 50px !important;
    gap: 8px !important;
  }
  html body.premium-dark .topbar-titles { min-width: 0 !important; flex: 1 1 auto !important; overflow: hidden !important; }
  html body.premium-dark .topbar-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  html body.premium-dark .topbar-right { flex: 0 1 auto !important; gap: 8px !important; margin: 0 !important; flex-wrap: wrap !important; justify-content: flex-end !important; row-gap: 6px !important; }
  html body.premium-dark .brand-pill { display: none !important; }
  html body.premium-dark .topbar-search-pill { display: none !important; }
  /* ueberladene Topbars (tracker/partner): redundante Stat-Counts raus, Aktions-Buttons kompakt + umbruchfaehig */
  html body.premium-dark #result-count,
  html body.premium-dark .topbar .result-count,
  html body.premium-dark .topbar .tracker-toolbar-meta,
  html body.premium-dark .topbar #tracker-meta { display: none !important; }
  html body.premium-dark .topbar .btn-sm { padding: 6px 10px !important; font-size: 12px !important; white-space: nowrap !important; }
  #sd-theme-toggle .sd-tt-label { display: none !important; }
  /* Mobil als FAB unten-links: kollidiert nie mit Topbar-Glocke/Buttons */
  #sd-theme-toggle {
    top: auto !important;
    bottom: 18px !important;
    left: 14px !important;
    right: auto !important;
    padding: 11px !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
  }
}

/* ============================================================
   Mobile Lesbarkeit (mb11): genuin zu kleine Label-/Badge-/Meta-Klassen
   auf >=11.5px. Hohe Spezifitaet (html body.premium-dark) schlaegt
   theme-soft-dark-Override. Nur benannte Klassen, nur <=768px.
   ============================================================ */
@media (max-width: 768px) {
  html body.premium-dark .tracker-meta-pill,
  html body.premium-dark .tracker-card-cat,
  html body.premium-dark .tracker-card-path,
  html body.premium-dark .tracker-pruefbericht-status,
  html body.premium-dark .tracker-extlinks-label,
  html body.premium-dark .badge,
  html body.premium-dark .partner-stat-lbl,
  html body.premium-dark .sf-lbl,
  html body.premium-dark .kanban-col-sub,
  html body.premium-dark .kanban-col-prob,
  html body.premium-dark .fc-label,
  html body.premium-dark .fc-sub,
  html body.premium-dark .hero-label,
  html body.premium-dark .stage-lbl,
  html body.premium-dark .section-eyebrow,
  html body.premium-dark .view-tab-count,
  html body.premium-dark .kpi-label,
  html body.premium-dark .dataroom-kpi-label,
  html body.premium-dark .feed-stat-label,
  html body.premium-dark .filter-group-label,
  html body.premium-dark .label,
  html body.premium-dark .nav-section-sub,
  html body.premium-dark .nav-owner-badge,
  html body.premium-dark .sidebar-logo-sub,
  html body.premium-dark .user-role,
  html body.premium-dark .credit-version,
  html body.premium-dark table th {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
}

/* ============================================================
   Mobile Touch-Ziele (mb10): zu kleine Klick-Flaechen auf >=36px bringen.
   Nur eindeutige Buttons + Checkbox/Radio. <=768px.
   ============================================================ */
@media (max-width: 768px) {
  .kanban-col-add {
    min-width: 36px !important;
    min-height: 36px !important;
  }
  .tracker-pruefbericht {
    min-height: 36px !important;
  }
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 18px !important;
    min-height: 18px !important;
  }
}

/* ============================================================
   Mobile Lesbarkeit (mb12): gezielte Container-Bumps fuer uniforme
   Meta-Texte in Karten/Tabellen, die als bare span/th rendern.
   Nur uniforme Bereiche (keine Karten-Titel). <=768px.
   ============================================================ */
@media (max-width: 768px) {
  html body.premium-dark .tracker-pruefbericht span,
  html body.premium-dark .tracker-altpath span,
  html body.premium-dark .tracker-altpath strong,
  html body.premium-dark .tracker-extlinks a,
  html body.premium-dark .invest-card-header span,
  html body.premium-dark .data-table th {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
}