/* Login page overrides only (all base/component styles are loaded directly in template with versioning).
   Intentionally left minimal.
   
   NOTE: @import statements removed to avoid double loading.
   All CSS files are loaded directly in templates/login.html with versioning. */

/* Landscape мобильные устройства */
@media (max-width: 768px) and (orientation: landscape) {
  :root {
    /* Еще более компактные отступы для landscape */
    --space-colossal: clamp(20px, 8vh, 40px);
    --space-xxl: clamp(16px, 6vh, 32px);
    --space-xl: clamp(16px, 4vh, 24px);
    --space-lg: clamp(12px, 3vh, 20px);
    --space-md: clamp(8px, 2vh, 16px);
    --space-sm: clamp(8px, 1vh, 12px);
    --space-xs: clamp(4px, 0.5vh, 8px);

    /* Компактная типографика для landscape */
    --font-size-colossal: clamp(28px, 6vw, 48px);
    --font-size-huge: clamp(20px, 4vw, 32px);
    --font-size-xlarge: clamp(16px, 3.5vw, 24px);
    --font-size-large: clamp(14px, 3vw, 20px);
    --font-size-medium: clamp(12px, 2.5vw, 16px);
    --font-size-body: clamp(10px, 2vw, 14px);
    --font-size-small: clamp(9px, 1.5vw, 12px);
    --font-size-micro: clamp(8px, 1vw, 10px);

    /* Компактные элементы для landscape */
    --input-height: clamp(36px, 5vh, 48px);
    --button-height: clamp(40px, 6vh, 56px);
    --button-height-secondary: clamp(36px, 5vh, 48px);
    --icon-size: clamp(16px, 2.5vw, 20px);
    --icon-size-large: clamp(32px, 6vw, 48px);
  }

  .login-container {
    padding: var(--space-sm);
  }

  .login-form, .success-state {
    padding: var(--space-sm);
  }

  .login-header {
    margin-bottom: var(--space-xs);
  }

  .form-group {
    margin-bottom: var(--space-sm);
  }

  /* Compact countdown timer для landscape */
  .countdown-timer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
  }

  .countdown-text {
    order: 1;
  }

  .countdown-section {
    order: 2;
  }

  .countdown-number {
    font-size: var(--font-size-small);
  }

  /* Размеры управляются переменными */
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    /* Note: Core tokens are defined in tokens.css */
    /* High contrast adjustments should be handled by tokens.css dark mode or high-contrast scheme */
    --login-high-contrast-grey: var(--grey-500); /* Use centralized token */
  }

  .form-input {
    border-width: 3px;
  }

  .btn-primary {
    border: 3px solid rgb(var(--color-primary));
  }
}