/* ── Hamburger button — hidden on desktop ── */
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 7px;
  margin-right: 8px;
  transition: background .15s;
}
.hamburger:hover { background: rgba(12,63,92,.08); }
.hamburger .bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--navy, #0C3F5C);
  border-radius: 2px;
  position: relative;
  transition: all .2s;
}
.hamburger .bar::before,
.hamburger .bar::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--navy, #0C3F5C);
  border-radius: 2px;
  transition: all .2s;
}
.hamburger .bar::before { top: -6px; }
.hamburger .bar::after  { top:  6px; }

/* ── Slide-in animation when open ── */
body.nav-open .hamburger .bar          { background: transparent; }
body.nav-open .hamburger .bar::before  { top: 0; transform: rotate(45deg); }
body.nav-open .hamburger .bar::after   { top: 0; transform: rotate(-45deg); }

/* ── Overlay ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 150;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
  .hamburger { display: flex; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    z-index: 200 !important;
  }
  body.nav-open .sidebar          { transform: translateX(0); }
  body.nav-open .sidebar-overlay  { display: block; }

  .main {
    margin-left: 0 !important;
    max-width: 100vw !important;
    padding: 20px 16px !important;
  }

  /* Tighten welcome banner on small screens */
  .welcome-banner {
    flex-direction: column;
    gap: 16px;
    padding: 20px !important;
  }
  .impact-pills { justify-content: flex-start; }

  /* Stack 2-col and 3-col grids to single column */
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }

  /* ── Tables: horizontal scroll wrapper ── */
  .res-table, .scorecard-table, .data-table, .bberg-table, .pa-table,
  .close-table, .tab-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* ── Modals: full-width on mobile ── */
  .modal-box {
    flex-direction: column !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
  }
  .modal-left {
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px 18px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .ml-stats { display: none !important; }
  .ml-tier-badge { display: none !important; }
  .ml-rating { font-size: 32px !important; }
  .modal-right { padding: 14px 16px !important; }
  .modal-backdrop { align-items: flex-end !important; padding: 0 !important; }

  /* ── People: card grids ── */
  .dept-cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; }

  /* ── People: accountability chart — horizontal scroll ── */
  .acct-chart { padding: 12px 16px; }
  #acctView { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .acct-depts-row { gap: 8px; }
  .seat-card { width: 148px !important; }
  .seat-card-sm { width: 128px !important; }

  /* ── EOS / Strategy: tab scroll ── */
  .tab-nav, .tabs-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }

  /* ── Partner grid: allow narrower cards ── */
  .partner-grid { grid-template-columns: 1fr !important; }

  /* ── Forces / SWOT layouts ── */
  .forces-layout { grid-template-columns: 1fr !important; grid-template-areas: none !important; }
  .swot-grid { grid-template-columns: 1fr !important; }
  .forces-summary { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── View toggle: allow wrapping ── */
  .view-toggle { flex-wrap: wrap; }
  .vt-btn { font-size: 11px !important; padding: 7px 10px !important; }

  /* ── Favors cols: single column ── */
  .favors-cols { grid-template-columns: 1fr !important; }

  /* ── Topbar title: smaller ── */
  .page-title { font-size: 18px !important; }
}