/*
  KPI Section Contract (DS V2)

  Goal
  - Provide a single, reusable structure for the KPI area (KPI bar + toolbar)
    across stock/ventas/costos/gastos/mano de obra.

  Scope
  - DS V2 only: everything is scoped under `.ui-v2`.
  - This file intentionally controls *layout and spacing only*.
  - Visual/skin overrides and inline-style cleanup are handled in a later phase.

  Contract (HTML)
  <section class="np-kpi-section">
    (1) KPI Bar (existing include)
    (2) <div class="np-kpi-toolbar">
          <div class="np-kpi-toolbar__top">...</div>
          <div class="np-kpi-toolbar__body">...</div>
        </div>
  </section>

  IMPORTANT - Do not regress (2026-03-03):
  - .np-kpi-section and .np-kpi-bar must NOT have a background (they use background: transparent).
  - Only .np-kpi-card (each KPI tile) and the FilterShell bar have their own surface.
  - Adding background, --color-background, or any surface token to these containers would
    bring back the unintended "soft rectangle" behind KPI bar and filters. See
    docs/audits/active/KPI_FILTERSHELL_SOFT_RECTANGLE_DSV2_AUDIT_2026-03-03.md.
*/

/*
  `.ui-v2 .np-kpi-section` is the canonical selector.
  Some pages do not have a global `.ui-v2` wrapper yet, so templates may add
  `ui-v2` directly on the section. We support both forms.
*/

/*
  Override: do not paint a background on the KPI section when it has .ui-v2.
  menu_v2.css sets .ui-v2 { background: var(--color-background) }, which would
  paint a soft rectangle (#F8FAFC) behind KPI bar + FilterShell. This section
  is layout-only; only the KPI cards and FilterShell bar have their own surfaces.
  Neutralizing the section background aligns affected views with /ingresos (no band).
  Does not affect other .ui-v2 contexts (e.g. menu root).
*/
.ui-v2 .np-kpi-section,
.ui-v2.np-kpi-section {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}

/*
  Same override for the KPI bar root: partials/kpi_bar.html outputs
  <div class="np-kpi-bar ui-v2">, so the bar container also gets the soft
  background. Neutralize it so only the individual .np-kpi-card elements
  have their surface (e.g. in Trazabilidad, Traslados, Ingresos).
*/
.ui-v2 .np-kpi-bar,
.ui-v2.np-kpi-bar {
  background: transparent;
}

.ui-v2 .np-kpi-toolbar,
.ui-v2.np-kpi-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Top row: actions/search/export buttons. */
.ui-v2 .np-kpi-toolbar__top,
.ui-v2.np-kpi-section .np-kpi-toolbar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Body: presets, chips, filters accordion, alerts, secondary panels. */
.ui-v2 .np-kpi-toolbar__body,
.ui-v2.np-kpi-section .np-kpi-toolbar__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 700px) {
  .ui-v2 .np-kpi-section,
  .ui-v2.np-kpi-section {
    gap: 10px;
    margin: 10px 0;
  }

  .ui-v2 .np-kpi-toolbar,
  .ui-v2.np-kpi-toolbar {
    gap: 10px;
  }

  .ui-v2 .np-kpi-toolbar__top,
  .ui-v2.np-kpi-section .np-kpi-toolbar__top {
    justify-content: flex-start;
  }
}