/* ================================================================
   Resayil — Insights app overlay (rs-insights.css)
   Phase 24.6, Plan 24.6-02
   ----------------------------------------------------------------
   Scope: Insights routes ONLY (10 route_prefixes — see overlays/insights.json).
   Consumes --rs-* tokens from resayil-brand.css. No new custom properties.
   Activation of bento card grid requires rs-insights-bento.js to tag
   list/dashboard containers with data-rs-insights-bento="true".
   ECharts color theming lives separately in rs-insights-echarts-theme.js
   (Task 2) — CSS does NOT touch chart color palettes.
   Depends on: resayil-brand.css (tokens), rs-desk.css (chrome baseline).
   ================================================================ */

/* -----------------------------------------------------------------
   S1 — Typography + baseline inheritance
   Every Insights route inherits the brand sans stack, foreground,
   and subtle bg token so the app reads as "Resayil" regardless of
   where Frappe's default body styles are applied.
   ----------------------------------------------------------------- */
body[data-route^="insights"],
body[data-route^="/insights"],
body[data-route^="/insights_v2"],
body[data-route*="insights-chart"],
body[data-route*="insights-dashboard"],
body[data-route*="insights-data-source"],
body[data-route*="insights-query"],
body[data-route*="insights-alert"],
body[data-route*="insights-notebook"],
body[data-route*="insights-folder"] {
  font-family: var(--rs-font-sans);
  color: var(--rs-fg);
  background: var(--rs-bg);
  line-height: var(--rs-leading-normal);
}

body[data-route^="insights"] h1,
body[data-route^="/insights"] h1,
body[data-route^="/insights_v2"] h1,
body[data-route*="insights-chart"] h1,
body[data-route*="insights-dashboard"] h1,
body[data-route*="insights-data-source"] h1,
body[data-route*="insights-query"] h1,
body[data-route*="insights-alert"] h1,
body[data-route*="insights-notebook"] h1,
body[data-route*="insights-folder"] h1 {
  font-size: var(--rs-text-3xl);
  line-height: var(--rs-leading-tight);
  color: var(--rs-fg);
  margin-bottom: var(--rs-space-4);
}

body[data-route^="insights"] h2,
body[data-route^="/insights"] h2,
body[data-route^="/insights_v2"] h2,
body[data-route*="insights-chart"] h2,
body[data-route*="insights-dashboard"] h2,
body[data-route*="insights-data-source"] h2,
body[data-route*="insights-query"] h2,
body[data-route*="insights-alert"] h2,
body[data-route*="insights-notebook"] h2,
body[data-route*="insights-folder"] h2 {
  font-size: var(--rs-text-2xl);
  line-height: var(--rs-leading-tight);
  color: var(--rs-fg);
  margin-bottom: var(--rs-space-3);
}

/* -----------------------------------------------------------------
   S2 — Surface + card chrome
   Page wrappers pick up brand surface, radius, shadow. Targets both
   Desk-rendered Insights routes (/app/insights-*) and the Vue SPA at
   /insights/*. Avoids :root / html / body (unqualified).
   ----------------------------------------------------------------- */
body[data-route^="insights"] .page-container,
body[data-route^="/insights"] .page-container,
body[data-route^="/insights_v2"] .page-container,
body[data-route*="insights-chart"] .page-container,
body[data-route*="insights-dashboard"] .page-container,
body[data-route*="insights-data-source"] .page-container,
body[data-route*="insights-query"] .page-container,
body[data-route*="insights-alert"] .page-container,
body[data-route*="insights-notebook"] .page-container,
body[data-route*="insights-folder"] .page-container {
  background: var(--rs-bg);
  color: var(--rs-fg);
}

body[data-route^="insights"] .layout-main-section,
body[data-route^="/insights"] .layout-main-section,
body[data-route^="/insights_v2"] .layout-main-section,
body[data-route*="insights-chart"] .layout-main-section,
body[data-route*="insights-dashboard"] .layout-main-section,
body[data-route*="insights-data-source"] .layout-main-section,
body[data-route*="insights-query"] .layout-main-section,
body[data-route*="insights-alert"] .layout-main-section,
body[data-route*="insights-notebook"] .layout-main-section,
body[data-route*="insights-folder"] .layout-main-section {
  background: var(--rs-surface);
  border-radius: var(--rs-radius-md);
  box-shadow: var(--rs-shadow-sm);
  padding: var(--rs-space-5);
}

body[data-route^="insights"] .page-head,
body[data-route^="/insights"] .page-head,
body[data-route^="/insights_v2"] .page-head,
body[data-route*="insights-chart"] .page-head,
body[data-route*="insights-dashboard"] .page-head,
body[data-route*="insights-data-source"] .page-head,
body[data-route*="insights-query"] .page-head,
body[data-route*="insights-alert"] .page-head,
body[data-route*="insights-notebook"] .page-head,
body[data-route*="insights-folder"] .page-head {
  background: var(--rs-surface);
  border-bottom: 1px solid var(--rs-border);
  padding: var(--rs-space-4) var(--rs-space-5);
  margin-bottom: var(--rs-space-5);
}

body[data-route^="insights"] .page-content,
body[data-route^="/insights"] .page-content,
body[data-route^="/insights_v2"] .page-content,
body[data-route*="insights-chart"] .page-content,
body[data-route*="insights-dashboard"] .page-content,
body[data-route*="insights-data-source"] .page-content,
body[data-route*="insights-query"] .page-content,
body[data-route*="insights-alert"] .page-content,
body[data-route*="insights-notebook"] .page-content,
body[data-route*="insights-folder"] .page-content {
  background: var(--rs-bg);
  color: var(--rs-fg);
}

/* -----------------------------------------------------------------
   S3 — Bento card grid for dashboard/chart/data-source list views
   Tagged by rs-insights-bento.js with data-rs-insights-bento="true".
   `!important` on display + grid-template-columns only — Insights Vue
   SPA emits inline style on list containers; we defeat that to land
   bento.
   ----------------------------------------------------------------- */
body[data-route^="insights"] [data-rs-insights-bento],
body[data-route^="/insights"] [data-rs-insights-bento],
body[data-route^="/insights_v2"] [data-rs-insights-bento],
body[data-route*="insights-chart"] [data-rs-insights-bento],
body[data-route*="insights-dashboard"] [data-rs-insights-bento],
body[data-route*="insights-data-source"] [data-rs-insights-bento],
body[data-route*="insights-query"] [data-rs-insights-bento],
body[data-route*="insights-alert"] [data-rs-insights-bento],
body[data-route*="insights-notebook"] [data-rs-insights-bento],
body[data-route*="insights-folder"] [data-rs-insights-bento] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--rs-space-5);
  margin-bottom: var(--rs-space-8);
  padding: var(--rs-space-2) 0;
}

body[data-route^="insights"] [data-rs-insights-bento] > *,
body[data-route^="/insights"] [data-rs-insights-bento] > *,
body[data-route^="/insights_v2"] [data-rs-insights-bento] > *,
body[data-route*="insights-chart"] [data-rs-insights-bento] > *,
body[data-route*="insights-dashboard"] [data-rs-insights-bento] > *,
body[data-route*="insights-data-source"] [data-rs-insights-bento] > *,
body[data-route*="insights-query"] [data-rs-insights-bento] > *,
body[data-route*="insights-alert"] [data-rs-insights-bento] > *,
body[data-route*="insights-notebook"] [data-rs-insights-bento] > *,
body[data-route*="insights-folder"] [data-rs-insights-bento] > * {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-5);
  transition:
    transform var(--rs-duration) var(--rs-ease-brand),
    border-color var(--rs-duration) var(--rs-ease-brand),
    box-shadow var(--rs-duration) var(--rs-ease-brand);
  color: var(--rs-fg);
}

body[data-route^="insights"] [data-rs-insights-bento] > *:hover,
body[data-route^="/insights"] [data-rs-insights-bento] > *:hover,
body[data-route^="/insights_v2"] [data-rs-insights-bento] > *:hover,
body[data-route*="insights-chart"] [data-rs-insights-bento] > *:hover,
body[data-route*="insights-dashboard"] [data-rs-insights-bento] > *:hover,
body[data-route*="insights-data-source"] [data-rs-insights-bento] > *:hover,
body[data-route*="insights-query"] [data-rs-insights-bento] > *:hover,
body[data-route*="insights-alert"] [data-rs-insights-bento] > *:hover,
body[data-route*="insights-notebook"] [data-rs-insights-bento] > *:hover,
body[data-route*="insights-folder"] [data-rs-insights-bento] > *:hover {
  border-color: var(--rs-accent);
  box-shadow: var(--rs-shadow-md);
  transform: translateY(-2px);
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  body[data-route^="insights"] [data-rs-insights-bento],
  body[data-route^="/insights"] [data-rs-insights-bento],
  body[data-route^="/insights_v2"] [data-rs-insights-bento],
  body[data-route*="insights-chart"] [data-rs-insights-bento],
  body[data-route*="insights-dashboard"] [data-rs-insights-bento],
  body[data-route*="insights-data-source"] [data-rs-insights-bento],
  body[data-route*="insights-query"] [data-rs-insights-bento],
  body[data-route*="insights-alert"] [data-rs-insights-bento],
  body[data-route*="insights-notebook"] [data-rs-insights-bento],
  body[data-route*="insights-folder"] [data-rs-insights-bento] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--rs-space-4);
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  body[data-route^="insights"] [data-rs-insights-bento],
  body[data-route^="/insights"] [data-rs-insights-bento],
  body[data-route^="/insights_v2"] [data-rs-insights-bento],
  body[data-route*="insights-chart"] [data-rs-insights-bento],
  body[data-route*="insights-dashboard"] [data-rs-insights-bento],
  body[data-route*="insights-data-source"] [data-rs-insights-bento],
  body[data-route*="insights-query"] [data-rs-insights-bento],
  body[data-route*="insights-alert"] [data-rs-insights-bento],
  body[data-route*="insights-notebook"] [data-rs-insights-bento],
  body[data-route*="insights-folder"] [data-rs-insights-bento] {
    grid-template-columns: 1fr !important;
    gap: var(--rs-space-3);
  }
}

/* -----------------------------------------------------------------
   S4 — Dashboard-specific chrome (Vue SPA class names extracted from
   frappe/insights/frontend). Converts widgets to card chrome (surface
   bg + rounded + shadow-sm). Chart containers get consistent padding
   so the ECharts canvas has breathing room.
   ----------------------------------------------------------------- */
body[data-route^="insights"] .insights-dashboard,
body[data-route^="/insights"] .insights-dashboard,
body[data-route^="/insights_v2"] .insights-dashboard,
body[data-route*="insights-dashboard"] .insights-dashboard {
  background: var(--rs-bg);
  display: grid;
  gap: var(--rs-space-4);
  padding: var(--rs-space-4);
}

body[data-route^="insights"] .dashboard-item,
body[data-route^="/insights"] .dashboard-item,
body[data-route^="/insights_v2"] .dashboard-item,
body[data-route*="insights-dashboard"] .dashboard-item {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  box-shadow: var(--rs-shadow-sm);
  padding: var(--rs-space-4);
  transition: box-shadow var(--rs-duration) var(--rs-ease-brand);
}

body[data-route^="insights"] .dashboard-item:hover,
body[data-route^="/insights"] .dashboard-item:hover,
body[data-route^="/insights_v2"] .dashboard-item:hover,
body[data-route*="insights-dashboard"] .dashboard-item:hover {
  box-shadow: var(--rs-shadow-md);
}

body[data-route^="insights"] .chart-widget,
body[data-route^="/insights"] .chart-widget,
body[data-route^="/insights_v2"] .chart-widget,
body[data-route*="insights-chart"] .chart-widget,
body[data-route*="insights-dashboard"] .chart-widget {
  background: var(--rs-surface);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-4);
}

body[data-route^="insights"] .widget-chart-content,
body[data-route^="/insights"] .widget-chart-content,
body[data-route^="/insights_v2"] .widget-chart-content,
body[data-route*="insights-chart"] .widget-chart-content,
body[data-route*="insights-dashboard"] .widget-chart-content {
  background: var(--rs-surface);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-4);
  color: var(--rs-fg);
}

/* -----------------------------------------------------------------
   S5 — Accent buttons + interactive controls inside Insights
   ----------------------------------------------------------------- */
body[data-route^="insights"] .btn-primary,
body[data-route^="/insights"] .btn-primary,
body[data-route^="/insights_v2"] .btn-primary,
body[data-route*="insights-chart"] .btn-primary,
body[data-route*="insights-dashboard"] .btn-primary,
body[data-route*="insights-data-source"] .btn-primary,
body[data-route*="insights-query"] .btn-primary,
body[data-route*="insights-alert"] .btn-primary,
body[data-route*="insights-notebook"] .btn-primary,
body[data-route*="insights-folder"] .btn-primary {
  background: var(--rs-accent);
  border-color: var(--rs-accent);
  color: #ffffff;
  border-radius: var(--rs-radius);
  transition: background var(--rs-duration) var(--rs-ease);
}

body[data-route^="insights"] .btn-primary:hover,
body[data-route^="/insights"] .btn-primary:hover,
body[data-route^="/insights_v2"] .btn-primary:hover,
body[data-route*="insights-chart"] .btn-primary:hover,
body[data-route*="insights-dashboard"] .btn-primary:hover,
body[data-route*="insights-data-source"] .btn-primary:hover,
body[data-route*="insights-query"] .btn-primary:hover,
body[data-route*="insights-alert"] .btn-primary:hover,
body[data-route*="insights-notebook"] .btn-primary:hover,
body[data-route*="insights-folder"] .btn-primary:hover {
  background: var(--rs-accent-hover);
  border-color: var(--rs-accent-hover);
}

body[data-route^="insights"] input:focus,
body[data-route^="/insights"] input:focus,
body[data-route^="/insights_v2"] input:focus,
body[data-route*="insights-chart"] input:focus,
body[data-route*="insights-dashboard"] input:focus,
body[data-route*="insights-data-source"] input:focus,
body[data-route*="insights-query"] input:focus,
body[data-route*="insights-alert"] input:focus,
body[data-route*="insights-notebook"] input:focus,
body[data-route*="insights-folder"] input:focus {
  outline: 2px solid var(--rs-accent);
  outline-offset: 2px;
  border-color: var(--rs-accent);
}

/* -----------------------------------------------------------------
   S6 — Dark mode (scoped — inherits tokens from :root[data-theme=dark])
   The --rs-* surface/border tokens re-resolve automatically under the
   dark-theme block defined in resayil-brand.css. We only need to
   adjust the hover shadow which is perceptually weaker in dark mode.
   ----------------------------------------------------------------- */
body[data-theme="dark"][data-route^="insights"] [data-rs-insights-bento] > *,
body[data-theme="dark"][data-route^="/insights"] [data-rs-insights-bento] > *,
body[data-theme="dark"][data-route^="/insights_v2"] [data-rs-insights-bento] > *,
body[data-theme="dark"][data-route*="insights-chart"] [data-rs-insights-bento] > *,
body[data-theme="dark"][data-route*="insights-dashboard"] [data-rs-insights-bento] > *,
body[data-theme="dark"][data-route*="insights-data-source"] [data-rs-insights-bento] > *,
body[data-theme="dark"][data-route*="insights-query"] [data-rs-insights-bento] > *,
body[data-theme="dark"][data-route*="insights-alert"] [data-rs-insights-bento] > *,
body[data-theme="dark"][data-route*="insights-notebook"] [data-rs-insights-bento] > *,
body[data-theme="dark"][data-route*="insights-folder"] [data-rs-insights-bento] > * {
  border-color: var(--rs-border);
  background: var(--rs-surface);
}

body[data-theme="dark"][data-route^="insights"] [data-rs-insights-bento] > *:hover,
body[data-theme="dark"][data-route^="/insights"] [data-rs-insights-bento] > *:hover,
body[data-theme="dark"][data-route^="/insights_v2"] [data-rs-insights-bento] > *:hover,
body[data-theme="dark"][data-route*="insights-chart"] [data-rs-insights-bento] > *:hover,
body[data-theme="dark"][data-route*="insights-dashboard"] [data-rs-insights-bento] > *:hover,
body[data-theme="dark"][data-route*="insights-data-source"] [data-rs-insights-bento] > *:hover,
body[data-theme="dark"][data-route*="insights-query"] [data-rs-insights-bento] > *:hover,
body[data-theme="dark"][data-route*="insights-alert"] [data-rs-insights-bento] > *:hover,
body[data-theme="dark"][data-route*="insights-notebook"] [data-rs-insights-bento] > *:hover,
body[data-theme="dark"][data-route*="insights-folder"] [data-rs-insights-bento] > *:hover {
  border-color: var(--rs-accent);
  box-shadow: var(--rs-shadow-lg);
}

body[data-theme="dark"][data-route^="insights"] .dashboard-item,
body[data-theme="dark"][data-route^="/insights"] .dashboard-item,
body[data-theme="dark"][data-route^="/insights_v2"] .dashboard-item,
body[data-theme="dark"][data-route*="insights-dashboard"] .dashboard-item {
  background: var(--rs-surface);
  border-color: var(--rs-border);
}

/* -----------------------------------------------------------------
   S7 — RTL (Arabic, Hebrew). Swap physical left/right to logical
   inline-start/end where we used them, and apply the Arabic font
   family on the main layout wrapper.
   ----------------------------------------------------------------- */
[dir="rtl"] body[data-route^="insights"] .layout-main-section,
[dir="rtl"] body[data-route^="/insights"] .layout-main-section,
[dir="rtl"] body[data-route^="/insights_v2"] .layout-main-section,
[dir="rtl"] body[data-route*="insights-chart"] .layout-main-section,
[dir="rtl"] body[data-route*="insights-dashboard"] .layout-main-section,
[dir="rtl"] body[data-route*="insights-data-source"] .layout-main-section,
[dir="rtl"] body[data-route*="insights-query"] .layout-main-section,
[dir="rtl"] body[data-route*="insights-alert"] .layout-main-section,
[dir="rtl"] body[data-route*="insights-notebook"] .layout-main-section,
[dir="rtl"] body[data-route*="insights-folder"] .layout-main-section {
  font-family: var(--rs-font-arabic);
  direction: rtl;
  text-align: right;
}

[dir="rtl"] body[data-route^="insights"] [data-rs-insights-bento] > *,
[dir="rtl"] body[data-route^="/insights"] [data-rs-insights-bento] > *,
[dir="rtl"] body[data-route^="/insights_v2"] [data-rs-insights-bento] > *,
[dir="rtl"] body[data-route*="insights-chart"] [data-rs-insights-bento] > *,
[dir="rtl"] body[data-route*="insights-dashboard"] [data-rs-insights-bento] > *,
[dir="rtl"] body[data-route*="insights-data-source"] [data-rs-insights-bento] > *,
[dir="rtl"] body[data-route*="insights-query"] [data-rs-insights-bento] > *,
[dir="rtl"] body[data-route*="insights-alert"] [data-rs-insights-bento] > *,
[dir="rtl"] body[data-route*="insights-notebook"] [data-rs-insights-bento] > *,
[dir="rtl"] body[data-route*="insights-folder"] [data-rs-insights-bento] > * {
  text-align: right;
}

/* -----------------------------------------------------------------
   S8 — Reduced motion: kill transforms/transitions
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-route^="insights"] [data-rs-insights-bento] > *,
  body[data-route^="/insights"] [data-rs-insights-bento] > *,
  body[data-route^="/insights_v2"] [data-rs-insights-bento] > *,
  body[data-route*="insights-chart"] [data-rs-insights-bento] > *,
  body[data-route*="insights-dashboard"] [data-rs-insights-bento] > *,
  body[data-route*="insights-data-source"] [data-rs-insights-bento] > *,
  body[data-route*="insights-query"] [data-rs-insights-bento] > *,
  body[data-route*="insights-alert"] [data-rs-insights-bento] > *,
  body[data-route*="insights-notebook"] [data-rs-insights-bento] > *,
  body[data-route*="insights-folder"] [data-rs-insights-bento] > * {
    transition: none;
  }
  body[data-route^="insights"] [data-rs-insights-bento] > *:hover,
  body[data-route^="/insights"] [data-rs-insights-bento] > *:hover,
  body[data-route^="/insights_v2"] [data-rs-insights-bento] > *:hover,
  body[data-route*="insights-chart"] [data-rs-insights-bento] > *:hover,
  body[data-route*="insights-dashboard"] [data-rs-insights-bento] > *:hover,
  body[data-route*="insights-data-source"] [data-rs-insights-bento] > *:hover,
  body[data-route*="insights-query"] [data-rs-insights-bento] > *:hover,
  body[data-route*="insights-alert"] [data-rs-insights-bento] > *:hover,
  body[data-route*="insights-notebook"] [data-rs-insights-bento] > *:hover,
  body[data-route*="insights-folder"] [data-rs-insights-bento] > *:hover {
    transform: none;
  }
}

/* -----------------------------------------------------------------
   SCOPE GUARDS (Plan 24.6-02)
   This file MUST NOT emit rules matching:
   - :root, html, body (unqualified)
   - body[data-route^="/app"] without an insights-* data-route match
   - Any portal or workspace route outside route_prefixes in
     erpnext_cli/overlays/insights.json
   Enforced by scripts/verify_insights_css_scope.py (Task 4).
   ----------------------------------------------------------------- */