diff --git a/app/globals.css b/app/globals.css index e116f86..e9ce74e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -201,6 +201,7 @@ button, input, textarea, select { font: inherit; } .pd-border-emerald { border-color: #a7f3d0; }.pd-border-indigo { border-color: #c7d2fe; }.pd-border-blue { border-color: #bfdbfe; }.pd-border-amber { border-color: #fde68a; }.pd-border-purple { border-color: #e9d5ff; }.pd-border-red { border-color: #fecaca; }.pd-border-slate { border-color: #cbd5e1; } .pd-dot-emerald { background: #10b981; }.pd-dot-indigo { background: #6366f1; }.pd-dot-blue { background: #3b82f6; }.pd-dot-amber { background: #f59e0b; }.pd-dot-purple { background: #a855f7; }.pd-dot-red { background: #ef4444; }.pd-dot-slate { background: #64748b; } .pd-mobile-nav { display: none; } +.pd-sr-only { border: 0 !important; clip: rect(0,0,0,0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } @media (max-width: 1200px) { .pd-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .pd-dashboard-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .pd-shell { display: block; padding-bottom: 86px; } .pd-sidebar { display: none; } .pd-mobile-brand { display: flex; } .pd-topbar { align-items: stretch; flex-direction: column; } .pd-top-actions { justify-content: space-between; } .pd-header-row { align-items: flex-start; flex-direction: column; } .pd-mobile-nav { align-items: center; background: rgba(255,255,255,.94); border-top: 1px solid #e2e8f0; bottom: 0; display: grid; grid-template-columns: repeat(5,1fr); left: 0; padding: 10px 10px calc(env(safe-area-inset-bottom) + .75rem); position: fixed; right: 0; z-index: 30; } .pd-mobile-nav button { background: transparent; border: 0; color: #64748b; display: grid; font-size: .72rem; font-weight: 900; gap: 3px; place-items: center; } .pd-mobile-nav span { position: relative; } .pd-mobile-nav i { background: #f59e0b; border-radius: 999px; height: 7px; position: absolute; right: -5px; top: -3px; width: 7px; } } @media (max-width: 620px) { .pd-content, .pd-topbar { padding: 18px; } .pd-stat-grid, .pd-mini-grid { grid-template-columns: 1fr; } .pd-hero-actions, .pd-badges { align-items: stretch; flex-direction: column; } .pd-primary-btn, .pd-secondary-btn, .pd-evidence { width: 100%; } .pd-event-title { align-items: flex-start; flex-direction: column; gap: 2px; } } diff --git a/components/pandora/MobileBottomNav.tsx b/components/pandora/MobileBottomNav.tsx index 7040a2b..eb0df40 100644 --- a/components/pandora/MobileBottomNav.tsx +++ b/components/pandora/MobileBottomNav.tsx @@ -1,4 +1,4 @@ import { Brain, Gauge, History, ListChecks, MoreHorizontal } from "lucide-react"; import { mobileNavItems } from "./nav-items"; const icons = [Gauge, History, ListChecks, Brain, MoreHorizontal]; -export function MobileBottomNav({ activeNav, onNavChange }: { activeNav: string; onNavChange: (item: string) => void }) { return ; } +export function MobileBottomNav({ activeNav, onNavChange }: { activeNav: string; onNavChange: (item: string) => void }) { return