/* ═══════════════════════════════════════════════════════════
   Mini Master — Responsive (Mobile-first Breakpoints)
   ═══════════════════════════════════════════════════════════ */

/* Tablet: 769px – 1024px */
@media (max-width: 1024px) {
    .two-col        { grid-template-columns: 1fr; }
    .stats-two-col  { grid-template-columns: 1fr; }
    .stat-row       { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: ≤ 768px */
@media (max-width: 768px) {
    /* Shell: leere Topbar-Grid-Zeile kollabieren */
    .shell {
        grid-template-rows: 1fr;
    }

    /* Topbar ausblenden, Mobile Header anzeigen */
    .topbar        { display: none; }
    .mobile-header { display: flex; }

    /* Main Padding für Mobile Header oben + Bottom Nav unten */
    .main { padding: 70px 16px 90px; }

    /* 2-spaltig → 1-spaltig */
    .two-col        { grid-template-columns: 1fr; }
    .stats-two-col  { grid-template-columns: 1fr; }
    .stat-row       { grid-template-columns: 1fr 1fr; }
    .cards-grid     { grid-template-columns: 1fr; }

    /* Formulare */
    .form-row { grid-template-columns: 1fr; }
    .frow     { grid-template-columns: 1fr; gap: 0; }

    /* Auth */
    .auth-shell  { padding: 16px; }
    .auth-panel  { padding: 20px; }
    .auth-logo   { margin-bottom: 24px; }
    .auth-footer { flex-direction: column; align-items: center; text-align: center; }
    .legal-links { justify-content: center; }

    /* Modal */
    .modal        { margin: 0 8px; }
    .modal-body   { padding: 16px; }
    .modal-footer { padding: 12px 16px; }

    /* Page Header */
    .page-head  { flex-direction: column; align-items: flex-start; gap: 12px; }
    .page-title { font-size: 28px; }

    /* Toast über Bottom Nav */
    .toast-container { bottom: 90px; right: 12px; left: 12px; }
    .toast           { max-width: none; }
}

/* Small Mobile: ≤ 400px */
@media (max-width: 400px) {
    .stat-row         { grid-template-columns: 1fr; }
    .bottom-nav-item  { padding: 8px 10px; }
    .stat-card-value  { font-size: 32px; }
}

/* ─── PWA Standalone Mode ────────────────────────────────────── */
@media (display-mode: standalone) {
    .mobile-header { padding-top: calc(10px + env(safe-area-inset-top)); }
    .bottom-nav    { padding-bottom: env(safe-area-inset-bottom); }
    .main          { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* ─── Print ──────────────────────────────────────────────────── */
@media print {
    .topbar, .mobile-header,
    .bottom-nav, .modal-backdrop,
    .toast-container, .levelup-overlay { display: none !important; }
    .shell { display: block; }
    .main  { padding: 20px; }
    body   { background: white; color: black; }
}