/**
 * GeenaKB Authentication Theme Extensions
 *
 * Retro CRT-styled authentication components with vintage power indicators
 */

/**
 * ==========================================================================
 * LOGOUT CONTROL (VINTAGE POWER INDICATOR + EXIT BUTTON)
 * ==========================================================================
 */

.logout-control {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #1a1a1a 0%, #252525 50%, #1a1a1a 100%);
  border: 2px solid var(--monitor-bezel);
  border-radius: 4px;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    inset 0 -1px 2px rgba(255, 255, 255, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Power Indicator (LED Style) */
.power-indicator {
  position: relative;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 30% 30%, #2a2a2a, #1a1a1a);
  border: 2px solid #0a0a0a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.8),
    inset 0 -1px 2px rgba(255, 255, 255, 0.1);
}

.power-led {
  width: 8px;
  height: 8px;
  background: #333;
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* Active State (Authenticated) */
.power-indicator.active .power-led {
  background: var(--phosphor-primary);
  box-shadow:
    0 0 8px var(--phosphor-glow),
    0 0 12px var(--phosphor-glow),
    inset 0 0 4px var(--phosphor-bright);
  animation: power-led-pulse 2s ease-in-out infinite;
}

@keyframes power-led-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.9);
  }
}

/* Logout Button */
.logout-button {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--phosphor-dim);
  border: 2px solid var(--phosphor-dark);
  padding: 6px 12px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s ease;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

.logout-button svg {
  width: 14px;
  height: 14px;
  transition: all 0.2s ease;
}

.logout-label {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
}

.logout-button:hover {
  color: var(--phosphor-primary);
  border-color: var(--phosphor-primary);
  text-shadow: 0 0 6px var(--phosphor-glow);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
    0 0 10px var(--phosphor-dark),
    0 0 15px var(--phosphor-dark);
}

.logout-button:hover svg {
  filter: drop-shadow(0 0 4px var(--phosphor-glow));
  transform: translateX(2px);
}

.logout-button:active {
  transform: scale(0.95);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 8px var(--phosphor-dark);
}

/**
 * ==========================================================================
 * FULL-PAGE AUTH LAYOUT
 * ==========================================================================
 */

/* Full-page auth container */
.auth-page {
  position: fixed;
  inset: 0;
  background: var(--screen-background);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: auth-fade-in 0.3s ease-out;
  z-index: 9999;
}

@keyframes auth-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Auth container (replaces modal-content) */
.auth-container {
  background: rgba(0, 0, 0, 0.6);
  border: 4px solid var(--phosphor-primary);
  border-radius: 4px;
  max-width: 550px;
  width: 100%;
  box-shadow:
    0 0 60px var(--phosphor-glow),
    0 0 100px var(--phosphor-dark),
    inset 0 0 40px rgba(0, 0, 0, 0.5);
}

.auth-header {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3),
    transparent
  );
  padding: 20px;
}

.auth-body {
  padding: 30px 40px;
}

/* Login form inputs */
#login-form .phosphor-input,
#signup-form .phosphor-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  color: var(--phosphor-primary);
  font-family: var(--font-primary);
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--phosphor-dark);
  border-radius: 2px;
  transition: all 0.3s ease;
}

#login-form .phosphor-input:focus,
#signup-form .phosphor-input:focus {
  border-color: var(--phosphor-primary);
  background: rgba(0, 0, 0, 0.7);
  box-shadow:
    0 0 20px var(--phosphor-dark),
    inset 0 0 10px var(--phosphor-dark);
  outline: none;
}

/* Error message styling */
#login-error {
  font-family: var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  animation: phosphor-fade-in 0.3s ease-out;
}

/* Submit button in auth modal */
#login-form .oscilloscope-button {
  padding: 14px 24px;
  font-size: 1rem;
  border-width: 3px;
}

#login-form .oscilloscope-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  animation: button-processing 1s ease-in-out infinite;
}

@keyframes button-processing {
  0%, 100% {
    box-shadow:
      0 0 10px var(--phosphor-dark),
      inset 0 0 10px var(--phosphor-dark);
  }
  50% {
    box-shadow:
      0 0 20px var(--phosphor-glow),
      inset 0 0 15px var(--phosphor-dark);
  }
}

/**
 * ==========================================================================
 * TAB SWITCHER (LOGIN/SIGNUP)
 * ==========================================================================
 */

.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--phosphor-dark);
}

.auth-tab {
  flex: 1;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--phosphor-dark);
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.auth-tab:hover {
  background: rgba(0, 0, 0, 0.5);
  color: var(--phosphor-text);
}

.auth-tab.active {
  background: rgba(0, 0, 0, 0.6);
  border-bottom-color: var(--phosphor-primary);
  color: var(--phosphor-primary);
  box-shadow: 0 0 10px var(--phosphor-dark);
}

.auth-tab.active::before {
  content: '▸';
  position: absolute;
  left: 8px;
  animation: tab-indicator-pulse 2s ease-in-out infinite;
}

@keyframes tab-indicator-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Form containers */
.auth-form-container {
  display: none;
}

.auth-form-container.active {
  display: block;
  animation: form-slide-in 0.3s ease-out;
}

@keyframes form-slide-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Signup form specific styles */
#signup-form .oscilloscope-button {
  padding: 14px 24px;
  font-size: 1rem;
  border-width: 3px;
}

#signup-form .oscilloscope-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  animation: button-processing 1s ease-in-out infinite;
}

#signup-error {
  font-family: var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  animation: phosphor-fade-in 0.3s ease-out;
}

/* Password requirements tooltip */
.password-requirements {
  font-size: 0.7rem;
  color: var(--phosphor-dark);
  margin-top: 4px;
  line-height: 1.4;
  font-family: var(--font-primary);
}

.password-requirements.show-requirements {
  color: var(--phosphor-text);
}

/* Verification code input */
.verification-container {
  margin-top: 20px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--phosphor-dark);
  border-radius: 4px;
}

.verification-container h4 {
  font-family: var(--font-primary);
  color: var(--phosphor-primary);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

/**
 * ==========================================================================
 * AUTHENTICATED STATE INDICATORS
 * ==========================================================================
 */

/* Status bar authentication indicator */
.auth-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--phosphor-dark);
  border-radius: 3px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

.auth-status-indicator::before {
  content: '●';
  font-size: 0.6rem;
  color: var(--phosphor-primary);
  animation: power-led-pulse 2s ease-in-out infinite;
}

/**
 * ==========================================================================
 * SCREEN READER ACCESSIBILITY
 * ==========================================================================
 */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/**
 * ==========================================================================
 * RESPONSIVE AUTHENTICATION UI
 * ==========================================================================
 */

/* Tablet */
@media (max-width: 1024px) {
  .logout-control {
    padding: 5px 8px;
  }

  .logout-button {
    padding: 5px 10px;
  }

  .logout-label {
    font-size: 0.6rem;
  }

  #auth-page .auth-body {
    padding: 25px 30px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .logout-control {
    padding: 4px 6px;
    gap: 6px;
  }

  .power-indicator {
    width: 16px;
    height: 16px;
  }

  .power-led {
    width: 6px;
    height: 6px;
  }

  .logout-button {
    padding: 4px 8px;
    gap: 4px;
  }

  .logout-button svg {
    width: 12px;
    height: 12px;
  }

  .logout-label {
    display: none;
  }

  #auth-page .auth-container {
    max-width: 90%;
  }

  #auth-page .auth-body {
    padding: 20px;
  }

  #login-form .phosphor-input {
    padding: 10px 12px;
    font-size: 0.9rem;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .control-strip-visible {
    flex-wrap: wrap;
  }

  .logout-control {
    order: -1;
    width: 100%;
    justify-content: center;
    margin-bottom: 8px;
  }

  .logout-label {
    display: inline;
  }

  #auth-page .auth-header {
    padding: 15px;
  }

  #auth-page .auth-body {
    padding: 15px;
  }
}

/**
 * ==========================================================================
 * DARK MODE & HIGH CONTRAST SUPPORT
 * ==========================================================================
 */

@media (prefers-contrast: high) {
  .logout-button {
    border-width: 3px;
  }

  .power-indicator.active .power-led {
    box-shadow:
      0 0 12px var(--phosphor-glow),
      0 0 20px var(--phosphor-glow);
  }

  #login-form .phosphor-input:focus {
    border-width: 3px;
  }
}

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

@media print {
  .logout-control,
  .modal-overlay,
  .auth-status-indicator {
    display: none !important;
  }
}