/* ==========================================================
   MGH Community v1.5.0 Modern App UI
   ========================================================== */
:root{
  --ui-bg:#f5f7fb;
  --ui-card:#ffffff;
  --ui-card-soft:#fafbfe;
  --ui-text:#172033;
  --ui-muted:#718096;
  --ui-border:#e5eaf1;
  --ui-border-strong:#d9e1eb;
  --ui-radius:18px;
  --ui-radius-sm:11px;
  --ui-shadow:0 12px 35px rgba(26,39,61,.06);
  --ui-shadow-hover:0 16px 42px rgba(26,39,61,.10);
  --sidebar-width:286px;
  --sidebar-compact:88px;
  --topbar-height:72px;
}
html{scroll-behavior:smooth}
body{background:var(--ui-bg);color:var(--ui-text)}
.shell{grid-template-columns:var(--sidebar-width) minmax(0,1fr);transition:grid-template-columns .22s ease}
.sidebar{
  width:var(--sidebar-width);
  background:var(--nav);
  padding:18px 14px 22px;
  border-right:1px solid rgba(255,255,255,.05);
  box-shadow:12px 0 35px rgba(8,18,35,.08);
  transition:width .22s ease,transform .22s ease;
  scrollbar-width:thin;
  z-index:60;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:999px}
.brand{
  padding:6px 8px 18px;
  margin-bottom:2px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.brand strong{font-size:15px;letter-spacing:-.1px}
.brand small{font-size:10px;text-transform:uppercase;letter-spacing:.9px}
.brand-logo-wrap,.mark{
  width:42px;height:42px;flex-basis:42px;border-radius:13px;
  box-shadow:0 7px 18px rgba(0,0,0,.14)
}
.sidebar-tools{padding:14px 5px 8px}
.sidebar-search{
  width:100%;height:40px;border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.065);color:#fff;border-radius:11px;
  padding:0 12px;outline:none;font-size:12px
}
.sidebar-search::placeholder{color:#8ca0bd}
.sidebar-search:focus{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.09)}
.sidebar-collapse{
  width:100%;margin-top:8px;border:0;background:rgba(255,255,255,.055);
  color:#b8c5d8;border-radius:10px;padding:8px 10px;cursor:pointer;font-size:11px
}
.sidebar-collapse:hover{background:rgba(255,255,255,.1);color:#fff}
.nav{padding:2px 0 10px}
.nav-section{margin:3px 0 8px}
.nav-section-title{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  font-size:9px;color:#7287a6;letter-spacing:1.25px;font-weight:800;
  padding:14px 11px 7px;cursor:pointer;user-select:none
}
.nav-section-title::after{content:"⌄";font-size:11px;transition:transform .18s ease}
.nav-section.is-collapsed .nav-section-title::after{transform:rotate(-90deg)}
.nav-section-links{display:grid;gap:2px}
.nav-section.is-collapsed .nav-section-links{display:none}
.nav a{
  display:flex;align-items:center;gap:10px;min-height:39px;
  padding:9px 11px;border-radius:11px;color:#bac7d9;
  font-size:12.5px;font-weight:570;position:relative;overflow:hidden
}
.nav a .nav-icon{
  width:22px;height:22px;flex:0 0 22px;border-radius:7px;
  display:grid;place-items:center;background:rgba(255,255,255,.055);
  font-size:12px
}
.nav a:hover{background:rgba(255,255,255,.075);color:#fff;transform:none}
.nav a.active{
  background:rgba(255,255,255,.12);color:#fff;font-weight:730;
  box-shadow:inset 3px 0 0 var(--primary)
}
.nav a.active .nav-icon{background:var(--primary);color:#fff}
.nav a.hidden-by-search,.nav-section.hidden-by-search{display:none!important}
.sidebar-brand-footer{
  margin-top:12px;padding:14px 10px 2px;border-top:1px solid rgba(255,255,255,.07)
}
.top{
  height:var(--topbar-height);padding:0 24px;background:rgba(255,255,255,.93);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--ui-border);box-shadow:0 3px 18px rgba(20,35,60,.035)
}
.top strong{font-size:13px}
.top small{font-size:11px}
.top-user{
  display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid var(--ui-border);
  background:#fff;border-radius:12px
}
.top-avatar{
  width:32px;height:32px;border-radius:10px;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:12px
}
.top-logout{font-size:11px;color:var(--ui-muted)}
.content{padding:26px 28px 40px;max-width:1640px}
.head{
  margin-bottom:20px;align-items:center;background:transparent;padding:0 1px
}
.head h1{font-size:25px;letter-spacing:-.45px}
.head p{font-size:13px;margin-top:4px}
.page-breadcrumb{font-size:10px;color:#99a4b4;text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;font-weight:750}
.card{
  border:1px solid var(--ui-border);border-radius:var(--ui-radius);
  box-shadow:var(--ui-shadow);padding:20px;background:var(--ui-card)
}
.card:hover{box-shadow:var(--ui-shadow-hover)}
.card h3{font-size:16px;letter-spacing:-.2px}
.metric{position:relative;overflow:hidden}
.metric::before{
  content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--primary);opacity:.7
}
.metric .label{font-size:10px;letter-spacing:.75px}
.metric .num{font-size:28px;letter-spacing:-.8px}
.grid4{gap:14px}
.grid2{gap:15px}
.tablewrap{
  border:1px solid var(--ui-border);border-radius:15px;box-shadow:var(--ui-shadow);background:#fff
}
th{background:#f8fafc;color:#748196;font-size:10px;padding:12px 14px}
td{padding:12px 14px;font-size:12.5px}
tbody tr:hover{background:#f9fbfe}
.field label{font-size:11px;color:#405068;margin-bottom:6px}
.field input,.field select,.field textarea{
  border:1px solid var(--ui-border-strong);border-radius:10px;min-height:42px;
  background:#fff;font-size:12.5px
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)
}
.btn{border-radius:10px;padding:9px 13px;min-height:38px;font-size:12px}
.btn.primary{box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 18%,transparent)}
.tag{font-size:10px;padding:5px 8px}
.flash{border:1px solid transparent;box-shadow:var(--ui-shadow)}
.login{
  background:
    radial-gradient(circle at 15% 15%,color-mix(in srgb,var(--primary) 12%,transparent),transparent 32%),
    radial-gradient(circle at 88% 90%,rgba(16,29,48,.08),transparent 28%),
    #f6f8fc;
}
.loginbox{
  border-radius:26px;padding:32px 34px;border:1px solid var(--ui-border);
  box-shadow:0 25px 70px rgba(20,35,60,.10)
}
.loginbox .brand{border-bottom:0;padding:0;margin:0;color:var(--ui-text)}
.loginbox .brand small{color:var(--ui-muted)}
.mobile-bottom-nav{display:none}
.sidebar-overlay{display:none}

/* compact desktop mode */
body.sidebar-compact .shell{grid-template-columns:var(--sidebar-compact) minmax(0,1fr)}
body.sidebar-compact .sidebar{width:var(--sidebar-compact);padding-left:10px;padding-right:10px}
body.sidebar-compact .brand>div:last-child,
body.sidebar-compact .sidebar-search,
body.sidebar-compact .nav-section-title,
body.sidebar-compact .nav a:not(.active) span.nav-label,
body.sidebar-compact .nav a.active span.nav-label,
body.sidebar-compact .sidebar-brand-footer{display:none}
body.sidebar-compact .brand{justify-content:center;padding-left:0;padding-right:0}
body.sidebar-compact .nav a{justify-content:center;padding-left:8px;padding-right:8px}
body.sidebar-compact .nav a .nav-icon{width:30px;height:30px;flex-basis:30px}
body.sidebar-compact .sidebar-collapse{font-size:0}
body.sidebar-compact .sidebar-collapse::after{content:"→";font-size:14px}

@media(max-width:1100px){
  .content{padding:22px}
}
@media(max-width:760px){
  :root{--topbar-height:64px}
  .shell{display:block}
  .sidebar{
    display:block;position:fixed;left:0;top:0;transform:translateX(-105%);
    width:min(86vw,305px);height:100vh;z-index:1002
  }
  .sidebar.mobile-open{transform:translateX(0);width:min(86vw,305px)}
  .sidebar-overlay{
    position:fixed;inset:0;background:rgba(8,17,31,.48);z-index:1001;
    backdrop-filter:blur(2px)
  }
  .sidebar-overlay.is-visible{display:block}
  .top{padding:0 14px}
  .top-user{border:0;padding:0;background:transparent}
  .top-user .top-user-copy{display:none}
  .content{padding:17px 14px 86px}
  .head{margin-bottom:16px}
  .head h1{font-size:22px}
  .grid4{grid-template-columns:1fr 1fr}
  .card{border-radius:15px;padding:16px}
  .mobile-bottom-nav{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:8px;right:8px;bottom:8px;
    height:62px;z-index:900;background:rgba(255,255,255,.96);border:1px solid var(--ui-border);
    border-radius:18px;box-shadow:0 15px 40px rgba(20,35,60,.14);backdrop-filter:blur(16px);
    overflow:hidden
  }
  .mobile-bottom-nav a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    font-size:9px;color:#6f7d91;font-weight:700
  }
  .mobile-bottom-nav a span:first-child{font-size:17px}
  .mobile-bottom-nav a.active{color:var(--primary);background:#f8faff}
}
@media(max-width:480px){
  .grid4{grid-template-columns:1fr 1fr}
  .metric .num{font-size:23px}
}