/* Mobile Specific CSS adjustments */
@media (max-width: 1024px) {
  header {
    height: 4.5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    flex-wrap: nowrap !important;
    border-radius: 1.5rem !important;
  }
  
  header > div:first-child {
    width: auto !important;
    margin-bottom: 0 !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
  }
  
  header > div:last-child {
    width: auto !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
  }
  
  /* Hide Admin / Date text on small screens */
  header .text-\[10px\].font-bold.text-zinc-400.uppercase {
    display: none !important;
  }

  /* Profile Menu and Notifications Modal fixed on mobile */
  header .relative > .absolute.w-72, 
  header .relative > .absolute.w-80 {
    position: fixed !important;
    top: 5.5rem !important;
    left: 1rem !important;
    right: 1rem !important;
    width: calc(100vw - 2rem) !important;
    z-index: 100 !important;
    margin-top: 0 !important;
  }
  
  /* Main padding reduce */
  main {
    padding: 1rem !important;
  }
}

@media (max-width: 640px) {
  /* Smaller font for title */
  header h2 {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
  }
  
  /* Shrink profile picture */
  header .w-10.h-10 {
    width: 2rem !important;
    height: 2rem !important;
  }
}