/**
 * EDU — Account / role dashboard pages (≤820px)
 * Balanced gutters (via app_native_mobile), one card per row, no double padding.
 */

@media (max-width: 820px) {
  /* —— Inner dash roots (padding lives on shell) —— */
  .company-dash,
  html.edu-view-web .edu-web-content .company-dash,
  html.edu-view-web .edu-web-content .company-train-app,
  html.edu-view-web .edu-web-content .company-contract-app,
  html.edu-view-web .edu-web-content .company-gx-readiness-app,
  .student-dash,
  html.edu-view-web .edu-web-content .student-dash,
  .trainer-dash,
  html.edu-view-web .edu-web-content .trainer-dash,
  .settings-app,
  html.edu-view-web .edu-web-content .settings-app {
    max-width: 100% !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
  }

  .edu-company-mode .company-dash,
  .edu-company-mode .company-page-app.company-dash,
  .edu-trainer-mode .trainer-dash.trainer-home-app,
  .edu-parent-mode .parent-page-app,
  html.edu-view-web .edu-parent-mode .parent-page-app {
    padding-top: 0 !important;
    padding-inline: 0 !important;
    max-width: 100% !important;
  }

  /* —— Company dashboard —— */
  .company-dash__welcome {
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 14px;
    gap: 12px;
  }

  .company-dash__welcome-actions {
    flex-direction: column;
    width: 100%;
  }

  .company-dash__welcome-actions .company-dash__btn {
    width: 100%;
  }

  .company-dash__metrics,
  html.edu-view-web .edu-web-content .company-dash__metrics,
  .company-gx-readiness-app .company-dash__metrics,
  .company-dash__report-summary {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .company-dash__quick,
  html.edu-view-web .edu-web-content .company-dash__quick {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .company-dash__card {
    border-radius: 16px;
    margin-bottom: 14px;
  }

  .company-dash__card-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .company-dash__actions,
  .company-dash__code-row {
    flex-direction: column;
    align-items: stretch;
  }

  .company-dash__btn {
    width: 100%;
  }

  .company-dash__bulk-code-grid {
    grid-template-columns: 1fr !important;
  }

  .company-dash__employee {
    grid-template-columns: 1fr !important;
  }

  .company-dash__employee-stats {
    grid-column: 1 / -1;
  }

  /* Company training / contract / gx hero subpages */
  .company-train-app__hero-body,
  .company-gx-readiness-app__hero-body,
  .company-contract-app .company-train-app__hero-body {
    padding: 16px;
    border-radius: 16px;
  }

  .company-train-app__row,
  .company-train-app__assign {
    flex-direction: column;
    align-items: stretch;
  }

  .company-train-app__row .company-dash__btn,
  .company-train-app__assign .company-dash__btn {
    width: 100%;
  }

  .company-train-app__request-actions {
    gap: 10px;
  }

  .company-train-app__invoice {
    flex-direction: column;
    align-items: stretch;
  }

  .company-train-app__invoice > strong {
    margin-inline-start: 0;
  }

  /* Company notifications */
  .company-notif-app,
  html.edu-view-web .edu-web-content .company-notif-app {
    padding-inline: 0 !important;
    padding-bottom: 0 !important;
  }

  .company-notif-topbar {
    margin-bottom: 12px;
  }

  .company-notif-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin-bottom: 12px;
  }

  .company-notif-filter {
    flex-shrink: 0;
  }

  .company-notif-quick,
  .company-quick.company-notif-quick {
    flex-direction: column;
    gap: 8px;
  }

  .company-notif-quick a,
  .company-notif-quick .company-quick__link {
    width: 100%;
  }

  /* —— Settings —— */
  .settings-app__hero-body {
    padding: 16px;
    border-radius: 16px;
  }

  .settings-app__panel {
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 14px;
  }

  .settings-app__tabs {
    gap: 4px;
  }

  /* —— Profile (Coursera layout) —— */
  .crs-acct,
  html.edu-view-web .edu-web-content .crs-acct {
    padding: 0 !important;
    max-width: 100% !important;
  }

  .crs-acct__layout {
    gap: 12px;
  }

  .crs-acct__quick {
    grid-template-columns: 1fr !important;
  }

  .crs-acct__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .crs-acct__head-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .crs-acct__btn {
    width: 100%;
    text-align: center;
  }

  /* —— Student dashboard —— */
  .student-dash__welcome {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 14px;
  }

  .student-dash__welcome-actions {
    flex-direction: column;
    width: 100%;
  }

  .student-dash__welcome-actions .student-dash__btn {
    width: 100%;
  }

  .student-dash__metrics {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .student-dash__body {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .student-dash__courses {
    grid-template-columns: 1fr !important;
  }

  .student-dash__course {
    grid-template-columns: 1fr !important;
  }

  .student-dash__links {
    flex-direction: column;
    gap: 8px;
  }

  .student-dash__links a {
    width: 100%;
    flex: none;
    min-width: 0;
  }

  /* —— Trainer dashboard —— */
  .trainer-dash__welcome {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .trainer-dash__welcome-actions {
    flex-direction: column;
    width: 100%;
  }

  .trainer-dash__welcome-actions .trainer-dash__btn {
    width: 100%;
  }

  .trainer-dash__metrics {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .trainer-dash__body {
    grid-template-columns: 1fr !important;
  }

  .trainer-dash__quick {
    grid-template-columns: 1fr !important;
  }

  /* —— Parent dashboard —— */
  .parent-home-app .parent-hero__inner,
  .parent-page-app .parent-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .parent-home-app .parent-hero .parent-hero-actions,
  .parent-home-app .parent-hero .edu-hero-actions,
  .parent-page-app .parent-hero .parent-hero-actions,
  .parent-page-app .parent-hero .edu-hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .parent-home-app .parent-hero .edu-btn,
  .parent-page-app .parent-hero .edu-btn {
    width: 100%;
  }

  .parent-quick-grid--home,
  html.edu-view-web .parent-quick-grid--home,
  .parent-home-app .parent-quick-grid--home {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .parent-children-grid,
  .parent-home-app .parent-children-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .parent-stats--cards,
  .parent-stats--home {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* —— Child pages —— */
  .child-home-app .child-quick-grid,
  .child-page-app .child-quick-grid {
    grid-template-columns: 1fr !important;
  }
}