/*
 * Experience layer
 * Kept separate from the business styles so the ERP screens can evolve without
 * changing the document and transaction UI underneath.
 */
:root{
  --experience-ink:#15241f;
  --experience-muted:#70807a;
  --experience-line:#d8e2dd;
  --experience-surface:#ffffff;
  --experience-accent:#087d65;
  --experience-accent-soft:#e7f5ef;
  --experience-shadow:0 12px 30px rgba(23,48,39,.07);
}

html{scroll-behavior:smooth}
body:not(.login-page){
  background:
    radial-gradient(circle at 87% -10%,rgba(77,177,145,.11),transparent 26rem),
    radial-gradient(circle at 52% 104%,rgba(68,137,178,.07),transparent 30rem),
    #f1f5f3;
}

/* A compact, useful header instead of an empty strip on wide screens. */
.workspace>header{gap:18px}
.workspace-context{display:flex;min-width:0;align-items:center;gap:11px;margin-right:auto}
.workspace-context__toggle{display:grid;place-items:center;width:35px;min-width:35px;height:35px;padding:0;border-color:transparent;background:transparent;color:#4c5e57}
.workspace-context__toggle:hover{border-color:var(--experience-line);background:#f5f8f6;color:var(--experience-accent)}
.workspace-context__toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.workspace-context__copy{display:grid;min-width:0;gap:1px;line-height:1.25}
.workspace-context__eyebrow{overflow:hidden;color:#85928d;font-size:10px;font-weight:700;letter-spacing:.08em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
.workspace-context__title{overflow:hidden;color:var(--experience-ink);font-size:14px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}

.skip-link{position:fixed;z-index:200;top:10px;left:10px;padding:10px 13px;transform:translateY(-170%);border-radius:5px;background:var(--experience-accent);color:#fff;font-size:13px;font-weight:700;text-decoration:none;box-shadow:0 8px 20px rgba(4,72,57,.25);transition:transform .16s ease}
.skip-link:focus{transform:translateY(0);outline:3px solid rgba(255,255,255,.85);outline-offset:2px}

main{min-height:calc(100vh - 148px)}
.page-head{margin-top:2px}
.page-head h1{letter-spacing:.01em}
.page-head p{line-height:1.6}
#content .metrics:has(.metric:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(170px,1fr))}
#content .metric{isolation:isolate;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
#content .metric:hover{z-index:1;transform:translateY(-2px);border-color:#c7d7d0;box-shadow:0 10px 22px rgba(23,48,39,.09)}
#content .section{box-shadow:0 3px 12px rgba(20,48,38,.025);transition:box-shadow .16s ease,border-color .16s ease}
#content .section:hover{border-color:#ccd8d3;box-shadow:var(--experience-shadow)}
#content .section-title{background:linear-gradient(90deg,#fcfefd,#f7faf8)}
.section-title h2::before{box-shadow:0 0 0 3px rgba(8,120,98,.09)}

/* Make transient states feel intentional, including on slow intranet links. */
.loading{position:relative;gap:12px;color:#6f7e78!important;font-size:13px}
.loading::before{width:23px;height:23px;content:"";border:3px solid #d5e8e0;border-top-color:var(--experience-accent);border-radius:50%;animation:experience-spin .72s linear infinite}
.empty{color:#7b8984!important}
.empty::before{display:block;width:18px;height:11px;margin:0 auto 8px;content:"";border:1.5px solid #c3d2ca;border-radius:3px}
#toast{border:1px solid rgba(255,255,255,.18);background:#17352c;box-shadow:0 16px 36px rgba(13,32,25,.27)}

button:disabled,.button:disabled{cursor:not-allowed;opacity:.58;transform:none!important}
button:focus-visible,.button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 3px rgba(8,125,101,.18)!important}
input::placeholder,textarea::placeholder{color:#a0aaa6;opacity:1}

/* Desktop density: the navigation can be collapsed without sacrificing access. */
@media(min-width:901px){
  html[data-nav-collapsed="true"] .sidebar{width:76px}
  html[data-nav-collapsed="true"] .workspace{margin-left:76px}
  html[data-nav-collapsed="true"] .logo{justify-content:center;padding:0}
  html[data-nav-collapsed="true"] .logo strong{display:none}
  html[data-nav-collapsed="true"] .sidebar nav{padding-inline:10px}
  html[data-nav-collapsed="true"] .sidebar nav button{display:grid;padding:0;place-items:center;font-size:0}
  html[data-nav-collapsed="true"] .sidebar nav button i{width:32px;height:32px;margin:0}
  html[data-nav-collapsed="true"] .sidebar nav button.active::before{inset:10px auto 10px 0}
  html[data-nav-collapsed="true"] .user-block{display:none}
}

/* Authentication improvements shared by the main login and MFA flows. */
.password-field{position:relative;display:block}
.password-field input{padding-right:52px!important}
.password-toggle{position:absolute;top:50%;right:7px;width:auto!important;min-width:40px;height:30px!important;padding:0 7px!important;transform:translateY(-50%);border:0!important;background:transparent!important;color:#397060!important;font-size:11px!important;font-weight:700;box-shadow:none!important}
.password-toggle:hover{color:var(--experience-accent)!important;text-decoration:underline}
.password-caps{display:block;margin-top:6px;color:#a76017;font-size:11px;font-weight:600}.password-caps[hidden]{display:none!important}
.login-security-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:-3px;color:#71807a;font-size:11px}
.login-security-note::before{width:7px;height:7px;content:"";border-radius:50%;background:#36a980;box-shadow:0 0 0 3px rgba(54,169,128,.14)}
.login-form[aria-busy="true"] .primary{cursor:wait}

@keyframes experience-spin{to{transform:rotate(360deg)}}

@media(max-width:900px){
  .workspace-context__toggle{display:none}
}
@media(max-width:650px){
  .workspace>header{gap:8px}
  .workspace-context{max-width:38vw;margin-right:auto}
  .workspace-context__eyebrow{display:none}
  .workspace-context__title{font-size:13px}
  .header-meta{gap:7px}
  #content .metrics:has(.metric:nth-child(3):last-child){grid-template-columns:1fr}
  #content .metric:hover,#content .section:hover{transform:none;box-shadow:0 3px 12px rgba(20,48,38,.025)}
  .skip-link{left:8px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}