/* 
    Contains rules shared by tab-based lists (such as the selected bookingentities of an activity or an object) and overview-based lists (such as the activities overview)
*/

:root {
    --listitem-row-gridcolumns: repeat(auto-fit, minmax(200px, 1fr));
}


.list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    align-items: flex-start;
}

.list.use-cards:not(.grouped-list) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-width, var(--default-card-width)), 1fr));
    grid-auto-rows: max-content;
    gap: 20px;
    padding: 10px;
}

.listitem {
    width: 100%;
    height: 34px; /* ???? */
    display: grid;
    grid-template-columns: var(--listitem-row-gridcolumns);
    grid-template-rows: 100%;
    align-content: center;
    align-items: center;
    font-size: 14px;
    position: relative;
}

.listitem.card {
    display: grid;
    grid-template-columns: 1fr 60px;
    grid-auto-rows: 30px;
    grid-template-rows: unset;
}

.listitem.listheader {
    font-weight: bold;
    height: 50px;
    position: sticky;
    top: 0;
    background-color: var(--list-header-backgroundcolor);
    z-index: 100;
}

.list.use-cards .listitem {
    height: 100%;
}

.list.use-cards .listitem.listheader {
    display: none;
}

/* grouped lists */
.listgroup-container {
    width: 100%;
    border-style: solid;
    border-color: var(--item-border-color);
    border-width: 0 0 1px 0;
    padding-bottom: 20px;
}

.list.use-cards .listgroup-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-width, var(--default-card-width)), 1fr));
    grid-auto-rows: max-content;
    gap: 20px;
}

.listitem.listgroup {
    font-weight: bold;
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    position: sticky;
    top: 0;
    background-color: var(--list-header-backgroundcolor);
    z-index: 100;
}

.list.use-cards .listitem.listgroup {
    grid-template-columns: 100%;
    grid-template-rows: 40px;
}

/* listitem cells */
.listitem-cell {
    width: 100%;
}

.listitem.card .listitem-cell {
    grid-column: auto / span 2;
    grid-row: auto / span 1;
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 5px;
}

.listitem.card .listitem-cell:first-child {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.listitem.card .listitem-cell.item-actions {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.listitem-cell svg {
    width: 16px;
    height: 16px;
}

.listitem-cell label.cell-label {
    font-weight: bold;
}

.listitem:not(.card) label.cell-label {
    display: none;
}

/* item actions (the toggle-button and the popover) */
.item-actions {
    /*grid-area: actions;*/
    grid-column: -2 / -1;
}

.list .item-actions {
    grid-area: unset;
    grid-column: unset;
}

.item-actions-toggle {
    display: none;
}

@media (min-width: 1024px) {
    .overview:not(.use-cards) .item-actions-toggle,
    .list:not(.use-cards) .item-actions-toggle {
        width: 30px;
        height: 30px;
        background-color: transparent;
        padding: 0;
        border: 0;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-content: center;
        align-items: center;
        cursor: pointer;
    }
}

.item-actions-toggle svg {
    width: var(--itemactions-icon-size, 16px);
    height: var(--itemactions-icon-size, 16px);
}

.item-actions-popover {
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    align-items: center;
}

@media (min-width: 1024px) {
    .overview:not(.use-cards) .item-actions-popover,
    .list:not(.use-cards) .item-actions-popover {
        position: absolute;
        background-color: var(--list-backgroundcolor);
        border: 1px solid var(--item-border-color);
        border-radius: var(--popover-border-radius);
        top: 80%;
        z-index: 100;
        right: 20px;
        display: grid;
        gap: 10px;
        padding: 10px;
    }
}

.item-actions-popover > button {
    background-color: transparent;
    border: 0;
    /*width: 100%;
    padding: 0 5px;*/
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .overview:not(.use-cards) .item-actions-popover > button,
    .list:not(.use-cards) .item-actions-popover > button {
        width: 100%;
        padding: 0 5px;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 30px;
        justify-content: left;
        justify-items: left;
    }
}

.item-actions-popover > button span {
    display: none;
}

@media (min-width: 1024px) {
    .overview:not(.use-cards) .item-actions-popover > button  > span,
    .list:not(.use-cards) .item-actions-popover > button > span {
        display: block;
    }

    .overview:not(.use-cards) .item-actions-popover > button > svg,
    .list:not(.use-cards) .item-actions-popover > button > svg {
        display: none;
    }
}

.item-actions-popover > button:hover {
    font-weight: bold;
}

@media (min-width: 1024px) {
    .overview:not(.use-cards) .item-actions-popover > button::after {
        content: attr(data-buttontext);
        content: attr(data-buttontext) / "";
        height: 0;
        visibility: hidden;
        overflow: hidden;
        user-select: none;
        pointer-events: none;
        font-weight: bold;
    }
}

/* open periods */