/**
 * Mobile Responsive Styles
 * Comprehensive mobile fixes for all components
 * Breakpoint: 768px and below
 */

/* ============================================
   Mobile Variables and Reset
   ============================================ */

:root {
  --mobile-header-height: 56px;
  --mobile-padding: 6px;
  --mobile-gap: 12px;
  --touch-target-min: 44px;
}

/* ============================================
   Mobile Main Content - Lower stacking context
   ============================================ */
   
@media (max-width: 768px) {
  main {
    position: relative;
    z-index: 1;
  }
}

/* ============================================
   Mobile Close Button
   ============================================ */

.mobile-dropdown-close {
  display: none; /* Hidden by default */
}

@media (max-width: 768px) {
  .mobile-dropdown-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    background: var(--bg-secondary, #f5f5f7);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s ease;
  }

  .mobile-dropdown-close:hover,
  .mobile-dropdown-close:active {
    background: var(--bg-tertiary, #e5e5e7);
  }

  .mobile-dropdown-close svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-color, #1D2433);
  }

  /* Notifications close button - inline in header */
  .notifications-close {
    position: relative;
    top: auto;
    right: auto;
    margin-right: auto;
  }

  .notifications-header {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .notifications-header h3 {
    flex: 1;
  }
}

/* ============================================
   Mobile Hamburger Menu Button
   ============================================ */

/* Hidden by default (desktop) */
.mobile-menu-btn,
.mobile-search-btn {
  display: none;
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    transition: background-color 0.2s ease;
    position: relative;
    z-index: 100;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .mobile-menu-btn:hover,
  .mobile-menu-btn:active {
    background: var(--bg-secondary, rgba(0, 0, 0, 0.05));
  }

  .mobile-menu-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-text-primary, #333);
  }
}

/* ============================================
   Mobile Header
   ============================================ */

@media (max-width: 768px) {
  /* Header container - boost z-index for mobile dropdowns */
  header {
    height: var(--mobile-header-height);
    z-index: 10000 !important;
  }

  header .container {
    height: var(--mobile-header-height);
    padding: 0 var(--mobile-padding);
    gap: 8px;
  }

  .header-left {
    flex-shrink: 0;
  }

  /* Logo */
  .logo {
    margin-right: 0;
  }

  .logo img,
  .logo svg {
    width: 28px !important;
    height: 28px !important;
  }

  /* Hide page title on mobile */
  .page-title-header {
    display: none;
  }

  /* Search box - expand to fill available space */
  .search-box {
    flex: 1;
    max-width: none;
    margin: 0 8px;
    min-width: 0;
  }

  .search-box input {
    width: 100%;
    min-width: 0;
    padding: 8px 12px 8px 32px;
    font-size: var(--font-size-lg); /* Prevents iOS zoom */
    border-radius: var(--radius-lg);
  }

  /* Dictionary button - hide on mobile */
  .dictionary-button {
    display: none !important;
  }

  /* Nav menu - compact */
  nav ul.nav-menu {
    gap: 2px;
  }

  /* Navigation icons */
  .nav-icon-link {
    padding: 8px;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }

  .nav-icon-link svg {
    width: 20px;
    height: 20px;
  }

  /* Hide icon labels/tooltips on mobile */
  .nav-icon-link::after,
  .nav-icon-link::before {
    display: none !important;
  }

  /* === Mobile Search Button === */
  .mobile-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: var(--color-text-primary, #333);
    min-width: 36px;
    min-height: 36px;
  }

  .mobile-search-btn svg {
    width: 20px;
    height: 20px;
  }

  /* Hide the inline search box on mobile — use the search icon instead */
  .search-box {
    display: none !important;
  }

  /* === Messages icon visible on mobile === */
  .messages-nav-item {
    display: list-item !important;
  }

  .messages-nav-item > a {
    display: flex !important;
  }
}

/* ============================================
   Mobile Dropdown Menus (Logo, Profile, etc.)
   ============================================ */

@media (max-width: 768px) {
  /* Full-screen overlay for dropdowns */
  .nav-dropdown-panel,
  .profile-dropdown-panel,
  .logo-dropdown-panel {
    position: fixed !important;
    top: var(--mobile-header-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100dvh - 56px) !important;
    max-width: none !important;
    min-width: unset !important;
    max-height: none !important;
    border-radius: 0 !important;
    transform: none !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 99999 !important;
    background: var(--bg-color, #fff);
    isolation: isolate;
    pointer-events: none;
  }
  
  /* When panel is moved to body and needs to show */
  .nav-dropdown-panel.mobile-active-panel,
  .profile-dropdown-panel.mobile-active-panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* Ensure dropdown content receives clicks */
  .nav-dropdown-container.mobile-active .nav-dropdown-panel,
  .logo-dropdown.mobile-active .nav-dropdown-panel,
  .profile-dropdown.mobile-active .profile-dropdown-panel {
    pointer-events: auto !important;
  }
  
  .nav-dropdown-panel *,
  .profile-dropdown-panel *,
  .logo-dropdown-panel * {
    pointer-events: auto;
  }
  
  /* Ensure header-left doesn't block dropdown */
  .header-left {
    overflow: visible !important;
  }
  
  /* When dropdown is active, lower main content stacking */
  body:has(.mobile-active) main {
    z-index: 1 !important;
    position: relative;
  }

  /* Disable hover on mobile - use click only */
  .nav-dropdown-container:hover .nav-dropdown-panel,
  .logo-dropdown:hover .nav-dropdown-panel,
  .profile-dropdown:hover .profile-dropdown-panel {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Show when active (via JS click) */
  .nav-dropdown-container.mobile-active .nav-dropdown-panel,
  .logo-dropdown.mobile-active .nav-dropdown-panel,
  .profile-dropdown.mobile-active .profile-dropdown-panel {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Ensure dropdown panel links are visible (override .nav-menu a:not(.button) { display: none }) */
  .nav-dropdown-panel a,
  .profile-dropdown-panel a,
  .notifications-dropdown a {
    display: flex !important;
  }

  /* Dropdown inner layout */
  .nav-dropdown-inner {
    flex-direction: column;
    padding: var(--mobile-padding);
  }

  /* Dropdown main section */
  .nav-dropdown-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* Dropdown items - larger touch targets */
  .nav-dropdown-item {
    padding: 16px;
    min-height: var(--touch-target-min);
    border-radius: var(--radius-xl);
  }

  .nav-dropdown-item-icon {
    width: 40px;
    height: 40px;
  }

  .nav-dropdown-item-icon svg {
    width: 24px;
    height: 24px;
  }

  .nav-dropdown-item-title {
    font-size: var(--font-size-lg);
  }

  .nav-dropdown-item-desc {
    font-size: var(--font-size-md);
  }

  /* Dropdown sidebar - full width on mobile */
  .nav-dropdown-sidebar {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-color, #e5e5e5);
    margin-top: 16px;
    padding-top: 16px;
  }

  .nav-dropdown-sidebar-item {
    padding: 12px 16px;
    min-height: var(--touch-target-min);
    font-size: 15px;
  }
}

/* ============================================
   Mobile Profile Dropdown
   ============================================ */

@media (max-width: 768px) {
  .profile-dropdown-header {
    padding: 20px;
  }

  .profile-dropdown-avatar {
    width: 56px;
    height: 56px;
  }

  .profile-dropdown-name {
    font-size: 18px;
  }

  .profile-dropdown-email {
    font-size: var(--font-size-md);
  }

  .profile-dropdown-menu {
    padding: 8px;
  }

  .profile-dropdown-item {
    padding: 14px 16px;
    min-height: var(--touch-target-min);
    font-size: var(--font-size-lg);
    border-radius: 10px;
  }

  .profile-dropdown-item svg {
    width: 22px;
    height: 22px;
  }
}

/* ============================================
   Mobile Notifications Dropdown
   ============================================ */

@media (max-width: 768px) {
  .notifications-container {
    position: static !important;
  }

  .notifications-button {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: 8px;
  }

  .notifications-dropdown {
    position: fixed !important;
    top: var(--mobile-header-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 9999;
  }

  .notifications-header {
    padding: 16px;
    position: sticky;
    top: 0;
    background: var(--bg-color, #fff);
    z-index: 1;
  }

  .notifications-header h3 {
    font-size: 18px;
  }

  .notifications-list {
    max-height: none;
    padding-bottom: 100px; /* Safe area for bottom */
  }

  .notification-item {
    padding: 16px;
    min-height: 60px;
  }

  .notification-content {
    font-size: 15px;
  }

  .notifications-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: var(--bg-color, #fff);
    border-top: 1px solid var(--border-color, #e5e5e5);
  }

  .view-all-link {
    display: block;
    padding: 12px;
    text-align: center;
    font-size: var(--font-size-lg);
  }
}

/* ============================================
   Mobile Spotlight Search
   ============================================ */

@media (max-width: 768px) {
  .spotlight-overlay {
    padding-top: 0;
    align-items: flex-start;
  }

  .spotlight-container {
    width: 100%;
    max-width: none;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border: none;
  }

  .spotlight-input {
    font-size: var(--font-size-lg); /* Prevents iOS zoom */
    padding: 16px 20px;
  }

  .spotlight-hint {
    padding: 10px 16px;
  }

  .spotlight-results {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .spotlight-result-item {
    padding: 14px 16px;
    min-height: 56px;
  }

  .spotlight-result-icon {
    width: 36px;
    height: 36px;
  }

  .spotlight-result-title {
    font-size: 15px;
  }

  .spotlight-result-snippet {
    font-size: 13px;
  }
}

/* ============================================
   Mobile Auth Modals (Login/Register)
   ============================================ */

@media (max-width: 768px) {
  .auth-modal-content {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .auth-modal-header {
    padding: 24px 20px;
  }

  .auth-modal-body {
    padding: 0 20px 24px;
  }

  .auth-form-group label {
    font-size: var(--font-size-md);
  }

  .auth-form-group input {
    padding: 14px 16px;
    font-size: var(--font-size-lg); /* Prevents iOS zoom */
  }

  .auth-modal-close {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 28px;
  }
}

/* ============================================
   Mobile Main Content
   ============================================ */

@media (max-width: 768px) {
  /* Fix main element - remove flex that causes vertical issues */
  /* Header is hidden on mobile (tab bar replaces it), so no top padding needed */
  main {
    display: block !important;
    padding-top: 0 !important;
    min-height: auto;
  }

  /* Content wrapper - ensure proper display */
  .content-wrapper {
    padding: var(--mobile-padding);
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Wiki container - fix layout */
  .wiki-container {
    display: block !important;
    width: 100%;
  }

  /* Wiki content - remove left margin from sidebar */
  .wiki-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0;
  }

  /* Sidebar TOC overlay handled by style.css @media (max-width: 1000px) */

  /* Ensure proper padding for layout classes */
  .layout-full,
  .layout-wide,
  .layout-medium,
  .layout-narrow {
    padding-left: var(--mobile-padding);
    padding-right: var(--mobile-padding);
  }

  /* Full page containers */
  .full-page {
    width: 100%;
    padding: 0 var(--mobile-padding);
  }

  /* Page headers */
  .page-header {
    padding: 12px 0;
    margin-bottom: 0;
  }

  .page-header .title-section,
  .page-title-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .page-title-section h1 {
    font-size: 1.25rem;
    line-height: 1.3;
  }

  .page-title {
    font-size: 1.25rem;
  }

  /* TOC toggle button on mobile */
  .toc-toggle-btn {
    display: inline-flex;
    margin-right: 8px;
  }

  .create-area-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   Mobile Forms
   ============================================ */

@media (max-width: 768px) {
  /* Search filters */
  .search-filters {
    flex-direction: column;
    gap: 12px;
  }

  .filter-group {
    width: 100%;
  }

  .filter-select {
    width: 100%;
    padding: 12px 16px;
    font-size: var(--font-size-lg); /* Prevents iOS zoom */
  }

  .search-actions {
    width: 100%;
  }

  .search-actions button {
    width: 100%;
    padding: 12px;
  }

  /* Form inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    font-size: var(--font-size-lg); /* Prevents iOS zoom */
  }
}

/* ============================================
   Mobile Tables
   ============================================ */

@media (max-width: 768px) {
  /* Horizontal scroll wrapper for tables */
  .table-wrapper,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--mobile-padding));
    padding: 0 var(--mobile-padding);
  }

  table {
    min-width: 600px;
  }

  th, td {
    padding: 12px 8px;
    font-size: var(--font-size-md);
  }
}

/* ============================================
   Mobile Cards and Lists
   ============================================ */

@media (max-width: 768px) {
  /* Card grids - single column */
  .cards-grid,
  .theorems-grid,
  .pages-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Card styling */
  .card,
  .theorem-card,
  .page-card {
    padding: 16px;
  }

  /* List items */
  .list-item {
    padding: 14px 16px;
  }
}

/* ============================================
   Mobile Tooltips - Hide All
   ============================================ */

@media (max-width: 768px) {
  [title]::after,
  [title]::before,
  .tooltip,
  [data-tooltip]::after,
  [data-tooltip]::before {
    display: none !important;
  }
}

/* ============================================
   Mobile Touch Improvements
   ============================================ */

@media (max-width: 768px) {
  /* Better touch targets - only for nav/icon elements, not styled buttons */
  [role="button"]:not(.btn):not(button) {
    min-height: 44px;
    min-width: 44px;
  }

  /* Disable hover states on touch devices */
  @media (hover: none) {
    a:hover,
    button:hover,
    .btn:hover {
      /* Reset hover styles for touch devices */
    }
  }

  /* Active states for touch feedback */
  a:active,
  button:active,
  .btn:active {
    opacity: 0.7;
    transform: scale(0.98);
  }
}

/* ============================================
   Mobile Safe Areas (Notch support)
   ============================================ */

@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 768px) {
    header {
      padding-top: env(safe-area-inset-top);
      height: calc(var(--mobile-header-height) + env(safe-area-inset-top));
    }

    .notifications-dropdown,
    .nav-dropdown-panel,
    .profile-dropdown-panel {
      padding-bottom: env(safe-area-inset-bottom);
    }

    .spotlight-container {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}

/* ============================================
   Mobile Utility Classes
   ============================================ */

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }

  .show-mobile-flex {
    display: flex !important;
  }

  .show-mobile-inline {
    display: inline !important;
  }

  .mobile-full-width {
    width: 100% !important;
  }

  .mobile-text-center {
    text-align: center !important;
  }

  .mobile-stack {
    flex-direction: column !important;
  }
}

/* ============================================
   Mobile Thread Panel (Chat)
   ============================================ */

@media (max-width: 768px) {
  /* Ensure thread panel is hidden by default on mobile */
  .thread-panel {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
    transform: none !important;
  }

  /* Only show when explicitly opened */
  .thread-panel.open {
    display: flex !important;
  }
}

/* ============================================
   Mobile Chat Navigation (Slack-style)
   ============================================ */

/* Hide back button on desktop */
.mobile-chat-back-btn {
  display: none;
}

@media (max-width: 768px) {
  /* Show mobile back button */
  .mobile-chat-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    padding: 0;
    margin-right: 8px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .mobile-chat-back-btn:hover,
  .mobile-chat-back-btn:active {
    background: rgba(0, 0, 0, 0.05);
  }

  .mobile-chat-back-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-text-primary, #1D2433);
  }

  /* Chat menu container - full screen on mobile */
  .chat-menu-container {
    display: block !important;
  }

  /* Hide collapsed sidebar on mobile */
  .chat-menu-collapsed {
    display: none !important;
  }

  /* Channel list (chat-menu) - full screen, shown by default */
  .chat-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 1000 !important;
    background: #fff !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Chat content - full screen, hidden by default on mobile */
  .chat-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 1001 !important;
    display: none !important;
  }

  /* When conversation is active, show chat content */
  .chat-content.mobile-conversation-view {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Chat content header adjustments */
  .chat-content-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
  }

  .chat-content-header .channel-info {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .chat-content-header .channel-info h3 {
    font-size: var(--font-size-lg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Hide member count on very small screens */
  .chat-content-header .member-count {
    display: none;
  }

  /* Ensure channel items are tappable */
  .channel-item {
    min-height: 44px;
    padding: 12px 16px;
  }

  .dm-item {
    min-height: 44px;
    padding: 12px 16px;
  }

  /* Close button visible on mobile */
  .chat-menu-close {
    display: flex !important;
  }
}

/* Hide on desktop, show on mobile */
@media (min-width: 769px) {
  .show-mobile,
  .show-mobile-flex,
  .show-mobile-inline,
  .mobile-only {
    display: none !important;
  }
}

/* ============================================
   Mobile GitHub Stars (Header)
   ============================================ */

@media (max-width: 768px) {
  .github-stars-container {
    display: none;
  }

  .auth-buttons-container {
    display: flex;
    gap: 8px;
  }

  .nav-auth-btn {
    padding: 8px 12px;
    font-size: var(--font-size-md);
  }
}

/* ============================================
   Dark Mode Mobile Overrides
   ============================================ */

@media (max-width: 768px) {
  :root[data-theme="dark"] .nav-dropdown-panel,
  :root[data-theme="dark"] .profile-dropdown-panel,
  :root[data-theme="dark"] .notifications-dropdown {
    background: var(--color-bg-secondary);
    border-color: var(--color-bg-active);
  }

  :root[data-theme="dark"] .notifications-header,
  :root[data-theme="dark"] .notifications-footer {
    background: var(--color-bg-secondary);
  }
}

/* ============================================
   Fix #6: Mobile Header — hide GitHub Stars on small screens
   to reduce crowding (Sign in wrapping to 2 lines)
   ============================================ */

@media (max-width: 480px) {
  .github-stars-container {
    display: none !important;
  }
}

/* ============================================
   Fix #7: Theorem Detail Tab Bar — horizontal scroll on mobile
   ============================================ */

@media (max-width: 768px) {
  .theorem-tabs,
  .tab-nav,
  .tabs-header,
  .content-section .section-header + .tabs,
  [class*="tab-bar"],
  .theorem-detail-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .theorem-tabs::-webkit-scrollbar,
  .tab-nav::-webkit-scrollbar,
  .tabs-header::-webkit-scrollbar,
  .theorem-detail-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Make tabs row not wrap */
  .theorem-tabs a,
  .theorem-tabs button,
  .tab-nav a,
  .tab-nav button,
  .tabs-header a,
  .tabs-header button {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ============================================
   Fix #8: Collapsible Theorem Search Form on Mobile
   ============================================ */

@media (max-width: 768px) {
  .theorem-search-form,
  .theorems-filter-form {
    position: relative;
  }

  .theorem-search-form .filter-fields,
  .theorems-filter-form .filter-inputs {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .theorem-search-form.expanded .filter-fields,
  .theorems-filter-form.expanded .filter-inputs {
    max-height: 500px;
  }
}

/* ============================================
   Fix #4 + #11: Profile Activity Heatmap
   Mobile: hide month labels that overflow
   Desktop: add spacing between labels
   ============================================ */

/* Desktop — prevent month label overlap */
.heatmap-months,
.activity-heatmap text,
.heatmap-container svg text {
  font-size: 11px;
}

@media (max-width: 768px) {
  /* Make heatmap horizontally scrollable with hidden scrollbar */
  .activity-heatmap,
  .heatmap-container,
  .heatmap-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 100%;
  }

  .activity-heatmap::-webkit-scrollbar,
  .heatmap-container::-webkit-scrollbar,
  .heatmap-wrapper::-webkit-scrollbar {
    display: none;
  }

  /* Scale down the heatmap SVG on mobile */
  .activity-heatmap svg,
  .heatmap-container svg {
    min-width: 650px;
    height: auto;
  }
}

/* ============================================
   Fix #13: Wiki Pages Search Form — compact grid layout
   ============================================ */

@media (max-width: 768px) {
  .pages-filter-form,
  .knowledge-base-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pages-filter-form label,
  .knowledge-base-filters label {
    font-size: 13px;
    margin-bottom: 2px;
  }

  .pages-filter-form select,
  .pages-filter-form input,
  .knowledge-base-filters select,
  .knowledge-base-filters input {
    width: 100%;
    padding: 10px;
    font-size: 16px; /* Prevent iOS zoom */
  }
}