body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: #ffffff;
      min-height: 100vh;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .login-wrapper {
      width: 100%;
      max-width: 28rem;
      padding: 1rem;
  }

  .login-container {
      background: white;
      border-radius: 0.75rem;
      border: 1px solid #e5e7eb;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
      padding: 0;
      width: 100%;
      overflow: hidden;
  }

  .login-header {
      text-align: left;
      margin-bottom: 1.5rem;
      padding: 2rem 2rem 0 2rem;
  }

  .login-header h1 {
      color: #111827;
      margin: 0 0 0.5rem 0;
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -0.025em;
  }

  .login-header p {
      color: #6b7280;
      margin: 0;
      font-size: 0.875rem;
      line-height: 1.4;
  }

  .login-form-container {
      background: #ffffff;
      padding: 0 2rem 2.5rem 2rem;
      /* Ensure no extra padding is added */
      box-sizing: border-box;
  }

  /* Message container styling */
  .message-container {
      margin-bottom: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 6px;
      font-size: 0.875rem;
      line-height: 1.4;
      /* display: none; */
  }

  .error-message {
      background-color: #fef2f2;
      color: #b91c1c;
      border: 1px solid #fecaca;
  }

  .success-message {
      background-color: #f0fdf4;
      color: #15803d;
      border: 1px solid #bbf7d0;
  }

  /* Custom form group to match Bootstrap spacing */
  .form-group {
      margin-bottom: 1.25rem;
      /* Ensure no extra padding on form groups */
      padding: 0;
      margin: 0 0 1.25rem 0;
  }

  .form-group:last-of-type {
      margin-bottom: 1.5rem;
  }

  /* Custom label styling to match Bootstrap */
  .form-label {
      display: block;
      font-weight: 500;
      color: #111827;
      margin-bottom: 0.375rem;
      font-size: 0.875rem;
      line-height: 1.25;
      /* Ensure no extra padding on labels */
      padding: 0;
  }

  /* Custom input styling to match Bootstrap exactly */
  .form-control {
      width: 100%;
      padding: 0.625rem 0.875rem;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.4;
      color: #111827;
      background-color: #ffffff;
      transition: all 0.2s ease-in-out;
      box-shadow: none;
      box-sizing: border-box;
      height: auto;
      margin: 0;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      /* Explicitly set padding to ensure consistency */
      padding-right: 0.875rem;
  }

  .form-control::placeholder {
      color: #9ca3af;
      font-weight: 400;
      opacity: 1;
  }

  .form-control:focus {
      border-color: #aec0e8;
      box-shadow: none;
      outline: none;
  }

  .form-control:hover:not(:focus) {
      border-color: #9ca3af;
  }

  /* Override all autofill styling to match Bootstrap version exactly */
  .form-control:-webkit-autofill,
  .form-control:-webkit-autofill:hover,
  .form-control:-webkit-autofill:focus,
  .form-control:-webkit-autofill:active {
      -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
      -webkit-text-fill-color: #111827 !important;
      background-color: #ffffff !important;
      border: 1px solid #d1d5db !important;
  }

  .form-control:-internal-autofill-selected {
      background-color: #ffffff !important;
      background-image: none !important;
      color: #111827 !important;
      border: 1px solid #d1d5db !important;
  }

  /* Reset Materialize CSS defaults for input elements */
  .textbox {
      border-bottom: 1px solid #d1d5db !important;
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      border-radius: 6px;
      padding: 0.625rem 0.875rem;
      height: auto;
      margin: 0;
      padding-right: 0.875rem;
      box-sizing: border-box;
  }

  input[type=email]:not(.browser-default),
  input[type=password]:not(.browser-default) {
      border: 1px solid #d1d5db;
      border-radius: 6px;
      padding: 0.625rem 0.875rem;
      height: auto;
      margin: 0;
      box-shadow: none;
      padding-right: 0.875rem;
      box-sizing: border-box;
  }

  input[type=email]:not(.browser-default):focus,
  input[type=password]:not(.browser-default):focus {
      border: 1px solid #aec0e8;
      box-shadow: none;
  }

  input[type=email]:not(.browser-default):hover:not(:focus),
  input[type=password]:not(.browser-default):hover:not(:focus) {
      border: 1px solid #9ca3af;
  }

  /* Custom checkbox styling to match Bootstrap */
  .form-check {
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      /* Ensure no extra padding */
      padding: 0;
  }

  .form-check-input {
      margin-right: 8px;
      position: relative;
      top: 0;
      width: auto;
      /* Remove any default Materialize padding */
      margin: 0 8px 0 0;
      padding: 0;
  }

  .form-check-label {
      font-weight: 400;
      color: #111827;
      font-size: 0.875rem;
      margin-bottom: 0;
      /* Ensure no extra padding */
      padding: 0;
  }

  /* Form info text styling */
  .form-info {
      margin-bottom: 1rem;
      text-align: center;
  }

  .form-info-text {
      font-size: 0.75rem;
      color: #6b7280;
      margin: 0;
      line-height: 1.4;
  }

  .form-info-link {
      color: rgb(2, 48, 71);
      text-decoration: none;
  }

  .form-info-link:hover {
      text-decoration: underline;
  }

  /* Custom button styling to match Bootstrap */
  .btn-login {
      width: 100%;
      background: rgb(2, 48, 71) !important;
      color: white !important;
      border: 1px solid rgb(2, 48, 71) !important;
      padding: 0.75rem 1.25rem;
      border-radius: 6px;
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-family: inherit;
      margin-top: 0.75rem;
      min-height: 44px;
      box-shadow: none;
      /* Explicitly set padding for consistency */
      padding-right: 1.25rem;
      padding-left: 1.25rem;
  }

  .btn-login:hover:not(:disabled) {
      background: rgb(3, 58, 86) !important;
      border-color: rgb(3, 58, 86) !important;
      color: white !important;
  }

  .btn-login:active:not(:disabled),
  .btn-login:focus {
      background: rgb(1, 38, 56) !important;
      border-color: rgb(1, 38, 56) !important;
      color: white !important;
      box-shadow: none !important;
  }

  .btn-login:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      background: #6b7280 !important;
  }

  .forgot-password {
      text-align: center;
      margin-top: 1rem;
      /* Ensure no extra padding */
      padding: 0;
  }

  .forgot-password a {
      color: rgb(2, 48, 71);
      text-decoration: none;
      font-size: 0.875rem;
      font-weight: 500;
  }

  .forgot-password a:hover {
      color: rgb(3, 58, 86);
      text-decoration: underline;
  }

  /* Mobile responsiveness */
  @media (max-width: 767px) {
      .login-wrapper {
          max-width: none;
          padding: 0.5rem;
      }

      .login-container {
          border-radius: 1rem;
      }

      .login-header {
          padding: 1.5rem 1.5rem 0 1.5rem;
          margin-bottom: 1.25rem;
      }

      .login-header h1 {
          font-size: 1.375rem;
          margin-bottom: 0.375rem;
      }

      .login-form-container {
          padding: 0 1.5rem 2rem 1.5rem;
      }

      /* Ensure form elements have consistent padding on mobile */
      .form-control,
      input[type=email]:not(.browser-default),
      input[type=password]:not(.browser-default) {
          padding: 0.625rem 0.875rem;
          padding-right: 0.875rem;
      }

      .btn-login {
          padding: 0.75rem 1.25rem;
          padding-right: 1.25rem;
          padding-left: 1.25rem;
      }
  }