/*

<ul class="listview">
    <li class="list-item active">
        <img class="list-icon" src="..." alt="">
        <div class="list-body">
            <span class="list-title">Title</span>
            <span class="list-desc">Lorem ipsum dolor smet</span>
        </div>
        <span class="list-meta">18 Oct 2026</span>
        <span class="list-actions">
            <button class="blue_sw">Manage</button>
            <button class="red_sw">Delete</button>
        </span>
    </li>
</ul>

- Row          : .list-item on <li> (or on an <a> inside the <li> to make the whole row a link)
- Optional     : .list-icon (img, square) or .list-thumb (img, keeps its ratio),
                 .list-desc, .list-meta, .list-actions
- Thumb width  : set --list-thumb on .listview (default 120px)
- Text dock    : add "dock-top" or "dock-middle" (default) to .listview,
                 or to one .list-item to override the list
- Selected row : add class "active" to .list-item
- Large icons  : add class "largeicon" to .listview (needs largeicon.css)

*/


.listview {
    --list-pad-y: 12px;
    --list-pad-x: 16px;
    --list-icon: 40px;
    --list-thumb: 120px;
    --list-text: var(--normal-inverse);
    --list-active: var(--mid-tone-color);
    --list-line: var(--line);
    --list-hover: #00000015;
    --list-ice: var(--ice-color);
    --list-fire: var(--fire-color);
    --list-gradient: linear-gradient(90deg, var(--list-ice) 0%, var(--list-fire) 100%);

    list-style: none;
    margin: 0;
    padding: 0;

    background: var(--sidenavbarbgcolor);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    /* ice -> fire strip on top */
    border-top: 3px solid;
    border-image: var(--list-gradient) 1;
}

html[data-theme="dark"] .listview {
    --list-hover: #ffffff10;
    --list-line: #5a5a5a;
    --list-ice: var(--primary-ice-color-300);
    --list-fire: var(--primary-fire-color-400);
}

.listview > li {
    border-bottom: 1px solid var(--list-line);
}

.listview > li:last-child {
    border-bottom: none;
}

/* Row */

.listview .list-item {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: var(--list-pad-y) var(--list-pad-x);

    color: var(--list-text);
    text-decoration: none;

    position: relative;
    transition: background-color 0.3s ease;
}

/* Text dock: top or middle (default) of the row, useful with tall thumbs */

.listview.dock-top .list-item,
.listview .list-item.dock-top {
    align-items: flex-start;
}

.listview.dock-middle .list-item,
.listview .list-item.dock-middle {
    align-items: center;
}

.listview .list-item:hover,
.listview .list-item.active {
    background-color: var(--list-hover);
}

.listview a.list-item {
    /* link rows keep the normal text weight, not the global link style */
    font-weight: inherit;
}

.listview a.list-item:focus-visible {
    outline: 2px solid var(--list-active);
    outline-offset: -2px;
}

/* Active row: green title and bar on the left */

.listview .list-item.active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--list-active);
}

/* Row content */

.listview .list-icon {
    flex: none;
    width: var(--list-icon);
    height: var(--list-icon);
    object-fit: cover;
}

.listview .list-thumb {
    flex: none;
    width: var(--list-thumb);
    max-width: 100%;
    height: auto;
}

.listview .list-body {
    /* wraps under a wide thumb when the row gets too narrow */
    flex: 1 1 160px;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Title */

.listview .list-title {
    align-self: flex-start;
    max-width: 100%;
    padding: 2px 0;

    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listview .list-item.active .list-title {
    color: var(--list-active);
}

.listview .list-desc {
    font-size: 0.9rem;
    line-height: 1.3;
    opacity: 0.8;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listview .list-meta {
    flex: none;
    font-size: 0.8rem;
    opacity: 0.75;
}

.listview .list-actions {
    flex: none;
    display: flex;
    margin: -4px 0;
}

.listview .list-actions button {
    padding: 4px 12px;
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .listview {
        --list-pad-x: 10px;
        --list-icon: 32px;
    }

    .listview .list-item {
        flex-wrap: wrap;
        gap: 10px;
    }

    .listview .list-meta {
        display: none;
    }

    .listview .list-actions {
        width: 100%;
        justify-content: flex-end;
        margin: 0;
    }
}