/* Hide default navbar and sidebar on small screens and display
   mobile-specific header and bottom navigation. */
@media (max-width: 768px) {
  /* Hide the desktop navigation bar and sidebar */
  .navbar { display: none !important; }
  .sidebar { display: none !important; }

  /* Show mobile header */
  .mobile-header { display: flex; }

  /* Show mobile tab bar */
  .mobile-tabbar { display: flex; }

  /* Apply bottom padding to body equal to the height of the tab bar */
  /* Reserve space for the larger bottom tab bar. Adjust this value if the bar height changes. */
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* Style the mobile tab bar */
  .mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    padding: 10px 8px calc(env(safe-area-inset-bottom) + 10px);
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 1px solid rgba(0,0,0,0.12);
    background-color: var(--navbar-bg, #ffd54f);
    color: var(--navbar-color, #111);
    z-index: 1100;
  }

  .mobile-tabbar .tab {
    flex: 1;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 0;
    color: inherit;
  }

  /* Use mask images for icon glyphs; fallback to current color when available */
  .mobile-tabbar .icon {
    width: 36px;
    height: 36px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .mobile-tabbar .icon-forum {
    -webkit-mask-image: url("/static/forum/icons/ForumIcon.svg");
    mask-image: url("/static/forum/icons/ForumIcon.svg");
  }
  .mobile-tabbar .icon-user {
    -webkit-mask-image: url("/static/forum/icons/DefaultUserIcon.svg");
    mask-image: url("/static/forum/icons/DefaultUserIcon.svg");
  }

  /* Avatar image styling */
  .mobile-tabbar .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
  }

  /* Override avatar size in the wrapper for mobile so that the overlay scales
     correctly. The dimensions here mirror the default mobile avatar size. */
  .avatar-wrapper .avatar {
    width: 36px;
    height: 36px;
  }

  .mobile-tabbar .settings-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
  }

  /* Ensure the admin overlay on mobile does not use its intrinsic SVG dimensions.
     It will inherit the width and height percentages from the parent rule in
     style.css, but object-fit and pointer-events help avoid oversized
     rendering on some mobile browsers. */
  .avatar-wrapper .admin-overlay {
      object-fit: contain;
      pointer-events: none;
  }

  /* Style the mobile header */
  .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: var(--navbar-bg, #ffd54f);
    color: var(--navbar-color, #111);
    z-index: 1100;
  }
  .mobile-logo {
    width: 64px;
    height: 64px;
    background-color: var(--panel-bg, #ffffff);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navbar-bg, #000);
  }
  .mobile-logo img {
    max-width: 90%;
    max-height: 90%;
  }

  /* Ensure main content doesn't get hidden under the fixed header */
  body {
    padding-top: 80px;
  }
}

/* Hide mobile header and tabbar by default on larger screens */
.mobile-header { display: none; }
.mobile-tabbar { display: none; }