/* Phone and tablet layout for the admin pages that don't carry their own
   (Overview, Donors, Marketing): a top bar with a slide-in sidebar, columns
   that shrink to the screen, and wide tables that scroll inside their card.
   Same pattern as admin-crm.html. */
.mobilebar,.scrim,.sb-close{display:none}
.main{min-width:0}
.kpi,.grid-2>*,.grid-3>*{min-width:0}

/* a card spanning two columns would add a phantom column once the grid collapses */
@media(max-width:1200px){.grid-3>[style*="span 2"]{grid-column:auto!important}}

@media(max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .mobilebar{display:flex;position:sticky;top:0;z-index:30;background:#0f1011;color:#fff;border-bottom:1px solid rgba(255,255,255,.09);padding:12px 16px;align-items:center;justify-content:space-between}
  .mobilebar .logo{display:flex;align-items:center;gap:10px;min-height:44px;font:700 15px 'Epilogue',sans-serif;color:#fff}
  .mobilebar .logo img{width:28px;height:28px;border-radius:8px}
  .mobilebar .menu{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);display:grid;place-items:center;cursor:pointer;color:#fff;font-size:18px}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:272px;z-index:40;overflow-y:auto;transform:translateX(-100%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s}
  body.nav-open .sidebar{transform:none;visibility:visible;transition:transform .22s ease}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:39}
  .sb-close{display:grid;place-items:center;position:absolute;top:14px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:16px;cursor:pointer}
  .sb-link{min-height:44px}

  .main{padding:18px 16px 48px}
  .topbar h1{font-size:22px}
  .topbar>div:last-child{width:100%;flex-wrap:wrap}
  .search{min-width:0;width:100%}
  .topbar .btn{flex:1;justify-content:center;min-height:44px}
  .card{overflow-x:auto}
  .mchart>table{display:block;overflow-x:auto;white-space:nowrap}
  .donut-wrap{flex-wrap:wrap;justify-content:center}
  .legend{min-width:min(100%,200px)}
  .donor-row,.lead-row{flex-wrap:wrap;gap:8px}
  .funnel .row{grid-template-columns:96px minmax(0,1fr) 72px;gap:10px}
  .telem .row{grid-template-columns:96px minmax(0,1fr)}
  .filters .sel{min-height:44px;flex:1}
  .chip{min-height:32px;display:inline-flex;align-items:center}
}