/* ===== apm_trend_chart_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. The form's rules live here because
   Anvil's server strips a <style> block out of an HTML template.

   The form root is <div class="apm-trend-card">, so its own rule stays a BARE class and
   outranks any scoped reset. Everything under it is scoped :where(.apm-trend-card), which adds
   zero specificity and so cannot change which rule wins.

   No second class is needed and no designer gate. Every class here is apm-trend-* and declared
   exactly once across the section, no .px-* class is declared, and this file declares no
   .apexcharts-* rule - so neither the dependency chrome that ensure_theme_injected() appends to
   <head> after every head link nor the stylesheet ApexCharts appends at first render has
   anything to tie with. Nothing here hides content until JavaScript runs, so the canvas shows
   the card exactly as the runtime does.

   var(--accent, #d97706) falls back to the literal on the designer canvas exactly as it does
   today, because --accent is declared on the shell root and a child's canvas has no ancestor
   of it. */

.apm-trend-card {
    background: var(--px-bg-card);
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius);
    box-shadow: var(--px-shadow);
    overflow: hidden;
}

:where(.apm-trend-card) .apm-trend-header {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--px-border);
}

:where(.apm-trend-card) .apm-trend-title {
    font-family: var(--px-font);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--px-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

:where(.apm-trend-card) .apm-trend-title::before {
    content: '';
    width: 3px;
    height: 16px;
    background: var(--accent, #d97706);
    border-radius: 2px;
}

:where(.apm-trend-card) .apm-trend-subtitle {
    font-family: var(--px-font);
    font-size: 0.7rem;
    color: var(--px-text-muted);
    margin-top: 0.15rem;
}

:where(.apm-trend-card) .apm-trend-body {
    padding: 1rem;
    min-height: 340px;
}

/* The chart is drawn at a literal height: 320, never '100%', so the zero-height
   display: contents dropzone above this form's root cannot collapse it. */
:where(.apm-trend-card) #apm-trend-chart {
    width: 100%;
    min-height: 320px;
}