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/pages/MailDetailPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import {
-  Card, Button, Space, Spin, Tag, Typography, Table, message, Empty, Popconfirm
+  Card, Button, Space, Spin, Tag, Typography, Table, message, Empty, Popconfirm, theme
 } from 'antd';
 import { ArrowLeftOutlined, FileTextOutlined, CloseCircleOutlined, LinkOutlined } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
@@ -23,6 +23,7 @@ export default function MailDetailPage() {
   const [loading, setLoading] = useState(true);
   const [previewLoading, setPreviewLoading] = useState(false);
   const [wizardOpen, setWizardOpen] = useState(false);
+  const { token } = theme.useToken();
 
   useEffect(() => {
     if (!id) return;
@@ -208,7 +209,7 @@ export default function MailDetailPage() {
 
         {/* Rechte Seite: Anhänge + Vorschau */}
         <Card size="small" styles={{ body: { padding: 0, display: 'flex', flexDirection: 'column', height: 'calc(100vh - 200px)' } }}>
-          <div style={{ flex: '0 0 auto', borderBottom: '1px solid #303030', maxHeight: 240, overflow: 'auto' }}>
+          <div style={{ flex: '0 0 auto', borderBottom: `1px solid ${token.colorBorder}`, maxHeight: 240, overflow: 'auto' }}>
             <Table<EmailAttachment>
               columns={columns}
               dataSource={attachments}
@@ -223,7 +224,7 @@ export default function MailDetailPage() {
               locale={{ emptyText: <Empty description="Keine Anhänge" image={Empty.PRESENTED_IMAGE_SIMPLE} /> }}
             />
           </div>
-          <div style={{ flex: 1, minHeight: 0, background: '#1a1a2e' }}>
+          <div style={{ flex: 1, minHeight: 0, background: token.colorBgLayout }}>
             {previewLoading ? (
               <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
                 <Spin />
@@ -240,7 +241,7 @@ export default function MailDetailPage() {
               )
             ) : (
               <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', color: '#888' }}>
-                <Space vertical align="center">
+                <Space direction="vertical" align="center">
                   <FileTextOutlined style={{ fontSize: 48 }} />
                   <Text type="secondary">Kein Anhang ausgewählt</Text>
                 </Space>