/* ============================================================================
   Narrow-viewport navigation for the panel AND team/superadmin shell.
   Loads LAST in hcp_render_head()'s link list, so it wins over the earlier
   files — notably forensic-v2.css, which at max-width:1024px slid the sidebar
   off-screen (transform) while leaving the grid's 260px column in place and had
   no working toggle to reopen it. That was the "Leiste nicht links, Inhalt
   gequetscht darunter" bug on the team pages: 1024px is far too early to hide
   the sidebar — a laptop/tablet width fits sidebar + content side by side fine.

   Two tiers, applied to BOTH shells (.app = team/superadmin, .app.panel-app =
   customer panel):
     • 761–1024px : force the sidebar to stay visible SIDE BY SIDE (undo
                    forensic-v2's premature hide) — this is what the owner wants.
     • ≤760px     : real phone width — collapse to a slide-in overlay with a
                    working hamburger (markup + JS already emitted by
                    hcp_panel_sidebar / hcp_admin_sidebar).
   ============================================================================ */

/* Discord ID role badge (hcp_discord_id_html() in config.php) */
.hcp-role-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .02em; background: rgba(132,218,137,.15); color: #84da89; border: 1px solid rgba(132,218,137,.4); vertical-align: middle; }

.mobile-nav-toggle { display: none; }
.mobile-nav-backdrop { display: none; }

/* ---- Tier 1: 761–1024px — keep sidebar + content side by side ---- */
@media (min-width: 761px) and (max-width: 1024px) {
  .app > .sidebar, .app.panel-app > .sidebar {
    transform: none !important;   /* undo forensic-v2's translateX(-100%) hide */
    position: sticky !important;
    top: 0 !important;
  }
  .app > .main, .app.panel-app > .main {
    margin-left: 0 !important;    /* grid already offsets it; no extra margin */
  }
}

/* ---- Tier 2: ≤760px — slide-in overlay + hamburger ---- */
@media (max-width: 760px) {
  .app, .app.panel-app {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  .app > .sidebar, .app.panel-app > .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    width: min(82vw, 320px) !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
    transform: translateX(-100%) !important;
    transition: transform .22s ease !important;
    box-shadow: 2px 0 28px rgba(0,0,0,.55);
  }
  .app > .sidebar.mobile-nav-open, .app.panel-app > .sidebar.mobile-nav-open {
    transform: translateX(0) !important;
  }
  .app > .main, .app.panel-app > .main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-top: 64px !important;
  }
  .mobile-nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed !important;
    top: 12px;
    left: 12px;
    z-index: 1002 !important;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(12,12,12,.95) !important;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 999;
  }
  .mobile-nav-backdrop.mobile-nav-open { display: block; }
}