/* ===== autopmr_analytics_html (HTML form, scoped) =====
   The AutoPMR dashboard shell's styling. Loaded eagerly from anvil.yaml
   native_deps.head_html, which is what styles the designer canvas as well as
   the running app.

   THIS FILE SORTS LAST AMONG THE AUTOPMR LINKS (every apm_*.css sorts before
   autopmr.css), so a tie between a shell rule and a child rule would go to
   this file.

   NO SUCH TIE EXISTS, and that was checked name by name rather than assumed.
   This file declares .apm-shell, .apm-header, .apm-header-title,
   .apm-header-sub and .apm-content-grid. The three child assets declare
   .apm-controls-*, .apm-ctrl-*, .apm-metrics-*, .apm-month-*, .apm-cost-color,
   .apm-flavour-color, .apm-trend-* and #apm-trend-chart. No name is on both
   sides, and no .px-* class is declared here, so the dependency theme that
   ensure_theme_injected() appends to <head> after every head link has nothing
   to tie with either.

   ROOT RULE, BARE CLASS, ON ITS OWN LINE, so it outranks the :where()-scoped
   rules below and so the dark restatement stays readable as
   [data-theme="dark"] .apm-shell {.

   THE ROOT RULE DROPS overflow: auto AND GAINS flex: 1 0 auto. The root is a
   flex item inside the shared layout's scroller, .px-nav-content, which owns
   the vertical scroll; overflow on the root would stop the port scrolling.
   overflow: auto was inert vertically here (a minimum and no maximum, so the
   box never scrolled) but it did clip horizontal overflow: if a child overflows
   horizontally, the fix is overflow-x: clip on that child, never on this root.

   min-height: 100vh IS KEPT BYTE FOR BYTE. The port is the layout's
   --px-nav-content-height under the shared drawer layout, so the screen
   overspills it by the layout's own padding, exactly as it does today, and
   below 980px by the top bar as well. Changing that is a visible change and
   is the owner's call, so it is recorded as a deviation rather than taken here.

   position: relative STAYS: the loading overlay's inset: 0 resolves against it.

   NO DESIGNER GATE IS NEEDED. The only rule that hides content until the
   JavaScript runs is .px-section-reveal { opacity: 0 }, and that lives in the
   dependency chrome CSS, which ensure_theme_injected() appends to the head at
   runtime and which is therefore absent from the designer canvas. Nothing in
   this file hides anything.

   No @keyframes, no url() and no @font-face anywhere in this section, so there
   is nothing to prefix or rewrite. */

/* =============================================
   AUTOPMR ANALYTICS - ACCENT & LAYOUT
   ============================================= */
.apm-shell {
    --accent: #d97706;
    --accent-hover: #b45309;
    --accent-subtle: rgba(217, 119, 6, 0.10);
    --accent-text: #0f172a;
    --accent-rgb: 217, 119, 6;
    --px-loading-accent: #d97706;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    flex: 1 0 auto;
    padding: 20px;
    gap: 18px;
    position: relative;
    background-color: #f1f5f9;
    background-image:
      radial-gradient(circle at top right, rgba(217, 119, 6, 0.10), transparent 40%),
      linear-gradient(180deg, #fffbeb 0%, #f1f5f9 100%);
}

@media not print {
[data-theme="dark"] .apm-shell {
    --accent: #f59e0b;
    --accent-hover: #fbbf24;
    --accent-subtle: rgba(245, 158, 11, 0.14);
    --accent-text: #0f172a;
    --accent-rgb: 245, 158, 11;
    --px-loading-accent: #f59e0b;
    background-color: #0f172a;
    background-image:
      radial-gradient(circle at top right, rgba(245, 158, 11, 0.18), transparent 28%),
      linear-gradient(180deg, #451a03 0%, #0f172a 100%);
}
}

/* =============================================
   HEADER
   ============================================= */
:where(.apm-shell) .apm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

:where(.apm-shell) .apm-header-title {
    font-family: var(--px-font);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--px-text-primary);
    margin: 0;
}

:where(.apm-shell) .apm-header-sub {
    font-family: var(--px-font);
    font-size: 0.85rem;
    color: var(--px-text-muted);
    margin: 0;
}

/* =============================================
   CONTENT GRID
   ============================================= */
:where(.apm-shell) .apm-content-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}