// ========================================
// MODERN AI-INSPIRED LOGIN PAGE STYLES
// ========================================

@import '../../../../styles/design-tokens';

// Modern Login Container
.modern-login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, $primary-50 0%, $primary-100 50%, $secondary-50 100%);
}

// Background Elements
.login-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;

  .gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
      rgba($primary-600, 0.1) 0%, 
      rgba($primary-400, 0.05) 50%, 
      rgba($accent-purple, 0.1) 100%);
  }

  .floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .shape {
      position: absolute;
      border-radius: 50%;
      background: linear-gradient(45deg, rgba($primary-400, 0.1), rgba($accent-purple, 0.1));
      animation: float 6s ease-in-out infinite;

      &.shape-1 {
        width: 200px;
        height: 200px;
        top: 10%;
        left: 10%;
        animation-delay: 0s;
      }

      &.shape-2 {
        width: 150px;
        height: 150px;
        top: 60%;
        right: 15%;
        animation-delay: 2s;
      }

      &.shape-3 {
        width: 100px;
        height: 100px;
        bottom: 20%;
        left: 20%;
        animation-delay: 4s;
      }

      &.shape-4 {
        width: 80px;
        height: 80px;
        top: 30%;
        right: 30%;
        animation-delay: 1s;
      }
    }
  }
}

// Main Content
.login-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: $space-8;
  gap: $space-12;
  align-items: center;
}

// Left Side - Branding
.login-branding {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $space-8;

  .brand-content {
    text-align: center;
    max-width: 400px;
  }

  .logo-section {
    margin-bottom: $space-8;

    .logo-container {
      position: relative;
      display: inline-block;
      margin-bottom: $space-6;

      .logo-img {
        width: 80px;
        height: 80px;
        object-fit: contain;
        filter: drop-shadow(0 8px 16px rgba($primary-600, 0.3));
        transition: transform $duration-300 $ease-out;
      }

      .logo-glow {
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        background: linear-gradient(45deg, $primary-400, $accent-purple);
        border-radius: 50%;
        opacity: 0;
        filter: blur(20px);
        transition: opacity $duration-300 $ease-out;
      }

      &:hover {
        .logo-img {
          transform: scale(1.1);
        }

        .logo-glow {
          opacity: 0.3;
        }
      }
    }

    .brand-title {
      font-size: $text-4xl;
      font-weight: $font-bold;
      color: $gray-900;
      margin-bottom: $space-2;
      background: linear-gradient(135deg, $primary-600, $accent-purple);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .brand-subtitle {
      font-size: $text-lg;
      color: $gray-600;
      font-weight: $font-medium;
    }
  }

  .brand-features {
    display: flex;
    flex-direction: column;
    gap: $space-4;

    .feature-item {
      display: flex;
      align-items: center;
      gap: $space-3;
      padding: $space-3;
      background: rgba(255, 255, 255, 0.8);
      border-radius: $radius-lg;
      backdrop-filter: $backdrop-blur-sm;
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all $duration-200 $ease-out;

      &:hover {
        transform: translateX(8px);
        background: rgba(255, 255, 255, 0.9);
        box-shadow: $shadow-md;
      }

      .feature-icon {
        color: $primary-600;
        font-size: $text-lg;
      }

      span {
        font-size: $text-sm;
        font-weight: $font-medium;
        color: $gray-700;
      }
    }
  }
}

// Right Side - Login Form
.login-form-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $space-8;

  .form-container {
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: $backdrop-blur-md;
    border-radius: $radius-2xl;
    padding: $space-8;
    box-shadow: $shadow-xl;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .form-header {
    text-align: center;
    margin-bottom: $space-8;

    .form-title {
      font-size: $text-2xl;
      font-weight: $font-bold;
      color: $gray-900;
      margin-bottom: $space-2;
    }

    .form-subtitle {
      font-size: $text-sm;
      color: $gray-600;
    }
  }

  .modern-login-form {
    .form-group {
      margin-bottom: $space-6;

      .form-label {
        display: block;
        font-size: $text-sm;
        font-weight: $font-semibold;
        color: $gray-700;
        margin-bottom: $space-2;
      }

        .input-container {
          position: relative;
          display: flex;
          align-items: center;

          .input-icon {
            position: absolute;
            left: $space-3;
            color: $gray-400;
            font-size: $text-base;
            z-index: 2;
          }

          .modern-input {
            width: 100%;
            padding: $space-3 $space-3 $space-3 $space-10;
            border: 2px solid $gray-200;
            border-radius: $radius-lg;
            font-size: $text-sm;
            font-weight: $font-medium;
            color: $gray-900;
            background: $white;
            transition: all $duration-200 $ease-out;

            &::placeholder {
              color: $gray-400;
            }

            &:focus {
              outline: none;
              border-color: $primary-500;
              box-shadow: 0 0 0 3px rgba($primary-500, 0.1);
            }

            &:hover {
              border-color: $gray-300;
            }
          }

          // Password field with toggle button
          &:has(.password-toggle) .modern-input {
            padding-right: $space-10;
          }

          .password-toggle {
            position: absolute;
            right: $space-3;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: $gray-400;
            cursor: pointer;
            padding: $space-1;
            border-radius: $radius-sm;
            transition: all $duration-200 $ease-out;
            z-index: 2;

            &:hover {
              color: $gray-600;
              background: rgba($gray-100, 0.5);
            }

            &:focus {
              outline: none;
              color: $primary-600;
              background: rgba($primary-50, 0.5);
            }

            clr-icon {
              font-size: $text-base;
            }

            .toggle-text {
              font-size: $text-xs;
              font-weight: $font-semibold;
              color: inherit;
              text-transform: uppercase;
              letter-spacing: 0.05em;
            }
          }
        }
    }

    .form-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: $space-6;

      .checkbox-container {
        display: flex;
        align-items: center;
        gap: $space-2;
        cursor: pointer;

        .modern-checkbox {
          width: 18px;
          height: 18px;
          accent-color: $primary-600;
        }

        .checkbox-label {
          font-size: $text-sm;
          color: $gray-600;
          font-weight: $font-medium;
        }
      }

      .forgot-link {
        font-size: $text-sm;
        color: $primary-600;
        text-decoration: none;
        font-weight: $font-medium;
        transition: color $duration-200 $ease-out;

        &:hover {
          color: $primary-700;
        }
      }
    }

    .error-message {
      display: flex;
      align-items: center;
      gap: $space-2;
      padding: $space-3;
      background: rgba($accent-red, 0.1);
      border: 1px solid rgba($accent-red, 0.2);
      border-radius: $radius-lg;
      margin-bottom: $space-6;
      color: $accent-red;
      font-size: $text-sm;
      font-weight: $font-medium;

      clr-icon {
        font-size: $text-base;
      }
    }

    .modern-login-btn {
      width: 100%;
      padding: $space-4;
      background: linear-gradient(135deg, $primary-600, $primary-700);
      color: $white;
      border: none;
      border-radius: $radius-lg;
      font-size: $text-base;
      font-weight: $font-semibold;
      cursor: pointer;
      transition: all $duration-200 $ease-out;
      position: relative;
      overflow: hidden;

      &:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: $shadow-lg;
        background: linear-gradient(135deg, $primary-700, $primary-800);
      }

      &:active {
        transform: translateY(0);
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
      }

      &.loading {
        .btn-content {
          opacity: 0;
        }

        .btn-loading {
          opacity: 1;
        }
      }

      .btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: $space-2;
        transition: opacity $duration-200 $ease-out;
      }

      .btn-loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        gap: $space-2;
        opacity: 0;
        transition: opacity $duration-200 $ease-out;

        .spinner {
          width: 16px;
          height: 16px;
          border: 2px solid rgba(255, 255, 255, 0.3);
          border-top: 2px solid $white;
          border-radius: 50%;
          animation: spin 1s linear infinite;
        }
      }
    }

    .signup-section {
      text-align: center;
      margin-top: $space-6;

      .signup-text {
        font-size: $text-sm;
        color: $gray-600;

        .signup-link {
          color: $primary-600;
          text-decoration: none;
          font-weight: $font-semibold;
          transition: color $duration-200 $ease-out;

          &:hover {
            color: $primary-700;
          }
        }
      }
    }
  }

  .social-login {
    margin-top: $space-8;

    .divider {
      position: relative;
      text-align: center;
      margin-bottom: $space-6;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: $gray-200;
      }

      span {
        background: rgba(255, 255, 255, 0.95);
        padding: 0 $space-4;
        font-size: $text-xs;
        color: $gray-500;
        font-weight: $font-medium;
      }
    }

    .social-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: $space-3;

      .social-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: $space-2;
        padding: $space-3;
        border: 2px solid $gray-200;
        border-radius: $radius-lg;
        background: $white;
        color: $gray-700;
        font-size: $text-sm;
        font-weight: $font-medium;
        cursor: pointer;
        transition: all $duration-200 $ease-out;

        &:hover {
          border-color: $gray-300;
          transform: translateY(-1px);
          box-shadow: $shadow-md;
        }

        &.google-btn:hover {
          border-color: #db4437;
          color: #db4437;
        }

        &.microsoft-btn:hover {
          border-color: #0078d4;
          color: #0078d4;
        }

        clr-icon {
          font-size: $text-base;
        }
      }
    }
  }
}

// Animations
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// Responsive Design
@media (max-width: $breakpoint-lg) {
  .login-content {
    grid-template-columns: 1fr;
    gap: $space-8;
    padding: $space-6;
  }

  .login-branding {
    order: 2;
    padding: $space-4;

    .brand-content {
      max-width: 100%;
    }

    .logo-section .brand-title {
      font-size: $text-3xl;
    }

    .brand-features {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  .login-form-section {
    order: 1;
    padding: $space-4;

    .form-container {
      padding: $space-6;
    }
  }
}

@media (max-width: $breakpoint-md) {
  .modern-login-container {
    padding: $space-4;
  }

  .login-content {
    padding: $space-4;
  }

  .login-branding {
    .brand-features {
      flex-direction: column;
    }
  }

  .login-form-section .form-container {
    padding: $space-4;
  }
}

// Legacy styles (preserved for compatibility)
.tamplate1 {
  background-image: url(../../../../assets/images/new.png);
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: right center;
  border: 1px solid #000;
}

.tamplate2 {
  background-image: url(../../../../assets/images/new.png);
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: left center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border: 1px solid #000;
}

.signup {
  cursor: pointer;
}
  
