/* ============================================================
   VIDARIA 1.1 SHELL — shared component styles
   ------------------------------------------------------------
   Owns visual styles for the shared shell components under
   Scripts/components/shell/. Each component below corresponds
   to a JS file in that folder; keep the prefixes in sync so
   removing a component never leaves orphan CSS.

   Prefixes:
     .vds-*      shell-wide
     .vds-mcb-*  MetricChipBar
     .vds-card-* OpsCard
     .vds-pill-* FilterPillRow
     .vds-dot-*  StatusDot
     .vds-delta-* DeltaBadge
     .vds-skel-* Skeleton
   ============================================================ */

/* ── Shell root (applied to body when window.__VIDARIA_UI__) ── */
body.vds-shell {
  font-family: var(--font-family);
  background: var(--gray-50);
  color: var(--gray-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scroll fix (affects ALL tabs inside GroupView) ───────────
   Legacy GroupView uses `.group-view { height: 92vh; overflow:
   hidden; }` and relies on each tab's internal container to
   scroll. That assumption breaks under the new shell — the
   VidariaTopNav height differs from the legacy NavBar, and
   newly-restyled tabs don't all set overflow on their root.

   Fix: make the .group-main-content (the right-side tab pane)
   the scroll container under body.vds-shell, so EVERY tab is
   automatically scrollable without per-tab CSS work.

   Calc explanation:
     • --nav-height (64px) — VidariaTopNav
     • ~48px chrome — top padding + ManagedAccountBanner buffer
*/
body.vds-shell .group-view {
    height: calc(100vh - var(--nav-height, 64px));
}
body.vds-shell .group-main-content {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}
/* Don't double-scroll when a tab's content sets its own
   overflow. Tabs that already manage scroll (Mapping) keep
   their behavior. */
body.vds-shell .group-view.mapping-active .group-main-content {
    overflow: visible;
}

/* ── Mapping tab: edge-to-edge map (Phase 2.5, 2026-05-30) ────
   Under Vidaria the left rail is removed on the mapping tab.
   Collapse the sidebar-container to zero width so the map +
   MapCommandBar + MapFloatingSidebar occupy the full viewport
   width. The floating sidebar (top-left overlay) + command bar
   (bottom) provide all the controls the rail used to. */
body.vds-shell .group-view.mapping-active .sidebar-container.vds-sidebar-collapsed {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
}
/* Let the main content (which hosts the full-bleed MapPage) take
   the full width now that the rail is gone. */
body.vds-shell .group-view.mapping-active .group-content-wrapper {
    margin-left: 0 !important;
}

/* ── MetricChipBar ── */
.vds-mcb {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow-x: auto;
  scrollbar-width: thin;
}
.vds-mcb-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  white-space: nowrap;
  flex-shrink: 0;
}
.vds-mcb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vds-mcb-val {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--gray-900);
  line-height: 1;
}
.vds-mcb-lbl {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vds-mcb-divider {
  width: 1px;
  height: 24px;
  background: var(--gray-200);
  flex-shrink: 0;
}
.vds-mcb-spacer {
  flex: 1;
}

/* ── OpsCard ── */
.vds-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}
.vds-card--interactive:hover {
  box-shadow: var(--shadow-md);
}
.vds-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-light);
}
.vds-card-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--gray-900);
}
.vds-card-meta {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-400);
}
.vds-card-body {
  padding: var(--space-4);
  flex: 1;
}
.vds-card-body--scroll {
  overflow-y: auto;
  max-height: 100%;
}
.vds-card-body--flush {
  padding: 0;
}
.vds-card-footer {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-light);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ── FilterPillRow ── */
.vds-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.vds-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-600);
  background: var(--gray-100);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.vds-pill:hover {
  background: var(--gray-150);
  color: var(--gray-900);
}
.vds-pill.is-active {
  background: var(--vidaria-blue);
  color: var(--white);
  border-color: var(--vidaria-blue);
}
.vds-pill.is-active:hover {
  background: var(--vidaria-blue-hover);
}
.vds-pill[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── StatusDot ── */
.vds-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}
.vds-dot--sm { width: 6px; height: 6px; }
.vds-dot--lg { width: 10px; height: 10px; }
.vds-dot--pulse {
  position: relative;
}
.vds-dot--pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.35;
  animation: vds-dot-pulse 1.6s ease-out infinite;
}
@keyframes vds-dot-pulse {
  0%   { transform: scale(0.8); opacity: 0.45; }
  100% { transform: scale(1.8); opacity: 0; }
}
.vds-dot--success    { background: var(--success); }
.vds-dot--warning    { background: var(--warning); }
.vds-dot--danger     { background: var(--danger); }
.vds-dot--info       { background: var(--info); }
.vds-dot--gray       { background: var(--gray-400); }
.vds-dot--blue       { background: var(--vidaria-blue); }

/* ── DeltaBadge ── */
.vds-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  line-height: 1.4;
}
.vds-delta--up    { color: var(--success-text); background: var(--success-light); }
.vds-delta--down  { color: var(--danger-text);  background: var(--danger-light); }
.vds-delta--flat  { color: var(--gray-600);     background: var(--gray-100); }
.vds-delta-arrow {
  display: inline-block;
  font-size: 9px;
  line-height: 1;
}

/* ── Skeleton (loading shimmer) ── */
.vds-skel {
  display: block;
  background: linear-gradient(
    90deg,
    var(--gray-100) 0%,
    var(--gray-150) 50%,
    var(--gray-100) 100%
  );
  background-size: 200% 100%;
  animation: vds-skel-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes vds-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.vds-skel--text { height: 12px; margin: 4px 0; }
.vds-skel--row  { height: 36px; margin-bottom: 8px; }
.vds-skel--card { height: 120px; border-radius: var(--radius-lg); }