/* 
 * Profile Page Styles
 * 
 * Brand-specific styles only. Bootstrap handles most layout and components.
 * Use Bootstrap utilities wherever possible.
 */

/* Page container - Bootstrap handles container, padding via utilities */
.profile-page-container {
  min-height: calc(100vh - 64px);
}

/* Profile content card - Brand-specific backdrop blur */
.profile-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Profile image section - Bootstrap handles flex, text-center via utilities */
.profile-image-section {
  /* Bootstrap handles text-center, margin, padding, border via utilities */
}

/* Profile avatar - Brand-specific styling */
.profile-page-avatar {
  width: 120px;
  height: 120px;
  min-width: 120px;
  min-height: 120px;
  max-width: 120px;
  max-height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1 / 1;
  border: 4px solid rgba(0, 109, 143, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 1rem;
  display: block;
}

.profile-page-avatar-placeholder {
  width: 120px;
  height: 120px;
  min-width: 120px;
  min-height: 120px;
  max-width: 120px;
  max-height: 120px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  background: var(--nitecap-gradient);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: bold;
  margin: 0 auto 1rem;
  border: 4px solid rgba(0, 109, 143, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Profile image wrapper - Bootstrap handles position via utilities */
.profile-image-wrapper {
  /* Bootstrap handles position, display via utilities */
}

/* Profile image loading overlay - Brand-specific styling */
.profile-image-loading {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 1rem 2rem;
  border-radius: 8px;
  text-align: center;
}

.profile-image-loading p {
  font-size: 0.875rem;
}

.loading-spinner {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Profile image error - Bootstrap handles alert styling */
.profile-image-error {
  max-width: 400px;
  margin: 0 auto;
}

/* Profile image actions - Bootstrap handles flex via utilities */
.profile-image-actions {
  /* Bootstrap handles flex, gap, justify-content via utilities */
}

/* Profile section - Bootstrap handles margin, padding, border via utilities */
.profile-section {
  /* Bootstrap handles margin, padding, border via utilities */
}

/* Checkbox group - Bootstrap handles flex via utilities */
.checkbox-group {
  /* Bootstrap handles flex, gap via utilities */
}

/* Responsive Design */
@media (max-width: 768px) {
  .profile-page-container {
    padding: 1rem;
  }
  
  .profile-content {
    padding: 1.5rem !important;
  }
  
  .profile-page-avatar,
  .profile-page-avatar-placeholder {
    width: 100px;
    height: 100px;
    min-width: 100px;
    min-height: 100px;
    max-width: 100px;
    max-height: 100px;
    font-size: 2.5rem;
  }
}