/* Suite navigation: the standard top bar (menu left, title center, settings right)
   and the slide-over app menu. Loaded after style.css so it wins. */

/* ---------- standard top bar for workspace apps ---------- */
.tool-workspace-screen:not([data-tool="prep-hub"]):not([data-tool="waste-hub"]) > .tool-workspace-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 8px 14px;
}
.tool-workspace-header .tool-workspace-heading {
  min-width: 0;
  text-align: center;
}
.tool-workspace-header .tool-workspace-heading span {
  display: none;
}
.tool-workspace-header .tool-workspace-heading h1 {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tool-workspace-header #tool-workspace-back {
  display: none;
} /* kept only so the apps can still go "back to the launcher" in code */
.suite-icon-btn,
.tool-workspace-header .suite-icon-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line, #2d3552);
  border-radius: 12px;
  background: var(--bg, #1a1f33);
  color: var(--text, #cbd8ef);
  cursor: pointer;
}
.suite-icon-btn:hover {
  filter: brightness(1.18);
}
.suite-icon-btn:focus-visible,
.suite-drawer button:focus-visible {
  outline: 2px solid #f5b82e;
  outline-offset: 2px;
}
.suite-icon-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.suite-icon-btn[hidden] {
  display: none;
}
.tool-workspace-header .suite-icon-btn[hidden] {
  display: block;
  visibility: hidden;
} /* keep the title centered when there is no settings button */

/* The old per-app Tools and Settings buttons are replaced by the bar above; they stay in the page
   (hidden) because the bar's settings button presses them. */
[data-equipment-tools],
[data-equipment-settings],
[data-training-tools],
[data-training-settings],
.training-corner-actions,
[data-attendance-tools],
[data-attendance-settings],
[data-team-tools],
[data-form-tools] {
  display: none !important;
}

/* Prep Hub and Waste Hub keep their own kiosk top bars; their left button now opens the menu. */
.prep-hub-tools-btn svg,
.waste-tools-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

/* ---------- slide-over menu ---------- */
.suite-scrim {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(4, 6, 12, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.suite-scrim.is-open {
  opacity: 1;
}
.suite-drawer {
  position: fixed;
  z-index: 2147483001;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(340px, 88vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px));
  background: #151826;
  color: #e6ebf7;
  border-right: 1px solid #2d3552;
  box-shadow: 18px 0 44px rgba(0, 0, 0, 0.45);
  transform: translateX(-102%);
  transition: transform 0.22s ease;
  overflow-y: auto;
  font-family: inherit;
}
.suite-drawer.is-open {
  transform: none;
}
.suite-drawer[hidden],
.suite-scrim[hidden] {
  display: none;
}
.suite-drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 4px 8px;
}
.suite-drawer-logo {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #f5b82e;
  color: #15171c;
  font-weight: 900;
  font-size: 19px;
}
.suite-drawer-head strong {
  flex: 1;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.suite-drawer-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #aab3c9;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.suite-drawer-close:hover {
  background: #1f2437;
}
.suite-drawer-all,
.suite-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid #2d3552;
  border-radius: 12px;
  background: #1a1f33;
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}
.suite-drawer-all:hover,
.suite-drawer-item:hover:not(:disabled) {
  background: #232a45;
}
.suite-drawer-all .tools-home-icon {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  grid-template-rows: repeat(3, 4px);
  gap: 2px;
  width: 24px;
  justify-content: center;
}
.suite-drawer-all .tools-home-icon i {
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: currentColor;
}
.suite-drawer-label {
  margin: 6px 4px 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8791ab;
}
.suite-drawer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.suite-drawer-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #232a45;
  color: #9da7ff;
  flex: none;
}
.suite-drawer-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.suite-drawer-name {
  flex: 1;
  min-width: 0;
}
.suite-drawer-check svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #f5b82e;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.suite-drawer-item.is-current {
  border-color: rgba(245, 184, 46, 0.55);
  background: rgba(245, 184, 46, 0.09);
}
.suite-drawer-item.is-current .suite-drawer-icon {
  background: #f5b82e;
  color: #15171c;
}
.suite-drawer-item.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.suite-drawer-item em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8791ab;
}

:root[data-theme="light"] .suite-drawer {
  background: #fff;
  color: #1f2430;
  border-right-color: #d7dce6;
}
:root[data-theme="light"] .suite-drawer-all,
:root[data-theme="light"] .suite-drawer-item {
  background: #f4f6fa;
  border-color: #d7dce6;
}
:root[data-theme="light"] .suite-drawer-close {
  color: #4a566b;
}
:root[data-theme="light"] .suite-drawer-close:hover {
  background: #e6eaf4;
}
:root[data-theme="light"] .suite-drawer-icon {
  background: #e6eaf4;
  color: #4452c7;
}
@media (prefers-reduced-motion: reduce) {
  .suite-drawer,
  .suite-scrim {
    transition: none;
  }
}

/* The top bar now carries each app's name, so the big duplicate headings go. */
.equipment-app-header {
  display: none;
}
.equipment-app {
  padding-top: 14px;
}
.team-hub-header h2,
.training-app-header h1,
.attendance-header h1 {
  display: none;
}

/* ---------- Rotations Hub: same bar, fixed above the page ---------- */
body.demo-mode {
  --suite-top-offset: 40px;
}
.suite-rot-bar {
  position: fixed;
  z-index: 9990;
  top: var(--suite-top-offset, 0px);
  left: 0;
  right: 0;
  height: 62px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--card, #151826);
  border-bottom: 1px solid var(--line, #2d3552);
}
.suite-rot-bar[hidden] {
  display: none;
}
.suite-rot-bar h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing: -0.02em;
}
body.suite-rot-bar-on {
  padding-top: calc(62px + var(--suite-top-offset, 0px));
}
body.suite-rot-bar-on #tools-home-btn,
body.suite-rot-bar-on #debug-open-btn {
  display: none !important;
}

/* ---------- the real app icons, used everywhere an app is shown ---------- */
/* Shared tablet safe area. Reserve the status strip once at the workspace
   boundary, not independently in each hub header. Phone kiosk sizing is kept. */
@media screen and (min-width: 601px) {
  :root {
    --suite-safe-top: env(safe-area-inset-top, 0px);
  }
  body {
    --suite-banner-height: 0px;
    --suite-content-top: calc(var(--suite-safe-top) + var(--suite-banner-height));
    --suite-top-offset: var(--suite-content-top);
    padding-top: var(--suite-content-top);
  }
  body.demo-mode {
    --suite-banner-height: 40px;
    --suite-top-offset: var(--suite-content-top);
  }
  body.admin-preview-active {
    --suite-banner-height: 48px;
  }
  body.demo-mode,
  body.admin-preview-active {
    padding-top: var(--suite-content-top);
  }
  body .demo-mode-banner,
  body .admin-preview-banner {
    top: var(--suite-safe-top);
  }
  body .tool-workspace-screen,
  body .tool-launcher-screen,
  body.demo-mode .tool-workspace-screen,
  body.demo-mode .tool-launcher-screen,
  body.admin-preview-active .tool-workspace-screen,
  body.admin-preview-active .tool-launcher-screen,
  body > .modal,
  body > .lineup-modal-wrap,
  body > .attendance-modal-wrap,
  body > #settings-modal,
  body > #roster-modal,
  body.demo-mode > #settings-modal,
  body.demo-mode > #roster-modal,
  body.admin-preview-active > #settings-modal,
  body.admin-preview-active > #roster-modal,
  body > .equipment-modal-overlay,
  body > .training-modal-wrap {
    top: var(--suite-content-top);
  }
  body .tool-workspace-screen,
  body.admin-preview-active .tool-workspace-screen {
    min-height: 0;
  }
  body.suite-rot-bar-on {
    padding-top: calc(62px + var(--suite-content-top));
  }
  .suite-drawer {
    padding-top: calc(16px + var(--suite-safe-top));
  }
  html.installed-web-app body:not(.demo-mode):not(.admin-preview-active) .prep-hub-topbar {
    padding-top: 18px;
  }
}
/* The installed app has a solid status bar (apple-mobile-web-app-status-bar-style: default), so the page already starts below it and the
   top safe area is 0. No floor is added: it would only leave an empty strip above every screen. */
@media screen and (min-width: 601px) and (max-width: 700px) {
  body.demo-mode {
    --suite-banner-height: 36px;
  }
}

.tool-launcher-icon.has-art {
  background: none;
  border: 0;
  padding: 0;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  overflow: hidden;
}
.tool-launcher-icon.has-art img {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 900px) {
  .tool-launcher-icon.has-art {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
}
.suite-drawer-icon:has(img) {
  background: none;
  width: 38px;
  height: 38px;
}
.suite-drawer-icon img {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}
.suite-drawer-item.is-current .suite-drawer-icon:has(img) {
  background: none;
}
.suite-drawer-item.is-current .suite-drawer-icon img {
  outline: 2px solid #f5b82e;
  outline-offset: 1px;
}
.suite-app-icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  vertical-align: middle;
  margin-right: 10px;
  flex: none;
}
.tool-workspace-header .tool-workspace-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.tool-workspace-header .tool-workspace-heading .suite-app-icon {
  margin-right: 0;
}
.suite-rot-bar h1 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.prep-hub-topbar h1 .suite-app-icon,
.waste-title h1 .suite-app-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  margin-right: 8px;
}
.onboarding-app-icon {
  display: block;
  margin: 0 auto 14px;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.onboarding-app-icon[hidden] {
  display: none;
}
img.tool-launcher-logo.has-art {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
img.suite-drawer-logo {
  display: block;
  background: none;
  border-radius: 10px;
}
/* the new icons have dark tiles, so give them a faint edge against the dark cards */
.tool-launcher-icon.has-art {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 6px 16px rgba(0, 0, 0, 0.35);
}
.suite-drawer-icon img,
img.suite-drawer-logo,
.suite-app-icon {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* ---------- Attendance Hub: own top bar (menu, title, view tabs, Record event, settings) ---------- */
.tool-workspace-screen[data-tool="attendance-hub"] > .tool-workspace-header {
  display: none !important;
}
.attendance-topbar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line, #2d3552);
  margin: 0 0 14px;
}
.attendance-topbar h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.attendance-topbar h1 .suite-app-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}
.attendance-icon-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line, #2d3552);
  border-radius: 12px;
  background: var(--bg, #1a1f33);
  color: var(--text, #cbd8ef);
  cursor: pointer;
}
.attendance-icon-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.attendance-seg {
  position: relative;
  display: inline-flex;
  justify-self: center;
  padding: 4px;
  gap: 2px;
  max-width: 100%;
  border: 1px solid var(--line, #2d3552);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.attendance-seg button {
  position: relative;
  z-index: 1;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted, #9aa3b8);
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s;
}
.attendance-seg button.active {
  color: var(--text, #fff);
}
.attendance-seg button b {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 10px;
  background: #e4a72b;
  color: #17191f;
  font-size: 12px;
}
.attendance-seg-thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 10px;
  background: rgba(228, 167, 43, 0.2);
  box-shadow: inset 0 0 0 1px rgba(228, 167, 43, 0.6);
  transition:
    transform 0.24s ease,
    width 0.24s ease;
}
.attendance-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.attendance-top-actions .attendance-primary {
  min-height: 46px;
  padding: 0 18px;
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .attendance-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "menu title actions" "tabs tabs tabs";
    row-gap: 10px;
  }
  .attendance-topbar > .attendance-icon-btn:first-child {
    grid-area: menu;
  }
  .attendance-topbar h1 {
    grid-area: title;
  }
  .attendance-topbar .attendance-seg {
    grid-area: tabs;
    justify-self: stretch;
    display: flex;
  }
  .attendance-topbar .attendance-seg button {
    flex: 1;
    padding: 0 8px;
  }
  .attendance-topbar .attendance-top-actions {
    grid-area: actions;
  }
}
@media (max-width: 520px) {
  .attendance-topbar {
    gap: 8px;
    padding: 8px 10px;
  }
  .attendance-topbar h1 {
    min-width: 0;
    overflow: hidden;
    font-size: 17px;
    text-overflow: ellipsis;
  }
  .attendance-topbar h1 .suite-app-icon {
    display: none;
  }
  .attendance-icon-btn {
    width: 42px;
    height: 42px;
  }
  .attendance-top-actions {
    gap: 6px;
  }
  .attendance-top-actions .attendance-primary {
    min-height: 42px;
    padding: 0 10px;
    font-size: 13px;
  }
  .attendance-seg {
    padding: 3px;
  }
  .attendance-seg button {
    min-height: 36px;
    padding: 0 2px;
    font-size: 13px;
  }
  .attendance-seg button b {
    min-width: 17px;
    height: 17px;
    margin-left: 3px;
    padding: 0 4px;
    font-size: 11px;
  }
}

/* One-tap swap between Prep Hub and Waste Hub, in each of their top bars */
.suite-swap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-inline: 8px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.suite-swap .suite-app-icon {
  width: 26px;
  height: 26px;
}
.suite-swap svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}
.suite-swap:active {
  transform: scale(0.97);
}
/* Waste Hub's bar is a three-column grid; the swap button takes a fourth column at the right */
.waste-topbar:has(.suite-swap) {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

/* Top bars never wrap their text; js/fit-topbars.js shrinks a bar that is too wide for the screen */
:is(
    .tool-workspace-header,
    #suite-rot-bar,
    .prep-hub-topbar,
    .waste-topbar,
    .attendance-topbar,
    .lineup-topbar,
    .training-app-header,
    .team-hub-header,
    .form-hub-toolbar,
    .form-hub-sidebar > header
  )
  :is(h1, h2, strong, small, span, em, button, a, label) {
  white-space: nowrap;
}
/* Prep Hub's bar is menu | title (centered) | swap + settings at the right edge */
.prep-hub-topbar-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.prep-hub-topbar-end .suite-swap {
  margin-inline: 0;
}

/* The Admin Hub's top bar has room for its yellow New request pill between the title and the gear. */
.tool-workspace-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tool-workspace-actions:empty {
  display: none;
}
.tool-workspace-screen[data-tool="office-hub"]:not([data-tool="prep-hub"]):not([data-tool="waste-hub"]) > .tool-workspace-header {
  grid-template-columns: 48px minmax(0, 1fr) auto 48px;
}

/* The Admin Hub's top bar also has a slot for its yellow Back pill, right of the menu button. */
.tool-workspace-lead {
  display: none;
}
.tool-workspace-screen[data-tool="office-hub"]:not([data-tool="prep-hub"]):not([data-tool="waste-hub"]) > .tool-workspace-header {
  grid-template-columns: 48px auto minmax(0, 1fr) auto 48px;
}
.tool-workspace-screen[data-tool="office-hub"] .tool-workspace-lead {
  display: flex;
  align-items: center;
}

/* The banner at the very top (demo mode, admin preview) stays above every dialog's dim layer. A dim layer that covered it changed the colour
   at the top edge each time a form opened or closed, and iPadOS tints its status area from that edge and then held the wrong colour
   (a dark, blurred band) after the dialog went away. With the banner above, the top edge never changes. */
body .demo-mode-banner,
body .admin-preview-banner {
  z-index: 11000002;
}