/* P023 — Unified Module Builder admin layout + accessible outlined app tiles.
   Additive layer; keeps P021 module data, P016 6-column widths and all original actions. */
/* Compact on/off control */
.p023-status-row{display:flex;justify-content:flex-end;align-items:center;min-width:0}
.p021-admin-status.p023-status-compact{display:inline-flex;width:max-content;max-width:100%;gap:10px;flex-wrap:nowrap;margin:0;padding:6px 7px 6px 11px;background:#f3f9f5;border:1px solid #d6e8dd;border-radius:999px;box-shadow:none}
.p021-admin-status.p023-status-compact label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;font-weight:700;color:#185d47}
.p021-admin-status.p023-status-compact input{width:15px;height:15px;accent-color:#0e7b55;margin:0}
.p021-admin-status.p023-status-compact button{font-size:12px;padding:7px 12px;border-radius:999px}
/* First pair: all modules on LEFT, module settings on RIGHT.
   Second pair: item form on LEFT, corresponding module items on RIGHT. */
.p023-module-grid,.p023-item-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;min-width:0}
.p023-module-grid>.p021-admin-card,.p023-item-grid>.p021-admin-card{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
.p023-module-grid .p021-admin-title h3,.p023-item-grid .p021-admin-title h3{font-size:16px}
.p023-module-grid .p021-module-row,.p023-item-grid .p021-item-row{gap:8px;padding:9px 10px}
.p023-module-grid .p021-module-actions,.p023-item-grid .p021-module-actions{flex-wrap:nowrap;gap:4px}
.p023-module-grid .p021-module-actions a,.p023-module-grid .p021-module-actions button,
.p023-item-grid .p021-module-actions a,.p023-item-grid .p021-module-actions button{width:31px;height:31px}
.p023-module-grid .p021-admin-title .p021-primary{padding:9px 10px;white-space:nowrap}
/* Preserve full labels and prevent form controls from overflowing half-width columns. */
.p023-module-grid .p021-form,.p023-item-grid .p021-form{min-width:0}
.p023-module-grid .p021-form :is(input,textarea,select),.p023-item-grid .p021-form :is(input,textarea,select){max-width:100%;box-sizing:border-box}
.p023-item-grid .p021-item-copy b,.p023-module-grid .p021-module-name b{overflow-wrap:anywhere}
@media(max-width:1250px){.p023-module-grid,.p023-item-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:540px){.p021-admin-status.p023-status-compact{padding:6px}.p023-module-grid,.p023-item-grid{gap:12px}.p023-module-grid .p021-module-actions,.p023-item-grid .p021-module-actions{flex-wrap:wrap}}

/* Unified card paint: let the CMS tone set a clean accent OUTLINE, not the fill. */
body.school-site-body #app-center .app-center-card,
body.school-site-body #external-links .office-service-card,
body.school-site-body .p021-items .p021-card{
  --p023-accent:#137a5c;
  position:relative!important;
  isolation:isolate;
  background:#fff!important;
  border:1.5px solid var(--p023-accent)!important;
  box-shadow:0 2px 10px rgba(12,54,39,.035)!important;
  transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease!important;
}
/* Colors are populated by the same tone-... saved in Website CMS. */
body.school-site-body :is(.app-center-card,.office-service-card,.p021-card).tone-green{--p023-accent:#13936a}
body.school-site-body :is(.app-center-card,.office-service-card,.p021-card).tone-teal{--p023-accent:#008e91}
body.school-site-body :is(.app-center-card,.office-service-card,.p021-card).tone-blue{--p023-accent:#3988e4}
body.school-site-body :is(.app-center-card,.office-service-card,.p021-card).tone-gold{--p023-accent:#c69728}
body.school-site-body :is(.app-center-card,.office-service-card,.p021-card).tone-orange{--p023-accent:#dd783d}
body.school-site-body :is(.app-center-card,.office-service-card,.p021-card).tone-purple{--p023-accent:#9165d9}
body.school-site-body :is(.app-center-card,.office-service-card,.p021-card).tone-pink{--p023-accent:#d65b93}
body.school-site-body :is(.app-center-card,.office-service-card,.p021-card).tone-navy{--p023-accent:#315a8f}
/* Running stroke is masked to the 2px border.  No moving color across card content. */
@property --p023-rotation{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes p023-border-run{to{--p023-rotation:360deg}}
body.school-site-body :is(.app-center-card,.office-service-card,.p021-card)::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:2;pointer-events:none;
  padding:2.5px;
  background:conic-gradient(from var(--p023-rotation),transparent 0deg,transparent 225deg,var(--p023-accent) 267deg,#ffffff 303deg,var(--p023-accent) 323deg,transparent 351deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
}
body.school-site-body :is(.app-center-card,.office-service-card,.p021-card):is(:hover,:focus-visible){
  transform:translateY(-3px)!important;
  box-shadow:0 10px 25px rgba(13,66,54,.12)!important;
  filter:none!important;
}
body.school-site-body :is(.app-center-card,.office-service-card,.p021-card):is(:hover,:focus-visible)::before{
  opacity:1;animation:p023-border-run 2.25s linear infinite;
}
/* Icon / logo floats slightly when the card receives pointer or keyboard focus. */
body.school-site-body :is(.app-center-icon,.office-service-icon,.p021-card-icon){transition:transform .34s cubic-bezier(.2,.8,.25,1),box-shadow .34s ease;transform-origin:center;will-change:transform}
body.school-site-body :is(.app-center-card,.office-service-card,.p021-card):is(:hover,:focus-visible) :is(.app-center-icon,.office-service-icon,.p021-card-icon){transform:translateY(-4px) rotate(-5deg) scale(1.07);box-shadow:0 5px 12px rgba(12,55,40,.1)}
body.school-site-body :is(.app-center-card,.office-service-card,.p021-card):focus-visible{outline:2px solid var(--p023-accent);outline-offset:4px}
@media(prefers-reduced-motion:reduce){
  body.school-site-body :is(.app-center-card,.office-service-card,.p021-card),
  body.school-site-body :is(.app-center-icon,.office-service-icon,.p021-card-icon){transition:none!important;transform:none!important;animation:none!important}
  body.school-site-body :is(.app-center-card,.office-service-card,.p021-card)::before{animation:none!important;opacity:0!important}
}