/*
 * NOUNUniversity Platform UI — shared public + Student Workspace feedback layer.
 * Owns transient UI only: toasts, notices, loading progress, busy controls and dialogs.
 */
:root{
  --nu-ui-canvas:#f4f6f2;
  --nu-ui-surface:#ffffff;
  --nu-ui-surface-2:#f3f7f4;
  --nu-ui-text:#14251b;
  --nu-ui-muted:#5d6e63;
  --nu-ui-border:#c9d4cd;
  --nu-ui-primary:#0b6b40;
  --nu-ui-primary-strong:#07522f;
  --nu-ui-success:#167448;
  --nu-ui-success-bg:#edf8f1;
  --nu-ui-warning:#755d08;
  --nu-ui-warning-bg:#fff8dc;
  --nu-ui-danger:#9a2f2f;
  --nu-ui-danger-bg:#fff0f0;
  --nu-ui-info:#245b72;
  --nu-ui-info-bg:#edf7fb;
  --nu-ui-shadow:0 18px 48px rgba(13,35,24,.14);
  --nu-ui-z-progress:2147483000;
  --nu-ui-z-toast:2147483100;
  --nu-ui-z-dialog:2147482900;
}
html[data-theme="dark"],
body[data-theme="dark"],
body.dark-mode,
body.is-dark,
body.nsp-dark{
  --nu-ui-canvas:#0d1511;
  --nu-ui-surface:#0f1a14;
  --nu-ui-surface-2:#14231a;
  --nu-ui-text:#f2f7f4;
  --nu-ui-muted:#b7c6bd;
  --nu-ui-border:#315143;
  --nu-ui-primary:#2f8d5b;
  --nu-ui-primary-strong:#3ba46c;
  --nu-ui-success:#8bd7a8;
  --nu-ui-success-bg:#143423;
  --nu-ui-warning:#f1db83;
  --nu-ui-warning-bg:#302a12;
  --nu-ui-danger:#ffbcbc;
  --nu-ui-danger-bg:#3a1c1c;
  --nu-ui-info:#b8def0;
  --nu-ui-info-bg:#16303b;
  --nu-ui-shadow:0 18px 48px rgba(0,0,0,.34);
}

/* Route / operation progress */
#nu-ui-progress{
  position:fixed;
  z-index:var(--nu-ui-z-progress);
  top:0;
  left:0;
  width:100%;
  height:3px;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .16s ease,visibility .16s ease;
}
body.admin-bar #nu-ui-progress{top:var(--wp-admin--admin-bar--height,32px)}
#nu-ui-progress[data-active="1"]{opacity:1;visibility:visible}
#nu-ui-progress__bar{
  width:0%;
  height:100%;
  background:var(--nu-ui-primary);
  box-shadow:0 0 12px color-mix(in srgb,var(--nu-ui-primary) 38%,transparent);
  transition:width .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
}
#nu-ui-progress[data-complete="1"] #nu-ui-progress__bar{opacity:0}

/* Existing top-level app-shell progress keeps ownership of its timing; this layer only harmonizes its theme tokens. */
.nu-ui-adapted-progress{
  accent-color:var(--nu-ui-primary)!important;
  color:var(--nu-ui-primary)!important;
  --progress-color:var(--nu-ui-primary);
  --progress-accent:var(--nu-ui-primary);
}

/* Toasts */
#nu-ui-toast-region{
  position:fixed;
  z-index:var(--nu-ui-z-toast);
  top:max(18px,env(safe-area-inset-top));
  right:max(18px,env(safe-area-inset-right));
  width:min(390px,calc(100vw - 36px));
  display:grid;
  gap:10px;
  pointer-events:none;
}
body.admin-bar #nu-ui-toast-region{top:calc(var(--wp-admin--admin-bar--height,32px) + 14px)}
.nu-ui-toast{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:4px minmax(0,1fr) auto;
  gap:0;
  align-items:stretch;
  min-height:58px;
  border:1px solid var(--nu-ui-border);
  background:var(--nu-ui-surface);
  color:var(--nu-ui-text);
  box-shadow:var(--nu-ui-shadow);
  pointer-events:auto;
  overflow:hidden;
  transform:translateY(-6px);
  opacity:0;
  transition:opacity .18s ease,transform .18s ease;
}
.nu-ui-toast[data-open="1"]{opacity:1;transform:none}
.nu-ui-toast__accent{background:var(--nu-ui-primary)}
.nu-ui-toast[data-kind="success"] .nu-ui-toast__accent{background:var(--nu-ui-success)}
.nu-ui-toast[data-kind="warning"] .nu-ui-toast__accent{background:var(--nu-ui-warning)}
.nu-ui-toast[data-kind="error"] .nu-ui-toast__accent{background:var(--nu-ui-danger)}
.nu-ui-toast[data-kind="info"] .nu-ui-toast__accent{background:var(--nu-ui-info)}
.nu-ui-toast__body{min-width:0;padding:12px 14px}
.nu-ui-toast__title{display:block;margin:0 0 3px;font-weight:800;font-size:.94rem;line-height:1.3;color:inherit}
.nu-ui-toast__message{margin:0;color:var(--nu-ui-muted);font-size:.86rem;line-height:1.45;overflow-wrap:anywhere}
.nu-ui-toast__close{
  width:42px;
  min-height:42px;
  border:0;
  border-left:1px solid var(--nu-ui-border);
  background:transparent;
  color:var(--nu-ui-muted);
  font:700 20px/1 system-ui,sans-serif;
  cursor:pointer;
}
.nu-ui-toast__close:hover,.nu-ui-toast__close:focus-visible{color:var(--nu-ui-text);background:var(--nu-ui-surface-2)}
.nu-ui-toast__close:focus-visible{outline:2px solid var(--nu-ui-primary);outline-offset:-3px}

/* Shared notice ownership. JS adds the class only to transient/status elements. */
.nu-ui-adapted-notice,
.nu-ui-notice{
  box-sizing:border-box!important;
  width:100%!important;
  margin:12px 0!important;
  padding:12px 14px!important;
  border:1px solid var(--nu-ui-border)!important;
  border-left:3px solid var(--nu-ui-info)!important;
  background:var(--nu-ui-info-bg)!important;
  color:var(--nu-ui-text)!important;
  -webkit-text-fill-color:currentColor!important;
  font:inherit!important;
  line-height:1.5!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.nu-ui-adapted-notice :where(p,span,small,strong,b,a),
.nu-ui-notice :where(p,span,small,strong,b,a){color:inherit!important;-webkit-text-fill-color:currentColor!important}
.nu-ui-adapted-notice :where(p):first-child,.nu-ui-notice :where(p):first-child{margin-top:0!important}
.nu-ui-adapted-notice :where(p):last-child,.nu-ui-notice :where(p):last-child{margin-bottom:0!important}
.nu-ui-adapted-notice[data-nu-kind="success"],.nu-ui-notice[data-kind="success"]{border-left-color:var(--nu-ui-success)!important;background:var(--nu-ui-success-bg)!important}
.nu-ui-adapted-notice[data-nu-kind="warning"],.nu-ui-notice[data-kind="warning"]{border-left-color:var(--nu-ui-warning)!important;background:var(--nu-ui-warning-bg)!important}
.nu-ui-adapted-notice[data-nu-kind="error"],.nu-ui-notice[data-kind="error"]{border-left-color:var(--nu-ui-danger)!important;background:var(--nu-ui-danger-bg)!important}
.nu-ui-adapted-notice[data-nu-kind="info"],.nu-ui-notice[data-kind="info"]{border-left-color:var(--nu-ui-info)!important;background:var(--nu-ui-info-bg)!important}

/* Busy controls + inline loading */
.nu-ui-busy-button{position:relative!important;cursor:wait!important;padding-right:42px!important}
.nu-ui-busy-button::after,
.nu-ui-adapted-loader::before,
.nu-ui-spinner{
  content:"";
  box-sizing:border-box;
  width:16px;
  height:16px;
  border:2px solid color-mix(in srgb,currentColor 24%,transparent);
  border-top-color:currentColor;
  border-radius:50%;
  animation:nu-ui-spin .72s linear infinite;
}
.nu-ui-busy-button::after{position:absolute;right:14px;top:50%;margin-top:-8px}
.nu-ui-adapted-loader{
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:var(--nu-ui-muted)!important;
  -webkit-text-fill-color:currentColor!important;
}
.nu-ui-adapted-loader::before{flex:0 0 auto}
@keyframes nu-ui-spin{to{transform:rotate(360deg)}}

/* Dialog / popup compatibility */
.nu-ui-adapted-dialog{
  --nu-dialog-surface:var(--nu-ui-surface);
  --nu-dialog-text:var(--nu-ui-text);
  --nu-dialog-muted:var(--nu-ui-muted);
  --nu-dialog-border:var(--nu-ui-border);
  box-sizing:border-box!important;
  color:var(--nu-dialog-text)!important;
  -webkit-text-fill-color:currentColor;
  background:var(--nu-dialog-surface)!important;
  border:1px solid var(--nu-dialog-border)!important;
  border-radius:0!important;
  box-shadow:var(--nu-ui-shadow)!important;
}
dialog.nu-ui-adapted-dialog{max-width:min(680px,calc(100vw - 32px));max-height:min(84dvh,860px);padding:0;overflow:auto}
dialog.nu-ui-adapted-dialog::backdrop{background:rgba(6,18,11,.58);backdrop-filter:none}
.nu-ui-adapted-dialog :where(h1,h2,h3,h4,strong,b){color:var(--nu-dialog-text)!important;-webkit-text-fill-color:currentColor!important}
.nu-ui-adapted-dialog :where(p,small,label,.muted,[class*="muted"]){color:var(--nu-dialog-muted)!important;-webkit-text-fill-color:currentColor!important}
.nu-ui-adapted-dialog :where(input,select,textarea){background:var(--nu-ui-surface)!important;color:var(--nu-ui-text)!important;border-color:var(--nu-ui-border)!important}
.nu-ui-adapted-dialog :where(button,a):focus-visible{outline:2px solid var(--nu-ui-primary)!important;outline-offset:2px!important}

/* Existing theme/plugin toasts are normalized after JS marks them. */
.nu-ui-existing-toast{
  box-sizing:border-box!important;
  border:1px solid var(--nu-ui-border)!important;
  background:var(--nu-ui-surface)!important;
  color:var(--nu-ui-text)!important;
  -webkit-text-fill-color:currentColor!important;
  box-shadow:var(--nu-ui-shadow)!important;
  border-radius:0!important;
}
.nu-ui-existing-toast :where(p,span,strong,small){color:inherit!important;-webkit-text-fill-color:currentColor!important}
.nu-ui-existing-toast:empty{display:none!important}

@media(max-width:767px){
  #nu-ui-toast-region{
    top:auto;
    right:max(12px,env(safe-area-inset-right));
    bottom:calc(max(12px,env(safe-area-inset-bottom)) + var(--nu-mobile-nav-offset,68px));
    width:calc(100vw - max(24px,env(safe-area-inset-left) + env(safe-area-inset-right)));
  }
  body.admin-bar #nu-ui-toast-region{top:auto}
  .nu-ui-toast{grid-template-columns:4px minmax(0,1fr) 40px}
  .nu-ui-toast__body{padding:11px 12px}
  dialog.nu-ui-adapted-dialog{max-width:calc(100vw - 20px);max-height:88dvh}
}
@media(orientation:landscape) and (max-height:620px){
  #nu-ui-toast-region{top:10px;bottom:auto;width:min(360px,calc(100vw - 20px))}
  .nu-ui-toast{min-height:50px}
  .nu-ui-toast__body{padding:9px 11px}
  dialog.nu-ui-adapted-dialog{max-height:92dvh}
}
@media(prefers-reduced-motion:reduce){
  #nu-ui-progress,#nu-ui-progress__bar,.nu-ui-toast{transition:none!important}
  .nu-ui-busy-button::after,.nu-ui-adapted-loader::before,.nu-ui-spinner{animation-duration:1.6s!important}
}
@media(forced-colors:active){
  #nu-ui-progress__bar{background:Highlight;box-shadow:none}
  .nu-ui-toast,.nu-ui-adapted-notice,.nu-ui-notice,.nu-ui-adapted-dialog,.nu-ui-existing-toast{background:Canvas!important;color:CanvasText!important;border-color:CanvasText!important;box-shadow:none!important}
  .nu-ui-toast__accent{background:Highlight!important}
  .nu-ui-toast__close{color:ButtonText!important;border-color:ButtonText!important}
}