/* V4 list-row and status badge structure for hlq event list */

#tab-hlq .hlq-section-title {
    --font-heading: 'Noto Serif SC', serif;
    font-family: var(--font-heading);
}

#tab-hlq .hlq-filters-panel {
    padding: 10px 20px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-base);
}

#tab-hlq .filter-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#tab-hlq .filter-group + .filter-group {
    margin-top: 8px;
}

#tab-hlq .filter-group-label {
    font-size: var(--fs-xs);
    color: var(--ink-3);
    font-weight: 600;
    display: block;
    text-align: left;
    padding: 4px 0 5px;
    margin-bottom: 7px;
}

#tab-hlq .hlq-city-filter-wrapper {
    margin-bottom: 0;
    padding: 0;
}

#tab-hlq .hlq-status-filter-shell {
    position: relative;
    overflow: hidden;
}

#tab-hlq #status-filter-container {
    padding-right: 44px;
}

#tab-hlq .hlq-status-filter-fade {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-standard);
    background: linear-gradient(to right, rgba(245, 242, 237, 0), var(--bg-base));
}

#tab-hlq .hlq-status-filter-shell.is-overflowing:not(.is-at-end) .hlq-status-filter-fade {
    opacity: 1;
}

#tab-hlq .hlq-list-heading {
    padding: 10px 20px 8px;
}

#tab-hlq .hlq-list-title {
    font-size: var(--fs-md);
    color: var(--ink-2);
    white-space: nowrap;
}

#tab-hlq #hlq-list-container {
    padding: 0 0 16px;
}

#hlq-list-container .event-list-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: flex-start;
    background: var(--bg-base);
    margin: 8px 12px 4px;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#hlq-list-container .list-row-a {
    display: flex;
    align-items: stretch;
    min-height: 60px;
    background: var(--bg-card);
    border: none;
    border-radius: 0;
    overflow: visible;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-standard);
}

#hlq-list-container .list-row-a:hover {
    background: rgba(0, 0, 0, 0.025);
}

#hlq-list-container .list-row-a.row-hot {
    background: rgba(184, 65, 52, 0.03);
}

#hlq-list-container .list-row-a.row-hot:hover {
    background: rgba(184, 65, 52, 0.06);
}

#hlq-list-container .list-bar {
    width: 4px;
    flex: 0 0 4px;
    -webkit-mask-image: linear-gradient(180deg, black 50%, transparent);
    mask-image: linear-gradient(180deg, black 50%, transparent);
}

#hlq-list-container .list-bar-new {
    background: var(--s-new-fg);
}

#hlq-list-container .list-bar-pending {
    background: var(--s-pending-fg);
}

#hlq-list-container .list-bar-restock {
    background: var(--s-restock-fg);
}

#hlq-list-container .list-bar-sold {
    background: var(--s-sold-fg);
}

#hlq-list-container .list-bar-ended {
    background: var(--s-ended-fg);
}

#hlq-list-container .row-main {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

#hlq-list-container .row-title {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--ink-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#hlq-list-container .row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: var(--fs-sm);
    color: var(--ink-4);
}

#hlq-list-container .row-meta-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#hlq-list-container .row-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding: 0 16px;
    min-width: 110px;
}

#hlq-list-container .row-stock {
    font-size: var(--fs-md);
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
    color: var(--ink-2);
}

#hlq-list-container .stock-healthy { color: var(--s-new-fg); }
#hlq-list-container .stock-warning { color: var(--s-restock-fg); }
#hlq-list-container .stock-critical { color: var(--s-sold-fg); }
#hlq-list-container .stock-pending { color: var(--s-pending-fg); }

#hlq-list-container .row-stock-bar {
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: var(--ink-5);
    overflow: hidden;
}

#hlq-list-container .row-stock-bar.bar-pending {
    background: color-mix(in srgb, var(--ink-5) 50%, transparent);
}

#hlq-list-container .row-stock-bar-fill {
    height: 100%;
    border-radius: 1px;
    transition: width 0.3s ease;
}

#hlq-list-container .fill-healthy { background: var(--s-new-fg); }
#hlq-list-container .fill-warning { background: var(--s-restock-fg); }
#hlq-list-container .fill-critical { background: var(--s-sold-fg); }

#hlq-list-container .row-right-meta {
    font-size: var(--fs-xs);
    color: var(--ink-4);
    white-space: nowrap;
}

#hlq-list-container .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    font-size: var(--fs-sm);
    line-height: 1.4;
    font-weight: 500;
    white-space: nowrap;
}

#hlq-list-container .badge-new {
    color: var(--s-new-fg);
    background: var(--s-new-bg);
}

#hlq-list-container .badge-pending {
    color: var(--s-pending-fg);
    background: var(--s-pending-bg);
}

#hlq-list-container .badge-restock,
#hlq-list-container .badge-back {
    color: var(--s-restock-fg);
    background: var(--s-restock-bg);
}

#hlq-list-container .badge-sold {
    color: var(--s-sold-fg);
    background: var(--s-sold-bg);
}

#hlq-list-container .badge-ended {
    color: var(--s-ended-fg);
    background: var(--s-ended-bg);
}


@keyframes bar-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

#hlq-list-container .list-bar.bar-urgent {
    animation: bar-pulse 2s ease-in-out infinite;
}

#hlq-list-container .list-group-break {
    height: 8px;
    background: transparent;
}

@media (max-width: 768px) {
    #tab-hlq .hlq-filters-panel {
        padding: 8px 12px 10px;
    }

    #tab-hlq .hlq-list-heading {
        padding: 10px 12px 6px;
    }

    #tab-hlq #hlq-list-container {
        padding: 0 0 14px;
    }

    #hlq-list-container .row-right {
        min-width: 100px;
        padding: 0 12px;
    }

    #tab-hlq #status-filter-container {
        padding-right: 36px;
    }

    #tab-hlq .hlq-status-filter-fade {
        width: 36px;
    }
}

#hlq-list-container {
    --s-new-bg:     #EEF5F0;
    --s-pending-bg: #FAF0D6;
    --s-restock-bg: #F5F0D5;
}

#tab-hlq .filter-chip.active {
    background: var(--green-primary);
    color: #FFFFFF;
    border-color: var(--green-primary);
    font-weight: 600;
}