/* ===================================
   EXPANDABLE PANEL ORGANISM
   ===================================
   
   Panel with expand/collapse functionality.
   Part of the PANEL FAMILY - styled to match Panel organism.
   Uses ExpandableHeader molecule for clickable header.
   
   ANTI-FRAGMENTATION:
   - This is Panel + expand capability, NOT a separate component family
   - Visual styling matches Panel exactly
   - Only behavioral difference: content can collapse
   
   SPACING CONTRACT:
   - Panel owns internal padding
   - Content area has NO padding (parent owns it)
   - Parent container owns gap between panels (no margin)
*/

/* Panel container - matches .dashboard-section from Panel */
.expandable-panel {
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-xl);  /* 12px - matches Panel */
    overflow: visible;  /* Allow dropdowns to extend beyond panel */
    padding: var(--space-2) var(--space-3);  /* 8px top/bottom, 12px sides */
    margin: 0;  /* CONTRACT: Parent gap handles spacing */
}

/* Content area - NO padding, parent owns it */
.expandable-panel-content {
    padding: 0;
    transition: max-height var(--duration-300) var(--easing-out),
                opacity var(--duration-300) var(--easing-out);
}

/* Expanded state - gap between header and content, allow overflow for dropdowns */
.expandable-panel.expanded .expandable-panel-content {
    margin-top: var(--space-3);
    overflow: visible;  /* Allow dropdowns inside to extend beyond content bounds */
}

/* Collapsed state */
.expandable-panel.collapsed .expandable-panel-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
}

/* ===================================
   CONTENT LAYOUT VARIATIONS
   =================================== */

/* Cards should not grow */
.expandable-panel-content .metric-card,
.expandable-panel-content .logo-card {
    flex: 0 0 auto;
}

/* Data tables need block layout */
.expandable-panel-content:has(.data-table) {
    display: block;
}

.expandable-panel-content .data-table {
    width: 100%;
}

/* Empty state styling */
.expandable-panel-content .empty-state {
    width: 100%;
    text-align: center;
    padding: var(--space-6) var(--space-4);
}

.expandable-panel-content .empty-state h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
}

.expandable-panel-content .empty-state p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}

/* ===================================
   ACCORDION LIST - Standard container for stacked expandable panels
   =================================== */

.expandable-panel-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);  /* 8px - tight accordion spacing between sibling panels */
}

/* ===================================
   SCROLLABLE VARIANT
   =================================== */

.expandable-panel.scrollable-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.expandable-panel.scrollable-panel .expandable-panel-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ===================================
   LIST CONTEXT - Detail treatment
   When panels are used as accordion rows inside .expandable-panel-list,
   expanded content gets the same visual treatment as ExpandableList items:
   grey background, padding, and border-top separator.
   =================================== */

.expandable-panel-list.detail-rows > .expandable-panel.expanded > .expandable-panel-content {
    background: var(--bg-layer-2);
    padding: var(--space-3) var(--space-4);
    border-top: var(--border-width-1) solid var(--border-subtle);
}

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 768px) {
    .expandable-panel {
        padding: var(--space-2);
    }
    
    .expandable-panel.expanded .expandable-panel-content {
        margin-top: var(--space-2);
    }
}