/* ─────────────────────────────────────────────────────────────────
   Mocca — ENVIRONMENT THEATER (app-level overrides)

   Staging / Preview accent choreography for the landing-page demo:
   the shell chrome recolors (green / purple) while page CONTENT
   resets to the production accent so data reads true to prod.

   This file is deliberately NOT part of the design-system closure
   (styles.css does not @import it): these rules re-declare theme
   tokens (--accent / --ring / --brand-*) under app-specific
   descendant selectors, which is per-app behavior — not reusable
   tokens. Consuming apps that want the same env theater link this
   file alongside styles.css. Pablo 2026-06-11.
   ───────────────────────────────────────────────────────────────── */

/* ── Staging: page content resets to the production accent ── */
body[data-env="staging"][data-role="admin"] .body-in .page-view,
body[data-env="staging"][data-role="admin"] .body-in .page-view *{
  /* Reset to the LIVE production accent (the themeable cyan token), so
     staging page content reads identically to prod. Was hardcoded #35A9F5,
     which made staging content blue while prod is cyan. */
  --accent:var(--mk-blue-400);
  --ring:color-mix(in srgb, var(--mk-blue-400) 35%, transparent);
}
/* Page header (sticky shell row inside .page-view) is visually chrome,
   not body content — restore the staging accent so its actions (Add
   transaction, Save, Cancel) render green in staging like every other
   shell control. Specificity beats the reset above so this wins. */
body[data-env="staging"][data-role="admin"] .body-in .page-view .page-h,
body[data-env="staging"][data-role="admin"] .body-in .page-view .page-h *{
  --accent:var(--mk-staging);
  --ring:color-mix(in srgb, var(--mk-staging) 30%, transparent);
}

/* ── Dark + staging brand mark ──
   The tile follows the dark-mode flip (white tile) and keeps the staging
   green accent, with the navy cup for contrast on the light tile.
   Supersedes shell.css's navy pin for dark only (Pablo 2026-06-11: "in
   dark mode and staging the logo should have a white background and the
   green accent"). */
html[data-theme="dark"] body[data-env="staging"][data-role="admin"]{
  --brand-bg:#F3F4F6;
  --brand-fg:#22526A;
}

/* ── Preview: page content resets to the production accent ── */
body[data-env="preview"] .body-in .page-view,
body[data-env="preview"] .body-in .page-view *{
  --accent:var(--mk-blue-400);
  --ring:color-mix(in srgb, var(--mk-blue-400) 35%, transparent);
}
body[data-env="preview"] .body-in .page-view .page-h,
body[data-env="preview"] .body-in .page-view .page-h *{
  --accent:var(--mk-preview);
  --ring:color-mix(in srgb, var(--mk-preview) 30%, transparent);
}
/* C2 (Pablo B34): the in-page TAB strip (Frontend / Backend / Routes …) is
   chrome, not body content — while previewing it takes the PREVIEW accent
   (purple), like the page header, so the active tab underline/label reads
   as preview mode. Staging gets its green to match the page-h pattern. */
body[data-env="preview"] .body-in .page-view .sec-tabs,
body[data-env="preview"] .body-in .page-view .sec-tabs *{
  --accent:var(--mk-preview);
  --ring:color-mix(in srgb, var(--mk-preview) 30%, transparent);
}
body[data-env="staging"][data-role="admin"] .body-in .page-view .sec-tabs,
body[data-env="staging"][data-role="admin"] .body-in .page-view .sec-tabs *{
  --accent:var(--mk-staging);
  --ring:color-mix(in srgb, var(--mk-staging) 30%, transparent);
}

/* ── Panels & modals: env-neutral surfaces ──
   The Filters / Sort / Quick-filter panels, every .modal-overlay dialog
   (condition builder, delete/discard confirms, map, alerts, search) and
   the body-portaled date popovers are CONTENT editors, not shell chrome —
   they keep the production accent in staging and preview (Pablo
   2026-06-11: "things like the filter panel shouldn't be affected by the
   environment colors"). */
body[data-env="staging"][data-role="admin"] :is(.filter-panel, .modal-overlay, .cb-date-pop, .pe-sheet-overlay),
body[data-env="staging"][data-role="admin"] :is(.filter-panel, .modal-overlay, .cb-date-pop, .pe-sheet-overlay) *,
body[data-env="preview"] :is(.filter-panel, .modal-overlay, .cb-date-pop, .pe-sheet-overlay),
body[data-env="preview"] :is(.filter-panel, .modal-overlay, .cb-date-pop, .pe-sheet-overlay) *{
  --accent:var(--mk-blue-400);
  --ring:color-mix(in srgb, var(--mk-blue-400) 35%, transparent);
}

/* ── Staging-green dashboard edit/delete buttons (from dashboard.css) ── */
body[data-env="staging"][data-role="admin"] .card-edit-actions{
  /* Delete keeps the danger tint on hover so the action distinction
     stays clear. */
  --accent:var(--mk-staging);
}

/* ── B44 C38 — ROUTE EDIT MODE (Pablo 2026-07-19) ──
   "Edit is basically a simplified version of the staging environment" — so entering
   edit used to turn the whole SHELL staging-green while the page content kept the
   production accent.
   ── B62 UI-80 (Pablo: "when I'm editing I don't really need the whole change to
   shift to the 'staging' color. Users can edit dashboards in production (data on
   widgets, size of the widget and placement and adding existing widgets)") ──
   That re-colouring is GONE, and with it the four counter-rules that existed only
   to undo it inside the page, the panels and the header. Editing a dashboard in
   production is production work; it is not a staging session and must not wear its
   colour (§ F-87 says the same thing about environment-driven accents in general).
   What announces edit mode is the edit chrome itself — the drag/resize affordances,
   the per-widget Edit/Remove buttons, the add tile, and Save/Cancel in the header —
   all of which paint in the app's normal accent now. `body.route-edit` stays as the
   state hook dashboard-editor.js toggles; it simply no longer paints. */