.s360-grid,
.s360-grid {
  display: grid;
  gap: var(--s360-layout-grid-gap);
}

.s360-grid-2,
.s360-two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.s360-grid-3,
.s360-three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.s360-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.s360-grid-auto,
.s360-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--s360-layout-grid-gap);
}

.s360-grid-auto-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--s360-layout-grid-gap-lg);
}

.s360-grid-auto-320 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--s360-layout-grid-gap-lg);
}

.s360-grid-auto-220 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--s360-layout-grid-gap);
}

.s360-cluster,
.s360-cluster-between {
  display: flex;
  align-items: center;
  gap: var(--s360-layout-cluster-gap);
  flex-wrap: wrap;
}

.s360-cluster-between {
  justify-content: space-between;
}

.s360-page-shell,
.s360-ui-shell,
.s360-student-workspace,
.s360-admin-dashboard,
.s360-admissions-workspace,
.s360-custom-fields-page {
  display: flex;
  flex-direction: column;
  gap: var(--s360-layout-page-gap);
}

.s360-page-shell,
.s360-admin-dashboard,
.s360-admissions-workspace,
.s360-custom-fields-page,
.s360-student-workspace {
  max-width: var(--s360-layout-content-max);
}

/* School 360 admin page width standardization (UI-W3).
 * Admin module pages now use full available WordPress admin width.
 * Non-admin/public/mobile/print component widths are not changed here.
 */
.wp-admin .s360-admin-page-shell,
.wp-admin .wrap.s360-wrap,
.wp-admin .wrap.s360-admin-page,
.wp-admin .wrap.s360-admin-wrap,
.wp-admin .wrap[class*="s360-"],
.wp-admin .wrap[class*="school360"],
.wp-admin .s360-page-shell,
.wp-admin .s360-ui-shell,
.wp-admin .s360-admin-page,
.wp-admin .s360-admin-wrap,
.wp-admin .s360-admin-dashboard,
.wp-admin .s360-admissions-workspace,
.wp-admin .s360-custom-fields-page,
.wp-admin .s360-student-workspace {
  width: 100%;
  max-width: var(--s360-layout-admin-page-max, none);
  min-width: 0;
  box-sizing: border-box;
}

.s360-page-shell--narrow,
.s360-ui-shell--narrow {
  max-width: var(--s360-layout-content-max-narrow);
}

.s360-section,
.s360-page-section {
  margin-bottom: var(--s360-space-xl);
}

.s360-page-section:last-child,
.s360-section:last-child {
  margin-bottom: 0;
}

.s360-stack-xs > * + * { margin-top: var(--s360-space-xs); }
.s360-stack-sm > * + * { margin-top: var(--s360-space-sm); }
.s360-stack-md > * + * { margin-top: var(--s360-space-md); }
.s360-stack-lg > * + * { margin-top: var(--s360-space-lg); }
.s360-stack-xl > * + * { margin-top: var(--s360-space-xl); }

.s360-grid-2-compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s360-layout-density-compact);
}

.s360-grid-4-stat {
  display: grid;
  grid-template-columns: repeat(4, minmax(min(100%, 120px), 1fr));
  gap: var(--s360-space-sm);
}

.s360-grid-form-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(min(100%, 280px), .85fr);
  gap: var(--s360-layout-sidebar-gap);
  align-items: start;
}

.s360-grid-sidebar-main {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(min(100%, 280px), 1.05fr);
  gap: var(--s360-layout-sidebar-gap);
  align-items: start;
}

.s360-grid-sidebar-main-alt {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(min(100%, 260px), .8fr);
  gap: var(--s360-layout-sidebar-gap);
  align-items: start;
}

.s360-filter-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(min(100%, 160px), 1fr));
  gap: var(--s360-space-sm);
  align-items: end;
}

.s360-grid-school-shell {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(min(100%, 260px), 1fr);
  gap: var(--s360-layout-grid-gap-lg);
  align-items: start;
}

.s360-custom-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s360-space-md);
}

.s360-custom-layout-heading {
  grid-column: 1 / -1;
  font-weight: var(--s360-font-weight-semibold);
  margin-top: var(--s360-space-2xs);
}

.s360-custom-layout-item {
  border: 1px solid var(--s360-color-border);
  border-radius: var(--s360-radius-lg);
  padding: var(--s360-layout-density-comfy);
  background: var(--s360-color-surface);
}

.s360-custom-layout-label {
  margin-bottom: var(--s360-space-xs);
  font-weight: var(--s360-font-weight-semibold);
}

.s360-custom-layout-control .description {
  margin-top: 6px;
}

.s360-layout-width-full {
  grid-column: 1 / -1;
}

.s360-layout-width-half.s360-layout-column-left {
  grid-column: 1;
}

.s360-layout-width-half.s360-layout-column-right {
  grid-column: 2;
}

@media (max-width: 1100px) {
  .s360-grid-2,
  .s360-grid-3,
  .s360-grid-4,
  .s360-two-col,
  .s360-three-col,
  .s360-grid-2-compact,
  .s360-grid-4-stat,
  .s360-grid-form-split,
  .s360-grid-sidebar-main,
  .s360-grid-sidebar-main-alt,
  .s360-filter-grid-5,
  .s360-grid-school-shell,
  .s360-custom-layout-grid {
    grid-template-columns: 1fr;
  }

  .s360-layout-width-full,
  .s360-layout-width-half.s360-layout-column-left,
  .s360-layout-width-half.s360-layout-column-right {
    grid-column: auto;
  }
}

@media (max-width: 782px) {
  .s360-page-shell,
  .s360-ui-shell,
  .s360-student-workspace,
  .s360-admin-dashboard,
  .s360-admissions-workspace,
  .s360-custom-fields-page {
    gap: var(--s360-layout-section-gap);
  }
}

/* UI-R1: shared responsive containment baseline.
 * Keeps full-width admin pages from causing horizontal overflow on tablet/mobile
 * while preserving wider tables inside their scroll wrappers.
 */
.s360-page-shell > *,
.s360-ui-shell > *,
.s360-admin-dashboard > *,
.s360-admissions-workspace > *,
.s360-custom-fields-page > *,
.s360-student-workspace > *,
.s360-grid > *,
.s360-grid-2 > *,
.s360-grid-3 > *,
.s360-grid-4 > *,
.s360-grid-auto > *,
.s360-grid-auto-lg > *,
.s360-grid-auto-320 > *,
.s360-grid-auto-220 > *,
.s360-grid-2-compact > *,
.s360-grid-4-stat > *,
.s360-grid-form-split > *,
.s360-grid-sidebar-main > *,
.s360-grid-sidebar-main-alt > *,
.s360-filter-grid-5 > *,
.s360-grid-school-shell > *,
.s360-custom-layout-grid > *,
.s360-cluster > *,
.s360-cluster-between > * {
  min-width: 0;
}

.s360-ui-card,
.s360-ui-section-card,
.s360-ui-stat-card,
.s360-ui-action-bar,
.s360-page-section,
.s360-section {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.s360-ui-card img,
.s360-ui-section-card img,
.s360-ui-card svg,
.s360-ui-section-card svg,
.s360-page-shell img,
.s360-ui-shell img,
.s360-page-shell video,
.s360-ui-shell video,
.s360-page-shell iframe,
.s360-ui-shell iframe {
  max-width: 100%;
}

.s360-ui-card img,
.s360-ui-section-card img,
.s360-page-shell img,
.s360-ui-shell img,
.s360-page-shell video,
.s360-ui-shell video {
  height: auto;
}

.wp-admin :where(.s360-ui-table-wrap,.s360-table-scroll,.s360-expense-table-wrap,.s360-dashboard-table-wrap,.s360-expense-list-wrap,.s360-export-table-wrap,.s360-hr-table-wrap,.s360-hr-directory-table-wrap,.s360-cf-table-wrap,.s360-overflow-x) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

@media (max-width: 782px) {
  .s360-grid-auto-lg,
  .s360-grid-auto-320,
  .s360-grid-form-split,
  .s360-grid-sidebar-main,
  .s360-grid-sidebar-main-alt,
  .s360-grid-school-shell {
    gap: var(--s360-layout-grid-gap);
  }

  .s360-cluster,
  .s360-cluster-between {
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .s360-page-shell,
  .s360-ui-shell,
  .s360-admin-dashboard,
  .s360-admissions-workspace,
  .s360-custom-fields-page,
  .s360-student-workspace {
    gap: var(--s360-space-md);
  }
}


/* UI Phase 4A: canonical School 360 admin wrapper.
 * Every admin/module shell now carries .s360-admin-wrapper in addition to the
 * WordPress .wrap class and the existing .s360-wrap foundation class.
 */
.wp-admin .wrap.s360-admin-wrapper {
  width: 100%;
  max-width: var(--s360-layout-admin-page-max, none);
  min-width: 0;
  box-sizing: border-box;
  color: var(--s360-color-text, #1e293b);
  font-size: var(--s360-font-size-md, 14px);
  line-height: var(--s360-line-height, 1.5);
}