Refactors employee details and UI controls

Enhances employee hours view with dynamic weekly schedule rendering
Updates toggle slider and theme switch components with improved interactions
Adds more flexible notification and settings configurations for employees

Improves user experience by streamlining UI controls and schedule display

PlanTempus.Application/wwwroot/css/controls.css

@@ -35,7 +35,7 @@ swp-toggle-slider {
   display: inline-flex;
   width: fit-content;
   background: var(--color-background);
-  border-radius: var(--radius-md);
+  border-radius: 6px;
   border: 1px solid var(--color-border);
   overflow: hidden;
   position: relative;
@@ -48,36 +48,71 @@ swp-toggle-slider::before {
   left: 2px;
   width: calc(50% - 4px);
   height: calc(100% - 4px);
-  background: var(--bg-green-strong);
-  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--color-green) 18%, white);
+  border-radius: 4px;
   transition: transform 200ms ease, background 200ms ease;
 }
 
 swp-toggle-slider[data-value="no"]::before {
-  transform: translateX(100%);
-  background: var(--bg-red-strong);
+  transform: translateX(calc(100% + 4px));
+  background: color-mix(in srgb, var(--color-red) 18%, white);
 }
 
 swp-toggle-option {
   position: relative;
   z-index: 1;
-  padding: var(--spacing-2) var(--spacing-5);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+  padding: 5px 16px;
+  font-size: 12px;
+  font-weight: 500;
   color: var(--color-text-secondary);
   cursor: pointer;
-  transition: color var(--transition-fast);
+  transition: color 150ms ease;
   user-select: none;
 }
 
 swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
   color: var(--color-green);
-  font-weight: var(--font-weight-semibold);
+  font-weight: 600;
 }
 
 swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
   color: var(--color-red);
-  font-weight: var(--font-weight-semibold);
+  font-weight: 600;
+}
+
+/* ===========================================
+   TOGGLE OPTIONS (Tab-style selector)
+   =========================================== */
+swp-toggle-options {
+  display: flex;
+  gap: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+
+  swp-toggle-option {
+    flex: 1;
+    padding: 10px 16px;
+    text-align: center;
+    font-size: var(--font-size-sm);
+    cursor: pointer;
+    background: var(--color-surface);
+    border-right: 1px solid var(--color-border);
+    transition: all var(--transition-fast);
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &:hover {
+      background: var(--color-background-alt);
+    }
+
+    &.selected {
+      background: var(--color-teal);
+      color: white;
+    }
+  }
 }
 
 /* ===========================================

PlanTempus.Application/wwwroot/css/drawers.css

@@ -227,7 +227,7 @@ swp-toggle-switch input {
   height: 0;
 }
 
-swp-toggle-slider {
+swp-toggle-track {
   position: absolute;
   cursor: pointer;
   inset: 0;
@@ -236,7 +236,7 @@ swp-toggle-slider {
   transition: background var(--transition-fast);
 }
 
-swp-toggle-slider::before {
+swp-toggle-track::before {
   content: '';
   position: absolute;
   width: 18px;
@@ -248,11 +248,11 @@ swp-toggle-slider::before {
   transition: transform var(--transition-fast);
 }
 
-swp-toggle-switch input:checked + swp-toggle-slider {
+swp-toggle-switch input:checked + swp-toggle-track {
   background: var(--color-teal);
 }
 
-swp-toggle-switch input:checked + swp-toggle-slider::before {
+swp-toggle-switch input:checked + swp-toggle-track::before {
   transform: translateX(20px);
 }
 

PlanTempus.Application/wwwroot/css/employees.css

@@ -889,11 +889,10 @@ swp-schedule-scroll {
   overflow-x: auto;
 }
 
-/* Når drawer er åben: page-container styles (animation via JS) */
+/* Når drawer er åben: page-container styles (padding animeres via JS) */
 body.schedule-drawer-open swp-tab-content[data-tab="schedule"] swp-page-container {
   max-width: none;
   margin: 0;
-  padding-right: var(--drawer-width, 420px);
 }
 
 /* ===========================================
@@ -975,7 +974,7 @@ swp-schedule-cell.day.closed-day {
   border-left: 2px solid #f59e0b;
   border-right: 2px solid #f59e0b;
 
-  swp-time-display {
+  swp-time-badge {
     opacity: 0.5;
   }
 }
@@ -1011,13 +1010,13 @@ swp-day-date {
 }
 
 /* Time display variants */
-swp-time-display {
+swp-time-badge {
   font-family: var(--font-mono);
   font-size: 12px;
-  font-weight: var(--font-weight-medium);
+  font-weight: 500;
   padding: 4px 8px;
   border-radius: 4px;
-  background: var(--bg-teal-light);
+  background: color-mix(in srgb, var(--color-teal) 10%, white);
   color: var(--color-text);
   white-space: nowrap;
   min-width: 90px;
@@ -1025,22 +1024,22 @@ swp-time-display {
   display: inline-block;
 }
 
-swp-time-display.off {
+swp-time-badge.off {
   background: transparent;
   color: var(--color-text-muted);
 }
 
-swp-time-display.off.off-override {
+swp-time-badge.off.off-override {
   background: color-mix(in srgb, #7c3aed 12%, white);
   color: #6d28d9;
 }
 
-swp-time-display.vacation {
+swp-time-badge.vacation {
   background: color-mix(in srgb, #f59e0b 15%, white);
   color: #b45309;
 }
 
-swp-time-display.sick {
+swp-time-badge.sick {
   background: color-mix(in srgb, #ef4444 15%, white);
   color: #dc2626;
 }
@@ -1222,38 +1221,6 @@ swp-time-range-duration {
   white-space: nowrap;
 }
 
-/* Toggle options (Enkelt/Gentagelse) */
-swp-toggle-options {
-  display: flex;
-  gap: 0;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-}
-
-swp-toggle-option {
-  flex: 1;
-  padding: 10px 16px;
-  text-align: center;
-  font-size: var(--font-size-sm);
-  cursor: pointer;
-  background: var(--color-surface);
-  border-right: 1px solid var(--color-border);
-  transition: all var(--transition-fast);
-
-  &:last-child {
-    border-right: none;
-  }
-
-  &:hover {
-    background: var(--color-background-alt);
-  }
-
-  &.selected {
-    background: var(--color-teal);
-    color: white;
-  }
-}
 
 /* Schedule drawer employee display */
 swp-employee-display {