/* ===== nms_eligible_items_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. The root rule is a bare class, which is
   what outranks the scoped reset; every other rule is :where()-scoped to that root, which adds
   zero specificity and so cannot change which rule wins.

   Two rules carry what may not be an inline style=. */

.nms-eligible-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Checked against theme.css's .px-table-wrap { overflow-x: auto; ... } on the same element:
   different properties, so there is no tie to lose. */
:where(.nms-eligible-wrap) .nms-eligible-table-wrap {
    max-height: 480px;
    overflow-y: auto;
}

/* Print shows every row: the scroll box grows to its whole table. */
@media print {
    :where(.nms-eligible-wrap) .px-table-wrap.nms-eligible-table-wrap { max-height: none; overflow: visible; }
}

:where(.nms-eligible-wrap) .nms-eligible-count {
    font-family: var(--px-mono);
    font-size: 0.75rem;
    color: var(--px-text-muted);
}

/* Was the template's <div style="padding-top:0.75rem;">. Nothing else declares this name. */
:where(.nms-eligible-wrap) .nms-eligible-panel {
    padding-top: 0.75rem;
}

/* The one rule in this form written WITHOUT :where(), and deliberately so.
   It styles the module's empty-state cell, which inline style would otherwise reach with a
   specificity no selector can reproduce. The cell is a
   <td> inside <table class="px-table">, and theme.css declares .px-table td { padding: 0.625rem
   1rem; color: var(--px-text-primary); } at (0,1,1), re-pinned for narrow screens by
   .px-table th, .px-table td { padding: 0.5rem 0.625rem; }. A single class at (0,1,0) simply
   loses, and :where(.nms-eligible-wrap) td.nms-eligible-empty-cell is (0,1,1), an exact tie
   decided by a head-link order that is not verified. Two bare classes is (0,2,0) and wins on
   class count, which is the lowest specificity that keeps the empty state looking as it does
   today. */
.nms-eligible-wrap .nms-eligible-empty-cell {
    text-align: center;
    color: var(--px-text-muted);
    padding: 2rem;
}