/*
 * Authentication UI Styles for Paznehty Theme
 * Responsive login/logout UI with desktop (top-right) and mobile (nav) placement
 */

/* =============================================================================
   MOBILE-FIRST: Auth in Nav (Default)
   ============================================================================= */

/* Hide desktop version by default (mobile-first approach) */
.auth-container.auth-desktop {
  display: none;
}

/* Show mobile version by default */
.auth-container.auth-mobile {
  display: block;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* =============================================================================
   LOGGED OUT STATE - Login Button
   ============================================================================= */

.login-button-wrapper {
  display: block;
  margin-left: 20px;
}

.login-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px; /* Slightly adjusted padding */
  background: #168437; /* Logo Green instead of Blue */
  color: #fff !important; /* Force white text */
  border-radius: 4px; /* More square radius to match site style */
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease;
  border: none;
}

.login-button:hover {
  background: #24420e; /* Darker green (Menu color) on hover */
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff !important;
}

.login-button svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.login-button .login-text {
  white-space: nowrap;
}

/* =============================================================================
   LOGGED IN STATE - User Info
   ============================================================================= */

.logged-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
}

.logged-user .user-avatar {
  width: 42px;
  height: 42px;
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  /* User avatar icon SVG - Recolored to Green #168437 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%23168437'/%3E%3Cg transform='translate(0.273 2.341)'%3E%3Ccircle cx='4.641' cy='4.641' r='4.641' transform='translate(8.784 3.961)' fill='%23fff'/%3E%3Cpath d='M22.989,20.121v1.187A1.187,1.187,0,0,1,21.8,22.495H5.187A1.187,1.187,0,0,1,4,21.308V20.121A7.121,7.121,0,0,1,11.121,13h4.747A7.121,7.121,0,0,1,22.989,20.121Z' transform='translate(0 1.673)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
}

.logged-user .user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logged-user .user-name {
  display: block;
  color: #fff; /* White on mobile (dark nav) */
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.logged-user .user-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.3;
}

.logged-user .logout-link {
  color: #addfad; /* Lighter green for readability on dark nav */
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.logged-user .logout-link:hover {
  color: #fff;
  text-decoration: none;
}

.logged-user .separator {
  color: rgba(255, 255, 255, 0.4);
}

.logged-user .app-link {
  color: #addfad;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.logged-user .app-link:hover {
  color: #fff;
  text-decoration: none;
}

/* =============================================================================
   DESKTOP: Auth in Top-Right (851px and above)
   ============================================================================= */

@media (min-width: 851px) {
  /* Hide mobile version */
  .auth-container.auth-mobile {
    display: none;
  }

  /* Show desktop version */
  .auth-container.auth-desktop {
    display: block;
    position: absolute;
    right: 0; /* Aligned to right edge of container */
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
  }

  /* Desktop: Adjust login button */
  .auth-desktop .login-button {
    padding: 8px 20px;
    font-size: 14px;
    background: #168437; /* Logo Green */
  }

  .auth-desktop .login-button:hover {
    background: #24420e; /* Darker Green */
  }

  .auth-desktop .login-button svg {
    width: 18px;
    height: 18px;
  }

  /* Desktop: Adjust logged user display */
  .auth-desktop .logged-user {
    padding: 0;
  }

  .auth-desktop .logged-user .user-avatar {
    width: 38px;
    height: 38px;
  }

  /* CRITICAL FIX: Desktop header is WHITE, so text must be DARK */
  .auth-desktop .logged-user .user-name {
    font-size: 14px;
    color: #24420e; /* Dark Green text (Nav color) */
  }

  .auth-desktop .logged-user .user-actions {
    font-size: 12px;
  }

  .auth-desktop .logged-user .logout-link,
  .auth-desktop .logged-user .app-link {
    color: #999; /* Grey like article info */
  }

  .auth-desktop .logged-user .logout-link:hover,
  .auth-desktop .logged-user .app-link:hover {
    color: #2b8f2b; /* Active green on hover */
  }

  .auth-desktop .logged-user .separator {
    color: #ccc;
  }
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

/* Very small mobile devices */
@media (max-width: 480px) {
  .auth-mobile .login-button {
    width: 100%;
    justify-content: center;
  }

  .auth-mobile .logged-user {
    flex-direction: row;
    align-items: center;
  }

  .login-button-wrapper {
    margin-left: 0;
  }
}