/* ==========================================================================
   Document picker — the documents field on a message form.

   Markup:   app/views/shared/_document_picker.html.erb
             app/views/documents/_candidate.html.erb   (a search result)
   Behavior: app/javascript/controllers/attachment_list_controller.js
             app/javascript/controllers/record_search_controller.js

   One bordered box holding two things: the shared record-search strip
   (record-search.css) across the top, and under it the list of documents
   attached so far, drawn with the feed's own .message-document rows
   (feed.css) so the composer shows the list as the class will see it. The
   results popover hangs off the strip and overlays the list, exactly as it
   does on the enrollments roster.

   LOAD ORDER — `stylesheet_link_tag :app` sorts logical paths alphabetically,
   so this file loads before feed.css, record-search.css, main.css and
   utilities.css. Everything here is scoped under .document-picker, which
   outranks the rules it adjusts regardless of order.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. THE BOX
   -------------------------------------------------------------------------- */

.document-picker {
  position: relative;
  max-width: 40rem;
  border: 1px solid var(--color-field-border);
  border-radius: 0.875rem;
  background: var(--color-field-fill);
}

/* The strip's own tint and top rule are for sitting inside a list panel; here
   the box supplies both. The side padding steps in from the panel's 1.5rem so
   the field lines up with the rows under it. */
.document-picker .control-strip {
  padding: 0.875rem var(--space-4);
  border-top: none;
  background: none;
}

.document-picker .search-field {
  max-width: none;
}

/* The label select, sized like the strip's field and the Library filter bar's
   own select. */
.document-picker .filter-select {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  font-size: var(--fs-small);
  line-height: 1.5;
}

.document-picker .record-search-results {
  right: var(--space-4);
  left: var(--space-4);
}


/* --------------------------------------------------------------------------
   2. RESULTS — a document reads by its sheet.
   -------------------------------------------------------------------------- */

/* The Library thumbnail at the same row scale the attached list uses (see
   feed.css, .message-document .card-thumbnail). On white the drop shadow
   would sit oddly against the row divider, so only the edge is kept. */
.document-picker .result-row .card-thumbnail {
  flex: none;
  width: 3.5rem;
  height: 2.5rem;
  box-shadow: var(--shadow-thumbnail-edge);
}

.document-picker .result-row .card-thumbnail-label {
  gap: 0.1875rem;
  font-size: 0.5625rem;
}

.document-picker .result-row .card-thumbnail-label::after {
  width: 1.375rem;
}

/* Already on the list. Quiet rather than greyed out, so the row still reads
   as a document that was found; the label says why the button is asleep. */
.document-picker .results-list BUTTON:not(.editor-button):disabled {
  border-color: var(--color-border);
  color: var(--color-text-muted);
  background: var(--nieve);
  cursor: default;
}

/* The <template> is inert but still an element in the flex row. */
.document-picker .result-row template {
  display: none;
}


/* --------------------------------------------------------------------------
   3. THE ATTACHED LIST — feed rows on white, divided by the popover hairline.
   -------------------------------------------------------------------------- */

.document-picker .attached-documents {
  margin: 0;
  padding: 0 var(--space-4);
  list-style: none;
}

/* The rule under the strip belongs to the first row rather than to the list,
   so an empty list draws nothing and the empty state's own rule stands alone. */
.document-picker .attached-documents .message-document {
  border-top: 1px solid var(--color-popover-divider);
}

.document-picker .attached-documents .message-document:first-child {
  border-top-color: var(--color-border);
}

.document-picker .attached-empty {
  margin: 0;
  padding: 0.875rem var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* The UA rule for [hidden] loses to the display above. */
.document-picker .attached-empty[hidden] {
  display: none;
}


/* --------------------------------------------------------------------------
   4. NARROW SCREENS
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .document-picker .control-strip {
    padding: var(--space-3) var(--space-4);
  }

  .document-picker .filter-select {
    flex: 1 1 100%;
  }
}