/* Shared Page Header Styles
 * Standardized headers across all pages with consistent mobile responsiveness
 */

/* Common header styles for all page headers */
.admin-header,
.admin-header-modern,
.dashboard2-header,
.analytics-header,
.payment-header,
.detail-header-modern {
  /* Standardize: full-width, no border-radius, consistent padding */
  background: linear-gradient(135deg, var(--primary, #4361ee) 0%, #0056b3 100%);
  color: white !important;
  border-radius: 0 !important;
  margin-left: 0;
  margin-right: 0;
  padding: 3rem 2rem !important;
  margin-bottom: 2rem !important;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* Ensure ALL header text and child elements are white for colored backgrounds */
.admin-header,
.admin-header *,
.admin-header-modern,
.admin-header-modern *,
.dashboard2-header,
.dashboard2-header *,
.analytics-header,
.analytics-header *,
.payment-header,
.payment-header *,
.detail-header-modern,
.detail-header-modern * {
  color: white !important;
}

.admin-header-modern h1 {
  margin-bottom: 0.5rem !important;
}

.admin-header-modern p {
  margin: 0 !important;
}

/* Header content wrapper for centered content in full-width headers */
.admin-header .header-content,
.admin-header-modern .header-content,
.dashboard2-header .header-content,
.analytics-header .header-content,
.payment-header .header-content,
.detail-header-modern .header-content {
  max-width: 1400px;
  margin: 0 auto;
}

/* Mobile responsive adjustments for ALL page headers */
@media (max-width: 900px) {
  .admin-header,
  .admin-header-modern,
  .dashboard2-header,
  .analytics-header,
  .payment-header,
  .detail-header-modern {
    padding: 1.5rem 1rem !important;
    margin-bottom: 1.5rem;
  }

  /* Ensure text is left-aligned on mobile */
  .admin-header .header-content,
  .admin-header-modern .header-content,
  .dashboard2-header .header-content,
  .analytics-header .header-content,
  .payment-header .header-content,
  .detail-header-modern .header-content,
  .header-text {
    text-align: left !important;
  }
}

/* Override center alignment and force vertical layout for all screen sizes */
.admin-header-modern .header-content {
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 0 !important;
}

@media (max-width: 1024px) {
  .header-content {
    text-align: left !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Dashboard2 layout is handled in dashboard2.css */

  /* Ensure title and subtitle are left-aligned */
  .dashboard2-title,
  .dashboard2-subtitle,
  .analytics-title,
  .analytics-subtitle {
    text-align: left !important;
  }

  .admin-header h1,
  .admin-header-modern h1,
  .dashboard2-header h1,
  .analytics-header h1,
  .payment-header h1,
  .detail-header-modern h1,
  .header-text h1,
  .dashboard2-title,
  .analytics-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.25rem;
  }

  .admin-header p,
  .admin-header-modern p,
  .dashboard2-header p,
  .analytics-header p,
  .payment-header p,
  .detail-header-modern p,
  .header-text p,
  .dashboard2-subtitle,
  .analytics-subtitle {
    font-size: 0.875rem !important;
  }
}

@media (max-width: 480px) {
  .admin-header,
  .admin-header-modern,
  .dashboard2-header,
  .analytics-header,
  .payment-header,
  .detail-header-modern {
    padding: 1rem 0.75rem !important;
    margin-bottom: 1rem;
  }

  .admin-header h1,
  .admin-header-modern h1,
  .dashboard2-header h1,
  .analytics-header h1,
  .payment-header h1,
  .detail-header-modern h1,
  .header-text h1,
  .dashboard2-title,
  .analytics-title {
    font-size: 1.25rem !important;
  }
}