/*
 * Company picker overlay (assets/js/saldo-company-picker.js). Same rules as the
 * rest of the system: radius 0, no shadows, 2px ink borders, hover inverts,
 * one yellow block per viewport, body text never below 16px.
 */

/* Entry button on an ink section that already has its one yellow block:
   paper on ink, inverting to signal on hover like every button. */
.sld-btn--paper {
  background: var(--papier);
  color: var(--ink);
  border-color: var(--papier);
}

.sld-btn--paper:hover {
  background: var(--signal);
  color: var(--ink);
  border-color: var(--signal);
}

.sld-btn--ghost-ink {
  background: transparent;
  color: var(--papier);
  border-color: var(--papier);
}

.sld-btn--ghost-ink:hover {
  background: var(--signal);
  color: var(--ink);
  border-color: var(--signal);
}

.sld-picker {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--surface-page);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sld-picker__panel {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-7) var(--gutter) var(--space-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.sld-picker__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

/* The title column shrinks so the close button never pushes past a 360px screen. */
.sld-picker__head > div {
  min-width: 0;
}

.sld-picker__head > button {
  flex: 0 0 auto;
}

.sld-picker .sld-card {
  overflow-wrap: anywhere;
}

/* Choosing is one screen: heading, search and button stay put and only the
   list scrolls. The letters view, which has no list, scrolls as a page.
   Too short a screen still falls back to scrolling the overlay. */
.sld-picker__panel:has(> div > .sld-picker__list) {
  height: 100%;
  padding-top: var(--space-5);
  padding-bottom: 0;
  gap: var(--space-4);
}

.sld-picker__panel > div:has(> .sld-picker__list) {
  flex: 1 1 auto;
  min-height: 0;
}

.sld-picker__list {
  display: flex;
  flex-direction: column;
  border-top: var(--border);
  flex: 1 1 auto;
  min-height: calc(3 * var(--tap-target));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* A whole row is the target; hover inverts, the checkbox block shows the state. */
.sld-picker__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border);
  border-top: 0;
  background: var(--surface-card);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: var(--type-body-size);
  min-height: var(--tap-target);
  flex-shrink: 0; /* in the scrolling list, rows keep their height instead of squeezing to fit */
  transition: var(--transition-control);
}

.sld-picker__row:hover {
  background: var(--ink);
  color: var(--signal);
}

.sld-picker__row .sld-checkbox__box {
  pointer-events: none;
}

.sld-picker__domain {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--type-body-min);
  color: inherit;
  opacity: 0.7;
}

.sld-picker__letter {
  white-space: pre-wrap;
  font-family: var(--font-body);
  font-size: var(--type-body-min);
  line-height: 1.5;
  margin: 0;
  padding: var(--space-4);
  border: var(--border);
  background: var(--papier-2);
  max-height: 320px;
  overflow-y: auto;
}

.sld-picker__bar {
  position: sticky;
  bottom: 0;
  background: var(--surface-page);
  border-top: var(--border);
  padding: var(--space-4) 0;
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .sld-picker__bar {
    padding: var(--space-2) 0;
  }
}