/* Executive Dashboard (.ex) — Signal in-slot page. Tokens are injected on .ex-root at runtime
   (light + dark) by the viewmodel; this file is structure only, fully namespaced under .ex-root.
   The mockup is entirely inline-styled (translated verbatim into the view); this adds the font
   stack, box-sizing reset, and the selection color so the page matches the design system. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.ex-root { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.ex-root *,
.ex-root *::before,
.ex-root *::after { box-sizing: border-box; }
.ex-root ::selection { background: #C2CCFB; }

.ex-root ::-webkit-scrollbar { width: 8px; height: 8px; }
.ex-root ::-webkit-scrollbar-thumb {
  background: var(--border-strong, #cfd4e4); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}

/* ---- loading cues ------------------------------------------------------------------ */
/* skeleton shimmer: neutral blocks matching the real layout, animated sheen */
.ex-root .ex-skel { position: relative; overflow: hidden; background: var(--surface-2, #EEF0F6); border-radius: 8px; }
.ex-root .ex-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
    animation: exShimmer 1.4s ease-in-out infinite; }
@keyframes exShimmer { 100% { transform: translateX(100%); } }
.ex-root .ex-skel-card { background: var(--surface, #fff); border: 1px solid var(--border, #E5E8F2); border-radius: var(--r-md, 12px); padding: 16px; }

/* range-switch refresh: indeterminate brand bar under the toolbar + gently dimmed content */
.ex-root .ex-progress { position: relative; height: 3px; overflow: hidden; background: var(--brand-50, #EEF1FE); flex: none; }
.ex-root .ex-progress::before { content: ""; position: absolute; top: 0; bottom: 0; width: 34%; border-radius: 3px;
    background: var(--brand-600, #4C63E6); animation: exSlide 1.1s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes exSlide { 0% { left: -34%; } 100% { left: 100%; } }
.ex-root .ex-dim { opacity: .55; pointer-events: none; filter: saturate(.8); transition: opacity .2s ease; }