@media(max-width:1100px){
  .sb{position:fixed;left:0;top:0;bottom:0;z-index:200;transform:translateX(-100%);transition:transform .22s cubic-bezier(.4,0,.2,1);height:100dvh;box-shadow:4px 0 24px rgba(0,0,0,.5)}
  .sb.open{transform:translateX(0)}
  #sb-close-btn{display:flex!important}
  .sb-hamburger{display:flex}
  .main{width:100%}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g21{grid-template-columns:1fr}
  .md{width:min(470px,calc(100vw - 32px));max-height:88vh}
  #d-quick-actions{grid-template-columns:repeat(3,1fr)!important}
  #tr-folders{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #fi-folders{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  /* New components */
  .d2-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d2-body{grid-template-columns:1fr}
  .d2-hero{grid-template-columns:1fr;gap:14px}
  .d2-hero-div{display:none}
  #rc-row2,#rc-row3{grid-template-columns:1fr 1fr!important}
  .rp-body{grid-template-columns:1fr}
  .rp-sidebar{position:static}
}

/* ── MOBILE MEMBER CARDS ── */
.m-mob-card{cursor:pointer;transition:border-color .12s}
.m-mob-card:hover{border-color:var(--sky)}
#m-mobile-cards{display:none}

@media(max-width:768px){
  /* ── CORE ── */
  body{font-size:12.5px}
  .content{padding:11px 12px}
  .topbar{padding:0 12px;gap:7px}
  .tb-date{display:none}
  /* ── MEMBERS: swap table for cards on mobile ── */
  #m-tbl-card{display:none}
  #m-mobile-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:4px 0}
  .g4,.g3,.g2,.g21,.gg{grid-template-columns:1fr!important}
  #d-officer-row{grid-template-columns:1fr!important}
  #page-ritual>div:last-child,#page-philanthropy>div:last-child{grid-template-columns:1fr!important}
  .fg{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pl{width:110px}
  .card{padding:11px 12px}
  .card-hd{flex-wrap:wrap;gap:6px}
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl{min-width:480px}
  .mo{align-items:flex-end;padding:0}
  .md{width:100%!important;max-width:100%!important;border-radius:var(--rl) var(--rl) 0 0;max-height:92dvh;padding:16px 15px;border-left:none;border-right:none;border-bottom:none}
  .confirm-box{width:calc(100vw - 28px);max-width:380px}
  .kb,#t-kb{grid-template-columns:1fr!important}
  .fr.c2,.fr.c3{grid-template-columns:1fr!important}
  .cal-cell{min-height:54px;padding:3px}
  .cal-pip{font-size:8.5px;padding:1px 3px}
  .cal-day-num{font-size:10.5px;width:18px;height:18px}
  .kv{font-size:19px}
  #d-quick-actions{grid-template-columns:repeat(2,1fr)!important}
  #tr-folders{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #fi-folders{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .btn{max-width:100%}
  .card-hd .btn{height:26px;font-size:11px;padding:0 9px}
  .rw{flex-wrap:wrap}
  #notes-g{grid-template-columns:1fr!important}
  .case-actions{flex-wrap:wrap}
  #ma-list{grid-template-columns:1fr!important}
  .tbl td,.tbl th{padding:5px 7px;font-size:11px}
  .lg-box{width:calc(100vw - 32px);padding:28px 20px}
  #ac-table th:nth-child(3),#ac-table td:nth-child(3){display:none}
  .an-off-row{grid-template-columns:100px 1fr 1fr!important}
  .an-off-row>div:last-child{display:none}

  /* ── TOPBAR: hide title when search is open ── */
  .gs-wrap{max-width:none;flex:1}

  /* ── FINANCE TABS: scrollable on mobile ── */
  #fin-tabs-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #fin-tabs-bar::-webkit-scrollbar{display:none}
  #rc-tabs-bar::-webkit-scrollbar{display:none}
  .fin-tab{white-space:nowrap;flex-shrink:0;padding:7px 11px;font-size:11.5px}
  .fin-profile-grid{grid-template-columns:1fr!important}

  /* ── DASHBOARD 2.0 ── */
  .d2-hero{padding:14px 15px;grid-template-columns:1fr}
  .d2-hero-div{display:none}
  .d2-hero-health{gap:12px}
  .d2-qa-grid{grid-template-columns:repeat(2,1fr)}
  .d2-kpi-row{grid-template-columns:repeat(2,1fr)}
  .d2-body{grid-template-columns:1fr}
  .d2-off-card{grid-template-columns:minmax(0,1fr) 44px 44px 72px;gap:6px;padding:7px 8px}

  /* ── ATTENDANCE ANALYTICS ── */
  #att-row1,#att-row2{grid-template-columns:1fr!important}
  #att-risk-grid{grid-template-columns:1fr!important}
  .att-tab{white-space:nowrap;flex-shrink:0;padding:7px 11px;font-size:11.5px}
  .att-ev-label{width:90px}

  /* ── RECRUITMENT FUNNEL ── */
  #rc-row2,#rc-row3{grid-template-columns:1fr!important}
  .rc-hfunnel-row{grid-template-columns:80px minmax(0,1fr) 60px}
  .rc-hfunnel-label{font-size:9.5px}
  .rc-kanban{grid-template-columns:repeat(3,minmax(150px,1fr))!important}

  /* ── REPORTS ── */
  .rp-body{grid-template-columns:1fr}
  .rp-sidebar{position:static}
  .rp-header{flex-direction:column;align-items:flex-start;gap:6px}
  .rp-preview-wrap{padding:14px 13px}
  .rp-kpi-row{grid-template-columns:repeat(2,1fr)!important}
  .rp-actions-bar{flex-wrap:wrap;gap:7px}
  #rp-menu{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}
  .rp-item{border-left:none;border-radius:8px;border:1px solid var(--bdr)}
  .rp-item.active{border-color:var(--sky);background:var(--sky-bg)}
  .rp-sidebar-lbl{display:none}

  /* ── PAGE-SPECIFIC TOOLBARS: wrap gracefully ── */
  #att-toolbar,#sober-toolbar{flex-wrap:wrap}
  .page-toolbar{flex-wrap:wrap;gap:7px}

  /* ── PAGE HEADERS: stack title above actions ── */
  .ph{flex-direction:column;align-items:flex-start}
  .ph-actions{width:100%;flex-wrap:wrap}
  .ph-actions .sbar{flex:1;min-width:140px;margin-bottom:0!important}

  /* ── TABLES: enforce min-width so .tw containers activate horizontal scroll ── */
  .tbl{min-width:460px}
  .rp-table{min-width:460px}

  /* ── COMMITTEES: override inline grid style ── */
  #co-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* ── TASKS KANBAN ── */
  .kb{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* ── ACADEMICS TABS: horizontal scroll instead of wrapping ── */
  #ac-tabs-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap!important}
  #ac-tabs-bar::-webkit-scrollbar{display:none}
  .ac-tab{white-space:nowrap;flex-shrink:0;padding:7px 11px;font-size:11.5px}

  /* ── VENDORS, ALUMNI, PHILANTHROPY, RITUAL: tables inside pages scroll ── */
  #page-vendors .card,#page-alumni .card,#page-philanthropy .card,#page-ritual .card{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ── FINANCE: dues/fines/budget/national/plans tab content ── */
  #fin-dues,#fin-fines,#fin-budget,#fin-national,#fin-plans,#fin-settings{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ── ACADEMICS PANES: table content scroll ── */
  #ac-pane-members,#ac-pane-history,#ac-pane-checks{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ── REPORT PREVIEW: wide tables inside reports scroll ── */
  .rp-preview-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ── HEALTH SCORECARD: dimension bars adjust ── */
  .hs-dim-bar-row{flex-wrap:wrap;gap:4px}

  /* ── GLOBAL TABLE SAFETY NET: any table not already in a .tw that overflows ── */
  .card table{max-width:none}
}

@media(max-width:480px){
  /* ── CORE ── */
  #m-mobile-cards{grid-template-columns:1fr}
  #co-grid{grid-template-columns:1fr!important}
  .kb{grid-template-columns:1fr!important}
  #fi-folders,#tr-folders{grid-template-columns:1fr 1fr!important}
  .folder-icon{width:32px;height:32px;font-size:16px}
  .folder-name{font-size:11.5px}
  .kv{font-size:17px}
  .topbar{padding:0 10px;height:48px}
  .cal-cell{min-height:38px}
  .cal-day-num{font-size:9px;width:15px;height:15px}

  /* ── DASHBOARD HERO: stack health ring above dims ── */
  .d2-hero-health{flex-direction:column;align-items:flex-start;gap:10px}
  .d2-qa-grid{grid-template-columns:1fr 1fr}
  .d2-kpi-row{grid-template-columns:1fr 1fr}
  .d2-off-card{grid-template-columns:minmax(0,1fr) 38px 38px 62px;gap:4px;padding:6px 7px}
  .d2-off-stat-val{font-size:11px}

  /* ── REPORTS ── */
  #rp-menu{grid-template-columns:1fr}
  .rp-kpi-row{grid-template-columns:1fr 1fr!important}

  /* ── RECRUITMENT ── */
  .rc-scorecard{padding:9px 10px}
  #rc-row2,#rc-row3{grid-template-columns:1fr!important}

  /* ── TABLES: hide lower priority columns ── */
  .tbl th:last-child,.tbl td:last-child{display:none}
  .tbl th:nth-child(4),.tbl td:nth-child(4){display:none}

  /* ── MODALS ── */
  .md{padding:13px 12px}
  .md-t{font-size:13px}

  /* ── BUTTONS: icon-only on very small ── */
  .btn-icon-label{display:none}
}

@media(max-width:380px){
  .content{padding:8px 9px}
  .topbar{gap:5px}
  .d2-off-card{grid-template-columns:minmax(0,1fr) 36px 56px;gap:3px}
  .d2-off-card>.d2-off-stat:first-of-type{display:none} /* hide attendance col, keep tasks + status */
  .att-tabs .att-tab{padding:0 9px;font-size:11px}
  .rp-item-sub{display:none}
}