/**
 * account_sessions.css
 * Page-specific styles for account and session management
 * 
 * RULES:
 * - Do NOT add button styling here
 * - Do NOT override layout primitives (.LeftBar, .BodyDiv, etc.)
 * - Only page-specific utilities and components allowed
 * - All button styles MUST come from app_ui.css
 * - All layout primitives MUST come from app_ui.css
 */

/* ========================================
 * CARD PADDING HELPER
 * (app_ui.css .card has no default padding)
 * ======================================== */

.card-padded {
  padding: var(--space-lg);
}

/* ========================================
 * LICENSE WARNING CUSTOMIZATION
 * Using app_ui.css .alert-warning with custom strong color
 * ======================================== */

.alert-warning strong {
  color: var(--color-warning-hover);
}

.alert-warning a {
  color: var(--color-warning-hover);
  text-decoration: underline;
}

.alert-warning a:hover {
  color: var(--color-warning);
}

/* ========================================
 * TERMS OF USE COLLAPSIBLE
 * ======================================== */

.terms-collapsible {
  background: var(--bg-light);
  border: 1px solid var(--border-color-light);
  padding: var(--space-12);
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--space-md);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--fullrmc-accent);
  transition: all var(--transition-fast);
}

.terms-collapsible:hover {
  background: var(--bg-info-light);
}

.terms-content {
  display: none;
  padding: var(--space-md);
  background: var(--bg-light);
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  max-height: 300px;
  overflow-y: auto;
}

.terms-content.active {
  display: block;
}

/* ========================================
 * DEBUG INFO BOX
 * ======================================== */

.debug-info {
  background: var(--bg-info-light);
  border: 1px solid var(--color-info);
  padding: var(--space-12);
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
}

/* ========================================
 * EMAIL VALIDATION ICON
 * ======================================== */

.validation-icon {
  display: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  pointer-events: none;
}

.validation-icon.visible {
  display: inline-block;
}

.validation-icon.valid {
  color: var(--color-success);
}

.validation-icon.invalid {
  color: var(--color-danger);
}

/* ========================================
 * PASSWORD STRENGTH INDICATOR
 * ======================================== */

.password-strength-label {
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
  display: block;
}

.password-strength-label.weak {
  color: var(--color-danger);
}

.password-strength-label.medium {
  color: var(--color-highlight);
}

.password-strength-label.strong {
  color: var(--color-success);
}