/* Header Component CSS for Secondary Pages */
/* Note: This component uses Tailwind CSS classes, so Tailwind CSS must be loaded */
/* This is a common component used across all secondary pages */

/* Override any conflicting header styles from style.css */
header.secondary-header {
  display: block !important;
  position: relative !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(229, 231, 235, 1) !important;
  align-items: unset !important;
  justify-content: unset !important;
  flex-direction: unset !important;
  width: 100% !important;
}

/* Container div (max-w-7xl) */
header.secondary-header > div.max-w-7xl {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  header.secondary-header > div.max-w-7xl {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  header.secondary-header > div.max-w-7xl {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* Inner flex container - ensure proper spacing */
header.secondary-header .secondary-header-inner,
header.secondary-header > div.max-w-7xl > div.secondary-header-inner,
.secondary-header-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 4rem !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
}

/* Override any Tailwind flex utilities that might conflict */
header.secondary-header .secondary-header-inner.justify-between,
header.secondary-header > div.max-w-7xl > div.justify-between {
  justify-content: space-between !important;
}

/* Ensure the flex container takes full width and distributes space */
header.secondary-header > div.max-w-7xl > div[class*="secondary-header-inner"],
header.secondary-header > div.max-w-7xl > div[class*="flex"] {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
}

/* Logo container - keep on left, don't grow or shrink */
header.secondary-header .secondary-header-logo,
header.secondary-header > div.max-w-7xl > div > div.secondary-header-logo,
header.secondary-header > div.max-w-7xl > div > div:first-child,
.secondary-header-logo {
  display: flex !important;
  flex: none !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: auto !important;
  min-width: 0 !important;
  order: 1 !important;
}

/* Actions container - keep on right, don't grow or shrink */
header.secondary-header .secondary-header-actions,
header.secondary-header > div.max-w-7xl > div > div.secondary-header-actions,
header.secondary-header > div.max-w-7xl > div > div:last-child,
.secondary-header-actions {
  display: flex !important;
  flex: none !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin-left: auto !important;
  order: 2 !important;
}

.logo {
  height: 26px;
  width: auto;
}

/* Responsive header adjustments */
@media (max-width: 768px) {
  .logo {
    height: 19px;
  }
  
  /* Adjust header height on mobile */
  .secondary-header-inner {
    height: 3.5rem !important;
  }
  
  /* Adjust header container padding */
  header.secondary-header > div.max-w-7xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

@media (max-width: 640px) {
  /* Make header actions stack or adjust on very small screens */
  .secondary-header-actions {
    gap: 0.5rem !important;
  }
  
  /* Adjust back button text size */
  header.secondary-header a[class*="bg-primary"] {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
}

@media (max-width: 480px) {
  .logo {
    height: 16px;
  }
  
  /* Further reduce header height on very small screens */
  .secondary-header-inner {
    height: 3rem !important;
  }
  
  /* Hide or shorten text on very small screens */
  header.secondary-header span[class*="text-xl"] {
    font-size: 1rem !important;
  }
  
  /* Make back button more compact */
  header.secondary-header a[class*="bg-primary"] {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.75rem !important;
  }
}