/* mobile-fixes.css
   Purpose: place mobile-only CSS fixes and overrides here.
   This file is intended to be included with media="(max-width: 767px)"
   so it won't affect desktop layouts. Add additional selectors and
   overrides below as needed.

   Guidelines:
   - Keep rules specific and small to avoid duplication with main styles.
   - Prefer utility-like classes for repeated adjustments.
   - Use rem/em units where appropriate to respect user zoom settings.
*/

/* Example: a global mobile tweak to increase tap targets and spacing */
:root {
  --mobile-gap: 0.75rem;
}

html, body {
  -webkit-text-size-adjust: 100%; /* avoid font resizing issues on iOS */
}

/* Make primary content flow vertically and increase spacing */
.container,
.main,
.content {
  padding-left: 1rem;
  padding-right: 1rem;
  gap: var(--mobile-gap);
}

/* Improve button sizing for mobile */
button,
.btn {
  min-height: 44px; /* recommended minimum for touch targets */
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
}

/* Navigation: collapse horizontal menus into stacked lists */
.nav,
.menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Forms: stretch inputs to full width */
input,
textarea,
select {
  width: 100%;
  box-sizing: border-box;
}

/* Utility: hide elements only on mobile */
.hide-mobile {
  display: none !important;
}

/* Utility: reveal elements only on mobile */
.show-mobile {
  display: block !important;
}

/* Example: override for a specific header that looks cramped on small screens */
.site-header {
  padding: 0.5rem 1rem;
}

/* Example: reduce large hero images/iframes height for mobile */
.hero,
.hero img,
.hero iframe {
  max-height: 50vh;
  object-fit: cover;
}

/* Add more mobile-specific fixes below as you find layout issues. */

/* Responsive tables: convert wide tables into stacked cards on small screens */
@media (max-width: 767px) {
  /* Make table container horizontally scrollable if needed as fallback */
  .overflow-x-auto {
    overflow-x: auto;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  thead {
    display: none; /* hide header row, we'll show labels via data-label */
  }


  tr {
    display: block;
    margin-bottom: 0.75rem;
    background: #fff;
    border-radius: 0.5rem;
    /* stronger shadow for better contrast on mobile */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 0.75rem;
    transition: transform 120ms ease, box-shadow 120ms ease;
  }

  /* subtle lift on touch/hover to enhance affordance */
  tr:hover,
  tr:active {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  }

  /* Each cell becomes a block with the label above the value (modal-like) */
  td {
    display: block;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9; /* tailwind gray-100 */
  }

  td:last-child {
    border-bottom: none;
  }

  /* Label above value (unless table uses inline labels) */
  table:not(.inline-labels) td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: #1f2937; /* tailwind gray-800 for label */
    margin-bottom: 0.25rem;
  }

  /* Value styling (the cell content) */
  td > * {
    display: block;
    color: #374151; /* tailwind gray-700 */
  }

  /* For estoque table keep phase label/value/action on a single line to reduce card height */
  .estoque-table td.estoque-phase-cell {
    padding: 0.25rem 0; /* slightly tighter */
  }

  .estoque-table td.estoque-phase-cell .block {
    display: inline-block; /* label + value + action inline on mobile */
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  .estoque-table td.estoque-phase-cell .inline-block {
    vertical-align: middle;
  }

  /* Optional: small-table helper to target only tables you want responsive */
  .small-table tr {
    padding: 0.5rem;
  }
}