/* current_cycle_scripts_html, the section shell.
 *
 * Three rules stay BARE because the root is their subject: the token rule, the
 * [data-theme="dark"] pair and the container rule. Everything else is scoped
 * :where(.ccs-dashboard), which adds no specificity.
 *
 * The root sits directly in a scroller on both routes (main's content slot,
 * or the analytics home-modal's .px-modal-body), so it carries no height or
 * overflow and is sized by its content. position: relative, isolation and
 * z-index: 0 stay: pxShowLoading positions #ccs-loading against this element,
 * and the stacking context holds that overlay under the dependency's modals.
 *
 * .ccs-search-mount's z-index keeps the home dropdown above the chart card.
 * .ccs-table-mount carries no declarations and gets no rule.
 *
 * This file declares no .px-* name, so it ties with no dependency rule.
 */

/* ========================================
   CSS VARIABLES - Current Cycle Scripts
   ======================================== */
.ccs-dashboard {
  --accent: #8b5cf6;
  --accent-hover: #7c3aed;
  --accent-subtle: rgba(139, 92, 246, 0.12);
  --px-loading-accent: #8b5cf6;
}

[data-theme="dark"] .ccs-dashboard,
.ccs-dashboard[data-theme="dark"] {
  --accent: #a78bfa;
  --accent-hover: #8b5cf6;
  --accent-subtle: rgba(167, 139, 250, 0.18);
}

/* ========================================
   DASHBOARD CONTAINER
   ======================================== */
.ccs-dashboard {
  font-family: var(--px-font);
  background: var(--px-bg-deep);
  color: var(--px-text-primary);
  position: relative;
  isolation: isolate;
  z-index: 0;
}

/* ========================================
   LAYOUT
   ======================================== */
:where(.ccs-dashboard) .ccs-content-area {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

:where(.ccs-dashboard) .ccs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* The search mount div's own declarations (a template may not carry inline
   styles). */
:where(.ccs-dashboard) .ccs-search-mount {
  position: relative;
  z-index: 10;
}

:where(.ccs-dashboard) .ccs-main-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Chart section */
:where(.ccs-dashboard) .ccs-chart-section {
  display: flex;
  justify-content: center;
}

:where(.ccs-dashboard) .ccs-chart-container {
  background: var(--px-bg-card);
  border-radius: var(--px-radius);
  border: 1px solid var(--px-border);
  box-shadow: var(--px-shadow);
  padding: 20px;
  width: 100%;
  max-width: 500px;
}

:where(.ccs-dashboard) .ccs-chart-title {
  font-family: var(--px-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--px-text-secondary);
  text-align: center;
  margin-bottom: 12px;
}

:where(.ccs-dashboard) #ccs-chart {
  min-height: 280px;
}

:where(.ccs-dashboard) .ccs-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--px-text-muted);
  font-size: 14px;
  gap: 8px;
}

:where(.ccs-dashboard) .ccs-chart-empty-icon {
  font-size: 32px;
  opacity: 0.5;
}

@media (max-width: 768px) {
  :where(.ccs-dashboard) .ccs-content-area {
    padding: 16px;
    gap: 16px;
  }

  :where(.ccs-dashboard) .ccs-chart-container {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  :where(.ccs-dashboard) .ccs-content-area {
    padding: 12px;
    gap: 12px;
  }
}