/* Portal Operasional — shared glass theme for all secondary pages (v18) */
:root{
  --portal-ink:#12322e;
  --portal-muted:#536d67;
  --portal-accent:#67aaa3;
  --portal-accent-2:#9dd5ce;
  --portal-accent-dark:#22534e;
  --portal-line:rgba(255,255,255,.54);
  --portal-line-dark:rgba(24,58,52,.11);
  --portal-shell:rgba(255,255,255,.30);
  --portal-panel:rgba(255,255,255,.42);
  --portal-card:rgba(255,255,255,.46);
  --portal-control:rgba(255,255,255,.58);
  --portal-shadow:0 28px 70px rgba(23,50,47,.11),inset 0 1px 0 rgba(255,255,255,.46);
  --portal-shadow-soft:0 14px 34px rgba(23,50,47,.08),inset 0 1px 0 rgba(255,255,255,.35);
  --portal-radius-xl:34px;
  --portal-radius-lg:26px;
  --portal-radius-md:18px;
}

html:has(body.portal-subpage){min-height:100%;background:#eef6f3}
body.portal-subpage{
  min-height:100vh!important;
  color:var(--portal-ink)!important;
  background-color:#eef6f3!important;
  background-image:url('theme-bg-pastel-visible-v20260605/drizzle-bg.png')!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
  position:relative!important;
  isolation:isolate;
  overflow-x:hidden;
}
body.portal-subpage::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  opacity:1!important;
  animation:none!important;
  background:
    radial-gradient(circle at 8% 7%,rgba(255,255,255,.25),transparent 23%),
    radial-gradient(circle at 94% 9%,rgba(177,213,200,.10),transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012))!important;
}
body.portal-subpage::after{
  content:""!important;
  position:fixed!important;
  inset:auto -8vw -24vh auto!important;
  width:48vw!important;
  height:48vw!important;
  max-width:720px!important;
  max-height:720px!important;
  z-index:-1!important;
  pointer-events:none!important;
  border-radius:50%!important;
  opacity:.55!important;
  animation:portalGlowFloat 18s ease-in-out infinite alternate!important;
  background:radial-gradient(circle,rgba(141,199,180,.12),rgba(255,255,255,.025) 46%,transparent 70%)!important;
}
@keyframes portalGlowFloat{to{transform:translate3d(-24px,-14px,0) scale(1.04)}}
body.portal-subpage ::selection{background:rgba(103,170,163,.28);color:#12322e}
body.portal-subpage *{scrollbar-color:rgba(69,126,115,.30) transparent;scrollbar-width:thin}
body.portal-subpage :focus-visible{outline:3px solid rgba(61,139,114,.28)!important;outline-offset:3px!important}
body.portal-subpage a,body.portal-subpage button{transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease}
body.portal-subpage a:hover,body.portal-subpage button:hover{filter:none}

/* shared page framing */
body.portal-subpage .page,
body.portal-subpage .wrap,
body.portal-subpage .page-wrap{
  position:relative;
  z-index:1;
}
body.portal-subpage .top,
body.portal-subpage .portal-topbar{
  border:1px solid var(--portal-line)!important;
  background:var(--portal-panel)!important;
  box-shadow:var(--portal-shadow-soft)!important;
  backdrop-filter:blur(7px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(7px) saturate(112%)!important;
}
body.portal-subpage .top{
  padding:11px 14px!important;
  border-radius:23px!important;
}
body.portal-subpage .back,
body.portal-subpage .btn:not(.primary),
body.portal-subpage .ghost,
body.portal-subpage .top-link,
body.portal-subpage .service-switch,
body.portal-subpage .pill-btn,
body.portal-subpage .chip,
body.portal-subpage .pill,
body.portal-subpage .open-link{
  background:var(--portal-control)!important;
  border-color:var(--portal-line)!important;
  color:var(--portal-ink)!important;
  box-shadow:0 8px 20px rgba(23,50,47,.055)!important;
  backdrop-filter:blur(6px) saturate(110%)!important;
  -webkit-backdrop-filter:blur(6px) saturate(110%)!important;
}
body.portal-subpage .back:hover,
body.portal-subpage .btn:not(.primary):hover,
body.portal-subpage .ghost:hover,
body.portal-subpage .top-link:hover,
body.portal-subpage .service-switch:hover,
body.portal-subpage .pill-btn:hover,
body.portal-subpage .chip:hover,
body.portal-subpage .open-link:hover{
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(103,170,163,.26)!important;
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(23,50,47,.075)!important;
}
body.portal-subpage .primary,
body.portal-subpage .btn.primary{
  background:linear-gradient(135deg,rgba(78,143,119,.94),rgba(42,105,84,.96))!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.32)!important;
  box-shadow:0 12px 26px rgba(42,105,84,.18)!important;
}
body.portal-subpage .primary:hover,
body.portal-subpage .btn.primary:hover{transform:translateY(-1px);filter:brightness(1.03)!important}
body.portal-subpage input,
body.portal-subpage select,
body.portal-subpage textarea,
body.portal-subpage .search,
body.portal-subpage .searchbar{
  color:var(--portal-ink)!important;
  background:var(--portal-control)!important;
  border-color:var(--portal-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42)!important;
  backdrop-filter:blur(5px) saturate(108%)!important;
  -webkit-backdrop-filter:blur(5px) saturate(108%)!important;
}
body.portal-subpage input:focus,
body.portal-subpage select:focus,
body.portal-subpage textarea:focus{
  border-color:rgba(61,139,114,.50)!important;
  box-shadow:0 0 0 4px rgba(61,139,114,.09),inset 0 1px 0 rgba(255,255,255,.48)!important;
}
body.portal-subpage input::placeholder,body.portal-subpage textarea::placeholder{color:#758a84!important}

/* ordinary form pages: complaints, review, lost/found input */
body.portal-simple-form .page{max-width:1180px!important;padding:22px 22px 48px!important}
body.portal-simple-form .hero{
  background:var(--portal-shell)!important;
  border:1px solid var(--portal-line)!important;
  box-shadow:var(--portal-shadow)!important;
  backdrop-filter:blur(3px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(3px) saturate(112%)!important;
  border-radius:var(--portal-radius-xl)!important;
  padding:30px!important;
}
body.portal-simple-form .hero>h1{font-size:clamp(34px,4vw,46px)!important;letter-spacing:-.035em!important}
body.portal-simple-form .hero>.lead{max-width:820px}
body.portal-simple-form .grid{gap:18px!important;margin-top:22px!important;align-items:start}
body.portal-simple-form .card,
body.portal-simple-form .link-card{
  background:var(--portal-panel)!important;
  border:1px solid var(--portal-line)!important;
  box-shadow:var(--portal-shadow-soft)!important;
  backdrop-filter:blur(6px) saturate(110%)!important;
  -webkit-backdrop-filter:blur(6px) saturate(110%)!important;
}
body.portal-simple-form .card:hover,body.portal-simple-form .link-card:hover{border-color:rgba(103,170,163,.24)!important}
body.portal-simple-form .chip{background:rgba(255,255,255,.50)!important}
body.portal-simple-form .photo-box{background:rgba(255,255,255,.34)!important;border-color:var(--portal-line)!important}
body.portal-simple-form .form-message{background:rgba(221,243,234,.62)!important;border:1px solid rgba(61,139,114,.16)!important}

/* directory */
body.portal-directory .wrap{max-width:1220px!important;padding:22px 22px 48px!important}
body.portal-directory .hero{
  background:var(--portal-shell)!important;
  border:1px solid var(--portal-line)!important;
  box-shadow:var(--portal-shadow)!important;
  backdrop-filter:blur(3px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(3px) saturate(112%)!important;
  border-radius:var(--portal-radius-xl)!important;
  padding:30px!important;
}
body.portal-directory .toolbar input{min-height:50px}
body.portal-directory .table-wrap{
  background:var(--portal-panel)!important;
  border-color:var(--portal-line)!important;
  box-shadow:var(--portal-shadow-soft)!important;
  backdrop-filter:blur(6px) saturate(110%)!important;
  -webkit-backdrop-filter:blur(6px) saturate(110%)!important;
}
body.portal-directory table{background:transparent!important}
body.portal-directory th{background:rgba(231,245,239,.46)!important}
body.portal-directory tbody tr{transition:background .15s ease}
body.portal-directory tbody tr:hover{background:rgba(255,255,255,.28)!important}

/* checklist/document preview pages */
body.portal-document .page{max-width:1300px!important;padding:22px 22px 48px!important}
body.portal-document .hero{
  background:var(--portal-shell)!important;
  border-color:var(--portal-line)!important;
  box-shadow:var(--portal-shadow)!important;
  backdrop-filter:blur(3px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(3px) saturate(112%)!important;
  padding:28px!important;
  border-radius:var(--portal-radius-xl)!important;
}
body.portal-document .sheet{
  background:var(--portal-panel)!important;
  border-color:var(--portal-line)!important;
  box-shadow:var(--portal-shadow-soft)!important;
  padding:9px!important;
}
body.portal-document .sheet img{border-radius:15px}
body.portal-document .page-no{background:rgba(222,247,244,.60)!important;color:var(--portal-accent-dark)!important;border:1px solid rgba(255,255,255,.50)}
body.portal-document .mark{background:linear-gradient(135deg,#75b49c,#acd8cf)!important}

/* information landing page */
body.portal-info .wrap{max-width:1050px!important;padding:32px 22px 50px!important}
body.portal-info .card{
  background:var(--portal-shell)!important;
  border:1px solid var(--portal-line)!important;
  border-radius:var(--portal-radius-xl)!important;
  padding:32px!important;
  box-shadow:var(--portal-shadow)!important;
  backdrop-filter:blur(3px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(3px) saturate(112%)!important;
}
body.portal-info h1{margin-top:0!important;font-size:clamp(34px,4vw,46px)!important;color:#0c302d}
body.portal-info .grid{gap:14px!important}
body.portal-info .grid a{
  min-height:88px;
  display:flex!important;
  align-items:center;
  background:var(--portal-panel)!important;
  border:1px solid var(--portal-line)!important;
  box-shadow:var(--portal-shadow-soft)!important;
  backdrop-filter:blur(6px) saturate(110%)!important;
  -webkit-backdrop-filter:blur(6px) saturate(110%)!important;
}
body.portal-info .grid a:hover{transform:translateY(-2px);background:rgba(255,255,255,.58)!important}

/* lost/found listing */
body.portal-lost-dashboard .page{max-width:1320px!important;padding:22px 22px 50px!important}
body.portal-lost-dashboard .hero{
  background:var(--portal-shell)!important;
  border-color:var(--portal-line)!important;
  box-shadow:var(--portal-shadow)!important;
  backdrop-filter:blur(3px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(3px) saturate(112%)!important;
  border-radius:var(--portal-radius-xl)!important;
  padding:30px!important;
}
body.portal-lost-dashboard .col{
  background:var(--portal-panel)!important;
  border-color:var(--portal-line)!important;
  box-shadow:var(--portal-shadow-soft)!important;
  backdrop-filter:blur(6px) saturate(110%)!important;
  -webkit-backdrop-filter:blur(6px) saturate(110%)!important;
}
body.portal-lost-dashboard .report-card,
body.portal-lost-dashboard .empty{
  background:var(--portal-card)!important;
  border-color:var(--portal-line)!important;
}
body.portal-lost-dashboard .photo,body.portal-lost-dashboard .photo-error,body.portal-lost-dashboard .placeholder{background:rgba(255,255,255,.34)!important}
body.portal-lost-dashboard .zoom-card{background:rgba(255,255,255,.78)!important;backdrop-filter:blur(16px)!important}

/* map */
body.portal-map .page{
  max-width:1500px!important;
  margin:18px auto!important;
  padding:20px!important;
  background:var(--portal-shell)!important;
  border-color:var(--portal-line)!important;
  box-shadow:var(--portal-shadow)!important;
  backdrop-filter:blur(3px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(3px) saturate(112%)!important;
}
body.portal-map .title-row{padding:18px 20px;border:1px solid var(--portal-line);border-radius:24px;background:var(--portal-panel);box-shadow:var(--portal-shadow-soft);backdrop-filter:blur(6px)}
body.portal-map .map-card,body.portal-map .info-card,body.portal-map .map-note{
  background:var(--portal-panel)!important;
  border-color:var(--portal-line)!important;
  box-shadow:var(--portal-shadow-soft)!important;
  backdrop-filter:blur(6px) saturate(110%)!important;
  -webkit-backdrop-filter:blur(6px) saturate(110%)!important;
}
body.portal-map #brinCustomMapFull{background:rgba(255,255,255,.28)!important}
body.portal-map .result,body.portal-map .empty{background:var(--portal-card)!important;border-color:var(--portal-line)!important}
body.portal-map .result:hover{background:rgba(255,255,255,.64)!important}

/* PJ building directory */
body.portal-pj .shell{
  background:var(--portal-shell)!important;
  border:1px solid var(--portal-line)!important;
  box-shadow:var(--portal-shadow)!important;
  backdrop-filter:blur(3px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(3px) saturate(112%)!important;
}
body.portal-pj .header{background:var(--portal-panel)!important;border-color:var(--portal-line)!important}
body.portal-pj .hero{background:transparent!important}
body.portal-pj .card,body.portal-pj .empty{
  background:var(--portal-panel)!important;
  border-color:var(--portal-line)!important;
  box-shadow:var(--portal-shadow-soft)!important;
  backdrop-filter:blur(6px) saturate(110%)!important;
  -webkit-backdrop-filter:blur(6px) saturate(110%)!important;
}
body.portal-pj .card img{background:rgba(255,255,255,.32)!important;border:1px solid rgba(255,255,255,.50)}
body.portal-pj .pill,body.portal-pj .search,body.portal-pj .back{background:var(--portal-control)!important}

/* service hub + forms + status */
body.portal-service-hub .portal-topbar,
body.portal-service-form .portal-topbar,
body.portal-service-status .portal-topbar{background:var(--portal-panel)!important}
body.portal-service-hub .hub-shell,
body.portal-service-form .form-shell,
body.portal-service-status .status-shell{
  background:var(--portal-shell)!important;
  border-color:var(--portal-line)!important;
  box-shadow:var(--portal-shadow)!important;
  backdrop-filter:blur(3px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(3px) saturate(112%)!important;
}
body.portal-service-hub .hub-hero,
body.portal-service-hub .hub-card,
body.portal-service-hub .hub-status-panel,
body.portal-service-form .section-card,
body.portal-service-form .field,
body.portal-service-form .connection-state,
body.portal-service-form .draft-box,
body.portal-service-status .status-search-card,
body.portal-service-status .status-state-panel,
body.portal-service-status .status-timeline-card,
body.portal-service-status .status-meta,
body.portal-service-status .status-history-item,
body.portal-service-status .hub-status-panel{
  background:var(--portal-panel)!important;
  border-color:var(--portal-line)!important;
  box-shadow:var(--portal-shadow-soft)!important;
  backdrop-filter:blur(6px) saturate(110%)!important;
  -webkit-backdrop-filter:blur(6px) saturate(110%)!important;
}
body.portal-service-form .form-aside,
body.portal-service-status .status-aside{
  background:linear-gradient(165deg,rgba(228,244,238,.30),rgba(255,255,255,.10))!important;
}
body.portal-service-form .form-main,body.portal-service-status .status-main{background:transparent!important}
body.portal-service-form .section-head{background:linear-gradient(110deg,rgba(255,255,255,.22),rgba(225,242,235,.15))!important}
body.portal-service-form .schema-badge,body.portal-service-status .schema-badge,body.portal-service-status .status-prefix{background:rgba(255,255,255,.42)!important;border-color:var(--portal-line)!important}
body.portal-service-hub .hub-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.54)!important}

/* internal management */
body.portal-internal .ops-sidebar,
body.portal-internal .workspace{
  background:var(--portal-shell)!important;
  border-color:var(--portal-line)!important;
  box-shadow:var(--portal-shadow)!important;
  backdrop-filter:blur(3px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(3px) saturate(112%)!important;
}
body.portal-internal .searchbox,
body.portal-internal .pill-btn,
body.portal-internal .profile,
body.portal-internal .ops-nav button,
body.portal-internal .sidebar-card{
  background:var(--portal-card)!important;
  border-color:var(--portal-line)!important;
  backdrop-filter:blur(6px) saturate(110%)!important;
  -webkit-backdrop-filter:blur(6px) saturate(110%)!important;
}
body.portal-internal .card,
body.portal-internal .hero,
body.portal-internal .building-board-meta,
body.portal-internal .building-search,
body.portal-internal .building-sort-label select,
body.portal-internal .modal-card{
  background:var(--portal-panel)!important;
  border-color:var(--portal-line)!important;
  box-shadow:var(--portal-shadow-soft)!important;
  backdrop-filter:blur(6px) saturate(110%)!important;
  -webkit-backdrop-filter:blur(6px) saturate(110%)!important;
}
body.portal-internal table,body.portal-internal th{background:rgba(255,255,255,.24)!important}

@media(max-width:900px){
  body.portal-subpage{background-attachment:scroll!important}
  body.portal-subpage .top{align-items:flex-start!important}
  body.portal-simple-form .hero,body.portal-lost-dashboard .hero,body.portal-directory .hero,body.portal-document .hero{padding:21px!important}
  body.portal-map .page{margin:0!important;border-radius:0!important;min-height:100vh}
  body.portal-map .title-row{padding:16px!important}
}
@media(max-width:620px){
  body.portal-subpage .page,body.portal-subpage .wrap,body.portal-subpage .page-wrap{padding-left:12px!important;padding-right:12px!important}
  body.portal-subpage .top{padding:10px!important;border-radius:19px!important}
  body.portal-simple-form .hero,body.portal-lost-dashboard .hero,body.portal-directory .hero,body.portal-document .hero,body.portal-info .card{border-radius:25px!important;padding:18px!important}
  body.portal-subpage h1{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){body.portal-subpage::after{animation:none!important}body.portal-subpage *{scroll-behavior:auto!important;transition:none!important}}