.tab-btn {
    color: #9ca3af;
}

.tab-btn.active {
    background-color: #059669;
    color: #ffffff;
}

.tab-btn:hover:not(.active) {
    color: #34d399;
}

.movie-tag {
    display: inline-block;
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 9999px;
    padding: 2px 10px;
    font-size: 0.75rem;
    margin: 2px;
}

.cover-aspect {
    position: relative;
    width: 100%;
    padding-top: 88.89%; /* matches 288x256 cover image ratio */
    background-color: #111827;
}

.cover-aspect img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sticky/fixed search wrapper used by JS when user scrolls past the search area.
   --header-height is set dynamically so it stays right below the header. */
.issues-search-wrapper.fixed-search {
    position: fixed;
    top: var(--header-height, 64px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 72rem; /* roughly matches the page container */
    z-index: 60;
    background-color: rgba(15, 23, 42, 0.6); /* bg-gray-950/60 equivalent */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: box-shadow 150ms ease, transform 150ms ease;
    box-shadow: 0 6px 18px rgba(2,6,23,0.6);
}

/* When pinned, make inner inputs full width on small screens */
.issues-search-wrapper.fixed-search input#issues-filter-input {
    width: 100%;
}