/* ===================================
   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 */
}

/* ===================================
   OPEN ROW CAP -- the one-panel rule, one level down
   ===================================

   An open row inside a panel body is CAPPED at 75% of that body and scrolls its own
   content. It is never STRETCHED to 75%: a three-member team stays three rows tall.
   The cap only bites on content long enough to need it.

   Why cap rather than fill: a row that claims all the leftover space wipes the rest of
   the list off screen, and on a long list the collapsed rows eat the panel first and
   crush the open one to a sliver. Capping leaves roughly three and a half rows showing,
   so the list still reads as a list, and the panel keeps its OWN scroll -- you reach the
   other rows by scrolling past the open one, without collapsing it, and two rows can be
   open at once.

   The 240px floor is for short viewports, where 75% of a small panel is a peephole: a
   row you cannot work in is worse than a list you cannot fully see.

   cqh, not vh: the cap must track the PANEL BODY, not the viewport (ui-patterns.md
   forbids pinning a scroll child to a vh fraction, TLP-913). The query container is
   declared in Panel.css, on PROMOTED panel bodies only -- see the warning there. Where
   no container is declared the cap simply does not apply, which is right: a
   content-sized panel has no bounded height to cap against.

   Scoped to .section-content deliberately: this is about rows in a panel. Rows inside a
   modal keep the old overflow-visible behaviour, because components that escape their
   row (the booking form's date picker) live there.

   Replaces a .scrollable-panel variant that filled rather than capped and which nothing
   ever applied. */
.section-content .expandable-panel.expanded {
    max-height: max(75cqh, 240px);
    display: flex;
    flex-direction: column;
    overflow: hidden;  /* the row clips; its content is what scrolls */
}

/* ONE ROW: the cap lifts to the whole panel.

   The 25% the cap holds back is paying for exactly one thing -- keeping the next row
   in view so the list still reads as a list. With a single row there is no next row,
   so the reserve buys nothing: it just gives the operator a smaller window to scroll
   and leaves a dead strip of panel underneath. Teams with only Everyone is the case
   that showed it.

   This is the one-panel rule (Panel.css) one level down, and deliberately the same
   shape: one panel in a tab fills the tab, one row in a panel fills the panel, two or
   more of either and nobody is special. Note it raises the CAP and does not stretch --
   a three-member team stays three rows tall. Filling a short row would buy nothing and
   would sharpen the panel-inside-a-panel nesting on exactly the screen that prompted this.

   Two selectors because a row may sit directly in the panel body or inside a list
   wrapper (.expandable-panel-list, .team-list, .detail-rows). No floor: 100% of the
   panel body is already everything there is to give. */
.section-content:not(:has(> .expandable-panel ~ .expandable-panel)) > .expandable-panel.expanded,
.section-content :not(:has(> .expandable-panel ~ .expandable-panel)) > .expandable-panel.expanded {
    max-height: 100cqh;
}

.section-content .expandable-panel.expanded > .expandable-panel-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Reaching the end of the members list must not hand the gesture to the list
       underneath -- the standard nested-scroll complaint. */
    overscroll-behavior: contain;
}

/* ===================================
   LIST CONTEXT - Detail treatment
   The .detail-rows expanded content is a FLAT detail (Complaints TLP-581,
   Lost & Found TLP-596): no grey inset, no extra padding, no top divider.
   It inherits the base .expandable-panel-content (padding 0) plus the
   expanded-state margin-top, so the detail sits flush with the header on
   the row's own surface. (The old grey/padded/bordered canvas suited the
   earlier boxed-Panel content, which these modules no longer use, so the
   rule is intentionally gone rather than zeroed.)
   =================================== */

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

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