/**
 * Main CSS - Air Tasman Login Page
 * Layout, components, and responsive design implementation
 * Author: Air Tasman Development Team
 */

/* =====================
   BASE STYLES
   ===================== */

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-system);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-gray-800);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =====================
   LAYOUT CONTAINER
   ===================== */

.app-container {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* =====================
   HERO SECTION
   ===================== */

.hero {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-hero);
  overflow: hidden;
  padding: var(--space-lg);
}

.hero__content {
  text-align: center;
  z-index: 2;
  position: relative;
  max-width: 500px;
  animation: slideUp var(--transition-medium) var(--ease-out);
}

.hero__logo {
  width: 180px;
  height: 60px;
  margin: 0 auto var(--space-lg);
  opacity: 0;
  animation: fadeIn var(--transition-medium) var(--ease-out) 0.2s forwards;
}

.hero__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-sm);
  line-height: var(--line-height-tight);
  opacity: 0;
  animation: fadeIn var(--transition-medium) var(--ease-out) 0.4s forwards;
}

.hero__tagline {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--font-weight-normal);
  opacity: 0;
  animation: fadeIn var(--transition-medium) var(--ease-out) 0.6s forwards;
}

.hero__background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/images/hero-bg.png');
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  z-index: 1;
}
/*
.hero__background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('../images/subtle_cloud_pattern.svg');
  opacity: 0.1;
  z-index: 1;
}
*/
/* =====================
   FORM SECTION
   ===================== */

.form-section {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  background-color: var(--color-bg-primary);
  position: relative;
}

.form-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--color-border) 20%,
    var(--color-border) 80%,
    transparent 100%
  );
}

/* =====================
   LOGIN CONTAINER
   ===================== */

.login-container {
  width: 100%;
  max-width: var(--form-max-width);
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-xl);
  position: relative;
  overflow: hidden;
  animation: slideUp var(--transition-medium) var(--ease-out) 0.3s both;
}

.login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-bg-hero);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.login-container__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.login-container__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-xs);
  line-height: var(--line-height-tight);
}

.login-container__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  font-weight: var(--font-weight-normal);
}

/* =====================
   RESPONSIVE DESIGN
   ===================== */

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
  .hero {
    flex: 0 0 60%;
  }
  
  .form-section {
    flex: 0 0 40%;
    padding: var(--space-2xl);
  }
  
  .login-container {
    padding: var(--space-2xl);
  }
  
  .hero__title {
    font-size: 48px;
  }
  
  .hero__tagline {
    font-size: var(--font-size-xl);
  }
}

/* Desktop (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .form-section {
    padding: var(--space-xl);
  }
  
  .login-container {
    padding: var(--space-xl);
  }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .app-container {
    flex-direction: column;
  }
  
  .hero {
    flex: 0 0 40vh;
    min-height: 300px;
    padding: var(--space-lg);
  }
  
  .hero__title {
    font-size: var(--font-size-xl);
  }
  
  .hero__tagline {
    font-size: var(--font-size-base);
  }
  
  .form-section {
    flex: 1;
    padding: var(--space-lg);
  }
  
  .form-section::before {
    display: none;
  }
  
  .login-container {
    padding: var(--space-lg);
    border-radius: var(--border-radius-md);
  }
  
  .login-container::before {
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
  }
}

/* Mobile (320px - 767px) */
@media (max-width: 767px) {
  .app-container {
    flex-direction: column;
  }
  
  .hero {
    flex: 0 0 30vh;
    min-height: 200px;
    padding: var(--space-md);
  }
  
  .hero__logo {
    width: 120px;
    height: 40px;
    margin-bottom: var(--space-md);
  }
  
  .hero__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-xs);
  }
  
  .hero__tagline {
    font-size: var(--font-size-sm);
  }
  
  .form-section {
    flex: 1;
    padding: var(--space-md);
    align-items: flex-start;
    padding-top: var(--space-lg);
  }
  
  .form-section::before {
    display: none;
  }
  
  .login-container {
    padding: var(--space-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    margin-top: calc(var(--space-lg) * -1);
  }
  
  .login-container__header {
    margin-bottom: var(--space-lg);
  }
  
  .login-container__title {
    font-size: var(--font-size-xl);
  }
  
  .login-container__subtitle {
    font-size: var(--font-size-sm);
  }
}

/* Small Mobile (320px - 479px) */
@media (max-width: 479px) {
  .hero {
    flex: 0 0 25vh;
    min-height: 160px;
    padding: var(--space-sm);
  }
  
  .hero__logo {
    width: 100px;
    height: 33px;
  }
  
  .hero__title {
    font-size: var(--font-size-lg);
  }
  
  .hero__tagline {
    font-size: var(--font-size-xs);
  }
  
  .form-section {
    padding: var(--space-sm);
    padding-top: var(--space-md);
  }
  
  .login-container {
    padding: var(--space-sm);
  }
}

/* =====================
   ACCESSIBILITY ENHANCEMENTS
   ===================== */

/* Focus management */
*:focus {
  scroll-margin: var(--space-lg);
}

/* Skip link styles */
.sr-only-focusable:focus {
  position: fixed !important;
  top: var(--space-sm) !important;
  left: var(--space-sm) !important;
  z-index: var(--z-skip-link) !important;
  padding: var(--space-sm) var(--space-md) !important;
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-radius: var(--border-radius-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-lg) !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .login-container {
    border: 2px solid var(--color-gray-400);
  }
  
  .hero__title,
  .hero__tagline {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero__content,
  .login-container,
  .hero__logo,
  .hero__title,
  .hero__tagline {
    animation: none !important;
  }
  
  .hero__content,
  .login-container,
  .hero__logo,
  .hero__title,
  .hero__tagline {
    opacity: 1 !important;
  }
}

/* =====================
   DARK MODE SUPPORT
   ===================== */

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--color-gray-900);
    color: var(--color-gray-100);
  }
  
  .form-section {
    background-color: var(--color-gray-900);
  }
  
  .login-container {
    background-color: var(--color-gray-800);
    border: 1px solid var(--color-gray-700);
  }
  
  .login-container__title {
    color: var(--color-white);
  }
  
  .login-container__subtitle {
    color: var(--color-gray-300);
  }
  
  .form-section::before {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      var(--color-gray-700) 20%,
      var(--color-gray-700) 80%,
      transparent 100%
    );
  }
}

/* =====================
   PRINT STYLES
   ===================== */

@media print {
  .hero {
    display: none;
  }
  
  .app-container {
    display: block;
  }
  
  .form-section {
    padding: 0;
  }
  
  .login-container {
    box-shadow: none;
    border: 1px solid var(--color-gray-300);
  }
  
  .login-container::before {
    display: none;
  }
}

/* =====================
   LOADING STATES
   ===================== */

.app-loading {
  overflow: hidden;
}

.app-loading .hero__content,
.app-loading .login-container {
  pointer-events: none;
}

/* =====================
   ERROR STATES
   ===================== */

.app-error .login-container {
  border-color: var(--color-error);
  animation: shake 0.5s var(--ease-out);
}

.app-error .login-container::before {
  background-color: var(--color-error);
}

/* =====================
   SUCCESS STATES
   ===================== */

.app-success .login-container {
  border-color: var(--color-success);
}

.app-success .login-container::before {
  background-color: var(--color-success);
}

/* =====================
   LANDSCAPE ORIENTATION (MOBILE)
   ===================== */

@media (max-width: 767px) and (orientation: landscape) {
  .app-container {
    flex-direction: row;
  }
  
  .hero {
    flex: 0 0 40%;
    min-height: 100vh;
  }
  
  .form-section {
    flex: 1;
    padding: var(--space-sm);
  }
  
  .login-container {
    margin-top: 0;
  }
}

/* =====================
   PERFORMANCE OPTIMIZATIONS
   ===================== */

/* GPU acceleration for smooth animations */
.hero__content,
.login-container {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Optimize hero background */
.hero__background {
  will-change: transform;
  transform: translateZ(0);
}