/* ── Posters ── */
.poster-xs { width: 44px; height: 64px; object-fit: cover; }
.poster-sm { width: 60px; height: 88px; object-fit: cover; flex-shrink: 0; }
.poster-ph { background: #495057; }

/* ── Film cards ── */
.film-card { border: none; border-left: 3px solid transparent; transition: border-color .15s; }
.film-card:hover { border-left-color: #ffc107; }
.film-title { color: #212529 !important; }
.film-title:hover { color: #ffc107 !important; }
.title-hover:hover { color: #ffc107 !important; }

/* ── Genre tags ── */
.genre-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.genre-tags .badge { font-size: .68rem; }

/* ── Stars ── */
.stars { font-size: .85rem; line-height: 1; }

/* ── Tiny buttons ── */
.btn-xs { padding: .15rem .35rem; font-size: .75rem; line-height: 1.4; }

/* ── Rating slider ── */
input[type=range] { accent-color: #ffc107; }

/* ── Search results dropdown ── */
#searchResults .search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 6px;
    transition: background .1s;
}
#searchResults .search-result-item:hover { background: #fff3cd; }
#searchResults .search-result-item img { width: 36px; height: 52px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
#searchResults .search-result-item .no-poster {
    width: 36px; height: 52px; background: #6c757d; border-radius: 3px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: .7rem;
}

/* ── Import table status ── */
#importTable td { vertical-align: middle; }

/* ── Navbar touch targets ── */
.nav-link { padding: .6rem .75rem; }
.navbar-brand { font-size: 1.1rem; }

/* ── Mobile spacing ── */
@media (max-width: 767px) {
    main.py-3 { padding-top: .75rem !important; padding-bottom: .75rem !important; }
    .table-responsive { border-radius: 0; }

    /* Slightly bigger touch targets on mobile */
    .btn { min-height: 38px; }
    .form-select, .form-control { font-size: 1rem; }
}

/* ── Desktop table ── */
@media (min-width: 768px) {
    .poster-xs { width: 36px; height: 52px; }
}

/* ── Browse grid ── */
.browse-card { transition: transform .15s, box-shadow .15s; }
.browse-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.15) !important; }
.browse-poster {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
    background: #343a40;
}

/* ── Sticky filter card ── */
@media (min-width: 768px) {
    .sticky-filters { position: sticky; top: 60px; z-index: 10; }
}