/* Dashboard UI Semantic Class System
 * ===================================
 *
 * Complete design system for dashboard components.
 * Makes structure clear, maintainable, and self-documenting.
 *
 * HOW THIS FILE IS LOADED:
 * ------------------------
 * This stylesheet is loaded via stylesheet_link_tag in app/views/layouts/application.html.erb
 * NOT via @import (Propshaft doesn't support @import preprocessing).
 *
 * To modify dashboard styles:
 * 1. Edit the semantic classes below (e.g., .metric-card, .narrative-block)
 * 2. Changes take effect immediately in development
 * 3. Run `rails assets:precompile` before deploying to production
 *
 * USAGE IN VIEWS:
 * ---------------
 * Apply semantic classes directly in ERB:
 *   <div class="metric-card">...</div>
 *   <div class="narrative-block prose">...</div>
 *
 * Combine with Tailwind utilities for spacing/colors as needed:
 *   <div class="metric-card p-4 bg-surface">...</div>
 *
 * See docs/PROPSHAFT_STYLESHEET_GUIDE.md for complete details.
 */

/* ==========================================================================
   LAYOUT COMPONENTS
   ========================================================================== */

.dashboard-container {
  /* Main dashboard wrapper */

    .bg-surface-elevated{
        border: 1px solid var(--color-gray-200);

    }
}

.dashboard-header {
  /* Top section with title and metadata */
}

.dashboard-title {
  /* Main dashboard title */
}

.dashboard-meta {
  /* Metadata line (metric count, live status, etc.) */
}

.dashboard-grid {
  /* Main grid layout for metrics and narratives */
    padding-top: 2rem;


}

.dashboard-actions {
  /* Action button container */
}

/* ==========================================================================
   CARD COMPONENTS
   ========================================================================== */

.metric-card {
  /* Individual metric display card */
}

.metric-card-header {
  /* Top of metric card (title, help, actions) */
}

.metric-card-body {
  /* Main content area of metric card */
}

.metric-card-footer {
  /* Bottom of metric card (metadata, timestamps) */
}

.narrative-card {
  /* Text/narrative content card */
    h1{
        margin-bottom: 1rem;
    }

    :first-of-type{
        /*margin-top: 1rem;*/
    }


}

/* ==========================================================================
   METRIC COMPONENTS
   ========================================================================== */

.metric-title {
  /* Metric name/heading */
}

.metric-description {
  /* Short metric description */
}

.metric-narrative {
  /* Longer form metric explanation */
}

.metric-narrative > *:first-child {
  margin-top: 0;
}

.metric-commentary {
  /* Deep analytical commentary */
}

.metric-commentary > *:first-child {
  margin-top: 0;
}

.metric-value {
  /* Large primary value display */
}

.metric-unit {
  /* Unit label (students, percent, etc.) */
}

.metric-metadata {
  /* Source, timestamp, update info */
}

/* ==========================================================================
   CHART COMPONENTS
   ========================================================================== */

.chart-container {
  /* Wrapper for chart/visualization */
  /* Let charts size themselves naturally, container provides structure */
  min-height: 16rem;  /* Minimum 256px height for consistency */
  position: relative;  /* For absolute positioning of chart internals */
}

.chart-title {
  /* Chart heading */
}

.chart-legend {
  /* Chart legend area */
}

.chart-footer {
  /* Chart footer with metadata (data points, latest value) */
  margin-top: 0rem !important;  /* Extra space to prevent overlap with chart labels */
}

.chart-empty-state {
  /* No data available message */
}

/* ==========================================================================
   NARRATIVE COMPONENTS
   ========================================================================== */

.narrative-block {
  /* General text content block */
}

/* Remove top margin from first element (typically h2/h3 heading) */
.narrative-block > *:first-child {
  margin-top: 0;
}

/* Ensure all narrative block headings have consistent spacing */

.narrative-block h1 {
    margin-bottom: 1.5rem;
}

.narrative-block h2 {
  margin-top: 1.5rem;
}

.narrative-block h2:first-child {
  margin-top: 0;
}

.narrative-block h3 {
  margin-top: 2rem;
    font-size: 1.5rem;
}

.narrative-block p {
    margin-top: 1rem;
    font-size: 1.25rem;
    /* last p should have no margin bottom */

}

.narrative-block p:last-child {
    margin-bottom: 0;
}

.narrative-block h3:first-child {
  margin-top: 0;
}

.executive-summary {
  /* High-level overview block */
}

.strategic-narrative {
  /* Recommendations and insights */
}

.contextual-narrative {
  /* Explanatory context */
}

.system-explanation {
  /* Meta-commentary about Pulse */
}

/* ==========================================================================
   INTERACTIVE COMPONENTS
   ========================================================================== */

.dashboard-action {
  /* Action button (help, version, etc.) */
}

.metric-action {
  /* Metric-level action button */
}

.help-trigger {
  /* Help icon/button */
}

.version-trigger {
  /* Version info clickable area */
}

/* ==========================================================================
   EXPANDABLE CONTENT COMPONENTS
   ========================================================================== */

.expandable-summary {
  /* Summary content shown in collapsed state */
}

.expandable-button {
  /* "Read more" / "Show less" toggle button */
  cursor: pointer;
  user-select: none;
}

.expandable-button:focus-visible {
  /* Enhanced focus for keyboard navigation */
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.expandable-chevron {
  /* Chevron icon for expand/collapse state */
  transition: transform 0.3s ease-in-out;
}

.expandable-chevron[aria-expanded="true"] {
  /* Rotated state when expanded */
  transform: rotate(90deg);
}

.expandable-content {
  /* Expanded content container */
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.expandable-content[aria-hidden="true"] {
  /* Hidden state */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.expandable-content[aria-hidden="false"] {
  /* Visible state */
  opacity: 1;
}

/* ==========================================================================
   STATUS INDICATORS
   ========================================================================== */

.live-indicator {
  /* Pulsing live data badge */
}

.static-indicator {
  /* Static data badge */
}

.loading-state {
  /* Loading spinner/skeleton */
}

.error-state {
  /* Error message display */
}

.empty-state {
  /* No data available state */
}

/* ==========================================================================
   MODAL COMPONENTS
   ========================================================================== */

.modal-overlay {
  /* Dark backdrop */
}

.modal-container {
  /* Modal content wrapper */
}

.modal-header {
  /* Modal title and close button */
}

.modal-body {
  /* Scrollable modal content */
}

.modal-footer {
  /* Modal actions */
}

/* ==========================================================================
   VERSION HISTORY COMPONENTS
   ========================================================================== */

.version-history-container {
  /* Main version history wrapper */
}

.version-current {
  /* Current version display */
}

.version-timeline {
  /* Historical versions list */
}

.version-item {
  /* Individual version entry */
}

.version-badge {
  /* Version number badge */
}

.version-narrative {
  /* Version notes content */
}

.version-narrative > *:first-child {
  margin-top: 0;
}

.version-metadata {
  /* Timestamp, author, bump type */
}

/* ==========================================================================
   HELP COMPONENTS
   ========================================================================== */

.help-container {
  /* Help modal wrapper */
}

.help-narrative {
  /* Help content text */
}

.help-narrative > *:first-child {
  margin-top: 0;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.span-full {
  /* Full width grid item */
}

.span-half {
  /* Half width grid item */
}

.metric-live {
  /* Live data metric styling */
}

.metric-static {
  /* Static data metric styling */
}

.text-primary-value {
  /* Primary numeric value styling */
}

.text-secondary-value {
  /* Secondary/comparison value styling */
}