Styling

public/css/style.css

@@ -24,10 +24,10 @@ body {
 
 /* Navbar */
 .navbar {
-  background-color: #2c3e50;
+  background-color: #0066FF;
   color: white;
   padding: 15px 0;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .navbar .container {
@@ -104,6 +104,15 @@ body {
   background-color: #7f8c8d;
 }
 
+.btn-logout {
+  background-color: #e74c3c;
+  color: white;
+}
+
+.btn-logout:hover {
+  background-color: #c0392b;
+}
+
 .btn-success {
   background-color: #27ae60;
   color: white;
@@ -146,14 +155,14 @@ body {
   justify-content: center;
   align-items: center;
   min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #0066FF;
 }
 
 .login-box {
   background: white;
   padding: 40px;
   border-radius: 8px;
-  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
   width: 100%;
   max-width: 400px;
 }
@@ -242,7 +251,7 @@ body {
   border-color: #3498db;
   background-color: #f0f8ff;
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .role-checkbox-label-small {
@@ -259,7 +268,7 @@ body {
   flex-shrink: 0;
 }
 
-.role-checkbox-input:checked + .role-checkbox-text {
+.role-checkbox-input:checked+.role-checkbox-text {
   font-weight: 600;
   color: #2c3e50;
 }
@@ -308,9 +317,10 @@ body {
   background: white;
   padding: 30px;
   border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   flex: 1;
-  min-width: 0; /* Ermöglicht Flexbox-Shrinking */
+  min-width: 0;
+  /* Ermöglicht Flexbox-Shrinking */
 }
 
 /* User Stats Panel */
@@ -318,7 +328,7 @@ body {
   background: white;
   padding: 20px;
   border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   width: 280px;
   flex-shrink: 0;
   box-sizing: border-box;
@@ -454,7 +464,7 @@ table input[type="text"] {
   background: white;
   padding: 30px;
   border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   width: 100%;
 }
 
@@ -577,7 +587,7 @@ table input[type="text"] {
   background: white;
   padding: 30px 40px;
   border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   width: 100%;
 }
 
@@ -768,7 +778,7 @@ table input[type="text"] {
   z-index: 1;
 }
 
-.pdf-iframe:not([src=""]) ~ .pdf-fallback {
+.pdf-iframe:not([src=""])~.pdf-fallback {
   display: none;
 }
 
@@ -917,7 +927,7 @@ table input[type="text"] {
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 25px 30px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   margin-bottom: 20px;
 }
 
@@ -997,14 +1007,14 @@ table input[type="text"] {
   .dashboard-layout {
     flex-direction: column;
   }
-  
+
   .user-stats-panel {
     width: 100%;
     display: flex;
     gap: 15px;
     flex-wrap: wrap;
   }
-  
+
   .stat-card {
     flex: 1;
     min-width: 200px;
@@ -1016,39 +1026,39 @@ table input[type="text"] {
   .dashboard-container {
     padding: 15px;
   }
-  
+
   .form-row {
     grid-template-columns: 1fr;
   }
-  
+
   .week-selector {
     flex-direction: column;
     gap: 15px;
   }
-  
+
   table {
     font-size: 12px;
   }
-  
+
   table th,
   table td {
     padding: 8px;
   }
-  
+
   .user-stats-panel {
     flex-direction: column;
   }
-  
+
   .stat-card {
     width: 100%;
   }
-  
+
   .activity-row {
     grid-template-columns: 1fr;
   }
-  
+
   .overtime-vacation-controls {
     flex-direction: column;
     align-items: flex-start;
   }
-}
+}