/*
 * Sudan First Academy v2.20.20
 * Global Responsive Width & Overflow Integrity
 *
 * Additive presentation-only guard. This stylesheet deliberately changes no
 * application state, routing, attendance, scheduling, permissions or data.
 */

/* 1) Application shells: use all width offered by the page instead of the
      historical 1180/1240/1440/1500px caps. Keep small, balanced inner air. */
.sfa-sp,
.sfa-fm,
.sfa-trainer-app,
.sfa-room-page,
.sfa-login-wrap,
.sfa-auth-shell,
.sfa-px,
.sfa-px-shell{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}

.sfa-sp,
.sfa-fm,
.sfa-trainer-app,
.sfa-px{
  margin-inline:0!important;
}

.sfa-sp{padding-inline:clamp(10px,1.15vw,16px)!important}
.sfa-fm{padding-inline:clamp(10px,1.15vw,16px)!important}
.sfa-trainer-app{padding-inline:clamp(10px,1.15vw,16px)!important}
.sfa-room-page{padding-inline:clamp(8px,1vw,14px)!important}
.sfa-px{padding-inline:clamp(8px,1vw,14px)!important}

/* Session pages had a second 1180px cap inside the full-page background. */
.sfa-room-page .sfa-room-shell{
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  box-sizing:border-box!important;
}

/* Program / path experience pages also had an inline 1180px cap. */
.sfa-px-shell>.sfa-px{
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
}


/* Public Academy landing sections already span the page; remove only the old
   content cap so cards and catalogs can benefit from wide screens too. */
.sfa .sfa-container{
  width:100%!important;
  max-width:none!important;
  padding-inline:clamp(12px,1.5vw,24px)!important;
  box-sizing:border-box!important;
}

/* 2) Critical grid/flex descendants are allowed to shrink. This prevents a
      long label, URL, select or native date control from widening the page. */
.sfa-sp :where(.sfa-app-content,.sfa-sp-grid>*,.sfa-sp-grid main,.sfa-sp-grid aside,.sfa-sp-card,.sfa-lo-student,.sfa-message-layout>*),
.sfa-fm :where(.sfa-fm-head>*,.sfa-fm-content,.sfa-fm-content>*,.sfa-fm-toolbar>*,.sfa-panel-head>*,.sfa-record-grid>*,.sfa-report-grid>*,.sfa-detail-grid>*,.sfa-schedule-fields>*,.sfa-smart-panel>div>*,.sfa-room-center,.sfa-room-center>*,.sfa-room-resource-fields>*,.sfa-attendance-app>*,.sfa-attendance-stage,.sfa-att-session-panel),
.sfa-trainer-app :where(header>*,nav,.trainer-grid>*,.trainer-stats>*,.trainer-attendance>div>*),
.sfa-room-page :where(.sfa-room-head>*,.sfa-room-grid>*,.sfa-room-main-card,.sfa-room-presence-card,.sfa-room-session-meta>*,.sfa-room-resources,.sfa-room-resource-grid>*),
.sfa-px :where(.sfa-px-hero>*,.sfa-px-grid>*,.sfa-px-card,.sfa-px-meta>*,.sfa-px-trainers>*,.sfa-catalog>*){
  min-width:0!important;
  max-width:100%;
  box-sizing:border-box;
}

/* 3) Form controls: never escape their own column. Width is only forced on
      mobile so desktop toolbars retain their existing compact behaviour. */
.sfa-sp :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea),
.sfa-fm :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea),
.sfa-trainer-app :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea),
.sfa-room-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea),
.sfa-login-wrap :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea),
.sfa-auth-shell :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea),
.sfa-px :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea){
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Native media and embedded content must stay inside Academy cards. */
.sfa-sp :where(img,video,canvas,iframe),
.sfa-fm :where(img,video,canvas,iframe),
.sfa-trainer-app :where(img,video,canvas,iframe),
.sfa-room-page :where(img,video,canvas,iframe),
.sfa-px :where(img,video,canvas,iframe){max-width:100%!important}

/* 4) Tables remain information-rich; scroll the table wrapper, never the page. */
.sfa-sp :where([class*="table-wrap"],.trainer-table,.trainer-report-table),
.sfa-fm :where([class*="table-wrap"],.trainer-table,.trainer-report-table),
.sfa-trainer-app :where([class*="table-wrap"],.trainer-table,.trainer-report-table),
.sfa-room-page :where([class*="table-wrap"],.trainer-table,.trainer-report-table),
.sfa-px :where([class*="table-wrap"],.trainer-table,.trainer-report-table){
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box!important;
}

/* Links / long identifiers should wrap inside cards rather than force width. */
.sfa-sp :where(.sfa-sp-card,.sfa-message-center,.sfa-learning-hub),
.sfa-fm :where(.sfa-fm-content,.sfa-record-card,.sfa-schedule-row,.sfa-room-learning-hub),
.sfa-trainer-app :where(.trainer-panel,.trainer-grid>article),
.sfa-room-page :where(.sfa-room-shell,.sfa-room-main-card,.sfa-room-resource-grid article),
.sfa-px :where(.sfa-px-card,.sfa-catalog article){
  overflow-wrap:anywhere;
}

/* 5) Phone layout: escape narrow WordPress/theme columns symmetrically and
      leave only a 4px viewport gutter on either side. */
@media (max-width:760px){
  .sfa-sp,
  .sfa-fm,
  .sfa-trainer-app,
  .sfa-room-page,
  .sfa-login-wrap,
  .sfa-auth-shell,
  .sfa-px{
    width:calc(100vw - 8px)!important;
    max-width:calc(100vw - 8px)!important;
    margin-inline:calc(50% - 50vw + 4px)!important;
    box-sizing:border-box!important;
  }

  @supports (width:100dvw){
    .sfa-sp,
    .sfa-fm,
    .sfa-trainer-app,
    .sfa-room-page,
    .sfa-login-wrap,
    .sfa-auth-shell,
    .sfa-px{
      width:calc(100dvw - 8px)!important;
      max-width:calc(100dvw - 8px)!important;
      margin-inline:calc(50% - 50dvw + 4px)!important;
    }
  }

  .sfa-sp,
  .sfa-fm,
  .sfa-trainer-app,
  .sfa-room-page,
  .sfa-px{padding-inline:4px!important}
  .sfa .sfa-container{padding-inline:6px!important}

  .sfa-room-page .sfa-room-shell{padding-inline:10px!important}

  .sfa-sp :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),select,textarea),
  .sfa-fm :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),select,textarea),
  .sfa-trainer-app :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),select,textarea),
  .sfa-room-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),select,textarea),
  .sfa-login-wrap :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),select,textarea),
  .sfa-auth-shell :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),select,textarea),
  .sfa-px :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),select,textarea){
    width:100%!important;
  }

  /* Toolbars and headings may wrap; they must never widen the viewport. */
  .sfa-sp :where(.sfa-app-topbar,.sfa-card-title,.sfa-attendance-roster-head),
  .sfa-fm :where(.sfa-fm-head,.sfa-fm-toolbar,.sfa-panel-head,.sfa-schedule-actions,.sfa-schedule-footer-actions,.sfa-room-report-head),
  .sfa-trainer-app :where(header,.trainer-report-head,.trainer-smart-head),
  .sfa-room-page :where(.sfa-room-head,.sfa-room-resource-top),
  .sfa-px :where(.sfa-trainer-hero,.sfa-px-card){
    max-width:100%!important;
  }

  /* Prevent long action rows from being the source of horizontal page scroll. */
  .sfa-sp :where(.sfa-cert-actions,.sfa-att-page-nav),
  .sfa-fm :where(.sfa-detail-actions,.sfa-schedule-footer-actions>div,.sfa-room-footer-actions,.sfa-room-recording-actions,.sfa-room-live-ops-actions),
  .sfa-trainer-app :where(.trainer-report-card-head>div:last-child),
  .sfa-room-page :where(.sfa-room-admin-actions,.sfa-room-resource-actions){
    max-width:100%!important;
    flex-wrap:wrap;
  }
}

@media (max-width:420px){
  .sfa-sp,
  .sfa-fm,
  .sfa-trainer-app,
  .sfa-room-page,
  .sfa-login-wrap,
  .sfa-auth-shell,
  .sfa-px{
    width:calc(100vw - 6px)!important;
    max-width:calc(100vw - 6px)!important;
    margin-inline:calc(50% - 50vw + 3px)!important;
  }
  @supports (width:100dvw){
    .sfa-sp,
    .sfa-fm,
    .sfa-trainer-app,
    .sfa-room-page,
    .sfa-login-wrap,
    .sfa-auth-shell,
    .sfa-px{
      width:calc(100dvw - 6px)!important;
      max-width:calc(100dvw - 6px)!important;
      margin-inline:calc(50% - 50dvw + 3px)!important;
    }
  }
}


/* v2.20.29 — Manager desktop host-width integrity.
   The manager shortcode can live inside a theme content column. Expand only the
   ancestor chain that actually contains .sfa-fm; no site header, sibling widget,
   login, student, trainer or business logic is touched. */
@media (min-width:981px){
  body:has(.sfa-fm) :is(
    .site,
    .site-content,
    .content-area,
    .site-main,
    main,
    article,
    .entry-content,
    .wp-block-post-content,
    .elementor,
    .elementor-section,
    .elementor-container,
    .elementor-column,
    .elementor-widget-wrap,
    .elementor-widget-container,
    .ast-container,
    .container,
    .container-fluid
  ):has(.sfa-fm){
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    float:none!important;
    box-sizing:border-box!important;
  }

  body:has(.sfa-fm) :is(
    .content-area,
    .site-main,
    main,
    article,
    .entry-content,
    .wp-block-post-content,
    .elementor-column,
    .elementor-widget-wrap,
    .elementor-widget-container,
    .ast-container,
    .container,
    .container-fluid
  ):has(.sfa-fm){
    margin-inline:0!important;
  }
}