/* =========================
   Reset e stili base
   ========================= */
   @import url('../fonts/stylesheet.css');
   @import url('https://fonts.cdnfonts.com/css/inter');
   @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
   @import url('https://fonts.cdnfonts.com/css/google-sans');
   @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap');

   /* shadcn/ui Design System */
   @import url('shadcn-tokens.css');
   @import url('shadcn-components.css');
   @import url('shadcn-select.css');
   @import url('shadcn-toast.css');
   @import url('shadcn-chart.css');


   :root{
    /* Legacy variables mapped to shadcn tokens */
    --background-spacer-color: hsl(var(--border));
    --background-color: hsl(var(--background));
    --background-card-color: hsl(var(--card));
    --background-field-group: hsl(var(--secondary));
    --background-color-light: hsl(var(--muted));
    --small-text-color: hsl(var(--muted-foreground));
    --background-button-color: hsl(var(--primary));
    --background-button-color-shadow: hsl(var(--primary) / 0.6);
    --text-color: hsl(var(--foreground));
    --text-color-btn: hsl(var(--primary-foreground));
    --border-input-color: hsl(var(--ring));
    --background-a-element-active-hover: hsl(var(--primary));
    --danger-color: hsl(var(--destructive));
    --success-color: hsl(var(--success));

    /* Additional legacy mappings */
    --primary-color: hsl(var(--primary));
    --light-border-color: hsl(var(--border));
   }
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
    /* width */
    ::-webkit-scrollbar {
      width: 5px;
      margin-right: 10px;
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
      background-color: transparent;
      border: transparent;
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: hsl(var(--border));
      border-radius: var(--radius-full);
    }
    
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: hsl(var(--muted-foreground));
    }

   body {
       font-family: var(--font-sans);
       background-color: hsl(var(--background));
       /* Clean solid background - SoundCloud style */
       min-height: 100vh;
       color: hsl(var(--foreground));
       line-height: var(--leading-normal);
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }

   ::-moz-selection {
        background: hsl(var(--primary));
        color: hsl(var(--primary-foreground));
   }

    ::selection {
         background: hsl(var(--primary));
         color: hsl(var(--primary-foreground));
    }

   /* Headings */
   h1, h2, h3, h4, h5, h6 {
       font-family: var(--font-display);
       font-weight: 600;
       letter-spacing: var(--tracking-tight);
       color: hsl(var(--foreground));
   }

   h1 { font-size: var(--text-4xl); }
   h2 { font-size: var(--text-3xl); }
   h3 { font-size: var(--text-2xl); }
   h4 { font-size: var(--text-xl); }
   h5 { font-size: var(--text-lg); }
   h6 { font-size: var(--text-base); }

   /* Links */
   a {
       color: hsl(var(--primary));
       text-decoration: none;
       transition: color var(--transition-fast);
   }

   a:hover {
       color: hsl(var(--primary) / 0.8);
   }
   
   button {
       background-color: hsl(var(--primary)) !important;
       color: hsl(var(--primary-foreground)) !important;
       border-radius: var(--radius-md) !important;
       font-family: var(--font-sans);
       border: none;
       padding: var(--space-2) var(--space-4);
       font-size: var(--text-sm);
       font-weight: 500;
       cursor: pointer;
       transition: all var(--transition-fast);
   }

   button:hover {
       background-color: hsl(var(--primary) / 0.9) !important;
   }

   button:focus-visible {
       outline: 2px solid hsl(var(--ring));
       outline-offset: 2px;
   }

   .button {
       background-color: hsl(var(--primary)) !important;
       padding: var(--space-2) var(--space-4) !important;
       text-decoration: none !important;
       color: hsl(var(--primary-foreground)) !important;
       border-radius: var(--radius-md) !important;
       font-family: var(--font-sans);
       font-weight: 500;
       transition: all var(--transition-fast);
   }

   .button:hover {
       background-color: hsl(var(--primary) / 0.9) !important;
   }

   /* Cookie Banner Style */
.cookie-banner {
   position: fixed;
   bottom: var(--space-6);
   right: var(--space-6);
   width: calc(100% - var(--space-12));
   max-width: 400px;
   background: hsl(var(--muted) / 0.6);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid hsl(var(--border) / 0.5);
   border-radius: var(--radius-lg);
   padding: var(--space-4);
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
   z-index: 100;
   box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
   
   /* Animazione entrata */
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   pointer-events: none; /* Non cliccabile finché nascosto */
}

/* Classe per mostrare il banner */
.cookie-banner.show {
   opacity: 1;
   transform: translateY(0);
   pointer-events: all;
}

.cookie-content {
   display: flex;
   gap: var(--space-3);
   align-items: flex-start;
}

.cookie-icon {
   color: hsl(var(--primary));
   font-size: 1.2rem;
   margin-top: 2px;
}

.cookie-banner p {
   font-size: var(--text-sm);
   color: hsl(var(--foreground));
   margin: 0;
   line-height: 1.5;
}

.cookie-banner a {
   color: hsl(var(--primary));
   text-decoration: none;
   font-weight: 500;
}

.cookie-banner a:hover {
   text-decoration: underline;
}

.cookie-btn {
   align-self: flex-end;
   background: hsl(var(--foreground));
   color: hsl(var(--background));
   border: none;
   padding: 8px 16px;
   border-radius: var(--radius-md);
   font-size: var(--text-xs);
   font-weight: 600;
   cursor: pointer;
   transition: transform 0.2s;
}

.cookie-btn:hover {
   transform: scale(1.02);
   opacity: 0.9;
}

/* Mobile responsive */
@media (max-width: 480px) {
   .cookie-banner {
      bottom: 0;
      right: 0;
      width: 100%;
      max-width: none;
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      border-bottom: none;
      border-left: none;
      border-right: none;
   }
}

   #dbStatus{
         font-weight: bold !important;
   }
   
   input, select, textarea {
       background-color: hsl(var(--input)) !important;
       font-family: var(--font-sans) !important;
       transition: border-color var(--transition-fast) !important;
       color: hsl(var(--foreground)) !important;
       border: 1px solid hsl(var(--border)) !important;
       border-radius: var(--radius-md) !important;
       font-size: var(--text-sm) !important;
   }

   input:focus, select:focus, textarea:focus {
       border-color: hsl(var(--foreground) / 0.5) !important;
       box-shadow: none !important;
       outline: none !important;
   }

   input::placeholder, textarea::placeholder {
       color: hsl(var(--muted-foreground)) !important;
   }
   
   .login-body {
       background-size: cover !important;
       background-position: center !important;
       background-repeat: no-repeat !important;
       background-attachment: fixed !important;
       backdrop-filter: blur(5px) !important;
   }
   
   /* =========================
         Navbar - Floating Professional Design
         ========================= */
   .navbar {
       position: fixed;
       top: var(--space-3);
       left: 50%;
       transform: translateX(-50%);
       width: calc(100% - var(--space-8));
       max-width: 1400px;
       height: 52px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0 var(--space-5);
       background: hsl(var(--card) / 0.85);
       backdrop-filter: blur(20px) saturate(180%);
       -webkit-backdrop-filter: blur(20px) saturate(180%);
       border: 1px solid hsl(var(--border) / 0.6);
       border-radius: var(--radius-xl);
       z-index: 1000;
       transition: all var(--transition-normal);
       box-shadow: var(--shadow-lg);
   }

   .navbar:hover {
       border-color: hsl(var(--border));
       box-shadow: var(--shadow-xl);
   }

   .nav-brand-icon {
       width: 40px;
       height: 40px;
       object-fit: contain;
       border-radius: calc(var(--radius-md) + 4px);
   }

   #navbar {
       display: flex;
       align-items: center;
       justify-content: center;
   }

   /* Spazio per navbar floating - non sovrapporre contenuto */
   body {
       padding-top: calc(52px + var(--space-3) + var(--space-6));
       padding-bottom: calc(60px + var(--space-4) + var(--space-6));
   }

   /* Sezioni della navbar */
   .branding {
       flex-shrink: 0;
   }

   .pulsanti {
       display: flex;
       align-items: center;
       gap: var(--space-1);
   }

   .utente {
       display: flex;
       align-items: center;
       gap: var(--space-3);
   }
   
   .nav-brand {
       font-family: var(--font-display);
       font-size: var(--text-lg);
       font-weight: 700;
       color: hsl(var(--foreground));
       text-decoration: none;
       display: flex;
       align-items: center;
       gap: var(--space-2);
       letter-spacing: var(--tracking-tight);
       transition: all var(--transition-fast);
   }

   .nav-brand:hover {
       color: hsl(var(--primary));
   }

   .nav-brand i {
       color: hsl(var(--primary));
       font-size: 1.1em;
   }
   
   .nav-toggle {
       display: none;
       background: transparent !important;
       border: none !important;
       cursor: pointer;
       padding: var(--space-2);
       border-radius: var(--radius-md);
       z-index: 1002;
       transition: all var(--transition-fast);
   }

   .nav-toggle:hover {
       background: hsl(var(--accent)) !important;
   }
   
   .nav-toggle i {
       font-size: 1.25rem;
       color: hsl(var(--foreground));
       transition: color var(--transition-fast);
   }

   .nav-toggle:hover i {
       color: hsl(var(--accent-foreground));
   }
   
   .nav-links {
       display: flex;
       gap: 0;
       list-style: none;
       margin: 0;
       padding: 0;
       background: transparent;
       border-radius: 0;
   }
   
   .nav-links a {
       display: flex;
       align-items: center;
       gap: var(--space-2);
       color: hsl(var(--muted-foreground));
       text-decoration: none;
       font-weight: 400;
       font-size: var(--text-sm);
       padding: var(--space-2) var(--space-4);
       border-radius: var(--radius-md);
       transition: color var(--transition-fast);
       position: relative;
   }
   
   .nav-links a i {
       display: none;
       font-size: 0.9em;
       transition: all var(--transition-fast);
   }
   
   .nav-links a:hover {
       color: hsl(var(--foreground));
       background: transparent;
   }
   
   .nav-links a.active {
       color: hsl(var(--primary));
       background: transparent;
       font-weight: 500;
       box-shadow: none;
   }

   .nav-links a.active:hover {
       background: transparent;
   }

   /* =========================
      Navbar Dropdown System (Desktop)
      ========================= */
   
   /* Nascondi mobile menu su desktop, mostra desktop menu */
   .nav-mobile {
       display: none !important;
   }

   .nav-desktop {
       display: flex !important;
   }

   /* Dropdown container */
   .nav-dropdown {
       position: relative;
   }

   .nav-dropdown-trigger {
       display: flex;
       align-items: center;
       gap: var(--space-2);
       color: hsl(var(--muted-foreground)) !important;
       background: transparent !important;
       border: none !important;
       font-weight: 400;
       font-size: var(--text-sm);
       padding: var(--space-2) var(--space-3) !important;
       border-radius: var(--radius-md) !important;
       cursor: pointer;
       transition: all var(--transition-fast);
   }

   .nav-dropdown-trigger:hover {
       color: hsl(var(--foreground)) !important;
       background: transparent !important;
   }

   .nav-dropdown.open .nav-dropdown-trigger {
       color: hsl(var(--foreground)) !important;
   }

   .nav-dropdown-arrow {
       font-size: 0.65em;
       transition: transform var(--transition-fast);
   }

   .nav-dropdown.open .nav-dropdown-arrow,
   .nav-user-dropdown.open .nav-dropdown-arrow {
       transform: rotate(180deg);
   }

   /* Dropdown menu */
   .nav-dropdown-menu {
       position: absolute;
       top: calc(100% + var(--space-2));
       left: 50%;
       transform: translateX(-50%);
       min-width: 180px;
       background: hsl(var(--card));
       border: 1px solid hsl(var(--border));
       border-radius: var(--radius-lg);
       padding: var(--space-2);
       box-shadow: var(--shadow-xl);
       opacity: 0;
       visibility: hidden;
       transform: translateX(-50%) translateY(-10px);
       transition: all var(--transition-fast);
       z-index: 1001;
       list-style: none;
   }

   .nav-dropdown.open .nav-dropdown-menu,
   .nav-user-dropdown.open .nav-dropdown-menu {
       opacity: 1;
       visibility: visible;
       transform: translateX(-50%) translateY(0);
   }

   .nav-dropdown-menu li {
       margin: 0;
   }

   .nav-dropdown-menu a {
       display: flex;
       align-items: center;
       gap: var(--space-3);
       padding: var(--space-2) var(--space-3);
       color: hsl(var(--muted-foreground));
       font-size: var(--text-sm);
       border-radius: var(--radius-md);
       transition: all var(--transition-fast);
       text-decoration: none;
   }

   .nav-dropdown-menu a i {
       display: block !important;
       width: 16px;
       text-align: center;
       font-size: 0.9em;
       color: hsl(var(--muted-foreground));
       transition: color var(--transition-fast);
   }

   .nav-dropdown-menu a:hover {
       background: hsl(var(--accent));
       color: hsl(var(--accent-foreground));
   }

   .nav-dropdown-menu a:hover i {
       color: hsl(var(--accent-foreground));
   }

   .nav-dropdown-menu a.active {
       color: hsl(var(--primary));
       font-weight: 500;
   }

   .nav-dropdown-menu a.active i {
       color: hsl(var(--primary));
   }

   /* =========================
      User Dropdown (Desktop)
      ========================= */
   .nav-user-dropdown {
       position: relative;
   }

   .nav-user-trigger {
       display: flex;
       align-items: center;
       gap: var(--space-2);
       background: transparent !important;
       border: none !important;
       padding: var(--space-1) var(--space-2) !important;
       border-radius: var(--radius-md) !important;
       cursor: pointer;
       transition: all var(--transition-fast);
   }

   .nav-user-trigger:hover {
       background: hsl(var(--accent)) !important;
       color: hsl(var(--accent-foreground)) !important;
   }

   .nav-user-name {
       font-size: var(--text-sm);
       color: hsl(var(--muted-foreground));
       font-weight: 500;
       display: none;
   }

   @media (min-width: 1200px) {
       .nav-user-name {
           display: block;
       }
   }

   .nav-user-trigger .nav-avatar-container img {
       width: 28px;
       height: 28px;
       border-radius: var(--radius-full);
       object-fit: cover;
   }

   .nav-user-trigger .nav-dropdown-arrow {
       color: hsl(var(--muted-foreground));
       font-size: 0.6em;
   }

   .nav-user-menu {
       right: 0;
       left: auto;
       transform: translateY(-10px);
       min-width: 160px;
   }

   .nav-user-dropdown.open .nav-user-menu {
       transform: translateY(0);
   }

   .nav-user-divider {
       height: 1px;
       background: hsl(var(--border));
       margin: var(--space-2) 0;
   }

   .nav-logout {
       color: hsl(var(--destructive)) !important;
   }

   .nav-logout:hover {
       background: hsl(var(--destructive) / 0.1) !important;
       color: hsl(var(--destructive)) !important;
   }

   .nav-logout i {
       color: hsl(var(--destructive)) !important;
   }

   /* User greeting */
   .nav-user {
       display: none;
       font-size: var(--text-sm);
       color: hsl(var(--muted-foreground));
       font-weight: 500;
   }

   @media (min-width: 1013px) {
       .nav-user {
           display: block;
       }
   }
   
   .nav-avatar {
       display: flex;
       align-items: center;
       gap: var(--space-2);
   }
   
   .nav-avatar img {
       width: 28px;
       height: 28px;
       border-radius: var(--radius-full);
       object-fit: cover;
       border: none;
       transition: opacity var(--transition-fast);
   }
   
   .nav-avatar img:hover {
       opacity: 0.8;
   }

   .nav-name {
       font-size: var(--text-sm);
       font-weight: 500;
       color: hsl(var(--foreground));
       text-decoration: none;
   }
   
   /* Mobile styles */
   @media (max-width: 1120px) {
       .navbar {
           width: calc(100% - var(--space-4));
           top: var(--space-2);
           left: 50%;
           transform: translateX(-50%);
           padding: 0 var(--space-3);
           height: 50px;
           border-radius: var(--radius-lg);
       }

       body {
           padding-top: calc(50px + var(--space-2) + var(--space-4));
       }
   
       .nav-brand {
           display: none !important;
       }
       
       .summary-item {
           justify-content: space-between !important;
       }
       .summary-label {
           text-align: right;
       }

       .nav-toggle {
           display: flex;
           align-items: center;
           justify-content: center;
           order: 3;
           width: 40px;
           height: 40px;
           padding: 0 !important;
       }

       .nav-toggle.open {
           background: hsl(var(--accent)) !important;
       }
       
       .nav-toggle.open i {
           color: hsl(var(--accent-foreground)) !important;
       }
   
       .nav-avatar {
           order: 2;
           flex-direction: row-reverse;
       }
   
       .nav-avatar img {
           width: 32px;
           height: 32px;
       }
   
       .nav-links {
           display: none;
           position: fixed;
           top: 70px;
           left: var(--space-2);
           right: var(--space-2);
           background: hsl(var(--card));
           padding: var(--space-2);
           flex-direction: column;
           gap: var(--space-1);
           border: 1px solid hsl(var(--border));
           border-radius: var(--radius-xl);
           box-shadow: var(--shadow-xl);
           backdrop-filter: blur(20px);
           z-index: 999;
           transform: translateY(-10px);
           opacity: 0;
           transition: all var(--transition-normal);
       }
   
       .nav-links.open {
           display: flex;
           transform: translateY(0);
           opacity: 1;
           animation: slideDown var(--transition-normal) ease forwards;
       }

       @keyframes slideDown {
           from {
               opacity: 0;
               transform: translateY(-10px);
           }
           to {
               opacity: 1;
               transform: translateY(0);
           }
       }
   
       .nav-links a {
           padding: var(--space-3) var(--space-4);
           font-size: var(--text-base);
           border-radius: var(--radius-md);
           display: flex;
           align-items: center;
           justify-content: flex-start;
           gap: var(--space-3);
       }
   
       .nav-links a i {
           display: block;
           width: 20px;
           text-align: center;
           color: hsl(var(--muted-foreground));
       }

       .nav-links a:hover i,
       .nav-links a.active i {
           color: inherit;
       }

       /* Mobile: nascondi menu desktop, mostra mobile */
       .nav-desktop {
           display: none !important;
       }

       .nav-mobile.open {
           display: flex !important;
       }

       /* Mobile: semplifica user dropdown */
       .nav-user-name {
           display: none !important;
       }

       .nav-user-trigger .nav-dropdown-arrow {
           display: none;
       }

       .nav-user-dropdown {
           order: 2;
       }

       .nav-user-menu {
           right: 0;
           left: auto;
           transform: none;
           top: calc(100% + var(--space-2));
       }

       .nav-user-dropdown.open .nav-user-menu {
           transform: none;
       }

       .list-header {
           flex-direction: column !important;
           align-items: stretch !important;
       }

       .pulsanti {
           order: 3;
       }

       .utente {
           order: 2;
       }

       #navbar {
           padding-top: 70px;
       }
   }

   .header-actions-first{
    display: flex;
    gap: 20px;
    align-items: center;
   }
   
   /* =========================
      Footer globale
      ========================= */
    #footer-content{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: var(--space-4);
    }

   #app-footer {
       position: fixed;
       bottom: var(--space-3);
       left: 50%;
       transform: translateX(-50%);
       width: auto;
       max-width: calc(100% - var(--space-8));
       margin: 0 auto;
       border-radius: var(--radius-xl);
       height: auto;
       padding: var(--space-3) var(--space-5);
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
       gap: var(--space-4);
       background: hsl(var(--card) / 0.85);
       backdrop-filter: blur(20px) saturate(180%);
       -webkit-backdrop-filter: blur(20px) saturate(180%);
       border: 1px solid hsl(var(--border) / 0.6);
       transition: all var(--transition-normal);
       z-index: 1000;
       box-shadow: var(--shadow-lg);
   }

   #app-footer:hover {
       border-color: hsl(var(--border));
       box-shadow: var(--shadow-xl);
   }

   .footer-container {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: space-evenly;
       gap: calc(var(--space-4) / 2);
   }

   .footer-item {
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: var(--space-2);
   }
   
   .footer-elements {
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: var(--space-2);
       font-size: var(--text-xs);
       color: hsl(var(--muted-foreground));
   }

   .footer-brand {
       font-weight: 700;
       font-family: var(--font-display);
       font-size: var(--text-lg);
       color: hsl(var(--foreground));
   }

   .footer-link {
            color: #7784ff;
            font-size: 16px;
            text-decoration: none;
            font-weight: 700;
            text-decoration: none;
        }

   .db-dot {
       width: 8px;
       height: 8px;
       border-radius: var(--radius-full);
       background: hsl(var(--muted-foreground));
       display: inline-block;
       animation: pulse 2s infinite;
   }

   .db-dot.online {
       background: hsl(var(--success));
       box-shadow: 0 0 8px hsl(var(--success) / 0.5);
   }

   .db-dot.offline {
       background: hsl(var(--destructive));
       box-shadow: 0 0 8px hsl(var(--destructive) / 0.5);
   }
   
   @keyframes pulse {
       0%, 100% {
           transform: scale(1);
           opacity: 1;
       }
       50% {
           transform: scale(1.2);
           opacity: 0.7;
       }
   }

   @media (max-width: 768px) {
       #app-footer {
           width: calc(100% - var(--space-4));
           max-width: none;
           bottom: var(--space-2);
           flex-direction: column;
           gap: var(--space-2);
           padding: var(--space-3);
           border-radius: var(--radius-lg);
       }

       body {
           padding-bottom: calc(100px + var(--space-2) + var(--space-4));
       }

       .footer-elements {
           flex-wrap: wrap;
           justify-content: center;
           text-align: center;
       }

       .footer-brand {
           font-size: var(--text-base);
       }
   }
   
   /* ================================
   1) Custom caret color & blink
   ================================ */
input,
textarea {
  /* cambia colore al cursore di testo */
  caret-color: hsl(var(--primary));
}

/* ================================
   2) Custom checkbox → modern square
   ================================ */
input[type="checkbox"] {
  /* rimuovi aspetto nativo */
  appearance: none;
  -webkit-appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid var(--light-border-color);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 150ms ease;
  margin-right: 0.5rem;
  background: var(--background-color);
}

input[type="checkbox"]:hover {
  border-color: var(--primary-color);
}

input[type="checkbox"]:checked {
  border-color: var(--primary-color);
  background: var(--primary-color);
}

input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* se preferisci il look “radio” */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--light-border-color);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: all 150ms ease;
  margin-right: 0.5rem;
  background: var(--background-color);
}

input[type="radio"]:hover {
  border-color: var(--primary-color);
}

input[type="radio"]:checked {
  border-color: var(--primary-color);
}

input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--primary-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* ================================
   3) Label + controllo
   ================================ */
.checkbox-group,
.radio-group {
  display: flex;
  align-items: center;
}

.checkbox-group label,
.radio-group label {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: var(--text-color);
}

/* Spazio tra più checkbox/radio in un form */
.checkbox-group + .checkbox-group,
.radio-group + .radio-group {
  margin-top: 0.5rem;
}

   /* =========================
         Main container
         ========================= */
   
   #det-idfGen {
       font-weight: bold;
       width: 100%;
   }
   
   input {
       font-weight: 500 !important;
   }
   main {
       padding: 2rem 1rem;
       max-width: 1200px;
       margin: auto;
   }
   
   /* =========================
      Sezione "Prossima Prenotazione"
      ========================= */
   #nextBooking {
       width: 100%;
       margin: 2rem 0;
   }
   
   #nextBooking h2 {
       font-size: 1.5rem;
       margin-bottom: 1rem;
   }
   
   #nextBookingCard {
       cursor: pointer;
       background: var(--background-color-light);
       color: var(--text-color);
       border-radius: 12px;
       border: 3px solid var(--background-spacer-color);
       padding: 1.5rem;
       max-width: 400px;
       margin: auto;
       transition: transform 0.2s, box-shadow 0.2s;
   }
   
   #nextBookingCard:hover {
       transform: translateY(-4px);
   }
   
   #nextBookingDetails {
       font-size: 1rem;
       color: var(--text-color);
       line-height: 1.6;
   }
   
   #nextBookingDetails div {
       margin-bottom: 0.5rem;
   }
   
   #nextBookingDetails strong {
       font-size: 1.5rem;
       text-transform: uppercase !important;
   }
   
   /* ===========================================
      Preview lettera di benvenuto
      =========================================== */
   .letter-preview {
       width: 595px;
       height: 842px;
       margin: 2rem auto;
       position: relative;
       font-family: 'Matter', sans-serif;
       background-image: url('../images/A4\ -\ 9.png');
       /* Cambia con il tuo sfondo */
       background-size: cover;
       background-position: center;
       box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
       overflow: hidden;
   }
   
   /* contenuto testuale, posizionato in modo da non sovrapporsi alla grafica di sfondo */
   .letter-preview .letter-content {
       position: absolute;
       top: 140px;
       /* regola questi valori in base al tuo sfondo */
       left: 70px;
       right: 70px;
       bottom: 200px;
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       justify-content: flex-start;
   }
   
   /* saluto (text1) */
   .letter-greeting {
       font-size: 1rem;
       font-weight: 500;
       margin-bottom: 1.8rem;
       color: #264653;
       letter-spacing: 0.3px;
   }
   
   /* nome & cognome grande */
   .letter-name {
       font-size: 2.1rem;
       font-weight: 700;
       margin-bottom: 2.2rem;
       color: #264653;
       line-height: 1.1;
       letter-spacing: 0.5px;
       text-transform: uppercase;
   }
   
   /* paragrafi (text2, text3) */
   .letter-paragraph {
       font-size: 1.05rem;
       line-height: 1.7;
       max-width: 440px;
       /* per limitarne la larghezza */
       margin-bottom: 2rem;
       color: #333;
       text-align: center;
       font-weight: 400;
   }
   
   /* se vuoi un footer testuale semplice dentro il preview */
   .letter-preview footer {
       position: absolute;
       bottom: 40px;
       /* luci sopra il bordo inferiore */
       left: 100px;
       right: 100px;
       text-align: right;
       font-size: 1rem;
       color: #264653;
   }
   
   /* =========================
         Login Page
         ========================= */
   .login-wrapper {
       display: flex;
       justify-content: center;
       align-items: center;
       min-height: 100vh;
   }
   
   .login-container {
       text-align: center;
   }

   /* =================================================
      GENERATOR PAGE - Lettere di Benvenuto
      ================================================= */
   .generator-page {
       min-height: calc(100vh - 64px);
       padding: 2rem 1.5rem 4rem;
   }

   .generator-container {
       max-width: 800px;
       margin: 0 auto;
   }

   .generator-header {
       text-align: center;
       margin-bottom: 2rem;
   }

   .generator-header h1 {
       font-size: 2rem;
       font-weight: 600;
       color: hsl(var(--foreground));
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.75rem;
       margin-bottom: 0.5rem;
   }

   .generator-header h1 i {
       color: hsl(var(--primary));
   }

   .generator-subtitle {
       color: hsl(var(--muted-foreground));
       font-size: 1rem;
       margin: 0;
   }

   /* Tabs */
   .generator-tabs {
       display: flex;
       gap: 0.5rem;
       margin-bottom: 1.5rem;
       background: hsl(var(--secondary));
       padding: 0.375rem;
       border-radius: var(--radius-lg);
   }

   .tab-btn {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       padding: 0.75rem 1rem;
       background: transparent;
       border: none;
       border-radius: var(--radius-md);
       color: hsl(var(--muted-foreground));
       font-size: 0.9rem;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.15s ease;
   }

   .tab-btn:hover {
       color: hsl(var(--foreground));
   }

   .tab-btn.active {
       background: hsl(var(--card));
       color: hsl(var(--foreground));
       box-shadow: var(--shadow-sm);
   }

   .tab-content {
       display: none;
   }

   .tab-content.active {
       display: block;
   }

   /* Generator Card */
   .generator-card {
       background: hsl(var(--card));
       border: 1px solid hsl(var(--border));
       border-radius: var(--radius-xl);
       padding: 1.5rem;
   }

   .generator-card-header {
       margin-bottom: 1.5rem;
       position: relative;
   }

   .generator-card-header h2 {
       font-size: 1.25rem;
       font-weight: 600;
       color: hsl(var(--foreground));
       margin: 0 0 0.25rem;
   }

   .generator-card-header p {
       font-size: 0.9rem;
       color: hsl(var(--muted-foreground));
       margin: 0;
   }

   .refresh-btn {
       position: absolute;
       top: 0;
       right: 0;
       width: 2.25rem;
       height: 2.25rem;
       display: flex;
       align-items: center;
       justify-content: center;
       background: hsl(var(--secondary));
       border: 1px solid hsl(var(--border));
       border-radius: var(--radius-md);
       color: hsl(var(--muted-foreground));
       cursor: pointer;
       transition: all 0.15s ease;
   }

   .refresh-btn:hover {
       background: hsl(var(--accent));
       color: hsl(var(--accent-foreground));
   }

   /* Generator Form */
   .generator-form {
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }

   .field-divider {
       display: flex;
       align-items: center;
       gap: 1rem;
       color: hsl(var(--muted-foreground));
       font-size: 0.85rem;
   }

   .field-divider::before,
   .field-divider::after {
       content: '';
       flex: 1;
       height: 1px;
       background: hsl(var(--border));
   }

   .generator-btn {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       padding: 0.875rem 1.5rem;
       background: hsl(var(--primary));
       color: hsl(var(--primary-foreground));
       border: none;
       border-radius: var(--radius-md);
       font-size: 1rem;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.15s ease;
       margin-top: 0.5rem;
   }

   .generator-btn:hover {
       background: hsl(var(--primary) / 0.85);
   }

   .generator-btn:disabled {
       opacity: 0.6;
       cursor: not-allowed;
   }

   /* Letter Status */
   .letter-status {
       margin-top: 1.5rem;
       padding: 1.25rem;
       background: hsl(var(--success) / 0.08);
       border: 1px solid hsl(var(--success) / 0.3);
       border-radius: var(--radius-lg);
   }

   .status-content {
       display: flex;
       align-items: center;
       gap: 1rem;
       flex-wrap: wrap;
   }

   .status-icon {
       width: 3rem;
       height: 3rem;
       border-radius: 50%;
       background: hsl(var(--success) / 0.15);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }

   .status-icon i {
       font-size: 1.5rem;
       color: hsl(var(--success));
   }

   .status-info {
       flex: 1;
       min-width: 150px;
   }

   .status-info h3 {
       font-size: 1.1rem;
       font-weight: 600;
       color: hsl(var(--foreground));
       margin: 0 0 0.25rem;
   }

   .status-info p {
       font-size: 0.85rem;
       color: hsl(var(--muted-foreground));
       margin: 0;
   }

   .status-actions {
       display: flex;
       gap: 0.5rem;
       flex-wrap: wrap;
   }

   .status-btn {
       display: inline-flex;
       align-items: center;
       gap: 0.4rem;
       padding: 0.5rem 1rem;
       border-radius: var(--radius-md);
       font-size: 0.85rem;
       font-weight: 500;
       cursor: pointer;
       text-decoration: none;
       transition: all 0.15s ease;
       border: none;
   }

   .status-btn-primary {
       background: hsl(var(--success));
       color: hsl(var(--success-foreground));
   }

   .status-btn-primary:hover {
       background: hsl(var(--success) / 0.85);
   }

   .status-btn-secondary {
       background: hsl(var(--secondary));
       color: hsl(var(--secondary-foreground));
       border: 1px solid hsl(var(--border));
   }

   .status-btn-secondary:hover {
       background: hsl(var(--accent));
       color: hsl(var(--accent-foreground));
   }

   /* Archive List */
   .archive-list {
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
   }

   .archive-loading {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.75rem;
       padding: 2rem;
       color: hsl(var(--muted-foreground));
   }

   .archive-empty {
       text-align: center;
       padding: 3rem 2rem;
       color: hsl(var(--muted-foreground));
   }

   .archive-empty i {
       font-size: 3rem;
       margin-bottom: 1rem;
       opacity: 0.5;
   }

   .archive-item {
       display: flex;
       align-items: center;
       gap: 1rem;
       padding: 1rem;
       background: hsl(var(--background));
       border: 1px solid hsl(var(--border));
       border-radius: var(--radius-md);
       transition: all 0.15s ease;
   }

   .archive-item:hover {
       border-color: hsl(var(--primary) / 0.3);
   }

   .archive-item-icon {
       width: 2.5rem;
       height: 2.5rem;
       border-radius: var(--radius-sm);
       background: hsl(var(--primary) / 0.1);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }

   .archive-item-icon i {
       font-size: 1rem;
       color: hsl(var(--primary));
   }

   .archive-item-info {
       flex: 1;
       min-width: 0;
   }

   .archive-item-name {
       font-weight: 600;
       color: hsl(var(--foreground));
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .archive-item-date {
       font-size: 0.8rem;
       color: hsl(var(--muted-foreground));
   }

   .archive-item-actions {
       display: flex;
       gap: 0.5rem;
   }

   .archive-btn {
       width: 2.25rem;
       height: 2.25rem;
       display: flex;
       align-items: center;
       justify-content: center;
       background: hsl(var(--secondary));
       border: 1px solid hsl(var(--border));
       border-radius: var(--radius-sm);
       color: hsl(var(--muted-foreground));
       cursor: pointer;
       text-decoration: none;
       transition: all 0.15s ease;
   }

   .archive-btn:hover {
       background: hsl(var(--accent));
       color: hsl(var(--accent-foreground));
   }

   .archive-btn.delete:hover {
       background: hsl(var(--destructive) / 0.1);
       color: hsl(var(--destructive));
       border-color: hsl(var(--destructive) / 0.3);
   }

   /* Responsive */
   @media (max-width: 600px) {
       .generator-page {
           padding: 1.5rem 1rem 3rem;
       }

       .generator-header h1 {
           font-size: 1.5rem;
       }

       .tab-btn {
           padding: 0.625rem 0.75rem;
           font-size: 0.8rem;
       }

       .tab-btn span {
           display: none;
       }

       .status-content {
           flex-direction: column;
           text-align: center;
       }

       .status-actions {
           width: 100%;
           justify-content: center;
       }

       .archive-item {
           flex-wrap: wrap;
       }

       .archive-item-actions {
           width: 100%;
           justify-content: flex-end;
       }
   }
   
   /* =================================================
      End Generator Page
      ================================================= */
   
   .login-container h1 {
       font-size: 2rem;
   }
   
   .login-container p {
       color: #f8f8f8;
   }
   
   .login-box {
       max-width: 450px;
       margin: auto;
   }
   
   .login-box h2 {
       font-size: 1.25rem;
       margin-bottom: 0.5rem;
   }
   
   .login-box p {
       font-size: 0.9rem;
       color: #555;
       margin-bottom: 1.5rem;
   }
   
   .login-box label {
       display: none;
       text-align: left;
       font-weight: 600;
       margin-bottom: 0.25rem;
   }
   
   .login-box input {
       width: 100%;
       padding: 0.75rem;
       margin-bottom: 1rem;
       color: #fff;
       background-color: #262626;
       border: none !important;
       border-radius: 17px;
       font-size: 1rem;
       transition: all 200ms ease;
   }

   .login-box input:focus {
       border: 2px solid #007bff !important;
   }
   
   
   .login-box button {
       width: 100%;
       padding: 0.90rem;
       background-color: #f5f5f5;
       color: #0f0f0f;
       border: none;
       font-size: 1rem;
       cursor: pointer;
   }

   .spacer{
       margin-top: 20px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-direction: row;
       gap: 20px;
   }

   .spacer p{
       margin-bottom: 0 !important;
       font-size: 1rem !important;
       font-weight: 600 !important;
   }

   .spacer hr{
         width: 100%;
         height: 1px;
         background-color: #404040;
         border: none;
   }
   
   .small-text {
       font-size: 0.85rem;
       color: #9fa39f !important;
       margin-top: 1rem;
       text-align: center;
   }
   
   .small-text a {
       color: #e7e7e7;
       text-decoration: none;
   }
   
   .small-text a:hover {
       text-decoration: underline;
   }
     /* === Split layout === */
    .login-layout {
      display: flex;
      min-height: 100vh !important;
    }
    .left, .right {
      flex: 1;
    }
    /* Colonna sinistra: form */
    .left {
      display: flex;
      align-items: center;
      justify-content: center;
             background-color: #101118; /* Fallback color */
       background-image: 
         radial-gradient(at 100% 100%, hsla(261, 55%, 15%, 0.411) 0px, transparent 50%),
         radial-gradient(at 0% 100%, hsla(340, 46%, 18%, 0.438) 0px, transparent 50%),
         radial-gradient(at 0% 0%, hsla(221, 32%, 15%, 0.411) 0px, transparent 50%);
       background-repeat: no-repeat;
       background-attachment: fixed;
      color: #ffffff;
    }
    /* Titolo e paragrafo principali in bianco */
    .login-container > h1,
    .login-container > p {
      color: #ffffff;
    }
    /* Colonna destra: immagine di demo */
    .right {
      background-image: url('../images/NOVAGLIE-drone-1-1200x1000.webp');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .right.registrati{
        background-image: url('../images/registrati1.webp');
    }

   #login-with {
       font-family: 'Matter', sans-serif !important;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       margin-top: 1rem;
       gap: 1rem;
   }

    .login-with-others {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 1rem;
    }
   
   .login-with-others button{
       display: flex;
       color: #fcfcfc !important;
       justify-content: center;
       align-items: center;
       flex-direction: row;
       margin-top: 1rem;
       background: #ffffff00 !important;
       border: 1px solid #4d4d4d !important;
   }
   .btn-google {
       background: #ffffff00 !important;
       border: 1px solid #4d4d4d !important;
       display: flex;
       align-items: center;
       padding: 0.5rem;
       width: 100%;
       border-radius: 30px !important;
       margin-top: 10px;
       cursor: pointer;
       color: #fcfcfc !important;
       font-weight: 500;
       transition: all 200ms ease !important;
       justify-content: center;
       gap: 20px;
   }
   .btn-discord {
       display: flex;
       align-items: center;
       gap: 0.9rem;
       margin-top: 10px;
       cursor: pointer;
       color: #ffffff !important;
       font-weight: 500;
       transition: all 200ms ease !important;
       justify-content: center;
   }
   .btn-discord img {
       filter: brightness(0) invert(1);
   }
   
   .btn-github {
       padding: 0.90rem;
       width: auto !important;
       border-radius: 50px !important;
       margin-top: 10px;
       cursor: pointer;
       color: #ffffff !important;
       font-weight: 500;
       transition: all 200ms ease !important;
       justify-content: center;
   }
   .btn-github img {
       filter: brightness(0) invert(1);
   }
   
   .btn-spotify {
       border-radius: 20px !important;
       margin-top: 10px;
       cursor: pointer;
       color: #ffffff !important;
       font-weight: 500;
       transition: all 200ms ease !important;
       justify-content: center;
   }
   .btn-spotify img {
       filter: brightness(0) invert(1);
   }
   
   .btn-figma {
       color: #ffffff !important;
       display: flex;
       align-items: center;
       gap: 0.9rem;
       border-radius: 20px !important;
       margin-top: 10px;
       cursor: pointer;
       font-weight: 500;
       transition: all 200ms ease !important;
       justify-content: center;
   }
   
   .btn-discord, .btn-github:hover, .btn-google, .btn-spotify, .btn-figma {
       border-radius: 30px !important;
   }

   .welcome-text{
         font-size: 1.5rem;
         color: #ffffff;
   }

   .vertical-hr {
      width: 2px; /* Larghezza della linea */
      background-color: #f1f1f1; /* Colore della linea */
      height: 50px; /* Altezza della linea (ad esempio) */
    }
   
   .inizialitation{
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 2rem;
   }

   @media (max-width: 768px) {
       .right{
              display: none;
       }
       .left{
        padding: 1rem;
       }
   }

   @media (max-width:1200px){
    .left{
        padding: 1rem;
    }
   }

   .forgot-container {
       text-align: right;
       margin-top: 0.5rem;
       text-decoration: none !important;
   }
   
   .forgot-password {
       width: 100%;
       border-radius: 30px !important;
       color: #161616 !important;
   }
   
   #forgotPasswordLink {
       text-decoration: none !important;
       margin-bottom: -10px;
       color: #161616 !important;
   }
   .forgot-link {
       cursor: pointer !important;
       text-decoration: none !important;
   }
   .forgot-link:hover {
       color: #003d80;
       text-decoration: none !important;
   }
   
   .password-requirements {
       list-style: none;
       padding: 0;
       margin: 1rem 0;
   }
   .password-requirements li {
       display: flex;
       align-items: center;
       gap: .5rem;
       font-size: .9rem;
       margin-bottom: .5rem;
   }
   .password-requirements .status {
       font-weight: bold;
   }
   
   /* =========================
         Form Page (Inserisci)
         ========================= */
   .form-page {
       display: flex;
       justify-content: center;
       align-items: center;
       min-height: calc(100vh - 64px);
       padding: 2rem 1rem;
   }
   
   .form-card {
       background: var(--background-color-light);
       padding: 2rem;
       border-radius: 12px;
       width: 100%;
       max-width: 480px;
   }
   
   .form-card h2 {
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.75rem;
       text-align: center;
   }
   
   .field-group {
       display: flex;
       flex-direction: column;
       margin-bottom: 1rem;
   }
   
   .field-group label {
       margin-bottom: 0.5rem;
       font-weight: 200;
   }
   
   .field-group input,
   .field-group select {
       padding: 0.75rem;
       background: var(--background-field-group);
       border: 1px solid var(--light-border-color);
       border-radius: 25px;
       font-size: 1rem;
       transition: all 200ms ease;
   }


   .btn-group-form{
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-top: 1rem;
   }

   /* =================================================
      INSERISCI PAGE - Wizard moderno
      ================================================= */
   .inserisci-page {
       min-height: calc(100vh - 64px);
       padding: 2rem 1rem 4rem;
       display: flex;
       justify-content: center;
   }

   .inserisci-container {
       width: 100%;
       max-width: 600px;
   }

   /* Header */
   .inserisci-header {
       margin-bottom: 1.5rem;
   }

   .inserisci-title-row h1 {
       font-size: 1.75rem;
       font-weight: 600;
       color: hsl(var(--foreground));
       display: flex;
       align-items: center;
       gap: 0.75rem;
       margin-bottom: 1.5rem;
   }

   .inserisci-title-row h1 i {
       color: hsl(var(--primary));
       font-size: 1.5rem;
   }

   /* Progress Steps */
   .wizard-progress {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0;
       padding: 1rem 0;
   }

   .progress-step {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.5rem;
       position: relative;
       z-index: 1;
   }

   .step-circle {
       width: 3rem;
       height: 3rem;
       border-radius: 50%;
       background: hsl(var(--secondary));
       border: 2px solid hsl(var(--border));
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
   }

   .step-circle i {
       font-size: 1rem;
       color: hsl(var(--muted-foreground));
       transition: all 0.3s ease;
   }

   .progress-step.active .step-circle {
       background: hsl(var(--primary));
       border-color: hsl(var(--primary));
       box-shadow: 0 0 20px hsl(var(--primary) / 0.4);
   }

   .progress-step.active .step-circle i {
       color: hsl(var(--primary-foreground));
   }

   .progress-step.completed .step-circle {
       background: hsl(var(--success));
       border-color: hsl(var(--success));
   }

   .progress-step.completed .step-circle i {
       color: hsl(var(--success-foreground));
   }

   .step-label {
       font-size: 0.8rem;
       font-weight: 500;
       color: hsl(var(--muted-foreground));
       transition: color 0.3s ease;
   }

   .progress-step.active .step-label {
       color: hsl(var(--primary));
   }

   .progress-step.completed .step-label {
       color: hsl(var(--success));
   }

   .progress-line {
       width: 80px;
       height: 3px;
       background: hsl(var(--border));
       margin: 0 0.5rem;
       margin-bottom: 1.5rem;
       border-radius: 2px;
       overflow: hidden;
   }

   .progress-line-fill {
       height: 100%;
       width: 0%;
       background: hsl(var(--primary));
       transition: width 0.4s ease;
   }

   /* Card principale */
   .inserisci-card {
       background: hsl(var(--card));
       border: 1px solid hsl(var(--border));
       border-radius: var(--radius-xl);
       padding: 2rem;
       box-shadow: var(--shadow-lg);
   }

   /* Step header */
   .step-header {
       margin-bottom: 1.5rem;
       padding-bottom: 1rem;
       border-bottom: 1px solid hsl(var(--border));
   }

   .step-header h2 {
       font-size: 1.25rem;
       font-weight: 600;
       color: hsl(var(--foreground));
       margin: 0 0 0.25rem;
   }

   .step-description {
       font-size: 0.9rem;
       color: hsl(var(--muted-foreground));
       margin: 0;
   }

   /* Form grid */
   .form-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 1rem;
   }

   .field-modern {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
   }

   .field-modern.full-width {
       grid-column: 1 / -1;
   }

   .field-modern label {
       font-size: 0.875rem;
       font-weight: 500;
       color: hsl(var(--foreground));
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }

   .field-modern label i {
       color: hsl(var(--muted-foreground));
       font-size: 0.8rem;
       width: 1rem;
   }

   .field-modern input,
   .field-modern select {
       width: 100%;
       height: 2.75rem;
       padding: 0 1rem;
       font-size: 0.95rem;
       background: hsl(var(--background));
       border: 1px solid hsl(var(--input));
       border-radius: var(--radius-md);
       color: hsl(var(--foreground));
       transition: all 0.15s ease;
       outline: none;
   }

   .field-modern input::placeholder {
       color: hsl(var(--muted-foreground));
   }

   .field-modern input:focus,
   .field-modern select:focus {
       border-color: hsl(var(--ring));
       box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
   }

   .field-modern input:disabled {
       background: hsl(var(--muted));
       color: hsl(var(--muted-foreground));
       cursor: not-allowed;
   }

   .field-modern select {
       appearance: none;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 1rem center;
       padding-right: 2.5rem;
   }

   /* Wizard actions */
   .wizard-actions {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-top: 2rem;
       padding-top: 1.5rem;
       border-top: 1px solid hsl(var(--border));
   }

   .wizard-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       padding: 0.75rem 1.5rem;
       font-size: 0.95rem;
       font-weight: 500;
       border: none;
       border-radius: var(--radius-md);
       cursor: pointer;
       transition: all 0.15s ease;
       outline: none;
   }

   .wizard-btn:focus-visible {
       outline: 2px solid hsl(var(--ring));
       outline-offset: 2px;
   }

   .wizard-btn-primary {
       background: hsl(var(--primary));
       color: hsl(var(--primary-foreground));
   }

   .wizard-btn-primary:hover {
       background: hsl(var(--primary) / 0.85);
       transform: translateX(2px);
   }

   .wizard-btn-secondary {
       background: hsl(var(--secondary));
       color: hsl(var(--secondary-foreground));
       border: 1px solid hsl(var(--border));
   }

   .wizard-btn-secondary:hover {
       background: hsl(var(--accent));
       color: hsl(var(--accent-foreground));
       transform: translateX(-2px);
   }

   .wizard-btn-success {
       background: hsl(var(--success));
       color: hsl(var(--success-foreground));
   }

   .wizard-btn-success:hover {
       background: hsl(var(--success) / 0.85);
       box-shadow: 0 0 20px hsl(var(--success) / 0.3);
   }

   /* Responsive */
   @media (max-width: 600px) {
       .inserisci-page {
           padding: 1rem 0.75rem 3rem;
       }

       .inserisci-card {
           padding: 1.5rem;
           border-radius: var(--radius-lg);
       }

       .inserisci-title-row h1 {
           font-size: 1.4rem;
       }

       .form-grid {
           grid-template-columns: 1fr;
       }

       .field-modern.full-width {
           grid-column: 1;
       }

       .wizard-actions {
           flex-direction: column-reverse;
           gap: 0.75rem;
       }

       .wizard-btn {
           width: 100%;
           justify-content: center;
       }

       .progress-line {
           width: 50px;
       }

       .step-circle {
           width: 2.5rem;
           height: 2.5rem;
       }

       .step-circle i {
           font-size: 0.875rem;
       }
   }
   
   /* =========================
         Dashboard Summary (Home)
         ========================= */
   .summary-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       gap: 1rem;
       margin: 1rem 0 2rem;
   }
   
   .summary-item {
       display: flex;
       justify-content: space-around;
       align-items: center;
       background: var(--background-card-color);
       outline: 2px solid var(--background-spacer-color);
       color: var(--text-color);
       border-radius: 8px;
       padding: 1rem;
       text-align: center;
   }
   
   .summary-value {
       font-family: 'Host Grotesk', monospace;
       font-size: 3rem;
       font-weight: bold;
   }
   
   .attuale-prep {
       display: flex;
       flex-direction: column;
   }
   
   #currentGuest {
       font-size: 1.5rem !important;
   }
   
   .summary-label {
       color: var(--small-text-color);
       margin-top: 0.5rem;
       font-size: 0.9rem;
   }
   
   .chart-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 1rem;
   }

   .apexcharts-canvas{
       color: black;
   }

   /* =================================================
      HOME PAGE - Design moderno
      ================================================= */
   .home-page {
       min-height: calc(100vh - 64px);
       padding: 2rem 1.5rem 4rem;
   }

   .home-container {
       max-width: 1200px;
       margin: 0 auto;
   }

   /* Header con saluto */
   .home-header {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       margin-bottom: 2rem;
       flex-wrap: wrap;
       gap: 1rem;
   }

   .home-greeting h1 {
       font-size: 2rem;
       font-weight: 600;
       color: hsl(var(--foreground));
       margin: 0 0 0.25rem;
   }

   .home-date {
       font-size: 0.95rem;
       color: hsl(var(--muted-foreground));
       margin: 0;
       text-transform: capitalize;
   }

   .home-add-btn {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.75rem 1.5rem;
       background: hsl(var(--primary));
       color: hsl(var(--primary-foreground));
       border: none;
       border-radius: var(--radius-md);
       font-size: 0.95rem;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.15s ease;
   }

   .home-add-btn:hover {
       background: hsl(var(--primary) / 0.85);
       transform: translateY(-2px);
       box-shadow: 0 4px 12px hsl(var(--primary) / 0.3);
   }

   /* Stats Cards */
   .home-stats {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       gap: 1rem;
       margin-bottom: 2rem;
   }

   .stat-card {
       display: flex;
       align-items: center;
       gap: 1rem;
       padding: 1.25rem;
       background: hsl(var(--card));
       border: 1px solid hsl(var(--border));
       border-radius: var(--radius-lg);
       transition: all 0.2s ease;
   }

   .stat-card:hover {
       border-color: hsl(var(--primary) / 0.3);
       box-shadow: var(--shadow-md);
   }

   .stat-icon {
       flex-shrink: 0;
       width: 3rem;
       height: 3rem;
       border-radius: var(--radius-md);
       background: hsl(var(--primary) / 0.1);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .stat-icon i {
       font-size: 1.25rem;
       color: hsl(var(--primary));
   }

   .stat-icon.accent {
       background: hsl(var(--info) / 0.1);
   }

   .stat-icon.accent i {
       color: hsl(var(--info));
   }

   .stat-content {
       flex: 1;
       min-width: 0;
   }

   .stat-value {
       font-size: 2rem;
       font-weight: 700;
       color: hsl(var(--foreground));
       font-family: var(--font-mono);
       line-height: 1.2;
   }

   .stat-label {
       font-size: 0.85rem;
       color: hsl(var(--muted-foreground));
       margin-top: 0.25rem;
   }

   /* Stat card highlight (current guest) */
   .stat-card-highlight {
       background: linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--success) / 0.08) 100%);
       border-color: hsl(var(--success) / 0.3);
   }

   .stat-card-highlight:hover {
       border-color: hsl(var(--success));
   }

   .stat-icon-inline {
       flex-shrink: 0;
       width: 3rem;
       height: 3rem;
       border-radius: var(--radius-md);
       background: hsl(var(--success) / 0.15);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .stat-icon-inline i {
       font-size: 1.25rem;
       color: hsl(var(--success));
   }

   .stat-label-top {
       font-size: 0.8rem;
       color: hsl(var(--muted-foreground));
       margin-bottom: 0.25rem;
   }

   .stat-value-name {
       font-size: 1.25rem;
       font-weight: 600;
       color: hsl(var(--foreground));
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   /* Main Grid */
   .home-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 1.5rem;
       margin-bottom: 2rem;
   }

   /* Home Cards */
   .home-card {
       background: hsl(var(--card));
       border: 1px solid hsl(var(--border));
       border-radius: var(--radius-xl);
       padding: 1.5rem;
       transition: all 0.2s ease;
   }

   .home-card:hover {
       box-shadow: var(--shadow-lg);
   }

   .home-card-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 1.25rem;
   }

   .home-card-title {
       display: flex;
       align-items: center;
       gap: 0.6rem;
   }

   .home-card-title i {
       font-size: 1rem;
       color: hsl(var(--primary));
   }

   .home-card-title h2 {
       font-size: 1.1rem;
       font-weight: 600;
       color: hsl(var(--foreground));
       margin: 0;
   }

   /* Badge */
   .badge {
       display: inline-flex;
       align-items: center;
       padding: 0.25rem 0.625rem;
       font-size: 0.7rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       border-radius: var(--radius-full);
   }

   .badge-upcoming {
       background: hsl(var(--info) / 0.15);
       color: hsl(var(--info));
   }

   /* Next Booking Card */
   .next-booking-card {
       cursor: pointer;
   }

   .next-booking-card:hover {
       border-color: hsl(var(--primary) / 0.4);
   }

   .next-booking-content {
       min-height: 120px;
   }

   .next-booking-details {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
   }

   .next-booking-empty {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       padding: 2rem;
       color: hsl(var(--muted-foreground));
       text-align: center;
   }

   .next-booking-empty i {
       font-size: 2.5rem;
       margin-bottom: 0.75rem;
       opacity: 0.5;
   }

   .next-booking-empty p {
       margin: 0;
       font-size: 0.95rem;
   }

   #nextBookingDetails .nextBookingDetails-nome {
       font-size: 1.5rem;
       font-weight: 600;
       color: hsl(var(--primary));
       display: block;
       margin-bottom: 0.75rem;
   }

   #nextBookingDetails div {
       font-size: 0.9rem;
       color: hsl(var(--foreground));
       padding: 0.25rem 0;
   }

   #nextBookingDetails div:not(:first-child) {
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }

   /* Quick Actions */
   .quick-actions-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 0.75rem;
   }

   .quick-action {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.5rem;
       padding: 1rem;
       background: hsl(var(--card));
       border: 1px solid hsl(var(--border));
       border-radius: var(--radius-md);
       text-decoration: none;
       color: hsl(var(--foreground));
       transition: all 0.15s ease;
   }

   .quick-action:hover {
       background: hsl(var(--accent));
       border-color: hsl(var(--primary) / 0.3);
       color: hsl(var(--accent-foreground));
       transform: translateY(-2px);
   }

   .quick-action-icon {
       width: 2.5rem;
       height: 2.5rem;
       border-radius: var(--radius-md);
       background: hsl(var(--secondary));
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.15s ease;
   }

   .quick-action:hover .quick-action-icon {
       background: hsl(var(--primary));
   }

   .quick-action-icon i {
       font-size: 1rem;
       color: hsl(var(--muted-foreground));
       transition: color 0.15s ease;
   }

   .quick-action:hover .quick-action-icon i {
       color: hsl(var(--primary-foreground));
   }

   .quick-action span {
       font-size: 0.8rem;
       font-weight: 500;
       text-align: center;
       color: inherit;
   }

   /* Chart Section */
   .chart-section {
       grid-column: 1 / -1;
   }

   .chart-refresh-btn {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.5rem 1rem;
       background: hsl(var(--secondary));
       color: hsl(var(--secondary-foreground));
       border: 1px solid hsl(var(--border));
       border-radius: var(--radius-full);
       font-size: 0.8rem;
       cursor: pointer;
       transition: all 0.15s ease;
   }

   .chart-refresh-btn:hover {
       background: hsl(var(--accent));
       color: hsl(var(--accent-foreground));
       border-color: hsl(var(--ring));
   }

   .chart-refresh-btn i {
       font-size: 0.75rem;
   }

   .chart-container {
       height: 300px;
       margin-top: 1rem;
   }

   /* Responsive */
   @media (max-width: 900px) {
       .home-grid {
           grid-template-columns: 1fr;
       }
   }

   @media (max-width: 600px) {
       .home-page {
           padding: 1.5rem 1rem 3rem;
       }

       .home-header {
           flex-direction: column;
           align-items: stretch;
       }

       .home-add-btn {
           width: 100%;
           justify-content: center;
       }

       .home-greeting h1 {
           font-size: 1.5rem;
       }

       .home-stats {
           grid-template-columns: 1fr;
       }

       .stat-value {
           font-size: 1.75rem;
       }

       .quick-actions-grid {
           grid-template-columns: repeat(2, 1fr);
       }

       .chart-container {
           height: 250px;
       }
   }
   
   /* =========================
         Buttons
         ========================= */
   .btn-primary {
       background: #000;
       color: #fff;
       border: none;
       padding: 0.75rem 1.5rem;
       border-radius: 6px;
       cursor: pointer;
       font-size: 1rem;
       transition: background-color 0.2s;
   }
   
   .btn-primary:hover {
       background: #333;
   }
   
   .btn-secondary {
       background-color: var(--background-button-color);
       color: var(--text-color-btn);
       border: none;
       text-decoration: none;
       padding: 0.75rem 1.5rem;
       border-radius: 12px;
       cursor: pointer;
       font-size: 1rem;
   }
   
   .btn-secondary:hover {
       background: #4a7c8c;
   }
   
   .btn-small {
       background: #c5d5d9;
       color: #000;
       border: none;
       padding: 0.5rem 1rem;
       border-radius: 20px;
       font-size: 0.85rem;
       cursor: pointer;
   }
   
   .buttonsdetails {
       display: flex;
       flex-direction: column;
       gap: 10px;
       width: 100%;
   }
   
   .buttondetail {
       background: #c5d5d9;
       color: #000;
       border: none;
       padding: 1rem 1rem;
       border-radius: 20px;
       font-size: 0.85rem;
       cursor: pointer;
   }
   
   /* =========================
         Lista Prenotazioni
         ========================= */
   .list-page {
       max-width: 1000px;
       margin: 2rem auto;
       padding: 0 1rem;
   }
   
   .list-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 1.5rem;
   }
   
   .cards-container {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
       gap: 1.5rem;
   }
   
   /* Card Prenotazione */
   .card-booking {
       background: rgba(38, 38, 43, 0.432);
       color: var(--text-color);
       backdrop-filter: blur(10px);
       border-radius: 12px;
       padding: 1.5rem;
       height: 350px;
       display: flex;
       flex-direction: column;
       transition: all 200ms ease;
   }
   
   .card-booking:hover {
       transform: translateY(-6px);
       outline: 2px solid var(--background-spacer-color);
   }
   
   .card-booking h3 {
       font-size: 1.3rem;
       color: var(--text-color);
       display: flex;
       align-items: center;
       gap: 0.5rem;
       margin-bottom: 0.75rem;
   }
   
   .flag-icon {
       width: 20px;
       height: auto;
       border-radius: 3px;
   }

   .card-header{
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 1rem;
   }
   
   .card-booking .info, .dates > div {
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
        color: var(--text-color);
        margin-bottom: 0.5rem;
   }

   .card-booking .info span {
       font-weight: 600;
       color: var(--text-color);
   }
   
   .card-booking .dates {
       margin-top: 1rem;
       font-size: 0.85rem;
   }
   
   .card-booking .dates span {
       font-weight: 600;
       color: var(--text-color);
   }

   
   .card-booking .dates div {
       color: var(--text-color);
   }
   
   .actions {
       margin-top: 20px !important;
   }

   @media (max-width: 600px) {
       .actions {
           width: 100%;
       }

       .actions > button {
         width: 100%;
       }
   }
   
   .selected {
       outline: 1px solid var(--light-border-color) !important;
       color: #fff !important;
   }
   
   /* 1) toolbar come flex container */
   .list-controls {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 0.75rem;
       padding: 0.75rem 1rem;
       border-radius: 0.5rem;
       margin-bottom: 1.5rem;
   }
   
   /* 2) raggruppa ricerca + sort */
   .search-sort-group {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       flex: 1;
       /* prende lo spazio disponibile */
       min-width: 200px;
       /* non si restringe troppo */
   }
   
   /* 3) input di ricerca */
   .search-sort-group input[type="text"] {
       flex: 1;
       padding: 0.5rem 0.75rem;
       border: 1px solid #ccc;
       border-radius: 0.375rem;
       font-size: 0.95rem;
   }
   
   /* 4) select sort */
   .search-sort-group select {
       padding: 0.5rem 0.75rem;
       border: 1px solid #ccc;
       border-radius: 0.375rem;
       font-size: 0.95rem;
       background-color: white;
   }
   
   /* 5) stili base bottoni */
   .btn {
       display: inline-flex;
       align-items: center;
       gap: 0.4rem;
       padding: 0.5rem 1rem;
       font-size: 0.95rem;
       border-radius: 0.375rem;
       border: none;
       cursor: pointer;
       transition: background-color 0.15s ease;
   }
   
   /* 6) varianti */
   .btn-primary {
       background-color: #007bff;
       color: #fff;
   }
   .btn-primary:hover {
       background-color: #006ae6;
   }
   
   .btn-danger {
       background-color: #dc3545;
       color: #fff;
   }
   .btn-danger:disabled {
       background-color: #e99;
       cursor: not-allowed;
   }
   .btn-danger:hover:enabled {
       background-color: #c82333;
   }
   
   .btn-outline-primary {
       background-color: transparent;
       color: #007bff;
       border: 1px solid #007bff;
   }
   .btn-outline-primary:hover {
       background-color: #007bff;
       color: #fff;
   }
   
   /* 7) icone leggere, allineate */
   .btn i {
       font-size: 1rem;
       line-height: 1;
   }

   .nextBookingDetails-nome{
     color: var(--primary-text-color-important) !important;
   }

   /* ========================================
      BOOKING TOOLBAR - Nuova barra moderna
      ======================================== */
   .booking-toolbar {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       padding: 0.75rem;
       background: hsl(var(--card));
       border: 1px solid hsl(var(--border));
       border-radius: var(--radius-lg);
       margin-top: 1rem;
       box-shadow: var(--shadow-sm);
   }

   /* Search box con icona */
   .toolbar-search {
       position: relative;
       flex: 1;
       min-width: 200px;
       max-width: 400px;
   }

   .toolbar-search .search-icon {
       position: absolute;
       left: 0.875rem;
       top: 50%;
       transform: translateY(-50%);
       color: hsl(var(--muted-foreground));
       font-size: 0.875rem;
       pointer-events: none;
   }

   .toolbar-search input {
       width: 100%;
       height: 2.5rem;
       padding: 0 1rem 0 2.5rem;
       font-size: 0.875rem;
       background: hsl(var(--background));
       border: 1px solid hsl(var(--input));
       border-radius: var(--radius-full);
       color: hsl(var(--foreground));
       transition: all 0.15s ease;
       outline: none;
   }

   .toolbar-search input::placeholder {
       color: hsl(var(--muted-foreground));
   }

   .toolbar-search input:focus {
       border-color: hsl(var(--ring));
       box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
   }

   /* Sort dropdown */
   .toolbar-sort select {
       height: 2.5rem;
       padding: 0 2rem 0 0.875rem;
       font-size: 0.875rem;
       background: hsl(var(--secondary));
       border: 1px solid hsl(var(--border));
       border-radius: var(--radius-md);
       color: hsl(var(--secondary-foreground));
       cursor: pointer;
       transition: all 0.15s ease;
       outline: none;
       appearance: none;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 0.75rem center;
   }

   .toolbar-sort select:hover {
       background-color: hsl(var(--secondary) / 0.8);
   }

   .toolbar-sort select:focus {
       border-color: hsl(var(--ring));
       box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
   }

   /* Action buttons group */
   .toolbar-actions {
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }

   .toolbar-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 2.5rem;
       height: 2.5rem;
       border: none;
       border-radius: var(--radius-md);
       cursor: pointer;
       transition: all 0.15s ease;
       outline: none;
       font-size: 0.95rem;
   }

   .toolbar-btn:focus-visible {
       outline: 2px solid hsl(var(--ring));
       outline-offset: 2px;
   }

   /* Primary button (Add) */
   .toolbar-btn-primary {
       background: hsl(var(--primary));
       color: hsl(var(--primary-foreground));
   }

   .toolbar-btn-primary:hover {
       background: hsl(var(--primary) / 0.85);
       transform: scale(1.05);
   }

   /* Danger button (Delete) */
   .toolbar-btn-danger {
       background: hsl(var(--destructive));
       color: hsl(var(--destructive-foreground));
   }

   .toolbar-btn-danger:hover:not(:disabled) {
       background: hsl(var(--destructive) / 0.85);
       transform: scale(1.05);
   }

   .toolbar-btn-danger:disabled {
       opacity: 0.5;
       cursor: not-allowed;
   }

   /* Counter button */
   .toolbar-btn-counter {
       background: hsl(var(--secondary));
       color: hsl(var(--secondary-foreground));
       border: 1px solid hsl(var(--border));
       min-width: 2.5rem;
       width: auto;
       padding: 0 0.75rem;
       font-weight: 600;
       font-size: 0.8rem;
   }

   .toolbar-btn-counter:hover {
       background: hsl(var(--accent));
       color: hsl(var(--accent-foreground));
       border-color: hsl(var(--ring));
   }

   .toolbar-btn-counter .counter-value {
       font-family: var(--font-mono);
   }

   /* Responsive */
   @media (max-width: 768px) {
       .booking-toolbar {
           flex-wrap: wrap;
       }
       
       .toolbar-search {
           order: 1;
           flex: 1 1 100%;
           max-width: none;
       }
       
       .toolbar-sort {
           order: 2;
           flex: 1;
       }
       
       .toolbar-sort select {
           width: 100%;
       }
       
       .toolbar-actions {
           order: 3;
       }
   }

   @media (max-width: 480px) {
       .booking-toolbar {
           padding: 0.625rem;
           gap: 0.5rem;
       }
       
       .toolbar-btn {
           width: 2.25rem;
           height: 2.25rem;
           font-size: 0.875rem;
       }
       
       .toolbar-sort select {
           height: 2.25rem;
           font-size: 0.8rem;
       }
       
       .toolbar-search input {
           height: 2.25rem;
           font-size: 0.8rem;
       }
   }

   
   /* 8) responsive minor tweaks */
   @media (max-width: 600px) {
       .list-controls {
           flex-direction: column;
           align-items: stretch;
       }
       .search-sort-group {
           width: 100%;
           flex-direction: column;
           margin-top: 0.5rem;
       }

       #searchInput{
        width: 100%;
       }

       .search-actions{
        display: flex;
        gap: 20px;
        width: 100%;
        justify-content: space-between !important;
        flex-direction: row;
       }
       .btn {
           width: 100%;
           justify-content: center;
       }
   
       #app-footer {
           width: 95%;
           display: flex;
           flex-direction: column !important;
       }
   }

   /* ========== Pagination styles ========== */
#pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--background-color-light);
  padding: 0.5rem 1rem;
  border-radius: 12px;
  margin-top: 2rem;
}

/* pulsanti numerati e frecce */
#pagination button {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* hover sui pulsanti abilitati */
#pagination button:not(:disabled):hover {
  background: var(--background-a-element-active-hover);
}

/* pagina attiva */
#pagination button[disabled].current {
  background: var(--text-color);
  color: var(--background-color);
  font-weight: 600;
}

/* pallini di ellissi */
#pagination .ellipsis {
  color: var(--small-text-color);
  font-size: 1rem;
  user-select: none;
}

   
   
   /* =========================
      Settings Page
      ========================= */
   .settings-page {
       max-width: 700px;
       margin: 2rem auto;
       padding: 0 1rem;
   }
   
   .settings-section {
       background: var(--background-color-light);
       padding: 1.5rem;
       border-radius: 12px;
       border: 1px solid var(--background-spacer-color);
       margin-bottom: 1rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 1rem;
   }
   
   .settings-header {
       display: flex;
       align-items: center;
       gap: 1rem;
       flex: 1;
   }
   
   .settings-icon {
       width: 44px;
       height: 44px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--background-spacer-color);
       border-radius: 10px;
       font-size: 1.2rem;
       color: hsl(var(--primary));
   }
   
   .settings-info h2 {
       font-size: 1rem;
       font-weight: 600;
       margin: 0 0 0.25rem 0;
       color: var(--text-color);
   }
   
   .settings-info p {
       font-size: 0.85rem;
       color: var(--small-text-color);
       margin: 0;
   }
   
   .settings-control {
       display: flex;
       align-items: center;
       gap: 0.75rem;
   }
   
   .theme-label {
       font-size: 1rem;
       color: var(--small-text-color);
       transition: color 0.2s ease;
   }
   
   .theme-label.active {
       color: hsl(var(--primary));
   }
   
   /* Switch toggle migliorato */
   .switch {
       position: relative;
       display: inline-block;
       width: 52px;
       height: 28px;
   }
   
   .switch input {
       opacity: 0;
       width: 0;
       height: 0;
   }
   
   .switch .slider {
       position: absolute;
       cursor: pointer;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: hsl(var(--muted));
       transition: 0.3s;
       border-radius: 28px;
   }
   
   .switch .slider:before {
       position: absolute;
       content: "";
       height: 22px;
       width: 22px;
       left: 3px;
       bottom: 3px;
       background-color: white;
       transition: 0.3s;
       border-radius: 50%;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   }
   
   .switch input:checked + .slider {
       background-color: hsl(var(--primary));
   }
   
   .switch input:checked + .slider:before {
       transform: translateX(24px);
   }
   
   .db-status {
       padding: 0.35rem 0.75rem;
       border-radius: 20px;
       font-size: 0.85rem;
       font-weight: 500;
   }
   
   .db-status.connected {
       background: hsl(var(--success) / 0.15);
       color: hsl(var(--success));
   }
   
   .db-status.error {
       background: hsl(var(--destructive) / 0.15);
       color: hsl(var(--destructive));
   }
   
   @media (max-width: 600px) {
       .settings-section {
           flex-direction: column;
           align-items: flex-start;
       }
       
       .settings-control {
           width: 100%;
           justify-content: flex-start;
           margin-top: 1rem;
       }
   }
   
   /* =========================
      User Profile Page - Redesign
      ========================= */
   .user-page {
       max-width: 1200px;
       margin: 0 auto;
       padding: 2rem 1rem;
   }
   
   /* Profile Header */
   .profile-header {
       display: flex;
       align-items: center;
       gap: 2rem;
       padding: 2rem;
       background: var(--background-color-light);
       border: 1px solid var(--background-spacer-color);
       border-radius: 16px;
       margin-bottom: 2rem;
   }
   
   .avatar-wrapper {
       position: relative;
       flex-shrink: 0;
   }
   
   .avatar-xl {
       width: 120px;
       height: 120px;
       border-radius: 50%;
       object-fit: cover;
       border: 4px solid var(--background-spacer-color);
       background: var(--background-spacer-color);
   }
   
   .avatar-badge {
       position: absolute;
       bottom: 5px;
       right: 5px;
       width: 32px;
       height: 32px;
       background: hsl(var(--primary));
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-size: 0.9rem;
       border: 3px solid var(--background-color-light);
   }
   
   .profile-main-info h1 {
       font-size: 2rem;
       font-weight: 700;
       margin: 0 0 0.25rem 0;
       color: var(--text-color);
   }
   
   .user-email {
       font-size: 1rem;
       color: var(--small-text-color);
       margin: 0 0 0.75rem 0;
   }
   
   .profile-meta {
       display: flex;
       gap: 1.5rem;
       flex-wrap: wrap;
   }
   
   .profile-meta span {
       font-size: 0.9rem;
       color: var(--small-text-color);
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }
   
   .profile-meta i {
       color: hsl(var(--primary));
   }
   
   /* Profile Grid */
   .profile-grid {
       display: grid;
       grid-template-columns: 1fr 380px;
       gap: 1.5rem;
   }
   
   .profile-main {
       display: flex;
       flex-direction: column;
       gap: 1.5rem;
   }
   
   .profile-sidebar {
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }
   
   /* Profile Cards */
   .profile-card {
       background: var(--background-color-light);
       border: 1px solid var(--background-spacer-color);
       border-radius: 12px;
       overflow: hidden;
   }
   
   .profile-card .card-header {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       padding: 1rem 1.25rem;
       border-bottom: 1px solid var(--background-spacer-color);
       background: var(--background-spacer-color);
   }
   
   .profile-card .card-header i {
       color: hsl(var(--primary));
       font-size: 1rem;
   }
   
   .profile-card .card-header h3 {
       font-size: 1rem;
       font-weight: 600;
       margin: 0;
       color: var(--text-color);
   }
   
   .profile-card .card-body {
       padding: 1.25rem;
   }
   
   /* Info Rows */
   .info-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0.75rem 0;
       border-bottom: 1px solid var(--background-spacer-color);
   }
   
   .info-row:last-child {
       border-bottom: none;
       padding-bottom: 0;
   }
   
   .info-row:first-child {
       padding-top: 0;
   }
   
   .info-label {
       font-size: 0.9rem;
       color: var(--small-text-color);
   }
   
   .info-value {
       font-size: 0.9rem;
       color: var(--text-color);
       font-weight: 500;
   }
   
   .info-value.mono {
       font-family: var(--font-mono);
       font-size: 0.8rem;
       background: var(--background-spacer-color);
       padding: 0.25rem 0.5rem;
       border-radius: 4px;
   }
   
   /* Providers List */
   .providers-list {
       list-style: none;
       padding: 0;
       margin: 0;
   }
   
   .providers-list li {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0.75rem 1rem;
       background: var(--background-spacer-color);
       border-radius: 8px;
       margin-bottom: 0.5rem;
   }
   
   .providers-list li:last-child {
       margin-bottom: 0;
   }
   
   .provider-info {
       display: flex;
       align-items: center;
       gap: 0.75rem;
   }
   
   .provider-icon {
       width: 32px;
       height: 32px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 8px;
       font-size: 1rem;
   }
   
   .provider-icon.google { background: #ea4335; color: white; }
   .provider-icon.discord { background: #5865f2; color: white; }
   .provider-icon.github { background: #333; color: white; }
   .provider-icon.spotify { background: #1db954; color: white; }
   
   .unlink-btn {
       font-size: 0.8rem;
       padding: 0.35rem 0.75rem;
       border-radius: 6px;
       background: transparent;
       border: 1px solid var(--background-spacer-color);
       color: var(--small-text-color);
       cursor: pointer;
       transition: all 0.2s ease;
   }
   
   .unlink-btn:hover {
       background: hsl(var(--destructive) / 0.1);
       border-color: hsl(var(--destructive));
       color: hsl(var(--destructive));
   }
   
   /* Sessions List */
   .sessions-list {
       list-style: none;
       padding: 0;
       margin: 0 0 1rem 0;
   }
   
   .session-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0.75rem;
       background: var(--background-spacer-color);
       border-radius: 8px;
       margin-bottom: 0.5rem;
   }
   
   .session-item:last-child {
       margin-bottom: 0;
   }
   
   .session-info {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       font-size: 0.9rem;
   }
   
   .session-item.current .session-info i {
       color: hsl(var(--success));
   }
   
   .session-badge {
       font-size: 0.75rem;
       padding: 0.2rem 0.5rem;
       border-radius: 4px;
       background: hsl(var(--success) / 0.15);
       color: hsl(var(--success));
       font-weight: 500;
   }
   
   /* Action Buttons */
   .actions-list {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
   }
   
   .action-btn {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       width: auto;
       padding: 0.75rem 1rem;
       background: var(--background-spacer-color);
       border: 1px solid transparent;
       border-radius: 8px;
       color: var(--text-color);
       font-size: 0.9rem;
       cursor: pointer;
       transition: all 0.2s ease;
   }
   
   .action-btn:hover {
       background: hsl(var(--primary) / 0.1);
       border-color: hsl(var(--primary) / 0.3);
   }
   
   .action-btn i {
       width: 20px;
       text-align: center;
       color: hsl(var(--primary));
   }
   
   .action-btn.danger {
       color: hsl(var(--destructive));
   }
   
   .action-btn.danger i {
       color: hsl(var(--destructive));
   }
   
   .action-btn.danger:hover {
       background: hsl(var(--destructive) / 0.1);
       border-color: hsl(var(--destructive) / 0.3);
   }
   
   .action-btn.full {
       justify-content: center;
   }
   
   /* Danger Zone */
   .danger-zone .card-header {
       background: hsl(var(--destructive) / 0.1);
   }
   
   .danger-zone .card-header i {
       color: hsl(var(--destructive));
   }
   
   /* Empty State */
   .empty-state {
       text-align: center;
       padding: 2rem;
       color: var(--small-text-color);
   }
   
   .empty-state i {
       font-size: 2rem;
       margin-bottom: 0.5rem;
       display: block;
   }
   
   /* Responsive */
   @media (max-width: 900px) {
       .profile-grid {
           grid-template-columns: 1fr;
       }
       
       .profile-header {
           flex-direction: column;
           text-align: center;
       }
       
       .profile-meta {
           justify-content: center;
       }
   }
   
   @media (max-width: 500px) {
       .avatar-xl {
           width: 80px;
           height: 80px;
       }
       
       .avatar-badge {
           width: 26px;
           height: 26px;
           font-size: 0.75rem;
       }
       
       .profile-main-info h1 {
           font-size: 1.5rem;
       }
   }

   /* =========================
      Export Page - Modern Design
      ========================= */
   .export-page {
       max-width: 1400px;
       margin: 0 auto;
       padding: 1.5rem;
   }

   /* Header */
   .export-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 1.5rem;
       gap: 1rem;
       flex-wrap: wrap;
   }

   .export-title-area {
       display: flex;
       align-items: center;
       gap: 1rem;
   }

   .export-title-area h1 {
       font-size: 1.75rem;
       font-weight: 700;
       margin: 0;
       color: var(--text-color);
   }

   .export-subtitle {
       font-size: 0.9rem;
       color: var(--small-text-color);
       margin: 0.25rem 0 0 0;
   }

   .back-btn {
       width: 42px;
       height: 42px;
       border-radius: 10px;
       border: 1px solid var(--background-spacer-color);
       background: var(--background-color-light);
       color: var(--text-color);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.2s ease;
   }

   .back-btn:hover {
       background: hsl(var(--primary) / 0.1);
       border-color: hsl(var(--primary) / 0.3);
   }

   .export-actions {
       display: flex;
       gap: 0.75rem;
       flex-wrap: wrap;
   }

   .action-btn-primary {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.65rem 1.25rem;
       background: hsl(var(--primary));
       color: white;
       border: none;
       border-radius: 8px;
       font-size: 0.9rem;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.2s ease;
       text-decoration: none;
   }

   .action-btn-primary:hover {
       background: hsl(var(--primary) / 0.85);
       transform: translateY(-1px);
   }

   .action-btn-outline {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.65rem 1.25rem;
       background: transparent;
       color: var(--text-color);
       border: 1px solid var(--background-spacer-color);
       border-radius: 8px;
       font-size: 0.9rem;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.2s ease;
       text-decoration: none;
   }

   .action-btn-outline:hover {
       background: var(--background-spacer-color);
   }

   .action-btn-outline.danger {
       color: hsl(var(--destructive));
       border-color: hsl(var(--destructive) / 0.3);
   }

   .action-btn-outline.danger:hover {
       background: hsl(var(--destructive) / 0.1);
   }

   .action-btn-danger {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.65rem 1.25rem;
       background: hsl(var(--destructive));
       color: white;
       border: none;
       border-radius: 8px;
       font-size: 0.9rem;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.2s ease;
   }

   .action-btn-danger:hover {
       background: hsl(var(--destructive) / 0.85);
   }

   /* Stats Bar */
   .export-stats {
       display: flex;
       gap: 1rem;
       margin-bottom: 1.5rem;
       flex-wrap: wrap;
   }

   .stat-item {
       display: flex;
       align-items: center;
       gap: 1rem;
       padding: 1rem 1.5rem;
       background: var(--background-color-light);
       border: 1px solid var(--background-spacer-color);
       border-radius: 12px;
       flex: 1;
       min-width: 150px;
   }

   .stat-item i {
       font-size: 1.5rem;
       color: hsl(var(--primary));
       opacity: 0.8;
   }

   .stat-info {
       display: flex;
       flex-direction: column;
   }

   .stat-value {
       font-size: 1.5rem;
       font-weight: 700;
       color: var(--text-color);
       line-height: 1;
   }

   .stat-label {
       font-size: 0.8rem;
       color: var(--small-text-color);
       margin-top: 0.25rem;
   }

   /* Filters */
   .export-filters {
       display: flex;
       gap: 1rem;
       margin-bottom: 1.5rem;
       flex-wrap: wrap;
   }

   .search-box {
       flex: 1;
       min-width: 250px;
       position: relative;
   }

   .search-box i {
       position: absolute;
       left: 1rem;
       top: 50%;
       transform: translateY(-50%);
       color: var(--small-text-color);
   }

   .search-box input {
       width: 100%;
       padding: 0.75rem 1rem 0.75rem 2.75rem;
       border: 1px solid var(--background-spacer-color);
       border-radius: 10px;
       background: var(--background-color-light);
       color: var(--text-color);
       font-size: 0.9rem;
   }

   .search-box input:focus {
       outline: none;
       border-color: hsl(var(--primary) / 0.5);
       box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
   }

   .filter-group select {
       padding: 0.75rem 2.5rem 0.75rem 1rem;
       border: 1px solid var(--background-spacer-color);
       border-radius: 10px;
       background: var(--background-color-light);
       color: var(--text-color);
       font-size: 0.9rem;
       cursor: pointer;
       appearance: none;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 1rem center;
   }

   /* Export Grid */
   .export-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
       gap: 1rem;
   }

   /* Export Card */
   .export-card {
       background: var(--background-color-light);
       border: 1px solid var(--background-spacer-color);
       border-radius: 12px;
       overflow: hidden;
       transition: all 0.2s ease;
   }

   .export-card:hover {
       border-color: hsl(var(--primary) / 0.3);
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   }

   .export-card.duplicate {
       border-color: hsl(var(--warning) / 0.5);
       background: hsl(var(--warning) / 0.05);
   }

   .export-card-header {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       padding: 1rem 1rem 0.75rem;
       gap: 0.75rem;
   }

   .export-card-icon {
       width: 44px;
       height: 44px;
       border-radius: 10px;
       background: hsl(var(--destructive) / 0.1);
       color: hsl(var(--destructive));
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.25rem;
       flex-shrink: 0;
   }

   .export-card-title {
       flex: 1;
       min-width: 0;
   }

   .export-card-title h3 {
       font-size: 1rem;
       font-weight: 600;
       margin: 0;
       color: var(--text-color);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .export-card-title span {
       font-size: 0.8rem;
       color: var(--small-text-color);
   }

   .duplicate-badge {
       font-size: 0.7rem;
       padding: 0.2rem 0.5rem;
       background: hsl(var(--warning) / 0.15);
       color: hsl(var(--warning));
       border-radius: 4px;
       font-weight: 500;
   }

   .export-card-body {
       padding: 0 1rem;
   }

   .export-meta {
       display: flex;
       flex-wrap: wrap;
       gap: 1rem;
       font-size: 0.85rem;
       color: var(--small-text-color);
   }

   .export-meta span {
       display: flex;
       align-items: center;
       gap: 0.4rem;
   }

   .export-meta i {
       font-size: 0.8rem;
       opacity: 0.7;
   }

   .export-card-actions {
       display: flex;
       gap: 0.5rem;
       padding: 1rem;
       border-top: 1px solid var(--background-spacer-color);
       margin-top: 0.75rem;
   }

   .export-card-actions button,
   .export-card-actions a {
       flex: 1;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.4rem;
       padding: 0.6rem 0.75rem;
       border-radius: 8px;
       font-size: 0.85rem;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.2s ease;
       text-decoration: none;
       border: none;
   }

   .btn-preview {
       background: var(--background-spacer-color);
       color: var(--text-color);
   }

   .btn-preview:hover {
       background: hsl(var(--primary) / 0.15);
       color: hsl(var(--primary));
   }

   .btn-download {
       background: hsl(var(--primary) / 0.15);
       color: hsl(var(--primary));
   }

   .btn-download:hover {
       background: hsl(var(--primary));
       color: white;
   }

   .btn-delete {
       background: #c72929 !important;
       color: var(--small-text-color);
       flex: 0;
       padding: 0.6rem;
   }

   .btn-delete:hover {
       background: hsl(0, 68%, 24%) !important;
       color: hsl(var(--destructive));
   }

   /* Empty State */
   .empty-exports {
       text-align: center;
       padding: 4rem 2rem;
       background: var(--background-color-light);
       border: 1px dashed var(--background-spacer-color);
       border-radius: 16px;
   }

   .empty-exports i {
       font-size: 4rem;
       color: var(--small-text-color);
       opacity: 0.3;
       margin-bottom: 1rem;
   }

   .empty-exports h3 {
       font-size: 1.25rem;
       color: var(--text-color);
       margin: 0 0 0.5rem 0;
   }

   .empty-exports p {
       color: var(--small-text-color);
       margin: 0 0 1.5rem 0;
       max-width: 400px;
       margin-left: auto;
       margin-right: auto;
   }

   /* Preview Modal */
   .preview-modal {
       width: 90%;
       max-width: 900px;
       height: 85vh;
   }

   .preview-modal .modal-body {
       flex: 1;
       padding: 0;
       overflow: hidden;
   }

   .preview-modal iframe {
       width: 100%;
       height: 100%;
       border: none;
       background: #f0f0f0;
   }

   /* Delete Modal */
   .delete-modal {
       max-width: 450px;
   }

   .delete-modal .modal-header.danger {
       background: hsl(var(--destructive) / 0.1);
   }

   .delete-modal .modal-header.danger h3 {
       color: hsl(var(--destructive));
   }

   .delete-name {
       font-weight: 600;
       color: var(--text-color);
       padding: 0.75rem;
       background: var(--background-spacer-color);
       border-radius: 8px;
       margin: 0.5rem 0;
   }

   .delete-warning {
       font-size: 0.85rem;
       color: hsl(var(--destructive));
       margin: 0;
   }

   /* Receipt Modal Form */
   #receiptModal .modal-container {
       max-width: 500px;
       width: 100%;
   }

   #receiptModal .form-group {
       margin-bottom: 1rem;
   }

   #receiptModal .form-group label {
       display: block;
       margin-bottom: 0.5rem;
       font-size: 0.9rem;
       color: var(--text-color);
       font-weight: 500;
   }

   #receiptModal .form-select,
   #receiptModal .form-input {
       width: 100%;
       padding: 0.75rem 1rem;
       border: 1px solid var(--background-spacer-color);
       border-radius: 8px;
       background: var(--background-color);
       color: var(--text-color);
       font-size: 0.95rem;
       transition: border-color 0.2s ease;
   }

   #receiptModal .form-select:focus,
   #receiptModal .form-input:focus {
       outline: none;
       border-color: hsl(var(--primary));
   }

   #receiptModal .booking-preview {
       background: var(--background-spacer-color);
       border-radius: 10px;
       padding: 1rem;
       margin-top: 1rem;
   }

   #receiptModal .booking-preview h4 {
       margin: 0 0 0.75rem 0;
       font-size: 0.9rem;
       color: hsl(var(--primary));
   }

   #receiptModal .preview-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 0.5rem;
   }

   #receiptModal .preview-grid p {
       margin: 0;
       font-size: 0.85rem;
       color: var(--small-text-color);
   }

   #receiptModal .preview-grid strong {
       color: var(--text-color);
   }

   /* Bulk Export Modal */
   #bulkExportModal .modal-container {
       max-width: 520px;
       width: 100%;
   }

   .export-options {
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
       margin-bottom: 1.25rem;
   }

   .export-option {
       display: flex;
       align-items: flex-start;
       gap: 0.75rem;
       padding: 1rem;
       border: 2px solid var(--background-spacer-color);
       border-radius: 10px;
       cursor: pointer;
       transition: all 0.2s ease;
   }

   .export-option:has(input:checked) {
       border-color: hsl(var(--primary));
       background: hsl(var(--primary) / 0.05);
   }

   .export-option input[type="radio"] {
       margin-top: 0.25rem;
       accent-color: hsl(var(--primary));
   }

   .export-option label {
       display: flex;
       align-items: flex-start;
       gap: 0.75rem;
       cursor: pointer;
       flex: 1;
   }

   .export-option label i {
       font-size: 1.5rem;
       color: hsl(var(--primary));
       margin-top: 0.1rem;
   }

   .export-option label div {
       display: flex;
       flex-direction: column;
       gap: 0.25rem;
   }

   .export-option label strong {
       color: var(--text-color);
       font-size: 0.95rem;
   }

   .export-option label span {
       color: var(--small-text-color);
       font-size: 0.8rem;
   }

   .export-section {
       margin-top: 1rem;
       padding-top: 1rem;
       border-top: 1px solid var(--background-spacer-color);
   }

   .export-section label {
       display: block;
       margin-bottom: 0.5rem;
       font-size: 0.9rem;
       color: var(--text-color);
       font-weight: 500;
   }

   .export-section .form-select {
       width: 100%;
       padding: 0.75rem 1rem;
       border: 1px solid var(--background-spacer-color);
       border-radius: 8px;
       background: var(--background-color);
       color: var(--text-color);
       font-size: 0.95rem;
   }

   .takeout-info {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       margin-top: 0.75rem;
       padding: 0.75rem;
       background: hsl(var(--primary) / 0.1);
       border-radius: 8px;
       font-size: 0.85rem;
       color: hsl(var(--primary));
   }

   .stat-item.export-action {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 0;
   }

   .stat-item.export-action .action-btn-primary {
       height: 100%;
       border-radius: 12px;
       padding: 0.75rem 1.25rem;
   }

   /* Modal base styles */
   .modal-overlay {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.6);
       backdrop-filter: blur(4px);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 10000;
       padding: 1rem;
   }

   .modal-container {
       background: var(--background-color-light);
       border-radius: 16px;
       display: flex;
       flex-direction: column;
       max-height: 90vh;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   }

   .modal-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1rem 1.25rem;
       border-bottom: 1px solid var(--background-spacer-color);
   }

   .modal-header h3 {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       margin: 0;
       font-size: 1.1rem;
       color: var(--text-color);
   }

   .modal-close {
       width: 32px;
       height: 32px;
       border: none;
       background: transparent;
       color: var(--small-text-color);
       cursor: pointer;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.2s ease;
   }

   .modal-close:hover {
       background: var(--background-spacer-color);
       color: var(--text-color);
   }

   .modal-body {
       padding: 1.25rem;
   }

   .modal-footer {
       display: flex;
       justify-content: flex-end;
       gap: 0.75rem;
       padding: 1rem 1.25rem;
       border-top: 1px solid var(--background-spacer-color);
   }

   /* Responsive */
   @media (max-width: 768px) {
       .export-header {
           flex-direction: column;
           align-items: flex-start;
       }

       .export-actions {
           width: 100%;
       }

       .export-actions > * {
           flex: 1;
           justify-content: center;
       }

       .stat-item {
           min-width: calc(50% - 0.5rem);
       }

       .export-grid {
           grid-template-columns: 1fr;
       }

       .action-btn-outline span,
       .action-btn-primary span {
           display: none;
       }

       .preview-modal {
           width: 100%;
           height: 95vh;
       }
   }
   
   /* ===== Custom Select ===== */
   .custom-select-container {
       position: relative;
       width: 100%; 
   }
   .custom-select-container select {
       display: none;
       /* nasconde il select nativo */
   }
   .select-selected {
       background: var(--background-field-group);
       border: 1px solid var(--background-spacer-color);
       border-radius: 30px;
       padding: 0.75rem;
       cursor: pointer;
       position: relative;
       user-select: none;
   }
   .select-selected:after {
       content: "";
       position: absolute;
       top: 50%;
       right: 1rem;
       width: 0;
       height: 0;
       border: 6px solid transparent;
       border-color: #333 transparent transparent transparent;
       transform: translateY(-50%);
       pointer-events: none;
   }
   .select-selected.select-arrow-active:after {
       border-color: transparent transparent transparent transparent;
       top: 45%;
   }
   .select-items {
       position: absolute;
       background: var(--background-field-group);
       top: 100%;
       left: 0;
       right: 0;
       border: 1px solid var(--background-spacer-color);
       border-radius: 20px;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
       z-index: 99;
       max-height: 200px;
       overflow-y: auto;
       margin-top: 12px;
   }
   .select-items div {
       padding: 0.75rem;
       cursor: pointer;
   }
   .select-items div:hover,
   .select-items .same-as-selected {
       background-color:  var(--background-spacer-color);
   }
   .select-hide {
       display: none;
   }
   
   /* =========================
      Toast notifications
      ========================= */
   #toast-container {
       position: fixed;
       top: 1rem;
       right: 1rem;
       z-index: 10000;
   }
   .toast {
       display: flex;
       align-items: center;
       background: #111111;
       color: #e0e0e0;
       padding: 0.75rem 1rem;
       margin-bottom: 0.5rem;
       border-radius: 12px;
       opacity: 0;
       transform: translateY(-20px);
       transition: opacity 0.3s ease, transform 0.3s ease;
   }
   .toast.show {
       opacity: 1;
       transform: translateY(0);
   }
   .toast.success {
       background: #51ec9e;
       border: 1px solid #006130;
   }
   .toast.error {
       background: #f14949;
       border: 1px solid #570404;
   }
   
   #deleteBtn {
       text-align: center;
       background: #ff5f5f !important;
   }
   
   .deleteBtn {
       text-align: center;
       background: #ff5f5f !important;
   }
   
   .buttonsdetails>button {
       padding-left: 50px;
       padding-right: 50px;
       text-align: center;
   }
   
   #searchInput {
       padding: 0.75rem;
       border: 1px solid #ccc;
       border-radius: 6px;
       font-size: 1rem;
       height: 50px !important;
       transition: border-color 0.2s;
   }
   
   #sortSelect {
       width: 200px;
       padding: 0.75rem;
       border: 1px solid #ccc;
       border-radius: 6px;
       font-size: 1rem;
       margin-bottom: 1rem;
       transition: border-color 0.2s;
   }
   
   .wizard-header {
       display: flex;
       gap: 0.5rem;
       margin-bottom: 1rem;
       align-content: center;
       justify-content: space-between;
       align-items: center;
   }
   
   .step-badge {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 1.5rem;
       height: 1.5rem;
       border-radius: 50%;
       background-color: var(--background-button-color);
       /* adatta alla tua palette */
       color: var(--text-color-btn);
       font-size: 0.875rem;
       font-weight: bold;
   }

      
   .ring-container {
       position: relative;
   }
   
   .circle {
       width: 15px;
       height: 15px;
       background-color: #62bd19;
       border-radius: 50%;
       position: absolute;
       top: 23px;
       left: 23px;
   }
   
   .ringring {
       border: 3px solid #62bd19;
       -webkit-border-radius: 30px;
       border-radius: 30px;
       height: 25px;
       width: 25px;
       position: absolute;
       left: 15px;
       top: 15px;
       -webkit-animation: pulsate 1s ease-out;
       animation: pulsate 1s ease-out;
       -webkit-animation-iteration-count: infinite;
       animation-iteration-count: infinite;
       opacity: 0.0
   }
   @-webkit-keyframes pulsate {
       0% {
           -webkit-transform: scale(0.1, 0.1);
           opacity: 0.0;
       }
       50% {
           opacity: 1.0;
       }
       100% {
           -webkit-transform: scale(1.2, 1.2);
           opacity: 0.0;
       }
   }

   @keyframes pulsate {
       0% {
           transform: scale(0.1, 0.1);
           opacity: 0.0;
       }
       50% {
           opacity: 1.0;
       }
       100% {
           transform: scale(1.2, 1.2);
           opacity: 0.0;
       }
   }


   .querytent h1{
         font-size: 2rem;
         color: var(--text-color);
         margin-bottom: 1rem;
         text-align: center;
   }

   .querytent #bookingSelector{
         margin-bottom: 1rem;
         width: 100%;
         padding: 0.75rem;
         border: 1px solid #ccc;
         border-radius: 6px;
         font-size: 1rem;
         transition: border-color 0.2s;
   }

@media (max-width: 600px) {
   #syncBtn > #text{
      display: none;
   }
}

/* =========================
   Pagina Dettagli (Nuovo Stile)
   ========================= */

.details-container {
  padding: 2rem 1rem;
  max-width: 1400px;
  margin: auto;
  position: relative;
}

/* Gradient decorativo dietro il nome - SOTTO la navbar */
.details-container::before {
  content: '';
  position: fixed;
  top: -100px;
  left: 0;
  width: 110%;
  height: 350px;
  background: #062952;
filter: blur(150px);
  z-index: -10; /* Sotto la navbar (z-index: 1000) ma sopra al background */
}

.details-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}

.details-header p {
  color: var(--small-text-color);
  font-size: 1.2rem;
}

.details-header h1 {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0.5rem 0;
  letter-spacing: 1px;
}

.header-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.id-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--background-color-light);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  border: 1px solid var(--background-spacer-color);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.status-badge.status-pending {
  background: hsl(45, 93%, 47%, 0.15);
  color: hsl(45, 93%, 47%);
  border: 1px solid hsl(45, 93%, 47%, 0.3);
}

.status-badge.status-complete {
  background: hsl(142, 76%, 36%, 0.15);
  color: hsl(142, 76%, 36%);
  border: 1px solid hsl(142, 76%, 36%, 0.3);
}

.details-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

.details-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.detail-card {
  background: var(--background-color-light);
  border: 1px solid var(--background-spacer-color);
  border-radius: 16px;
  padding: 1.5rem;
}

.detail-card h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-color);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.info-grid p {
  background: var(--background-field-group);
  padding: 0.75rem;
  border-radius: 8px;
}

.info-grid p strong {
  color: var(--small-text-color);
  margin-right: 0.5rem;
}

.actions-panel {
  background: var(--background-color-light);
  border: 1px solid var(--background-spacer-color);
  border-radius: 16px;
  padding: 1.5rem;
  align-self: start; /* Si allinea in alto */
}

.actions-panel h3 {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  display: flex;
/* Dropdown menu styles */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--background-color-light);
    border: 1px solid var(--background-spacer-color);
    border-radius: 8px;
    padding: 0.5rem 0;
    list-style: none;
    min-width: 200px;
    z-index: 1001;
}

.dropdown.open .dropdown-menu {
    display: block;
}

.dropdown-menu li a {
    padding: 0.5rem 1rem;
    display: block;
    color: var(--text-color);
    text-decoration: none;
}

.dropdown-menu li a:hover {
    background-color: var(--background-a-element-active-hover);
}

  align-items: center;
  gap: 0.5rem;
}

.btn-action {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  justify-content: flex-start;
}

.btn-action.btn-secondary {
  background-color: var(--background-field-group) !important;
  border-color: var(--background-spacer-color) !important;
}

.btn-action.btn-danger {
  background-color: #381a1a !important;
  color: #ff8f8f !important;
  border-color: #5c2a2a !important;
}

/* Stili Modale */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal-content {
  background: var(--background-color-light);
  border-radius: 16px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--background-spacer-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-close-btn {
  background: none !important;
  border: none;
  font-size: 2rem;
  cursor: pointer;
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-grid input, .form-grid select {
  width: 100%;
  padding: 0.75rem;
  border-radius: 8px !important;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--background-spacer-color);
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

@media (max-width: 900px) {
  .details-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .details-header h1 { font-size: 2.5rem; }
  .form-grid { grid-template-columns: 1fr; }
}

/* =========================
   Ospiti Alloggiati Card - dettagli.html
   ========================= */

.ospiti-card {
  background: var(--background-color-light);
  border: 1px solid var(--background-spacer-color);
  border-radius: 16px;
  padding: 1.5rem;
}

.ospiti-meta {
  font-size: 0.85rem;
  color: var(--small-text-color);
  margin-bottom: 1rem;
}

.test-badge {
  display: inline-block;
  background: hsl(var(--warning) / 0.2);
  color: hsl(var(--warning));
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 0.5rem;
  text-transform: uppercase;
}

.ospiti-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ospite-item {
  background: var(--background-field-group);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color 0.2s;
}

.ospite-item:hover {
  border-color: var(--background-spacer-color);
}

.ospite-item.capogruppo {
  border-color: hsl(var(--primary) / 0.3);
  background: hsl(var(--primary) / 0.05);
}

.ospite-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: background 0.2s;
}

.ospite-header:hover {
  background: hsl(var(--muted) / 0.5);
}

.ospite-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ospite-name {
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ospite-name i {
  font-size: 0.85rem;
  color: var(--small-text-color);
}

.ospite-item.capogruppo .ospite-name i {
  color: hsl(var(--warning));
}

.capogruppo-badge {
  background: hsl(var(--warning) / 0.15);
  color: hsl(var(--warning));
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.ospite-toggle {
  color: var(--small-text-color);
  font-size: 0.85rem;
  transition: transform 0.3s ease;
}

.ospite-toggle.rotated {
  transform: rotate(180deg);
}

.ospite-details {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--background-spacer-color);
}

.ospite-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  padding-top: 1rem;
}

.ospite-details .detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ospite-details .detail-label {
  font-size: 0.75rem;
  color: var(--small-text-color);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ospite-details .detail-value {
  font-size: 0.9rem;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sensitive-data .detail-value {
  font-family: 'JetBrains Mono', monospace;
}

.masked-value {
  color: var(--small-text-color);
}

.reveal-btn {
  background: transparent;
  border: none;
  color: var(--small-text-color);
  cursor: pointer;
  padding: 0.25rem;
  font-size: 0.85rem;
  transition: color 0.2s;
}

.reveal-btn:hover {
  color: hsl(var(--primary));
}

/* Invio Alloggiati - form-group-full */
.form-group-full {
  grid-column: 1 / -1;
}