auth tests

frontend/src/styles/main.css

@@ -3,7 +3,9 @@
 @import '@fontsource/rajdhani/500.css';
 @import '@fontsource/rajdhani/700.css'; /* display/titoli, coerente col logo */
 @import "tailwindcss";
+
 @plugin "daisyui"; /* NOSONAR */
+
 @theme {
   --font-sans: "Titillium Web", ui-sans-serif, system-ui, sans-serif;
   --font-secondary: "Rajdhani", ui-sans-serif, system-ui, sans-serif;
@@ -17,6 +19,7 @@
   --dc-secondary-dark: rgb(241, 146, 4);
   --dc-white: rgb(255, 255, 255);
   --dc-dark-gray: rgb(52, 58, 64);
+  --dc-light-gray: rgb(77,76,68,1);
 }
 
 body{
@@ -48,6 +51,12 @@ header {
   justify-content: center;
   gap: 3px;
 }
+
+.user-panel li a,
+.user-panel li button{
+  align-items: center;
+}
+
 #header-menu a{
   width:70px;
   height:100%;
@@ -57,7 +66,7 @@ header {
   justify-content: center;
 }
 
-#header-menu a:not(#userMenuToggle){
+#header-menu a:not(#user-menu-toggle){
   border-bottom: 4px solid transparent;
   transition: all 500ms ease;
 }
@@ -90,22 +99,16 @@ header {
   width:100%;
   height:150px;
   display: flex;
-  align-content: center;
-  justify-content: center;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  #header-menu a:not(#userMenuToggle):hover{
-    border-bottom-color: var(--dc-white);
-  }
+  place-content: center center;
 }
 
 /* Sotto md (48rem): voci più strette e label più piccola, così il testo resta
    sotto le icone senza mandare in overflow l'header su schermi piccoli. */
-@media (max-width: 47.999rem) {
+@media (width <= 47.999rem) {
   #header-menu a{
     width: 3rem;
   }
+
   #header-menu a span{
     font-size: 0.6rem;
     line-height: 1.1;
@@ -121,36 +124,72 @@ header {
   top: var(--dc-header-h);
   right: 0;
   bottom: 0;
-  width: min(20rem, 85vw);
+  width: min(15rem, 85vw);
   z-index: 910;
-  background-color: var(--dc-white);
-  color: var(--dc-dark-gray);
+  background-color: var(--dc-light-gray);
+  color: var(--dc-white);
   box-shadow: -4px 0 16px rgb(0 0 0 / 0.18);
   overflow-y: auto;
   transform: translateX(100%);
   transition: transform 300ms ease;
+  padding:0;
 }
+
 .user-panel.is-open{
   transform: translateX(0);
 }
 
+ul.menu{ padding:0 }
+
+ul.menu > li > *{
+  padding:10px 20px;
+  transition: all 300ms ease;
+}
+
+.menu .menu-title{
+  background-color: var(--dc-dark-gray);
+  color: var(--dc-white);
+  font-size: 1.2rem;
+  font-weight: normal;
+}
+
+.menu li:not(.menu-title){
+  border-bottom: 1px solid var(--dc-dark-gray);
+}
+
+/* Voci del pannello utente: l'icona Lucide (svg, 24px di default) viene
+   dimensionata in em così segue il testo, e allineata verticalmente ad esso. */
+
+
+.user-panel li :is(a, button) svg{
+  width: 1.25em;
+  height: 1.25em;
+  flex-shrink: 0;
+}
+
 .user-panel-backdrop{
   position: fixed;
-  top: var(--dc-header-h);
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: var(--dc-header-h) 0 0 0;
   z-index: 900;
   background-color: rgb(0 0 0 / 0.25);
   opacity: 0;
   pointer-events: none;
   transition: opacity 300ms ease;
 }
+
 .user-panel-backdrop.is-open{
   opacity: 1;
   pointer-events: auto;
 }
 
+@media (hover: hover) and (pointer: fine) {
+  #header-menu a:not(#user-menu-toggle):hover{
+    border-bottom-color: var(--dc-white);
+  }
+
+  ul.menu > li > *:hover{ padding-left: 35px;}
+}
+
 @media (prefers-reduced-motion: reduce) {
   .user-panel,
   .user-panel-backdrop{