/* ==========================================================================
   STALZONE — Mobile Adaptation v2 (≤768px)
   Цель: телефон должен работать идеально, десктоп не ломаем.
   Подключается после style.css + stalker.css, только перекрывает на узких экранах.
   ========================================================================== */

/* ----- Base mobile helpers ----- */
.mobile-auth { display: none; }
.btn-register-mobile { background: var(--accent); color: #fff !important; padding: 0.6rem 1rem !important; border-radius: 8px; text-align: center; }

/* ----- Fix header for mobile ----- */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  /* Top nav: brand left, burger right, hide desktop user */
  .top-nav {
    padding: 0 12px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .nav-brand { font-size: 1.15rem; letter-spacing: 1px; flex-shrink: 0; }
  .nav-user { display: none !important; } /* desktop user hidden, mobile inside drawer */
  .burger {
    display: flex !important;
    flex-shrink: 0;
    margin-left: auto;
    background: transparent !important;
    border: none !important;
    outline: none;
    padding: 6px !important;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
  }
  .burger div { width: 22px !important; height: 2px !important; background: var(--text) !important; }
  .burger.active div { background: var(--accent) !important; }
  #navBackdrop { inset: 56px 0 0 0 !important; }

  /* Drawer */
  .nav-links {
    position: fixed !important;
    top: 56px !important;
    left: -100% !important;
    width: 86% !important;
    max-width: 320px;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
    background: rgba(12,12,14,0.98) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 12px 24px !important;
    gap: 2px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transition: left 0.32s cubic-bezier(0.32,0.72,0,1) !important;
    z-index: 1500 !important;
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 24px rgba(0,0,0,0.6);
    transform: none !important;
    left: -100% !important;
  }
  .nav-links.show { left: 0 !important; }
  .nav-item, .dropdown-toggle {
    display: block !important;
    padding: 13px 12px !important;
    font-size: 15px !important;
    line-height: 1.2;
    border-radius: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    white-space: normal;
  }
  .nav-item:active, .dropdown-toggle:active { background: rgba(233,69,96,0.12) !important; }
  .dropdown { width: 100% !important; }
  .dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: none !important;
    width: 100% !important;
    box-shadow: none !important;
    margin: 6px 0 8px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 8px !important;
    padding: 4px 0 !important;
  }
  .dropdown-menu.show { display: block !important; }
  .dropdown-item { padding: 11px 18px !important; font-size: 14px !important; }
  .mobile-auth {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .mobile-auth .nav-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    text-align: center;
    font-weight: 600;
  }
  .mobile-auth .btn-register-mobile { background: var(--accent) !important; border-color: var(--accent) !important; }

  /* Content — extra bottom padding so fixed switcher doesn't cover buttons */
  .content {
    margin-top: 56px !important;
    padding: 12px 10px 100px !important; /* 100 bottom for stalker switcher */
    min-height: calc(100vh - 56px);
    min-height: calc(100dvh - 56px);
    justify-content: flex-start;
    padding-bottom: 110px !important;
    overflow: visible !important;
  }
  html, body {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: auto !important;
    min-height: 100% !important;
    touch-action: pan-y !important;
  }
  html.menu-open, body.menu-open {
    overflow: hidden !important;
    height: 100% !important;
    overscroll-behavior: none !important;
  }
  .content, .resell-container, .squads-layout, .profile-info, .member-list {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Фикс для страниц с фиксированной высотой 100vh — на телефоне делаем авто-высоту чтобы страница скроллилась, а не только внутренний блок */
  .resell-container[style*="height:calc(100vh"],
  .resell-container[style*="height: calc(100vh"] {
    height: auto !important;
    min-height: calc(100vh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
    max-height: none !important;
  }
  .informer-layout {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    flex: none !important;
  }
  .informer-sidebar {
    max-height: none !important;
    height: auto !important;
    flex: none !important;
  }
  .informer-detail {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: none !important;
  }
  #clanList, #currentMembers, #snapshotMembers {
    max-height: none !important;
    overflow: visible !important;
  }
  body { padding-bottom: 0 !important; }
  .resell-container { padding: 10px 8px !important; max-width: 100% !important; }
  .resell-container h1 { font-size: 1.35rem !important; margin-bottom: 12px !important; line-height: 1.2; }
  h1 { font-size: 1.35rem !important; }
  h2 { font-size: 1.15rem !important; }
  h3 { font-size: 1rem !important; word-break: break-word; }

  /* Prevent iOS zoom: 16px minimum */
  .form-group input, .form-group select, .form-group textarea,
  .table-input, .craft-input, .inline-input {
    font-size: 16px !important;
    min-height: 42px;
  }
  /* Ensure buttons are tap-friendly 44px */
  .btn, .btn-primary, .btn-secondary, .btn-danger {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Tables: make wrappers horizontally scrollable with momentum */
  .table-wrapper, .crate-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: 8px;
    max-width: 100vw;
    margin-left: -2px;
    margin-right: -2px;
  }
  .table-wrapper::-webkit-scrollbar, .crate-table-wrapper::-webkit-scrollbar { height: 6px; }
  .member-list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
  }
  .table-wrapper {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Keep header sticky but ensure it stays visible; allow scroll hint */
  .resell-table, .arsenal-table, .crate-table, .gear-table, .buffs-table, .online-table {
    min-width: 640px;
  }
  .resell-table th, .resell-table td,
  .arsenal-table th, .arsenal-table td,
  .crate-table th, .crate-table td {
    font-size: 13px !important;
    padding: 8px 8px !important;
    white-space: nowrap;
  }
  .table-input { min-width: 72px; font-size: 16px !important; min-height: 36px; }
  /* But allow filtering row to scroll internally: table itself scrolls, not page */

  /* Specific tables adjusted */
  #guide-table { min-width: 760px !important; }
  .gear-table { min-width: 680px !important; }
  .buffs-table { min-width: 860px !important; }
  .online-table { min-width: 0 !important; } /* handled separately via fixed layout, wrapper scrolls */
  .online-table th, .online-table td { font-size: 13px !important; padding: 6px 4px !important; }
  .online-table select { font-size: 16px !important; min-width: 72px !important; min-height: 36px; }

  /* Filters and toolbars stack */
  .resell-filters, .toolbar-kd, .flex-buttons, .modal-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .resell-filters input, .resell-filters select,
  .resell-filters button { width: 100% !important; min-height: 44px; font-size: 16px !important; }
  .toolbar-kd .btn { width: 100% !important; }

  /* Cards grids */
  .stash-grid { gap: 12px !important; margin-top: 12px !important; }
  .stash-card { padding: 12px !important; }
  .stash-card h3 { font-size: 13px !important; }
  .stash-card .price { font-size: 15px !important; }
  .stash-card img { width: 64px !important; height: 64px !important; }

  /* Squads */
  .squads-layout { flex-direction: column !important; gap: 16px !important; margin-top: 12px !important; }
  .squads-right { width: 100% !important; }
  .squad-row { flex-direction: column !important; gap: 10px !important; }
  .squad-column { width: 100% !important; }
  .squad-title { font-size: 14px !important; padding: 6px !important; }
  .squad-cell { min-height: 40px !important; font-size: 13px !important; padding: 8px !important; }
  .member-item { padding: 8px 10px !important; font-size: 13px !important; }
  .add-member-form { flex-direction: column !important; }
  .add-member-form input { min-height: 44px; font-size: 16px !important; }

  /* Craft calculator specific */
  .craft-layout { flex-direction: column !important; gap: 12px !important; }
  .craft-sidebar { flex: 1 1 auto !important; max-width: 100% !important; width: 100% !important; }
  .craft-main { min-width: 100% !important; width: 100% !important; }
  .craft-panel-body .input-group { flex-direction: column !important; }
  .craft-panel-body .input-group .btn { width: 100% !important; }
  #craft-app { padding: 0 4px !important; }

  /* Charts */
  .chart-container canvas { height: 180px !important; max-height: 60vw !important; }
  .profit-calculator .calc-row { flex-direction: column !important; }
  .profit-calculator .calc-field { min-width: 100% !important; width: 100% !important; }
  #addToResellBtn, #stashAddBtn { width: 100% !important; }

  /* Stash search page */
  .resell-container[style*="display:flex"] { flex-direction: column !important; gap: 12px !important; }
  .stash-search-panel { width: 100% !important; flex: none !important; position: relative; }
  .stash-search-panel .stash-item-list { max-height: 46vh !important; }
  .resell-container[style*="display:flex"] > div[style*="flex:1"] { width: 100% !important; min-width: 0 !important; flex: none !important; }
  .stats-grid { flex-direction: column !important; gap: 8px !important; }
  .stat-card { min-width: 100% !important; }
  .chart-container { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .chart-container canvas { width: 100% !important; max-width: 100% !important; height: auto !important; }
  .rarity-quick-filter { justify-content: flex-start !important; gap: 6px !important; }
  .rarity-btn { font-size: 12px !important; padding: 6px 9px !important; min-height: 32px; }

  /* Auth containers */
  .auth-container { width: 100% !important; max-width: 420px; margin: 0 auto; padding: 18px 14px !important; }
  .auth-container h1 { font-size: 1.6rem !important; }

  /* Modals */
  .modal-content, .modal-large {
    width: 94vw !important;
    max-width: 94vw !important;
    padding: 14px !important;
    margin: 6vh auto !important;
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-actions { flex-direction: column !important; }
  .modal-actions button, .modal-actions .btn { width: 100% !important; }

  /* Profile, admin etc */
  .profile-info { padding: 12px !important; }
  .stats-grid, .summary-grid { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Hide elements that clutter mobile */
  .hide-mobile { display: none !important; }

  /* Ensure images never overflow */
  img { max-width: 100%; height: auto; }

  /* Prevent tables from causing page horizontal overflow; hint scroll */
  .table-wrapper::after {
    content: '← скролл →';
    display: block;
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.6;
    padding: 4px 0 0;
    letter-spacing: 1px;
  }
  @media (hover: hover) {
    .table-wrapper::after { display: none; }
  }

  /* Stalker switcher: move up a bit and ensure not covering */
  #stalker-switcher {
    right: 8px !important;
    bottom: 10px !important;
    left: auto !important;
    max-width: calc(100vw - 16px);
    padding: 4px !important;
    gap: 3px !important;
    border-radius: 10px !important;
  }
  #stalker-switcher button { padding: 6px 7px !important; font-size: 10px !important; }

  /* Toast reposition for mobile so it doesn't cover switcher */
  .toast-notification {
    left: 10px !important;
    right: 10px !important;
    bottom: 68px !important;
    width: auto !important;
    text-align: center;
  }

  /* Online sticky columns: reduce sticky width to avoid covering too much */
  .online-table th:nth-child(-n+8), .online-table td:nth-child(-n+8) {
    background: var(--bg-card) !important;
  }

  /* Ensure select dropdowns are touch-friendly */
  select { min-height: 40px; }

  /* Fix profit summary, day-row etc */
  .summary-header { padding: 10px !important; }
  .day-row { flex-direction: row !important; }

  /* Fix loader centering */
  .loader-block { padding: 1.2rem !important; }

  /* Personal prices — на телефоне оставляем таблицу с горизонтальным скроллом, улучшаем подсказку */
  .personal-prices-table { min-width: 640px !important; }
  .personal-prices-table .buy-input, .personal-prices-table .sell-input { width: 72px !important; min-width: 72px !important; font-size: 16px !important; }
  .personal-prices-table img { width: 30px !important; height: 30px !important; }
  .personal-prices-table th, .personal-prices-table td { padding: 4px 4px !important; font-size: 11px !important; white-space: nowrap; }
  #savePricesBtn { width: 100% !important; margin-top: 12px !important; }
  .search-box { max-width: 100% !important; }
  /* Resell page: таблица перекупа — уже горизонтальный скролл, но делаем подсказку видимой только на touch */
  .resell-container .table-wrapper { margin: 0 -6px !important; }
  /* Chart actions buttons full width */
  .chart-actions { flex-direction: column !important; }
  .chart-actions .btn { width: 100% !important; }
}

/* ----- Extra small devices (≤480px) ----- */
@media (max-width: 480px) {
  .top-nav { padding: 0 10px !important; height: 54px !important; }
  .nav-brand { font-size: 1.05rem !important; }
  .content { padding: 10px 8px 90px !important; margin-top: 54px !important; }
  .resell-container h1 { font-size: 1.2rem !important; }
  .auth-container { padding: 14px 12px !important; }
  .stash-grid { grid-template-columns: 1fr !important; }
  .resell-table, .arsenal-table, .crate-table { min-width: 580px !important; }
  .resell-table th, .resell-table td { font-size: 12px !important; padding: 6px 6px !important; }
  .table-input { font-size: 16px !important; }
  #stalker-switcher { bottom: 8px !important; right: 6px !important; left: 6px !important; justify-content: center; }
  #stalker-switcher button { flex: 1; justify-content: center; }
}

/* ----- Very small (≤360px) like Galaxy S8 width 360 ----- */
@media (max-width: 360px) {
  .top-nav { padding: 0 8px !important; }
  .nav-brand { font-size: 0.95rem !important; }
  .content { padding-left: 6px !important; padding-right: 6px !important; }
  .resell-table, .arsenal-table { min-width: 560px !important; }
}

/* ----- Touch optimizations: increase tap targets where needed ----- */
@media (pointer: coarse) {
  .nav-item, .dropdown-item, .squad-cell, .member-item, .stash-item-row, .cat-header {
    min-height: 44px;
  }
  .cat-header { padding: 9px 8px !important; }
  .stash-item-row { padding: 10px 8px !important; }
}

/* ----- Prevent horizontal overflow on any page ----- */
* { -webkit-tap-highlight-color: rgba(233,69,96,0.18); }
html { scrollbar-gutter: stable; }
body { overscroll-behavior-y: auto; }
@media (max-width: 768px) {
  body { overscroll-behavior-y: auto !important; }
  html { overscroll-behavior-y: auto !important; }
  .content, .resell-container, .squads-layout, .profile-info {
    touch-action: pan-y !important;
  }
}

/* ----- Improve search input on mobile: sticky ----- */
@media (max-width: 768px) {
  .stash-search-panel #searchInput {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-secondary) !important;
  }
  /* Make category headers larger touch target */
  .cat-header { font-size: 13px !important; }
  .cat-header .cat-count { font-size: 11px !important; }
  /* Player search row — stack on mobile */
  #playerSearch, #searchBtn { min-height: 44px; }
  /* Ensure profit calculator still visible when keyboard open */
  .profit-calculator { padding-bottom: 10px; }
  /* Squads dropdown: ensure it doesn't get cut */
  .dropdown-list { max-height: 180px !important; font-size: 14px !important; }
  .squad-cell { touch-action: manipulation; }
  /* Resell delete button larger */
  .btn-delete { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* Modal close button larger */
  .close-modal { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* Ensure tables hint visible */
  .table-wrapper { position: relative; }
}

/* ----- Ensure desktop still crisp (no overrides above 769) ----- */
@media (min-width: 769px) {
  .mobile-auth { display: none !important; }
}