Task 19: Add responsive design for mobile and tablet

- DashboardLayout: Hide sidebar on <lg (1024px), responsive padding
- Dashboard grid: Mobile-first (1 col → 2 col at md/768px)
- Activity grid: Mobile-first (1 col → 2 col at md/768px)
- TopBar: Truncate brand text on mobile, hide 'Remote' on <md
- TopBar session: Show time-only on <xs (480px)
- CommandPalette: Full-width on mobile with reduced padding
- CommandPalette footer: Hidden on mobile
- Touch targets: All interactive elements 48px+ on mobile

All breakpoints follow Tailwind responsive prefixes (xs/sm/md/lg/xl).
Quality checks: typecheck ✓, lint ✓ (1 pre-existing warning), build ✓

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/TopBar.tsx

@@ -34,7 +34,7 @@ export function TopBar({ onSearchClick }: TopBarProps) {
           aria-hidden="true"
         />
         <span
-          className="font-ui"
+          className="font-ui hidden sm:inline"
           style={{
             fontSize: '13px',
             fontWeight: 600,
@@ -44,6 +44,17 @@ export function TopBar({ onSearchClick }: TopBarProps) {
           Headhunt Medical Center
         </span>
         <span
+          className="font-ui sm:hidden"
+          style={{
+            fontSize: '13px',
+            fontWeight: 600,
+            color: 'var(--text-primary)',
+          }}
+        >
+          HMC
+        </span>
+        <span
+          className="hidden md:inline"
           style={{
             fontSize: '11px',
             fontWeight: 400,
@@ -120,7 +131,7 @@ export function TopBar({ onSearchClick }: TopBarProps) {
       </button>
 
       {/* Session info (right) */}
-      <div className="flex items-center gap-3 shrink-0">
+      <div className="flex items-center gap-2 sm:gap-3 shrink-0">
         <span
           className="hidden sm:inline"
           style={{
@@ -132,7 +143,7 @@ export function TopBar({ onSearchClick }: TopBarProps) {
           Dr. A.CHARLWOOD
         </span>
         <span
-          className="font-geist"
+          className="font-geist hidden xs:inline"
           style={{
             fontSize: '11px',
             color: 'var(--text-tertiary)',
@@ -144,6 +155,19 @@ export function TopBar({ onSearchClick }: TopBarProps) {
         >
           Active Session · {currentTime}
         </span>
+        <span
+          className="font-geist xs:hidden"
+          style={{
+            fontSize: '11px',
+            color: 'var(--text-tertiary)',
+            background: 'var(--accent-light)',
+            padding: '3px 8px',
+            borderRadius: '4px',
+            border: '1px solid var(--accent-border)',
+          }}
+        >
+          {currentTime}
+        </span>
       </div>
     </header>
   )