updates

frontend/www/style.css

@@ -370,126 +370,61 @@ form {
 /* week grid */
 
 .calendar-week {
-
     display: flex;
-
     margin-top: 16px;
-
     overflow-x: auto;
-
 }
 
 
 .calendar-gutter {
-
-    display: flex;
-
-    flex-direction: column;
-
     width: 55px;
-
     flex-shrink: 0;
-
+    padding-top: 0px;
 }
 
 
 .calendar-hour-label {
-
+    height: 48px; /* 2 uur = 48px */
     font-size: 11px;
-
     color: var(--muted);
-
     text-align: right;
-
     padding-right: 8px;
-
-    box-sizing: border-box;
-
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
     transform: translateY(-6px);
-
 }
 
 
 .calendar-days {
-
     display: flex;
-
     flex: 1;
-
     min-width: 700px;
-
 }
 
 
 .calendar-day-column {
-
     flex: 1;
-
     display: flex;
-
     flex-direction: column;
-
     border-left: 1px solid var(--border);
-
 }
 
 
 .calendar-day-header {
-
+    height: 32px;
     text-align: center;
-
-    padding: 6px 0 10px 0;
-
+    padding: 6px 0;
     font-size: 12px;
-
     color: var(--muted);
-
-}
-
-
-.calendar-day-header.today .calendar-day-number {
-
-    color: white;
-
-    background: var(--accent);
-
-    border-radius: 50%;
-
-    padding: 2px 7px;
-
-}
-
-
-.calendar-day-name {
-
-    text-transform: uppercase;
-
-    font-size: 10px;
-
-    letter-spacing: 0.05em;
-
-}
-
-
-.calendar-day-number {
-
-    font-size: 14px;
-
-    font-weight: 600;
-
-    color: var(--text);
-
-    margin-top: 2px;
-
-    display: inline-block;
-
 }
 
 
 .calendar-day-track {
-
     position: relative;
 
+    height: 576px; /* 12 uur zichtbaar × 48px */
+    
     background-image:
         repeating-linear-gradient(
             to bottom,
@@ -498,14 +433,15 @@ form {
             transparent 1px,
             transparent 48px
         );
-
 }
 
 
 .calendar-event {
-
     position: absolute;
 
+    left: 4px;
+    right: 4px;
+
     border-radius: 6px;
 
     padding: 3px 6px;
@@ -518,52 +454,31 @@ form {
 
     overflow: hidden;
 
-    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
+    box-shadow:
+        0 2px 6px rgba(0,0,0,0.25);
 
     opacity: 0.92;
 
     border: 1px solid rgba(255,255,255,0.4);
-
-    transition: opacity 0.15s;
-
-}
-
-
-.calendar-event:hover {
-
-    opacity: 1;
-
-    z-index: 99 !important;
-
 }
 
 
 .calendar-event-time {
-
     display: block;
-
     font-size: 10px;
-
     opacity: 0.85;
-
 }
 
 
 .calendar-event-title {
-
     display: block;
-
     font-weight: 600;
 
     white-space: nowrap;
-
     overflow: hidden;
-
     text-overflow: ellipsis;
-
 }
 
-
 .event-confirmed {
 
     background: #16a34a;