/* =====================================================================
   EDUHUNT ACADEMY - ACADEMIC COORDINATOR PORTAL
   V2.2.236 R8 - MOBILE HUB 3 COLUMNS + PROGRAMME OVERVIEW 2 COLUMNS
   2026-08-29

   UI ONLY.
   - Coordinator navigation hub cards: exactly 3 per row on mobile/tablet.
   - Hub icon + title + helper text: centered.
   - Coordinator Dashboard > Assigned Programme Overview: 2 cards per row.
   - No API, permission, route, database, exam, result or upload logic.
   ===================================================================== */

@media screen and (max-width:1024px){
  /* ---------------------------------------------------------------
     1) COORDINATOR HUB PAGES
        Today's Tasks / Schools / Exam Operations / Downloads
        Exactly THREE buttons per row.
     --------------------------------------------------------------- */
  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    align-items:stretch!important;
  }

  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card{
    width:100%!important;
    min-width:0!important;
    min-height:116px!important;
    padding:10px 5px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    border-radius:13px!important;
    text-align:center!important;
    overflow:hidden!important;
  }

  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card .kpi-icon,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card .kpi-icon{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    flex:0 0 40px!important;
    margin:0 auto!important;
    border-radius:11px!important;
    display:grid!important;
    place-items:center!important;
  }

  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card .kpi-icon svg,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card .kpi-icon svg{
    width:21px!important;
    height:21px!important;
  }

  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card > span:last-child,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card > span:last-child{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    text-align:center!important;
  }

  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card strong,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card strong{
    display:block!important;
    width:100%!important;
    margin:0!important;
    font-size:clamp(10.5px,2.65vw,12.5px)!important;
    line-height:1.16!important;
    font-weight:950!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card small,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card small{
    display:block!important;
    width:100%!important;
    margin:2px 0 0!important;
    font-size:9px!important;
    line-height:1.14!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  /* ---------------------------------------------------------------
     2) COORDINATOR DASHBOARD
        Assigned Programme Overview = TWO cards per row.
        This deliberately overrides the generic <=560px one-column rule.
     --------------------------------------------------------------- */
  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .dashboard-programme-card .programme-grid,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .dashboard-programme-card .programme-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    align-items:stretch!important;
  }

  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .dashboard-programme-card .programme-card,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .dashboard-programme-card .programme-card{
    width:100%!important;
    min-width:0!important;
    min-height:88px!important;
    padding:10px!important;
    box-sizing:border-box!important;
  }

  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .dashboard-programme-card .programme-card strong,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .dashboard-programme-card .programme-card strong{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.18!important;
  }
}

/* Narrow phones still stay at THREE hub buttons and TWO programme cards. */
@media screen and (max-width:380px){
  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub{
    gap:6px!important;
  }

  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card{
    min-height:108px!important;
    padding:8px 3px!important;
    gap:6px!important;
  }

  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card .kpi-icon,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card .kpi-icon{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    flex-basis:36px!important;
  }

  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card strong,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card strong{
    font-size:10px!important;
  }

  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card small,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-mobile-hub .quick-card small{
    font-size:8.25px!important;
  }

  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .dashboard-programme-card .programme-grid,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .dashboard-programme-card .programme-grid{
    gap:6px!important;
  }

  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .dashboard-programme-card .programme-card,
  html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .dashboard-programme-card .programme-card{
    padding:8px!important;
  }
}

/* =====================================================================
   EDUHUNT V2.2.295 R67 - COORDINATOR MOBILE UI FINAL REPAIR
   IMPORTANT: physical mobile may keep a desktop-width CSS viewport.
   Therefore eh-force-mobile rules are intentionally OUTSIDE media queries.
   No font/icon size changes are made to dashboard KPI/programme content.
   ===================================================================== */

/* Physical-mobile hard override: Dashboard = exactly 3 KPI cards per row. */
html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-dashboard-kpis{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
  overflow-x:hidden!important;
  padding-bottom:0!important;
}
html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-dashboard-kpis .kpi-card{
  min-width:0!important;
}

/* Physical-mobile hard override: Programme Overview = exactly 4 cards per row.
   Keep existing text sizes; only card width/padding is tightened. */
html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .dashboard-programme-card .programme-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:6px!important;
  width:100%!important;
}
html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #content .dashboard-programme-card .programme-card{
  width:100%!important;
  min-width:0!important;
  min-height:72px!important;
  padding:6px!important;
}

/* Coordinator mobile bottom labels only. Icon size is deliberately untouched. */
html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #roleBottomNav button span{
  font-size:7.25px!important;
  line-height:1.02!important;
}

/* Remove the marked Sunday WhatsApp automatic-status box from Coordinator mobile only. */
html.eh-force-mobile body[data-portal-role="ACADEMIC_COORDINATOR"] #loginEngagementAutoStatus{
  display:none!important;
}

/* Normal responsive mobile/tablet viewport, when eh-force-mobile is not required. */
@media screen and (max-width:1024px){
  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .coordinator-dashboard-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    overflow:visible!important;
    overflow-x:hidden!important;
  }
  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .dashboard-programme-card .programme-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
  }
  body[data-portal-role="ACADEMIC_COORDINATOR"] #content .dashboard-programme-card .programme-card{
    min-width:0!important;
    min-height:72px!important;
    padding:6px!important;
  }
  body[data-portal-role="ACADEMIC_COORDINATOR"] #loginEngagementAutoStatus{
    display:none!important;
  }
}