/* Premium visual trial: intentionally limited to the People Directory page. */
#app:has(#peopleTable){
  position:relative;
  isolation:isolate;
  padding-top:30px;
}

#app:has(#peopleTable)::before{
  content:'';
  position:absolute;
  z-index:-1;
  inset:0 0 auto;
  height:260px;
  border-radius:0 0 32px 32px;
  background:
    radial-gradient(circle at 1px 1px,rgba(8,127,117,.085) 1px,transparent 1.2px) 0 0/18px 18px,
    linear-gradient(135deg,rgba(230,245,241,.88),rgba(247,251,250,.35) 52%,rgba(217,237,234,.7));
  pointer-events:none;
}

#app:has(#peopleTable) .page-head{
  position:relative;
  overflow:hidden;
  align-items:center;
  min-height:164px;
  margin-bottom:22px;
  padding:28px 30px;
  border:1px solid rgba(8,127,117,.2);
  border-radius:20px;
  background:
    radial-gradient(circle at 85% 12%,rgba(255,255,255,.24) 0 7%,transparent 7.2%),
    linear-gradient(118deg,#0b4d4a 0%,#087f75 54%,#0a9a8c 100%);
  box-shadow:0 18px 45px rgba(8,77,72,.17),inset 0 1px rgba(255,255,255,.18);
  color:#fff;
}

#app:has(#peopleTable) .page-head::after{
  content:'';
  position:absolute;
  right:-65px;
  bottom:-115px;
  width:300px;
  height:300px;
  border:44px solid rgba(255,255,255,.055);
  border-radius:50%;
  pointer-events:none;
}

#app:has(#peopleTable) .page-head>div{
  position:relative;
  z-index:1;
}

#app:has(#peopleTable) .eyebrow{
  color:#a9eee4;
  font-size:11px;
  letter-spacing:2px;
}

#app:has(#peopleTable) .page-head h1{
  margin:7px 0 6px;
  font-size:32px;
  letter-spacing:-.85px;
}

#app:has(#peopleTable) .page-head p{
  max-width:610px;
  color:#d8f0ed;
  font-size:14px;
  line-height:1.55;
}

#app:has(#peopleTable) .head-actions{
  flex-wrap:wrap;
  justify-content:flex-end;
}

#app:has(#peopleTable) .head-actions .btn,
#app:has(#peopleTable) .head-actions .export-menu>summary{
  min-height:42px;
  padding:11px 16px;
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 24px rgba(4,49,46,.12);
  font-size:12px;
}

#app:has(#peopleTable) .head-actions .btn.primary{
  border-color:#fff;
  background:#fff;
  color:#087f75;
}

#app:has(#peopleTable)>.panel{
  border-color:#d7e5e2;
  border-radius:18px;
  box-shadow:0 16px 42px rgba(23,67,63,.1),0 2px 8px rgba(23,67,63,.04);
}

#app:has(#peopleTable)>.panel>.panel-head{
  padding:20px 22px 17px;
  background:
    linear-gradient(90deg,rgba(230,245,241,.72),rgba(255,255,255,.85) 46%),
    radial-gradient(circle at 1px 1px,rgba(8,127,117,.07) 1px,transparent 1px) 0 0/14px 14px;
}

#app:has(#peopleTable)>.panel>.panel-head h2{
  font-size:17px;
}

#app:has(#peopleTable)>.panel>.panel-head p{
  margin-top:5px;
  font-size:12px;
}

#app:has(#peopleTable) .filter-row{
  gap:12px;
  padding:16px 20px;
  background:#fbfdfc;
}

#app:has(#peopleTable) .filter-row input,
#app:has(#peopleTable) .filter-row select{
  min-height:42px;
  border-color:#d5e3e1;
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  box-shadow:inset 0 1px 2px rgba(22,62,59,.03);
  font-size:13px;
}

#app:has(#peopleTable) .filter-row input:focus,
#app:has(#peopleTable) .filter-row select:focus{
  border-color:#48a99f;
  box-shadow:0 0 0 3px rgba(8,127,117,.1);
}

#app:has(#peopleTable) #peopleTable{
  overflow-x:auto;
  background:
    linear-gradient(180deg,rgba(247,251,250,.42),transparent 52px),
    #fff;
}

#app:has(#peopleTable) #peopleTable th{
  padding:13px 15px;
  background:#f2f7f6;
  color:#56716e;
  font-size:10px;
  letter-spacing:.8px;
}

#app:has(#peopleTable) #peopleTable td{
  padding:15px;
  color:#243a3e;
  font-size:13px;
  line-height:1.45;
}

#app:has(#peopleTable) #peopleTable tbody tr{
  transition:background .18s ease,box-shadow .18s ease;
}

#app:has(#peopleTable) #peopleTable tbody tr:nth-child(even){
  background:rgba(246,250,249,.7);
}

#app:has(#peopleTable) #peopleTable tbody tr:hover{
  background:#f0faf7;
  box-shadow:inset 4px 0 #0ba596;
}

#app:has(#peopleTable) #peopleTable .person{
  gap:12px;
}

#app:has(#peopleTable) #peopleTable .person-pic{
  width:40px;
  height:40px;
  border:1px solid rgba(8,127,117,.14);
  border-radius:12px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.68),transparent),
    var(--bg,#dff3f0);
  box-shadow:0 5px 12px rgba(27,79,74,.09);
  font-size:11px;
}

#app:has(#peopleTable) #peopleTable .person strong{
  font-size:13px;
}

#app:has(#peopleTable) #peopleTable .person small{
  margin-top:3px;
  font-size:11px;
}

#app:has(#peopleTable) #peopleTable .status{
  padding:6px 9px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:.15px;
}

#app:has(#peopleTable) #peopleTable .btn{
  padding:8px 11px;
  border-color:#cfe0dd;
  background:#fff;
  color:#0b6760;
  font-size:11px;
}

@media(max-width:900px){
  #app:has(#peopleTable) .page-head{align-items:flex-start;min-height:0;padding:24px;flex-direction:column}
  #app:has(#peopleTable) .head-actions{justify-content:flex-start}
  #app:has(#peopleTable) .filter-row{flex-wrap:wrap}
  #app:has(#peopleTable) .filter-row input{flex-basis:100%}
  #app:has(#peopleTable) .filter-row select{flex:1;min-width:170px}
}

@media(max-width:560px){
  #app:has(#peopleTable){padding-top:18px}
  #app:has(#peopleTable) .page-head{padding:21px 18px;border-radius:16px}
  #app:has(#peopleTable) .page-head h1{font-size:27px}
  #app:has(#peopleTable) .page-head p{font-size:13px}
  #app:has(#peopleTable) .head-actions{width:100%}
  #app:has(#peopleTable) .head-actions .btn{flex:1}
  #app:has(#peopleTable)>.panel{border-radius:15px}
}