/* Dashboard Core Styles - Structure & Hierarchy */
/* Foundation for all dashboard layouts and sections */

/*
DASHBOARD TAXONOMY HIERARCHY:

Level 1: Container (layout.css)
├── .module-content (OWNS 16px outer padding, overflow: hidden)
│   └── .tabbed-dashboard variant (padding: 0 - tabs own padding)

Level 2: Scroll Region (scroll-indicators.css)
├── .dashboard-content ← SCROLL REGION (non-tabbed dashboards)
├── .tab-content-container ← SCROLL REGION (tabbed workspaces)
│   
│   CONTRACT: Scroll regions are the ONLY vertical scroll points.
│   See scroll-indicators.css for the unified scroll behavior.

Level 3: Dashboard Structure
├── .dashboard-body (flex column + gap between sections)
│   ├── .dashboard-header (optional)
│   └── sections...

Level 4: Section Types  
├── .dashboard-section.kpis
├── .dashboard-section.data-table
├── .dashboard-section.chart-grid
├── .dashboard-section.activity-feed
└── .dashboard-section.actions

Level 5: Content Components
├── .section-header (.section-title + .section-subtitle + .section-actions)
├── .section-content (.metric-grid | .data-table | .card-grid | .activity-list)

Level 6: Atomic Elements
├── .metric-card (.metric-header + .metric-content)
├── .data-row (.data-label + .data-value + .data-status)  
├── .activity-item (.activity-header + .activity-content)

SPACING CONTRACT:
- .module-content owns 16px outer padding (defined in layout.css)
- .tabbed-dashboard overrides to padding: 0 (tabs handle their own)
- .dashboard-content is the SCROLL REGION (scroll behavior in scroll-indicators.css)
- .dashboard-body provides flex layout + 16px gap between sections
- Sections own internal padding (no margin)
- .section-content has NO padding (parent section owns it)
- Components own internal padding only
*/

/* ===================================
   LEVEL 1: DASHBOARD CONTAINER
   =================================== */

/* 
   CONTRACT: .dashboard-content is the SCROLL REGION.
   Scroll behavior (overflow-y: auto, flex: 1, min-height: 0) is defined
   in scroll-indicators.css as the single source of truth.
   
   Layout-specific styles only here.
*/

.module-content .dashboard-content {
    width: 100%;
    height: 100%;
    padding: 0;  /* NO padding - module-content owns it now */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Scroll behavior inherited from scroll-indicators.css */
}

.dashboard-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);  /* 16px - gap between sections */
    padding-bottom: var(--space-4);  /* Bottom padding for scroll content */
}

/* ===================================
   LEVEL 2: SECTION TYPES
   =================================== */

/* .dashboard-section is declared ONCE, in styles/organisms/Panel/Panel.css.
   It used to be redeclared here too -- and because this file loads later with equal
   specificity, this copy silently won, so the panel contract lived in the file that
   documented it least. Its values were folded into Panel.css unchanged (TLP-989 item 5).
   Do not reintroduce a panel declaration here. */

.dashboard-section.kpis {
    /* KPI sections - metrics overview */
}

.dashboard-section.data-table {
    /* Table sections - structured data */
}

.dashboard-section.chart-grid {
    /* Visual chart sections */
}

.dashboard-section.activity-feed {
    /* Live activity/timeline sections */
    position: relative;
}

.dashboard-section.actions {
    /* Action button sections */
    text-align: center;
}

/* ===================================
   LEVEL 3: CONTENT COMPONENTS
   =================================== */

/* CONTRACT: Header has minimal padding, border provides visual separation */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);  /* Gap to content */
    padding: 0 0 var(--space-3) 0;  /* Only bottom padding before border */
    border-bottom: 1px solid var(--border-subtle);
}

.section-title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
}

.section-subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--space-2);
}

/* 
 * NOTE: Filter and action layout styles have been consolidated into:
 * - molecules/ControlsBar/ControlsBar.css (single source of truth)
 * Panel organism now uses ControlsBar internally for filter/action layout.
 * 
 * Legacy .section-actions, .section-filters, and .filter-* classes removed.
 */

/* ===================================
   SCROLLABLE PANEL BEHAVIOR
   =================================== */

/* The Panel organism owns its own body/scroll contract: see
   styles/organisms/Panel/Panel.css. A second copy lived here and won on load
   order (index.html links this file after the organism), which is how the vh
   cap on the panel body survived every module workaround -- TLP-913 retired it.
   Do not redeclare the Panel body or its scrollable variant in an app
   stylesheet: one concept, one home. */

/* ExpandablePanel scrollable behavior - Fills parent height with internal scrolling */
.service-category-section.scrollable-panel {
    display: flex;
    flex-direction: column;
    flex: 1;              /* Fill available parent height */
    min-height: 0;        /* Allow flex shrinking */
    overflow: hidden;     /* Contain scrolling within panel */
}

.service-category-section.scrollable-panel .category-services-grid {
    flex: 1;              /* Content area fills remaining space */
    min-height: 0;        /* Allow flex shrinking */
    overflow-y: auto;     /* Enable vertical scrolling */
    overflow-x: hidden;   /* Hide horizontal overflow */
}

/* Content Layout Types */
/* Legacy classes for backward compatibility - now use unified-grid */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}

.section-content div.data-table {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* .card-grid - Now defined in base/layout.css (single source of truth) */

.activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Grid Responsive Variants - Legacy classes */
.grid-2 { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: var(--space-4);
}
.grid-3 { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: var(--space-4);
}
.grid-4 { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: var(--space-4);
}

/* ===================================
   LOADING & EMPTY STATES
   NOTE: Use molecules/LoadingState and molecules/EmptyState for new code
   These legacy classes kept for backwards compatibility only
   =================================== */

/* .loading-state - REMOVED: Use molecules/LoadingState/LoadingState.css */
/* .empty-state - REMOVED: Use molecules/EmptyState/EmptyState.css */

.empty-module-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-6);
}

.empty-module-state h2 {
    margin: 0 0 var(--space-4) 0;
    color: var(--text-secondary);
    font-size: var(--text-xl);
    font-weight: 600;
}

.empty-module-state p {
    margin: 0 0 var(--space-6) 0;
    font-size: var(--text-base);
    color: var(--text-muted);
    max-width: 400px;
    line-height: 1.5;
}

.empty-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
}