/* EDUHUNT R165 - Academic Coordinator mobile programme-card centering
 * Scope: Academic Coordinator dashboard only.
 * Mobile order inside each programme card:
 * Programme Name
 * [school count]
 * Schools
 * [student count]
 * Students
 */
@media (max-width: 767px) {
  /* Coordinator cards are BUTTON elements; Super Admin programme cards are DIVs. */
  .dashboard-programme-card .programme-grid > button.programme-card {
    text-align: center !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 9px 5px !important;
    min-height: 118px !important;
    gap: 4px !important;
  }

  .dashboard-programme-card .programme-grid > button.programme-card > strong {
    display: block !important;
    width: 100% !important;
    margin: 0 0 2px !important;
    text-align: center !important;
    line-height: 1.08 !important;
  }

  /* Existing markup is: Schools <b>13</b>. Column-reverse makes 13 appear above Schools. */
  .dashboard-programme-card .programme-grid > button.programme-card > span {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 1px !important;
    text-align: center !important;
    line-height: 1.05 !important;
  }

  .dashboard-programme-card .programme-grid > button.programme-card > span > b {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 16px !important;
    line-height: 1.05 !important;
  }
}