/* ═══════════════════════════════════════════
   Responsive — Mobile-first breakpoints
   ═══════════════════════════════════════════ */

/* ── Tablet (768px+) ── */
@media (min-width: 768px) {
  .app-sidebar {
    display: flex;
    width: var(--sidebar-w-narrow);
  }

  .app-sidebar .nav-label,
  .app-sidebar .sidebar-subtitle,
  .app-sidebar .sidebar-user-info { display: none; }

  .app-sidebar .sidebar-logo { font-size: var(--fs-sm); text-align: center; }
  .app-sidebar .sidebar-header { text-align: center; }

  .app-sidebar .nav-item {
    justify-content: center;
    padding: 12px;
  }

  .app-sidebar .nav-item.active::before {
    top: 8px;
    bottom: 8px;
  }

  .app-sidebar .sidebar-avatar {
    margin: 0 auto;
  }

  /* Narrow sidebar: only show icon in theme toggle */
  .app-sidebar .theme-toggle span { display: none; }
  .app-sidebar .theme-toggle { padding: var(--sp-sm); }

  .app-main {
    margin-left: var(--sidebar-w-narrow);
  }

  .app-bottom-nav { display: none; }

  .app-content {
    padding: var(--sp-lg);
    padding-bottom: var(--sp-lg);
  }

  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .sheet {
    max-width: 560px;
    margin: 0 auto;
    border-radius: var(--r-xl);
    margin-bottom: var(--sp-lg);
  }

  .overlay {
    align-items: center;
    justify-content: center;
  }
}

/* ── Desktop (1024px+) ── */
@media (min-width: 1024px) {
  .app-sidebar {
    width: var(--sidebar-w);
  }

  .app-sidebar .nav-label,
  .app-sidebar .sidebar-subtitle,
  .app-sidebar .sidebar-user-info { display: unset; }

  .app-sidebar .sidebar-logo { font-size: var(--fs-lg); text-align: left; }
  .app-sidebar .sidebar-header { text-align: left; }

  .app-sidebar .nav-item {
    justify-content: flex-start;
    padding: 10px var(--sp-md);
  }

  .app-sidebar .sidebar-avatar { margin: 0; }

  .app-main {
    margin-left: var(--sidebar-w);
  }

  .app-content {
    padding: var(--sp-xl);
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
  }

  .grid-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Calendar Mobile Overrides ── */
@media (max-width: 767px) {
  .cal-day-layout {
    grid-template-columns: 1fr;
  }

  .cal-week-h {
    min-height: 400px;
  }

  .cal-day-col-header {
    font-size: 9px;
  }

  .cal-time-col { width: 32px; }
  .cal-time-label { font-size: 8px; }

  .cal-month-cell { min-height: 56px; }
  .cal-month-grid { grid-template-columns: 28px repeat(7, 1fr); }
  .cal-month-header-row { grid-template-columns: 28px repeat(7, 1fr); }

  .cal-month-v-grid { grid-template-columns: 40px repeat(6, 1fr) !important; }
  .cal-mv-cell { min-height: 56px; }

  .calendar-controls { flex-wrap: wrap; gap: var(--sp-xs); justify-content: center; }
  .calendar-separator { display: none; }
  .cal-nav-btn { min-width: 64px; font-size: 11px; padding: 6px 8px; }
  .calendar-nav-row { gap: var(--sp-2xs); }
  .calendar-nav-title { font-size: var(--fs-xs); min-width: 80px; }
  .calendar-view-btn { padding: 4px 8px; font-size: 11px; }

  .calendar-day-entries { flex-wrap: nowrap; padding: var(--sp-xs); gap: var(--sp-xs); }
  .calendar-day-entries-date { font-size: var(--fs-xs); }

  .cal-week-h { height: 500px; }

  .cal-event-overlay { font-size: 9px; padding: 2px 3px; }

  .report-nav { flex-wrap: wrap; justify-content: center; }
  .report-date { flex-basis: 100%; text-align: center; order: -1; }
  .report-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Large (1440px+) ── */
@media (min-width: 1440px) {
  .grid-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── page-heute: Schnellerfassung (Schritt 9.0, Variante B) ── */
/* EIN Render-Pfad (kein Doppel-DOM mehr): heute.js rendert .tile-quick genau
   einmal im Grid. Desktop (≥ 768px, ohne Bottom-Nav) sitzt sie im Grid-Flow.
   Mobile (≤ 767px, Bottom-Nav sichtbar) wird sie aus dem Flow gelöst und als
   floating Card über der Bottom-Nav fixiert — Daumen-Erreichbarkeit. */
@media (max-width: 767px) {
  .tile-quick {
    position: fixed;
    bottom: calc(var(--bottom-nav-h, 64px) + var(--sp-sm));
    left: var(--sp-sm);
    right: var(--sp-sm);
    z-index: 50;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  }
}