/* The store / division picker (templates/_scope_picker.html), 2026-10-20.

   It lives in the STICKY topbar, so it is on screen at every scroll position,
   width and zoom. It never hides: below 840px it gives ground to the title
   (which ellipsizes first) and below 640px it shares the brand row with the
   hamburger, the logo and the nine dots while the title wraps underneath.

   The native <select> is laid transparent over `.sp-face`, which reads the
   scope in words; the select still receives every click, tap and key. Scoped
   (one store or one division) the face turns teal, so a filtered page never
   looks like the whole group. Desktop first, max-width queries only. */

.scope-picker {
  display: flex; align-items: center; gap: 8px;
  flex: 0 1 auto; min-width: 0; max-width: 380px;
  margin: 0 0 0 auto;
}
.scope-picker .sp-box {
  position: relative; display: flex; min-width: 0; flex: 0 1 auto;
}
.scope-picker .sp-face {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  height: 34px; padding: 0 10px 0 12px;
  background: #FFFFFF; border: 1px solid #C9CFCC; border-radius: var(--radius, 4px);
  color: var(--mg-text, #232B2A); font-size: 13px; line-height: 1;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
}
.scope-picker .sp-kicker {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--mg-text-muted, #6B7472);
}
.scope-picker .sp-value {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700;
}
.scope-picker .sp-chev { flex: none; font-size: 11px; color: var(--mg-text-muted, #6B7472); }

/* The real control, over the face. 16px so iOS does not zoom on focus. */
.scope-picker .sp-select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; min-height: 0;
  opacity: 0; cursor: pointer; font-size: 16px;
  -webkit-appearance: none; appearance: none;
}
.scope-picker:hover .sp-face { border-color: var(--mg-teal, #17A38C); }
.scope-picker .sp-box:focus-within .sp-face { box-shadow: var(--focus-ring, 0 0 0 2px #E2F3EF, 0 0 0 3px #17A38C); border-color: var(--mg-teal, #17A38C); }

/* Filtered to one store or one division: say so in colour as well as words. */
.scope-picker.is-scoped .sp-face {
  background: var(--mg-teal-tint, #E2F3EF);
  border-color: var(--mg-teal, #17A38C);
}
.scope-picker.is-scoped .sp-kicker,
.scope-picker.is-scoped .sp-chev,
.scope-picker.is-scoped .sp-value { color: var(--mg-teal-deep, #0E7C6B); }

/* Locked: drawn, greyed, with the reason beside it. */
.scope-picker.is-locked { max-width: 480px; }
.scope-picker.is-locked .sp-face { background: #F4F5F4; border-color: var(--mg-border, #DDE1DF); color: var(--mg-text-muted, #6B7472); box-shadow: none; }
.scope-picker.is-locked .sp-value { font-weight: 600; }
.scope-picker.is-locked .sp-select { cursor: not-allowed; }
.scope-picker.is-locked:hover .sp-face { border-color: var(--mg-border, #DDE1DF); }
.scope-picker .sp-why {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--mg-text-muted, #6B7472);
}

/* No-JS: the Apply button sits beside the face. */
.scope-picker .sp-apply { flex: none; }

@media (max-width: 840px) {
  .scope-picker { max-width: 46%; }
  .scope-picker.is-locked { max-width: 64%; }
}
@media (max-width: 640px) {
  /* Brand row: hamburger . logo . PICKER . dots; the title wraps below. The
     picker takes the row's slack, so the dots lose their own auto margin. */
  /* `flex-basis: 0` so the picker's full label never pushes it onto a row of
     its own: it takes whatever the row has left and ellipsizes. */
  .scope-picker { order: 0; flex: 1 1 0; max-width: none; justify-content: flex-end; }
  .topbar .scope-picker ~ .switcher--head { margin-left: 0; }
  .scope-picker .sp-face { height: 40px; padding: 0 8px 0 10px; gap: 6px; }
  .scope-picker .sp-kicker { display: none; }
  /* The reason stays in the form's title and the select's description. */
  .scope-picker .sp-why { display: none; }
}

@media print {
  .scope-picker { display: none; }
}