/*
 * BPW Population Worker Management System - unified blue + #FAF88E background and header layer v8
 * Scope: Admin ERP, Portal User Portal, Employee/Staff Portal, auth and intake pages.
 * Important: this file intentionally does not style the admin sidebar/navigation.
 */
:root{
  --bpw-v8-blue:#0057A8;
  --bpw-v8-blue-2:#0B73C9;
  --bpw-v8-navy:#062F63;
  --bpw-v8-deep:#031F42;
  --bpw-v8-yellow:#FAF88E;
  --bpw-v8-gold:#FDB515;
  --bpw-v8-ink:#102D50;
  --bpw-v8-muted:#5A718B;
  --bpw-v8-border:rgba(0,87,168,.18);
}

html{background:#edf6ff;}

/* Whole-system canvas: visible blue/yellow blend without sacrificing readability. */
body.role-standard,
body.role-viewer,
body.portal-page,
body.auth-page,
body.portal-auth-page,
body.hr-intake-body,
body.intake-public-page{
  color:var(--bpw-v8-ink)!important;
  background:
    radial-gradient(circle at 92% 2%,rgba(250,248,142,.78) 0,rgba(250,248,142,.34) 18%,rgba(250,248,142,0) 42%),
    radial-gradient(circle at 2% 26%,rgba(0,87,168,.22) 0,rgba(0,87,168,.09) 24%,rgba(0,87,168,0) 48%),
    linear-gradient(128deg,#e8f3ff 0%,#f7fbff 35%,#fffef0 67%,rgba(250,248,142,.68) 118%)!important;
  background-attachment:fixed!important;
}

.app-shell,
.main,
.portal-main{
  background:transparent!important;
}

/* =========================================================
   ADMIN / BACK-OFFICE PAGE HEADER
   ========================================================= */
body.role-standard .topbar,
body.role-viewer .topbar{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  min-height:92px!important;
  padding:18px 22px!important;
  margin-bottom:20px!important;
  border:1px solid rgba(0,87,168,.20)!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 94% 12%,rgba(250,248,142,.86) 0,rgba(250,248,142,.36) 25%,transparent 48%),
    radial-gradient(circle at 3% 85%,rgba(11,115,201,.18) 0,transparent 34%),
    linear-gradient(110deg,rgba(255,255,255,.97) 0%,rgba(237,246,255,.96) 45%,rgba(255,254,224,.96) 100%)!important;
  box-shadow:
    0 18px 44px rgba(6,47,99,.13),
    inset 0 1px 0 rgba(255,255,255,.92)!important;
}
body.role-standard .topbar::before,
body.role-viewer .topbar::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:0 auto 0 0!important;
  width:6px!important;
  background:linear-gradient(180deg,var(--bpw-v8-blue),var(--bpw-v8-gold),var(--bpw-v8-yellow))!important;
}
body.role-standard .topbar::after,
body.role-viewer .topbar::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  width:220px!important;
  height:220px!important;
  right:-72px!important;
  top:-116px!important;
  border:30px solid rgba(0,87,168,.055)!important;
  border-radius:50%!important;
}
body.role-standard .topbar>*,
body.role-viewer .topbar>*{
  position:relative!important;
  z-index:1!important;
}
body.role-standard .topbar h1,
body.role-viewer .topbar h1{
  color:var(--bpw-v8-navy)!important;
  font-size:clamp(25px,2vw,31px)!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
  line-height:1.12!important;
}
body.role-standard .topbar h1 .ico,
body.role-viewer .topbar h1 .ico{
  filter:drop-shadow(0 5px 9px rgba(0,87,168,.18));
}
body.role-standard .topbar small,
body.role-viewer .topbar small{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-top:8px!important;
  padding:5px 10px!important;
  color:#355f87!important;
  background:rgba(255,255,255,.68)!important;
  border:1px solid rgba(0,87,168,.12)!important;
  border-radius:999px!important;
  font-weight:650!important;
}
body.role-standard .topbar .userbox,
body.role-viewer .topbar .userbox{
  background:linear-gradient(120deg,rgba(255,255,255,.94),rgba(255,253,211,.88))!important;
  border:1px solid rgba(0,87,168,.20)!important;
  box-shadow:0 10px 24px rgba(6,47,99,.10)!important;
}

/* Module/page intro cards: blue at the left, soft yellow at the right. */
body.role-standard .module-head,
body.role-viewer .module-head,
body.role-standard .page-head,
body.role-viewer .page-head{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border-color:rgba(0,87,168,.18)!important;
  background:
    radial-gradient(circle at 98% 18%,rgba(250,248,142,.84),rgba(250,248,142,.20) 31%,transparent 53%),
    linear-gradient(112deg,rgba(255,255,255,.98),rgba(240,247,255,.96) 53%,rgba(255,254,224,.96))!important;
  box-shadow:0 14px 34px rgba(6,47,99,.09)!important;
}
body.role-standard .module-head::before,
body.role-viewer .module-head::before,
body.role-standard .page-head::before,
body.role-viewer .page-head::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:5px!important;
  background:linear-gradient(180deg,var(--bpw-v8-blue),var(--bpw-v8-blue-2),var(--bpw-v8-gold))!important;
}
body.role-standard :is(.module-head,.page-head) :is(h1,h2,h3,strong,b),
body.role-viewer :is(.module-head,.page-head) :is(h1,h2,h3,strong,b){
  color:var(--bpw-v8-navy)!important;
}

/* =========================================================
   PORTAL USER + EMPLOYEE/STAFF PORTAL HEADER
   ========================================================= */
body.portal-page .bpw-nextly-header{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body.portal-page .bpw-nextly-navbar,
body.portal-page.bpw-portal-final-v5 .bpw-nextly-navbar,
body.portal-page.bpw-portal-final-v5 header.bpw-nextly-header>.bpw-nextly-navbar{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  background:
    radial-gradient(circle at 95% 5%,rgba(250,248,142,.82) 0,rgba(250,248,142,.28) 28%,transparent 48%),
    radial-gradient(circle at 2% 94%,rgba(0,87,168,.16) 0,transparent 38%),
    linear-gradient(108deg,rgba(238,247,255,.98) 0%,rgba(255,255,255,.98) 53%,rgba(255,254,221,.98) 100%)!important;
  border:1px solid rgba(0,87,168,.22)!important;
  box-shadow:
    0 20px 50px rgba(6,47,99,.17),
    inset 0 1px 0 rgba(255,255,255,.92)!important;
}
body.portal-page .bpw-nextly-navbar::before{
  content:""!important;
  position:absolute!important;
  left:28px!important;
  right:28px!important;
  top:0!important;
  height:3px!important;
  border-radius:0 0 999px 999px!important;
  background:linear-gradient(90deg,var(--bpw-v8-blue),var(--bpw-v8-blue-2) 46%,var(--bpw-v8-gold),var(--bpw-v8-yellow))!important;
  opacity:.92!important;
}
body.portal-page .bpw-nextly-brand-copy :is(b,small,em),
body.portal-page .bpw-nextly-profile-copy :is(b,small),
body.portal-page .bpw-nextly-nav-toggle,
body.portal-page .bpw-nextly-nav>a{
  color:var(--bpw-v8-navy)!important;
}

/* Generic portal page hero/header used by the non-dashboard portal pages. */
body.portal-page .portal-hero:not(.employee-dashboard-hero),
body.portal-page .portal-page-head,
body.portal-page .portal-section-head{
  position:relative!important;
  overflow:hidden!important;
  color:#fff!important;
  border:1px solid rgba(253,181,21,.38)!important;
  background:
    radial-gradient(circle at 92% 8%,rgba(250,248,142,.34),transparent 34%),
    linear-gradient(118deg,var(--bpw-v8-deep),var(--bpw-v8-navy) 38%,var(--bpw-v8-blue) 76%,var(--bpw-v8-blue-2))!important;
  box-shadow:0 18px 42px rgba(6,47,99,.20)!important;
}
body.portal-page .portal-hero:not(.employee-dashboard-hero) :is(h1,h2,h3,p,span,strong,b,small,em),
body.portal-page .portal-page-head :is(h1,h2,h3,p,span,strong,b,small,em),
body.portal-page .portal-section-head :is(h1,h2,h3,p,span,strong,b,small,em){
  color:#fff!important;
}
body.portal-page .portal-hero:not(.employee-dashboard-hero) .eyebrow{
  color:var(--bpw-v8-yellow)!important;
}

/* =========================================================
   AUTH / PUBLIC INTAKE SURFACES
   ========================================================= */
body.auth-page .auth-wrap,
body.portal-auth-page .auth-wrap,
body.hr-intake-body .hr-intake-card,
body.intake-public-page .intake-card{
  box-shadow:0 24px 64px rgba(6,47,99,.16)!important;
}

/* Ensure cards stay readable over the more colorful page background. */
body.role-standard :is(.card,.stat-card,.table-wrap,.pagination-wrap),
body.role-viewer :is(.card,.stat-card,.table-wrap,.pagination-wrap),
body.portal-page :is(.portal-card-panel,.portal-panel,.portal-section,.portal-stat){
  backdrop-filter:saturate(110%) blur(1.5px);
  -webkit-backdrop-filter:saturate(110%) blur(1.5px);
}

/* Sidebar is intentionally untouched. */

@media(max-width:900px){
  body.role-standard .topbar,
  body.role-viewer .topbar{
    min-height:78px!important;
    padding:15px 16px!important;
    border-radius:17px!important;
  }
  body.role-standard .topbar h1,
  body.role-viewer .topbar h1{font-size:23px!important;}
  body.portal-page .bpw-nextly-navbar::before{left:18px!important;right:18px!important;}
}

@media(max-width:640px){
  body.role-standard,
  body.role-viewer,
  body.portal-page,
  body.auth-page,
  body.portal-auth-page,
  body.hr-intake-body,
  body.intake-public-page{
    background:
      radial-gradient(circle at 96% 1%,rgba(250,248,142,.62),transparent 38%),
      radial-gradient(circle at 0 30%,rgba(0,87,168,.15),transparent 42%),
      linear-gradient(145deg,#edf6ff,#fffef0 72%,rgba(250,248,142,.45))!important;
  }
  body.role-standard .topbar,
  body.role-viewer .topbar{align-items:flex-start!important;}
  body.role-standard .topbar .userbox,
  body.role-viewer .topbar .userbox{max-width:100%!important;}
}