/* stock_pick_list_html — the Stock Pick List shell's own rules.
 *
 * theme/assets/stock_pick_list/stock_pick_list_html.css, linked from anvil.yaml.
 * The shell's old <style> block moved here when
 * the shell converted, because the Anvil server strips a <style> block out of an
 * HTML template.
 *
 * .sp-screen-root is the wrapping root and its rule is the BARE root rule.
 * It carries display: block and nothing else — no height, no flex, no overflow.
 * .sp-dashboard carries .px-screen-root, whose height: 100% and overflow-y: auto
 * (theme/assets/theme.css) must stay INERT: without this wrapper
 * .sp-dashboard would be a direct flex item of main's definite-height scrolling
 * column, height: 100% would bind for real and overflow-y: auto would move the
 * scroll port off the mount and onto the screen — which also disarms main's modal scroll
 * lock, because that rule names the mount div and not this screen, so the page
 * would scroll behind both manage modals. Inside .sp-screen-root the
 * percentage resolves against a content-sized parent and an auto-height box
 * never scrolls. The single declaration is written out rather than left to the
 * browser default so a later reader can see the rule is deliberately empty of
 * sizing and does not "finish" it. The section could not fix this inside
 * .sp-dashboard's own rule in any case: a screen's rule must not re-declare
 * any of the eight shared declarations, so height
 * and overflow-y stay on the shared class and the wrapper is what neutralises
 * them. Deviation D-SP-10, the same call as nms_html and owings_management_html.
 *
 * The accent tokens stay a BARE rule on .sp-dashboard: they are the section's
 * custom properties and the four children read them by inheritance, and
 * pxShowOverlay snapshots --accent, --accent-hover, --accent-subtle,
 * --accent-text and --px-loading-accent off a modal's computed style before
 * portaling it, so they must resolve on the element the modals sit under. The
 * dark restatement is bare for the same reason — the root is its subject. Every
 * other rule is scoped :where(.sp-dashboard), which adds zero specificity and so
 * cannot change which rule wins.
 *
 * TWO CHANGES, both recorded in the commit. .sp-controls-slot-mount is NEW and
 * holds the controls mount's former inline style attribute verbatim; it lifts
 * the controls card above the historical section that follows it in source order
 * so the home dropdown (.sp-home-dropdown { z-index: 100 }) is not clipped.
 * Nothing else in either repo declares position or z-index on that class, the
 * dependency's .px-section-reveal declares only opacity / transform /
 * transition, and theme/assets/theme.css declares neither name, so the move from
 * inline to a head link ties with nothing. And .px-btn-full { width: 100% } is
 * GONE from here: it was declared only in this style block and used only by the
 * two manage modals' Save buttons, which pxShowOverlay portals out of
 * .sp-dashboard on every open, so any rule scoped on this root would stop
 * matching and both buttons would silently shrink to their text width. It now
 * lives once in each modal's own sheet, scoped on that modal's overlay id, which
 * is the form root and travels into the portal with the button.
 *
 * The other three mount classes carry no declarations. They exist so the next
 * selector that needs to reach a mount has somewhere to go, and because a mount
 * div must stay the direct parent of its dropzone.
 */

.sp-screen-root {
  display: block;
}

/* ========================================
   CSS VARIABLES - Stock Pick List
   Sets --accent vars for shared px-* classes
   ======================================== */
.sp-dashboard {
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-subtle: rgba(79, 70, 229, 0.08);
  --sp-accent-surface: #ecebff;
  --sp-accent-glow: rgba(79, 70, 229, 0.12);
  --px-loading-accent: #4f46e5;
}

[data-theme="dark"] .sp-dashboard,
.sp-dashboard[data-theme="dark"] {
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-subtle: rgba(99, 102, 241, 0.15);
  --sp-accent-surface: #2d3152;
  --sp-accent-glow: rgba(99, 102, 241, 0.25);
}

/* ========================================
   LAYOUT
   ======================================== */
:where(.sp-dashboard) .sp-content-area {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

:where(.sp-dashboard) .sp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ========================================
   SLOT MOUNTS
   ======================================== */
:where(.sp-dashboard) .sp-controls-slot-mount {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  :where(.sp-dashboard) .sp-content-area {
    padding: 16px;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  :where(.sp-dashboard) .sp-content-area {
    padding: 12px;
    gap: 12px;
  }
}