Primo commit

frontend/css/styles.css

@@ -30,7 +30,9 @@
 /* ============================================================================
    Reset & Base
    ============================================================================ */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
@@ -54,7 +56,9 @@ button {
     cursor: pointer;
 }
 
-input, select, textarea {
+input,
+select,
+textarea {
     font-family: inherit;
     font-size: inherit;
 }
@@ -431,11 +435,12 @@ input, select, textarea {
     width: 100%;
     max-width: 480px;
     max-height: 90vh;
-    overflow: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
 .modal-small {
-    max-width: 360px;
+    max-width: 420px;
 }
 
 .modal-header {
@@ -612,16 +617,23 @@ input, select, textarea {
 
 .calendar-day .parking-badge {
     position: absolute;
-    bottom: 0.25rem;
-    left: 50%;
-    transform: translateX(-50%);
+    bottom: 6px;
+    left: 4px;
+    right: 4px;
     background: #dbeafe;
     color: #1e40af;
-    font-size: 0.6rem;
+    font-size: 0.8rem;
     font-weight: 600;
-    padding: 0.1rem 0.3rem;
-    border-radius: 3px;
+    padding: 0.3rem 0;
+    border-radius: 6px;
+    border: 1px solid #93c5fd;
     line-height: 1;
+    text-align: center;
+    transform: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 /* Status colors */
@@ -644,6 +656,28 @@ input, select, textarea {
     background: white;
 }
 
+/* Closed Day */
+.calendar-day.closed {
+    background: #e5e7eb;
+    color: #9ca3af;
+    cursor: not-allowed;
+    border-color: #d1d5db;
+}
+
+.calendar-day.closed:hover {
+    border-color: #d1d5db;
+}
+
+.calendar-day.closed .day-number {
+    opacity: 0.5;
+}
+
+.team-calendar td.closed {
+    background: #e5e7eb;
+    color: #9ca3af;
+    cursor: not-allowed;
+}
+
 /* Legend */
 .legend {
     display: flex;
@@ -975,11 +1009,11 @@ input, select, textarea {
     border-radius: 50%;
 }
 
-.toggle-switch input:checked + .toggle-slider {
+.toggle-switch input:checked+.toggle-slider {
     background-color: var(--primary);
 }
 
-.toggle-switch input:checked + .toggle-slider:before {
+.toggle-switch input:checked+.toggle-slider:before {
     transform: translateX(22px);
 }
 
@@ -1747,3 +1781,24 @@ input, select, textarea {
         font-size: 0.75rem;
     }
 }
+
+/* Toast Animations */
+@keyframes slideInBottom {
+    from {
+        transform: translate(-50%, 100%);
+        opacity: 0;
+    }
+    to {
+        transform: translate(-50%, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}