/* dashboard_mobile_fix_v2.css */
/* Stärkere mobile Korrektur NUR für Dashboard.
   Desktop bleibt unverändert. */

@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body:has([data-page="dashboard"]),
  body.dashboard-page {
    overflow-x: hidden !important;
  }

  /* Allgemeine Dashboard-Breite begrenzen */
  main,
  .container {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Dashboard Hauptcontainer */
  .dashboard,
  .dashboard-page,
  .dashboard-central,
  .dashboard-zentrale,
  .dashboard-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Alle Grids im Dashboard auf eine Spalte */
  .dashboard *,
  .dashboard-page *,
  .dashboard-central *,
  .dashboard-zentrale * {
    box-sizing: border-box !important;
  }

  .dashboard [style*="display:grid"],
  .dashboard [style*="display: grid"],
  .dashboard-page [style*="display:grid"],
  .dashboard-page [style*="display: grid"],
  .dashboard-central [style*="display:grid"],
  .dashboard-central [style*="display: grid"],
  .dashboard-zentrale [style*="display:grid"],
  .dashboard-zentrale [style*="display: grid"],
  .dashboard .grid,
  .dashboard .grid-2,
  .dashboard .grid-3,
  .dashboard .grid-4,
  .dashboard-grid,
  .stats-grid,
  .summary-grid,
  .overview-grid,
  .quick-overview,
  .quick-summary {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Falls Dashboard keine eigene Klasse hat: typische Kartenbereiche im Main umbrechen */
  main > div,
  main > section,
  main .card,
  main .panel {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Karten volle Breite */
  .dashboard .card,
  .dashboard-page .card,
  .dashboard-central .card,
  .dashboard-zentrale .card,
  main .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Obere vier Zentrale-Kacheln untereinander */
  .dashboard .stat-card,
  .dashboard .summary-card,
  .dashboard .metric-card,
  .dashboard-page .stat-card,
  .dashboard-page .summary-card,
  .dashboard-page .metric-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Kalender + Finanzen Schnellübersicht untereinander */
  .calendar-finance-grid,
  .dashboard-calendar-finance,
  .quick-section-grid,
  .dashboard .calendar-grid,
  .dashboard .finance-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Breite Inhalte nicht aus dem Bildschirm laufen lassen */
  .dashboard table,
  .dashboard-page table,
  .dashboard-central table,
  .dashboard-zentrale table {
    max-width: 100% !important;
  }

  .dashboard canvas,
  .dashboard-page canvas,
  .dashboard-central canvas,
  .dashboard-zentrale canvas {
    max-width: 100% !important;
  }
}