@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');

:root{
  --portal-bg:#f4f8fb;
  --portal-surface:#ffffff;
  --portal-soft:#f1f5f9;
  --portal-line:#e2e8f0;
  --portal-ink:#0f172a;
  --portal-muted:#64748b;
  --portal-navy:#082f49;
  --portal-blue:#0369a1;
  --portal-sky:#0284c7;
  --portal-pale:#eff6ff;
  --portal-radius:16px;
  --portal-shadow:0 12px 32px -20px rgba(15,23,42,.28);
  --portal-shadow-hover:0 18px 40px -22px rgba(2,132,199,.38);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--portal-bg)}
html body{
  font-family:'Prompt',system-ui,-apple-system,'Segoe UI',sans-serif!important;
  color:var(--portal-ink)!important;
  background:
    radial-gradient(circle at 92% 2%,rgba(14,165,233,.11),transparent 25rem),
    radial-gradient(circle at 8% 88%,rgba(2,132,199,.055),transparent 27rem),
    var(--portal-bg)!important;
  background-attachment:fixed!important;
  font-size:15px;
}
body::selection{background:#bae6fd;color:#082f49}
a,button,input{font-family:inherit!important}
:focus-visible{outline:3px solid rgba(14,165,233,.28)!important;outline-offset:2px!important}

/* App shell */
.layout{background:transparent!important}
.layout>.sidebar{
  width:276px!important;
  color:#fff!important;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(165deg,#062f49 0%,#075985 68%,#0e7490 130%)!important;
  background-size:32px 32px,32px 32px,auto!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  box-shadow:10px 0 35px rgba(8,47,73,.12)!important;
}
.layout>.main{margin-left:276px!important;background:transparent!important}

/* Sidebar identity */
.sidebar-head{
  min-height:88px!important;
  padding:1.25rem 1.15rem!important;
  border-bottom:1px solid rgba(255,255,255,.11)!important;
  background:rgba(2,32,55,.18)!important;
}
.sidebar-logo{gap:.8rem!important}
.sidebar-img{
  width:46px!important;height:46px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 10px 24px rgba(2,6,23,.18)!important;
}
.sidebar-img img{width:35px!important;height:35px!important}
.sidebar-title{font-family:'Prompt',sans-serif!important;color:#fff!important;font-size:1.05rem!important;font-weight:600!important}
.sidebar-sub{color:#bae6fd!important;font-size:.72rem!important;opacity:.88!important}
.sidebar-nav{padding:.8rem .15rem!important}
.nav-label{
  padding:.8rem 1.15rem .35rem!important;
  color:#7dd3fc!important;
  font-size:.68rem!important;
  font-weight:600!important;
  letter-spacing:.12em!important;
}
.sidebar-nav .nav-home,.sidebar-nav .nav-item{
  min-height:43px;
  margin:3px 9px!important;
  padding:.65rem .8rem!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  color:rgba(240,249,255,.78)!important;
  background:transparent!important;
  font-size:.82rem!important;
}
.sidebar-nav .nav-home{border-color:rgba(255,255,255,.13)!important;background:rgba(255,255,255,.07)!important}
.sidebar-nav .nav-home:hover,.sidebar-nav .nav-item:hover{
  color:#fff!important;
  background:rgba(255,255,255,.11)!important;
  border-color:rgba(255,255,255,.12)!important;
  transform:translateX(2px);
}
.sidebar-nav .nav-item.on{
  color:#082f49!important;
  background:#fff!important;
  border-color:#fff!important;
  box-shadow:0 10px 22px rgba(2,6,23,.16)!important;
  font-weight:600!important;
}
.sidebar-nav .nav-item::before{width:3px!important;background:var(--c,#38bdf8)!important}
.sidebar-nav .nav-item svg,.sidebar-nav .nav-home svg{opacity:.9!important}
.nav-badge{
  color:inherit!important;
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.12);
  font-size:.7rem!important;
}
.nav-item.on .nav-badge{background:#eff6ff!important;border-color:#dbeafe;color:#0369a1!important}
.sidebar-foot{border-color:rgba(255,255,255,.1)!important;color:#7dd3fc!important}

/* Top navigation */
.layout .topbar{
  min-height:72px!important;
  padding:.8rem 2rem!important;
  border-bottom:1px solid var(--portal-line)!important;
  background:rgba(255,255,255,.9)!important;
  box-shadow:0 8px 26px -22px rgba(15,23,42,.34)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.layout .topbar::after{height:0!important}
.topbar-title{font-family:'Prompt',sans-serif!important;color:var(--portal-ink)!important;font-size:.95rem!important;font-weight:600!important}
.topbar-sep{color:#cbd5e1!important}
.topbar-crumb,.topbar-clock{color:var(--portal-muted)!important;font-size:.78rem!important}
.topbar-btn,.menu-btn{
  min-height:38px;
  border:1px solid var(--portal-line)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#475569!important;
  box-shadow:none!important;
}
.topbar-btn:hover,.menu-btn:hover{border-color:#bae6fd!important;background:#f0f9ff!important;color:#0369a1!important}

/* Content and privacy notice */
.layout .content{max-width:1480px!important;width:100%;margin:0 auto!important;padding:1.6rem 2rem 2.5rem!important;background:transparent!important}
.pdpa{
  padding:.7rem .9rem!important;
  border:1px solid #bae6fd!important;
  border-left:4px solid #0284c7!important;
  border-radius:12px!important;
  background:linear-gradient(90deg,#f0f9ff,#fff)!important;
  color:#475569!important;
  box-shadow:none!important;
}
.pdpa strong,.pdpa b,.pdpa-icon{color:#075985!important}
.pdpa-toggle{border:1px solid #bae6fd!important;background:#fff!important;color:#0369a1!important;border-radius:8px!important}

/* Summary metrics */
.stats-row{gap:12px!important;margin-bottom:1.7rem!important}
.stats-row .stat-card{
  min-height:104px;
  padding:1rem!important;
  border:1px solid var(--portal-line)!important;
  border-radius:var(--portal-radius)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:var(--portal-shadow)!important;
}
.stats-row .stat-card:hover{border-color:#bae6fd!important;box-shadow:var(--portal-shadow-hover)!important;transform:translateY(-2px)}
.stat-icon{border-radius:12px!important}
.stat-val{font-family:'Prompt',sans-serif!important;color:var(--portal-ink)!important;font-size:1.35rem!important;font-weight:600!important}
.stat-label{color:var(--portal-muted)!important;font-size:.74rem!important}
.stat-trend{font-family:'Prompt',sans-serif!important;border-radius:999px!important}

/* Section title and view controls */
.sec-head{margin:0 0 .9rem!important}
.directory-tools{display:flex;align-items:center;justify-content:flex-end;gap:.7rem;flex-wrap:wrap}
.sec-head>div:first-child{min-width:200px}

/* Premium segmented toggle */
.view-switcher{
  position:relative;
  display:inline-flex;
  align-items:stretch;
  padding:4px;
  gap:2px;
  border-radius:14px;
  border:1px solid #d1dde4;
  background:linear-gradient(180deg,#f0f6fa 0%,#e6eff3 100%);
  box-shadow:0 1px 2px rgba(15,23,42,.04),inset 0 1px 0 rgba(255,255,255,.7);
}
.view-btn{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  min-height:36px;
  padding:.3rem .8rem;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#6b8290;
  font-family:'Prompt',sans-serif!important;
  font-size:.78rem;
  font-weight:500;
  cursor:pointer;
  transition:color .2s ease,background .25s ease,box-shadow .25s ease,transform .15s ease;
}
.view-btn svg{width:15px;height:15px;opacity:.6;transition:opacity .2s ease}
.view-btn:hover{color:#0c4a6e;background:rgba(255,255,255,.65)}
.view-btn:hover svg{opacity:.85}
.view-btn.is-active{
  color:#fff;
  background:linear-gradient(135deg,#0369a1 0%,#0284c7 55%,#0ea5e9 100%);
  box-shadow:0 4px 12px rgba(3,105,161,.28),inset 0 1px 0 rgba(255,255,255,.18);
  font-weight:600;
}
.view-btn.is-active svg{opacity:1}
.view-btn.is-active::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,transparent 50%);
  pointer-events:none;
}
.view-btn:focus-visible{outline:2px solid #38bdf8;outline-offset:2px}

/* Search */
.sec-title{font-family:'Prompt',sans-serif!important;color:var(--portal-ink)!important;font-size:1.25rem!important;font-weight:600!important}
.sec-count{color:var(--portal-muted)!important;font-size:.76rem!important}
.search{
  min-width:280px;
  border:1px solid var(--portal-line)!important;
  border-radius:11px!important;
  background:#fff!important;
  box-shadow:0 5px 18px -16px rgba(15,23,42,.3)!important;
}
.search:focus-within{border-color:#7dd3fc!important;box-shadow:0 0 0 3px rgba(14,165,233,.1)!important}
.search input{color:var(--portal-ink)!important;background:transparent!important}
.search svg{color:#94a3b8!important}

/* Department directory */
.tbl.view-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;overflow:visible;border:0;background:transparent;box-shadow:none}
.tbl.view-card .tbl-head{display:none}
.tbl.view-card .tbl-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name arrow" "type count";align-items:center;min-height:136px;padding:1rem 1.05rem;border:1px solid var(--portal-line)!important;border-left:3px solid var(--c,#0284c7)!important;border-radius:14px;background:#fff!important;box-shadow:0 5px 16px rgba(15,23,42,.06)!important}
.tbl.view-card .tbl-row:hover{transform:translateY(-2px)!important;box-shadow:0 12px 26px rgba(2,132,199,.14)!important}
.tbl.view-card .tbl-name{grid-area:name;align-self:start}
.tbl.view-card .tbl-sub{grid-area:type;align-self:end;margin-top:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl.view-card .tbl-cnt{grid-area:count;align-self:end}
.tbl.view-card .tbl-arrow{grid-area:arrow;align-self:start}
.tbl.view-card .tbl-dot{width:8px!important;height:38px!important}
.tbl.view-card .tbl-t{font-size:.92rem!important;font-weight:600!important;white-space:normal!important}
.tbl.view-card .tbl-s{font-size:.7rem!important}
.tbl.view-title{display:block;border:1px solid var(--portal-line);box-shadow:var(--portal-shadow)}
.tbl.view-title .tbl-head{display:none}
.tbl.view-title .tbl-row{display:grid;grid-template-columns:1fr auto 28px;min-height:56px;padding:.65rem 1.1rem}
.tbl.view-title .tbl-sub{display:none}
.tbl.view-title .tbl-t{font-size:.9rem!important;font-weight:600!important}
.tbl.view-title .tbl-s{font-size:.7rem!important}
.tbl.view-title .tbl-cnt{justify-self:end}
.tbl,.rpt-tbl{
  overflow:hidden;
  border:1px solid var(--portal-line)!important;
  border-radius:var(--portal-radius)!important;
  background:#fff!important;
  box-shadow:var(--portal-shadow)!important;
}
.tbl-head,.rpt-head{
  min-height:42px;
  color:#64748b!important;
  background:#f8fafc!important;
  border-color:var(--portal-line)!important;
  font-family:'Prompt',sans-serif!important;
  font-size:.7rem!important;
  font-weight:600!important;
  letter-spacing:.08em!important;
  text-transform:uppercase;
}
.tbl-row,.rpt-row{
  min-height:68px;
  border-color:#e7eef2!important;
  background:#fff!important;
  transition:background .18s ease,box-shadow .18s ease!important;
}
.tbl-row:hover,.rpt-row:hover{
  background:#f7fbfd!important;
  box-shadow:inset 3px 0 0 var(--c,#0284c7)!important;
  transform:none!important;
}
.tbl-row:focus-visible,.rpt-row:focus-visible{
  outline:3px solid rgba(14,165,233,.28)!important;
  outline-offset:-3px!important;
}
.tbl-cnt{
  min-width:36px;
  padding:.2rem .55rem!important;
  font-variant-numeric:tabular-nums;
}
.rpt-meta{
  width:max-content;
  padding:.28rem .55rem!important;
  border:1px solid #e2edf2;
  border-radius:999px;
  background:#f8fbfd;
  color:#5b7280!important;
}
.tbl-dot{width:9px!important;height:34px!important;border-radius:999px!important}
.tbl-t,.rpt-nm-text>span:first-child{color:#1e293b!important;font-size:.86rem!important;font-weight:500!important}
.tbl-s,.tbl-sub,.rpt-nm-sub,.rpt-meta{color:#7c8da3!important;font-size:.72rem!important}
.tbl-cnt{color:#0369a1!important;background:#eff6ff!important;border-radius:999px!important;font-weight:600!important}
.tbl-arrow,.rpt-arr{color:#94a3b8!important}
.empty{border:1px dashed #cbd5e1!important;border-radius:16px!important;background:#fff!important}

/* Department detail */
.btn-back{
  border:1px solid var(--portal-line)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#475569!important;
  box-shadow:none!important;
}
.btn-back:hover{border-color:#bae6fd!important;color:#0369a1!important}
.detail-hero{
  position:relative;
  overflow:hidden;
  min-height:112px;
  border:1px solid var(--portal-line)!important;
  border-radius:18px!important;
  background:linear-gradient(110deg,#fff 0%,#f8fbff 72%,#eff6ff 100%)!important;
  box-shadow:var(--portal-shadow)!important;
}
.detail-hero::after{content:'';position:absolute;right:-45px;top:-85px;width:190px;height:190px;border:28px solid color-mix(in srgb,var(--c,#0284c7) 9%,transparent);border-radius:50%;pointer-events:none}
.detail-hero-ico{border-radius:14px!important}
.detail-hero-text h2{font-family:'Prompt',sans-serif!important;color:var(--portal-ink)!important;font-weight:600!important}
.detail-hero-text p{color:var(--portal-muted)!important}
.detail-hero-badge{border-radius:999px!important}
.rpt-ico{border-radius:11px!important}
.rpt-row:hover .rpt-ico{transform:scale(1.05)!important}
.ftr{border-color:var(--portal-line)!important;color:#94a3b8!important}

/* Shared report surfaces */
.card,.panel,.box,.widget,.filter-card,.chart-card,.summary-card,.report-card,.table-card,.tablewrap,
.content-box,.section-card,.metric-card{
  border-color:var(--portal-line)!important;
  border-radius:var(--portal-radius)!important;
  background:#fff!important;
  box-shadow:var(--portal-shadow)!important;
}
input:not([type='checkbox']):not([type='radio']),select,textarea,.form-control,.form-select{
  border-color:var(--portal-line)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--portal-ink)!important;
}
input:focus,select:focus,textarea:focus,.form-control:focus,.form-select:focus{border-color:#7dd3fc!important;box-shadow:0 0 0 3px rgba(14,165,233,.1)!important;outline:none!important}
table{color:var(--portal-ink)!important}
table thead th{color:#475569!important;background:#f8fafc!important;border-color:var(--portal-line)!important}
table td,table th{border-color:#edf2f7!important}

/* Scroll and responsive */
*{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
*::-webkit-scrollbar{width:7px;height:7px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
@media(max-width:1024px){
  .layout>.sidebar{width:276px!important;box-shadow:18px 0 45px rgba(2,6,23,.22)!important}
  .layout>.main{margin-left:0!important}
  .layout .content{padding:1.2rem!important}
}
@media(max-width:600px){
  .layout .topbar{padding:.65rem 1rem!important}
  .layout .content{padding:1rem!important}
  .directory-tools{width:100%;align-items:stretch;flex-direction:column-reverse}
  .view-switcher{width:100%;justify-content:space-between}
  .view-btn{flex:1;justify-content:center}
  .search{min-width:100%!important}
  .pdpa{align-items:flex-start!important}
  .tbl.view-card{grid-template-columns:1fr}
  .tbl.view-card .tbl-row{min-height:124px!important}
  .stats-row .stat-card{min-height:88px}
  .tbl-head,.rpt-head{font-size:.64rem!important;letter-spacing:.04em!important}
  .tbl-row,.rpt-row{min-height:64px!important}
  .rpt-meta{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}