/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Remove all margins from buttons and forms in nav */
nav button,
nav form,
nav ul li button,
nav ul li form {
  margin: 0 !important;
}

/* Remove all margins from buttons in article headers */
article header button,
article header form,
article header div button,
article header div form {
  margin: 0 !important;
}

/* Remove all margins from buttons in page headers (flexbox headers with h1) */
div:has(h1) button,
div:has(h1) form {
  margin: 0 !important;
}

/* Mobile responsive navigation */
@media (max-width: 768px) {
  /* Make nav items fill available space */
  nav ul {
    gap: 0.25rem;
  }

  nav button,
  nav a {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
  }
  nav button {
    padding: 0.25rem 0.365rem !important;
  }
}

/* Mobile responsive tables */
@media (max-width: 768px) {
  table {
    font-size: 0.875rem;
  }

  table th,
  table td {
    padding: 0.5rem 0.25rem;
  }

  /* Make tables scrollable on small screens */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Compact action buttons in tables */
  table a,
  table button {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  /* Responsive page headers */
  div[style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  div[style*="display: flex"][style*="justify-content: space-between"] h1 {
    margin-bottom: 0.5rem !important;
  }

  div[style*="display: flex"][style*="justify-content: space-between"] > div {
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }

  /* Responsive article headers */
  article header[style*="display: flex"] {
    flex-direction: column !important;
  }

  article header[style*="display: flex"] > div {
    flex-wrap: wrap;
    margin-top: 0.5rem;
    gap: 0.25rem !important;
    justify-content: space-between !important;
  }

  /* Make action links and buttons more compact on mobile */
  article header a,
  article header button {
    font-size: 0.875rem !important;
    padding: 0.25rem 0.5rem !important;
  }
}