/* ==========================================================================
   Hero roster drawings, shared by two pages (moved out of css/hsf.css on
   2026-10-21 when the canteen page got one too):
     includes/hsf-ui.php     /industries/hrms-for-security-agencies/
     includes/canteen-ui.php /canteen-management-system/
   Every size is in cqw against the .liveui container, so a drawing scales as
   one piece. Loaded by each of those pages, not by style.css.
   ========================================================================== */

.hsfui {
  aspect-ratio: 1272 / 1137;
  padding: 4%;
  --hs-ink: #1B2333;
  --hs-mute: #7A8598;
  --hs-line: rgba(16, 24, 48, 0.08);
  --hs-blue: #2563EB;
}

.hsfui__app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
  height: 100%;
  padding: 3.2cqw;
  border-radius: 2.6cqw;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2cqw 5cqw -3cqw rgba(16, 24, 48, 0.4);
  color: var(--hs-ink);
}

.hsfui__bar {
  display: flex;
  align-items: center;
  gap: 1.8cqw;
}

.hsfui__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 5.6cqw;
  height: 5.6cqw;
  border-radius: 1.4cqw;
  background: linear-gradient(135deg, #3B82F6, #1552C7);
  color: #FFFFFF;
}

.hsfui__mark svg { width: 3.2cqw; height: 3.2cqw; }

.hsfui__title {
  display: flex;
  flex-direction: column;
  gap: 0.3cqw;
  font-size: 2.6cqw;
  font-weight: 700;
}

.hsfui__title small {
  font-size: 1.7cqw;
  font-weight: 500;
  color: var(--hs-mute);
}

.hsfui__shift {
  display: flex;
  margin-left: auto;
  padding: 0.5cqw;
  border-radius: 99cqw;
  background-color: #EEF2F8;
  font-size: 1.6cqw;
  font-weight: 600;
  color: var(--hs-mute);
}

.hsfui__shift > * { padding: 0.9cqw 1.8cqw; border-radius: 99cqw; }

.hsfui__shift b {
  background-color: #FFFFFF;
  box-shadow: 0 0.3cqw 0.9cqw rgba(16, 24, 48, 0.12);
  color: var(--hs-blue);
}

.hsfui__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6cqw;
}

.hsfui__stat {
  display: flex;
  flex-direction: column;
  gap: 0.4cqw;
  padding: 1.8cqw 2cqw;
  border-radius: 1.6cqw;
  background-color: #F4F7FD;
  font-size: 1.6cqw;
  font-weight: 500;
  color: var(--hs-mute);
}

.hsfui__stat b {
  font-size: 3.6cqw;
  font-weight: 700;
  line-height: 1;
  color: var(--hs-ink);
}

.hsfui__stat:first-child b { color: var(--hs-blue); }

.hsfui__body {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2.4cqw;
  flex: 1;
  min-height: 0;
}

.hsfui__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1cqw;
  font-size: 1.9cqw;
  font-weight: 700;
}

.hsfui__label em {
  font-size: 1.5cqw;
  font-style: normal;
  font-weight: 500;
  color: var(--hs-mute);
}

.hsfui__sites,
.hsfui__roster {
  display: flex;
  flex-direction: column;
  gap: 1cqw;
  min-width: 0;
}

.hsfui__site {
  display: flex;
  flex-direction: column;
  gap: 0.5cqw;
  padding: 1.3cqw 1.6cqw;
  border-radius: 1.4cqw;
  box-shadow: inset 0 0 0 0.15cqw var(--hs-line);
}

.hsfui__site.is-on {
  background-color: #EEF4FF;
  box-shadow: inset 0 0 0 0.2cqw #9CC0F8;
}

.hsfui__site b {
  overflow: hidden;
  font-size: 1.75cqw;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hsfui__site small {
  font-size: 1.45cqw;
  color: var(--hs-mute);
}

.hsfui__bar-track {
  display: block;
  height: 0.6cqw;
  margin-top: 0.3cqw;
  border-radius: 99cqw;
  background-color: #E6ECF6;
  overflow: hidden;
}

.hsfui__bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60A5FA, #2563EB);
}

.hsfui__row {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.2cqw 0;
  border-bottom: 0.15cqw solid var(--hs-line);
}

.hsfui__row:last-child { border-bottom: 0; }

.hsfui__av {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.4cqw;
  height: 4.4cqw;
  border-radius: 50%;
  background-color: #DCE8FD;
  font-size: 1.5cqw;
  font-style: normal;
  font-weight: 700;
  color: #1552C7;
}

.hsfui__who {
  display: flex;
  flex-direction: column;
  gap: 0.3cqw;
  min-width: 0;
}

.hsfui__who b { font-size: 1.75cqw; font-weight: 600; }
.hsfui__who small { font-size: 1.45cqw; color: var(--hs-mute); }

.hsfui__chip {
  margin-left: auto;
  padding: 0.7cqw 1.4cqw;
  border-radius: 99cqw;
  font-size: 1.45cqw;
  font-weight: 600;
  white-space: nowrap;
}

.hsfui__chip--in    { background-color: #E7F6EE; color: #15803D; }
.hsfui__chip--leave { background-color: #FEF3E2; color: #C2410C; }

.hsfui__foot {
  display: flex;
  gap: 1.6cqw;
}

.hsfui__note {
  display: flex;
  align-items: center;
  gap: 1cqw;
  flex: 1;
  padding: 1.4cqw 1.8cqw;
  border-radius: 1.4cqw;
  background-color: #F4F7FD;
  font-size: 1.55cqw;
  font-weight: 600;
}

.hsfui__note i {
  display: grid;
  place-items: center;
  flex: none;
  width: 3cqw;
  height: 3cqw;
  border-radius: 50%;
  background-color: #FDE7C7;
  font-size: 1.5cqw;
  font-style: normal;
  font-weight: 700;
  color: #C2410C;
}

.hsfui__note--ok { background-color: #EEF4FF; }
.hsfui__note--ok i { background-color: var(--hs-blue); color: #FFFFFF; }

/* ---- canteen additions: meal timing rows and per-shift bars ---- */

.hsfui__meal {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.25cqw 1.6cqw;
  border-radius: 1.4cqw;
  box-shadow: inset 0 0 0 0.15cqw var(--hs-line);
}

.hsfui__meal.is-on {
  background-color: #EEF4FF;
  box-shadow: inset 0 0 0 0.2cqw #9CC0F8;
}

.hsfui__meal-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.2cqw;
  height: 4.2cqw;
  border-radius: 1.2cqw;
  background-color: #FEF3E2;
  font-size: 2.1cqw;
  font-style: normal;
}

.hsfui__meal.is-on .hsfui__meal-ico { background-color: #DCE8FD; }

.hsfui__hbar {
  display: flex;
  flex-direction: column;
  gap: 0.7cqw;
  padding: 1.2cqw 0;
  border-bottom: 0.15cqw solid var(--hs-line);
}

.hsfui__hbar:last-of-type { border-bottom: 0; }

.hsfui__hbar-top {
  display: flex;
  justify-content: space-between;
  font-size: 1.6cqw;
  font-weight: 600;
}

.hsfui__hbar-top small {
  font-size: 1.45cqw;
  font-weight: 500;
  color: var(--hs-mute);
}

.hsfui__hbar .hsfui__bar-track { height: 1.1cqw; }

/* The canteen drawing holds less than the roster, so it is a little shorter. */
.hsfui--short { aspect-ratio: 1272 / 1060; }

.hsfui__notice {
  display: flex;
  flex-direction: column;
  gap: 0.5cqw;
  margin-top: 1.2cqw;
  padding: 1.5cqw 1.8cqw;
  border-left: 0.5cqw solid #F59E0B;
  border-radius: 0.8cqw 1.4cqw 1.4cqw 0.8cqw;
  background-color: #FFF8EC;
  font-size: 1.5cqw;
  line-height: 1.4;
  color: #5B4630;
}

.hsfui__notice b { font-size: 1.65cqw; color: var(--hs-ink); }