/* 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: -.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, .55); opacity: 0; transition: opacity .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, .45);
  transform: translateX(-102%); transition: transform .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: -.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: .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, .55); background: rgba(245, 184, 46, .09); }
.suite-drawer-item.is-current .suite-drawer-icon { background: #f5b82e; color: #15171c; }
.suite-drawer-item.is-locked { opacity: .55; cursor: not-allowed; }
.suite-drawer-item em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .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-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: -.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; }
}
/* Some installed iPad versions report a zero inset despite showing the status
   bar. A tablet-only floor keeps controls clear; larger reported insets win. */
@media screen and (min-width: 601px) and (pointer: coarse) {
  html.installed-web-app { --suite-safe-top: max(24px, env(safe-area-inset-top, 0px)); }
}
@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; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.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, .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, .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, .12), 0 6px 16px rgba(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, .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: -.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, .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 .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, .2); box-shadow: inset 0 0 0 1px rgba(228, 167, 43, .6); transition: transform .24s ease, width .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; }
}