/* ============================================================
   RJSOL PRO — MOBILE GLOBAL STYLESHEET v3
   Layout only (no theme colors — dark theme preserved).
   Applies at ≤768px. Desktop layout unaffected.
   Updated 2026-05-17: removed light-theme overrides (bug fix).
   ============================================================ */

@media (max-width: 768px) {

  /* ── Reset body — stop horizontal scroll, allow vertical ── */
  html {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  /* ── Solar Design Tool: preserve full-height flex layout ── */
  body.solar-design-page {
    height: 100% !important;
    overflow: hidden !important;
  }
  body.solar-design-page #map {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* ── JJ Chat: preserve full-height flex layout for chat interface ── */
  body.jj-chat-page {
    height: 100% !important;
    overflow: hidden !important;
  }

  /* ── App Layout: stack sidebar above main content ── */
  .app-layout {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
  }

  /* ── Hide sidebar completely on mobile ── */
  .sidebar,
  #sidebar,
  .sidebar.collapsed {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }

  /* ── Main content: full width ── */
  .main-content {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: calc(100vh - 56px) !important;
    margin: 0 !important;
    padding: 14px !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
  }

  /* ── Topbar: proper height, no background override ── */
  .topbar {
    height: auto !important;
    min-height: 56px !important;
    padding: 8px 14px !important;
    flex-wrap: nowrap !important;
  }

  /* ── Sidebar toggle (hamburger): show on mobile ── */
  #sidebarToggle,
  .sidebar-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  /* ── Sidebar sections as tile grid layout ── */
  .sidebar-section {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    padding: 6px 0 !important;
  }

  /* Sidebar logo header */
  .sidebar-logo-header {
    display: none !important;
  }

  /* Sidebar divider */
  .sidebar-divider {
    display: none !important;
  }

  /* Sidebar footer */
  .sidebar-footer {
    display: none !important;
  }

  /* Sidebar visible in mobile (overrides base hidden for hamburger content) */
  .sidebar {
    width: 100% !important;
    max-width: 100vw !important;
    border-right: none !important;
    display: block !important;
    padding: 8px !important;
    overflow-y: visible !important;
  }

  /* ── Sidebar items: tile grid styling (layout only) ── */
  .sidebar-item {
    border-radius: 12px !important;
    padding: 16px 10px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin: 2px 4px !important;
  }

  .sidebar-icon {
    margin-bottom: 6px !important;
  }
  .sidebar-icon svg {
    stroke: currentColor !important;
    fill: none !important;
    width: 22px !important;
    height: 22px !important;
  }

  .sidebar-label {
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  /* Badges inside tiles */
  .active-badge {
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    margin-top: 4px !important;
    font-weight: 700 !important;
  }

  /* ── Main content panels (tool-panel, etc.) ── */
  .tool-panel {
    width: 100% !important;
    padding: 14px !important;
    min-height: auto !important;
  }

  /* ── Forms and inputs ── */
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100% !important;
    border-radius: 8px !important;
    padding: 12px !important;
  }
  input[type="range"] { width: 100% !important; }

  /* ── Buttons ── */
  button, .btn, a.button, .ss-btn {
    min-height: 44px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  /* ── Modals: full width slide-up ── */
  .modal, .dialog, [class*="modal-"],
  .modal-overlay, .modal-box {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* ── Maps (exclude solar-design-page which needs full-height flex) ── */
  body:not(.solar-design-page) #map,
  body:not(.solar-design-page) .map,
  .map-container, .leaflet-container,
  [class*="map-"], .dt-map, .dt2-map {
    height: 45vh !important;
    min-height: 250px !important;
    width: 100% !important;
  }

  /* ── Tables ── */
  table { width: 100% !important; font-size: 12px !important; overflow-x: auto !important; display: block !important; }
  .table-wrap, [class*="table-"] { overflow-x: auto !important; display: block !important; }

  /* ── Stats / KPI grid: 2 columns ── */
  .stats, .stats-row, .stat-grid, .kpi-row,
  .dashboard-cards, [class*="stat-grid"], [class*="kpi-"],
  .ss-metrics {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .stat-box, .stat-card, .kpi-box,
  [class*="stat-card"], .ss-metric {
    padding: 14px 10px !important;
    min-height: 90px !important;
  }

  /* ── Welcome modal ── */
  .welcome-modal {
    width: calc(100vw - 32px) !important;
    max-width: 420px !important;
    padding: 24px !important;
    border-radius: 16px !important;
  }

  /* ── Notification badge ── */
  #notifBadge, #sidebarNotifBadge {
    display: inline-block !important;
  }

  /* ── Leave room at bottom for any overlay nav ── */
  body { padding-bottom: 20px !important; }
}

/* Very narrow phones — drop to 2 columns */
@media (max-width: 380px) {
  .sidebar-section {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  h1, .page-title { font-size: 20px !important; }
}

/* ============================================================
   END OF MOBILE GLOBAL STYLESHEET v3
   ============================================================ */