/*
 * Safyne System global UI shell and theme contract.
 * v0.12.60 — one shared source of truth for the outer shell, brand palette,
 * functional colours, control styling and workspace navigation tokens.
 * Loaded by Safyne System module pages and Safyne HSE Knowledge, and loaded
 * after system.css on Dashboard/Clients/Settings/Classification pages.
 */

:root{
  /* Safyne brand — source of truth from the approved brand pack.
     Updated to match the exact navy used on the main public website. */
  --safyne-navy:#212d45;
  --safyne-green:#63B13D;
  --safyne-charcoal:#272B30;
  --wssys-module-header-height:82px;
  --safyne-grey:#525860;

  /* Shared functional UI colours — not brand colours. */
  --safyne-info:#2878d8;
  --safyne-info-dark:#1c65b1;
  --safyne-warning:#d99415;
  --safyne-danger:#b94848;
  --safyne-navy-rgb:33,45,69;
  --safyne-green-rgb:99,177,61;
  --safyne-info-rgb:40,120,216;
  --safyne-warning-rgb:217,148,21;
  --safyne-danger-rgb:185,72,72;

  /* Derived shell neutrals. */
  --safyne-navy-deep:#1a2335;
  --safyne-navy-soft:#2c3a55;
  --safyne-shell-text:#c8d6e1;
  --safyne-shell-muted:#9fb4c4;
  --safyne-shell-label:#718ba0;
  --safyne-shell-border:rgba(255,255,255,.08);
  --safyne-shell-hover:rgba(255,255,255,.065);
  --safyne-shell-active:rgba(255,255,255,.10);

  /* Global outer-shell geometry. */
  --safyne-shell-width:220px;
  --safyne-shell-collapsed-width:58px;
  --safyne-shell-brand-height:126px;
  --safyne-shell-logo-size:48px;
  --safyne-shell-logo-title-gap:7px;
  --safyne-shell-title-tagline-gap:5px;
  --safyne-shell-toggle-size:29px;
  --safyne-shell-nav-row-height:34px;

  /* Shared workspace sub-navigation. */
  --wssys-workspace-nav-font:Inter,"Segoe UI",Arial,sans-serif;
  --wssys-workspace-nav-size:12.5px;
  --wssys-workspace-nav-weight:520;
  --wssys-workspace-nav-active-weight:700;
  --wssys-workspace-nav-line-height:1.15;
  --wssys-workspace-nav-row-height:34px;
  --wssys-workspace-nav-icon-box:18px;
  --wssys-workspace-nav-icon-size:16px;
  --wssys-workspace-sidebar-width:220px;
  --wssys-workspace-sidebar-pad-x:12px;
  --wssys-workspace-sidebar-pad-y:12px;
  --wssys-workspace-sidebar-collapsed-width:58px;
  --wssys-workspace-toggle-size:30px;
  --wssys-workspace-toggle-top:8px;
  --wssys-workspace-toggle-right:8px;

  /* Shared form/menu theme. */
  --wssys-ui-font:Arial,Helvetica,sans-serif;
  --wssys-ui-control-height:32px;
  --wssys-ui-control-border:#b8c4ce;
  --wssys-ui-control-border-focus:var(--safyne-navy);
  --wssys-ui-control-radius:5px;
  --wssys-ui-control-bg:#fff;
  --wssys-ui-control-text:#263b4d;
  --wssys-ui-control-size:11.5px;
  --wssys-ui-control-weight:400;
  --wssys-ui-label-text:var(--safyne-grey);
  --wssys-ui-label-size:9px;
  --wssys-ui-label-weight:700;
  --wssys-ui-menu-border:#b9c5cf;
  --wssys-ui-menu-radius:6px;
  --wssys-ui-menu-shadow:0 8px 22px rgba(33,45,69,.16);
  --wssys-ui-menu-hover:#f0f4f7;
  --wssys-ui-menu-text:var(--safyne-navy);
}

*{box-sizing:border-box}

/* Shared controls used across modules. */
.wssys-ui-control{
  min-height:var(--wssys-ui-control-height);
  height:var(--wssys-ui-control-height);
  padding:6px 8px;
  border:1px solid var(--wssys-ui-control-border);
  border-radius:var(--wssys-ui-control-radius);
  background:var(--wssys-ui-control-bg);
  color:var(--wssys-ui-control-text);
  font:var(--wssys-ui-control-weight) var(--wssys-ui-control-size)/1.2 var(--wssys-ui-font);
  text-transform:none;
  letter-spacing:0;
}
.wssys-ui-control:focus{
  outline:2px solid rgba(33,45,69,.14);
  outline-offset:0;
  border-color:var(--wssys-ui-control-border-focus);
}
.wssys-ui-label{
  color:var(--wssys-ui-label-text);
  font:var(--wssys-ui-label-weight) var(--wssys-ui-label-size)/1.1 var(--wssys-ui-font);
}

/* Module pages must never create horizontal document overflow beside the shell. */
body.wssys-module-host{min-width:0;max-width:100%;overflow-x:hidden}
body.wssys-module-host main,
body.wssys-module-host #wssApp,
body.wssys-module-host #wrbApp,
body.wssys-module-host #wss-coshh-app{min-width:0;max-width:100%}

/* The module sidebar is desktop-only. Dashboard/mobile behaviour below 821px
 * remains with system.css so existing responsive screens are not disturbed. */
.wssys-module-system-sidebar{display:none}
.wssys-module-sidebar-toggle{display:none}

@media(min-width:821px){
  body.wssys-module-host{
    padding-left:0!important;
    margin-left:var(--safyne-shell-width)!important;
    width:calc(100% - var(--safyne-shell-width))!important;
    max-width:calc(100% - var(--safyne-shell-width))!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }
  .wssys-workspace{
    margin-left:var(--safyne-shell-width)!important;
    width:calc(100% - var(--safyne-shell-width))!important;
    max-width:calc(100% - var(--safyne-shell-width))!important;
  }

  .wssys-module-system-sidebar,
  .wssys-sidebar{
    position:fixed!important;
    z-index:25000!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:var(--safyne-shell-width)!important;
    display:flex!important;
    flex-direction:column!important;
    background:linear-gradient(180deg,var(--safyne-navy) 0%,var(--safyne-navy-deep) 100%)!important;
    color:var(--safyne-shell-text)!important;
    border-right:1px solid rgba(255,255,255,.05)!important;
    box-shadow:8px 0 32px rgba(33,45,69,.09)!important;
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
    transition:width .18s ease!important;
  }
  body.wssys-module-host,
  .wssys-workspace{transition:margin-left .18s ease,width .18s ease,max-width .18s ease!important}

  /* One brand block for Dashboard and all module pages. */
  body:not(.wssys-main-sidebar-collapsed) .wssys-module-brand,
  body:not(.wssys-main-sidebar-collapsed) .wssys-sidebar-brand{
    position:relative!important;
    height:var(--safyne-shell-brand-height)!important;
    min-height:var(--safyne-shell-brand-height)!important;
    padding:14px 48px 12px 16px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:0!important;
    border-bottom:1px solid var(--safyne-shell-border)!important;
  }
  body:not(.wssys-main-sidebar-collapsed) .wssys-module-logo,
  body:not(.wssys-main-sidebar-collapsed) .wssys-logo-box{
    width:var(--safyne-shell-logo-size)!important;
    height:var(--safyne-shell-logo-size)!important;
    flex:0 0 var(--safyne-shell-logo-size)!important;
    margin:0!important;
    padding:5px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:9px!important;
    background:#fff!important;
    box-shadow:0 3px 10px rgba(0,0,0,.14)!important;
  }
  body:not(.wssys-main-sidebar-collapsed) .wssys-module-logo img,
  body:not(.wssys-main-sidebar-collapsed) .wssys-logo-box img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  body:not(.wssys-main-sidebar-collapsed) .wssys-module-product-name,
  body:not(.wssys-main-sidebar-collapsed) .wssys-product-name{
    display:block!important;
    margin:var(--safyne-shell-logo-title-gap) 0 0!important;
    color:#fff!important;
    font-size:13.5px!important;
    font-weight:850!important;
    line-height:1.1!important;
    letter-spacing:.035em!important;
    white-space:nowrap!important;
  }
  body:not(.wssys-main-sidebar-collapsed) .wssys-module-company-name,
  body:not(.wssys-main-sidebar-collapsed) .wssys-company-name{
    display:block!important;
    width:auto!important;
    max-width:190px!important;
    margin:var(--safyne-shell-title-tagline-gap) 0 0!important;
    padding:0!important;
    color:#aebfd1!important;
    font-size:10.5px!important;
    font-weight:600!important;
    line-height:1.15!important;
    letter-spacing:.03em!important;
    text-align:left!important;
    white-space:nowrap!important;
  }

  .wssys-module-sidebar-toggle,
  .wssys-system-sidebar-toggle{
    display:flex!important;
    position:absolute!important;
    z-index:4!important;
    top:14px!important;
    right:10px!important;
    width:var(--safyne-shell-toggle-size)!important;
    height:var(--safyne-shell-toggle-size)!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:6px!important;
    background:rgba(255,255,255,.10)!important;
    color:#dce7f0!important;
    cursor:pointer!important;
    box-shadow:0 2px 8px rgba(0,0,0,.10)!important;
  }
  .wssys-module-sidebar-toggle:hover,
  .wssys-system-sidebar-toggle:hover{background:rgba(255,255,255,.17)!important;color:#fff!important}
  .wssys-module-sidebar-toggle svg,
  .wssys-system-sidebar-toggle svg{
    width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;
    stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;
    transition:transform .18s ease!important;
  }

  /* Outer navigation — pixel-identical on System and module templates. */
  .wssys-module-nav,
  .wssys-nav{
    padding:4px 9px 6px!important;
    overflow:auto!important;
    scrollbar-width:thin!important;
  }
  .wssys-module-nav>a,
  .wssys-module-settings>summary,
  .wssys-nav>a,
  .wssys-nav-group>summary{
    min-height:var(--safyne-shell-nav-row-height)!important;
    height:var(--safyne-shell-nav-row-height)!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    margin:0!important;
    padding:5px 8px!important;
    border:0!important;
    border-radius:7px!important;
    background:transparent!important;
    color:var(--safyne-shell-text)!important;
    text-decoration:none!important;
    font-size:13.5px!important;
    font-weight:560!important;
    line-height:1.1!important;
    cursor:pointer!important;
    list-style:none!important;
    box-shadow:none!important;
  }
  .wssys-module-settings>summary::-webkit-details-marker,
  .wssys-nav-group>summary::-webkit-details-marker{display:none!important}
  .wssys-module-nav>a:hover,
  .wssys-module-settings>summary:hover,
  .wssys-nav>a:hover,
  .wssys-nav-group>summary:hover{
    background:var(--safyne-shell-hover)!important;
    color:#fff!important;
  }
  .wssys-module-nav>a.is-active,
  .wssys-module-settings[open]>summary,
  .wssys-nav>a.is-active,
  .wssys-nav-group>summary.is-active{
    background:var(--safyne-shell-active)!important;
    color:#fff!important;
    box-shadow:inset 3px 0 0 var(--safyne-green)!important;
  }
  .wssys-module-nav-icon,
  .wssys-nav-icon{
    width:20px!important;height:20px!important;display:grid!important;place-items:center!important;
    flex:0 0 20px!important;color:#a9bfd0!important;font-size:15px!important;line-height:1!important;
  }
  .wssys-module-nav-icon svg,
  .wssys-nav-icon svg{
    width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;
    stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important;
  }
  .wssys-module-nav>a.is-active .wssys-module-nav-icon,
  .wssys-module-settings[open]>summary .wssys-module-nav-icon,
  .wssys-nav>a.is-active .wssys-nav-icon,
  .wssys-nav-group>summary.is-active .wssys-nav-icon{color:#fff!important}
  .wssys-module-count,
  .wssys-nav-count{
    margin-left:auto!important;min-width:21px!important;padding:2px 6px!important;text-align:center!important;
    border-radius:999px!important;background:rgba(255,255,255,.09)!important;color:#bcd0df!important;
    font-size:9.5px!important;line-height:1!important;
  }
  .wssys-module-nav-label,
  .wssys-nav-label{
    padding:8px 9px 3px!important;margin:0!important;color:var(--safyne-shell-label)!important;
    font-size:9px!important;font-weight:800!important;line-height:1!important;
    text-transform:none!important;letter-spacing:.55px!important;
  }
  .wssys-module-chevron,
  .wssys-nav-chevron{margin-left:auto!important;color:#7f9aaf!important;font-size:11px!important;transition:transform .16s ease!important}
  .wssys-module-settings[open] .wssys-module-chevron,
  .wssys-nav-group[open] .wssys-nav-chevron{transform:rotate(180deg)!important}

  .wssys-module-subnav,
  .wssys-subnav{display:grid!important;gap:1px!important;padding:3px 0 4px 27px!important}
  .wssys-module-subnav a,
  .wssys-subnav a{
    display:flex!important;align-items:center!important;gap:8px!important;min-height:34px!important;height:34px!important;
    padding:5px 8px!important;margin:0!important;border-radius:7px!important;color:#a9bdcc!important;
    text-decoration:none!important;font-size:13px!important;font-weight:560!important;line-height:1.1!important;white-space:nowrap!important;
  }
  .wssys-module-subnav a:hover,
  .wssys-module-subnav a:focus-visible,
  .wssys-subnav a:hover,
  .wssys-subnav a:focus-visible{color:#fff!important;background:var(--safyne-shell-hover)!important}
  .wssys-module-subnav-dot,
  .wssys-subnav-dot{width:5px!important;height:5px!important;flex:0 0 5px!important;border-radius:50%!important;background:#58758c!important}

  .wssys-module-foot,
  .wssys-sidebar-foot{
    margin-top:auto!important;
    border-top:1px solid var(--safyne-shell-border)!important;
    padding:10px 13px 12px!important;
  }
  .wssys-module-version,
  .wssys-version-pill{
    display:inline-block!important;margin-bottom:8px!important;padding:3px 6px!important;border-radius:5px!important;
    background:rgba(255,255,255,.08)!important;color:#93aabd!important;font-size:8.5px!important;font-weight:800!important;letter-spacing:.35px!important;
  }
  .wssys-sidebar-signout,
  .wssys-module-signout{
    display:inline-flex!important;align-items:center!important;min-height:28px!important;color:#aebfd1!important;
    text-decoration:none!important;font-size:10.5px!important;font-weight:700!important;
  }
  .wssys-sidebar-signout:hover,.wssys-module-signout:hover{color:#fff!important}

  /* v0.12.59 canonical expanded brand geometry.
   * These body-qualified selectors deliberately outrank historical page CSS.
   * System and module pages now also use the same system-sidebar.php markup. */
  body:not(.wssys-main-sidebar-collapsed) .wssys-sidebar-brand,
  body:not(.wssys-main-sidebar-collapsed) .wssys-module-brand{
    height:var(--safyne-shell-brand-height)!important;
    min-height:var(--safyne-shell-brand-height)!important;
    padding:14px 48px 12px 16px!important;
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;
    justify-content:flex-start!important;gap:0!important;
  }
  body:not(.wssys-main-sidebar-collapsed) .wssys-logo-box,
  body:not(.wssys-main-sidebar-collapsed) .wssys-module-logo{
    width:var(--safyne-shell-logo-size)!important;height:var(--safyne-shell-logo-size)!important;
    flex:0 0 var(--safyne-shell-logo-size)!important;margin:0!important;padding:5px!important;
  }
  body:not(.wssys-main-sidebar-collapsed) .wssys-product-name,
  body:not(.wssys-main-sidebar-collapsed) .wssys-module-product-name{
    margin:var(--safyne-shell-logo-title-gap) 0 0!important;
  }
  body:not(.wssys-main-sidebar-collapsed) .wssys-company-name,
  body:not(.wssys-main-sidebar-collapsed) .wssys-module-company-name{
    margin:var(--safyne-shell-title-tagline-gap) 0 0!important;
  }

  /* Shared collapsed shell. */
  body.wssys-main-sidebar-collapsed.wssys-module-host{
    margin-left:var(--safyne-shell-collapsed-width)!important;
    width:calc(100% - var(--safyne-shell-collapsed-width))!important;
    max-width:calc(100% - var(--safyne-shell-collapsed-width))!important;
  }
  body.wssys-main-sidebar-collapsed .wssys-workspace{
    margin-left:var(--safyne-shell-collapsed-width)!important;
    width:calc(100% - var(--safyne-shell-collapsed-width))!important;
    max-width:calc(100% - var(--safyne-shell-collapsed-width))!important;
  }
  body.wssys-main-sidebar-collapsed .wssys-module-system-sidebar,
  body.wssys-main-sidebar-collapsed .wssys-sidebar{width:var(--safyne-shell-collapsed-width)!important}
  body.wssys-main-sidebar-collapsed .wssys-module-sidebar-toggle,
  body.wssys-main-sidebar-collapsed .wssys-system-sidebar-toggle{right:14px!important}
  body.wssys-main-sidebar-collapsed .wssys-module-sidebar-toggle svg,
  body.wssys-main-sidebar-collapsed .wssys-system-sidebar-toggle svg{transform:rotate(180deg)!important}
  body.wssys-main-sidebar-collapsed .wssys-module-brand,
  body.wssys-main-sidebar-collapsed .wssys-sidebar-brand{
    height:74px!important;min-height:74px!important;padding:38px 9px 7px!important;
    align-items:center!important;justify-content:center!important;
  }
  body.wssys-main-sidebar-collapsed .wssys-module-logo,
  body.wssys-main-sidebar-collapsed .wssys-logo-box{
    width:35px!important;height:35px!important;flex:0 0 35px!important;padding:4px!important;margin:0 auto!important;
  }
  body.wssys-main-sidebar-collapsed .wssys-module-product-name,
  body.wssys-main-sidebar-collapsed .wssys-module-company-name,
  body.wssys-main-sidebar-collapsed .wssys-product-name,
  body.wssys-main-sidebar-collapsed .wssys-company-name,
  body.wssys-main-sidebar-collapsed .wssys-module-nav-label,
  body.wssys-main-sidebar-collapsed .wssys-nav-label,
  body.wssys-main-sidebar-collapsed .wssys-module-count,
  body.wssys-main-sidebar-collapsed .wssys-nav-count,
  body.wssys-main-sidebar-collapsed .wssys-module-subnav,
  body.wssys-main-sidebar-collapsed .wssys-subnav,
  body.wssys-main-sidebar-collapsed .wssys-module-version,
  body.wssys-main-sidebar-collapsed .wssys-version-pill,
  body.wssys-main-sidebar-collapsed .wssys-sidebar-signout,
  body.wssys-main-sidebar-collapsed .wssys-module-signout{display:none!important}
  body.wssys-main-sidebar-collapsed .wssys-module-nav,
  body.wssys-main-sidebar-collapsed .wssys-nav{padding:8px 7px!important;overflow-x:hidden!important}
  body.wssys-main-sidebar-collapsed .wssys-module-nav>a,
  body.wssys-main-sidebar-collapsed .wssys-module-settings>summary,
  body.wssys-main-sidebar-collapsed .wssys-nav>a,
  body.wssys-main-sidebar-collapsed .wssys-nav-group>summary{
    width:44px!important;min-width:44px!important;height:40px!important;min-height:40px!important;
    padding:0!important;margin:4px auto!important;justify-content:center!important;gap:0!important;
  }
  body.wssys-main-sidebar-collapsed .wssys-module-nav>a>span:not(.wssys-module-nav-icon),
  body.wssys-main-sidebar-collapsed .wssys-module-settings>summary>span:not(.wssys-module-nav-icon),
  body.wssys-main-sidebar-collapsed .wssys-nav>a>span:not(.wssys-nav-icon),
  body.wssys-main-sidebar-collapsed .wssys-nav-group>summary>span:not(.wssys-nav-icon){display:none!important}
  body.wssys-main-sidebar-collapsed .wssys-module-settings,
  body.wssys-main-sidebar-collapsed .wssys-nav-group{width:44px!important;margin:4px auto!important}
  body.wssys-main-sidebar-collapsed .wssys-module-foot,
  body.wssys-main-sidebar-collapsed .wssys-sidebar-foot{padding:8px 7px 10px!important;text-align:center!important}
}

@media(max-width:820px){
  body.wssys-module-host{margin-left:0!important;width:100%!important;max-width:100%!important}
  .wssys-module-system-sidebar{display:none!important}
}