#safetyWorkspace{--sw-border:#d6e0e8;--sw-muted:#586b7b}
#safetyWorkspace [hidden],#swExistingJsas[hidden]{display:none!important}
#safetyWorkspace .sw-header{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:4px solid #168e91}
#safetyWorkspace .sw-header h2{margin:8px 0;font-size:25px}
#safetyWorkspace .sw-eyebrow{font-size:11px;letter-spacing:.14em;color:#187b80;font-weight:800}
#safetyWorkspace button{width:auto;cursor:pointer}
#safetyWorkspace .sw-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
#safetyWorkspace .sw-tabs [aria-current=page]{background:#126f77;color:white;border-color:#126f77}
#safetyWorkspace .sw-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#safetyWorkspace .sw-metrics .card{display:flex;flex-direction:column;gap:7px}
#safetyWorkspace .sw-metrics strong{font-size:32px;line-height:1.1}
#safetyWorkspace .sw-metrics span{color:var(--sw-muted);font-size:13px}
#safetyWorkspace .sw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#safetyWorkspace .sw-wide{grid-column:1/-1}
#safetyWorkspace .sw-filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
#safetyWorkspace .sw-row{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;width:100%;padding:16px 10px;border:0;border-bottom:1px solid var(--sw-border);border-radius:0;background:transparent;color:inherit}
#safetyWorkspace .sw-row:hover{background:rgba(22,142,145,.08)}
#safetyWorkspace .sw-row strong{display:block;font-size:14px;overflow-wrap:anywhere}
#safetyWorkspace small{display:block;margin-top:5px;color:var(--sw-muted);font-size:12px}
#safetyWorkspace .sw-pill{display:inline-block;padding:4px 8px;border-radius:20px;background:#e8eff4;color:#334a5c;font-size:11px;white-space:nowrap;margin:2px}
#safetyWorkspace .sw-critical,#safetyWorkspace .sw-high{background:#ffe7e2;color:#973921}
#safetyWorkspace .sw-verified,#safetyWorkspace .sw-closed{background:#dff2e8;color:#206447}
#safetyWorkspace .sw-completed{background:#fff0c9;color:#795d12}
#safetyWorkspace .sw-detail p{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 14px}
#safetyWorkspace .sw-history{display:grid;gap:3px;padding:13px 0;border-bottom:1px solid var(--sw-border)}
#safetyWorkspace .sw-empty{padding:20px 0}
#safetyWorkspace .sw-file{display:block;margin:8px 0;overflow-wrap:anywhere;max-width:100%}
#safetyWorkspace .sw-error,#swFormError{color:#b43c2b}
html.lc-industrial-dark #safetyWorkspace{--sw-border:#36485b;--sw-muted:#b9c9d6}
html.lc-industrial-dark #safetyWorkspace .sw-eyebrow{color:#7bd4d2}
@media(max-width:650px){#safetyWorkspace .sw-grid,#safetyWorkspace .sw-filters{grid-template-columns:minmax(0,1fr)}#safetyWorkspace .sw-metrics{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#safetyWorkspace .sw-header,#safetyWorkspace .sw-row{align-items:flex-start;flex-direction:column}#safetyWorkspace .sw-header h2{font-size:21px}}
/* Rubber goods states. Overdue and missing share the alarm colour because both
   mean the same thing to a crew: no pair we can vouch for. Not issued is left
   on the neutral pill -- sleeves are not universal, and a permanent red flag
   against the men who were never issued any teaches people to ignore the screen. */
#safetyWorkspace .sw-overdue,#safetyWorkspace .sw-missing{background:#ffe7e2;color:#973921}
#safetyWorkspace .sw-expiring{background:#fff4d6;color:#7a5300}
#safetyWorkspace .sw-current{background:#e3f4e8;color:#1c6b33}
#safetyWorkspace .sw-ppe-status{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-start;flex:0 0 auto;width:min(560px,58%)}
#safetyWorkspace .sw-ppe-item{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1 1 168px;min-width:0;font-weight:400}
#safetyWorkspace .sw-ppe-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sw-muted,#5a6b7a)}
#safetyWorkspace .sw-ppe-item .sw-pill{margin:0}
#safetyWorkspace .sw-ppe-item small{color:var(--sw-muted,#5a6b7a);font-size:11px;font-weight:400}
#safetyWorkspace .sw-row[data-ppe]{align-items:flex-start;gap:24px}
@media(max-width:700px){#safetyWorkspace .sw-ppe-status{width:100%}}
html.lc-industrial-dark #safetyWorkspace .sw-overdue,html.lc-industrial-dark #safetyWorkspace .sw-missing{background:#4a2018;color:#ffd9d0}
html.lc-industrial-dark #safetyWorkspace .sw-expiring{background:#463612;color:#ffe6a8}
html.lc-industrial-dark #safetyWorkspace .sw-current{background:#123626;color:#a8e6bf}

/* THE DATE INPUT THAT RAN OUT OF ITS BOX ON A PHONE
   Reported on Rubber goods: "Test date on the item" extended past the Gloves
   and Sleeves sections. Three defaults compound, and all three have to give or
   the widest one still wins.

   1. `grid-template-columns:1fr` is minmax(AUTO,1fr), and an auto minimum is
      min-content, so the column was never allowed to be narrower than its
      widest child. The two-column rule above already says minmax(0,1fr); the
      phone rule that replaced it did not, so shrinking stopped exactly where
      it was needed most. Fixed above.

   2. A <fieldset> carries min-inline-size:min-content from the UA sheet, which
      no ordinary width can override. Gloves and Sleeves are fieldsets.

   3. input[type=date] reports a min-content width of its own -- the spinner
      and the widest date it can hold, plus 14px of padding each side at 16px
      type, which is most of a narrow phone on its own.

   Nothing here changes any layout wider than 650px. */
#safetyWorkspace fieldset {
  min-inline-size: 0;
  min-width: 0;
}

#safetyWorkspace input,
#safetyWorkspace select,
#safetyWorkspace textarea {
  min-width: 0;
  max-width: 100%;
}

/* THE SAME FIELD, STILL OUT OF ITS BOX ON AN INSTALLED iPHONE
   The rules above fix it in a desktop browser narrowed to phone width. WebKit
   needs more, and each of these is a separate WebKit behaviour rather than a
   different way of saying the same thing:

   - Safari does not honour min-width:0 on a fieldset that is using the special
     fieldset layout. Giving it display:block drops it into ordinary block
     layout, where the min-width above finally applies.

   - input[type=date] on iOS sizes itself from its native control, not from
     width. Until -webkit-appearance is cleared it keeps that intrinsic width
     and simply overhangs whatever box it is in.

   - the value inside the control is laid out by ::-webkit-date-and-time-value,
     which is centred and carries its own inline size. Left-aligning it and
     giving it width:100% stops it pushing the control wider than the field.

   width:100% is restated on the input because clearing the appearance also
   drops the sizing that came with it. */
#safetyWorkspace fieldset {
  display: block;
}

#safetyWorkspace input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#safetyWorkspace input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  width: 100%;
  margin: 0;
}

/* The native calendar glyph is laid out outside the control's own box on iOS,
   so it is the last thing that can still push past the edge. */
#safetyWorkspace input[type="date"]::-webkit-calendar-picker-indicator {
  margin-inline-start: 0;
}

/* Sits under the stamp number it clears, small enough not to compete with Save. */
.sw-clear{
  align-self:start;
  margin:-0.35rem 0 0.25rem;
  padding:0.3rem 0.6rem;
  font-size:0.82rem;
}
.sw-clear[disabled]{opacity:0.55;}

/* The import outcome. It stays put after the refresh that follows an import,
   so a list of people who matched nobody is still readable. */
.sw-import-result:empty{display:none;}
.sw-import-result{
  margin:0.6rem 0 0;
  padding:0.55rem 0.7rem;
  border-radius:8px;
  border:1px solid rgba(127,127,127,0.28);
  font-size:0.9rem;
  line-height:1.45;
}
#safetyWorkspace .sw-import-result.sw-error{
  border-color:#b43c2b;
  background:rgba(180,60,43,0.08);
}