feat: improve frontend accessibility, dark mode, and UX

- Replace div with semantic button elements in AppLayout for accessibility
- Use Ant Design theme tokens instead of hardcoded colors in MailDetailPage
- Add loading state to refresh buttons and pagination info
- Add German empty state messages to tables
- Clean up unnecessary ConfigProvider wrappers

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

paperless-frontend/src/layouts/AppLayout.tsx

@@ -125,7 +125,7 @@ export default function AppLayout() {
         }}
       >
         {/* Logo / Collapse-Toggle */}
-        <div
+        <button
           onClick={() => setCollapsed(!collapsed)}
           style={{
             height: 56,
@@ -134,7 +134,11 @@ export default function AppLayout() {
             justifyContent: 'center',
             cursor: 'pointer',
             userSelect: 'none',
+            border: 'none',
             borderBottom: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : '#e2e4ea'}`,
+            background: 'transparent',
+            width: '100%',
+            padding: 0,
             transition: 'background 0.2s',
           }}
           onMouseEnter={(e) => (e.currentTarget.style.background = isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.02)')}
@@ -143,7 +147,7 @@ export default function AppLayout() {
           <Text strong style={{ color: logoColor, fontSize: collapsed ? 14 : 18, transition: 'font-size 0.2s' }}>
             {collapsed ? 'PM' : 'Paperless'}
           </Text>
-        </div>
+        </button>
 
         {/* Navigation Menu */}
         <Menu
@@ -179,7 +183,7 @@ export default function AppLayout() {
         >
           {/* Theme Toggle */}
           <Tooltip title={isDark ? 'Light Mode' : 'Dark Mode'} placement="right">
-            <div
+            <button
               onClick={toggleTheme}
               style={{
                 display: 'flex',
@@ -190,14 +194,17 @@ export default function AppLayout() {
                 cursor: 'pointer',
                 color: subtleColor,
                 justifyContent: collapsed ? 'center' : 'flex-start',
-                transition: 'all 0.2s',
+                border: 'none',
+                background: 'transparent',
+                width: '100%',
+                transition: 'background 0.2s',
               }}
               onMouseEnter={(e) => (e.currentTarget.style.background = isDark ? 'rgba(255,255,255,0.08)' : '#eef1f8')}
               onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
             >
               {isDark ? <SunOutlined style={{ fontSize: 16 }} /> : <MoonOutlined style={{ fontSize: 16 }} />}
               {!collapsed && <Text style={{ color: subtleColor, fontSize: 13 }}>{isDark ? 'Light Mode' : 'Dark Mode'}</Text>}
-            </div>
+            </button>
           </Tooltip>
 
           {/* User Menu */}