/*
 * YENTUMI Gradebook Enterprise
 * School System Admin Mobile Promotions UX — Step 5.52 / release 2026.08.28.057
 * Presentation-only: no permissions, routes, calculations or database behaviour.
 */

@media (max-width: 820px) {
  body.gb-school-admin-mobile {
    --sam-bg: var(--gb-bg, #f5f8fc);
    --sam-surface: var(--gb-surface, #fff);
    --sam-soft: var(--gb-surface-soft, #f6f9fd);
    --sam-line: var(--gb-line, #dbe5f0);
    --sam-text: var(--gb-text, #10233f);
    --sam-muted: var(--gb-muted, #62758b);
    --sam-brand: var(--school-accent, #2563eb);
    --sam-brand-soft: var(--gb-brand-soft, #eef5ff);
    --sam-radius: 18px;
    --sam-shadow: 0 8px 24px rgba(20, 45, 78, .06);
    overflow-x: hidden !important;
    background: var(--sam-bg) !important;
  }

  body.gb-school-admin-mobile > .shell,
  body.gb-school-admin-mobile.dashboard-shell > .shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px 14px calc(112px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  body.gb-school-admin-mobile main.shell,
  body.gb-school-admin-mobile main.shell * { box-sizing: border-box; min-width: 0; }
  body.gb-school-admin-mobile img,
  body.gb-school-admin-mobile svg,
  body.gb-school-admin-mobile canvas { max-width: 100%; }

  body.gb-school-admin-mobile .page-head {
    margin: 0 0 14px !important;
    padding: 0 2px !important;
  }
  body.gb-school-admin-mobile .page-head h1 {
    margin: 0 !important;
    font-size: clamp(28px, 8.5vw, 36px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  body.gb-school-admin-mobile .page-head p { font-size: 12px !important; }

  body.gb-school-admin-mobile :where(.panel,.card,.cc-card,.student360-card,.student360-section,.analytics-card,.analytics-visual-card,.analytics-ring-card) {
    border-radius: var(--sam-radius) !important;
    box-shadow: var(--sam-shadow) !important;
  }
  body.gb-school-admin-mobile .panel { padding: 16px !important; }
  body.gb-school-admin-mobile .panel + .panel { margin-top: 12px !important; }
  body.gb-school-admin-mobile .section-heading {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  body.gb-school-admin-mobile .section-heading h2 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
  body.gb-school-admin-mobile .section-heading p { margin: 5px 0 0 !important; font-size: 14px !important; line-height: 1.5 !important; }
  body.gb-school-admin-mobile .section-heading > :where(a,button,.actions) { justify-self: start; }

  /* Touch targets and forms ------------------------------------------------ */
  body.gb-school-admin-mobile :where(button,.button,a.button) {
    min-height: 46px !important;
    border-radius: 13px !important;
  }
  body.gb-school-admin-mobile :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
    min-height: 50px !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    border-radius: 13px !important;
  }
  body.gb-school-admin-mobile textarea { min-height: 112px !important; }
  body.gb-school-admin-mobile :where(.form-grid,.filters,.split,.stats) { min-width: 0 !important; }
  body.gb-school-admin-mobile :where(.form-grid,.filters) { gap: 12px !important; }
  body.gb-school-admin-mobile label { line-height: 1.35 !important; }

  /* Navigation: top bar + bottom four destinations ------------------------ */
  html.gradebook-phone-app body.gb-school-admin-mobile .pwa-app-dock {
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    min-height: 82px !important;
    padding: 7px 6px !important;
    border-radius: 22px !important;
    gap: 2px !important;
  }
  html.gradebook-phone-app body.gb-school-admin-mobile .pwa-dock-item {
    min-height: 66px !important;
    padding: 7px 4px !important;
    border-radius: 16px !important;
  }
  html.gradebook-phone-app body.gb-school-admin-mobile .pwa-dock-item span {
    width: 28px !important; height: 28px !important;
  }
  html.gradebook-phone-app body.gb-school-admin-mobile .pwa-dock-item b {
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* Generic mobile data cards --------------------------------------------- */
  body.gb-school-admin-mobile .table-wrap:has(table.mobile-card-table) { overflow: visible !important; }
  body.gb-school-admin-mobile table.mobile-card-table tbody { gap: 10px !important; }
  body.gb-school-admin-mobile table.mobile-card-table tr {
    padding: 8px 14px !important;
    border-radius: 16px !important;
    box-shadow: none !important;
  }
  body.gb-school-admin-mobile table.mobile-card-table td {
    grid-template-columns: minmax(92px, 34%) minmax(0,1fr) !important;
    min-height: 42px !important;
    padding: 9px 0 !important;
    gap: 12px !important;
    align-items: center !important;
  }
  body.gb-school-admin-mobile table.mobile-card-table td::before {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
  body.gb-school-admin-mobile table.mobile-card-table td :where(.button,button,a.button) {
    min-height: 42px !important;
    padding: 9px 12px !important;
  }

  /* Dashboard / School Command Centre ------------------------------------- */
  body.gb-school-admin-mobile[data-gb-admin-page="dashboard"] .page-head { display: none !important; }
  body.gb-school-admin-mobile .command-centre { gap: 12px !important; padding-bottom: 0 !important; }
  body.gb-school-admin-mobile .cc-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 18px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  body.gb-school-admin-mobile .cc-hero::after { display: none !important; content: none !important; }
  body.gb-school-admin-mobile .cc-hero h2 {
    font-size: clamp(27px, 8.5vw, 34px) !important;
    line-height: 1.08 !important;
  }
  body.gb-school-admin-mobile .cc-hero-main > p:not(.cc-kicker) { margin-top: 8px !important; font-size: 15px !important; line-height: 1.55 !important; }
  body.gb-school-admin-mobile .cc-context {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin-top: 12px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }
  body.gb-school-admin-mobile .cc-context::-webkit-scrollbar { display: none; }
  body.gb-school-admin-mobile .cc-context span { flex: 0 0 auto !important; min-height: 30px !important; padding: 5px 9px !important; font-size: 11px !important; }
  body.gb-school-admin-mobile .cc-search-shell { padding: 12px !important; border-radius: 16px !important; }
  body.gb-school-admin-mobile .cc-search-shell > label { font-size: 12px !important; }
  body.gb-school-admin-mobile .cc-search-box { min-height: 52px !important; padding: 8px 10px !important; }
  body.gb-school-admin-mobile .cc-search-box kbd { display: none !important; }

  body.gb-school-admin-mobile .cc-kpis,
  body.gb-school-admin-mobile .cc-pulse-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 9px !important;
  }
  body.gb-school-admin-mobile .cc-kpi,
  body.gb-school-admin-mobile .cc-pulse-grid article {
    min-height: 104px !important;
    padding: 13px !important;
    border-radius: 16px !important;
  }
  body.gb-school-admin-mobile .cc-kpi { display: flex !important; gap: 10px !important; align-items: flex-start !important; }
  body.gb-school-admin-mobile .cc-kpi-icon { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; }
  body.gb-school-admin-mobile .cc-kpi strong,
  body.gb-school-admin-mobile .cc-pulse-grid strong { font-size: 22px !important; }
  body.gb-school-admin-mobile .cc-kpi small,
  body.gb-school-admin-mobile .cc-pulse-grid span { font-size: 11px !important; line-height: 1.25 !important; }
  body.gb-school-admin-mobile .cc-kpi em,
  body.gb-school-admin-mobile .cc-pulse-grid small { font-size: 10px !important; line-height: 1.35 !important; }
  body.gb-school-admin-mobile :where(.cc-grid-primary,.cc-grid-secondary) { grid-template-columns: 1fr !important; gap: 12px !important; }
  body.gb-school-admin-mobile .cc-card { border-radius: 18px !important; }
  body.gb-school-admin-mobile .cc-card-head {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 7px !important;
    padding: 15px !important;
  }
  body.gb-school-admin-mobile .cc-card-head h2 { font-size: 21px !important; line-height: 1.15 !important; }
  body.gb-school-admin-mobile .cc-card-head p:not(.cc-kicker) { font-size: 13px !important; line-height: 1.45 !important; }
  body.gb-school-admin-mobile .cc-card-head > a { justify-self: start !important; font-size: 12px !important; white-space: normal !important; }
  body.gb-school-admin-mobile .cc-empty { margin: 10px !important; padding: 13px !important; }
  body.gb-school-admin-mobile .cc-trend { min-height: 190px !important; padding: 14px 12px 10px !important; }
  body.gb-school-admin-mobile .cc-quick-grid { grid-template-columns: 1fr !important; gap: 8px !important; padding: 10px !important; }
  body.gb-school-admin-mobile .cc-quick-grid > a { min-height: 64px !important; padding: 11px !important; }
  body.gb-school-admin-mobile .cc-risk-list > a { grid-template-columns: 36px minmax(0,1fr) !important; gap: 10px !important; }
  body.gb-school-admin-mobile .cc-risk-tags { grid-column: 2 !important; justify-content: flex-start !important; }

  /* Academic Operations --------------------------------------------------- */
  body.gb-school-admin-mobile .academic-operations { max-width: 100% !important; overflow: visible !important; }
  body.gb-school-admin-mobile .academic-ops-page-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }
  body.gb-school-admin-mobile .academic-ops-page-head h2 { margin: 3px 0 7px !important; font-size: 27px !important; line-height: 1.08 !important; }
  body.gb-school-admin-mobile .academic-ops-page-head p { font-size: 14px !important; line-height: 1.5 !important; }
  body.gb-school-admin-mobile .academic-ops-page-head > div:last-child { padding: 12px !important; border-radius: 14px !important; }
  body.gb-school-admin-mobile :where(.academic-ops-tabs,.student360-tabs,.analytics-tabs,.settings-subnav-main) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 5px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  body.gb-school-admin-mobile :where(.academic-ops-tabs,.student360-tabs,.analytics-tabs,.settings-subnav-main)::-webkit-scrollbar { display: none; }
  body.gb-school-admin-mobile :where(.academic-ops-tabs a,.student360-tabs a,.analytics-tab,.settings-subnav-main a) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }
  body.gb-school-admin-mobile :where(.academic-ops-hero,.academic-ops-split,.academic-ops-overview-grid,.academic-ops-metrics) { grid-template-columns: 1fr !important; }
  body.gb-school-admin-mobile .academic-ops-hero { padding: 16px !important; gap: 13px !important; }

  /* On phones the desktop timetable becomes an agenda generated by JS. */
  body.gb-school-admin-mobile .gb-admin-timetable-desktop { display: none !important; }
  body.gb-school-admin-mobile .gb-admin-agenda {
    display: grid !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }
  body.gb-school-admin-mobile .gb-admin-agenda-days {
    display: flex !important;
    gap: 7px !important;
    overflow-x: auto !important;
    padding: 2px 0 4px !important;
    scrollbar-width: none !important;
  }
  body.gb-school-admin-mobile .gb-admin-agenda-days::-webkit-scrollbar { display: none; }
  body.gb-school-admin-mobile .gb-admin-day-chip {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 8px 13px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 999px !important;
    background: var(--sam-surface) !important;
    color: var(--sam-text) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }
  body.gb-school-admin-mobile .gb-admin-day-chip[aria-selected="true"] {
    background: var(--sam-brand) !important;
    color: #fff !important;
    border-color: var(--sam-brand) !important;
  }
  body.gb-school-admin-mobile .gb-admin-agenda-panel { display: grid !important; gap: 9px !important; }
  body.gb-school-admin-mobile .gb-admin-agenda-panel[hidden] { display: none !important; }
  body.gb-school-admin-mobile .gb-admin-agenda-empty {
    padding: 22px 16px !important;
    border: 1px dashed var(--sam-line) !important;
    border-radius: 16px !important;
    color: var(--sam-muted) !important;
    background: var(--sam-soft) !important;
    text-align: center !important;
  }
  body.gb-school-admin-mobile .gb-admin-lesson-card {
    display: grid !important;
    grid-template-columns: 70px minmax(0,1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 13px !important;
    border: 1px solid var(--sam-line) !important;
    border-left: 4px solid var(--sam-brand) !important;
    border-radius: 15px !important;
    background: var(--sam-surface) !important;
  }
  body.gb-school-admin-mobile .gb-admin-lesson-time { color: var(--sam-muted) !important; font-size: 11px !important; line-height: 1.35 !important; font-weight: 800 !important; }
  body.gb-school-admin-mobile .gb-admin-lesson-content { overflow: hidden !important; }
  body.gb-school-admin-mobile .gb-admin-lesson-content .academic-timetable-entry {
    margin: 0 !important;
    padding: 0 0 0 10px !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important;
  }
  body.gb-school-admin-mobile .gb-admin-lesson-content * { overflow-wrap: normal !important; word-break: normal !important; }

  /* Student 360 ----------------------------------------------------------- */
  body.gb-school-admin-mobile[data-gb-admin-page="student-360"] .page-head { display: none !important; }
  body.gb-school-admin-mobile .student360-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }
  body.gb-school-admin-mobile .student360-hero > :first-child { min-width: 0 !important; }
  body.gb-school-admin-mobile :where(.student360-identity,.student360-hero-main) {
    display: grid !important;
    grid-template-columns: 76px minmax(0,1fr) !important;
    gap: 13px !important;
    align-items: center !important;
  }
  body.gb-school-admin-mobile :where(.student360-avatar,.student360-initials) {
    width: 76px !important; height: 76px !important; min-width: 76px !important;
    border-radius: 20px !important; font-size: 27px !important;
  }
  body.gb-school-admin-mobile .student360-hero h2 { font-size: clamp(27px,8vw,34px) !important; line-height: 1.08 !important; }
  body.gb-school-admin-mobile :where(.student360-meta,.student360-badges) { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  body.gb-school-admin-mobile .student360-hero-summary {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 9px !important;
  }
  body.gb-school-admin-mobile .student360-hero-summary article { min-height: 94px !important; padding: 12px !important; border-radius: 15px !important; }
  body.gb-school-admin-mobile .student360-tabs { margin: 12px 0 !important; }
  body.gb-school-admin-mobile .student360-dl,
  body.gb-school-admin-mobile .student360-summary-row { grid-template-columns: 1fr !important; gap: 9px !important; }

  /* Analytics ------------------------------------------------------------- */
  body.gb-school-admin-mobile .analytics-shell { gap: 12px !important; }
  body.gb-school-admin-mobile :where(.analytics-workspace-grid,.analytics-visual-grid,.analytics-card-grid,.analytics-rank-grid) { grid-template-columns: 1fr !important; gap: 11px !important; }
  body.gb-school-admin-mobile .analytics-visual-card,
  body.gb-school-admin-mobile .analytics-ring-card { padding: 15px !important; overflow: hidden !important; }
  body.gb-school-admin-mobile .analytics-visual-card canvas { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 225px !important; }
  body.gb-school-admin-mobile .analytics-ring-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
    gap: 14px !important;
  }
  body.gb-school-admin-mobile .analytics-ring { width: 136px !important; height: 136px !important; justify-self: center !important; }
  body.gb-school-admin-mobile :where(.analytics-legend,.analytics-legend-row,.analytics-legend-chips) { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; }
  body.gb-school-admin-mobile .analytics-legend-chip { min-height: 36px !important; padding: 7px 10px !important; border-radius: 999px !important; font-size: 12px !important; }
  body.gb-school-admin-mobile .analytics-rank-row { padding: 12px !important; }

  /* Promotions ------------------------------------------------------------ */
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .promotion-controls { padding: 15px !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .promotion-controls > h2 { font-size: 22px !important; margin-bottom: 6px !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .promotion-controls .filters { grid-template-columns: 1fr !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .panel form > .actions {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .panel form > .actions > * { width: 100% !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] input.promotion-select[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 24px !important; height: 24px !important;
    min-width: 24px !important; min-height: 24px !important;
    margin: 0 !important; padding: 0 !important;
    border-radius: 5px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] table.mobile-card-table td:first-child {
    grid-template-columns: minmax(92px,34%) minmax(0,1fr) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] table.mobile-card-table td:first-child input { justify-self: end !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] table.mobile-card-table tr { padding: 8px 14px !important; }

  /* Collapsible filter workspaces ----------------------------------------- */
  body.gb-school-admin-mobile .gb-admin-filter-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 0 10px !important;
    padding: 10px 13px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 13px !important;
    background: var(--sam-soft) !important;
    color: var(--sam-text) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }
  body.gb-school-admin-mobile .gb-admin-filter-toggle::after { content: "⌄"; font-size: 17px; transition: transform .15s ease; }
  body.gb-school-admin-mobile .gb-admin-filter-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  body.gb-school-admin-mobile .gb-admin-filter-collapsed { display: none !important; }

  /* Assignment overview --------------------------------------------------- */
  body.gb-school-admin-mobile[data-gb-admin-page="assignments"] .assignment-overview-panel { padding: 15px !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="assignments"] .assignment-overview-heading h2 { font-size: 24px !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="assignments"] .assignment-overview-filters { grid-template-columns: 1fr !important; }

  /* Report archive -------------------------------------------------------- */
  body.gb-school-admin-mobile[data-gb-admin-page="report-archive"] .archive-summary.stats {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 9px !important;
    margin-bottom: 12px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="report-archive"] .archive-summary.stats article {
    min-height: 96px !important;
    padding: 13px !important;
    border-radius: 16px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="report-archive"] .archive-summary.stats article span { font-size: 11px !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="report-archive"] .archive-summary.stats article strong { margin-top: 5px !important; font-size: 27px !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="report-archive"] .archive-filter-grid { grid-template-columns: 1fr !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="report-archive"] .archive-bulk-actions {
    display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100% !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="report-archive"] .archive-bulk-actions > * { width: 100% !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="report-archive"] table.mobile-card-table td:first-child a { display: grid !important; gap: 2px !important; text-align: right !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="report-archive"] table.mobile-card-table td:first-child a small { display: block !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="report-archive"] .pagination { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; }

  /* Attendance / approvals / bills / generic admin actions ---------------- */
  body.gb-school-admin-mobile :where(.attendance-toolbar,.approval-toolbar,.bill-toolbar,.actions) { max-width: 100% !important; }
  body.gb-school-admin-mobile .actions { gap: 8px !important; }
  body.gb-school-admin-mobile .actions > :where(button,.button,a.button) { flex: 1 1 140px !important; }



  /* Enrollment register -------------------------------------------------- */
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .page-head {
    margin: 0 0 10px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .page-head h1 {
    font-size: 30px !important;
    letter-spacing: -.035em !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-filter-panel {
    padding: 13px !important;
    margin-bottom: 10px !important;
    border-radius: 16px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-filters {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 9px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-filters > label {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
    color: var(--sam-muted) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .02em !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-filters > label:last-child {
    grid-column: 1 / -1 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-filters select {
    min-height: 46px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-admin-region-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 2px 0 10px !important;
    padding: 10px 13px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 13px !important;
    background: var(--sam-soft) !important;
    color: var(--sam-text) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    text-align: left !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-admin-region-toggle::after {
    content: "⌄";
    font-size: 17px;
    transition: transform .15s ease;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-admin-region-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-admin-region-collapsed {
    display: none !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-tools {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin: 0 0 12px !important;
    padding: 12px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 15px !important;
    background: var(--sam-surface) !important;
    box-shadow: var(--sam-shadow) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-tools > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-tools .inline-upload,
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-tools .enrollment-onboarding {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-tools input[type="file"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 9px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 11px !important;
    background: var(--sam-soft) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .split {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-register-panel {
    padding: 14px !important;
    overflow: visible !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-register-title {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    letter-spacing: -.025em !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-toolbar {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    margin: 12px 0 !important;
    padding: 12px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 15px !important;
    background: var(--sam-soft) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-summary {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-summary > span {
    display: grid !important;
    gap: 2px !important;
    min-height: 64px !important;
    align-content: center !important;
    padding: 9px 11px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 12px !important;
    background: var(--sam-surface) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-summary b {
    color: var(--sam-text) !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-summary small {
    color: var(--sam-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-search {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 12px !important;
    background: var(--sam-surface) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-search > span {
    color: var(--sam-muted) !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-search input {
    min-height: 46px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--sam-text) !important;
    font-size: 16px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-add {
    align-self: stretch !important;
    min-width: 116px !important;
    min-height: 48px !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--sam-brand) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-source-table {
    display: none !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-list {
    display: grid !important;
    gap: 10px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-card {
    display: grid !important;
    gap: 12px !important;
    padding: 13px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 16px !important;
    background: var(--sam-surface) !important;
    box-shadow: 0 5px 16px rgba(24,48,79,.045) !important;
    overflow: hidden !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-card[hidden] {
    display: none !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-card-head {
    display: grid !important;
    grid-template-columns: 44px minmax(0,1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-avatar {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    background: var(--sam-brand-soft) !important;
    color: var(--sam-brand) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-identity {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-identity strong {
    color: var(--sam-text) !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-identity small {
    color: var(--sam-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .015em !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 118px !important;
    min-height: 30px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: #f3f5f8 !important;
    color: var(--sam-muted) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-status.is-active {
    background: #e9f8ef !important;
    color: #137344 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-meta {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-meta > div {
    display: grid !important;
    gap: 3px !important;
    min-height: 58px !important;
    align-content: center !important;
    padding: 9px 11px !important;
    border-radius: 12px !important;
    background: var(--sam-soft) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-meta small {
    color: var(--sam-muted) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-meta b {
    color: var(--sam-text) !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-card-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 38px !important;
    padding-top: 1px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-edit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 8px 13px !important;
    border: 1px solid color-mix(in srgb, var(--sam-brand) 24%, var(--sam-line)) !important;
    border-radius: 11px !important;
    background: var(--sam-brand-soft) !important;
    color: var(--sam-brand) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-locked {
    color: var(--sam-muted) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-empty {
    display: grid !important;
    gap: 4px !important;
    place-items: center !important;
    margin: 4px 0 !important;
    padding: 22px 14px !important;
    border: 1px dashed var(--sam-line) !important;
    border-radius: 15px !important;
    background: var(--sam-soft) !important;
    text-align: center !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-empty[hidden] { display: none !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-empty strong { color: var(--sam-text) !important; font-size: 15px !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-empty span { color: var(--sam-muted) !important; font-size: 12px !important; }

  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-editor {
    padding: 15px !important;
    scroll-margin-top: 92px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-editor:not(.is-editing):not(.is-add-open) {
    display: none !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-editor.is-editing,
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-editor.is-add-open {
    order: -1 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-editor h2 {
    margin: 0 0 12px !important;
    font-size: 23px !important;
    line-height: 1.15 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-editor form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-editor form > label {
    display: grid !important;
    gap: 6px !important;
    color: var(--sam-text) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-editor :where(input:not([type="hidden"]),select) {
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-editor form > button,
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-editor .gb-enrollment-cancel-edit,
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-editor .gb-enrollment-close-add {
    width: 100% !important;
    min-height: 48px !important;
    margin-top: 2px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-onboarding-mobile {
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  html[data-theme="dark"] body.gb-school-admin-mobile[data-gb-admin-page="learners"] :where(
    .gb-enrollment-tools,.gb-enrollment-summary > span,.gb-enrollment-search,.gb-enrollment-card
  ) {
    background: var(--sam-surface) !important;
    border-color: var(--sam-line) !important;
  }
  html[data-theme="dark"] body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-status {
    background: var(--sam-soft) !important;
    color: var(--sam-muted) !important;
  }
  html[data-theme="dark"] body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-status.is-active {
    background: rgba(34,197,94,.14) !important;
    color: #86efac !important;
  }

  /* Dark parity ----------------------------------------------------------- */
  html[data-theme="dark"] body.gb-school-admin-mobile {
    --sam-bg: var(--gb-dark-bg, #081522);
    --sam-surface: var(--gb-dark-surface, #0f2033);
    --sam-soft: var(--gb-dark-surface-raised, #14283e);
    --sam-line: var(--gb-dark-border, #2b455f);
    --sam-text: var(--gb-dark-text, #f3f7fb);
    --sam-muted: var(--gb-dark-muted, #9fb0c2);
    --sam-brand-soft: var(--gb-dark-blue-soft, rgba(72,126,245,.18));
    --sam-shadow: 0 8px 24px rgba(0,0,0,.16);
  }
  html[data-theme="dark"] body.gb-school-admin-mobile :where(.gb-admin-day-chip,.gb-admin-lesson-card,.gb-admin-filter-toggle) {
    background: var(--sam-surface) !important;
    color: var(--sam-text) !important;
    border-color: var(--sam-line) !important;
  }
  html[data-theme="dark"] body.gb-school-admin-mobile .gb-admin-day-chip[aria-selected="true"] { background: var(--sam-brand) !important; color: #fff !important; border-color: var(--sam-brand) !important; }
}

@media (max-width: 390px) {
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-toolbar { grid-template-columns: 1fr !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-add { width: 100% !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-card-head { grid-template-columns: 42px minmax(0,1fr) !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="learners"] .gb-enrollment-status { grid-column: 2 !important; justify-self: start !important; }
}

@media (max-width: 360px) {
  body.gb-school-admin-mobile .cc-kpis,
  body.gb-school-admin-mobile .cc-pulse-grid,
  body.gb-school-admin-mobile .student360-hero-summary,
  body.gb-school-admin-mobile[data-gb-admin-page="report-archive"] .archive-summary.stats {
    grid-template-columns: 1fr !important;
  }
  body.gb-school-admin-mobile :where(.student360-identity,.student360-hero-main) { grid-template-columns: 64px minmax(0,1fr) !important; }
  body.gb-school-admin-mobile :where(.student360-avatar,.student360-initials) { width: 64px !important; height: 64px !important; min-width: 64px !important; border-radius: 18px !important; font-size: 23px !important; }
  body.gb-school-admin-mobile .gb-admin-lesson-card { grid-template-columns: 62px minmax(0,1fr) !important; }
}

/* ========================================================================== 
   Step 5.52 — School Admin Mobile Teachers page
   A purpose-built teaching staff directory + focused teacher setup workspace.
   ========================================================================== */
@media (max-width: 820px) {
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .page-head {
    margin-bottom: 12px !important;
  }

  /* Academic-period context becomes a compact information strip. */
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .assignment-period.gb-teacher-period {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 66px !important;
    margin: 0 0 12px !important;
    padding: 12px 14px !important;
    border-radius: 17px !important;
    background: var(--sam-surface) !important;
    border: 1px solid var(--sam-line) !important;
    box-shadow: var(--sam-shadow) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .assignment-period.gb-teacher-period b {
    font-size: 14px !important;
    line-height: 1.35 !important;
    color: var(--sam-text) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .assignment-period.gb-teacher-period .badge {
    min-height: 30px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
    border-radius: 999px !important;
  }

  /* Teacher directory shell ------------------------------------------------ */
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .teacher-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: start !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .teacher-layout > .panel {
    margin: 0 !important;
    padding: 15px !important;
    border-radius: 19px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .gb-teacher-directory > h2 {
    margin: 0 0 12px !important;
    font-size: 23px !important;
    line-height: 1.15 !important;
  }

  .gb-teacher-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
  }
  .gb-teacher-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .gb-teacher-summary > span {
    display: grid !important;
    gap: 2px !important;
    min-height: 58px !important;
    padding: 9px 10px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 14px !important;
    background: var(--sam-soft) !important;
  }
  .gb-teacher-summary b {
    font-size: 20px !important;
    line-height: 1 !important;
    color: var(--sam-text) !important;
  }
  .gb-teacher-summary small {
    font-size: 9px !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: var(--sam-muted) !important;
  }
  .gb-teacher-toolbar-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .gb-teacher-search {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
  }
  .gb-teacher-search > span {
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 18px !important;
    color: var(--sam-muted) !important;
    pointer-events: none !important;
  }
  body.gb-school-admin-mobile .gb-teacher-search input {
    min-height: 48px !important;
    padding-left: 39px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: var(--sam-soft) !important;
  }
  body.gb-school-admin-mobile .gb-teacher-add {
    width: auto !important;
    min-width: 108px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 13px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    background: var(--sam-brand) !important;
    color: #fff !important;
    border-color: var(--sam-brand) !important;
  }

  /* Compact teacher cards -------------------------------------------------- */
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .teacher-list {
    display: grid !important;
    gap: 10px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .teacher-list-card.gb-teacher-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    gap: 10px 12px !important;
    align-items: center !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 13px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 17px !important;
    background: var(--sam-surface) !important;
    box-shadow: none !important;
  }
  .gb-teacher-avatar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 15px !important;
    background: var(--sam-brand-soft) !important;
    color: var(--sam-brand) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .gb-teacher-card > div:first-of-type {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .gb-teacher-card h3 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
    color: var(--sam-text) !important;
    overflow-wrap: anywhere !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .gb-teacher-card .gb-teacher-role-source,
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .gb-teacher-card > div:first-of-type > small {
    display: none !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .gb-teacher-card > .badge {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    min-height: 28px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  .gb-teacher-roles {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  .gb-teacher-role-chip {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 27px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: var(--sam-brand-soft) !important;
    color: color-mix(in srgb, var(--sam-brand) 82%, #173b70) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }
  .gb-teacher-contact {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }
  .gb-teacher-contact > span {
    min-width: 0 !important;
    padding: 8px 9px !important;
    border-radius: 11px !important;
    background: var(--sam-soft) !important;
    color: var(--sam-muted) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .teacher-assignment-summary {
    grid-column: 1 / -1 !important;
    display: none !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    border-radius: 12px !important;
    background: var(--sam-soft) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .teacher-assignment-summary.is-open {
    display: grid !important;
    gap: 6px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .teacher-assignment-summary p {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    color: var(--sam-muted) !important;
  }
  .gb-teacher-card-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  body.gb-school-admin-mobile .gb-teacher-card-actions :where(button,a) {
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }
  .gb-teacher-assignments-toggle {
    background: var(--sam-soft) !important;
    border: 1px solid var(--sam-line) !important;
    color: var(--sam-text) !important;
  }
  body.gb-school-admin-mobile .gb-teacher-card-actions .gb-teacher-edit {
    background: var(--sam-brand-soft) !important;
    border: 1px solid color-mix(in srgb, var(--sam-brand) 22%, var(--sam-line)) !important;
    color: var(--sam-brand) !important;
  }
  .gb-teacher-empty {
    display: grid !important;
    gap: 4px !important;
    padding: 18px !important;
    text-align: center !important;
    border: 1px dashed var(--sam-line) !important;
    border-radius: 15px !important;
    background: var(--sam-soft) !important;
  }
  .gb-teacher-empty strong { font-size: 14px !important; color: var(--sam-text) !important; }
  .gb-teacher-empty span { font-size: 12px !important; color: var(--sam-muted) !important; }

  /* Focused Add / Edit Teacher workspace ---------------------------------- */
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .teacher-editor.gb-teacher-editor-mobile {
    display: none !important;
    padding: 15px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"].gb-teacher-editor-active .teacher-editor.gb-teacher-editor-mobile {
    display: block !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"].gb-teacher-editor-active .gb-teacher-directory,
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"].gb-teacher-editor-active .assignment-period.gb-teacher-period {
    display: none !important;
  }
  .gb-teacher-editor-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--sam-line) !important;
  }
  body.gb-school-admin-mobile .gb-teacher-editor-back {
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 13px !important;
    background: var(--sam-soft) !important;
    border: 1px solid var(--sam-line) !important;
    color: var(--sam-text) !important;
    font-size: 18px !important;
  }
  .gb-teacher-editor-head div { min-width: 0 !important; }
  .gb-teacher-editor-head strong {
    display: block !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    color: var(--sam-text) !important;
  }
  .gb-teacher-editor-head small {
    display: block !important;
    margin-top: 2px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: var(--sam-muted) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .gb-teacher-editor-mobile > h2 {
    display: none !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .gb-teacher-editor-mobile form {
    display: grid !important;
    gap: 11px !important;
    padding-bottom: 18px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .gb-teacher-editor-mobile fieldset {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 16px !important;
    background: var(--sam-soft) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .gb-teacher-editor-mobile legend {
    padding: 0 7px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    color: var(--sam-text) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .teacher-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .teacher-info-grid label {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--sam-muted) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .teacher-info-grid label.gb-teacher-field-wide {
    grid-column: 1 / -1 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .teacher-info-grid :where(input,select) {
    min-height: 47px !important;
    padding: 9px 11px !important;
    margin: 0 !important;
    background: var(--sam-surface) !important;
  }

  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .role-checks {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .role-checks label {
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 10px !important;
    margin: 0 !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 13px !important;
    background: var(--sam-surface) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--sam-text) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .role-checks input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    accent-color: var(--sam-brand) !important;
  }

  /* Mobile-friendly class assignment chips synced to the original select. */
  .gb-teacher-class-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  .gb-teacher-class-options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 8px !important;
  }
  .gb-teacher-class-options label {
    min-height: 43px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 12px !important;
    background: var(--sam-surface) !important;
    color: var(--sam-text) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }
  .gb-teacher-class-options input {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    accent-color: var(--sam-brand) !important;
  }
  .gb-teacher-class-options label:has(input:checked) {
    border-color: color-mix(in srgb, var(--sam-brand) 55%, var(--sam-line)) !important;
    background: var(--sam-brand-soft) !important;
    color: var(--sam-brand) !important;
  }

  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] #subjectAssignmentRows {
    display: grid !important;
    gap: 9px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .subject-assignment-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 13px !important;
    background: var(--sam-surface) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .subject-assignment-row :where(select,button) {
    width: 100% !important;
    min-height: 45px !important;
    margin: 0 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .subject-assignment-row .remove-assignment {
    justify-self: stretch !important;
    min-height: 40px !important;
    background: transparent !important;
    border: 1px solid color-mix(in srgb, #ef4444 32%, var(--sam-line)) !important;
    color: #b42318 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] #addSubjectAssignment {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 8px !important;
    background: var(--sam-brand-soft) !important;
    color: var(--sam-brand) !important;
    border: 1px solid color-mix(in srgb, var(--sam-brand) 26%, var(--sam-line)) !important;
  }

  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .gb-teacher-editor-mobile form > .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 2px 0 0 !important;
    padding: 0 0 calc(92px + env(safe-area-inset-bottom)) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .gb-teacher-editor-mobile form > .actions :where(button,a) {
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
  }
}

@media (max-width: 370px) {
  .gb-teacher-summary { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .gb-teacher-summary > span { padding: 8px 7px !important; }
  .gb-teacher-toolbar-row { grid-template-columns: 1fr !important; }
  body.gb-school-admin-mobile .gb-teacher-add { width: 100% !important; }
  .gb-teacher-contact { grid-template-columns: 1fr !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .teacher-info-grid { grid-template-columns: 1fr !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="teachers"] .teacher-info-grid label.gb-teacher-field-wide { grid-column: auto !important; }
  .gb-teacher-class-options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 820px) {
  .gb-teacher-card-actions > :only-child { grid-column: 1 / -1 !important; }
}

/* --------------------------------------------------------------------------
   Step 5.52 — School Admin mobile Classes UX
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .split.gb-class-layout-mobile {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-directory,
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-editor-mobile {
    width: 100% !important;
    margin: 0 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-directory {
    padding: 16px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-directory > h2 {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-directory > p.muted {
    margin: 7px 0 14px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--sam-muted) !important;
  }

  .gb-class-mobile-toolbar {
    display: grid !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
  }
  .gb-class-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  .gb-class-summary > span {
    min-height: 72px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 1px !important;
    padding: 9px 7px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 14px !important;
    background: var(--sam-soft) !important;
    text-align: center !important;
  }
  .gb-class-summary b {
    font-size: 23px !important;
    line-height: 1 !important;
    color: var(--sam-text) !important;
  }
  .gb-class-summary small {
    font-size: 10px !important;
    line-height: 1.25 !important;
    color: var(--sam-muted) !important;
  }
  .gb-class-summary > span:nth-child(2) {
    background: color-mix(in srgb, #16a34a 7%, var(--sam-surface)) !important;
    border-color: color-mix(in srgb, #16a34a 18%, var(--sam-line)) !important;
  }
  .gb-class-summary > span:nth-child(3) {
    background: color-mix(in srgb, #f59e0b 8%, var(--sam-surface)) !important;
    border-color: color-mix(in srgb, #f59e0b 20%, var(--sam-line)) !important;
  }

  .gb-class-toolbar-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 126px !important;
    gap: 8px !important;
  }
  .gb-class-search {
    min-height: 48px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 13px !important;
    background: var(--sam-surface) !important;
  }
  .gb-class-search > span {
    font-size: 22px !important;
    color: var(--sam-muted) !important;
    transform: translateY(-1px);
  }
  body.gb-school-admin-mobile .gb-class-search input {
    min-height: 46px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 14px !important;
  }
  body.gb-school-admin-mobile .gb-class-filter {
    min-height: 48px !important;
    padding: 0 9px !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    background: var(--sam-soft) !important;
  }
  body.gb-school-admin-mobile .gb-class-add {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    background: var(--sam-brand) !important;
    color: #fff !important;
    border-color: var(--sam-brand) !important;
    font-weight: 800 !important;
  }

  .gb-class-source-table { display: none !important; }
  .gb-class-list {
    display: grid !important;
    gap: 9px !important;
  }
  .gb-class-card {
    display: grid !important;
    grid-template-columns: 48px minmax(0,1fr) !important;
    gap: 11px !important;
    padding: 12px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 16px !important;
    background: var(--sam-surface) !important;
    box-shadow: 0 5px 16px rgba(20,45,78,.04) !important;
  }
  .gb-class-card[hidden] { display: none !important; }
  .gb-class-card-icon {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    align-self: start !important;
    border-radius: 14px !important;
    background: var(--sam-brand-soft) !important;
    color: var(--sam-brand) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
  }
  .gb-class-card-main {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
  }
  .gb-class-card-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .gb-class-card-title strong {
    min-width: 0 !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    letter-spacing: -.015em !important;
    color: var(--sam-text) !important;
    overflow-wrap: anywhere !important;
  }
  .gb-class-status {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: var(--sam-soft) !important;
    color: var(--sam-muted) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    text-transform: capitalize !important;
  }
  .gb-class-status.is-active {
    background: color-mix(in srgb, #16a34a 10%, var(--sam-surface)) !important;
    color: #148348 !important;
  }
  .gb-class-card-main > small {
    display: block !important;
    font-size: 11px !important;
    color: var(--sam-muted) !important;
  }
  .gb-class-teacher {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    gap: 7px !important;
    align-items: baseline !important;
    margin-top: 5px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--sam-line) !important;
  }
  .gb-class-teacher span {
    font-size: 10px !important;
    font-weight: 750 !important;
    color: var(--sam-muted) !important;
  }
  .gb-class-teacher b {
    min-width: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: var(--sam-text) !important;
    overflow-wrap: anywhere !important;
  }
  .gb-class-card-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
    margin-top: 1px !important;
  }
  body.gb-school-admin-mobile .gb-class-card-actions :where(a,button) {
    width: 100% !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }
  body.gb-school-admin-mobile .gb-class-card-actions .gb-class-assign {
    background: var(--sam-brand) !important;
    color: #fff !important;
    border-color: var(--sam-brand) !important;
  }
  body.gb-school-admin-mobile .gb-class-card-actions .gb-class-edit {
    background: var(--sam-soft) !important;
    color: var(--sam-brand) !important;
    border-color: color-mix(in srgb,var(--sam-brand) 22%,var(--sam-line)) !important;
  }
  .gb-class-card-actions > :only-child { grid-column: 1 / -1 !important; }
  .gb-class-empty {
    display: grid !important;
    gap: 3px !important;
    place-items: center !important;
    min-height: 120px !important;
    padding: 18px !important;
    border: 1px dashed var(--sam-line) !important;
    border-radius: 15px !important;
    text-align: center !important;
    color: var(--sam-muted) !important;
  }
  .gb-class-empty[hidden] { display: none !important; }
  .gb-class-empty strong { color: var(--sam-text) !important; font-size: 14px !important; }
  .gb-class-empty span { font-size: 11px !important; }

  /* Focused Add / Edit workspace ------------------------------------------ */
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-editor-mobile {
    display: none !important;
    padding: 16px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"].gb-class-editor-active .gb-class-editor-mobile {
    display: block !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"].gb-class-editor-active .gb-class-directory {
    display: none !important;
  }
  .gb-class-editor-head {
    display: grid !important;
    grid-template-columns: 44px minmax(0,1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--sam-line) !important;
  }
  body.gb-school-admin-mobile .gb-class-editor-back {
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 13px !important;
    background: var(--sam-soft) !important;
    color: var(--sam-text) !important;
  }
  .gb-class-editor-head strong {
    display: block !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    color: var(--sam-text) !important;
  }
  .gb-class-editor-head small {
    display: block !important;
    margin-top: 2px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: var(--sam-muted) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-editor-mobile > h2 { display: none !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-editor-mobile form {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 11px !important;
    padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-editor-mobile form > input[type="hidden"] { display: none !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-editor-mobile form > label {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--sam-muted) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-editor-mobile form > label.gb-class-field-wide {
    grid-column: 1 / -1 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-editor-mobile form :where(input:not([type="hidden"]),select) {
    min-height: 48px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    background: var(--sam-surface) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-editor-mobile label small {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    color: var(--sam-muted) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-display-preview {
    grid-column: 1 / -1 !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid color-mix(in srgb,var(--sam-brand) 18%,var(--sam-line)) !important;
    border-radius: 12px !important;
    background: var(--sam-brand-soft) !important;
    color: var(--sam-muted) !important;
    font-size: 11px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-display-preview b {
    color: var(--sam-brand) !important;
    font-size: 13px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-submit {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 2px 0 0 !important;
    font-weight: 850 !important;
  }
}

@media (max-width: 370px) {
  .gb-class-toolbar-row { grid-template-columns: 1fr !important; }
  .gb-class-summary > span { padding-inline: 5px !important; }
  .gb-class-summary b { font-size: 20px !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-editor-mobile form { grid-template-columns: 1fr !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-editor-mobile form > label.gb-class-field-wide,
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-display-preview,
  body.gb-school-admin-mobile[data-gb-admin-page="classes"] .gb-class-submit { grid-column: auto !important; }
}

@media (max-width: 820px) {
  /* Subjects — dedicated School Admin phone workspace --------------------- */
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-stats {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-stats > article {
    min-height: 92px !important;
    padding: 12px 9px !important;
    display: grid !important;
    align-content: center !important;
    gap: 4px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 16px !important;
    background: var(--sam-surface) !important;
    box-shadow: var(--sam-shadow) !important;
    text-align: left !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-stats > article:nth-child(2) {
    background: color-mix(in srgb,#ecfdf5 78%,var(--sam-surface)) !important;
    border-color: color-mix(in srgb,#86efac 44%,var(--sam-line)) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-stats > article:nth-child(3) {
    background: color-mix(in srgb,var(--sam-brand-soft) 70%,var(--sam-surface)) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-stats span {
    order: 2 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    color: var(--sam-muted) !important;
    font-weight: 800 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-stats strong {
    order: 1 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: var(--sam-text) !important;
    letter-spacing: -.02em !important;
  }

  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-layout {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 12px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-directory,
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile {
    min-width: 0 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-directory {
    padding: 16px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-directory > .section-heading {
    margin-bottom: 10px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-directory > .section-heading h2 {
    font-size: 22px !important;
  }

  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-filters.gb-subject-filters {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-filters.gb-subject-filters > input[name="search"] {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    background: var(--sam-soft) !important;
    border: 1px solid var(--sam-line) !important;
    color: var(--sam-text) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-filters.gb-subject-filters > select {
    min-height: 46px !important;
    padding: 0 12px !important;
    background: var(--sam-soft) !important;
    border: 1px solid var(--sam-line) !important;
    color: var(--sam-text) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-filters.gb-subject-filters > button {
    grid-column: 1 / 2 !important;
    min-height: 44px !important;
    margin: 0 !important;
    width: 100% !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-reset {
    grid-column: 2 / 3 !important;
    display: grid !important;
    place-items: center !important;
    min-height: 44px !important;
    width: 100% !important;
    padding: 9px 12px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 13px !important;
    background: var(--sam-soft) !important;
    color: var(--sam-text) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 13px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-add {
    width: 100% !important;
    min-height: 46px !important;
    margin-top: 2px !important;
    border: 0 !important;
    background: var(--sam-brand) !important;
    color: #fff !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 18px color-mix(in srgb,var(--sam-brand) 24%,transparent) !important;
  }

  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-source-table {
    display: none !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-list {
    display: grid !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-card {
    display: grid !important;
    grid-template-columns: 46px minmax(0,1fr) !important;
    gap: 11px !important;
    padding: 13px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 17px !important;
    background: var(--sam-surface) !important;
    box-shadow: 0 5px 16px rgba(20,45,78,.04) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-card[hidden] { display: none !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-icon {
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    align-self: start !important;
    border-radius: 14px !important;
    background: var(--sam-brand-soft) !important;
    color: var(--sam-brand) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-main {
    display: grid !important;
    gap: 9px !important;
    min-width: 0 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-card-title {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 8px !important;
    align-items: start !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-card-title strong {
    font-size: 16px !important;
    line-height: 1.2 !important;
    color: var(--sam-text) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-card-title small {
    display: block !important;
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: var(--sam-muted) !important;
    font-weight: 800 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-status {
    display: inline-grid !important;
    place-items: center !important;
    min-height: 28px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: var(--sam-soft) !important;
    color: var(--sam-muted) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-status.is-active {
    background: #e8fbf1 !important;
    color: #087a45 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-assignment-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-assignment-summary span {
    color: var(--sam-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-assignment-summary b {
    color: var(--sam-text) !important;
    font-size: 12px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-class-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-class-chip {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: var(--sam-soft) !important;
    border: 1px solid var(--sam-line) !important;
    color: var(--sam-text) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-more {
    min-height: 28px !important;
    padding: 5px 9px !important;
    border: 1px dashed var(--sam-line) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--sam-brand) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-actions {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
    margin-top: 1px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-actions :where(a,button) {
    min-height: 40px !important;
    padding: 8px 10px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 11px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-edit {
    background: var(--sam-brand-soft) !important;
    border: 1px solid color-mix(in srgb,var(--sam-brand) 28%,var(--sam-line)) !important;
    color: var(--sam-brand) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-manage {
    background: var(--sam-brand) !important;
    border: 1px solid var(--sam-brand) !important;
    color: #fff !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-empty {
    display: grid !important;
    gap: 4px !important;
    padding: 18px 14px !important;
    border: 1px dashed var(--sam-line) !important;
    border-radius: 15px !important;
    background: var(--sam-soft) !important;
    color: var(--sam-muted) !important;
    text-align: center !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-empty[hidden] { display: none !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-empty strong { color: var(--sam-text) !important; font-size: 14px !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-empty span { font-size: 11px !important; }

  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-editor.gb-subject-editor-mobile {
    display: none !important;
    padding: 16px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"].gb-subject-editor-active .subject-editor.gb-subject-editor-mobile {
    display: block !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"].gb-subject-editor-active :where(.gb-subject-directory,.subject-stats) {
    display: none !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-head {
    display: grid !important;
    grid-template-columns: 42px minmax(0,1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    margin-bottom: 15px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-back {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 12px !important;
    background: var(--sam-soft) !important;
    color: var(--sam-text) !important;
    text-decoration: none !important;
    font-size: 20px !important;
    font-weight: 900 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-head strong {
    display: block !important;
    font-size: 19px !important;
    line-height: 1.15 !important;
    color: var(--sam-text) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-head small {
    display: block !important;
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: var(--sam-muted) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile > h2 { display: none !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile form {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 11px !important;
    padding-bottom: 24px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile form > input[type="hidden"] { display: none !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile form > label {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    color: var(--sam-text) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile form > label:first-of-type {
    grid-column: 1 / -1 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile form :where(input:not([type="hidden"]),select) {
    min-height: 48px !important;
    padding: 0 12px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile fieldset {
    grid-column: 1 / -1 !important;
    margin: 2px 0 0 !important;
    padding: 13px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 16px !important;
    background: var(--sam-soft) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile fieldset legend {
    padding: 0 6px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: var(--sam-text) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile fieldset > p.muted {
    margin: 2px 0 9px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-class-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 45px !important;
    padding: 9px 11px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 12px !important;
    background: var(--sam-surface) !important;
    color: var(--sam-text) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-class-toggle span:last-child {
    color: var(--sam-brand) !important;
    white-space: nowrap !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-class-controls {
    display: grid !important;
    gap: 9px !important;
    margin-top: 10px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] fieldset.gb-subject-classes-collapsed .gb-subject-class-controls {
    display: none !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .class-quick-select {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .class-quick-select::-webkit-scrollbar { display: none; }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .class-quick-select button {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    font-size: 10px !important;
    border-radius: 999px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .class-check-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .class-check-grid label {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 9px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 11px !important;
    background: var(--sam-surface) !important;
    color: var(--sam-text) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .class-check-grid input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .class-check-grid label:has(input:checked) {
    border-color: color-mix(in srgb,var(--sam-brand) 55%,var(--sam-line)) !important;
    background: var(--sam-brand-soft) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile form > .actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 8px !important;
    margin: 2px 0 0 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile form > .actions :where(button,a) {
    width: 100% !important;
    min-height: 47px !important;
  }

  html[data-theme="dark"] body.gb-school-admin-mobile[data-gb-admin-page="subjects"] :where(
    .subject-stats > article,.gb-subject-card,.gb-subject-editor-mobile,.gb-subject-editor-mobile fieldset,
    .gb-subject-class-toggle,.gb-subject-class-controls .class-check-grid label
  ) {
    background: var(--sam-surface) !important;
    border-color: var(--sam-line) !important;
  }
  html[data-theme="dark"] body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-status.is-active {
    background: rgba(34,197,94,.14) !important;
    color: #8ee2b3 !important;
  }

}

@media (max-width: 410px) {
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-stats { gap: 6px !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-stats > article { min-height: 86px !important; padding: 10px 7px !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-stats strong { font-size: 21px !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-filters.gb-subject-filters { grid-template-columns: 1fr !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-filters.gb-subject-filters > input[name="search"],
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .subject-filters.gb-subject-filters > button,
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-reset { grid-column: auto !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-actions { grid-template-columns: 1fr !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile form { grid-template-columns: 1fr !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile form > label:first-of-type,
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile fieldset,
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .gb-subject-editor-mobile form > .actions { grid-column: auto !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="subjects"] .class-check-grid { grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------------------------------
   Step 5.52 — School Admin mobile Promotions workspace
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .page-head {
    margin-bottom: 10px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .page-head h1 {
    font-size: 31px !important;
  }

  /* Step 1: compact promotion setup --------------------------------------- */
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .promotion-controls.gb-promotion-setup {
    padding: 15px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .promotion-controls.gb-promotion-setup > h2 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.12 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .promotion-controls.gb-promotion-setup > p.muted {
    margin: 7px 0 13px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-setup-context {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 0 12px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-setup-context span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 29px !important;
    padding: 5px 9px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 999px !important;
    background: var(--sam-soft) !important;
    color: var(--sam-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .promotion-controls .filters.gb-promotion-setup-form {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 9px !important;
    padding: 0 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .promotion-controls .filters.gb-promotion-setup-form > label {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    color: var(--sam-muted) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .promotion-controls .filters.gb-promotion-setup-form > label.gb-promotion-current-class {
    grid-column: 1 / -1 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .promotion-controls .filters.gb-promotion-setup-form > label.gb-promotion-setup-destination {
    display: none !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .promotion-controls .filters.gb-promotion-setup-form select {
    min-height: 46px !important;
    padding: 8px 11px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .promotion-controls .filters.gb-promotion-setup-form > button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 1px 0 0 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  /* Step 2: learner selection workspace ---------------------------------- */
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-roster {
    padding: 15px !important;
    border-radius: 18px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-roster > .section-heading {
    margin-bottom: 11px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-roster > .section-heading h2 {
    font-size: 22px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-roster > .section-heading p {
    font-size: 12px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-route {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
    padding: 10px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 14px !important;
    background: var(--sam-soft) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-route > span:not(.gb-promotion-route-arrow) {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-route small {
    color: var(--sam-muted) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-route b {
    color: var(--sam-text) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-route-arrow {
    color: var(--sam-brand) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }

  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-destination {
    display: grid !important;
    gap: 6px !important;
    margin: 0 0 11px !important;
    padding: 12px !important;
    border: 1px solid color-mix(in srgb,var(--sam-brand) 25%,var(--sam-line)) !important;
    border-radius: 14px !important;
    background: var(--sam-brand-soft) !important;
    color: var(--sam-text) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-destination::before {
    content: "2 · Choose destination";
    color: var(--sam-brand) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-destination select {
    min-height: 47px !important;
    background: var(--sam-surface) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-complete-note {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 0 11px !important;
    padding: 10px 11px !important;
    border: 1px solid rgba(217,119,6,.24) !important;
    border-radius: 12px !important;
    background: rgba(245,158,11,.09) !important;
    color: #92400e !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    font-weight: 750 !important;
  }
  html[data-theme="dark"] body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-complete-note {
    color: #ffd392 !important;
    background: rgba(245,158,11,.12) !important;
    border-color: rgba(245,158,11,.28) !important;
  }

  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-toolbar {
    display: grid !important;
    gap: 9px !important;
    margin: 0 0 10px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-summary {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-summary > span {
    display: grid !important;
    align-content: center !important;
    min-height: 66px !important;
    padding: 9px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 13px !important;
    background: var(--sam-soft) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-summary b {
    color: var(--sam-text) !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-summary small {
    margin-top: 5px !important;
    color: var(--sam-muted) !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-toolbar-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto auto !important;
    gap: 7px !important;
    align-items: stretch !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-search {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-search > span {
    position: absolute !important;
    left: 11px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    color: var(--sam-muted) !important;
    font-size: 17px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-search input {
    min-height: 43px !important;
    padding: 8px 10px 8px 35px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] :where(.gb-promotion-select-all,.gb-promotion-clear) {
    min-height: 43px !important;
    padding: 7px 10px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-select-all {
    background: var(--sam-brand-soft) !important;
    color: var(--sam-brand) !important;
    border: 1px solid color-mix(in srgb,var(--sam-brand) 30%,var(--sam-line)) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-clear {
    background: var(--sam-surface) !important;
    color: var(--sam-muted) !important;
    border: 1px solid var(--sam-line) !important;
  }

  /* Do not squeeze the desktop learner table onto a phone. */
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-source-table,
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-source-actions {
    display: none !important;
  }

  /* Step 5.52: the mobile toolbar owns bulk-selection controls. Hide the
     original server-rendered Select All / Clear action row even if older
     WebKit fails to tag it through :scope-based JavaScript. */
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-roster > form > .actions,
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-roster form > .gb-promotion-source-actions {
    display: none !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-list {
    display: grid !important;
    gap: 8px !important;
    margin-top: 4px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0,1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 82px !important;
    padding: 11px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 14px !important;
    background: var(--sam-surface) !important;
    transition: border-color .15s ease, background .15s ease, transform .15s ease !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-card.is-selected {
    border-color: color-mix(in srgb,var(--sam-brand) 48%,var(--sam-line)) !important;
    background: color-mix(in srgb,var(--sam-brand-soft) 70%,var(--sam-surface)) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-avatar {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 13px !important;
    background: var(--sam-brand-soft) !important;
    color: var(--sam-brand) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-identity {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-identity strong {
    color: var(--sam-text) !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-identity small {
    color: var(--sam-muted) !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-gender {
    display: inline-flex !important;
    align-items: center !important;
    justify-self: start !important;
    min-height: 24px !important;
    margin-top: 2px !important;
    padding: 3px 7px !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 999px !important;
    background: var(--sam-soft) !important;
    color: var(--sam-muted) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-check-wrap {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    border: 1px solid var(--sam-line) !important;
    border-radius: 12px !important;
    background: var(--sam-soft) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-check {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
    accent-color: var(--sam-brand) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-card.is-selected .gb-promotion-check-wrap {
    border-color: color-mix(in srgb,var(--sam-brand) 45%,var(--sam-line)) !important;
    background: var(--sam-brand-soft) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-empty {
    display: grid !important;
    gap: 4px !important;
    padding: 18px 13px !important;
    border: 1px dashed var(--sam-line) !important;
    border-radius: 14px !important;
    text-align: center !important;
    background: var(--sam-soft) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-empty strong { color: var(--sam-text) !important; font-size: 13px !important; }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-empty span { color: var(--sam-muted) !important; font-size: 10px !important; }

  /* Step 3: sticky review/action bar above installed-app navigation. */
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-actionbar {
    position: sticky !important;
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    z-index: 12 !important;
    display: grid !important;
    grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr) !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 12px 0 0 !important;
    padding: 9px !important;
    border: 1px solid color-mix(in srgb,var(--sam-brand) 24%,var(--sam-line)) !important;
    border-radius: 15px !important;
    background: color-mix(in srgb,var(--sam-surface) 92%,transparent) !important;
    box-shadow: 0 10px 28px rgba(15,39,68,.14) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-action-copy {
    display: grid !important;
    gap: 2px !important;
    padding-left: 2px !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-action-copy b {
    color: var(--sam-text) !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-action-copy small {
    color: var(--sam-muted) !important;
    font-size: 8px !important;
    line-height: 1.25 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-submit {
    width: 100% !important;
    min-height: 47px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-submit:disabled {
    opacity: 1 !important;
    background: color-mix(in srgb,var(--sam-muted) 15%,var(--sam-soft)) !important;
    color: color-mix(in srgb,var(--sam-muted) 75%,transparent) !important;
    border-color: var(--sam-line) !important;
  }

  html[data-theme="dark"] body.gb-school-admin-mobile[data-gb-admin-page="promotions"] :where(
    .promotion-controls.gb-promotion-setup,.gb-promotion-roster,.gb-promotion-card,.gb-promotion-actionbar,
    .gb-promotion-destination select,.gb-promotion-check-wrap
  ) {
    background: var(--sam-surface) !important;
    border-color: var(--sam-line) !important;
  }
  html[data-theme="dark"] body.gb-school-admin-mobile[data-gb-admin-page="promotions"] :where(
    .gb-promotion-route,.gb-promotion-summary > span,.gb-promotion-gender,.gb-promotion-empty
  ) {
    background: var(--sam-soft) !important;
    border-color: var(--sam-line) !important;
  }
}

@media (max-width: 410px) {
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .promotion-controls .filters.gb-promotion-setup-form {
    grid-template-columns: 1fr !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .promotion-controls .filters.gb-promotion-setup-form > label.gb-promotion-current-class,
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .promotion-controls .filters.gb-promotion-setup-form > button {
    grid-column: auto !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-toolbar-row {
    grid-template-columns: minmax(0,1fr) auto !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-clear {
    grid-column: 2 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-search {
    grid-row: 1 / span 2 !important;
  }
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] .gb-promotion-actionbar {
    grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr) !important;
  }
}

@media (max-width: 820px) {
  body.gb-school-admin-mobile[data-gb-admin-page="promotions"] :where(.gb-promotion-card,.gb-promotion-empty,.gb-promotion-complete-note)[hidden] {
    display: none !important;
  }
}