/* ===== na_profit_summary_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html, which is also what styles the designer
   canvas. The form's rules live here because Anvil's server strips a <style> block out of an
   HTML template.

   .na-profit-card is the form root, so its rule stays a BARE class and outranks the :where()-scoped
   rules below it. It gets no `flex: 1 0 auto` and no `position: relative`: those belong to a screen
   root, and this is a dashboard section that sits as a plain block child of the shell's .na-content.
   Its own `overflow: hidden` is this card's rounded-corner clip and carries over.

   :where(.na-profit-card) adds zero specificity, so it cannot change which rule wins; it only stops
   these names reaching another screen now that the sheet is app-wide. [data-theme="dark"] sits on
   <html>, an ANCESTOR of this root, so it stays outside the :where() or the selector never matches.

   The two `.expanded` compounds keep both classes on the same element once scoped, which is what
   keeps .na-profit-month-content.expanded (0,3,0) beating .na-profit-month-content { max-height: 0 }
   (0,2,0) on SPECIFICITY rather than on file order.

   This form styles no .px-* class at all, and no other sheet in the app or in the dependency
   declares a .na-profit-* name, so no rule here can tie with theme.css or with the dependency's
   runtime-injected chrome. No @keyframes, no url(), no @font-face.

   Canvas note (D-6): .na-profit-empty { display: none } and the collapsed
   .na-profit-month-content { max-height: 0 } now load on the designer canvas, where a body <style>
   block never did, so both read as invisible there. Runtime is identical, and this leaf carries no
   live class of its own to gate them on. */

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

:where(.na-profit-card) .na-profit-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--px-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

:where(.na-profit-card) .na-profit-title::before {
    content: '';
    width: 3px;
    height: 16px;
    background: var(--px-success);
    border-radius: 2px;
}

:where(.na-profit-card) .na-profit-kpi {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(22, 163, 74, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(22, 163, 74, 0.15);
}

[data-theme="dark"] :where(.na-profit-card) .na-profit-kpi {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
}

:where(.na-profit-card) .na-profit-kpi-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--px-success-ink);
}

:where(.na-profit-card) .na-profit-kpi-value {
    font-family: var(--px-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--px-success-ink);
}

:where(.na-profit-card) .na-profit-body {
    padding: 1rem 1.25rem;
}

:where(.na-profit-card) .na-profit-empty {
    display: none;
    padding: 2rem;
    text-align: center;
    color: var(--px-text-muted);
    font-size: 0.9rem;
}

/* Collapsible month sections */
:where(.na-profit-card) .na-profit-month {
    margin-bottom: 0.75rem;
}

:where(.na-profit-card) .na-profit-month:last-child {
    margin-bottom: 0;
}

:where(.na-profit-card) .na-profit-month-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--px-bg-elevated);
    border: 1px solid var(--px-border);
    border-radius: 10px;
    font-family: var(--px-font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: 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;
}

:where(.na-profit-card) .na-profit-month-toggle:hover {
    border-color: var(--accent, #7c3aed);
    background: var(--accent-subtle, rgba(124,58,237,0.10));
}

:where(.na-profit-card) .na-profit-month-toggle.expanded {
    border-radius: 10px 10px 0 0;
    border-bottom-color: transparent;
}

:where(.na-profit-card) .na-profit-chevron {
    transition: transform 0.3s ease;
    font-size: 0.7rem;
    color: var(--px-text-muted);
}

:where(.na-profit-card) .na-profit-month-toggle.expanded .na-profit-chevron {
    transform: rotate(180deg);
}

:where(.na-profit-card) .na-profit-month-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    border: 1px solid var(--px-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
}

:where(.na-profit-card) .na-profit-month-content.expanded {
    max-height: 600px;
}

:where(.na-profit-card) .na-profit-month-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--px-font-display);
    font-size: 0.85rem;
}

:where(.na-profit-card) .na-profit-month-table th {
    background: var(--px-bg-elevated);
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--px-text-muted);
    border-bottom: 1px solid var(--px-border);
}

:where(.na-profit-card) .na-profit-month-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--px-border);
    color: var(--px-text-primary);
}

:where(.na-profit-card) .na-profit-month-table tbody tr:hover {
    background: var(--px-bg-elevated);
}

:where(.na-profit-card) .na-profit-month-table tbody tr:last-child td {
    border-bottom: none;
}

:where(.na-profit-card) .na-profit-month-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: 'Space Mono', monospace;
    font-size: 0.78rem;
}

:where(.na-profit-card) .na-profit-month-footer {
    padding: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-family: var(--px-font-display);
    font-size: 0.78rem;
    color: var(--px-text-muted);
    font-weight: 600;
    border-top: 1px solid var(--px-border);
}

:where(.na-profit-card) .na-profit-month-footer .loss {
    color: var(--px-danger);
}

:where(.na-profit-card) .na-profit-month-footer .profit-val {
    color: var(--px-success-ink);
}

:where(.na-profit-card) .na-profit-month-badge {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    background: rgba(22, 163, 74, 0.1);
    color: var(--px-success-text);
    border-radius: 4px;
}