From 45c0c0047f75480cd674c6277a3200b488478331 Mon Sep 17 00:00:00 2001
From: Kerim Atilgan <kerim@familie-atilgan.de>
Date: Fri, 15 May 2026 18:13:50 +0200
Subject: [PATCH] Stitch-styled PDF viewer + .icon-btn helper for modal icon
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Anzeigen / Download / Löschen icons inside the documents modal
and the close X of every modal sit outside <table>, so the previous
"table button" reset didn't reach them — the global blue button
styling shone through.

- Introduce a generic `.icon-btn` class that mirrors the table reset
  (transparent background, no padding, inherit colour). The reset
  rule is now `table button, .icon-btn`.
- Tag the documents modal close button and the view/download/delete
  buttons inside each document card with `icon-btn`. Tailwind classes
  (`text-outline hover:text-primary` etc.) still win for colour.
- Rebuild the PDF viewer modal in Stitch style: clean white card,
  light header with picture_as_pdf glyph + title, body on a soft grey
  surface, footer with chevron navigation buttons and zoom icons.
  Toggle hidden/flex instead of the legacy `.show` class. Removed the
  matching .pdf-viewer-* / .pdf-nav-btn / .pdf-zoom-btn CSS that no
  longer applies.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 public/index.html | 199 +++++++++++-----------------------------------
 public/script.js  |  14 ++--
 2 files changed, 56 insertions(+), 157 deletions(-)

diff --git a/public/index.html b/public/index.html
index 4e80ea5..c9d0f09 100644
--- a/public/index.html
+++ b/public/index.html
@@ -156,11 +156,13 @@
             box-shadow: inset 0 -2px 0 0 #b4c5ff;
         }
 
-        /* Buttons inside data tables are icon-only by default in the new
-           Stitch style. The legacy `button { background, padding, color }`
-           rules would otherwise turn them into solid blue blobs — class-
-           level Tailwind utilities still win for explicit backgrounds. */
-        table button {
+        /* Reset for icon-only buttons (table actions, modal close,
+           pdf zoom). The legacy global `button { background, padding,
+           color }` would otherwise turn them into solid blue blobs.
+           Tailwind utilities like `bg-primary` still win since they
+           share class specificity but come later in the cascade. */
+        table button,
+        .icon-btn {
             background: transparent;
             color: inherit;
             padding: 0;
@@ -650,141 +652,15 @@
         }
 
         /* PDF Viewer Styles */
-        .pdf-viewer-modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.8);
-            z-index: 3000;
-            animation: fadeIn 0.3s ease;
-        }
-
-        .pdf-viewer-modal.show {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .pdf-viewer-content {
-            background: white;
-            border-radius: 12px;
-            width: 90%;
-            height: 90%;
-            max-width: 1200px;
-            max-height: 800px;
-            overflow: hidden;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-            animation: slideIn 0.3s ease;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .pdf-viewer-header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 15px 20px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .pdf-viewer-title {
-            font-size: 18px;
-            font-weight: 600;
-            margin: 0;
-        }
-
-        .pdf-viewer-close {
-            background: none;
-            border: none;
-            color: white;
-            font-size: 24px;
-            cursor: pointer;
-            width: 30px;
-            height: 30px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: background 0.3s ease;
-        }
-
-        .pdf-viewer-close:hover {
-            background: rgba(255, 255, 255, 0.2);
-        }
-
-        .pdf-viewer-body {
-            flex: 1;
-            overflow: auto;
-            padding: 20px;
-            background: #f5f5f5;
-        }
-
+        /* PDF viewer modal now styled with Tailwind in the markup.
+           Only keep the canvas container neutral so the PDF page stands
+           out against the body background. */
         .pdf-canvas-container {
             text-align: center;
             background: white;
             border-radius: 8px;
-            padding: 20px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-        }
-
-        .pdf-controls {
-            background: white;
-            padding: 15px;
-            border-top: 1px solid #ddd;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 15px;
-        }
-
-        .pdf-nav-btn {
-            background: #3498db;
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 14px;
-            transition: background 0.3s ease;
-        }
-
-        .pdf-nav-btn:hover {
-            background: #2980b9;
-        }
-
-        .pdf-nav-btn:disabled {
-            background: #bdc3c7;
-            cursor: not-allowed;
-        }
-
-        .pdf-page-info {
-            font-size: 14px;
-            color: #2c3e50;
-            font-weight: 500;
-        }
-
-        .pdf-zoom-controls {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .pdf-zoom-btn {
-            background: #27ae60;
-            color: white;
-            border: none;
-            padding: 6px 12px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 12px;
-        }
-
-        .pdf-zoom-btn:hover {
-            background: #219a52;
+            padding: 16px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
         }
 
         /* Enhanced Tarifoptionen Styling */
@@ -1862,7 +1738,7 @@
                     <span class="material-symbols-outlined text-primary">description</span>
                     <h3 class="text-title-sm text-on-surface">Dokumente</h3>
                 </div>
-                <button onclick="closeDocumentsModal()" class="text-outline hover:text-on-surface transition-colors" title="Schließen">
+                <button onclick="closeDocumentsModal()" class="icon-btn text-outline hover:text-on-surface transition-colors" title="Schließen">
                     <span class="material-symbols-outlined">close</span>
                 </button>
             </div>
@@ -1883,27 +1759,46 @@
     </div>
 
     <!-- PDF Viewer Modal -->
-    <div id="pdfViewerModal" class="pdf-viewer-modal">
-        <div class="pdf-viewer-content">
-            <div class="pdf-viewer-header">
-                <h3 class="pdf-viewer-title" id="pdfViewerTitle">📋 PDF Viewer</h3>
-                <button class="pdf-viewer-close" onclick="closePdfViewer()">&times;</button>
+    <div id="pdfViewerModal" class="pdf-viewer-modal fixed inset-0 z-[1100] hidden items-center justify-center bg-black/50 p-margin">
+        <div class="bg-surface-container-lowest rounded-xl shadow-[0_10px_30px_rgba(0,0,0,0.25)] border border-outline-variant/30 w-full max-w-[1100px] h-[90vh] flex flex-col overflow-hidden">
+            <div class="flex items-center justify-between px-lg py-md border-b border-outline-variant">
+                <div class="flex items-center gap-sm min-w-0">
+                    <span class="material-symbols-outlined text-primary shrink-0">picture_as_pdf</span>
+                    <h3 class="text-title-sm text-on-surface truncate" id="pdfViewerTitle">PDF Viewer</h3>
+                </div>
+                <button onclick="closePdfViewer()" class="icon-btn text-outline hover:text-on-surface transition-colors" title="Schließen">
+                    <span class="material-symbols-outlined">close</span>
+                </button>
             </div>
-            <div class="pdf-viewer-body">
+            <div class="flex-1 overflow-auto bg-surface-container-low/50 flex items-start justify-center p-md">
                 <div class="pdf-canvas-container">
                     <canvas id="pdfCanvas"></canvas>
                 </div>
             </div>
-            <div class="pdf-controls">
-                <button class="pdf-nav-btn" id="prevPageBtn" onclick="prevPage()">◀ Vorherige</button>
-                <div class="pdf-page-info">
-                    Seite <span id="currentPage">1</span> von <span id="totalPages">1</span>
+            <div class="flex items-center justify-between gap-md px-lg py-md border-t border-outline-variant bg-surface-container-low/50">
+                <div class="flex items-center gap-sm">
+                    <button id="prevPageBtn" onclick="prevPage()"
+                            class="bg-surface-container-high text-on-surface border border-outline-variant hover:bg-surface-variant transition-colors rounded-lg px-md py-sm text-body-sm flex items-center gap-xs disabled:opacity-50 disabled:cursor-not-allowed">
+                        <span class="material-symbols-outlined text-[18px]">chevron_left</span>
+                        Vorherige
+                    </button>
+                    <span class="text-body-sm text-on-surface-variant">
+                        Seite <span id="currentPage" class="font-label-numeric text-on-surface">1</span> von <span id="totalPages" class="font-label-numeric text-on-surface">1</span>
+                    </span>
+                    <button id="nextPageBtn" onclick="nextPage()"
+                            class="bg-surface-container-high text-on-surface border border-outline-variant hover:bg-surface-variant transition-colors rounded-lg px-md py-sm text-body-sm flex items-center gap-xs disabled:opacity-50 disabled:cursor-not-allowed">
+                        Nächste
+                        <span class="material-symbols-outlined text-[18px]">chevron_right</span>
+                    </button>
                 </div>
-                <button class="pdf-nav-btn" id="nextPageBtn" onclick="nextPage()">Nächste ▶</button>
-                <div class="pdf-zoom-controls">
-                    <button class="pdf-zoom-btn" onclick="zoomOut()">-</button>
-                    <span id="zoomLevel">100%</span>
-                    <button class="pdf-zoom-btn" onclick="zoomIn()">+</button>
+                <div class="flex items-center gap-sm">
+                    <button onclick="zoomOut()" class="icon-btn text-outline hover:text-primary transition-colors p-1" title="Verkleinern">
+                        <span class="material-symbols-outlined text-[22px]">remove</span>
+                    </button>
+                    <span id="zoomLevel" class="font-label-numeric text-label-numeric text-on-surface min-w-[48px] text-center">100%</span>
+                    <button onclick="zoomIn()" class="icon-btn text-outline hover:text-primary transition-colors p-1" title="Vergrößern">
+                        <span class="material-symbols-outlined text-[22px]">add</span>
+                    </button>
                 </div>
             </div>
         </div>
diff --git a/public/script.js b/public/script.js
index f7057dc..592f4f1 100644
--- a/public/script.js
+++ b/public/script.js
@@ -825,15 +825,15 @@ async function showDocuments(schaltungId) {
                     </div>
                     <div class="flex items-center gap-xs shrink-0">
                         ${showView ? `<button data-doc-action="view" data-id="${doc.id}" data-name="${safeName}" title="Anzeigen"
-                                class="text-outline hover:text-primary transition-colors p-1">
+                                class="icon-btn text-outline hover:text-primary transition-colors p-1">
                                 <span class="material-symbols-outlined text-[20px]">visibility</span>
                             </button>` : ''}
                         <button data-doc-action="download" data-id="${doc.id}" title="Download"
-                                class="text-outline hover:text-primary transition-colors p-1">
+                                class="icon-btn text-outline hover:text-primary transition-colors p-1">
                             <span class="material-symbols-outlined text-[20px]">download</span>
                         </button>
                         <button data-doc-action="delete" data-id="${doc.id}" data-name="${safeName}" data-schaltung-id="${schaltungId}" title="Löschen"
-                                class="text-outline hover:text-error transition-colors p-1">
+                                class="icon-btn text-outline hover:text-error transition-colors p-1">
                             <span class="material-symbols-outlined text-[20px]">delete</span>
                         </button>
                     </div>
@@ -3487,7 +3487,9 @@ async function viewPdfDocument(documentId, filename) {
         await renderPage(currentPage);
 
         // Show modal
-        document.getElementById('pdfViewerModal').classList.add('show');
+        const m = document.getElementById('pdfViewerModal');
+        m.classList.remove('hidden');
+        m.classList.add('flex');
 
         // Update navigation buttons
         updateNavigationButtons();
@@ -3572,7 +3574,9 @@ function updateZoomLevel() {
 }
 
 function closePdfViewer() {
-    document.getElementById('pdfViewerModal').classList.remove('show');
+    const m = document.getElementById('pdfViewerModal');
+    m.classList.add('hidden');
+    m.classList.remove('flex');
 
     // Cleanup
     currentPdf = null;