/* mobile-styles.css */

/*
 * This stylesheet provides responsive design adjustments for mobile and tablet browsers.
 * It uses media queries to apply styles only on smaller screens.
*/

/* Apply these styles on screens 768px wide or less */
@media (max-width: 768px) {

  /* --- Header Adjustments --- */
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  header h1 {
    font-size: 1.25rem; /* Make title smaller */
  }

  header .flex.items-center.gap-4 {
    flex-wrap: wrap; /* Allow buttons to wrap */
    width: 100%;
  }
  
  /* --- Main Content Padding --- */
  main.p-6 {
    padding: 1rem; /* Reduce padding on mobile */
  }

  /* The rules below override the default table display for a simplified mobile view. */
  /* --- Simplified Mobile Table --- */
  #contractsTable {
    border: none;
    box-shadow: none;
  }

  /* Keep the header, but only show the 'Name' column */
  #contractsTable thead {
    display: table-header-group;
  }
  #contractsTable thead th {
    display: none; /* Hide all headers by default */
  }
  #contractsTable thead th[data-sort="name"] {
    display: table-cell; /* Show only the name header */
  }

  /* Rows should behave like table rows */
  #contractsTable tr {
    display: table-row;
    background: transparent;
    border-bottom: 1px solid #e5e7eb; /* Add a simple separator */
  }
  .dark #contractsTable tr {
    background: transparent;
    border-color: #374151; /* gray-700 */
  }

  /* Hide all cells by default */
  #contractsTable td {
    display: none;
  }

  /* Show only the name cell, which needs a class added from JS */
  #contractsTable td.contract-name-cell {
    display: table-cell;
    padding: 1rem 0.5rem;
  }
  /* --- Modal Adjustments --- */
  #timelineModal .relative.w-11\/12,
  #addContractModal .bg-white.w-full {
    width: 95%;
    max-width: 95%;
  }

  #timelineModal .modal-nav-arrow {
    /* Reposition nav arrows to be on the modal itself */
    top: 1.5rem;
    transform: none;
    background-color: rgba(0,0,0,0.1);
  }
  #timelineModal .modal-nav-arrow.left-0 { left: 1rem; }
  #timelineModal .modal-nav-arrow.right-0 { right: 3rem; } /* Avoid close button */

  /* --- Filter and Tab Adjustments --- */
  .flex-wrap.items-center.gap-4 {
    flex-direction: column;
    align-items: stretch;
  }
  #stageFilters {
    flex-direction: column;
    align-items: flex-start;
  }
}