/* ── SprayBoss Mobile Responsive ── */

@media (max-width: 768px) {

  /* Fix viewport height — iOS Safari cuts off content with address bar */
  body {
    height: 100dvh !important;
  }

  /* ── Top bar ── */
  .page-topbar {
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar-left,
  .topbar-right {
    flex-wrap: wrap;
    gap: 6px;
  }
  .property-search,
  .client-search,
  .lead-search {
    width: 150px;
  }

  /* ── Page header (Invoices / Payments style) ── */
  .page-header {
    padding: 8px 12px 4px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .page-header h1 {
    font-size: 18px !important;
  }
  .showing-count {
    font-size: 12.5px;
  }

  /* ── Toolbar ── */
  .toolbar {
    padding: 6px 10px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .toolbar-left {
    flex-wrap: wrap;
  }
  .pagination-area {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }

  /* ── Touch-friendly tap targets ── */
  .btn-green-main,
  .btn-green-caret,
  .btn-orange-filled,
  .btn-orange-outline,
  .tab-btn,
  .btn-filter-action,
  .btn-clear-filters,
  .refresh-btn {
    min-height: 40px;
  }

  /* ── Actions dropdown ── */
  .dropdown-item {
    padding: 13px 16px;
    font-size: 14px;
  }
  .actions-dropdown {
    min-width: 200px;
  }

  /* ── Tables: horizontal scroll instead of squish ── */
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table {
    min-width: 520px;
  }
  thead th,
  tbody td {
    padding: 9px 10px;
    font-size: 12.5px;
    white-space: nowrap;
  }

  /* ── Bigger checkboxes ── */
  input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
  }

  /* ── Tabs ── */
  .tabs-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 8px;
  }
  .tabs-bar::-webkit-scrollbar { display: none; }
  .tab-btn {
    padding: 8px 13px;
    font-size: 12px;
    flex-shrink: 0;
  }

  /* ── Filters ── */
  .filters-bar {
    font-size: 12.5px;
    padding: 8px 12px;
  }
  .filters-row {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
  }
  .results-bar {
    font-size: 12px;
    padding: 5px 12px;
  }

  /* ── Map ── */
  #map-section {
    height: 220px !important;
  }

  /* ── Filter bar (Payments top bar) ── */
  .filter-bar {
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px;
  }
  .filter-link {
    font-size: 12.5px;
    padding: 4px 6px;
  }

  /* ── Confirm/status bars ── */
  #delete-confirm-bar,
  #status-banner {
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    font-size: 12.5px !important;
  }

  /* ── Modals: full screen on mobile ── */
  #prop-modal-overlay > div,
  #lead-modal-overlay > div {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
  .modal-overlay {
    padding: 0 !important;
  }
  .modal-box {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh;
    border-radius: 0 !important;
  }
}

@media (max-width: 480px) {

  .property-search,
  .client-search,
  .lead-search {
    width: 120px;
  }
  .topbar-right .btn-orange-filled,
  .topbar-right .btn-orange-outline {
    font-size: 12px;
    padding: 5px 10px;
  }
  thead th,
  tbody td {
    font-size: 12px;
    padding: 8px 8px;
  }
  .tab-btn {
    padding: 7px 10px;
    font-size: 11.5px;
  }
  .btn-green-main {
    font-size: 12px;
    padding: 5px 10px;
  }
}