/* =====================================================
   MOBILE STYLES — @media (max-width: 430px)
   All overrides for Carrier and Dador de Carga roles.
   DO NOT @import this file inside application.css.
   It must be loaded as a separate stylesheet_link_tag
   in application.html.erb AFTER all other stylesheets.
===================================================== */

/* Hide bottom nav on desktop (outside media query) */
.bottom-nav-mobile { display: none; }

@media (max-width: 430px) {

  /* ── Global content wrappers ──────────────────────── */
  /* Each role's CSS applies margin-top: 69px to push
     content below the fixed header. On mobile the header
     shrinks to 56px so we reduce the offset. */
  .carrier-container      { margin-top: 56px; }
  .dador-container        { margin-top: 56px; }
  .carrier-profile-page .form-container-wrapper { margin-top: 56px; }
  .publish-trip-page .form-container-wrapper    { margin-top: 56px; }
  /* trip_details.css and carrier_profile.css use margin-top: 80px on their containers */
  .trip-show-container        { margin-top: 64px; }
  .carrier-profile-container  { margin-top: 64px; }

  /* Bottom clearance so content isn't hidden behind bottom nav */
  body { padding-bottom: 70px; }

  /* Touch targets — minimum 44px per Apple HIG */
  button, .btn, input, select, textarea { min-height: 44px; }

  /* ── Dashboard header ─────────────────────────────── */
  /* dashboard_header.css selectors */
  .dashboard-nav              { height: 56px; padding: 0 12px; }
  .dashboard-admin-container  { min-height: 56px; }
  .nav-links                  { display: none; }
  .btn-logout-nav             { display: none; }
  /* Hide user name/role/rating text — not enough room at 56px */
  .user-meta                  { display: none; }
  .nav-separator              { display: none; }
  .nav-right                  { gap: 8px; }
  /* Compact WhatsApp verify button to icon-only */
  .btn-verificar              { padding: 6px 8px; font-size: 0; }
  .btn-verificar i            { font-size: 16px; }
  /* Compact credits badge: keep icon + value, drop the + icon */
  .credits-badge              { padding: 6px 8px; }
  .credits-badge .plus-icon   { display: none; }
  .credits-badge .credit-icon { width: 16px; height: 16px; }
  .credit-value               { font-size: 13px; }

  /* ── Carrier dashboard ────────────────────────────── */
  /* carrier_dashboard.css — both grids collapse to 1 col */
  .opportunities-grid   { grid-template-columns: 1fr; }
  .completed-trips-grid { grid-template-columns: 1fr; }

  /* ── Carrier profile ──────────────────────────────── */
  /* carrier_profile.css — vehicles list is already flex column,
     only layout adjustments needed */
  .vehicle-item    { padding: 12px; }
  .vehicle-main    { flex-direction: column; gap: 8px; }
  .vehicle-actions { flex-direction: row; flex-wrap: wrap; }

  /* ── Dador de Carga dashboard ─────────────────────── */
  /* dador_dashboard.css */
  .trips-grid { grid-template-columns: 1fr; }

  /* ── Publish trip form ────────────────────────────── */
  /* publish_trip.css */
  .form-row                  { flex-direction: column; }
  .form-group                { width: 100%; }
  .form-actions .btn         { width: 100%; min-height: 44px; }

  /* ── Trip detail ──────────────────────────────────── */
  /* trip_details.css */
  .trip-show-details   { grid-template-columns: 1fr; }
  .documents-grid      { grid-template-columns: 1fr; }
  /* Sticky CTA sits at bottom: 70px — above bottom nav (z-index: 1000) */
  .trip-status-actions {
    position: sticky;
    bottom: 70px;
    z-index: 900;
    background: white;
    padding: 12px;
  }
  .btn-confirm-load,
  .btn-confirm-unload { width: 100%; min-height: 44px; }

  /* ── Bottom nav bar ───────────────────────────────── */
  .bottom-nav-mobile {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    justify-content: space-around;
    align-items: center;
    /* env() adds extra padding on iPhone X+ for the home indicator */
    padding: 8px 0 env(safe-area-inset-bottom, 12px);
    z-index: 1000;
  }

  .bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #999;
    text-decoration: none;
    font-size: 10px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .bottom-nav__item--active  { color: #e83670; }
  .bottom-nav__item--logout  { background: none; border: none; cursor: pointer; font-family: inherit; }

  .bottom-nav__icon { font-size: 20px; }

  /* ── Carrier dashboard filters ────────────────────────── */
  .filters-toggle-btn {
    display: flex;
    align-items: center;
    width: 100%;
    background: white;
    border: 1px solid #e0e2e7;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
  }
  .filters-panel           { display: none; }
  .filters-panel--open     { display: block; }
  .filters-row             { flex-direction: column; }
  .filter-input,
  .filter-select           { width: 100%; min-width: unset; }
  .filter-price-type       { flex-direction: column; gap: 8px; }

} /* end @media (max-width: 430px) */