/* =============================================================================
   LOCATION INPUT STYLES — companion to location-input.js (cascade mode only)
   =============================================================================
   The level dropdowns are built to match crispy's Bootstrap field markup
   (.mb-2 wrapper + .form-select), so they inherit the app's field styling
   and line up with the ISBN field above them. This file only adds what
   crispy/Bootstrap don't: the hidden-native rule, full-width stacking, and
   the collapsed summary line.
   ========================================================================== */

/* Native select kept in the document (form value + scan-engine.js contract)
   but taking no space/focus. Visually-hidden, NOT display:none. */
.li-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
}

/* Vertical stack — each level on its own row, full width, identical size. */
.li-stack {
  display: flex;
  flex-direction: column;
}
.li-level { width: 100%; }
.li-select { width: 100%; }

/* Collapsed summary — the completed selection in flat __str__ format, with
   an inline "Change" control. Sits in the same vertical rhythm as a field. */
.li-summary { margin-bottom: 0.5rem; max-width: 100%; min-width: 0; }
.li-summary-line {
  display: flex;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  /* Match Bootstrap .form-select's box exactly so the collapsed (selected)
     state is the same height as the empty "Select…" dropdown. form-select
     height = 1.5em line-height + 0.375rem*2 padding + 2px border. */
  min-height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  border: 1px solid var(--bs-border-color);
  border-radius: 6px;
  background: var(--bs-tertiary-bg);
}
.li-summary-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.li-summary-none { color: var(--bs-secondary-color); font-style: italic; }

/* "Change" — quiet link button, no padding so it hugs the right edge. */
.li-change {
  flex-shrink: 0;
  padding: 0;
  text-decoration: none;
}
.li-change:hover { text-decoration: underline; }


/* Collapsed summary is clickable anywhere (see location-input.js) — the
   "Change" button is a visible affordance, but the whole line is the target. */
.li-summary-clickable { cursor: pointer; }
.li-summary-clickable:hover { border-color: var(--bs-secondary-color); }
.li-summary-clickable:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 1px;
}