/* MSH Organize shared layout baseline.
   One shell for navbar, side navigation, page spacing and dialogs across modules. */
:root{
  --msh-page-max:1480px;
  --msh-page-gutter:clamp(16px,2.2vw,30px);
  --msh-section-gap:18px;
  --msh-card-gap:14px;
  --msh-radius:18px;
  --msh-dialog-gutter:clamp(18px,3vw,30px);
}
html,body{max-width:100%;overflow-x:hidden}
body{min-height:100vh}
.app-shell{padding-top:0!important}

.msh-page-topbar,.msh-shell-topbar{
  position:sticky!important;top:0!important;z-index:900!important;
  display:grid!important;grid-template-columns:minmax(260px,1fr) auto minmax(220px,1fr)!important;align-items:center!important;gap:14px!important;
  width:100%!important;min-height:72px!important;height:72px!important;margin:0!important;
  padding:8px max(var(--msh-page-gutter),env(safe-area-inset-right)) 8px max(var(--msh-page-gutter),env(safe-area-inset-left))!important;
  border:0!important;border-bottom:1px solid rgba(207,219,234,.9)!important;border-radius:0!important;
  background:rgba(255,255,255,.95)!important;box-shadow:0 5px 18px rgba(31,52,84,.055)!important;
  backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
}
.msh-page-topbar>.brand,.msh-page-topbar>.msh-shell-brand,.admin-topbar>.brand{grid-column:1!important;display:flex!important;align-items:center!important;min-width:0!important;margin-left:52px!important;gap:9px!important}
.msh-page-topbar .brand-logo{display:block!important;width:42px!important;height:42px!important;flex:0 0 42px!important;object-fit:contain!important}
.msh-page-topbar .brand>div{display:grid!important;min-width:0!important;gap:1px!important}
.msh-page-topbar .brand .eyebrow{display:block!important;margin:0!important;color:#667085!important;font-size:12px!important;font-weight:600!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.msh-page-topbar .brand h1{display:block!important;margin:1px 0 0!important;color:#172033!important;font-size:17px!important;font-weight:700!important;line-height:1.18!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.msh-page-topbar>.top-actions{grid-column:3!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;min-width:0!important;gap:8px!important}
.msh-nav-button{left:max(12px,env(safe-area-inset-left))!important;width:42px!important;height:42px!important;border-radius:13px!important}

/* Compact destination-only drawer. Secondary actions belong inside each page. */
.msh-nav-drawer,.msh-shell-drawer{width:min(340px,calc(100vw - 20px))!important;padding:12px!important;background:#f8fbfe!important}
.msh-nav-drawer>header{padding:3px 3px 10px!important}
.msh-nav-drawer nav{gap:2px!important;padding:9px 0!important;overflow-y:auto!important}
.msh-nav-drawer nav a{grid-template-columns:38px minmax(0,1fr) 16px!important;gap:9px!important;min-height:50px!important;padding:5px 9px!important;border-radius:12px!important}
.msh-nav-icon{width:36px!important;height:36px!important;border-radius:10px!important}
.msh-nav-icon svg{width:20px!important;height:20px!important}
.msh-nav-drawer nav a b{font-size:.94rem!important;line-height:1.15!important}
.msh-nav-drawer nav a small{display:none!important}
.msh-nav-drawer .msh-nav-label{display:flex!important;align-items:center!important;min-width:0!important}
.msh-nav-drawer .msh-nav-label b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msh-nav-drawer>footer{padding-top:10px!important}

:where(.shell,.admin-shell,.activity-shell,.upload-shell,.risk-shell,.app-shell>main,main.activity-shell,main.upload-shell){box-sizing:border-box}
:where(.shell,.admin-shell,.activity-shell,.upload-shell,.risk-shell){width:min(100%,var(--msh-page-max));margin-inline:auto;padding-left:var(--msh-page-gutter);padding-right:var(--msh-page-gutter)}
:where(.panel,.upload-card,.news-hero,.news-card,.state-card,.workspace){box-sizing:border-box}
:where(.panel,.upload-card,.state-card){margin-bottom:var(--msh-section-gap)}
:where(.form-grid,.grid,.editor-fields,.activity-form-grid){column-gap:14px;row-gap:14px}
:where(.tools,.toolbar,.activity-toolbar){gap:12px}

dialog{box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
dialog>form,dialog>div{box-sizing:border-box}
dialog :where(input,select,textarea,button){max-width:100%;box-sizing:border-box}
dialog footer{padding-bottom:max(0px,env(safe-area-inset-bottom))}

@media(max-width:900px){
  :root{--msh-page-gutter:14px;--msh-section-gap:14px;--msh-card-gap:10px}
  .msh-page-topbar{grid-template-columns:minmax(220px,1fr) auto!important}
  .msh-page-topbar>.top-actions{grid-column:2!important}
}
@media(max-width:760px){
  :root{--msh-page-gutter:10px;--msh-dialog-gutter:16px}
  .app-shell{padding-top:0!important}
  .msh-page-topbar,.msh-shell-topbar{grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:52px!important;min-height:64px!important;height:64px!important;column-gap:7px!important;padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left))!important;border-radius:0 0 16px 16px!important;overflow:visible!important}
  body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar{grid-template-columns:minmax(150px,1fr) minmax(82px,92px) auto!important}
  .msh-page-topbar>.brand,.msh-page-topbar>.msh-shell-brand,.admin-topbar>.brand{grid-column:1!important;grid-row:1!important;justify-self:start!important;width:100%!important;min-width:0!important;margin-left:46px!important;gap:7px!important}
  .msh-page-topbar .brand-logo{width:34px!important;height:34px!important;flex:0 0 34px!important}
  .msh-page-topbar .brand>div{display:grid!important;min-width:0!important}
  .msh-page-topbar .brand .eyebrow{display:block!important;font-size:12px!important;line-height:1.05!important}
  .msh-page-topbar .brand h1{display:block!important;font-size:13px!important;line-height:1.1!important}
  .msh-nav-button{left:max(7px,env(safe-area-inset-left))!important;width:40px!important;height:40px!important}
  .msh-page-topbar>.top-actions{grid-column:2!important;grid-row:1!important;gap:5px!important}
  body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar>.top-actions{grid-column:3!important}
  .msh-page-topbar .msh-user-copy{display:none!important}
  .msh-page-topbar .msh-user-avatar{width:40px!important;height:40px!important;flex-basis:40px!important}
  .msh-nav-drawer{width:min(326px,calc(100vw - 14px))!important;padding:10px!important}
  .msh-nav-drawer>header{padding-bottom:8px!important}
  .msh-nav-drawer nav{gap:1px!important;padding:7px 0!important}
  .msh-nav-drawer nav a{min-height:48px!important;padding:4px 8px!important}
  .msh-nav-icon{width:36px!important;height:36px!important}
  :where(.shell,.admin-shell,.activity-shell,.upload-shell,.risk-shell){padding-left:10px!important;padding-right:10px!important}
  :where(.panel,.upload-card,.state-card){border-radius:15px}
  :where(.form-grid,.grid,.editor-fields,.activity-form-grid){column-gap:10px;row-gap:11px}
  dialog{width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important;margin:6px auto!important;border-radius:18px!important}
}
@media(max-width:420px){
  :root{--msh-page-gutter:8px}
  :where(.shell,.admin-shell,.activity-shell,.upload-shell,.risk-shell){padding-left:8px!important;padding-right:8px!important}
  .msh-page-topbar .brand .eyebrow{font-size:12px!important}
  .msh-page-topbar .brand h1{font-size:12px!important}
}