/* List header */
.split-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    .split-header > h3,
    .simple-header > h3 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--muted-clr);
        letter-spacing: 0.2px;
    }


/* BASE LIST */
.base-list-component {
    display: grid;
    gap: 0.75rem;
}

.base-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    box-shadow: var(--elev-rest);
    overflow: hidden;
}

.base-list__header, .base-list__row {
    display: grid;
    align-items: center;
    padding-block: 0.75rem;
    padding-inline: 1rem;
    background-color: var(--list-bg);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* #region Header */
.base-list__header {
    font-size: clamp(0.6rem, calc(0.6rem + 1dvw), 1rem);
    border-bottom: var(--border-thin);
    background-color: var(--c-surface-elevated);
}

/* Night módban a fejléc a hover-felület (az elevated túl közel van a sor-háttérhez night-ban). */
:root[data-theme="night"] .base-list__header {
    background-color: var(--c-surface-hover);
}
/* #endregion */

/* #region Content */
.base-list__content {
    display: grid;
    gap: 0;
}

.base-list__content > * + * {
    border-top: var(--border-thin);
}

.base-list__row {
    font-size: clamp(0.75rem, calc(0.75rem + 1dvw), 1rem);
}

    .base-list__row:not(.empty-row):hover {
        background-color: color-mix(in srgb, var(--primary-clr) 8%, var(--list-bg));
    }

    /* Letiltott sor (IsDisabled): a tartalom halvány + szürke, de a .center cella (enable-toggle)
       és a .base-list__actions (Edit/Delete) élesek maradnak → a sor kezelhető. A dashboard
       .stale-card mintáját követi. */
    .base-list__row.is-disabled .base-list_cell:not(.center) {
        opacity: 0.5;
        filter: grayscale(0.7);
    }

    .base-list__row.empty-row {
        text-align: center;
        color: var(--muted-clr);
        font-style: italic;
        padding-block: 1.25rem;
    }

        /* A globális `span { color: var(--text-clr) }` (app.css) különben felülírná az öröklött
           muted színt — ezért a span-t közvetlenül célozzuk. */
        .base-list__row.empty-row span {
            color: var(--muted-clr);
        }

.base-list__details {
    display: none;
    padding: 0.75rem 1rem;
    background-color: var(--background-clr);
    grid-column: 1 / -1;
}

    .base-list__details .card {
        overflow: hidden;
    }

.base-list_cell.center{
    justify-self: center;
}

.base-list__cell-header {
    display: none;
}

.base-list--conditions .base-list__cell-content {
    display: grid;
    gap: 0.5rem;
}

.base-list--conditions .name-cell {
    grid-column: 1 / -1;
    margin-bottom: 0.75rem;
}

/* A span-t is célozzuk: a globális `span { color: var(--text-clr) }` (app.css) különben
   felülírná az öröklött muted színt a név-cellában. */
.base-list--conditions .name-cell .base-list__cell-content,
.base-list--conditions .name-cell .base-list__cell-content span {
    font-style: italic;
    color: var(--muted-clr);
}

/* Units lista: aránytartó oszlopok — Név / Egység / Tizedesjegyek / Műveletek. A generikus
   BaseListComponent inline repeat(N,1fr)-t adna (nem felülírható), ezért a UnitsComponent kézzel
   írt .base-list--units markupot használ, és az oszlopokat itt adjuk (ld. AlarmsComponent minta).
   Mobilon a globális @media reflow (1fr 1fr / 1fr) marad érvényben. */
.base-list--units .base-list__header,
.base-list--units .base-list__row:not(.empty-row) {
    grid-template-columns: 2fr 1fr 2fr 1fr;
}

/* #endregion */

/* #region Actions */
.base-list__actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.base-list .expand-toggle {
    width: 20px;
    height: auto;
    transition: transform 0.2s ease;
    cursor: pointer;
}

    .base-list .expand-toggle:focus-visible {
        outline: 2px solid var(--primary-clr);
        outline-offset: 2px;
        border-radius: inherit;
    }
/* #endregion */

.base-list-skeleton__header,
.base-list-skeleton__body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 0.75rem;
    padding-inline: 1rem;
    background: var(--list-bg);
}

.base-list-skeleton__header {
    border-top-left-radius: var(--list-border-radius);
    border-top-right-radius: var(--list-border-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.base-list-skeleton__body {
    border-radius: 0;
}

.base-list-skeleton__body:last-of-type {
    border-bottom-left-radius: var(--list-border-radius);
    border-bottom-right-radius: var(--list-border-radius);
}


@media (max-width: 600px) {
    /* Mobilon a slab-keretet feloldjuk, és a sorok külön dashboard-csempeként jelennek meg
       (keret + árnyék), a meglévő 2-oszlopos reflow-val. */
    .base-list {
        border: none;
        box-shadow: none;
        overflow: visible;
        border-radius: 0;
        background: transparent;
        gap: 0.5rem;
    }

    .base-list__content {
        gap: 0.5rem;
    }

    .base-list__content > * + * {
        border-top: none;
    }

    .base-list__row:not(.empty-row),
    .base-list__row.empty-row {
        border: var(--border-thin);
        box-shadow: var(--elev-rest);
    }

    .base-list__header {
        display: none;
    }

    .base-list__row:not(.empty-row) {
        grid-template-columns: 1fr 1fr !important;
        row-gap: 0.75rem;
        align-items: start;
        border-radius: var(--list-border-radius);
    }

    /* CSAK az alarm/automation (feltétel-listás) kártyáknál kerül minden cella külön sorba
       (egy oszlop); a többi lista marad 2-oszlopos. */
    .base-list--conditions .base-list__row:not(.empty-row) {
        grid-template-columns: 1fr !important;
    }

    .base-list__row.empty-row {
        border-radius: var(--list-border-radius);
    }

    .base-list_cell.center {
        justify-self: start;
    }

    .base-list__cell-header {
        display: block;
        font-weight: bold;
        font-size: 0.85rem;
        color: var(--muted-clr);
    }

    .base-list__actions {
        grid-column: 1 / -1;
    }

    .base-list--conditions .name-cell {
        margin-bottom: 0;
    }

/* Dark-téma felületi felülírások (korábban app.css) — az emelt részlet-sor és a skeleton
   háttere a sötét felület-tokenekhez igazodik. */
:root[data-theme="dark"] .base-list__details {
    background-color: var(--c-surface-elevated);
}

:root[data-theme="dark"] .base-list-skeleton__header,
:root[data-theme="dark"] .base-list-skeleton__body {
    background: var(--list-bg);
}

    .base-list--conditions .name-cell .base-list__cell-content,
    .base-list--conditions .name-cell .base-list__cell-content span {
        font-style: inherit;
        color: inherit;
    }

    .base-list--conditions .base-list__cell-content {
        gap: 0.25rem;
    }

    .base-list--conditions .conditions-cell {
        grid-column: 1 / -1;
    }
}

@media (max-width: 400px) {
    .base-list__row:not(.empty-row) {
        grid-template-columns: 1fr !important;
    }
}