/* School Calm UI/UX polish layer
   Safe, non-schema visual polish for admin, coordinator, and public order flows. */
:root {
  --ux-radius-xl: 1.35rem;
  --ux-radius-2xl: 1.75rem;
  --ux-border: var(--line, rgba(33, 49, 60, 0.12));
  --ux-surface: var(--surface-card, #ffffff);
  --ux-surface-soft: var(--surface-alt, #f7fbf8);
  --ux-ink: var(--ink, #21313c);
  --ux-muted: var(--ink-muted, rgba(33, 49, 60, 0.70));
  --ux-focus: color-mix(in srgb, var(--brand, #2f6f68) 24%, transparent);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page main, .public-order-page form) :where(input, select, textarea) {
  min-height: 2.85rem;
  font-size: 1rem;
}

/* Phase 5A: checkbox/radio safety. Keep tick controls as compact square controls,
   not stretched text-field boxes from global input styling. */
:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page) :where(input[type="checkbox"], input[type="radio"]) {
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
  flex: 0 0 1rem !important;
  padding: 0 !important;
  margin-top: .15rem;
  box-shadow: none !important;
  accent-color: var(--brand, #2f6f68);
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page) :where(input[type="checkbox"]) {
  border-radius: .25rem !important;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page) :where(input[type="radio"]) {
  border-radius: 999px !important;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page) :where(details > summary) {
  -webkit-user-select: none;
  user-select: none;
}

.admin-shell-main details > summary::-webkit-details-marker,
.legacy-coordinator-panel details > summary::-webkit-details-marker,
.public-order-page details > summary::-webkit-details-marker {
  display: none;
}

.admin-shell-main details > summary::marker,
.legacy-coordinator-panel details > summary::marker,
.public-order-page details > summary::marker {
  content: '';
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page) :where(button, a[class*="rounded"], input[type="submit"]) {
  touch-action: manipulation;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page) :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--ux-focus);
  outline-offset: 3px;
}

/* Phase 4A: keep School Calm styling on explicit School Calm components only.
   Do not globally rewrite every Tailwind rounded/shadow utility; nested product,
   payment, alert, and form controls must keep their own visual hierarchy. */
:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page) :where(.school-calm-hero-shell, .school-calm-hero-card, .school-calm-contrast-card) {
  border-color: var(--ux-border);
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page) :where(.school-calm-hero-shell, .school-calm-hero-card, .school-calm-contrast-card) {
  box-shadow: var(--shadow-card, 0 14px 34px -28px rgba(33, 49, 60, 0.24));
}

.admin-shell-main :where(h1, h2, h3),
.legacy-coordinator-panel :where(h1, h2, h3),
.public-order-page :where(h1, h2, h3) {
  letter-spacing: 0;
}

.admin-shell-main :where(.text-xs[class*="uppercase"], .tracking-widest),
.legacy-coordinator-panel :where(.text-xs[class*="uppercase"], .tracking-widest) {
  letter-spacing: .16em;
}

/* Admin navigation: stable sidebar on desktop, drawer on mobile. */
.admin-shell-main,
.admin-shell-main * {
  box-sizing: border-box;
}

.admin-shell-main {
  min-width: 0;
  max-width: 100%;
  padding: 5.5rem 1rem 1.5rem;
  overflow-x: hidden;
}

.admin-shell-main :where(section, article, div, form, header, footer, nav, table) {
  min-width: 0;
}

.admin-shell-main :where(img, video, canvas, svg) {
  max-width: 100%;
}

.admin-shell-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  display: flex;
  width: min(19rem, calc(100vw - 2rem));
  max-width: 100%;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  border-right: 1px solid var(--ux-border);
  background: rgba(255, 255, 255, .97);
  padding: 1rem;
  box-shadow: 24px 0 60px -42px rgba(33, 49, 60, .55);
  transform: translateX(-105%);
  transition: transform .2s ease;
}

.admin-shell-sidebar.is-open {
  transform: translateX(0);
}

.admin-shell-nav-open {
  overflow: hidden;
}

.admin-shell-brand,
.admin-shell-brand-link {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .75rem;
}

.admin-shell-brand {
  justify-content: space-between;
}

.admin-shell-brand-link {
  color: var(--ux-ink);
  text-decoration: none;
}

.admin-shell-brand-badge {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: .9rem;
  background: color-mix(in srgb, var(--brand, #2f6f68) 12%, #fff);
  color: var(--brand-strong, #1f5f58);
  font-weight: 900;
}

.admin-shell-brand .site-brand-copy-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.admin-shell-brand .site-brand-title {
  overflow: hidden;
  color: var(--ux-ink);
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-shell-brand .site-brand-subtitle {
  color: var(--ux-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admin-shell-nav {
  display: grid;
  gap: .35rem;
}

.admin-shell-link {
  display: flex;
  min-height: 2.85rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-radius: .95rem;
  color: var(--ux-muted);
  padding: .7rem .85rem;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.admin-shell-link:hover,
.admin-shell-link.is-active {
  background: color-mix(in srgb, var(--brand, #2f6f68) 10%, #fff);
  color: var(--brand-strong, #1f5f58);
}

.admin-shell-link.is-active {
  box-shadow: inset 0 0 0 1px rgba(33,49,60,.06), 0 18px 30px -24px rgba(15,118,110,.42);
}

.admin-shell-link-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-shell-badge {
  display: inline-flex;
  min-width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
}

.admin-shell-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  border-top: 1px solid var(--ux-border);
  padding-top: 1rem;
}

.admin-shell-admin-name,
.admin-shell-admin-role {
  margin: 0;
}

.admin-shell-admin-name {
  color: var(--ux-ink);
  font-size: .92rem;
  font-weight: 800;
}

.admin-shell-admin-role {
  color: var(--ux-muted);
  font-size: .78rem;
  text-transform: capitalize;
}

.admin-shell-logout {
  flex: 0 0 auto;
  border-radius: .8rem;
  border: 1px solid var(--ux-border);
  color: var(--ux-muted);
  padding: .55rem .75rem;
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
}

.admin-shell-menu-button,
.admin-shell-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ux-border);
  background: rgba(255, 255, 255, .96);
  color: var(--ux-ink);
}

.admin-shell-menu-button {
  position: fixed;
  top: .9rem;
  left: .9rem;
  z-index: 55;
  gap: .5rem;
  min-height: 2.75rem;
  border-radius: 999px;
  padding: .65rem .9rem;
  font-size: .9rem;
  font-weight: 900;
  box-shadow: 0 18px 42px -30px rgba(33, 49, 60, .45);
}

.admin-shell-close {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  border-radius: 999px;
}

.admin-shell-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(4px);
}

.admin-shell-backdrop[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  .admin-shell-main {
    width: calc(100% - 17rem);
    margin-left: 17rem;
    padding: 2.25rem;
  }

  .admin-shell-sidebar {
    width: 17rem;
    transform: none;
    box-shadow: 18px 0 52px -44px rgba(33, 49, 60, .36);
  }

  .admin-shell-menu-button,
  .admin-shell-close,
  .admin-shell-backdrop {
    display: none;
  }
}

@media (max-width: 640px) {
  .admin-shell-main {
    padding-left: .85rem;
    padding-right: .85rem;
  }

  .admin-shell-main :where(.rounded-3xl, [class*="rounded-[2rem]"]) {
    border-radius: 1.25rem !important;
  }
}

/* Tables: stop mobile layout breaking on order directories and reports. */
@media (max-width: 767px) {
  :where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page) table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel) :where(th, td) {
    padding-left: .85rem;
    padding-right: .85rem;
  }
}

/* Coordinator dashboard: make simple mode feel intentional, not like hidden legacy content. */
.coordinator-dashboard-ux #coordinator-full-dashboard > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.coordinator-dashboard-ux #coordinator-full-dashboard > summary::after {
  content: "Open";
  border: 1px solid var(--ux-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ux-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  padding: .45rem .75rem;
  text-transform: uppercase;
}

.coordinator-dashboard-ux #coordinator-full-dashboard[open] > summary::after {
  content: "Close";
}

.coordinator-dashboard-ux [data-simple-task-link] {
  min-height: 11rem;
  position: relative;
}

.coordinator-dashboard-ux [data-simple-task-link]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

@media (max-width: 640px) {
  .coordinator-dashboard-ux main {
    padding-top: 1.25rem;
  }

  .coordinator-dashboard-ux [data-simple-task-link] {
    min-height: 8.75rem;
  }
}

/* Public order forms: clearer purchase path and less visual noise on mobile. */
.public-order-page .public-order-shell {
  isolation: isolate;
}

.public-order-page .item-row,
.public-order-page .product-order-group {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.public-order-page .item-row:focus-within,
.public-order-page .product-order-group:focus-within {
  border-color: color-mix(in srgb, var(--brand, #2f6f68) 34%, transparent) !important;
  box-shadow: 0 24px 54px -38px rgba(33,49,60,.38), 0 0 0 4px var(--ux-focus) !important;
}

.public-order-page .row-subtotal,
.public-order-page #estimated-total {
  font-variant-numeric: tabular-nums;
}

.public-order-page :where(#submit-student-order, #submit-teacher-order, [data-submit-payment-trigger]) {
  min-height: 3.25rem;
}

@media (max-width: 640px) {
  .public-order-page .public-order-stage > div {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .public-order-page .public-order-hero,
  .public-order-page form {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .public-order-page .public-order-preview-card {
    margin-top: .25rem;
  }
}

/* Forms with many controls: improve breathing room and visible error states. */
:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page) :where(.border-red-200, .border-rose-200) {
  border-width: 1px;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page) :where(.bg-red-50, .bg-rose-50) {
  box-shadow: 0 18px 36px -30px rgba(190, 18, 60, .28);
}

/* Phase 2: buyer-ready workflow clarity. */
.school-calm-workflow-strip {
  display: grid;
  gap: .9rem;
}

.school-calm-workflow-card {
  position: relative;
  min-height: 8.5rem;
  overflow: hidden;
}

.school-calm-workflow-card::after {
  content: "";
  position: absolute;
  inset: auto 1.25rem 0 1.25rem;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand, #2f6f68) 55%, transparent), color-mix(in srgb, var(--brand-gradient-end, #73d3a6) 55%, transparent));
  opacity: .78;
}

.school-calm-workflow-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand, #2f6f68) 13%, #fff);
  color: var(--brand-strong, #1f5f58);
  font-size: .78rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand, #2f6f68) 18%, transparent);
}

.school-calm-handover-status {
  font-variant-numeric: tabular-nums;
}

.coordinator-dashboard-ux [data-simple-task-link] .school-calm-task-copy {
  max-width: 18rem;
}

.admin-dashboard-ux .admin-workflow-card,
.coordinator-action-hub-ux .action-hub-flow-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.admin-dashboard-ux .admin-workflow-card:hover,
.coordinator-action-hub-ux .action-hub-flow-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 54px -38px rgba(33, 49, 60, .42);
  border-color: color-mix(in srgb, var(--brand, #2f6f68) 28%, var(--ux-border));
}

@media (min-width: 768px) {
  .school-calm-workflow-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .school-calm-workflow-card {
    min-height: auto;
  }

  .school-calm-workflow-card::after {
    inset: 1rem auto 1rem 0;
    width: 3px;
    height: auto;
    border-radius: 0 999px 999px 0;
  }
}


/* Coordinator clean UI v3: compact, action-first, no guide-copy styling. */
.coordinator-page-clean {
  background: radial-gradient(circle at top left, color-mix(in srgb, var(--brand, #2f6f68) 9%, transparent), transparent 24rem), linear-gradient(180deg, #f7fbf8 0%, #eef5f1 100%) !important;
  color: var(--ink, #21313c);
}

.coordinator-page-clean nav {
  backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, .92) !important;
  border-bottom: 1px solid var(--line, rgba(33,49,60,.12)) !important;
}

.coordinator-page-clean main,
.coordinator-page-clean .legacy-coordinator-panel {
  max-width: 1180px;
}

.coordinator-page-clean :where(h1,h2,h3,h4) {
  letter-spacing: 0;
}

.coordinator-page-clean :where(.rounded-lg,.rounded-xl,.rounded-2xl,.rounded-3xl,[class*="rounded-["]) {
  border-color: var(--line, rgba(33,49,60,.12)) !important;
}

.coordinator-page-clean :where(.shadow-sm,.shadow,.shadow-lg,.shadow-xl,.shadow-2xl) {
  box-shadow: 0 12px 30px -26px rgba(33,49,60,.24) !important;
}

.coordinator-page-clean :where(a,button,input,select,textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand, #2f6f68) 24%, transparent);
  outline-offset: 3px;
}

.coordinator-page-clean :where(a[class*="bg-"], button[class*="bg-"]) {
  min-height: 2.55rem;
  align-items: center;
  justify-content: center;
}

.coordinator-page-clean :where(input,select,textarea) {
  min-height: 2.75rem;
}

.coordinator-page-clean .coordinator-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.coordinator-page-clean table {
  border-collapse: separate;
  border-spacing: 0;
}

.coordinator-page-clean th {
  white-space: nowrap;
  letter-spacing: .12em !important;
}

.coordinator-dashboard-ux section:first-of-type {
  padding: 1.25rem !important;
}

.coordinator-dashboard-ux [data-simple-task-link] {
  min-height: 9.25rem !important;
  padding: 1rem !important;
}

.coordinator-dashboard-ux [data-simple-task-link] .text-2xl {
  font-size: 1.45rem !important;
  line-height: 1.85rem !important;
}

.coordinator-dashboard-ux #coordinator-full-dashboard:not([open]) {
  background: rgba(255,255,255,.72) !important;
}

.coordinator-dashboard-ux #coordinator-full-dashboard > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.coordinator-dashboard-ux #coordinator-full-dashboard > summary::after {
  content: "Open";
  border: 1px solid var(--line, rgba(33,49,60,.12));
  border-radius: 999px;
  background: #fff;
  color: var(--ink-muted, rgba(33,49,60,.68));
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  padding: .4rem .7rem;
  text-transform: uppercase;
}

.coordinator-dashboard-ux #coordinator-full-dashboard[open] > summary::after {
  content: "Close";
}

.coordinator-quick-actions > summary::-webkit-details-marker {
  display: none;
}

.coordinator-quick-actions [data-quick-actions-chevron] {
  transition: transform .18s ease;
}

.coordinator-quick-actions[open] [data-quick-actions-chevron] {
  transform: rotate(180deg);
}

.coordinator-quick-actions [data-quick-actions-list],
.coordinator-quick-actions [data-quick-actions-export-list] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
}

.coordinator-quick-actions :where(a, button) {
  justify-content: flex-start !important;
  text-align: left !important;
}

.coordinator-quick-actions :where(a, button) span {
  overflow-wrap: anywhere;
}

.coordinator-toast-region {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  display: grid;
  width: min(24rem, calc(100vw - 2rem));
  gap: .75rem;
  pointer-events: none;
}

.coordinator-toast-region > div {
  pointer-events: auto;
}

.order-edit-sticky-save {
  position: sticky;
  bottom: .75rem;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 24px 60px -34px rgba(15, 23, 42, .45);
  padding: .8rem;
  backdrop-filter: blur(16px);
}

.order-edit-sticky-save__meta {
  min-width: 0;
}

.order-edit-sticky-save__label {
  color: #64748b;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.order-edit-sticky-save__title {
  color: #0f172a;
  font-size: .95rem;
  font-weight: 900;
  line-height: 1.25;
}

.order-edit-sticky-save__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
}

.order-edit-sticky-save__link,
.order-edit-sticky-save__button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: .95rem;
  padding: .72rem 1rem;
  font-size: .9rem;
  font-weight: 900;
  text-decoration: none;
}

.order-edit-sticky-save__link {
  border: 1px solid rgba(148, 163, 184, .45);
  color: #334155;
}

.order-edit-sticky-save__button {
  border: 0;
  cursor: pointer;
}

@media (max-width: 760px) {
  .coordinator-page-clean main {
    padding-left: .9rem !important;
    padding-right: .9rem !important;
  }

  .coordinator-page-clean nav .h-16 {
    min-height: 4rem;
    height: auto;
    padding-top: .65rem;
    padding-bottom: .65rem;
  }

  .coordinator-dashboard-ux [data-simple-task-link] {
    min-height: 7.75rem !important;
  }
}

@media (max-width: 640px) {
  .coordinator-toast-region {
    right: .75rem;
    bottom: .75rem;
    width: calc(100vw - 1.5rem);
  }

  .order-edit-sticky-save {
    align-items: stretch;
    flex-direction: column;
  }

  .order-edit-sticky-save__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
}

/* Phase 4B: status color safety start */
/* Keep alerts, validation states, receipts, and deadline warnings readable.
   Brand theme CSS must not turn warning/error/success utilities into generic
   brand-muted panels. Visual-only; no form/order/payment logic changes. */
:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(.alert-danger, .notice.error, .bg-red-50, .bg-rose-50) {
  background-color: #fff1f2 !important;
  color: #991b1b !important;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(.alert-warning, .notice.warning, .bg-yellow-50, .bg-amber-50, .bg-orange-50) {
  background-color: #fffbeb !important;
  color: #92400e !important;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(.alert-success, .notice.success, .bg-green-50, .bg-emerald-50) {
  background-color: #ecfdf5 !important;
  color: #065f46 !important;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(.alert-info, .notice.info, .bg-blue-50, .bg-sky-50, .bg-cyan-50) {
  background-color: #eff6ff !important;
  color: #1e40af !important;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(.border-red-200, .border-rose-200) {
  border-color: #fecdd3 !important;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(.border-yellow-200, .border-amber-200, .border-orange-200) {
  border-color: #fde68a !important;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(.border-green-200, .border-emerald-200) {
  border-color: #a7f3d0 !important;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(.border-blue-200, .border-sky-200, .border-cyan-200) {
  border-color: #bfdbfe !important;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(.text-red-500, .text-red-600, .text-red-700, .text-red-800, .text-rose-600, .text-rose-700, .text-rose-800) {
  color: #b91c1c !important;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(.text-yellow-600, .text-yellow-700, .text-yellow-800, .text-amber-600, .text-amber-700, .text-amber-800, .text-orange-700, .text-orange-800) {
  color: #92400e !important;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(.text-green-600, .text-green-700, .text-green-800, .text-emerald-600, .text-emerald-700, .text-emerald-800, .text-emerald-900) {
  color: #047857 !important;
}

:where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(.text-blue-600, .text-blue-700, .text-blue-800, .text-sky-600, .text-sky-700, .text-sky-800, .text-cyan-700, .text-cyan-800) {
  color: #2563eb !important;
}
/* Phase 4B: status color safety end */

/* Phase 6A: mobile responsiveness safety
   CSS-only guardrails for phone/tablet layouts. No PHP, DB, payment, order,
   validation, or JS behavior changes. */
@media (max-width: 767px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) {
    max-width: 100vw;
    overflow-wrap: anywhere;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(section, article, div, form, fieldset, header, footer, nav, aside, main) {
    min-width: 0;
    max-width: 100%;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(img, video, canvas, svg, iframe) {
    max-width: 100%;
  }

  .admin-shell-sidebar {
    width: 100vw;
    max-width: 100vw;
    border-right: 0;
    border-radius: 0;
    padding: 1rem .9rem 1.35rem;
  }

  .admin-shell-menu-button,
  .admin-shell-close,
  .admin-shell-link,
  .admin-shell-logout {
    min-width: 44px;
    min-height: 44px;
  }

  .admin-shell-menu-button,
  .admin-shell-close {
    padding: .75rem;
  }

  .admin-shell-link,
  .admin-shell-logout {
    align-items: center;
  }

  .admin-shell-brand,
  .admin-shell-footer {
    gap: .65rem;
  }

  .admin-shell-brand .site-brand-title,
  .admin-shell-brand .site-brand-subtitle,
  .admin-shell-link-text {
    white-space: normal;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(button, [role="button"], summary, .btn, a[class*="rounded"], input[type="submit"], input[type="button"]) {
    min-height: 44px;
    touch-action: manipulation;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) input[type="file"]::file-selector-button {
    min-height: 44px;
    touch-action: manipulation;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(details > summary) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    white-space: normal !important;
    line-height: 1.25;
    cursor: pointer;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(details > summary > *) {
    min-width: 0;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
    max-width: 100%;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) table {
    width: max-content;
    min-width: 100%;
    max-width: none;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(.overflow-hidden) > table {
    overflow-x: auto;
  }

  .school-calm-workflow-card {
    min-height: auto;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .school-calm-workflow-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  :where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(.grid[class*="sm:grid-cols"], .grid[class*="md:grid-cols"], .grid[class*="lg:grid-cols"], .grid[class*="xl:grid-cols"], .grid[class*="2xl:grid-cols"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where([class*="min-w-["]) {
    min-width: 0 !important;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where([class*="max-w-["]) {
    max-width: 100% !important;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .public-order-page, .coordinator-page-clean) :where(.px-6, .sm\:p-8, .sm\:px-8) {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .admin-edit-compact-nav,
  .coordinator-dashboard-ux nav,
  .coordinator-page-clean nav {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Phase 6B: mobile table/card containment safety start */
/* CSS-only. Keeps tables usable on phones without changing PHP, save logic,
   order logic, payment logic, or database structure. */
@media (max-width: 640px) {
  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) {
    max-width: 100vw;
    overflow-x: hidden;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) :where(.overflow-x-auto) {
    display: block;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: 1rem;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) :where(.overflow-x-auto > table) {
    width: max-content;
    min-width: min(44rem, 185vw);
    max-width: none;
    table-layout: auto;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) :where(.overflow-x-auto > table th) {
    white-space: nowrap;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) :where(.overflow-x-auto > table td) {
    max-width: 18rem;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) :where(.overflow-x-auto > table td:last-child) {
    min-width: 9.5rem;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) :where(table a, table button) {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    white-space: normal;
    line-height: 1.2;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) :where(table .rounded-full, table [class*="rounded-full"]) {
    line-height: 1.25;
    white-space: normal;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) :where(td[colspan]) {
    min-width: min(22rem, calc(100vw - 2rem));
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) :where(.rounded-2xl, .rounded-3xl, .rounded-\[2rem\]) {
    max-width: 100%;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) :where(.school-calm-hero-shell, .school-calm-hero-card, .school-calm-contrast-card) {
    border-radius: 1.25rem !important;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) :where(.school-calm-hero-shell) {
    padding: 1.15rem !important;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) :where(.school-calm-hero-shell h1, h1.text-3xl, h1.text-4xl) {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    line-height: 1.15 !important;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) :where(.school-calm-hero-pill, .school-calm-hero-kicker, .tracking-\[0\.25em\], .tracking-\[0\.28em\], .tracking-widest) {
    letter-spacing: .08em !important;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) :where(.flex) {
    min-width: 0;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel, .coordinator-page-clean, .public-order-page) :where(a, button, label, summary) {
    max-width: 100%;
  }
}
/* Phase 6B: mobile table/card containment safety end */

/* Phase 6C: mobile form/action containment safety start
   CSS-only mobile fix. Keeps admin/coordinator/order business logic untouched. */
@media (max-width: 640px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page) {
    max-width: 100vw;
    overflow-x: hidden;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page) :where(form, fieldset, section, article, details, summary, .grid, .flex, .rounded-2xl, .rounded-3xl) {
    min-width: 0;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page) :where(.grid[class*="sm:grid-cols"], .grid[class*="md:grid-cols"], .grid[class*="lg:grid-cols"], .grid[class*="xl:grid-cols"], [class*="grid-cols-["]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page) :where(.flex[class*="justify-between"], .flex[class*="items-center"], .flex[class*="sm:flex-row"], .flex[class*="md:flex-row"], .flex[class*="lg:flex-row"]) {
    flex-wrap: wrap;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page) :where(.inline-flex, .flex, button, a, label, summary) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page) :where(input, select, textarea) {
    max-width: 100%;
    min-width: 0;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page) :where(.px-6, .sm\:px-8, .lg\:px-8) {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page) :where(.p-6, .sm\:p-8, .lg\:p-8) {
    padding: 1rem !important;
  }

  .admin-edit-school-ui .admin-edit-compact-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: .5rem;
    margin-left: -.25rem;
    margin-right: -.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .admin-edit-school-ui .admin-edit-compact-nav a {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .admin-edit-school-ui .product-row,
  .admin-edit-school-ui .catalogue-subcard,
  .admin-edit-school-ui .price-surface,
  .admin-edit-school-ui .size-availability-card,
  .admin-edit-school-ui .single-size-card {
    border-radius: 1rem !important;
  }

  .public-order-page :where(.relative.mx-auto, main, form) {
    width: 100%;
    max-width: 100%;
  }

  .public-order-page :where([data-submit-payment-method-button], .student-submit-payment-method, .teacher-submit-payment-method) {
    min-height: 48px;
    align-items: flex-start;
    padding: .9rem !important;
  }

  .public-order-page :where([data-submit-payment-trigger], button[type="submit"], a[role="button"]) {
    width: 100%;
    min-height: 48px;
    white-space: normal;
  }

  .public-order-page :where(#student-submit-card-panel, #teacher-submit-card-panel, #student-submit-paypal-panel, #teacher-submit-paypal-panel, #payment-section) {
    max-width: 100%;
    overflow-x: hidden;
  }

  .public-order-page :where(input[type="file"]) {
    font-size: .92rem;
    line-height: 1.35;
  }

  .order-edit-sticky-save {
    right: .5rem;
    bottom: .5rem;
    left: .5rem;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding: .7rem;
    border-radius: 1rem;
  }

  .order-edit-sticky-save__actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .order-edit-sticky-save__link,
  .order-edit-sticky-save__button {
    width: 100%;
    min-height: 48px;
  }
}

@media (max-width: 420px) {
  .order-edit-sticky-save__label {
    display: none;
  }

  .order-edit-sticky-save__title {
    font-size: .88rem;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page) :where(.text-3xl, .sm\:text-4xl) {
    font-size: 1.65rem !important;
    line-height: 1.15 !important;
  }
}
/* Phase 6C: mobile form/action containment safety end */

/* Phase 6D: mobile header/modal/file-input safety
   CSS-only. Keeps nav bars, auth cards, modals, file inputs, and long inline
   controls inside the viewport on phones without touching save/payment/order logic. */
@media (max-width: 640px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page, .order-manage-page) {
    max-width: 100vw;
    overflow-x: clip;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page, .order-manage-page) :where(.max-w-md, .max-w-lg, .max-w-xl, .max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl) {
    max-width: 100% !important;
  }

  /* Coordinator/auth/public top bars: allow wrapping instead of forcing horizontal page overflow. */
  .coordinator-page-clean > nav,
  .public-order-page > nav,
  .order-manage-page > nav {
    max-width: 100vw;
    overflow-x: clip;
  }

  .coordinator-page-clean > nav :where(.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl),
  .public-order-page > nav :where(.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl),
  .order-manage-page > nav :where(.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl) {
    min-height: auto !important;
    align-items: flex-start !important;
    gap: .65rem !important;
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }

  .coordinator-page-clean > nav :where(.flex, .inline-flex),
  .public-order-page > nav :where(.flex, .inline-flex),
  .order-manage-page > nav :where(.flex, .inline-flex) {
    min-width: 0;
  }

  .coordinator-page-clean > nav :where(a, button),
  .public-order-page > nav :where(a, button),
  .order-manage-page > nav :where(a, button) {
    min-height: 44px;
    white-space: normal;
  }

  .coordinator-page-clean > nav :where(.truncate, .site-brand-title, .site-brand-subtitle),
  .public-order-page > nav :where(.truncate, .site-brand-title, .site-brand-subtitle) {
    max-width: min(15rem, calc(100vw - 7rem));
  }

  /* Auth/login cards and centered utility pages. */
  body > :where(.max-w-md, .max-w-lg, .max-w-xl),
  .coordinator-page-clean :where(.max-w-md, .max-w-lg, .max-w-xl),
  .public-order-page :where(.max-w-md, .max-w-lg, .max-w-xl) {
    width: 100% !important;
    max-width: calc(100vw - 1.5rem) !important;
  }

  /* Forms: file inputs/selects with Tailwind min-width utilities must not push the page wider. */
  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page, .order-manage-page) :where(input, select, textarea, button) {
    max-width: 100%;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page, .order-manage-page) :where(input[type="file"]) {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page, .order-manage-page) :where(input[type="file"]::file-selector-button) {
    min-height: 40px;
    margin-right: .6rem;
    border: 0;
    border-radius: .75rem;
    padding: .55rem .8rem;
    font-weight: 800;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page, .order-manage-page) :where(select[class*="min-w-"], input[class*="min-w-"], textarea[class*="min-w-"]) {
    width: 100% !important;
    min-width: 0 !important;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page, .order-manage-page) :where([class*="gap-"]) {
    row-gap: .75rem;
  }

  /* Modals/drawers created by admin/coordinator pages: fit the viewport and scroll inside the modal. */
  :where(.admin-shell-main, .coordinator-page-clean, .deadline-admin-page, .order-manage-page) :where(.modal, .fixed.inset-0) {
    max-width: 100vw;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .deadline-admin-page, .order-manage-page) :where(.modal-dialog, .modal-content, .fixed.inset-0 > .mx-auto, .fixed.inset-0 > div[class*="max-w-"]) {
    width: calc(100vw - 1.25rem) !important;
    max-width: calc(100vw - 1.25rem) !important;
    max-height: calc(100dvh - 1.25rem);
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .deadline-admin-page :where(.modal-dialog) {
    margin: .65rem auto !important;
  }

  .deadline-admin-page :where(.modal-header, .modal-footer),
  :where(.admin-shell-main, .coordinator-page-clean) :where(.modal-header, .modal-footer) {
    flex-wrap: wrap;
    gap: .5rem;
  }

  .deadline-admin-page :where(.modal-footer .btn),
  :where(.admin-shell-main, .coordinator-page-clean) :where(.modal-footer .btn) {
    width: 100%;
    min-height: 44px;
  }

  /* Inline badges/pills/long URLs should wrap instead of stretching cards. */
  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page, .order-manage-page) :where(.badge, .rounded-full, code, pre, .font-mono) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  :where(.admin-shell-main, .coordinator-page-clean, .public-order-page, .order-manage-page) :where(pre) {
    overflow-x: auto;
    white-space: pre-wrap;
  }
}

@supports not (overflow: clip) {
  @media (max-width: 640px) {
    html,
    body,
    :where(.admin-shell-main, .coordinator-page-clean, .public-order-page, .order-manage-page) {
      overflow-x: hidden;
    }
  }
}

/* Phase 6E: mobile framework/overflow compatibility safety
   CSS-only guard for mixed Bootstrap/Tailwind/custom layouts on phones.
   Keeps page content inside the viewport without touching business logic. */
@media (max-width: 767.98px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .container,
  .container-fluid,
  .admin-shell,
  .admin-shell-main,
  .admin-shell-content,
  .coordinator-shell-ux,
  .coordinator-dashboard,
  main,
  section,
  article,
  form,
  fieldset {
    max-width: 100%;
    min-width: 0;
  }

  /* Bootstrap rows use negative margins. On mobile they often create page-wide horizontal scroll. */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .row > [class*="col-"],
  [class*="col-sm-"],
  [class*="col-md-"],
  [class*="col-lg-"],
  [class*="col-xl-"] {
    min-width: 0;
    max-width: 100%;
  }

  img,
  svg,
  canvas,
  video,
  iframe,
  object,
  embed {
    max-width: 100%;
  }

  iframe,
  object,
  embed {
    width: 100%;
  }

  pre,
  code,
  .code,
  .token,
  .order-token,
  .checkout-url,
  .copyable,
  .school-calm-code,
  .text-break {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .btn-toolbar,
  .btn-group,
  .button-group,
  .action-group,
  .admin-actions,
  .coordinator-actions,
  .school-calm-actions,
  .table-actions,
  .dataTables_paginate,
  .pagination,
  .nav,
  .nav-tabs,
  .breadcrumb {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    gap: .5rem;
  }

  .btn-group > .btn,
  .button-group > button,
  .button-group > a,
  .table-actions > button,
  .table-actions > a,
  .pagination .page-link,
  .dataTables_paginate a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-tabs,
  .breadcrumb,
  .admin-edit-compact-nav,
  .school-calm-tab-strip {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .nav-tabs > *,
  .breadcrumb > *,
  .admin-edit-compact-nav > *,
  .school-calm-tab-strip > * {
    flex: 0 0 auto;
  }

  .dropdown-menu,
  .select2-container,
  .select2-dropdown,
  .flatpickr-calendar,
  .datepicker,
  .ui-datepicker {
    max-width: calc(100vw - 1rem) !important;
  }

  .dropdown-menu {
    overflow-wrap: anywhere;
  }

  .alert,
  .notice,
  .school-calm-alert,
  .school-calm-notice,
  .card,
  .school-calm-card,
  .rounded-2xl,
  .rounded-3xl {
    min-width: 0;
    max-width: 100%;
  }

  .badge,
  .pill,
  .school-calm-pill,
  .status-badge,
  .label,
  .tag {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }
}

@media (max-width: 480px) {
  .container,
  .container-fluid,
  .admin-shell-content,
  .coordinator-shell-ux,
  .coordinator-dashboard {
    padding-left: .875rem;
    padding-right: .875rem;
  }

  .school-calm-hero,
  .school-calm-hero-shell,
  .school-calm-page-header,
  .school-calm-card,
  .card,
  .rounded-3xl {
    border-radius: 1rem;
  }

  .school-calm-page-title,
  .school-calm-hero-title,
  h1 {
    font-size: clamp(1.35rem, 7vw, 1.75rem);
    line-height: 1.15;
  }

  h2 {
    font-size: clamp(1.15rem, 5.5vw, 1.45rem);
    line-height: 1.2;
  }

  h3 {
    font-size: clamp(1rem, 4.8vw, 1.2rem);
    line-height: 1.25;
  }
}

/* Phase 6F: mobile accessibility/readability polish
   CSS-only mobile polish after overflow fixes. Keeps checkbox/radio visuals compact,
   improves focus states, tap areas, labels, iOS form zoom, and small-screen readability. */
@media (max-width: 767.98px) {
  /* Prevent iOS zoom on focused fields and keep long values readable. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .form-control,
  .form-select,
  .custom-select {
    font-size: 16px !important;
    line-height: 1.45;
  }

  textarea {
    min-height: 7rem;
    resize: vertical;
  }

  label,
  legend,
  .form-label,
  .form-check-label,
  .custom-control-label,
  .school-calm-label {
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  ::placeholder {
    opacity: .72;
  }

  .text-muted,
  .small,
  small,
  .form-text,
  .help-text,
  .school-calm-muted,
  .text-slate-400,
  .text-slate-500,
  .text-gray-400,
  .text-gray-500 {
    color: #475569 !important;
  }

  /* Keep the visible checkbox/radio mark compact; only the surrounding label gets a safe tap area. */
  input[type="checkbox"],
  input[type="radio"] {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
    min-height: 1rem !important;
    flex: 0 0 1rem;
    margin-top: .125rem;
  }

  .form-check,
  .custom-control,
  .school-calm-checkbox,
  .school-calm-radio,
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]),
  label:has(input[type="checkbox"]),
  label:has(input[type="radio"]) {
    min-height: 44px;
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    max-width: 100%;
  }

  .form-check-input,
  .custom-control-input {
    position: relative;
    flex: 0 0 1rem;
  }

  /* Clear visible focus without changing business behavior. */
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible,
  [role="button"]:focus-visible {
    outline: 3px solid rgba(14, 165, 233, .55) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 0 0 5px rgba(14,165,233,.25) !important;
  }

  summary {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(14, 165, 233, .18);
  }

  summary::-webkit-details-marker {
    margin-right: .4rem;
  }

  details > summary > * {
    min-width: 0;
  }

  /* Icon-only utility buttons should have a real tap target but not force text buttons wider than needed. */
  button[aria-label],
  a[aria-label],
  .btn-icon,
  .icon-button,
  .copy-link,
  .copy-button,
  [data-copy],
  [data-copy-link] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    width: 100%;
    text-align: left;
    margin: .5rem 0;
  }

  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_length label {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .35rem;
  }

  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
  }

  [id] {
    scroll-margin-top: 5.5rem;
  }

  .alert,
  .notice,
  .school-calm-alert,
  .school-calm-notice,
  .invalid-feedback,
  .error-message,
  .validation-error {
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .small,
  small,
  .text-xs,
  .form-text,
  .help-text {
    font-size: .8125rem !important;
    line-height: 1.35;
  }

  .badge,
  .pill,
  .school-calm-pill,
  .status-badge,
  .tag,
  .label {
    font-size: .75rem;
  }
}

/* Phase 6G: mobile product/order row density safety
   CSS-only containment for admin product rows, coordinator product setup cards,
   and public order product groups. Keeps business logic untouched. */
@media (max-width: 767.98px) {
  /* Admin add/edit school product rows: make dense nested cards fit phones. */
  .admin-shell-main .product-row {
    border-radius: 1.1rem !important;
    padding: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%;
    overflow: clip;
  }

  .admin-shell-main .product-row::before {
    border-radius: 1.1rem !important;
  }

  .admin-shell-main .product-row :where(header, footer, section, article, div, label, fieldset) {
    min-width: 0;
    max-width: 100%;
  }

  .admin-shell-main .product-row :where(.catalogue-subcard, .price-surface, .price-input-shell, .tax-summary-card, .rounded-2xl, .rounded-3xl, [class*="rounded-[1.75rem]"]) {
    border-radius: 1rem !important;
  }

  .admin-shell-main .product-row :where(.catalogue-subcard, .price-surface, .tax-summary-card) {
    padding: 1rem !important;
  }

  .admin-shell-main .product-row :where(.price-input-shell) {
    padding: .875rem !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-shell-main .product-row-title {
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .admin-shell-main .product-row :where(.product-row-toggle, .remove-product-row) {
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }

  .admin-shell-main #product-row-focus-select,
  .admin-shell-main #product-row-focus-reset {
    width: 100% !important;
    min-width: 0 !important;
  }

  .admin-shell-main #product-row-jump-list {
    display: flex;
    flex-wrap: nowrap !important;
    gap: .5rem;
    margin-left: -.25rem;
    margin-right: -.25rem;
    overflow-x: auto;
    padding: .25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .admin-shell-main #product-row-jump-list > * {
    flex: 0 0 auto;
    max-width: 72vw;
    white-space: nowrap;
  }

  /* Expandable nested admin product sections should not become huge/wide on phone. */
  .admin-shell-main .product-row details,
  .admin-shell-main .product-row details > summary {
    max-width: 100%;
  }

  .admin-shell-main .product-row details > summary {
    gap: .65rem;
    padding: .85rem 1rem !important;
  }

  .admin-shell-main .product-row details > summary :where(span, p, strong) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .admin-shell-main .product-row details[open] {
    overflow: hidden;
  }

  .admin-shell-main .product-row details[open] > :not(summary) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Coordinator product setup cards: keep product settings compact and stable. */
  .legacy-coordinator-panel [data-product-personalisation-card="1"] {
    border-radius: 1.1rem !important;
    padding: 1rem !important;
    max-width: 100%;
    overflow: clip;
  }

  .legacy-coordinator-panel [data-product-personalisation-card="1"] :where(section, article, div, label, details, summary) {
    min-width: 0;
    max-width: 100%;
  }

  .legacy-coordinator-panel [data-product-personalisation-card="1"] :where(select, input:not([type="checkbox"]):not([type="radio"]), textarea) {
    width: 100%;
    min-width: 0 !important;
  }

  .legacy-coordinator-panel [data-product-personalisation-card="1"] :where(.rounded-2xl, .rounded-3xl) {
    border-radius: 1rem !important;
  }

  /* Public student/teacher order product groups: product blocks and payment method chips fit phones. */
  .public-order-page :where(.product-order-group, .fixed-product-group) {
    border-radius: 1.1rem !important;
    padding: 1rem !important;
    max-width: 100%;
    overflow: clip;
  }

  .public-order-page :where(.product-order-group, .fixed-product-group) :where(section, article, div, label, fieldset) {
    min-width: 0;
    max-width: 100%;
  }

  .public-order-page :where(.product-order-group, .fixed-product-group) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
    min-width: 0 !important;
  }

  .public-order-page :where(.payment-brand-chip, .payment-wallet-chip) {
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    white-space: normal;
  }

  .public-order-page :where(.payment-brand-icon, .payment-wallet-icon) {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 420px) {
  .admin-shell-main .product-row,
  .legacy-coordinator-panel [data-product-personalisation-card="1"],
  .public-order-page :where(.product-order-group, .fixed-product-group) {
    padding: .85rem !important;
    border-radius: 1rem !important;
  }

  /* Size/choice grids with 4 fixed columns become too tight on small phones. */
  .public-order-page .grid.grid-cols-4,
  .admin-shell-main .product-row .grid.grid-cols-4,
  .legacy-coordinator-panel [data-product-personalisation-card="1"] .grid.grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .public-order-page .grid.grid-cols-3,
  .admin-shell-main .product-row .grid.grid-cols-3,
  .legacy-coordinator-panel [data-product-personalisation-card="1"] .grid.grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .admin-shell-main .product-row :where(.product-row-toggle, .remove-product-row),
  .public-order-page :where([data-submit-payment-trigger], .brand-button-solid, .brand-button-outline),
  .legacy-coordinator-panel [data-product-personalisation-card="1"] :where(button, a[class*="rounded"]) {
    width: 100%;
  }
}

/* Phase 6H: mobile dashboard/action density safety
   CSS-only cleanup for dashboard headers, task cards, quick actions, stats, pills,
   and page action bars. Keeps PHP/JS/order/payment logic untouched. */
@media (max-width: 767.98px) {
  /* Page shells: stop dashboard cards/actions from stretching the viewport. */
  :where(.admin-shell-main, .legacy-coordinator-panel, .school-calm-page, .school-calm-shell) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.school-calm-hero-shell, .school-calm-hero-card, .school-calm-panel, .school-calm-card, .dashboard-card, .stat-card, .metric-card, .kpi-card, .summary-card, .action-card, .rounded-3xl) {
    max-width: 100%;
    min-width: 0;
    border-radius: 1.1rem !important;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.school-calm-hero-shell, .school-calm-hero-card) {
    padding: 1rem !important;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.school-calm-panel, .school-calm-card, .dashboard-card, .stat-card, .metric-card, .kpi-card, .summary-card, .action-card) {
    padding: 1rem !important;
  }

  /* Dashboard titles/actions should wrap instead of forcing a wide row. */
  :where(.admin-shell-main, .legacy-coordinator-panel) :where(header, .page-header, .section-header, .dashboard-header, .card-header, .panel-header) {
    max-width: 100%;
    min-width: 0;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.page-header, .section-header, .dashboard-header, .card-header, .panel-header, .school-calm-hero-shell > div, .school-calm-hero-card > div) {
    flex-wrap: wrap !important;
    gap: .75rem !important;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel) :where(h1, h2, h3, h4, .page-title, .section-title, .card-title) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.15;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel) h1 {
    font-size: clamp(1.45rem, 6vw, 2rem) !important;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel) h2 {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
  }

  /* Workflow/task cards: compact on phones, two columns on larger phones. */
  .school-calm-workflow-strip,
  .legacy-coordinator-panel :where(.task-grid, .quick-action-grid, .action-grid, .dashboard-grid, .stats-grid),
  .admin-shell-main :where(.task-grid, .quick-action-grid, .action-grid, .dashboard-grid, .stats-grid) {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: .75rem !important;
    max-width: 100%;
    min-width: 0;
  }

  .school-calm-workflow-card,
  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.task-card, .quick-action-card, .action-card, .dashboard-action-card) {
    min-height: 0 !important;
    padding: .95rem !important;
    border-radius: 1rem !important;
    max-width: 100%;
    min-width: 0;
  }

  .school-calm-workflow-card :where(p, span, strong, small),
  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.task-card, .quick-action-card, .action-card, .dashboard-action-card) :where(p, span, strong, small) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Quick actions/action bars: horizontal safe scroll when many actions exist. */
  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.quick-actions, .quick-actions-row, .page-actions, .toolbar-actions, .header-actions, .action-buttons, .button-row, .btn-group, .button-group) {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem !important;
    max-width: 100%;
    min-width: 0;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.page-actions, .toolbar-actions, .header-actions, .quick-actions-row).mobile-scroll-actions,
  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.admin-edit-compact-nav, .tabs, .nav-tabs, .pills, .pill-row, .filter-pills) {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: .2rem;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.admin-edit-compact-nav, .tabs, .nav-tabs, .pills, .pill-row, .filter-pills) > * {
    flex: 0 0 auto;
    max-width: 78vw;
  }

  /* Buttons/links in dashboard areas: tap-safe without becoming huge. */
  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.quick-actions, .page-actions, .toolbar-actions, .header-actions, .action-buttons, .button-row, .btn-group, .button-group) :where(a, button, .btn, [role="button"]) {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }

  /* KPI/stat strips: do not force 3/4 columns on phone. */
  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.grid.grid-cols-2, .grid.grid-cols-3, .grid.grid-cols-4, .grid.grid-cols-5, .grid.grid-cols-6) > :where(.stat-card, .metric-card, .kpi-card, .summary-card) {
    min-width: 0;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.stat-value, .metric-value, .kpi-value, .dashboard-number) {
    font-size: clamp(1.35rem, 7vw, 2rem) !important;
    line-height: 1.1;
    word-break: break-word;
  }

  /* Filter/search bars: fields stack safely and actions stay tappable. */
  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.filter-bar, .search-bar, .table-toolbar, .list-toolbar, .bulk-toolbar) {
    display: flex;
    flex-wrap: wrap !important;
    gap: .65rem !important;
    max-width: 100%;
    min-width: 0;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.filter-bar, .search-bar, .table-toolbar, .list-toolbar, .bulk-toolbar) :where(input, select, textarea, button, a, .btn) {
    min-width: 0 !important;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.filter-bar, .search-bar, .table-toolbar, .list-toolbar, .bulk-toolbar) :where(input[type="search"], input[type="text"], select) {
    flex: 1 1 100%;
    width: 100% !important;
  }

  /* Badges/count chips should not stretch cards sideways. */
  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.badge, .pill, .tag, .status-pill, .count-pill, .school-calm-badge, [class*="badge"], [class*="pill"]) {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }
}

@media (min-width: 481px) and (max-width: 767.98px) {
  /* Larger phones/tablets can show dashboard/task cards two per row. */
  .school-calm-workflow-strip,
  .legacy-coordinator-panel :where(.task-grid, .quick-action-grid, .action-grid, .dashboard-grid, .stats-grid),
  .admin-shell-main :where(.task-grid, .quick-action-grid, .action-grid, .dashboard-grid, .stats-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 420px) {
  /* Very small phones: action rows become full-width and simple. */
  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.quick-actions, .page-actions, .toolbar-actions, .header-actions, .action-buttons, .button-row, .btn-group, .button-group) > :where(a, button, .btn, [role="button"]) {
    flex: 1 1 100%;
    width: 100%;
  }

  :where(.admin-shell-main, .legacy-coordinator-panel) :where(.school-calm-hero-shell, .school-calm-hero-card, .school-calm-panel, .school-calm-card, .dashboard-card, .stat-card, .metric-card, .kpi-card, .summary-card, .action-card) {
    padding: .85rem !important;
    border-radius: 1rem !important;
  }
}

/* Phase 6I: mobile public order checkout/payment safety
   CSS-only containment for student/teacher submit, private edit, legacy manage,
   payment/receipt panels, PayPal/hosted/card fallback blocks, and sticky save.
   No PHP, JS, database, order, payment, or admin save logic changes. */
@media (max-width: 767.98px) {
  /* Public order page shells must never create full-page horizontal scroll. */
  :where(.public-order-page, .order-manage-page) {
    max-width: 100vw;
    overflow-x: clip;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  :where(.public-order-page, .order-manage-page) :where(.public-order-stage, .public-order-shell, .order-manage-shell, main, form, section, article) {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  :where(.public-order-page, .order-manage-page) :where(.public-order-shell, .order-manage-shell) {
    border-radius: 1rem !important;
    box-shadow: 0 18px 42px -34px rgba(15, 23, 42, .42) !important;
  }

  :where(.public-order-page, .order-manage-page) :where(.public-order-stage, .order-manage-shell) {
    margin-left: auto;
    margin-right: auto;
  }

  :where(.public-order-page, .order-manage-page) :where(.p-6, .sm\:p-6, .px-6, .py-6) {
    padding: 1rem !important;
  }

  :where(.public-order-page, .order-manage-page) :where(.rounded-3xl) {
    border-radius: 1.1rem !important;
  }

  /* Product order rows: stacked, compact, and contained on mobile. */
  :where(.public-order-page, .order-manage-page) :where(.product-order-group, .fixed-product-group, .item-row, .item-back-print-panel) {
    max-width: 100%;
    min-width: 0;
    border-radius: 1rem !important;
    padding: 1rem !important;
    overflow: hidden;
  }

  :where(.public-order-page, .order-manage-page) :where(.product-order-rows) {
    max-width: 100%;
    min-width: 0;
    gap: .85rem !important;
  }

  :where(.public-order-page, .order-manage-page) :where(.product-order-group .grid, .item-row .grid, .item-back-print-panel .grid) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .85rem !important;
  }

  :where(.public-order-page, .order-manage-page) :where(.row-subtotal, #estimated-total, #teacher-estimated-total, #student-estimated-total) {
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.15;
  }

  :where(.public-order-page, .order-manage-page) :where(.remove-item-btn, .add-product-row-btn) {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    white-space: normal;
  }

  /* Payment/receipt panels and notices. */
  :where(.public-order-page, .order-manage-page) :where(#payment-section, [id$="payment-section"], #student-submit-pay-now-options, #teacher-submit-pay-now-options, #student-submit-paypal-panel, #teacher-submit-paypal-panel, #student-submit-card-panel, #teacher-submit-card-panel) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  :where(.public-order-page, .order-manage-page) :where(#payment-section, .payment-section, .payment-card, .payment-panel, .brand-soft-option) {
    border-radius: 1rem !important;
  }

  :where(.public-order-page, .order-manage-page) :where(#student-submit-payment-notice, #teacher-submit-payment-notice, #student-hosted-payment-notice, #teacher-hosted-payment-notice) {
    max-width: 100%;
    padding: 1rem !important;
    overflow-wrap: anywhere;
  }

  /* Payment method choices must be tap-safe and not behave like wide desktop rows. */
  :where(.public-order-page, .order-manage-page) :where(.student-submit-payment-method, .teacher-submit-payment-method, [data-submit-payment-method-button]) {
    min-height: 54px;
    width: 100%;
    max-width: 100%;
    align-items: center;
    border-radius: 1rem !important;
    padding: .85rem 1rem !important;
    white-space: normal;
  }

  :where(.public-order-page, .order-manage-page) :where(.student-submit-payment-method.flex-col, .teacher-submit-payment-method.flex-col) {
    align-items: flex-start;
  }

  :where(.public-order-page, .order-manage-page) :where(.payment-brand-icon, .student-submit-payment-method img, .teacher-submit-payment-method img) {
    max-width: 4.25rem;
    height: auto;
    flex: 0 0 auto;
  }

  /* Card gateway fallback blocks, PayPal SDK iframes/buttons, and hosted checkout buttons. */
  :where(.public-order-page, .order-manage-page) :where(#student-submit-card-panel, #teacher-submit-card-panel, #student-submit-paypal-panel, #teacher-submit-paypal-panel) :where(div, form, iframe, button, a) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  :where(.public-order-page, .order-manage-page) :where(#student-paypal-button-container, #teacher-paypal-button-container, [id*="paypal-button-container"], [id*="paypal"] iframe, [id*="card"] iframe) {
    max-width: 100% !important;
  }

  :where(.public-order-page, .order-manage-page) :where(#student-submit-payment-card-fallback, #teacher-submit-payment-card-fallback, [id$="payment-card-fallback"]) {
    width: 100%;
    min-height: 48px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  :where(.public-order-page, .order-manage-page) :where([data-submit-payment-trigger], #student-submit-pay-later-button, #teacher-submit-pay-later-button, #submit-student-order, #submit-teacher-order, button[type="submit"], a.brand-button-solid) {
    min-height: 48px;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  /* Receipt upload / legacy manage flow. */
  .order-manage-page :where(.order-manage-shell) {
    width: calc(100vw - 1rem) !important;
  }

  .order-manage-page :where(input[type="file"], input[type="number"], textarea, .bg-white.border.rounded-lg) {
    max-width: 100%;
    min-width: 0;
  }

  .order-manage-page :where(.bg-white.border.rounded-lg) {
    overflow-wrap: anywhere;
  }

  /* Sticky edit save bar must fit small phone screens and not cover content too heavily. */
  .order-edit-sticky-save {
    width: min(100%, calc(100vw - 1rem));
    margin-left: auto;
    margin-right: auto;
    bottom: .5rem;
    border-radius: 1rem !important;
    padding: .7rem !important;
  }

  .order-edit-sticky-save__meta,
  .order-edit-sticky-save__actions {
    max-width: 100%;
    min-width: 0;
  }

  .order-edit-sticky-save__title,
  .order-edit-sticky-save__label {
    overflow-wrap: anywhere;
  }

  .order-edit-sticky-save__link,
  .order-edit-sticky-save__button {
    min-height: 44px;
    width: 100%;
    white-space: normal;
  }

  /* Long order details, tokens, links, filenames, method labels. */
  :where(.public-order-page, .order-manage-page) :where(a, p, span, strong, small, label, dd, dt, li) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  :where(.public-order-page, .order-manage-page) :where(.public-order-stage, .public-order-hero, .public-order-shell, .order-manage-shell, form) {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  :where(.public-order-page, .order-manage-page) :where(h1) {
    font-size: clamp(1.45rem, 7vw, 1.8rem) !important;
    line-height: 1.15;
  }

  :where(.public-order-page, .order-manage-page) :where(h2) {
    font-size: clamp(1.15rem, 5.5vw, 1.35rem) !important;
    line-height: 1.2;
  }

  :where(.public-order-page, .order-manage-page) :where(.product-order-group, .fixed-product-group, .item-row, #payment-section, .payment-panel) {
    padding: .85rem !important;
  }
}

/* Phase 6K: mobile long admin/detail page safety
   CSS-only containment for long admin/settings/rule-manager/detail/receipt pages.
   No PHP, JS, database, admin save, coordinator payment, or order logic changes. */
@media (max-width: 900px) {
  .admin-shell-main,
  .admin-shell-main > .mx-auto,
  .admin-dashboard-ux .admin-shell-main,
  .admin-edit-school-ui .admin-shell-main,
  .school-calm-ux-page,
  .coordinator-page-clean,
  .public-order-page,
  .order-manage-page {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .admin-shell-main [class*="xl:grid-cols-"],
  .admin-shell-main [class*="lg:grid-cols-"],
  .admin-shell-main [class*="md:grid-cols-["],
  .coordinator-page-clean [class*="xl:grid-cols-"],
  .coordinator-page-clean [class*="lg:grid-cols-"],
  .coordinator-page-clean [class*="md:grid-cols-["],
  .public-order-page [class*="xl:grid-cols-"],
  .public-order-page [class*="lg:grid-cols-"],
  .public-order-page [class*="md:grid-cols-["] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-shell-main article,
  .admin-shell-main aside,
  .admin-shell-main section,
  .admin-shell-main form,
  .admin-shell-main .rounded-3xl,
  .admin-shell-main .rounded-2xl,
  .coordinator-page-clean article,
  .coordinator-page-clean aside,
  .coordinator-page-clean section,
  .coordinator-page-clean form,
  .coordinator-page-clean .rounded-3xl,
  .coordinator-page-clean .rounded-2xl {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .admin-shell-main form.shrink-0,
  .coordinator-page-clean form.shrink-0,
  .public-order-page form.shrink-0 {
    flex-shrink: 1 !important;
    width: 100%;
    max-width: 100%;
  }

  .admin-shell-main form.shrink-0 button,
  .coordinator-page-clean form.shrink-0 button,
  .public-order-page form.shrink-0 button {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }

  .admin-shell-main pre,
  .admin-shell-main code,
  .coordinator-page-clean pre,
  .coordinator-page-clean code,
  .public-order-page pre,
  .public-order-page code,
  .order-manage-page pre,
  .order-manage-page code {
    max-width: 100%;
    overflow-x: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .admin-shell-main pre,
  .coordinator-page-clean pre,
  .public-order-page pre,
  .order-manage-page pre {
    white-space: pre-wrap;
  }

  .admin-shell-main .inline-flex,
  .coordinator-page-clean .inline-flex,
  .public-order-page .inline-flex,
  .order-manage-page .inline-flex {
    max-width: 100%;
  }

  .admin-shell-main [class*="max-w-sm"],
  .admin-shell-main [class*="max-w-md"],
  .admin-shell-main [class*="max-w-lg"],
  .coordinator-page-clean [class*="max-w-sm"],
  .coordinator-page-clean [class*="max-w-md"],
  .coordinator-page-clean [class*="max-w-lg"] {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .admin-shell-main > .mx-auto {
    padding-left: .9rem !important;
    padding-right: .9rem !important;
  }

  .admin-shell-main h1,
  .admin-shell-main h2,
  .admin-shell-main h3,
  .coordinator-page-clean h1,
  .coordinator-page-clean h2,
  .coordinator-page-clean h3,
  .public-order-page h1,
  .public-order-page h2,
  .public-order-page h3 {
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .admin-shell-main h1,
  .coordinator-page-clean h1,
  .public-order-page h1 {
    font-size: clamp(1.35rem, 8vw, 1.85rem) !important;
    line-height: 1.14 !important;
  }

  .admin-shell-main h2,
  .coordinator-page-clean h2,
  .public-order-page h2 {
    font-size: clamp(1.08rem, 6vw, 1.35rem) !important;
    line-height: 1.22 !important;
  }

  .admin-shell-main .rounded-3xl,
  .coordinator-page-clean .rounded-3xl,
  .public-order-page .rounded-3xl,
  .order-manage-page .rounded-3xl {
    border-radius: 1rem !important;
  }

  .admin-shell-main .p-8,
  .coordinator-page-clean .p-8,
  .public-order-page .p-8,
  .order-manage-page .p-8 {
    padding: 1rem !important;
  }

  .admin-shell-main .p-6,
  .coordinator-page-clean .p-6,
  .public-order-page .p-6,
  .order-manage-page .p-6 {
    padding: .9rem !important;
  }

  .admin-shell-main .px-6,
  .coordinator-page-clean .px-6,
  .public-order-page .px-6,
  .order-manage-page .px-6 {
    padding-left: .9rem !important;
    padding-right: .9rem !important;
  }

  .admin-shell-main .py-8,
  .coordinator-page-clean .py-8,
  .public-order-page .py-8,
  .order-manage-page .py-8 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .admin-shell-main .space-y-3 > .flex.justify-between,
  .admin-shell-main .space-y-4 > .flex.justify-between,
  .coordinator-page-clean .space-y-3 > .flex.justify-between,
  .coordinator-page-clean .space-y-4 > .flex.justify-between,
  .order-manage-page .space-y-3 > .flex.justify-between,
  .order-manage-page .space-y-4 > .flex.justify-between {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: .25rem !important;
  }

  .admin-shell-main .space-y-3 > .flex.justify-between > *,
  .admin-shell-main .space-y-4 > .flex.justify-between > *,
  .coordinator-page-clean .space-y-3 > .flex.justify-between > *,
  .coordinator-page-clean .space-y-4 > .flex.justify-between > *,
  .order-manage-page .space-y-3 > .flex.justify-between > *,
  .order-manage-page .space-y-4 > .flex.justify-between > * {
    max-width: 100%;
    min-width: 0;
    text-align: left !important;
    overflow-wrap: anywhere;
  }

  .admin-shell-main [class*="w-["],
  .coordinator-page-clean [class*="w-["],
  .public-order-page [class*="w-["],
  .order-manage-page [class*="w-["] {
    max-width: 100% !important;
  }

  .admin-shell-main [class*="min-w-["],
  .coordinator-page-clean [class*="min-w-["],
  .public-order-page [class*="min-w-["],
  .order-manage-page [class*="min-w-["] {
    min-width: 0 !important;
  }

  .admin-shell-main img,
  .admin-shell-main svg,
  .coordinator-page-clean img,
  .coordinator-page-clean svg,
  .public-order-page img,
  .public-order-page svg,
  .order-manage-page img,
  .order-manage-page svg {
    height: auto;
    max-width: 100%;
  }

  .admin-shell-main a,
  .admin-shell-main button,
  .coordinator-page-clean a,
  .coordinator-page-clean button,
  .public-order-page a,
  .public-order-page button,
  .order-manage-page a,
  .order-manage-page button {
    overflow-wrap: anywhere;
  }
}

/* Phase 6L: mobile upload/import/export page safety
   CSS-only containment for bulk upload, design upload, import/export, template,
   file preview, and reconciliation action areas.
   No PHP, JS, database, admin save, coordinator payment, or order logic changes. */
@media (max-width: 900px) {
  .admin-shell-main [class*="upload"],
  .admin-shell-main [class*="Upload"],
  .admin-shell-main [class*="import"],
  .admin-shell-main [class*="Import"],
  .admin-shell-main [class*="export"],
  .admin-shell-main [class*="Export"],
  .admin-shell-main [class*="template"],
  .admin-shell-main [class*="Template"],
  .coordinator-page-clean [class*="upload"],
  .coordinator-page-clean [class*="Upload"],
  .coordinator-page-clean [class*="import"],
  .coordinator-page-clean [class*="Import"],
  .coordinator-page-clean [class*="export"],
  .coordinator-page-clean [class*="Export"],
  .coordinator-page-clean [class*="template"],
  .coordinator-page-clean [class*="Template"] {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  .admin-shell-main input[type="file"],
  .coordinator-page-clean input[type="file"],
  .public-order-page input[type="file"],
  .order-manage-page input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-size: 16px;
  }

  .admin-shell-main input[type="file"]::file-selector-button,
  .coordinator-page-clean input[type="file"]::file-selector-button,
  .public-order-page input[type="file"]::file-selector-button,
  .order-manage-page input[type="file"]::file-selector-button {
    min-height: 44px;
    max-width: 100%;
    margin: 0 .6rem .45rem 0;
    padding: .62rem .85rem;
    border-radius: .8rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .admin-shell-main .dropzone,
  .admin-shell-main .dz-message,
  .admin-shell-main .file-drop,
  .admin-shell-main .upload-zone,
  .admin-shell-main .upload-card,
  .admin-shell-main .import-card,
  .admin-shell-main .export-card,
  .coordinator-page-clean .dropzone,
  .coordinator-page-clean .dz-message,
  .coordinator-page-clean .file-drop,
  .coordinator-page-clean .upload-zone,
  .coordinator-page-clean .upload-card,
  .coordinator-page-clean .import-card,
  .coordinator-page-clean .export-card,
  .public-order-page .upload-zone,
  .order-manage-page .upload-zone {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 1rem !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .admin-shell-main .input-group,
  .coordinator-page-clean .input-group,
  .public-order-page .input-group,
  .order-manage-page .input-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: .5rem;
  }

  .admin-shell-main .input-group > *,
  .coordinator-page-clean .input-group > *,
  .public-order-page .input-group > *,
  .order-manage-page .input-group > * {
    min-width: 0;
    max-width: 100%;
  }

  .admin-shell-main .input-group > input,
  .admin-shell-main .input-group > select,
  .admin-shell-main .input-group > textarea,
  .coordinator-page-clean .input-group > input,
  .coordinator-page-clean .input-group > select,
  .coordinator-page-clean .input-group > textarea {
    flex: 1 1 12rem;
  }

  .admin-shell-main .input-group > button,
  .admin-shell-main .input-group > .btn,
  .admin-shell-main .input-group > a,
  .coordinator-page-clean .input-group > button,
  .coordinator-page-clean .input-group > .btn,
  .coordinator-page-clean .input-group > a {
    flex: 1 1 auto;
    justify-content: center;
  }

  .admin-shell-main .btn-group,
  .admin-shell-main .dt-buttons,
  .admin-shell-main .export-actions,
  .admin-shell-main .bulk-actions,
  .admin-shell-main .upload-actions,
  .coordinator-page-clean .btn-group,
  .coordinator-page-clean .dt-buttons,
  .coordinator-page-clean .export-actions,
  .coordinator-page-clean .bulk-actions,
  .coordinator-page-clean .upload-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    max-width: 100%;
    min-width: 0;
  }

  .admin-shell-main .btn-group > *,
  .admin-shell-main .dt-buttons > *,
  .admin-shell-main .export-actions > *,
  .admin-shell-main .bulk-actions > *,
  .admin-shell-main .upload-actions > *,
  .coordinator-page-clean .btn-group > *,
  .coordinator-page-clean .dt-buttons > *,
  .coordinator-page-clean .export-actions > *,
  .coordinator-page-clean .bulk-actions > *,
  .coordinator-page-clean .upload-actions > * {
    flex: 1 1 auto;
    min-width: 44px;
    max-width: 100%;
    justify-content: center;
    white-space: normal;
  }

  .admin-shell-main .progress,
  .admin-shell-main .progress-bar,
  .coordinator-page-clean .progress,
  .coordinator-page-clean .progress-bar,
  .public-order-page .progress,
  .public-order-page .progress-bar {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .admin-shell-main .alert ul,
  .admin-shell-main .alert ol,
  .coordinator-page-clean .alert ul,
  .coordinator-page-clean .alert ol,
  .public-order-page .alert ul,
  .public-order-page .alert ol {
    padding-left: 1.05rem;
  }
}

@media (max-width: 640px) {
  .admin-shell-main .btn-toolbar,
  .admin-shell-main .card-header,
  .admin-shell-main .card-footer,
  .coordinator-page-clean .btn-toolbar,
  .coordinator-page-clean .card-header,
  .coordinator-page-clean .card-footer {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: .55rem !important;
  }

  .admin-shell-main .btn-toolbar > *,
  .admin-shell-main .card-header > *,
  .admin-shell-main .card-footer > *,
  .coordinator-page-clean .btn-toolbar > *,
  .coordinator-page-clean .card-header > *,
  .coordinator-page-clean .card-footer > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .admin-shell-main .btn-toolbar a,
  .admin-shell-main .btn-toolbar button,
  .admin-shell-main .card-footer a,
  .admin-shell-main .card-footer button,
  .coordinator-page-clean .btn-toolbar a,
  .coordinator-page-clean .btn-toolbar button,
  .coordinator-page-clean .card-footer a,
  .coordinator-page-clean .card-footer button {
    width: 100%;
    justify-content: center;
  }

  .admin-shell-main .table-responsive,
  .admin-shell-main .dataTables_wrapper,
  .coordinator-page-clean .table-responsive,
  .coordinator-page-clean .dataTables_wrapper {
    margin-left: -.15rem;
    margin-right: -.15rem;
    border-radius: .9rem;
  }

  .admin-shell-main textarea[rows],
  .coordinator-page-clean textarea[rows],
  .public-order-page textarea[rows],
  .order-manage-page textarea[rows] {
    min-height: 7rem;
  }

  .admin-shell-main .dz-message,
  .admin-shell-main .file-drop,
  .admin-shell-main .upload-zone,
  .coordinator-page-clean .dz-message,
  .coordinator-page-clean .file-drop,
  .coordinator-page-clean .upload-zone,
  .public-order-page .upload-zone,
  .order-manage-page .upload-zone {
    min-height: 0 !important;
    text-align: left;
  }

  .admin-shell-main .dz-message .fa,
  .admin-shell-main .file-drop .fa,
  .admin-shell-main .upload-zone .fa,
  .coordinator-page-clean .dz-message .fa,
  .coordinator-page-clean .file-drop .fa,
  .coordinator-page-clean .upload-zone .fa {
    font-size: 1.25rem !important;
  }

  .admin-shell-main .list-group-item,
  .coordinator-page-clean .list-group-item {
    padding: .75rem .85rem;
    overflow-wrap: anywhere;
  }

  .admin-shell-main .list-group-item .d-flex,
  .coordinator-page-clean .list-group-item .d-flex {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: .5rem !important;
  }

  .admin-shell-main .list-group-item .d-flex > *,
  .coordinator-page-clean .list-group-item .d-flex > * {
    max-width: 100%;
    min-width: 0;
  }

  .admin-shell-main .form-check,
  .coordinator-page-clean .form-check,
  .public-order-page .form-check,
  .order-manage-page .form-check {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Phase 6M: mobile detail/receipt/print page safety
   CSS-only containment for admin/coordinator detail pages, receipt previews,
   payment status/return pages, print cards, and summary/key-value sections.
   No PHP, JS, database, admin save, coordinator payment, or order logic changes. */
@media (max-width: 900px) {
  .admin-shell-main .school-calm-hero-shell,
  .admin-shell-main .school-calm-hero-card,
  .admin-shell-main .school-calm-hero-subcard,
  .admin-shell-main .print-card,
  .admin-shell-main [class*="detail"],
  .admin-shell-main [class*="Detail"],
  .admin-shell-main [class*="receipt"],
  .admin-shell-main [class*="Receipt"],
  .admin-shell-main [class*="summary"],
  .admin-shell-main [class*="Summary"],
  .coordinator-page-clean .print-card,
  .coordinator-page-clean [class*="detail"],
  .coordinator-page-clean [class*="Detail"],
  .coordinator-page-clean [class*="receipt"],
  .coordinator-page-clean [class*="Receipt"],
  .coordinator-page-clean [class*="summary"],
  .coordinator-page-clean [class*="Summary"],
  .public-order-page [class*="receipt"],
  .public-order-page [class*="Receipt"],
  .public-order-page [class*="payment"],
  .public-order-page [class*="Payment"],
  .order-manage-page [class*="receipt"],
  .order-manage-page [class*="Receipt"],
  .order-manage-page [class*="payment"],
  .order-manage-page [class*="Payment"] {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .admin-shell-main .school-calm-hero-shell,
  .coordinator-page-clean > .max-w-6xl > section.no-print:first-child,
  .coordinator-page-clean > .max-w-7xl > section.no-print:first-child,
  .coordinator-page-clean > .mx-auto > section.no-print:first-child {
    border-radius: 1.25rem !important;
    padding: 1rem !important;
  }

  .admin-shell-main .school-calm-hero-copy,
  .admin-shell-main .school-calm-hero-card form,
  .admin-shell-main .school-calm-hero-card .flex,
  .coordinator-page-clean section.no-print .flex,
  .coordinator-page-clean .print-card .flex,
  .coordinator-page-clean [class*="detail"] .flex,
  .coordinator-page-clean [class*="receipt"] .flex {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .admin-shell-main .school-calm-hero-card,
  .admin-shell-main .school-calm-hero-subcard,
  .coordinator-page-clean .print-card,
  .coordinator-page-clean .bg-white.rounded-2xl,
  .coordinator-page-clean .bg-white.rounded-3xl,
  .public-order-page .bg-white.rounded-2xl,
  .order-manage-page .bg-white.rounded-2xl {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .admin-shell-main .school-calm-hero-code,
  .admin-shell-main code,
  .admin-shell-main kbd,
  .coordinator-page-clean code,
  .coordinator-page-clean kbd,
  .public-order-page code,
  .public-order-page kbd,
  .order-manage-page code,
  .order-manage-page kbd {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .admin-shell-main img,
  .admin-shell-main canvas,
  .admin-shell-main iframe,
  .admin-shell-main object,
  .admin-shell-main embed,
  .coordinator-page-clean img,
  .coordinator-page-clean canvas,
  .coordinator-page-clean iframe,
  .coordinator-page-clean object,
  .coordinator-page-clean embed,
  .public-order-page img,
  .public-order-page iframe,
  .public-order-page object,
  .public-order-page embed,
  .order-manage-page img,
  .order-manage-page iframe,
  .order-manage-page object,
  .order-manage-page embed {
    max-width: 100%;
    height: auto;
  }

  .admin-shell-main iframe,
  .admin-shell-main object,
  .admin-shell-main embed,
  .coordinator-page-clean iframe,
  .coordinator-page-clean object,
  .coordinator-page-clean embed,
  .public-order-page iframe,
  .public-order-page object,
  .public-order-page embed,
  .order-manage-page iframe,
  .order-manage-page object,
  .order-manage-page embed {
    width: 100%;
    min-height: 16rem;
    border-radius: 1rem;
  }

  .admin-shell-main .receipt-preview,
  .admin-shell-main .receipt-viewer,
  .admin-shell-main .document-preview,
  .coordinator-page-clean .receipt-preview,
  .coordinator-page-clean .receipt-viewer,
  .coordinator-page-clean .document-preview,
  .public-order-page .receipt-preview,
  .public-order-page .receipt-viewer,
  .public-order-page .document-preview,
  .order-manage-page .receipt-preview,
  .order-manage-page .receipt-viewer,
  .order-manage-page .document-preview {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 1rem;
  }

  .admin-shell-main dl,
  .coordinator-page-clean dl,
  .public-order-page dl,
  .order-manage-page dl {
    max-width: 100%;
    min-width: 0;
  }

  .admin-shell-main dt,
  .admin-shell-main dd,
  .coordinator-page-clean dt,
  .coordinator-page-clean dd,
  .public-order-page dt,
  .public-order-page dd,
  .order-manage-page dt,
  .order-manage-page dd {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 640px) {
  .admin-shell-main .school-calm-hero-shell,
  .admin-shell-main .school-calm-hero-card,
  .admin-shell-main .school-calm-hero-subcard,
  .coordinator-page-clean section.no-print,
  .coordinator-page-clean .print-card,
  .public-order-page section,
  .order-manage-page section {
    padding: .9rem !important;
    border-radius: 1rem !important;
  }

  .admin-shell-main .school-calm-hero-shell h1,
  .admin-shell-main .school-calm-hero-shell h2,
  .coordinator-page-clean section.no-print h1,
  .coordinator-page-clean section.no-print h2,
  .coordinator-page-clean .print-card h1,
  .coordinator-page-clean .print-card h2,
  .public-order-page h1,
  .public-order-page h2,
  .order-manage-page h1,
  .order-manage-page h2 {
    max-width: 100%;
    font-size: clamp(1.2rem, 7vw, 1.65rem) !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
  }

  .admin-shell-main .school-calm-hero-value,
  .coordinator-page-clean .text-3xl,
  .coordinator-page-clean .text-4xl,
  .public-order-page .text-3xl,
  .public-order-page .text-4xl,
  .order-manage-page .text-3xl,
  .order-manage-page .text-4xl {
    font-size: clamp(1.35rem, 7vw, 1.9rem) !important;
    line-height: 1.15 !important;
  }

  .admin-shell-main .school-calm-hero-copy,
  .admin-shell-main .school-calm-hero-label,
  .admin-shell-main .school-calm-hero-chip,
  .coordinator-page-clean .school-calm-hero-chip,
  .coordinator-page-clean .rounded-full,
  .public-order-page .rounded-full,
  .order-manage-page .rounded-full {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .admin-shell-main .school-calm-hero-card form,
  .admin-shell-main .school-calm-hero-card .flex,
  .coordinator-page-clean .print-card .flex,
  .coordinator-page-clean section.no-print .flex,
  .public-order-page .flex,
  .order-manage-page .flex {
    align-items: stretch !important;
    gap: .6rem !important;
  }

  .admin-shell-main .school-calm-hero-card form > *,
  .admin-shell-main .school-calm-hero-card .flex > *,
  .coordinator-page-clean .print-card .flex > *,
  .coordinator-page-clean section.no-print .flex > *,
  .public-order-page .flex > *,
  .order-manage-page .flex > * {
    max-width: 100%;
    min-width: 0;
  }

  .coordinator-page-clean [data-print-trigger],
  .coordinator-page-clean a[href*="export.php"],
  .admin-shell-main a[href*="export"],
  .admin-shell-main button[name*="print"],
  .public-order-page a[href*="receipt"],
  .order-manage-page a[href*="receipt"] {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    text-align: center;
  }

  .admin-shell-main .grid,
  .coordinator-page-clean .grid,
  .public-order-page .grid,
  .order-manage-page .grid {
    min-width: 0;
  }

  .admin-shell-main .print-card table,
  .coordinator-page-clean .print-card table,
  .public-order-page table,
  .order-manage-page table {
    min-inline-size: min(100%, 34rem);
  }

  .admin-shell-main .print-card,
  .coordinator-page-clean .print-card,
  .public-order-page .print-card,
  .order-manage-page .print-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Phase 6N: mobile sticky/nav/safe-area containment safety
   CSS-only safety for fixed/sticky headers, mobile drawers, bottom action bars,
   nav link groups, and safe-area inset spacing. No PHP, JS, database, admin save,
   coordinator payment, or order logic changes. */
@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
  }

  body.admin-shell-nav-open {
    width: 100%;
    max-width: 100%;
    overscroll-behavior: contain;
  }

  .admin-shell-sidebar,
  .admin-shell-backdrop,
  .modal,
  .fixed,
  [class*="fixed"] {
    max-width: 100vw;
    box-sizing: border-box;
  }

  .admin-shell-menu-button,
  .admin-shell-close,
  .legacy-coordinator-panel button,
  .legacy-coordinator-panel a[class*="rounded"],
  .public-order-page button,
  .public-order-page a[class*="rounded"],
  .admin-shell-main button,
  .admin-shell-main a[class*="rounded"] {
    -webkit-tap-highlight-color: rgba(47, 111, 104, .14);
  }

  .admin-shell-sidebar {
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .admin-shell-main,
  .legacy-coordinator-panel,
  .public-order-page main,
  .order-manage-page main {
    padding-bottom: max(1.25rem, calc(env(safe-area-inset-bottom) + 1rem));
  }

  .admin-shell-footer,
  .admin-shell-brand,
  .admin-shell-link,
  .legacy-coordinator-panel nav,
  .legacy-coordinator-panel header,
  .public-order-page nav,
  .public-order-page header {
    min-width: 0;
    max-width: 100%;
  }

  .admin-shell-footer {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .admin-shell-footer > *,
  .admin-shell-brand > *,
  .admin-shell-link > *,
  .legacy-coordinator-panel nav > *,
  .legacy-coordinator-panel header > *,
  .public-order-page nav > *,
  .public-order-page header > * {
    min-width: 0;
  }

  .admin-shell-logout {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .admin-shell-main :where(.sticky, [class*="sticky"]),
  .legacy-coordinator-panel :where(.sticky, [class*="sticky"]),
  .public-order-page :where(.sticky, [class*="sticky"]),
  .order-manage-page :where(.sticky, [class*="sticky"]) {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .admin-shell-main :where([class*="bottom-0"], [class*="fixed"]),
  .legacy-coordinator-panel :where([class*="bottom-0"], [class*="fixed"]),
  .public-order-page :where([class*="bottom-0"], [class*="fixed"]),
  .order-manage-page :where([class*="bottom-0"], [class*="fixed"]) {
    left: max(.5rem, env(safe-area-inset-left));
    right: max(.5rem, env(safe-area-inset-right));
    width: auto;
    max-width: calc(100vw - max(1rem, env(safe-area-inset-left) + env(safe-area-inset-right)));
  }

  .admin-shell-main :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]),
  .legacy-coordinator-panel :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]),
  .public-order-page :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]),
  .order-manage-page :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]) {
    bottom: env(safe-area-inset-bottom);
    border-radius: 1rem 1rem 0 0;
  }

  .admin-shell-main :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]) :where(.flex, form),
  .legacy-coordinator-panel :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]) :where(.flex, form),
  .public-order-page :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]) :where(.flex, form),
  .order-manage-page :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]) :where(.flex, form) {
    flex-wrap: wrap;
    align-items: stretch;
    gap: .6rem;
  }

  .admin-shell-main :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]) :where(button, a, input[type="submit"]),
  .legacy-coordinator-panel :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]) :where(button, a, input[type="submit"]),
  .public-order-page :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]) :where(button, a, input[type="submit"]),
  .order-manage-page :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]) :where(button, a, input[type="submit"]) {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
  }

  .admin-shell-main :where(.tabs, .nav, .navbar-nav, .breadcrumb, [role="tablist"], .pagination),
  .legacy-coordinator-panel :where(.tabs, .nav, .navbar-nav, .breadcrumb, [role="tablist"], .pagination),
  .public-order-page :where(.tabs, .nav, .navbar-nav, .breadcrumb, [role="tablist"], .pagination) {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    white-space: nowrap;
    scrollbar-width: thin;
  }

  .admin-shell-main :where(.tabs, .nav, .navbar-nav, .breadcrumb, [role="tablist"], .pagination) > *,
  .legacy-coordinator-panel :where(.tabs, .nav, .navbar-nav, .breadcrumb, [role="tablist"], .pagination) > *,
  .public-order-page :where(.tabs, .nav, .navbar-nav, .breadcrumb, [role="tablist"], .pagination) > * {
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  .admin-shell-menu-button {
    top: max(.65rem, env(safe-area-inset-top));
    left: max(.65rem, env(safe-area-inset-left));
    min-width: 44px;
    min-height: 44px;
    padding: .65rem .8rem;
  }

  .admin-shell-sidebar {
    width: 100vw;
    max-width: 100vw;
    border-right: 0;
    border-radius: 0;
  }

  .admin-shell-link {
    min-height: 44px;
    padding: .68rem .75rem;
  }

  .admin-shell-link-text,
  .admin-shell-brand .site-brand-title,
  .admin-shell-brand .site-brand-subtitle,
  .admin-shell-admin-name,
  .admin-shell-admin-role {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .admin-shell-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-shell-logout {
    width: 100%;
  }

  .legacy-coordinator-panel header,
  .public-order-page header,
  .order-manage-page header,
  .admin-shell-main header {
    overflow-wrap: anywhere;
  }

  .admin-shell-main :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]),
  .legacy-coordinator-panel :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]),
  .public-order-page :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]),
  .order-manage-page :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]) {
    padding: .75rem !important;
  }
}

/* Phase 6O: mobile tiny-screen/landscape final containment safety
   CSS-only final guard for very small phones, landscape phones, keyboard-height
   screens, fixed drawers, nested panels, and dense action rows. No PHP, JS,
   database, admin save, coordinator payment, or order logic changes. */
@media (max-width: 420px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .admin-shell-main,
  .legacy-coordinator-panel,
  .public-order-page,
  .order-manage-page,
  main,
  .container,
  .container-fluid {
    min-width: 0;
    max-width: 100%;
  }

  .admin-shell-main :where(.rounded-3xl, .rounded-2xl, .school-calm-card, .school-calm-panel, .school-calm-hero-card),
  .legacy-coordinator-panel :where(.rounded-3xl, .rounded-2xl, .school-calm-card, .school-calm-panel, .school-calm-hero-card),
  .public-order-page :where(.rounded-3xl, .rounded-2xl, .school-calm-card, .school-calm-panel, .school-calm-hero-card),
  .order-manage-page :where(.rounded-3xl, .rounded-2xl, .school-calm-card, .school-calm-panel, .school-calm-hero-card) {
    border-radius: 1rem !important;
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }

  .admin-shell-main :where(h1, .text-4xl, .text-3xl),
  .legacy-coordinator-panel :where(h1, .text-4xl, .text-3xl),
  .public-order-page :where(h1, .text-4xl, .text-3xl),
  .order-manage-page :where(h1, .text-4xl, .text-3xl) {
    font-size: clamp(1.35rem, 8vw, 1.85rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em;
  }

  .admin-shell-main :where(h2, .text-2xl),
  .legacy-coordinator-panel :where(h2, .text-2xl),
  .public-order-page :where(h2, .text-2xl),
  .order-manage-page :where(h2, .text-2xl) {
    font-size: clamp(1.15rem, 6vw, 1.45rem) !important;
    line-height: 1.2 !important;
  }

  .admin-shell-main :where(.gap-6, .gap-8, .gap-10),
  .legacy-coordinator-panel :where(.gap-6, .gap-8, .gap-10),
  .public-order-page :where(.gap-6, .gap-8, .gap-10),
  .order-manage-page :where(.gap-6, .gap-8, .gap-10) {
    gap: .85rem !important;
  }

  .admin-shell-main :where(.p-6, .p-8, .px-6, .px-8),
  .legacy-coordinator-panel :where(.p-6, .p-8, .px-6, .px-8),
  .public-order-page :where(.p-6, .p-8, .px-6, .px-8),
  .order-manage-page :where(.p-6, .p-8, .px-6, .px-8) {
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }

  .admin-shell-main :where(.grid-cols-2, .grid-cols-3, .grid-cols-4, [class*="grid-cols-"]),
  .legacy-coordinator-panel :where(.grid-cols-2, .grid-cols-3, .grid-cols-4, [class*="grid-cols-"]),
  .public-order-page :where(.grid-cols-2, .grid-cols-3, .grid-cols-4, [class*="grid-cols-"]),
  .order-manage-page :where(.grid-cols-2, .grid-cols-3, .grid-cols-4, [class*="grid-cols-"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-shell-main :where(button, .btn, a[class*="btn"], a[class*="rounded"]),
  .legacy-coordinator-panel :where(button, .btn, a[class*="btn"], a[class*="rounded"]),
  .public-order-page :where(button, .btn, a[class*="btn"], a[class*="rounded"]),
  .order-manage-page :where(button, .btn, a[class*="btn"], a[class*="rounded"]) {
    max-width: 100%;
    white-space: normal;
  }

  .admin-shell-main :where(.btn-group, .button-group, .action-group, .inline-flex),
  .legacy-coordinator-panel :where(.btn-group, .button-group, .action-group, .inline-flex),
  .public-order-page :where(.btn-group, .button-group, .action-group, .inline-flex),
  .order-manage-page :where(.btn-group, .button-group, .action-group, .inline-flex) {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .admin-shell-main :where(input, select, textarea),
  .legacy-coordinator-panel :where(input, select, textarea),
  .public-order-page :where(input, select, textarea),
  .order-manage-page :where(input, select, textarea) {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .admin-shell-sidebar,
  .modal-dialog,
  .modal-content,
  dialog,
  [role="dialog"] {
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-shell-sidebar {
    width: min(22rem, 92vw);
    padding-top: .75rem;
    padding-bottom: .75rem;
  }

  .admin-shell-nav,
  .admin-shell-menu,
  .admin-shell-sidebar nav {
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-shell-main,
  .legacy-coordinator-panel,
  .public-order-page,
  .order-manage-page {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }

  .admin-shell-main :where(.min-h-screen, [class*="min-h-screen"]),
  .legacy-coordinator-panel :where(.min-h-screen, [class*="min-h-screen"]),
  .public-order-page :where(.min-h-screen, [class*="min-h-screen"]),
  .order-manage-page :where(.min-h-screen, [class*="min-h-screen"]) {
    min-height: auto !important;
  }

  .admin-shell-main :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]),
  .legacy-coordinator-panel :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]),
  .public-order-page :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]),
  .order-manage-page :where(.fixed.bottom-0, [class*="fixed"][class*="bottom-0"]) {
    position: sticky !important;
    bottom: 0;
    max-height: 45dvh;
    overflow-y: auto;
  }
}

@media (hover: none) and (pointer: coarse) {
  .admin-shell-main :where(summary, button, .btn, a[class*="rounded"], input[type="checkbox"], input[type="radio"]),
  .legacy-coordinator-panel :where(summary, button, .btn, a[class*="rounded"], input[type="checkbox"], input[type="radio"]),
  .public-order-page :where(summary, button, .btn, a[class*="rounded"], input[type="checkbox"], input[type="radio"]),
  .order-manage-page :where(summary, button, .btn, a[class*="rounded"], input[type="checkbox"], input[type="radio"]) {
    touch-action: manipulation;
  }

  .admin-shell-main :where([title], [aria-label]),
  .legacy-coordinator-panel :where([title], [aria-label]),
  .public-order-page :where([title], [aria-label]),
  .order-manage-page :where([title], [aria-label]) {
    -webkit-tap-highlight-color: rgba(47, 111, 104, .16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-shell-sidebar,
  .admin-shell-backdrop,
  .legacy-coordinator-panel *,
  .public-order-page *,
  .order-manage-page *,
  .admin-shell-main * {
    scroll-behavior: auto !important;
  }
}

/* Phase 7B: residual mobile overflow audit fixes start.
   CSS-only containment for public order radial decorations, file-list nowrap
   items, and wallet-chip minimum widths left by the live audit. */
@media (max-width: 640px) {
  .public-order-stage::after {
    display: none !important;
  }

  .public-order-stage,
  .public-order-page,
  .order-page,
  .order-form-shell {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .payment-wallet-chip,
  .payment-wallet-icon {
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
  }

  .mp-file-list,
  .mp-file-list li {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .truncate,
  .text-nowrap,
  .whitespace-nowrap {
    max-width: 100% !important;
  }
}
/* Phase 7B: residual mobile overflow audit fixes end. */
/* Phase 7D: final mobile audit overflow-noise cleanup.
   Replaces residual mobile-only hard min-width/overflow-hidden patterns with contained logical sizing. */


/* Phase 7E: coordinator deadline/table/touch residual safety start.
   Static-audit cleanup only: contains the legacy coordinator deadline page,
   table candidates, and tiny button candidates without changing business logic. */
@media (max-width: 767.98px) {
  .coordinator-deadline-settings-mobile-safety {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
    box-sizing: border-box;
  }

  .coordinator-deadline-settings-mobile-safety .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 1rem;
  }

  .coordinator-deadline-settings-mobile-safety [class*="col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .coordinator-deadline-settings-mobile-safety .card,
  .coordinator-deadline-settings-mobile-safety .card-body,
  .coordinator-deadline-settings-mobile-safety .card-header,
  .coordinator-deadline-settings-mobile-safety form,
  .coordinator-deadline-settings-mobile-safety .form-group,
  .coordinator-deadline-settings-mobile-safety .alert {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }

  .admin-shell-main table,
  .school-calm-ux-page table,
  .coordinator-page-clean table,
  .coordinator-deadline-settings-mobile-safety table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-shell-main th,
  .admin-shell-main td,
  .school-calm-ux-page th,
  .school-calm-ux-page td,
  .coordinator-page-clean th,
  .coordinator-page-clean td,
  .coordinator-deadline-settings-mobile-safety th,
  .coordinator-deadline-settings-mobile-safety td {
    max-width: min(18rem, 78vw);
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

@media (max-width: 640px) {
  .admin-shell-main button[class*="text-xs"],
  .admin-shell-main a[class*="text-xs"],
  .school-calm-ux-page button[class*="text-xs"],
  .school-calm-ux-page a[class*="text-xs"],
  .coordinator-page-clean button[class*="text-xs"],
  .coordinator-page-clean a[class*="text-xs"],
  .coordinator-deadline-settings-mobile-safety button,
  .coordinator-deadline-settings-mobile-safety .btn,
  .coordinator-deadline-settings-mobile-safety a.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    line-height: 1.25;
  }

  .coordinator-deadline-settings-mobile-safety button,
  .coordinator-deadline-settings-mobile-safety .btn,
  .coordinator-deadline-settings-mobile-safety input,
  .coordinator-deadline-settings-mobile-safety select,
  .coordinator-deadline-settings-mobile-safety textarea {
    width: 100%;
    max-width: 100%;
  }
}
/* Phase 7E: coordinator deadline/table/touch residual safety end. */


/* Phase 8F V3: force compact coordinator controls and final design preview. */
.coordinator-page-clean :where(input[type="checkbox"], input[type="radio"]) {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
  flex: 0 0 1rem !important;
  padding: 0 !important;
  margin-top: .15rem !important;
  box-shadow: none !important;
  accent-color: var(--brand, #2f6f68);
}
.coordinator-page-clean input[type="checkbox"] { border-radius: .25rem !important; }
.coordinator-page-clean input[type="radio"] { border-radius: 999px !important; }
.coordinator-page-clean .phase8f-payment-settings { transition: border-color .18s ease, background .18s ease; }
.coordinator-page-clean .phase8f-payment-settings-collapsed > .mt-4,
.coordinator-page-clean .phase8f-payment-settings-collapsed > form,
.coordinator-page-clean .phase8f-payment-settings-collapsed > .grid { display: none !important; }
.coordinator-page-clean .coordinator-final-design-panel { max-width: 28rem; margin-left: auto; margin-right: auto; }
.coordinator-page-clean .coordinator-final-design-panel .aspect-\[4\/3\] {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  min-height: 11rem;
}
.coordinator-page-clean .coordinator-final-design-panel img {
  width: min(100%, 16rem) !important;
  height: auto !important;
  max-height: 14rem !important;
  object-fit: contain !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Product/order UI polish: compact single design previews. */
.coordinator-page-clean .coordinator-final-design-panel {
  max-width: 24rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.coordinator-page-clean .coordinator-final-design-panel .aspect-\[4\/3\] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 10rem !important;
  max-height: 13rem !important;
  background: #f8fafc !important;
}
.coordinator-page-clean .coordinator-final-design-panel img {
  width: auto !important;
  max-width: min(100%, 15rem) !important;
  height: auto !important;
  max-height: 12rem !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

/* Coordinator Product setup sidebar compact layout */
.coordinator-page-clean .coordinator-product-setup-card > .mt-4.grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

.coordinator-page-clean .coordinator-contact-visibility {
    padding: 12px !important;
}

.coordinator-page-clean .coordinator-contact-visibility > .grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
}

.coordinator-page-clean .coordinator-contact-visibility .mt-3.grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
}

.coordinator-page-clean .coordinator-contact-visibility label {
    display: flex !important;
    width: 100% !important;
    min-height: 40px !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

.coordinator-page-clean .coordinator-contact-visibility label input[type="checkbox"] {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.coordinator-page-clean .coordinator-product-payment-options > .mt-4.grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
}

.coordinator-page-clean .coordinator-product-payment-options select {
    width: 100% !important;
    min-width: 0 !important;
}

.coordinator-page-clean .coordinator-product-payment-options label {
    line-height: 1.3 !important;
}


/* Admin UI surgical fixes: action colors and status pills */
.admin-fix-action{border:1px solid transparent!important;text-decoration:none!important;box-shadow:none!important;}
.admin-fix-action-primary{background:#0f172a!important;color:#fff!important;border-color:#0f172a!important;}
.admin-fix-action-primary:hover{background:#1e293b!important;color:#fff!important;border-color:#1e293b!important;}
.admin-fix-action-export{background:#ecfdf5!important;color:#047857!important;border-color:#a7f3d0!important;}
.admin-fix-action-export:hover{background:#d1fae5!important;color:#065f46!important;border-color:#6ee7b7!important;}
.admin-fix-action-production{background:#fff7ed!important;color:#c2410c!important;border-color:#fed7aa!important;}
.admin-fix-action-production:hover{background:#ffedd5!important;color:#9a3412!important;border-color:#fdba74!important;}
.admin-fix-action-danger{background:#b91c1c!important;color:#fff!important;border-color:#b91c1c!important;}
.admin-fix-action-danger:hover{background:#991b1b!important;color:#fff!important;border-color:#991b1b!important;}
.admin-status-badge{border-width:1px!important;border-style:solid!important;border-radius:9999px!important;font-weight:800!important;}
.admin-status-collecting{background:#f8fafc!important;color:#334155!important;border-color:#cbd5e1!important;}
.admin-status-voting{background:#eff6ff!important;color:#1d4ed8!important;border-color:#bfdbfe!important;}
.admin-status-approved{background:#ecfdf5!important;color:#047857!important;border-color:#a7f3d0!important;}
.admin-status-production{background:#fffbeb!important;color:#b45309!important;border-color:#fde68a!important;}
.admin-status-shipped{background:#eef2ff!important;color:#4338ca!important;border-color:#c7d2fe!important;}
.admin-status-delivered{background:#f0fdf4!important;color:#15803d!important;border-color:#bbf7d0!important;}


/* Surgical UI fixes: order edit actions and admin payment URL label */
.order-service-danger-action {
  background: #dc2626 !important;
  border: 1px solid #b91c1c !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.order-service-danger-action:hover,
.order-service-danger-action:focus {
  background: #b91c1c !important;
  color: #ffffff !important;
}
.product-coordinator-payment-url-block > div > label {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .product-coordinator-payment-url-block > div > label {
    white-space: normal;
  }
}


/* Phase 34B admin polish */
.admin-shell-main .phase34b-dashboard-actions a,
.admin-shell-main a.phase34b-brand-button,
.admin-shell-main .brand-gradient-action,
.admin-shell-main button.brand-gradient-action {
  background: var(--brand, #2f6f68) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.admin-shell-main .status-check-ok,
.admin-shell-main .fa-check-circle,
.admin-shell-main .fa-circle-check,
.admin-shell-main .fa-check {
  color: #059669;
}
.admin-shell-main .product-catalog-presets-page,
.admin-shell-main form[action*="product-catalog-presets"],
.admin-shell-main table {
  max-width: 100%;
}


/* Phase 34C dashboard button and status polish */
.admin-shell-main :where(a,button).brand-gradient-action,
.admin-shell-main :where(a,button).primary-action,
.admin-shell-main :where(a,button)[href*="student-orders.php"],
.admin-shell-main :where(a,button)[href*="teacher-orders.php"],
.admin-shell-main :where(a,button)[href*="cancellations"],
.admin-shell-main :where(a,button)[href*="schools"] {
  background: var(--brand, #2f6f68) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.admin-shell-main .phase34b-collapse-toggle {
  background: var(--brand, #2f6f68) !important;
  color: #fff !important;
}