/* ===== ow_items_table_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. There is no root rule: the root is a
   .px-card the dependency styles, and .ow-items-root exists only as the scope. Every rule is
   :where()-scoped to it, which adds zero specificity and so cannot change which rule wins. The
   last three rules carry what a template may not hold as inline style= attributes.

   Two compounds carry a second class on purpose. .px-input.ow-items-search is MANDATORY: the
   dependency's .px-input { width: 100% } is appended to the head at runtime by
   ensure_theme_injected(), i.e. after this link, so on a plain .ow-items-search the (0,1,0) tie
   would go to the dependency and the search box would run full width.
   .px-table-wrap.ow-items-table-wrap and
   .px-table th.ow-items-details-col are belt and braces: the dependency declares .px-table-wrap
   and .px-table th but neither max-height, overflow-y nor width, and these two rules replace
   inline styles that beat everything absolutely, so the doubling keeps that true at no cost. */

:where(.ow-items-root) .ow-items-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

:where(.ow-items-root) .ow-items-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: var(--px-radius-pill);
    background: var(--accent, var(--px-info));
    color: var(--accent-text, var(--px-text-on-fill));
}

:where(.ow-items-root) .ow-items-details-btn {
    font-family: var(--px-font);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--accent, var(--px-info));
    border-radius: var(--px-radius-sm);
    background: transparent;
    color: color-mix(in srgb, var(--accent, var(--px-info)) 70%, var(--px-text-primary));
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

:where(.ow-items-root) .ow-items-details-btn:hover {
    background: var(--accent, var(--px-info));
    color: var(--accent-text, var(--px-text-on-fill));
}

:where(.ow-items-root) .ow-items-details-btn:focus-visible {
    outline: 2px solid var(--px-focus-ring);
    outline-offset: 2px;
}

:where(.ow-items-root) .ow-items-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

:where(.ow-items-root) .px-input.ow-items-search {
    width: 220px;
}

@media (max-width: 640px) {
    :where(.ow-items-root) .px-input.ow-items-search {
        width: 100%;
    }
}

:where(.ow-items-root) .px-table-wrap.ow-items-table-wrap {
    max-height: 500px;
    overflow-y: auto;
}

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

:where(.ow-items-root) .px-table th.ow-items-details-col {
    width: 90px;
}