/**
 * Radar Popytu Zakupowego — Mobile Responsive Overrides
 * Loaded via <link rel="stylesheet" href="mobile.css"> in all pages.
 * Targets: ≤768px (mobile/tablet) and ≤480px (small phones)
 */

.mob-nav-menu {
  display: none;
}

/* ═══════════════════════════════════════════════
   APP PAGES — sidebar + topbar layout
   (dashboard, niche, watchlist, profile, search,
    alerts, reports, settings, billing, compare, etc.)
═══════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Hide sidebar by default — toggle with .sb-open on body */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 300;
  }
  body.sb-open .sidebar {
    transform: translateX(0);
  }

  /* Sidebar overlay when open */
  body.sb-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 299;
  }

  /* Main area takes full width */
  .main {
    margin-left: 0 !important;
    width: 100%;
  }

  /* Topbar: add hamburger menu button */
  .topbar {
    padding: 0 14px;
    gap: 8px;
  }
  .topbar-title {
    font-size: 0.85rem;
  }

  /* Show hamburger button (injected by mobile.js) */
  .mob-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 7px;
    cursor: pointer;
    flex-shrink: 0;
    color: rgba(255,255,255,0.7);
    font-size: 16px;
    margin-right: 6px;
  }

  /* Hide search box from topbar on mobile — it's in the page content */
  .topbar .search-box { display: none; }
  .topbar .topbar-select { display: none; }

  /* Content padding */
  .content {
    padding: 14px !important;
  }

  /* Stats / KPI grids: 2 columns on mobile */
  .stats-row,
  .kpi-row,
  .metrics-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Cards / feature grids: single column */
  .grid-2, .grid-3, .grid-4,
  .cards-grid, .results-grid,
  .two-col, .split-layout {
    grid-template-columns: 1fr !important;
  }

  /* Tables: horizontal scroll */
  .table-wrap, .data-table-wrap,
  table { overflow-x: auto; display: block; }
  table thead, table tbody, table tr { display: table; width: 100%; table-layout: fixed; }

  /* Cards: full width */
  .card { width: 100% !important; }

  /* Sidebar search / filter panels: hide on mobile */
  .results-sidebar,
  .filter-sidebar,
  aside.sidebar-panel {
    display: none !important;
  }

  /* Results area takes full width when sidebar hidden */
  .results-area,
  .main-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Filter bars: wrap and scroll */
  .filters-bar,
  .tab-row,
  .chip-row {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .filters-bar::-webkit-scrollbar { display: none; }

  /* Niche detail page: score + meta stacks vertically */
  .niche-header-grid,
  .niche-meta-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Hero sections: smaller padding */
  .hero, .page-hero, .section-hero {
    padding: 24px 16px !important;
  }
  .hero h1, .page-hero h1 {
    font-size: 1.4rem !important;
  }

  /* Buttons: full width in forms */
  .form-actions .btn,
  .btn-primary, .btn-block {
    width: 100%;
    justify-content: center;
  }

  /* Modal: full screen on mobile */
  .modal-box, .modal-inner {
    width: 95vw !important;
    max-height: 90vh;
    overflow-y: auto;
    margin: 5vh auto !important;
  }

  /* Auth / onboarding pages: narrower */
  .auth-card, .onboarding-card,
  .login-box, .register-box {
    width: 95vw !important;
    padding: 24px 18px !important;
  }

  /* Demo bar: narrower panel */
  #demo-bar-panel {
    width: 95vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Invoice: hide info sidebar */
  .info-panel { display: none !important; }
  .invoice-doc { margin: 0 !important; width: 100% !important; }

  /* Auth notice (demo guard): adjust for no sidebar */
  #auth-notice {
    left: 0 !important;
  }
}

/* ═══════════════════════════════════════════════
   SMALL PHONES ≤480px
═══════════════════════════════════════════════ */

@media (max-width: 480px) {

  /* Stats: single column */
  .stats-row,
  .kpi-row,
  .metrics-row {
    grid-template-columns: 1fr !important;
  }

  /* Topbar title: shorter */
  .topbar-title span { display: none; }

  /* Tabs: smaller font */
  .tab-btn, .tab-item {
    font-size: 0.72rem !important;
    padding: 6px 10px !important;
  }

  /* Score ring: scale down in list views */
  .score-ring {
    width: 40px !important;
    height: 40px !important;
  }

  /* Niche cards: compact */
  .result-card,
  .wl-card,
  .niche-card {
    padding: 12px !important;
  }

  /* Page hero: minimal */
  .hero h1, .page-hero h1 {
    font-size: 1.2rem !important;
  }
  .hero .subtitle,
  .hero .hero-sub {
    font-size: 0.8rem !important;
  }
}

/* ═══════════════════════════════════════════════
   PUBLIC PAGES — sticky nav
═══════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Nav: hide desktop links, show mobile hamburger */
  .nav-links,
  .nl-links,
  .nav-mid {
    display: none !important;
  }

  /* Actions are cloned into the mobile dropdown by mobile.js. Keeping the
     desktop action row here pushes the hamburger outside narrow viewports. */
  .nav-actions {
    display: none !important;
  }

  /* Show mobile nav toggle (injected by mobile.js) */
  .mob-nav-btn {
    display: flex !important;
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* Mobile nav dropdown */
  .mob-nav-menu {
    position: fixed;
    top: 60px;
    left: 0; right: 0;
    background: rgba(7,14,27,0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 500;
    transform: translateY(-120%);
    transition: transform 0.2s ease;
  }
  .mob-nav-menu.open {
    transform: translateY(0);
  }
  .mob-nav-menu a {
    display: block;
    padding: 10px 14px;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s;
  }
  .mob-nav-menu a:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
  }

  /* Public page content: full width */
  .public-content,
  .page-content,
  .container {
    padding: 0 16px !important;
    max-width: 100% !important;
  }

  /* Pricing cards: stack */
  .pricing-grid,
  .plans-grid {
    grid-template-columns: 1fr !important;
  }

  /* Blog grid: single col */
  .blog-grid,
  .articles-grid,
  .posts-grid {
    grid-template-columns: 1fr !important;
  }

  /* Team / about grid */
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Footer: stack columns */
  .footer-grid,
  .footer-cols {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}