Cambiata visualizzazione calendario e aggiunto formAttività

Template.Shared/Components/Pages/Calendar.razor.css

@@ -1,32 +1,151 @@
-.activity-filter { margin-top: .2rem; }
+.arrow-btn {
+    background: none;
+    border: none;
+    color: var(--mud-palette-primary);
+    font-size: 1.4rem;
+    padding: 0 0.5rem;
+    cursor: pointer;
+    line-height: 1;
+    transition: color 0.2s;
+}
 
-.card-container {
-    margin-top: .2rem;
+.arrow-btn:active { color: #2a27b2; }
+
+.calendar {
+    overflow: hidden;
+    position: relative;
+}
+
+.week-slider {
     width: 100%;
+    transition: all 0.4s ease;
+    transform-origin: center center;
+    transform: scaleY(1);
+    opacity: 1;
+    touch-action: pan-x;
+    user-select: none;
+    margin: 0 auto;
+}
+
+.week-slider:not(.expanded) {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 0.6rem;
+    padding: 1rem 0.3rem;
+    overflow-x: hidden;
+    overflow-y: visible;
+}
+
+.week-slider.expanded {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0.4rem;
+    padding: 1rem;
+    overflow-y: auto;
+}
+
+.week-slider.expand-animation { animation: expandFromCenter 0.3s ease forwards; }
+
+.week-slider.collapse-animation { animation: collapseToCenter 0.3s ease forwards; }
+
+@keyframes expandFromCenter {
+    from {
+        transform: scaleY(0.6);
+        opacity: 0;
+    }
+
+    to {
+        transform: scaleY(1);
+        opacity: 1;
+    }
+}
+
+@keyframes collapseToCenter {
+    from {
+        transform: scaleY(1);
+        opacity: 1;
+    }
+
+    to {
+        transform: scaleY(0.6);
+        opacity: 0;
+    }
+}
+
+.week-day {
     display: flex;
     flex-direction: column;
-    flex-wrap: nowrap;
-    gap: 1rem;
-    overflow: hidden;
-}
-
-.date-controller {
-    display: flex;
     align-items: center;
+    max-width: 60px;
+    flex: 1 1 0;
+    gap: 0.2rem;
 }
 
-.content ::deep > .custom-mudButtonGroup {
-    width: 100%;
+.week-day > div:first-child {
+    font-size: 0.8rem;
+    color: var(--mud-palette-primary);
+    margin-bottom: 0.2rem;
+    font-weight: 500;
 }
 
-.content ::deep > .custom-mudButtonGroup .mud-button-root {
-    border-radius: 12px;
-    padding: .2rem 1.5rem;
-    text-transform: none !important;
-    font-size: .985rem;
-    border: 1px solid var(--mud-palette-gray-light);
+.day {
+    background: var(--mud-palette-surface);
+    border-radius: 10px;
+    text-align: center;
+    cursor: pointer;
+    transition: background 0.3s ease, transform 0.2s ease;
+    font-size: 0.95rem;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    width: 38px;
+    height: 38px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
 }
 
-.content ::deep > .custom-mudButtonGroup .custom-button-active {
-    background-color: hsl(from var(--mud-palette-primary) h s 95%);
+.day:hover { transform: scale(1.08); }
+
+.week-slider:not(.expanded) .day {
+    padding: 0;
+    min-width: 38px;
+    min-height: 38px;
+    max-width: 48px;
+    max-height: 48px;
+}
+
+.day.selected {
+    background: var(--mud-palette-primary);
+    color: white;
+}
+
+.appointments {
+    display: flex;
+    gap: 1rem;
+    overflow-y: auto;
+    flex-direction: column;
+    height: 70vh;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.appointments::-webkit-scrollbar { display: none; }
+
+.appointment {
+    background: var(--mud-palette-surface);
+    border-radius: 8px;
+    padding: 0.8rem;
+    margin-bottom: 0.5rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.toggle-month {
+    background: none;
+    border: none;
+    color: var(--mud-palette-primary);
+    font-size: 1rem;
+    cursor: pointer;
 }