fix: lunch before dinner in columns, responsive mobile layout

- models.py: ORDER BY CASE so lunch always appears before dinner in the
  dashboard table (was alphabetical, putting dinner first).
- style.css: add @media (max-width: 600px) with mobile-friendly layout:
  stacked navbar, full-width dashboard header, reduced padding/margins,
  larger touch targets for chips/buttons, stacked manage forms, and
  compact table cells.

models.py

@@ -272,7 +272,7 @@ def ensure_meal_periods(for_date: date) -> list[dict]:
             (date_str,),
         )
         rows = db.execute(
-            "SELECT id, date, meal_type FROM meal_periods WHERE date = ? ORDER BY meal_type",
+            "SELECT id, date, meal_type FROM meal_periods WHERE date = ? ORDER BY CASE meal_type WHEN 'lunch' THEN 1 WHEN 'dinner' THEN 2 END",
             (date_str,),
         ).fetchall()
         return [dict(r) for r in rows]

static/style.css

@@ -256,3 +256,75 @@ body {
 .lang-link:hover { background: #eee; color: var(--text); }
 .lang-active { background: var(--primary); color: #fff; }
 .lang-active:hover { background: #0d47a1; color: #fff; }
+
+/* ── Responsive ── */
+@media (max-width: 600px) {
+    .navbar {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        padding: 10px 16px;
+    }
+    .nav-right {
+        width: 100%;
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+    .container {
+        margin: 16px auto;
+        padding: 0 8px;
+    }
+    .dashboard-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .dashboard-header h2 {
+        font-size: 1.1rem;
+    }
+    .date-nav {
+        width: 100%;
+        justify-content: space-between;
+    }
+    .date-display {
+        font-size: 0.85rem;
+    }
+    .meal-table th,
+    .meal-table td {
+        padding: 8px 10px;
+        font-size: 0.85rem;
+    }
+    .meal-col {
+        min-width: 140px;
+    }
+    .user-cell {
+        min-width: 70px;
+    }
+    .chip {
+        padding: 8px 14px;
+        font-size: 0.8rem;
+    }
+    .form-card {
+        margin: 16px auto;
+        padding: 20px 16px;
+        max-width: 100%;
+    }
+    .manage-forms {
+        flex-direction: column;
+        gap: 12px;
+    }
+    .manage-form {
+        min-width: 0;
+        flex: none;
+    }
+    .btn {
+        padding: 8px 12px;
+        font-size: 0.85rem;
+    }
+    .btn-sm {
+        padding: 6px 10px;
+        font-size: 0.8rem;
+    }
+    .action-col {
+        width: auto;
+    }
+}