/* Nine-dots app switcher + the rail's identity foot.
   Spec: CC-IT_Dashboard docs/handoffs/switcher-canonical.md (v4) - every value below is that file's literal.
   Copied 2026-11-05 verbatim from CC-Amazon_PO_Compliance app/static/css/switcher.css.
   Markup: app/templates/_switcher.html (mounts in base.html); behaviour: app/static/js/switcher.js.
   Loaded after app.css (from _head.html); the rail overrides at the top are deliberate. */

/* §2 The rail is viewport-pinned and the NAV is the internal scroller, so the plate above
   and the foot below never leave the screen, and the upward panel is never inside an
   overflow scroller that clips it. z-index lifts the rail's sticky stacking context over
   the main column (sticky top bar) where a 268 px panel overhangs it. */
.rail-inner { height: 100vh; height: 100dvh; overflow: visible; z-index: 40; }
.rail-nav { flex: 1; min-height: 0; overflow-y: auto; }

.rail-foot {
  margin-top: auto;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 10px 12px 8px;
  border-top: 1px solid #3A4442;
  font-family: Helvetica, Arial, sans-serif; line-height: 1.5;
}
.foot-id { min-width: 0; flex: 1; }
.foot-name, .foot-email { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-name { font-weight: 600; color: #E8ECEA; }
.foot-email { margin-top: 2px; font-size: 12px; color: #7E8A86; }

/* Phone band: the dots sit at the upper right. */
.band .switcher--head { margin-left: auto; flex: none; }
.band .band-count + .switcher--head { margin-left: 8px; }

/* ---- wrapper: the positioning context for trigger + panel (§3) ---- */
.switcher { position: relative; flex: none; font-family: Helvetica, Arial, sans-serif; line-height: 1.5; }

/* ---- §1 trigger ---- */
.switcher-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 6px; border: 1px solid transparent; border-radius: 4px; background: none;
  cursor: pointer; line-height: 0;
  transition: background-color 80ms linear, color 80ms linear, border-color 80ms linear;
}
.switcher-glyph { display: grid; grid-template-columns: repeat(3, 3px); gap: 3px; }
.switcher-dot { width: 3px; height: 3px; border-radius: 999px; background: currentColor; }
/* dark ink rail */
.switcher--foot .switcher-btn { color: #B9C2BF; }
.switcher--foot .switcher-btn:hover, .switcher--foot .switcher-btn.is-open { background: #2E3836; color: #E8ECEA; }
/* white band */
.switcher--head .switcher-btn { color: #6B7370; }
.switcher--head .switcher-btn:hover, .switcher--head .switcher-btn.is-open { background: #F6FAF9; color: #222927; }

/* ---- §3 panel ---- */
.switcher-panel {
  position: absolute; z-index: 40;
  width: 268px; padding: 10px;
  background: #FFFFFF; border: 1px solid #DDE1DF; border-radius: 6px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14);
  color: #222927; text-align: left;
}
.switcher--foot .switcher-panel { bottom: calc(100% + 6px); left: 0; }
.switcher--head .switcher-panel { top: calc(100% + 6px); right: 0; max-width: calc(100vw - 28px); }

/* ---- §4 head row ---- */
.switcher-head-row { display: flex; align-items: center; gap: 8px; padding: 0 6px 8px; }
.switcher-head-label {
  min-width: 0; flex: 1;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #6B7370;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.switcher-signout { flex: none; margin: 0 0 0 auto; display: flex; }
.switcher-pill {
  flex: none; display: inline-flex; align-items: center; margin: 0;
  padding: 3px 10px; border: 1px solid #17A38C; border-radius: 999px;
  background: #17A38C; color: #FFFFFF;
  font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.5;
  text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background-color 80ms linear, color 80ms linear, border-color 80ms linear;
}
.switcher-pill:hover { background: #0E7C6B; border-color: #0E7C6B; color: #FFFFFF; }
/* §5b back button (drilled view): the label's look, hugging its text */
.switcher-back {
  min-width: 0; margin: 0 auto 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; line-height: 1.5;
  color: #6B7370; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.switcher-back:hover { color: #222927; }

/* ---- §5 tile grid ---- */
.switcher-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.switcher-panel [hidden] { display: none !important; }
.switcher-app {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; border: 1px solid transparent; border-radius: 4px;
  font-size: 11px; text-align: center; text-decoration: none; color: #5A6461;
  transition: background-color 80ms linear, color 80ms linear, border-color 80ms linear;
}
/* §5b button reset - never the `font` shorthand, which would reset the 11px */
button.switcher-app { width: 100%; margin: 0; background: none; font-family: inherit; font-weight: inherit; line-height: 1.5; cursor: pointer; }
.switcher-name { line-height: 1.2; }
.switcher-cue { margin-left: 2px; }
.switcher-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: #6B7370; }
.switcher-icon svg { width: 24px; height: 24px; display: block; }
.switcher-letter { font-size: 13px; font-weight: 700; }
.switcher-maint {
  display: inline-block; margin-top: 2px; padding: 2px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: #8A6D1F; background: #FBF3D9; border: 1px solid #E8D89A;
}
/* link + group hover trio + icon recolor */
a.switcher-app:hover, button.switcher-app:hover { background: #F6FAF9; border-color: #B9E0D7; color: #222927; }
/* current app (inert) and a group that holds it (still clickable) */
.switcher-app.is-current, .switcher-group.has-current { background: #E2F3EF; border-color: #B9E0D7; color: #0E7C6B; font-weight: 600; }
.switcher-app.is-current { cursor: default; }
/* hover overrides the group tint (more specific, and after it) */
button.switcher-group.has-current:hover { background: #F6FAF9; border-color: #B9E0D7; color: #222927; }
a.switcher-app:hover .switcher-icon, button.switcher-app:hover .switcher-icon,
.switcher-app.is-current .switcher-icon, .switcher-group.has-current .switcher-icon { color: #0E7C6B; }

/* ---- §0 keyboard focus ---- */
.switcher-btn:focus-visible, .switcher-pill:focus-visible, .switcher-app:focus-visible, .switcher-back:focus-visible {
  outline: 2px solid #17A38C; outline-offset: 1px; border-radius: 3px;
}

/* ---- §3/§5 narrow phones ---- */
@media (max-width: 379.98px) {
  .switcher--head .switcher-panel { width: 208px; }
  .switcher-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- §6 chrome never prints ---- */
@media print { .switcher, .no-print { display: none !important; } }