/* Safyne System v0.6.22 — Phase 2 header-only visual alignment.
   The COSHH gradient is used only for the module-wide top banner.
   Existing Report Builder, Safety App and RAMS cards/panels remain unchanged. */
:root{
  --wssys-module-gradient:linear-gradient(120deg,var(--safyne-navy) 0%,var(--safyne-navy-soft) 100%);
  --wssys-module-header-height:82px;
}

/* Shared module-wide banner. */
#wrbApp .wrb-topbar,
#wssApp .wss-topbar,
#wramsApp .wrams-topbar,
#wss-coshh-app .wss-app-header{
  background:var(--wssys-module-gradient)!important;
  color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}

.wssys-module-top-heading{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}
.wssys-module-top-kicker,
#wss-coshh-app .wss-kicker{
  display:block!important;
  margin:0 0 3px!important;
  color:#8bd0d6!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  opacity:1!important;
}
.wssys-module-top-heading h1,
#wss-coshh-app .wss-app-header h1{
  margin:0 0 3px!important;
  color:#fff!important;
  font-size:25px!important;
  font-weight:800!important;
  line-height:1.05!important;
  letter-spacing:-.02em!important;
}
.wssys-module-top-heading p,
#wss-coshh-app .wss-app-header p{
  margin:0!important;
  max-width:780px!important;
  color:rgba(255,255,255,.92)!important;
  font-size:12px!important;
  line-height:1.25!important;
}

/* Desktop: same banner proportions as the COSHH reference, while retaining
   the existing sticky command-bar behaviour of Report Builder / Safety / RAMS. */
@media(min-width:1201px){
  #wrbApp .wrb-topbar,
  #wssApp.wss-desktop-device .wss-topbar,
  #wramsApp .wrams-topbar,
  #wss-coshh-app .wss-app-header{
    height:var(--wssys-module-header-height)!important;
    min-height:var(--wssys-module-header-height)!important;
    padding:10px 28px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:28px!important;
  }

  #wrbApp .wrb-sidebar{top:var(--wssys-module-header-height)!important;height:calc(100vh - var(--wssys-module-header-height))!important}
  /* Safety App sidebar already lives inside the shell below the top banner.
     Do not apply the banner height a second time or the submenu drops down. */
  #wssApp.wss-desktop-device .wss-sidebar{top:auto!important;height:100%!important}
  #wramsApp .wrams-local-nav{top:var(--wssys-module-header-height)!important;height:calc(100vh - var(--wssys-module-header-height))!important}
}

/* Keep top-bar controls readable against the fade without changing their
   meaning or the normal controls elsewhere in the modules. */
#wrbApp .wrb-topbar .wrb-status,
#wssApp .wss-topbar .wss-status{
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
}
#wramsApp .wrams-topbar .wrams-save-state{color:rgba(255,255,255,.8)!important}
#wramsApp .wrams-topbar .wrams-btn.wrams-ghost{
  background:#fff!important;
  border-color:#fff!important;
  color:#173650!important;
}

/* COSHH body: move the COSHH workspace onto the same application canvas as
   the other modules. This is deliberately scoped to COSHH only. */
@media(min-width:821px){
  #wss-coshh-app{
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  #wss-coshh-app>.wss-app{
    --wss-maroon:var(--safyne-navy);
    --wss-maroon-dark:var(--safyne-navy-deep);
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:visible!important;
    min-height:100vh!important;
    background:#f4f6f8!important;
  }
  #wss-coshh-app .wss-app-header{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
  }
  #wss-coshh-app .wss-coshh-shell{
    grid-template-columns:240px minmax(0,1fr)!important;
    align-items:stretch!important;
    min-height:calc(100vh - var(--wssys-module-header-height))!important;
  }
  #wss-coshh-app .wss-coshh-local-nav{
    width:240px!important;
    padding:18px!important;
    position:sticky!important;
    top:var(--wssys-module-header-height)!important;
    height:calc(100vh - var(--wssys-module-header-height))!important;
    min-height:0!important;
    border-right:1px solid #dfe5ea!important;
    background:#fff!important;
    box-sizing:border-box!important;
  }
  #wss-coshh-app .wss-coshh-workspace{
    min-width:0!important;
    max-width:100%!important;
    background:#f4f6f8!important;
  }
  #wss-coshh-app .wss-coshh-workspace .wss-tab-panel{
    width:100%!important;
    max-width:1280px!important;
    margin:0 auto!important;
    padding:24px 30px!important;
  }
  #wss-coshh-app .wss-card{
    border:1px solid #dfe5ea!important;
    border-radius:12px!important;
    padding:20px!important;
    margin-bottom:18px!important;
    box-shadow:0 1px 2px rgba(0,0,0,.03)!important;
  }
  #wss-coshh-app .wss-upload-card{border-top:1px solid #dfe5ea!important}
  #wss-coshh-app .wss-card h2{font-size:19px!important;color:var(--safyne-navy)!important}
  #wss-coshh-app .wss-card h3{color:var(--safyne-navy)!important}
  #wss-coshh-app .wss-app.wss-coshh-local-collapsed .wss-coshh-shell{grid-template-columns:58px minmax(0,1fr)!important}
  #wss-coshh-app .wss-app.wss-coshh-local-collapsed .wss-coshh-local-nav{width:58px!important;padding:10px 8px!important}
}

/* Intermediate widths: keep the fade but avoid forcing a tall sticky header
   when the action buttons need to wrap. */
@media(min-width:821px) and (max-width:1200px){
  #wrbApp .wrb-topbar,
  #wssApp .wss-topbar,
  #wramsApp .wrams-topbar,
  #wss-coshh-app .wss-app-header{
    min-height:88px!important;
    height:auto!important;
    padding:10px 20px!important;
    flex-wrap:wrap!important;
  }
  #wrbApp .wrb-sidebar,
  #wssApp.wss-desktop-device .wss-sidebar,
  #wramsApp .wrams-local-nav,
  #wss-coshh-app .wss-coshh-local-nav{
    top:0!important;
    height:auto!important;
    min-height:calc(100vh - 88px)!important;
  }
  #wss-coshh-app .wss-app-header{position:relative!important}
  #wss-coshh-app .wss-coshh-shell{grid-template-columns:220px minmax(0,1fr)!important}
  #wss-coshh-app .wss-coshh-local-nav{width:220px!important}
}

@media(max-width:820px){
  #wrbApp .wrb-topbar,
  #wssApp .wss-topbar,
  #wramsApp .wrams-topbar,
  #wss-coshh-app .wss-app-header{
    min-height:0!important;
    height:auto!important;
    padding:10px 15px!important;
    flex-wrap:wrap!important;
  }
  .wssys-module-top-kicker,#wss-coshh-app .wss-kicker{font-size:10px!important}
  .wssys-module-top-heading h1,#wss-coshh-app .wss-app-header h1{font-size:24px!important;margin-bottom:6px!important}
  .wssys-module-top-heading p,#wss-coshh-app .wss-app-header p{font-size:11.5px!important}
}


/* Safyne System v0.6.26 — RAMS is the desktop visual reference.
   Keep RAMS unchanged; align the other module workspaces to the same 240px
   secondary navigation, 1480px working canvas and readable type scale. */
@media(min-width:1101px){
  /* Same secondary-menu width and same available centre column in every app. */
  #wrbApp .wrb-shell,
  #wssApp.wss-desktop-device .wss-shell,
  #wramsApp .wrams-shell,
  #wss-coshh-app .wss-coshh-shell{
    grid-template-columns:240px minmax(0,1fr)!important;
    min-height:calc(100vh - var(--wssys-module-header-height))!important;
  }
  #wrbApp .wrb-sidebar,
  #wssApp.wss-desktop-device .wss-sidebar,
  #wramsApp .wrams-local-nav,
  #wss-coshh-app .wss-coshh-local-nav{
    width:240px!important;
  }
  #wssApp.wss-desktop-device .wss-sidebar{padding:18px!important}

  /* RAMS uses a full-width main column with a 1480px inner view. Mirror that
     geometry so the centre does not visibly grow/shrink as modules change. */
  #wrbApp .wrb-main,
  #wssApp.wss-desktop-device .wss-main{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:22px 28px 46px!important;
    box-sizing:border-box!important;
  }
  #wrbApp .wrb-view,
  #wssApp.wss-desktop-device .wss-main>section{
    width:100%!important;
    max-width:1480px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  #wss-coshh-app .wss-coshh-workspace .wss-tab-panel{
    width:100%!important;
    max-width:1480px!important;
    margin:0 auto!important;
    padding:22px 28px 46px!important;
    box-sizing:border-box!important;
  }

  /* Preserve each module's collapsed state. */
  #wrbApp.wrb-sidebar-collapsed .wrb-shell,
  #wssApp.wss-desktop-device.wss-field-sidebar-collapsed .wss-shell,
  #wramsApp.wrams-local-sidebar-collapsed .wrams-shell,
  #wss-coshh-app .wss-app.wss-coshh-local-collapsed .wss-coshh-shell{
    grid-template-columns:58px minmax(0,1fr)!important;
  }
  #wrbApp.wrb-sidebar-collapsed .wrb-sidebar,
  #wssApp.wss-desktop-device.wss-field-sidebar-collapsed .wss-sidebar,
  #wramsApp.wrams-local-sidebar-collapsed .wrams-local-nav,
  #wss-coshh-app .wss-app.wss-coshh-local-collapsed .wss-coshh-local-nav{
    width:58px!important;
  }

  /* Page hierarchy: RAMS reference = 27px page title / 13px supporting copy. */
  #wrbApp .wrb-page-title h1,
  #wssApp .wss-page-title h1{
    font-size:27px!important;
    line-height:1.1!important;
    color:#17324b!important;
  }
  #wrbApp .wrb-page-title p,
  #wssApp .wss-page-title p{
    margin:4px 0 0!important;
    font-size:13px!important;
    line-height:1.45!important;
    color:#82909d!important;
  }

  /* Major panel headings follow the RAMS 17px / 11.5px hierarchy. */
  #wrbApp .wrb-card-head h2,
  #wssApp .wss-card-head h2,
  #wss-coshh-app .wss-card h2{
    font-size:17px!important;
    line-height:1.2!important;
    color:#213b52!important;
  }
  #wrbApp .wrb-card-head p,
  #wssApp .wss-card-head p,
  #wss-coshh-app .wss-card-title-row p{
    font-size:11.5px!important;
    line-height:1.4!important;
    color:#5d7486!important;
  }
  #wss-coshh-app .wss-card h3{font-size:14.5px!important;color:#29435a!important}

  /* General working controls use RAMS as the sizing guide. Deliberately leave
     specialist compact tables/chips alone so dense registers stay usable. */
  #wrbApp label,
  #wssApp label,
  #wss-coshh-app .wss-label,
  #wss-coshh-app .wss-risk-controls label{
    font-size:11.5px!important;
    line-height:1.2!important;
  }
  #wrbApp input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  #wrbApp select,
  #wrbApp textarea,
  #wssApp input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  #wssApp select,
  #wssApp textarea,
  #wss-coshh-app .wss-field input,
  #wss-coshh-app .wss-field select,
  #wss-coshh-app .wss-field textarea{
    font-size:13.5px!important;
    line-height:1.35!important;
  }
  #wssApp input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
  #wssApp select{
    min-height:38px!important;
    height:38px!important;
  }
  #wrbApp .wrb-btn,
  #wssApp .wss-btn,
  #wss-coshh-app .wss-btn{
    min-height:38px!important;
    font-size:12.5px!important;
    line-height:1.1!important;
  }
}

/* V0.6.41 - Cross-module readability baseline.
   RAMS already uses the preferred working scale, so only the other modules are
   raised to it. Dense badges/counters remain intentionally compact. */
:root{--wssys-readable-small:12.5px;--wssys-readable-body:14px}

#wrbApp label,
#wssApp label,
#wss-coshh-app .wss-label,
#wss-coshh-app .wss-risk-controls label{
  font-size:var(--wssys-readable-small)!important;
  line-height:1.3!important;
}
#wrbApp input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
#wrbApp select,
#wrbApp textarea,
#wssApp input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
#wssApp select,
#wssApp textarea,
#wss-coshh-app .wss-field input,
#wss-coshh-app .wss-field select,
#wss-coshh-app .wss-field textarea{
  font-size:var(--wssys-readable-body)!important;
  font-weight:400!important;
  line-height:1.4!important;
}
#wrbApp .wrb-page-title p,
#wssApp .wss-page-title p,
#wrbApp .wrb-card-head p,
#wssApp .wss-card-head p,
#wss-coshh-app .wss-card-title-row p,
#wss-coshh-app .wss-help,
#wss-coshh-app .wss-muted{
  font-size:var(--wssys-readable-small)!important;
  line-height:1.4!important;
  font-weight:400!important;
}


/* Safyne System v0.7.54 — RAMS viewport-contained scrolling.
   Desktop RAMS now uses the same user model as the fixed-menu workspaces:
   the module banner and secondary navigation remain stationary while only
   the RA / Method Statement working column scrolls.  This deliberately
   replaces body/document scrolling rather than relying on sticky alone. */
@media(min-width:821px){
  body.wssys-module-host.wrams-body{
    height:100vh!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  #wramsApp.wrams-app{
    height:100vh!important;
    min-height:0!important;
    max-height:100vh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  #wramsApp .wrams-topbar{
    position:relative!important;
    top:auto!important;
    flex:0 0 auto!important;
  }
  #wramsApp .wrams-shell{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    align-items:stretch!important;
    overflow:hidden!important;
  }
  #wramsApp .wrams-local-nav{
    position:relative!important;
    top:auto!important;
    align-self:stretch!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  #wramsApp .wrams-main{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable;
  }
}

/* Phones/tablets retain normal document scrolling. */
@media(max-width:820px){
  body.wssys-module-host.wrams-body{
    height:auto!important;
    min-height:100vh!important;
    overflow-y:auto!important;
  }
  #wramsApp.wrams-app{
    display:block!important;
    height:auto!important;
    min-height:100vh!important;
    max-height:none!important;
    overflow:visible!important;
  }
  #wramsApp .wrams-shell,
  #wramsApp .wrams-local-nav,
  #wramsApp .wrams-main{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
}