/* ===================================
   SECTION PANEL COMPONENT
   =================================== 
   
   Reusable collapsible section panel (matches Services category pattern).
   Used in: Regional Config, and other data modules.
   
   NOTE: This uses the same classes as Services (.service-category-section, etc.)
   for consistency across the platform.
*/

/* Panel container - matches Services pattern exactly */
.service-category-section {
    margin-bottom: var(--space-md); /* Standard 16px spacing between panels */
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    background: var(--bg-white);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: all 0.3s var(--ease-out);
}

.service-category-section:last-child {
    margin-bottom: 0; /* No margin on last panel */
}

/* Single-line collapsible header */
.category-header-single-line {
    height: 64px;
    padding: 0 var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
}

/* Remove underline when panel is expanded */
.service-category-section.expanded .category-header-single-line {
    border-bottom: none;
}

.category-header-single-line:hover {
    background: var(--bg-secondary);
}

/* Left side of header (icon, title, stats) */
.category-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    min-width: 0; /* Allow flex item to shrink */
    flex-wrap: nowrap; /* Never wrap children to new line */
}

.category-header-left .category-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1; /* Allow title to shrink if needed */
}

.category-header-left .category-stats,
.category-header-left .category-separator {
    flex-shrink: 0; /* Keep stats and separator visible */
    white-space: nowrap;
}

/* Right side of header (add button, chevron) */
.category-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Category icon */
.category-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-icon svg {
    width: 20px;
    height: 20px;
}

/* Category name */
.category-name {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1;  /* Match inline elements */
    display: inline-block;  /* Align with spans */
}

/* Separator between title and stats */
.category-separator {
    color: var(--text-muted);
    font-weight: 300;
    user-select: none;
    line-height: 1;  /* Match other elements */
}

/* Stats text */
.category-stats {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1;  /* Match other elements */
}

/* Chevron icon with rotation */
.category-chevron {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    transition: transform 0.3s var(--ease-out);
}

.service-category-section.expanded .category-chevron {
    transform: rotate(180deg);
}

/* Collapsible content area - flexible container */
.category-services-grid {
    opacity: 1;
    transition: max-height 0.3s var(--ease-out), opacity 0.3s var(--ease-out), padding 0.3s var(--ease-out);
}

/* DEFAULT: Flexbox layout for logo cards (left-aligned, consistent spacing) */
.category-services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: flex-start;
    padding: var(--space-lg);
}

/* Logo cards should not grow or shrink */
.category-services-grid .metric-card {
    flex: 0 0 auto;
}

/* When containing data-table, override to block layout with padding */
.category-services-grid .data-table {
    display: block;
}

.category-services-grid:has(.data-table) {
    display: block;
    padding: var(--space-lg);
    grid-template-columns: initial;
}

/* Add spacing between data rows in panels */
.category-services-grid .data-table .data-row.interactive {
    margin-bottom: var(--space-sm);
}

.category-services-grid .data-table .data-row.interactive:last-child {
    margin-bottom: 0;
}

.service-category-section.collapsed .category-services-grid {
    max-height: 0;
    opacity: 0;
    padding: 0 var(--space-lg);
    overflow: hidden;
}

.service-category-section.collapsed .category-header-single-line {
    border-bottom: none;
}

/* Empty state inside panels - uses base .empty-state from components.css */
.category-services-grid .empty-state h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 var(--space-xs) 0;
}

.category-services-grid .empty-state p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .category-header-single-line {
        height: auto;
        min-height: 64px;
        padding: var(--space-md) var(--space-lg);
        flex-wrap: nowrap; /* Keep on one line */
    }

    .category-header-left {
        flex: 1;
        min-width: 0; /* Allow shrinking */
    }

    .category-header-right {
        flex-shrink: 0; /* Don't shrink actions */
        justify-content: flex-end;
    }

    .category-services-grid {
        padding: var(--space-md);
    }

    .service-category-section.collapsed .category-services-grid {
        padding: 0 var(--space-md);
    }
}