/* ==========================================================================
   Group list
   Rows grouped under collapsible headers, on a CSS subgrid.
   Used by the input, feed, device and sync lists. Column widths are set per page
   on the .group-list grid. Classes are listed in docs/developer/design/css-guide.md.
   ========================================================================== */

/* ── 1. Outer grid container ─────────────────────────────────────── */
.group-list {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    gap: 0;
}

/* ── 2. Per-group subgrid wrapper ────────────────────────────────── */
.group-list-group {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
}

/* ── 3. Group header row ─────────────────────────────────────────── */
.group-list-header {
    box-sizing: content-box;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    min-height: 41px;
    cursor: pointer;
    position: relative;
    padding: 0;
    gap: 0;
    background: var(--ec-header-bg);
    user-select: none;
    border-bottom: 1px solid var(--bs-body-bg);
    transition: background-color 0.15s ease-in-out;
}
.group-list-header:hover {
    background: var(--ec-header-hover-bg);
}

/* Header node/tag name */
.group-list-header .group-list-name {
    font-weight: bold;
    font-size: 13px;
    color: var(--bs-body-color);
}

/* ── 4. Collapsible rows wrapper (accordion outer) ───────────────── */
.group-list-rows {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.35s ease;
}
.group-list-rows.is-expanded { grid-template-rows: 1fr; }

/* ── 5. Inner wrapper — required for grid-template-rows animation ── */
.group-list-rows-inner {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    min-height: 0;
}

/* ── 6. Individual data row ──────────────────────────────────────── */
.group-list-row {
    box-sizing: content-box;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    min-height: 41px;
    cursor: pointer;
    position: relative;
    border-bottom: 1px solid var(--bs-body-bg);
    background: var(--ec-list-row-bg);
    color: var(--bs-body-color);
    transition: background-color 0.1s ease;
}
.group-list-row:hover { background-color: var(--ec-row-hover-bg); }

/* Left accent strip — scales in on hover */
.group-list-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 3px; height: 100%;
    background-color: var(--bs-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease-out;
}
.group-list-row:hover::before { transform: scaleX(1); }

/* Selected row */
.group-list-row.selected         { background-color: var(--ec-list-selected-bg); }
.group-list-row.selected::before { transform: scaleX(1); }
.group-list-row.selected:hover   { background-color: var(--ec-list-selected-hover-bg); }

/* ── 7. Right-side status colour stripe ──────────────────────────── */
.group-list-header::after,
.group-list-row::after {
    content: '';
    position: absolute;
    right: 0; top: 0;
    width: 4px; height: 100%;
    background-color: var(--status-color, var(--ec-list-status));
}

/* ── 8. Cell ─────────────────────────────────────────────────────── */
.group-list-cell {
    padding: 6px 10px;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}

/* ── 8b. Process list cell ───────────────────────────────────────
   Process badges wrap, so one long process list does not widen the
   column for every row. */
.group-list-cell[data-col="process"] {
    white-space: normal;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ── 9. Chevron indicator in header select cell ─────────────────── */
.group-list-header [data-col="select"] {
    display: flex;
    align-items: center;
    justify-content: center;
}
.group-list-chevron {
    box-sizing: content-box;
    display: block;
    width: 6px; height: 6px;
    border-right: 2px solid var(--ec-text-muted);
    border-top:   2px solid var(--ec-text-muted);
    transform: rotate(45deg);
    transition: transform 0.35s ease;
    flex-shrink: 0;
}
/* Rotate chevron when node is expanded (header does NOT have .collapsed) */
.group-list-header:not(.collapsed) .group-list-chevron {
    transform: rotate(135deg);
}

/* ── 10. Sticky toolbar ──────────────────────────────────────────────
   Buttons on the left, filter or actions pushed right with ms-auto.
   An empty list-toolbar-sentinel goes above it. list_toolbar() in
   Theme/js/emoncms.js sets is-sticky once the sentinel scrolls behind
   the top menu, and keeps --list-top at the menu height. */
.list-toolbar-sentinel { height: 0; }
.list-toolbar {
    position: sticky;
    top: var(--list-top, 46px);
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    margin-bottom: 10px;
    transition: top 0.3s ease-out;
}
/* Bar in the top menu colour, full width behind the toolbar */
.list-toolbar.is-sticky::before {
    content: '';
    position: fixed;
    top: var(--list-top, 46px);
    left: 0;
    width: 100vw;
    height: 44px;
    background: var(--bg-menu-top-active);
    z-index: -1;
    transition: top 0.3s ease-out;
}