/* ============================================================================
   AROS integration layer — owned by the main loop, loads LAST.
   Reconciles the legacy stylesheet with the AROS token/component layers.
   ========================================================================== */

/* Book 011 §1.3 / AROS-011-049: chrome carries no hue and no decorative
   gradients — data is the only thing allowed to mean something with colour.
   The legacy "ambient blobs" (styles.css:53-90) were masked by translucent
   glass cards; Graphite's opaque surfaces expose them as coloured blooms. */
.blob, .blob-1, .blob-2, .blob-3 { display: none !important; }

/* Same rule for the page-level tint behind the content column. */
.dashboard-wrap { background: transparent; }

/* Cards must be fully opaque now that there is no backdrop blur to sit on. */
.glass-card,
.summary-card,
.chart-container { background-color: var(--color-surface); }

/* The context bar was a lavender gradient strip; make it a neutral rail. */
.filter-context-bar {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* The report table's `position: sticky` header and grand-total row never
   actually stuck (true of the legacy build too): the wrap is `overflow-x:auto`,
   which computes overflow-y to `auto` and makes the wrap itself the scrollport
   — and since the wrap grows to the table's full height it never scrolls, so
   nothing has anything to stick to. Capping the wrap gives the sticky rows a
   real scrollport, which is also what AROS-011-035 asks of a wide panel child.
   Short tables stay under the cap and are unaffected. */
@media (min-width: 769px) {
  .rep-table-wrap {
    max-height: calc(100vh - 15rem);
    overflow: auto;
  }
}

@media print {
  .rep-table-wrap { max-height: none !important; }
}

/* Empty/error panels were pink-tinted blocks; AROS wants a neutral surface
   with the status carried by the icon + text, not a coloured field. */
.chart-error, .chart-empty {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* The shared empty-state rule centres an icon next to a label with flex, which
   is right for the JS-built states (icon element + label element). `.grp-empty`
   is not that: it is a prose <p> with inline <strong>/<em>, and flex turns every
   text run into its own flex item — the sentence rendered as a column jumble.
   Prose empty states stay in normal flow; the rest of the rule still applies. */
.grp-empty { display: block; }

/* ── Left rail: give it a plane of its own ───────────────────────────────────
   The rail was rendering white on a porcelain page next to white cards, so it
   had no edge and the active item (surface-alt beige) was nearly invisible.
   AROS §10: the rail is chrome — recede it to the alt plane and let the ACTIVE
   item come forward on the surface plane, with the accent marker doing the
   pointing. Three cues on active (plane + weight + marker), never colour alone. */
.sidebar {
  background: var(--color-surface-alt);
  border-right: 1px solid var(--color-border);
  box-shadow: none;
}
.nav-item {
  min-height: 42px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
.nav-item:hover { background: var(--color-surface); color: var(--color-text); }

.nav-item.active {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  box-shadow: var(--elevation-raised);
}
/* the pointer: a solid accent bar on the leading edge */
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 2px 2px 0;
  background: var(--color-accent-strong, var(--color-text));
}
.nav-item svg { color: currentColor; }
.sidebar-logo { margin-bottom: var(--space-4, 16px); }