/* ===== LOGIN PAGE STYLES ===== */

    :root {
      --login-bg-start: #f4f7f9;
      --login-bg-end: #dfe8ed;
      --login-dark: #374651;
      --login-dark-hover: #283740;
      --login-accent: #e6383f;
      --login-border: #dbe3e8;
      --login-muted: #6c7a83;
    }

    html, body { min-height: 100%; }

    body {
      margin: 0;
      background:
        radial-gradient(circle at 15% 15%, rgba(255,255,255,.95) 0, rgba(255,255,255,0) 34%),
        linear-gradient(145deg, var(--login-bg-start), var(--login-bg-end));
      color: var(--login-dark);
       padding-bottom: 0px !important;
    }

    .auth-wrapper {
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px 14px;
    }

    .login-card {
      width: 100%;
      max-width: 440px;
      padding: 34px 34px 30px;
      border: 1px solid rgba(255,255,255,.72);
      border-radius: 24px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 22px 65px rgba(55,70,81,.18);
      backdrop-filter: blur(8px);
    }

    .login-brand {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }

    .login-brand img {
      display: block;
      width: min(230px, 76%);
      height: auto;
    }

    .login-title {
      margin: 0;
      font-size: 1.55rem;
      font-weight: 750;
      text-align: center;
      letter-spacing: -.02em;
    }

    .login-subtitle {
      margin: 8px 0 26px;
      color: var(--login-muted);
      text-align: center;
      font-size: .95rem;
    }

    .form-label {
      margin-bottom: 7px;
      font-size: .9rem;
      font-weight: 650;
      color: #44545e;
    }

    .field-wrap { position: relative; }

    .field-wrap .form-control {
      min-height: 52px;
      padding: 12px 46px 12px 46px;
      border-color: var(--login-border);
      border-radius: 13px;
      background: #fbfcfd;
      box-shadow: none;
    }

    .field-wrap .form-control:focus {
      border-color: #82949f;
      background: #fff;
      box-shadow: 0 0 0 .22rem rgba(55,70,81,.11);
    }

    .field-icon,
    .password-toggle {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: #7d8c95;
    }

    .field-icon {
      left: 17px;
      pointer-events: none;
    }

    .password-toggle {
      right: 10px;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 0;
      border-radius: 9px;
      background: transparent;
    }

    .password-toggle:hover,
    .password-toggle:focus-visible {
      color: var(--login-dark);
      background: #edf1f3;
    }

    .login-button {
      min-height: 51px;
      border: 0;
      border-radius: 13px;
      background: var(--login-dark);
      color: #fff;
      font-weight: 700;
      box-shadow: 0 10px 24px rgba(55,70,81,.22);
    }

    .login-button:hover,
    .login-button:focus-visible {
      background: var(--login-dark-hover);
      color: #fff;
    }

    .login-button:disabled { opacity: .72; }

    .forgot-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--login-accent);
      font-size: .92rem;
      font-weight: 650;
      text-decoration: none;
    }

    .forgot-link:hover { color: #bd242a; text-decoration: underline; }

    .security-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin-top: 22px;
      color: #7b8991;
      font-size: .78rem;
    }

    .login-message .alert {
      border: 0;
      border-radius: 12px;
      font-size: .9rem;
    }

    .login-spinner {
      width: 1rem;
      height: 1rem;
      margin-right: 7px;
      vertical-align: -.15em;
    }

    /* Campo-esca: deve restare nel DOM ma fuori dallo schermo. */
    .anti-spam-field {
      position: absolute !important;
      left: -10000px !important;
      top: auto !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    #pwaInstallBanner.showing {
      animation: pwaSlideDown .35s ease-out forwards;
      opacity: 0;
      transform: translate(-50%, -10px);
    }

    @keyframes pwaSlideDown {
      to { opacity: 1; transform: translate(-50%, 0); }
    }

    @media (max-width: 575.98px) {
      .auth-wrapper { align-items: center; padding: 16px 12px; }
      .login-card { padding: 29px 22px 25px; border-radius: 20px; }
      .login-brand img { width: min(220px, 78%); }
    }
  
  

/* Full-page wrapper with background image */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:url(../images/sfondo-home.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Dark overlay on background */
.auth-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}