/* auto_pmring_html — the section shell's rules.
 *
 * The root rule stays BARE: .apm-dashboard is the adopted form root and it
 * declares the four accent tokens every child inherits, so the custom
 * properties must land on that element itself. Everything below it is scoped
 * :where(.apm-dashboard), which adds no specificity and so cannot change which
 * rule wins.
 *
 * NO height: 100%, AND flex-shrink: 0. .apm-dashboard is the flex item of the
 * layout's definite-height scroller, so height: 100% would pin the screen to
 * the port and overflow: hidden would clip it: on a short viewport
 * .apm-content (flex: 1; overflow: hidden) would clip the action bar and
 * search card with no scrollbar anywhere. With no height the box is
 * content-sized and the scroller scrolls it. overflow: hidden makes
 * .apm-dashboard a scroll container, whose automatic minimum size as a flex
 * item is zero, so flex-shrink: 0 stops the scroller shrinking it back to the
 * port height.
 *
 * The child forms' roots carry their own sizing: theme.css gives .px-grid-card
 * min-height: 0, and .apm-table-card declares its own flex: 1.
 */

.apm-dashboard {
    --accent: #0891b2;
    --accent-hover: #0e7490;
    --accent-subtle: rgba(8, 145, 178, 0.08);
    --px-loading-accent: #0891b2;

    font-family: var(--px-font);
    color: var(--px-text-primary);
    background: var(--px-bg-deep);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
    z-index: 0;
}

/* Bare: the root is the subject of both selectors. */
[data-theme="dark"] .apm-dashboard,
.apm-dashboard[data-theme="dark"] {
    --accent: #06b6d4;
    --accent-hover: #0891b2;
    --accent-subtle: rgba(6, 182, 212, 0.15);
}

:where(.apm-dashboard) .apm-content {
    width: 100%;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    overflow: hidden;
}

/* The table mount div's declarations. Nothing else in either repo declares
   .apm-table-slot-mount, so there is no order tie to lose. */
:where(.apm-dashboard) .apm-table-slot-mount {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

@media (max-width: 900px) {
    :where(.apm-dashboard) .apm-content { padding: 16px; }
}
@media (max-width: 600px) {
    :where(.apm-dashboard) .apm-content { padding: 12px 8px; }
}