/*
 * Mobile web ⇄ app parity.
 * These are the SAME rules the Flutter app injects into its WebView
 * (socialdiverse_app/lib/web_shell.dart `_appOverridesCss`), applied here as real
 * responsive CSS so the browser's mobile view matches the native app exactly.
 * Scoped to mobile + tablet widths (<992px, where the mobile bottom-nav layout is
 * active) so mobile and tablet stay in sync; the desktop web layout is untouched.
 *
 * KEEP IN SYNC with web_shell.dart when editing mobile-app styles.
 */

@media (max-width: 991.98px) {
  /* Header: keep the thin bar pinned, proper height, contents centered */
  header.navbar { position: sticky !important; top: 0 !important; z-index: 1000 !important; min-height: 58px !important; padding: 6px 0 !important; }
  header.navbar .container-fluid { align-items: center !important; }

  /* Menu toggle moved into the header (top-left), vertically centered —
     home/feed screen only. Every other screen: hide it entirely (don't fall
     back to its original floating bottom-left button either). */
  body.page-feed .toggle-drawer { position: fixed !important; top: 0 !important; left: 16px !important; right: auto !important; bottom: auto !important; height: 58px !important; width: 30px !important; background: transparent !important; border: none !important; box-shadow: none !important; z-index: 1001 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  body.page-feed .toggle-drawer i, body.page-feed .toggle-drawer span, body.page-feed .toggle-drawer svg { color: #ffffff !important; font-size: 1.25rem !important; }
  body:not(.page-feed) .toggle-drawer { display: none !important; }

  /* Replace the butterfly logo with a clean SocialDiverse wordmark — feed
     header only (`header.navbar`, no `.guest-navbar`). The guest/landing
     header shares the `.navbar-brand.logo` class name but must keep its own
     real logo image + wordmark untouched. */
  header.navbar:not(.guest-navbar) .navbar-brand.logo img { display: none !important; }
  header.navbar:not(.guest-navbar) .navbar-brand.logo { display: inline-flex !important; align-items: center !important; align-self: center !important; text-decoration: none !important; background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; }
  header.navbar:not(.guest-navbar) .navbar-brand.logo::before { content: 'Social'; color: #ffffff; font-weight: 600; font-size: 1.25rem; letter-spacing: .3px; line-height: 1; font-family: 'Poppins', sans-serif; }
  header.navbar:not(.guest-navbar) .navbar-brand.logo::after { content: 'Diverse'; color: #ffffff; font-weight: 800; font-size: 1.25rem; letter-spacing: .3px; line-height: 1; font-family: 'Poppins', sans-serif; }
  /* Only screens with a header-positioned menu toggle (fixed, top-left) —
     the feed page's hamburger, the moderation dashboard's sidebar toggle —
     need the logo pushed right to clear it. Every other screen has no
     toggle, so the logo should sit flush with the container's own padding
     instead of leaving that space looking empty. */
  body.page-feed header.navbar:not(.guest-navbar) .navbar-brand.logo,
  body.mod-dashboard header.navbar:not(.guest-navbar) .navbar-brand.logo { margin-left: 34px !important; }
  body:not(.page-feed):not(.mod-dashboard) header.navbar:not(.guest-navbar) .navbar-brand.logo { margin-left: 0 !important; }

  /* Guest/landing header: logo-only on mobile+tablet (drop the text wordmark
     here too, not just <=576px, so it never crowds the Join/Login buttons). */
  .guest-navbar .logo-wordmark { display: none !important; }

  /* Unfreeze the tiles/composer block so the page scrolls under the header */
  .sd-sticky-top { position: static !important; top: auto !important; box-shadow: none !important; gap: 2px !important; padding: 0 !important; }

  /* Feed screen: drop the outer container's left/right gutter so cards run
     edge-to-edge (their own internal padding still spaces the content).
     Bootstrap's .container also caps max-width per breakpoint (e.g. 720px
     in the 768-991.98px range) and centers it with auto margins — reset
     that too, otherwise tablet widths still show large empty side gaps
     even with the gutter padding removed. */
  body.page-feed .feed-grid.container { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

  /* Tighter, consistent vertical rhythm */
  .feed { gap: 8px !important; }
  .sd-composer-compact { padding: 8px 16px !important; }
  .sd-suggestions-card { margin-bottom: 0 !important; }

  /* Services bar: bare icons only — no tiles, labels, or badges */
  .sd-services-bar { background: transparent !important; box-shadow: none !important; border: none !important; padding: 2px 4px !important; gap: 4px !important; justify-content: space-around !important; }
  .sd-service-card { background: transparent !important; border: none !important; box-shadow: none !important; padding: 2px 6px !important; }
  .sd-service-card:hover { background: transparent !important; transform: none !important; box-shadow: none !important; }
  .sd-service-icon { background: transparent !important; width: 44px !important; height: 44px !important; border-radius: 0 !important; }
  .sd-service-card:hover .sd-service-icon { background: transparent !important; }
  .sd-service-icon i { font-size: 1.6rem !important; color: #1d9a8a !important; transition: color .2s ease; }
  .sd-service-label { display: none !important; }

  /* beta = professional rose, demo = muted gold; badge revealed on hover */
  .sd-service-card.cs-beta-card .sd-service-icon i { color: #c98ba0 !important; }
  .sd-service-card.cs-demo-card .sd-service-icon i { color: #c1a256 !important; }
  .sd-service-card.cs-beta-card::after, .sd-service-card.cs-demo-card::after { opacity: 0 !important; transition: opacity .2s ease; }
  .sd-service-card.cs-beta-card:hover::after, .sd-service-card.cs-demo-card:hover::after { opacity: .9 !important; }
}