Darkmode fixes

views/admin.ejs

@@ -37,12 +37,12 @@
       
       <!-- Benutzer anlegen - Zusammenklappbar -->
       <div class="add-user-section" style="margin-top: 20px;">
-        <div class="collapsible-header" onclick="toggleAddUserSection()" style="cursor: pointer; padding: 15px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;">
+        <div class="collapsible-header" onclick="toggleAddUserSection()">
           <h3 style="margin: 0;">Neuen Benutzer anlegen</h3>
           <span id="addUserToggleIcon" style="font-size: 18px; transition: transform 0.3s;">▼</span>
         </div>
         
-        <div id="addUserContent" style="display: none; padding: 20px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff;">
+        <div id="addUserContent" class="collapsible-content">
         <div class="add-user-form">
         <form id="addUserForm">
           <div class="form-row">
@@ -122,12 +122,12 @@
 
       <!-- Benutzer-Liste - Zusammenklappbar -->
       <div class="user-list-section" style="margin-top: 20px;">
-        <div class="collapsible-header" onclick="toggleUserListSection()" style="cursor: pointer; padding: 15px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;">
+        <div class="collapsible-header" onclick="toggleUserListSection()">
           <h3 style="margin: 0;">Benutzer-Liste</h3>
           <span id="userListToggleIcon" style="font-size: 18px; transition: transform 0.3s;">▼</span>
         </div>
         
-        <div id="userListContent" style="display: none; padding: 20px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff; overflow-x: auto; max-width: 100%;">
+        <div id="userListContent" class="collapsible-content collapsible-content-scroll">
         <div class="user-list" style="min-width: 100%;">
         <table style="width: 100%; min-width: 900px;">
           <thead>
@@ -224,12 +224,12 @@
       </div>
 
       <div class="options-section" style="margin-top: 40px;">
-        <div class="collapsible-header" onclick="toggleOptionsSection()" style="cursor: pointer; padding: 15px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;">
+        <div class="collapsible-header" onclick="toggleOptionsSection()">
           <h2 style="margin: 0;">Optionen</h2>
           <span id="optionsToggleIcon" style="font-size: 18px; transition: transform 0.3s;">▼</span>
         </div>
         
-        <div id="optionsContent" style="display: none; padding: 20px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff;">
+        <div id="optionsContent" class="collapsible-content">
         <div class="options-form">
           <h3>Wochenend-Prozentsätze</h3>
           <p style="margin-bottom: 20px; color: #666;">Konfigurieren Sie die Prozentsätze für die Wochenendstunden. 100% entspricht normal, 150% entspricht 1,5 mal, 200% entspricht doppelt.</p>
@@ -269,12 +269,12 @@
       </div>
 
       <div class="ldap-sync-section" style="margin-top: 40px;">
-        <div class="collapsible-header" onclick="toggleLDAPSection()" style="cursor: pointer; padding: 15px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;">
+        <div class="collapsible-header" onclick="toggleLDAPSection()">
           <h2 style="margin: 0;">LDAP-Synchronisation</h2>
           <span id="ldapToggleIcon" style="font-size: 18px; transition: transform 0.3s;">▼</span>
         </div>
         
-        <div id="ldapContent" style="display: none; padding: 20px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff;">
+        <div id="ldapContent" class="collapsible-content">
         <div class="ldap-config-form">
           <h3>LDAP-Konfiguration</h3>
           <form id="ldapConfigForm">
@@ -394,12 +394,12 @@
       </div>
 
       <div class="mssql-config-section" style="margin-top: 40px;">
-        <div class="collapsible-header" onclick="toggleMssqlSection()" style="cursor: pointer; padding: 15px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;">
+        <div class="collapsible-header" onclick="toggleMssqlSection()">
           <h2 style="margin: 0;">MSSQL-Projektsuche Konfiguration</h2>
           <span id="mssqlToggleIcon" style="font-size: 18px; transition: transform 0.3s;">▼</span>
         </div>
         
-        <div id="mssqlContent" style="display: none; padding: 20px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff;">
+        <div id="mssqlContent" class="collapsible-content">
         <div class="mssql-config-form">
           <h3>MSSQL-Verbindungsdaten</h3>
           <p style="margin-bottom: 20px; color: #666;">
@@ -443,12 +443,12 @@
       </div>
 
       <div class="options-section" style="margin-top: 40px;">
-        <div class="collapsible-header" onclick="toggleTimesheetMaintenanceSection()" style="cursor: pointer; padding: 15px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;">
+        <div class="collapsible-header" onclick="toggleTimesheetMaintenanceSection()">
           <h2 style="margin: 0;">Datenbankpflege – doppelte Timesheet-Einträge</h2>
           <span id="timesheetMaintenanceToggleIcon" style="font-size: 18px; transition: transform 0.3s;">▼</span>
         </div>
         
-        <div id="timesheetMaintenanceContent" style="display: none; padding: 20px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff;">
+        <div id="timesheetMaintenanceContent" class="collapsible-content">
           <p style="margin-bottom: 15px; color: #666;">
             Es werden alle Tage angezeigt, an denen ein Mitarbeiter mehr als einen Eintrag in der Tabelle <code>timesheet_entries</code> hat
             (Schlüssel: Benutzer + Datum). Über diese Übersicht können Sie fehlerhafte Einträge gezielt löschen.
@@ -463,12 +463,12 @@
       </div>
 
       <div class="pdf-archive-section" style="margin-top: 40px;">
-        <div class="collapsible-header" onclick="togglePdfArchiveSection()" style="cursor: pointer; padding: 15px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;">
+        <div class="collapsible-header" onclick="togglePdfArchiveSection()">
           <h2 style="margin: 0;">PDF-Archiv (Timesheets)</h2>
           <span id="pdfArchiveToggleIcon" style="font-size: 18px; transition: transform 0.3s;">▼</span>
         </div>
 
-        <div id="pdfArchiveContent" style="display: none; padding: 20px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff;">
+        <div id="pdfArchiveContent" class="collapsible-content">
           <div class="form-row" style="display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end;">
             <div class="form-group" style="min-width: 180px;">
               <label for="pdfYearSelect">Jahr</label>

views/overtime-breakdown.ejs

@@ -189,12 +189,12 @@
         <span class="summary-label">Manuelle Korrektur (Verwaltung):</span>
         <span class="summary-value" id="overtimeOffset">-</span>
       </div>
-      <div id="correctionsSection" style="margin-top: 15px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #e0e0e0; display: none;">
-        <div id="correctionsHeader" class="collapsible-header" style="cursor: pointer; padding: 12px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;">
-          <span style="font-weight: 600; color: #2c3e50;">Korrekturen durch die Verwaltung</span>
+      <div id="correctionsSection" class="collapsible-section" style="display: none;">
+        <div id="correctionsHeader" class="collapsible-header">
+          <span class="collapsible-title">Korrekturen durch die Verwaltung</span>
           <span id="correctionsToggleIcon" style="font-size: 16px; transition: transform 0.3s;">▼</span>
         </div>
-        <div id="correctionsContent" style="display: none; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff; padding: 10px 12px;">
+        <div id="correctionsContent" class="collapsible-content" style="padding: 10px 12px;">
           <ul id="correctionsList" style="margin: 0; padding-left: 18px;"></ul>
         </div>
       </div>

views/projekt-auswertung.ejs

@@ -94,7 +94,7 @@
                 </td>
               </tr>
               <% if (activities.length > 0) { %>
-                <tr class="employee-details-row" data-user-id="<%= row.userId %>" style="display: none; background-color: #fafafa;">
+                <tr class="employee-details-row" data-user-id="<%= row.userId %>" style="display: none;">
                   <td colspan="3">
                     <div style="padding: 10px 5px 5px 5px;">
                       <strong>Aufschlüsselung für <%= row.firstname %> <%= row.lastname %>:</strong>

views/verwaltung.ejs

@@ -759,22 +759,15 @@
       `;
 
       const box = document.createElement('div');
-      box.style.cssText = `
-        background: #fff;
-        border-radius: 8px;
-        width: 90%;
-        max-width: 520px;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-        padding: 18px 18px 14px 18px;
-      `;
+      box.className = 'app-modal-card';
 
       box.innerHTML = `
         <div style="display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 8px;">
-          <h3 style="margin: 0; font-size: 16px; color: #2c3e50;">${title}</h3>
+          <h3 style="margin: 0; font-size: 16px; color: var(--text-strong);">${title}</h3>
           <button type="button" data-action="close" class="btn btn-secondary btn-sm" style="padding: 6px 10px;">✕</button>
         </div>
-        <div style="color:#666; font-size: 13px; margin-bottom: 10px;">${promptText}</div>
-        <textarea data-role="reason" rows="4" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-family: inherit; font-size: 13px; resize: vertical;" placeholder="Grund..."></textarea>
+        <div style="color: var(--text-muted); font-size: 13px; margin-bottom: 10px;">${promptText}</div>
+        <textarea data-role="reason" rows="4" style="width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; font-family: inherit; font-size: 13px; resize: vertical; background: var(--bg-surface); color: var(--text-main);" placeholder="Grund..."></textarea>
         <div data-role="error" style="display:none; margin-top: 8px; color:#dc3545; font-size: 13px;"></div>
         <div style="display:flex; justify-content:flex-end; gap: 10px; margin-top: 12px;">
           <button type="button" data-action="cancel" class="btn btn-secondary">Abbrechen</button>