/**
 * SnowBounty Mobile Styles
 * 
 * Shared responsive styles for mobile-first design.
 * Include this file AFTER header.css and page-specific styles.
 * 
 * Breakpoints:
 *   768px  — tablets / small laptops
 *   600px  — large phones landscape
 *   480px  — phones portrait
 *   375px  — small phones (iPhone SE, etc.)
 * 
 * @version 1.0.0
 */

/* ============ BASE MOBILE RESETS ============ */

/* Prevent horizontal scroll everywhere */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Ensure tap targets are minimum 44px */
@media (max-width: 768px) {
  button, a, input, select, textarea, [role="button"] {
    min-height: 44px;
  }

  /* Remove hover effects that cause sticky states on touch */
  * {
    -webkit-tap-highlight-color: rgba(0, 212, 170, 0.15);
  }
}

/* ============ BOTTOM NAVIGATION BAR ============ */
/* Fixed bottom nav for quick access on mobile */
.sb-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  z-index: 999;
  padding: 6px 0;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .sb-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}

.sb-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 12px;
  text-decoration: none;
  color: #6c757d;
  font-size: 10px;
  font-weight: 500;
  transition: color 0.2s;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.sb-bottom-nav-item.active {
  color: #00d4aa;
}

.sb-bottom-nav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.sb-bottom-nav-item .bottom-nav-badge {
  position: absolute;
  top: 0;
  right: 4px;
  min-width: 16px;
  height: 16px;
  background: #ff6b6b;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.sb-bottom-nav-item .bottom-nav-badge.show {
  display: flex;
}

/* ============ TABLET (768px) ============ */
@media (max-width: 768px) {

  /* Body bottom padding for bottom nav */
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---- AGGRESSIVE MOBILE: HIDE DESKTOP-ONLY BARS ---- */
  /* Top nav bar — fully replaced by hamburger menu + bottom nav */
  .sb-top-nav {
    display: none !important;
  }

  /* Info bar — links are in hamburger drawer */
  .sb-info-bar {
    display: none !important;
  }

  /* Sub nav — links are in hamburger drawer */
  .sb-sub-nav {
    display: none !important;
  }

  /* Breadcrumbs — wastes vertical space on small screens */
  .sb-breadcrumbs {
    display: none !important;
  }

  /* Location bar (both header and index.html versions) */
  .sb-location-bar,
  .location-bar {
    display: none !important;
  }

  /* Seasonal snowflakes/leaves — perf drain on mobile */
  .seasonal-effects {
    display: none !important;
  }

  /* Compact main header */
  .sb-main-header {
    padding: 8px 0 !important;
  }

  .sb-main-header .container {
    gap: 8px !important;
  }

  .sb-logo-circle {
    width: 36px !important;
    height: 36px !important;
  }

  .sb-logo-circle .flake {
    font-size: 16px !important;
  }

  /* Search box takes remaining space */
  .sb-search-box {
    flex: 1;
  }

  .sb-search-box input {
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 20px;
  }

  /* Containers full-width */
  .container {
    padding: 0 16px !important;
  }

  /* Stack 2-column grids */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  /* Advanced search modal */
  #advancedSearchModal .modal {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Search filters */
  .search-filters {
    padding: 12px !important;
    position: relative !important;
  }

  .filter-row-1 input {
    width: 100% !important;
    max-width: 100% !important;
  }

  .filter-row-2 {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .filter-row-2 input,
  .filter-input-2,
  .filter-input-3 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .filter-btn {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  .filter-btn:hover {
    transform: none !important;
  }

  /* Bounty items - horizontal layout on mobile */
  .bounty-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
    padding: 16px !important;
    border-radius: 12px !important;
    border: 1px solid #e0e0e0;
  }

  .bounty-meta {
    flex-direction: row !important;
    align-items: center !important;
    width: 100%;
    justify-content: space-between;
  }

  /* Bounty tabs scrollable */
  .bounty-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .bounty-tabs::-webkit-scrollbar {
    display: none;
  }

  .bounty-tab {
    flex: 0 0 auto;
    padding: 10px 16px;
    font-size: 13px;
  }

  /* Accept bounty modal */
  .bounty-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .bounty-modal-content {
    max-width: 100% !important;
    max-height: 95vh !important;
    border-radius: 20px 20px 0 0 !important;
    overflow-y: auto;
  }

  /* Bounty detail grid single column on mobile */
  .bounty-detail-grid {
    grid-template-columns: 1fr !important;
  }

  /* Bounty modal actions */
  .bounty-modal-actions {
    flex-direction: column !important;
  }

  .bounty-modal-actions button {
    width: 100%;
    padding: 14px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }

  /* Bounty external links single column */
  .bounty-external-links {
    grid-template-columns: 1fr !important;
  }

  /* Auth modal slide up */
  .auth-modal .modal-overlay,
  .auth-modal {
    align-items: flex-end !important;
  }

  .auth-modal .modal {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh;
    overflow-y: auto;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  /* Post bounty form */
  .bounty-modal .modal,
  .bounty-form .modal {
    max-width: 100% !important;
  }

  .form-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Category buttons grid */
  .category-btn {
    padding: 12px !important;
    font-size: 13px !important;
  }

  /* Custom modal (alert/confirm) */
  .custom-modal {
    border-radius: 16px !important;
    width: 92% !important;
    max-width: 360px !important;
  }

  .custom-modal-buttons {
    flex-direction: column-reverse !important;
  }

  .custom-modal-btn {
    width: 100% !important;
    text-align: center;
    padding: 14px !important;
    border-radius: 10px !important;
  }

  /* ToS notification full-width — sit above bottom nav */
  .tos-notification {
    padding: 16px !important;
    bottom: 70px !important;
  }

  .tos-notification-content {
    flex-direction: column !important;
    text-align: center;
    gap: 12px !important;
  }

  .tos-notification-buttons {
    flex-direction: column !important;
    width: 100%;
    gap: 8px !important;
  }

  .tos-notification-buttons button {
    width: 100%;
    padding: 14px 24px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
  }

  /* Tables horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Form inputs larger touch targets */
  .form-input,
  .form-select,
  .form-textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  select {
    font-size: 16px !important; /* prevent iOS zoom on focus */
    min-height: 48px;
  }

  /* Image/video full-bleed */
  .video-section {
    margin: 0 -16px;
  }

  .video-wrapper {
    border-radius: 0;
  }

  /* Main content padding */
  main {
    padding: 12px 0;
  }

  /* Location bar, info bar, breadcrumbs — all hidden on mobile (see top of 768px block) */

  /* Page headings */
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
}

/* ============ LARGE PHONES (600px) ============ */
@media (max-width: 600px) {

  /* Advanced search grid to single column */
  #advancedSearchModal [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Category search grid to single column */
  #categorySearchModal [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Modal padding reduction */
  .modal {
    padding: 16px !important;
  }

  .modal-header {
    margin-bottom: 12px;
  }

  /* Bounty map smaller */
  .bounty-map-container {
    height: 300px !important;
  }

  /* Section spacing */
  .bounty-map-section {
    margin: 12px -16px !important;
    padding: 16px !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* Inline fixed-width inputs override (for accept-bounty etc.) */
  input[style*="width: 200px"],
  input[style*="width: 180px"],
  input[style*="width: 150px"],
  input[style*="width: 120px"],
  input[style*="width:200px"],
  input[style*="width:180px"],
  input[style*="width:150px"],
  input[style*="width:120px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Select with inline fixed width */
  select[style*="width: 200px"],
  select[style*="width: 180px"],
  select[style*="width: 150px"],
  select[style*="width:200px"],
  select[style*="width:180px"],
  select[style*="width:150px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============ PHONES PORTRAIT (480px) ============ */
@media (max-width: 480px) {

  .container {
    padding: 0 12px !important;
  }

  /* Problems section smaller circles */
  .problem {
    width: 130px !important;
  }

  .problem-circle {
    width: 110px !important;
    height: 110px !important;
  }

  .problem-label {
    font-size: 11px !important;
    max-width: 110px;
  }

  /* Bounty items compact */
  .bounty-item {
    padding: 12px !important;
  }

  .bounty-type {
    font-size: 14px !important;
  }

  .bounty-address {
    font-size: 12px !important;
  }

  /* Form more compact */
  .form-group {
    gap: 4px !important;
  }

  .form-label {
    font-size: 12px !important;
  }

  /* Bottom nav slightly smaller */
  .sb-bottom-nav-item {
    font-size: 9px;
    padding: 4px 8px;
  }

  .sb-bottom-nav-item svg {
    width: 20px;
    height: 20px;
  }

  /* Modal titles */
  .modal-title {
    font-size: 18px !important;
  }

  /* Even smaller map */
  .bounty-map-container {
    height: 250px !important;
  }

  /* No bounties compact */
  .no-bounties {
    padding: 20px 12px !important;
  }

  .no-bounties-icon svg {
    width: 48px !important;
    height: 48px !important;
  }

  .no-bounties-message {
    font-size: 16px !important;
  }

  /* Seasonal effects already hidden at 768px */

  /* Address wrapper */
  .address-input-wrapper {
    flex-direction: column !important;
  }

  .btn-auto-location {
    justify-content: center;
  }

  /* Location inputs */
  .location-input-group {
    flex-direction: column !important;
  }

  .location-input-group input {
    font-size: 16px !important;
    padding: 14px !important;
    border-radius: 10px !important;
  }

  .btn-detect {
    justify-content: center;
    padding: 14px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
  }
}

/* ============ SMALL PHONES (375px) ============ */
@media (max-width: 375px) {

  .container {
    padding: 0 10px !important;
  }

  .problem {
    width: 110px !important;
  }

  .problem-circle {
    width: 90px !important;
    height: 90px !important;
  }

  /* Tighter spacing */
  .bounty-map-section {
    padding: 12px !important;
  }

  /* Bottom nav even more compact */
  .sb-bottom-nav-item {
    padding: 4px 6px;
    gap: 1px;
  }

  /* Auth modal tabs */
  .auth-tabs {
    gap: 0;
  }

  .auth-tab {
    font-size: 13px !important;
    padding: 10px 8px !important;
  }

  /* Bounty map title */
  .bounty-map-title {
    font-size: 18px !important;
  }
}

/* ============ SUBPAGE SHARED MOBILE STYLES ============ */
/* These fix common patterns across mybounties, accept-bounty, etc. */

@media (max-width: 768px) {

  /* Page containers */
  .page-container,
  .settings-container,
  .profile-container,
  .content-wrapper,
  .main-content {
    padding: 12px 16px !important;
    max-width: 100% !important;
  }

  /* Card / panel layouts */
  .card, .panel, .section-card, .profile-card,
  .settings-section, .notification-card {
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
  }

  /* Stats grids */
  .stats-grid, .profile-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Badges grid */
  .badges-grid, .badge-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Bounty hunters grid */
  .hunters-grid, .hunter-list {
    grid-template-columns: 1fr !important;
  }

  /* Review list */
  .review-item {
    padding: 12px !important;
  }

  /* Action bars */
  .action-bar, .page-actions, .filter-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .action-bar button,
  .page-actions button,
  .filter-bar button {
    width: 100%;
  }

  /* Tables - card-style on mobile */
  .bounty-table {
    display: block;
  }

  .bounty-table thead {
    display: none;
  }

  .bounty-table tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bounty-table tr {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
  }

  .bounty-table td {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border: none !important;
  }

  .bounty-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
  }

  /* FAQ sections */
  .faq-item, .faq-question {
    padding: 16px !important;
  }

  /* Get Started steps */
  .step-card {
    padding: 16px !important;
  }

  /* Notification items */
  .notification-item {
    padding: 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
  }

  .notification-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .notification-actions button,
  .notification-actions a {
    flex: 1;
    text-align: center;
  }

  /* Profile page */
  .profile-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }

  .profile-avatar {
    width: 80px !important;
    height: 80px !important;
  }

  /* Account settings */
  .settings-form .form-row {
    flex-direction: column !important;
  }

  /* Accept bounty filters */
  .accept-filters,
  .search-bar-wrapper {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .accept-filters input,
  .accept-filters select,
  .search-bar-wrapper input,
  .search-bar-wrapper select {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============ TOUCH-FRIENDLY ENHANCEMENTS ============ */
@media (hover: none) and (pointer: coarse) {

  /* Larger touch targets */
  .bounty-item {
    padding: 16px;
  }

  /* Remove hover transforms on touch */
  .btn:hover,
  .btn-primary:hover,
  .problem-circle:hover,
  .bounty-item:hover {
    transform: none !important;
  }

  /* Scroll snap for horizontal lists */
  .problems-grid {
    scroll-behavior: smooth;
    scroll-padding: 16px;
  }

  /* Fat finger friendly checkboxes */
  input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
  }

  /* Tap feedback */
  .bounty-item:active,
  .btn:active,
  .category-btn:active {
    opacity: 0.85;
    transition: opacity 0.1s;
  }
}

/* ============ LANDSCAPE ON PHONE ============ */
@media (max-height: 500px) and (orientation: landscape) {

  /* Modals adjust for short viewport */
  .modal {
    max-height: 95vh !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
  }

  .bounty-modal-content {
    max-height: 95vh !important;
    border-radius: 12px !important;
  }

  /* Bottom nav thinner in landscape */
  .sb-bottom-nav {
    padding: 4px 0;
  }

  .sb-bottom-nav-item {
    font-size: 0; /* hide labels in landscape */
  }

  .sb-bottom-nav-item svg {
    width: 20px;
    height: 20px;
  }

  body {
    padding-bottom: 52px !important;
  }
}

/* ============ PRINT: HIDE MOBILE-ONLY UI ============ */
@media print {
  .sb-bottom-nav,
  .sb-mobile-menu-toggle,
  .sb-mobile-nav,
  .tos-notification {
    display: none !important;
  }

  body {
    padding-bottom: 0 !important;
  }
}