/* Desktop default bump for Today logos: +25% (approx 30px height) */
.today-card .provider-logos img,
.today-card .network-logos img,
.today-card .airing-on-logos img {
  height: 30px;
  max-height: 30px;
}

/* Hide "Filters" text on desktop (icon only) */
.filter-toggle-btn .filter-btn-text {
  display: none;
}

@media (max-width: 768px) {
    /* Sports tracker (/sports) – reserve space and right align track buttons */
    .list-group-item { position: relative; }
    .list-group-item .track-section { margin-left: 0 !important; justify-content: flex-end !important; flex-shrink: 0 !important; }
    .list-group-item .track-section .btn { width: auto !important; }
    /* Absolutely position the track button to the right and reserve padding on the name so they never overlap */
    .list-group-item .track-section { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; }
    .list-group-item > .d-flex > .d-flex.align-items-center { padding-right: 200px !important; min-width: 0 !important; }
    .list-group-item > .d-flex > .d-flex.align-items-center a { display: block !important; min-width: 0 !important; }

    /* Discover – fix button becoming invisible after click */
  .filter-toggle-btn,
  .filter-toggle-btn:active,
  .filter-toggle-btn:focus,
  .filter-toggle-btn:hover,
  .filter-toggle-btn.collapsed,
  .filter-toggle-btn.collapsed:active,
  .filter-toggle-btn.collapsed:focus,
  .filter-toggle-btn.collapsed:hover { 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #6c757d !important; /* Explicit gray color */
    background-color: transparent !important;
    border: 1px solid #6c757d !important; /* Explicit gray border */
    min-width: 44px !important;
    min-height: 44px !important;
    position: relative !important;
    z-index: 1000 !important;
  }
  .filter-toggle-btn i,
  .filter-toggle-btn .filter-btn-text,
  .filter-toggle-btn.collapsed i,
  .filter-toggle-btn.collapsed .filter-btn-text {
    opacity: 1 !important;
    visibility: visible !important;
    color: #6c757d !important; /* Explicit gray color for icon and text */
    display: inline-block !important;
  }
  .filter-toggle-btn .filter-btn-text { margin-left: 0.25rem !important; }
  
  /* Discover – ensure cards are full width and match other content */
  #resultsContainer { margin: 0 !important; padding: 0 !important; } /* Remove any container padding */
  #resultsContainer > .col-lg-6 { padding-left: 0 !important; padding-right: 0 !important; } /* Remove Bootstrap column padding */
  .show-card { 
    padding: 0.5rem !important; /* Reduce card padding */
    margin-left: 0 !important; 
    margin-right: 0 !important;
    width: 100% !important; /* Ensure full width */
  }
  .show-card .row .col-4 { 
    padding-right: 12px !important; /* Add spacing between image and text */
    padding-top: 0.75rem !important; /* Match the top padding of the text column */
  }
  /* Whats On Today: unify all logo heights on mobile */
  .today-card .provider-logos img,
  .today-card .network-logos img,
  .today-card .airing-on-logos img {
    height: 28px !important;
    max-height: 28px !important;
  }

  /* What's On Today — Shows */
  .today-card .channel-logos img {
    height: 28px !important;
    max-height: 28px !important;
  }

  /* What's On Today — Sports (shared include) */
  .today-card img[title][alt*="Logo"] {
    height: 28px !important;
    max-height: 28px !important;
  }

  /* What's On Today — Movies (streaming logos) */
  .today-card .card-body .mb-2.small img {
    height: 28px !important;
    max-height: 28px !important;
  }
/* ===== MOBILE RESPONSIVENESS FIXES ===== */
/* 
 * This file contains specific fixes for mobile responsiveness issues
 * identified through automated testing. All fixes preserve desktop experience.
 */

/* ===== TOUCH TARGET FIXES ===== */

/* Fix footer links touch targets - Critical Issue #1 */
footer .text-decoration-none,
footer a {
    min-height: 32px !important;
    padding: 2px 6px !important;
    display: inline-block !important;
    text-decoration: none !important;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    margin: 0 !important;
    line-height: 1.1 !important;
    vertical-align: top !important;
}

footer .text-decoration-none:hover,
footer a:hover {
    background-color: rgba(0, 0, 0, 0.05);
    text-decoration: none !important;
}

/* Reduce footer section spacing */
footer .row {
    margin-bottom: 0 !important;
}

footer .col-md-3,
footer .col-6 {
    padding-bottom: 1rem !important;
    margin-bottom: 0 !important;
}

footer h5 {
    margin-bottom: 0.5rem !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
}

/* Make footer links stack tightly */
footer ul,
footer div {
    line-height: 1.1 !important;
}

footer ul li,
footer div > a {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Compact footer on mobile */
@media (max-width: 768px) {
    footer {
        padding: 1.5rem 0 1rem 0 !important;
    }
    
    footer .text-decoration-none,
    footer a {
        padding: 1px 4px !important;
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.1 !important;
        min-height: 28px !important;
        display: inline-block !important;
    }
    
    footer h5 {
        font-size: 0.9rem !important;
        margin-bottom: 0.4rem !important;
        line-height: 1.2 !important;
    }
    
    footer .row {
        margin: 0 !important;
    }
    
    footer .col-6 {
        padding: 0 0.5rem 0.5rem 0.5rem !important;
    }
}

/* Fix "Sign up" and "Login" links touch targets */
.navbar a,
.nav-link,
.dropdown-item {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
}

/* Fix navbar toggler button for mobile */
.navbar-toggler {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px !important;
    border: 2px solid currentColor !important;
}

/* Fix breadcrumb styling - simple text without background */
.breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
    list-style: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

.breadcrumb-item {
    display: flex !important;
    align-items: center !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    float: left !important;
    padding-right: 0.5rem !important;
    color: #6c757d !important;
    content: var(--bs-breadcrumb-divider, "/") !important;
}

/* Mobile-friendly breadcrumb links */
@media (max-width: 768px) {
    .breadcrumb-item a {
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 6px 8px !important;
        text-decoration: none !important;
        border-radius: 4px !important;
        transition: background-color 0.15s ease !important;
    }
    
    .breadcrumb-item a:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
        text-decoration: none !important;
    }
}

/* Only apply aggressive touch targets to footer and navigation links */
footer .text-decoration-none,
.navbar .text-decoration-none {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 12px 8px !important;
    line-height: 1.2 !important;
}

/* Ensure all buttons meet minimum touch target requirements */
.btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
}

.btn-sm {
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 10px 14px !important;
}

.btn-lg {
    min-height: 52px !important;
    min-width: 52px !important;
    padding: 16px 24px !important;
}

/* ===== VIEWPORT OVERFLOW FIXES ===== */
/* NOTE: The html, body overflow:hidden rule was removed from here as it was breaking sticky headers. */
/* If background watermark overflow issues reappear on mobile, a more targeted solution is needed. */

/* Fix background watermark overflow - Critical Issue #2 */
.bg-watermark {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 1200px !important;
    height: 100% !important;
    max-height: 1200px !important;
    opacity: 0.15 !important;
    /* background: url('/static/icons/tv-logo-watermark.svg') left top / contain no-repeat !important; */
    pointer-events: none !important;
    z-index: -1 !important;
    overflow: hidden !important;
}

/* Fix main content overflow */
main.container-fluid {
    max-width: 100% !important;
}

/* ===== RESPONSIVE BREAKPOINT FIXES ===== */

/* Tablet Portrait (768px and below) */
@media (max-width: 768px) {
    /* Fix watermark size for tablets */
    .bg-watermark {
        width: 60% !important;
        height: 60% !important;
        max-width: 480px !important;
        max-height: 480px !important;
        opacity: 0.1 !important;
    }
    
    /* Improve footer layout on tablets */
    footer .row {
        gap: 24px;
    }
    
    footer .col-md-2,
    footer .col-md-4 {
        margin-bottom: 24px;
    }
    
    /* Ensure navigation is accessible */
    .navbar-nav .nav-link {
        min-height: 48px !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
    }
    
    /* Fix dropdown menus on tablets */
    .dropdown-menu {
        min-width: 200px;
        max-width: 90vw;
    }
    
    .dropdown-item {
        min-height: 48px !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
    }

    /* Stack primary CTA groups as full-width blocks */
    .cta-stack,
    .btn-toolbar,
    .btn-group,
    .cta-row {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      gap: 12px !important;
    }
    .cta-stack .btn,
    .btn-toolbar .btn,
    .btn-group .btn,
    .cta-row .btn {
      width: 100% !important;
      font-size: 1rem !important;
      padding: 12px 14px !important;
    }

    /* Card/list reflow: image above text */
    .card .row,
    .list-row,
    .episode-row,
    .event-row {
      display: flex !important;
      flex-direction: column !important;
    }
    .card .row > [class*="col-"],
    .list-row > [class*="col-"],
    .episode-row > [class*="col-"],
    .event-row > [class*="col-"] {
      width: 100% !important;
      max-width: 100% !important;
    }
    .poster, .thumb, .team-crest, .show-poster {
      max-width: 140px !important;
      margin: 0 auto 12px auto !important;
      aspect-ratio: 2 / 3 !important;
      object-fit: cover !important;
      display: block !important;
    }

    /* Provider/network logos grid */
    .provider-logos,
    .network-logos,
    .airing-on-logos {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 8px !important;
      align-items: center !important;
    }
    .provider-logos img,
    .network-logos img,
    .airing-on-logos img {
      max-height: 24px !important;
      width: auto !important;
      margin: 0 auto !important;
    }

    /* Action buttons inside cards */
    .card .btn-actions,
    .episode-actions,
    .event-actions {
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      width: 100% !important;
      margin-top: 8px !important;
    }
    .card .btn-actions .btn,
    .episode-actions .btn,
    .event-actions .btn {
      width: 100% !important;
    }

    /* Make sports list rows more compact on mobile (~50% height reduction) */
    .list-row { padding-top: 6px !important; padding-bottom: 6px !important; }
    .list-row .ps-3 { padding-left: 10px !important; }
    .list-row .py-2 { padding-top: 6px !important; padding-bottom: 6px !important; }
    .list-row .mb-1 { margin-bottom: 4px !important; }
    .list-row .small.mt-2 { margin-top: 4px !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* Fewer rows for channel logo grids inside sports rows */
    .list-row .provider-logos,
    .list-row .network-logos,
    .list-row .airing-on-logos { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }

    /* Place action buttons side-by-side to save vertical space */
    .list-row .btn-actions { flex-direction: row !important; gap: 10px !important; justify-content: center !important; width: 100% !important; }
    .list-row .btn-actions .btn { width: auto !important; flex: 1 0 auto !important; }

    /* Ensure inner flex container stacks columns vertically on mobile */
    .list-row > .d-flex { flex-direction: column !important; align-items: stretch !important; }
    /* Put action buttons under the text and left-aligned */
    .list-row > .d-flex > .btn-actions {
      order: 3 !important;
      align-items: flex-start !important;
      justify-content: flex-start !important;
      width: 100% !important;
      min-width: 0 !important;
      padding-left: 10px !important;
      margin-top: 8px !important;
    }
    .list-row > .d-flex > .btn-actions .btn { width: auto !important; }

    /* Sports Team Detail page rows: mimic my-tracked mobile layout */
    [data-page="sports-team-detail"] .list-group-item > .d-flex { flex-direction: column !important; align-items: stretch !important; }
    [data-page="sports-team-detail"] .list-group-item > .d-flex > .ms-3.pe-3 { order: 3 !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; padding-left: 10px !important; margin-top: 8px !important; }
    [data-page="sports-team-detail"] .list-group-item > .d-flex > .ms-3.pe-3 .btn { width: auto !important; }
    [data-page="sports-team-detail"] .provider-logos img,
    [data-page="sports-team-detail"] .network-logos img,
    [data-page="sports-team-detail"] .airing-on-logos img { height: 28px !important; max-height: 28px !important; }

    /* Center the single Mark Watched button on team detail rows */
    [data-page="sports-team-detail"] .list-group-item > .d-flex > .ms-3.pe-3 .btn:only-child {
      align-self: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
      width: auto !important; /* override any w-100 utility */
    }

    /* Fallback: force 28px for channel logos rendered via shared include */
    [data-page="sports-team-detail"] img[alt$="Logo"] { height: 28px !important; max-height: 28px !important; }

    /* Headings scale down smoothly */
    h1 { font-size: clamp(1.75rem, 4.5vw, 2.5rem) !important; }
    h2 { font-size: clamp(1.5rem, 4vw, 2rem) !important; }
    h3 { font-size: clamp(1.25rem, 3.5vw, 1.5rem) !important; }
  /* Today sports vs label and card titles smaller on mobile */
  .today-card .card-title { font-size: 1rem !important; }
  .today-card .vs-text { font-size: 1.3rem !important; }

    /* Body text readability */
    p, .lead, .card-text { line-height: 1.5 !important; }
    .text-muted { line-height: 1.4 !important; }

    /* Truncate long descriptions to ~4 lines */
    .line-clamp-3 { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important; }
    .line-clamp-4 { display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden !important; }

    /* Compact buttons while keeping 44px min height */
    .btn { padding: 10px 14px !important; font-weight: 600; }
    .btn-outline,
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-info,
    .btn-outline-success { background: transparent !important; }

    /* Episode details / card actions: outline visual weight */
    .btn-ghost { background: transparent !important; border: 1px solid currentColor !important; }
}

/* Mobile Large (414px and below) */
@media (max-width: 414px) {
    /* Further reduce watermark on large mobile */
    .bg-watermark {
        width: 50% !important;
        height: 50% !important;
        max-width: 300px !important;
        max-height: 300px !important;
        opacity: 0.08 !important;
    }
    
    /* Improve breadcrumb display on mobile */
    .breadcrumb {
        font-size: 14px !important;
        padding: 0 !important;
    }
    
    /* Stack footer columns vertically */
    footer .row {
        flex-direction: column;
    }
    
    footer .col-md-2,
    footer .col-md-4 {
        width: 100% !important;
        margin-bottom: 32px;
    }
    
    /* Improve button spacing on mobile */
    .btn {
        margin: 4px 0;
        width: auto;
        min-width: 120px;
    }
    
    /* Full-width buttons when appropriate */
    .btn-block,
    .d-grid .btn {
        width: 100% !important;
        min-width: 100% !important;
    }
}

/* Mobile Medium (375px and below) */
@media (max-width: 375px) {
    /* Optimize for iPhone SE and similar */
    .bg-watermark {
        width: 40% !important;
        height: 40% !important;
        max-width: 200px !important;
        max-height: 200px !important;
        opacity: 0.06 !important;
    }
    
    /* Increase touch targets further on small screens */
    footer .text-decoration-none,
    footer a {
        min-height: 48px !important;
        padding: 16px 12px !important;
        font-size: 16px !important;
    }
    
    /* Ensure readable text size */
    body {
        font-size: 16px !important;
    }
    
    .small,
    .text-small {
        font-size: 14px !important;
    }
    
    /* Improve form controls on small screens */
    .form-control,
    .form-select {
        min-height: 48px !important;
        padding: 14px 16px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* Mobile Small (320px and below) */
@media (max-width: 320px) {
    /* Optimize for very small screens */
    .bg-watermark {
        width: 30% !important;
        height: 30% !important;
        max-width: 150px !important;
        max-height: 150px !important;
        opacity: 0.04 !important;
    }
    
    /* Maximum touch target optimization */
    footer .text-decoration-none,
    footer a {
        min-height: 52px !important;
        padding: 18px 12px !important;
        font-size: 16px !important;
        line-height: 1.2;
    }
    
    /* Ensure navigation is usable */
    .navbar-brand {
        font-size: 18px !important;
    }
    
    .navbar-nav .nav-link {
        min-height: 52px !important;
        padding: 18px 16px !important;
        font-size: 16px !important;
    }
    
    /* Improve card spacing */
    .card {
        margin-bottom: 16px;
    }
    
    .card-body {
        padding: 16px !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Improve focus indicators for touch devices */
@media (hover: none) and (pointer: coarse) {
    /* Touch device specific styles */
    .btn:focus,
    .nav-link:focus,
    .dropdown-item:focus,
    footer a:focus {
        outline: 3px solid #007bff !important;
        outline-offset: 2px;
        background-color: rgba(0, 123, 255, 0.1) !important;
    }
    
    /* Larger tap areas for touch */
    .btn,
    .nav-link,
    .dropdown-item,
    footer a {
        padding: 16px 20px !important;
    }
}

/* ===== LANDSCAPE ORIENTATION FIXES ===== */

@media (orientation: landscape) and (max-height: 500px) {
    /* Optimize for landscape mobile */
    .bg-watermark {
        width: 25% !important;
        height: 50% !important;
        opacity: 0.05 !important;
    }
    
    /* Reduce vertical padding in landscape */
    .navbar {
        padding: 8px 0;
    }
    
    footer {
        padding: 32px 0;
    }
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */

@media (prefers-contrast: high) {
    footer .text-decoration-none,
    footer a {
        border: 2px solid currentColor;
        margin: 2px;
    }
    
    .btn {
        border: 2px solid currentColor !important;
    }
}

/* ===== REDUCED MOTION SUPPORT ===== */

@media (prefers-reduced-motion: reduce) {
    footer .text-decoration-none,
    footer a,
    .btn {
        transition: none !important;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .bg-watermark {
        display: none !important;
    }
    
    footer .text-decoration-none,
    footer a {
        color: black !important;
        text-decoration: underline !important;
    }
}

/* ===== FIXED WIDTH REPLACEMENTS ===== */
/* 
 * Replace problematic fixed width declarations with responsive alternatives
 * Based on CSS analysis findings
 */

/* Rating component fixes - replace fixed widths from rating.css */
@media (max-width: 768px) {
    .rating-container,
    .rating-display {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .rating-stars {
        width: auto !important;
        max-width: 200px !important;
    }
    
    .rating-input {
        width: 100% !important;
        max-width: 150px !important;
    }
}

/* Style.css fixes - replace fixed widths */
@media (max-width: 768px) {
    .sidebar,
    .content-area,
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .card,
    .panel,
    .widget {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.5rem 0 !important;
    }
    
    .btn-group {
        width: 100% !important;
        flex-direction: column !important;
    }
    
    .btn-group .btn {
        width: 100% !important;
        margin: 0.25rem 0 !important;
    }
}

/* Sports enhancements fixes */
@media (max-width: 768px) {
    .sports-grid,
    .team-grid {
        width: 100% !important;
        grid-template-columns: 1fr !important;
    }
    
    .sports-card,
    .team-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Theme default fixes */
@media (max-width: 768px) {
    .container-fixed,
    .wrapper-fixed {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
    }
}

/* General responsive improvements */
@media (max-width: 480px) {
    /* Ensure all containers are responsive */
    div[style*="width:"],
    span[style*="width:"],
    .fixed-width {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Make tables responsive */
    table {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
    
    /* Responsive images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Fix any remaining horizontal scroll issues */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ===== DEBUGGING UTILITIES (Remove in production) ===== */

/* Uncomment to visualize touch targets during development */
/*
.btn,
.nav-link,
.dropdown-item,
footer a {
    border: 1px dashed red !important;
}
*/ 

@media (max-width: 768px) {
  /* Navbar: brand and hamburger on one line, hamburger on the right */
  .navbar .container-fluid { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; }
  .navbar-brand { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 4px 0 !important; line-height: 1 !important; white-space: nowrap !important; }
  .navbar-retro-title { font-size: 1.3rem !important; } /* slightly larger TV Tracker text */
  .navbar-brand { order: 1 !important; flex: 0 1 auto !important; }
  .navbar-toggler { 
    order: 2 !important; 
    margin-left: 8px !important; 
    flex: 0 0 auto !important; 
    border: none !important;
    padding: 8px !important;
  }
  .navbar-toggler:focus {
    box-shadow: none !important;
  }
  /* Shrink TV logo glyph by 25% and reduce spacing to avoid wrap */
  .navbar-brand::before { width: 2.8rem !important; height: 2.8rem !important; margin-right: 0.4rem !important; }
  .navbar-retro-title { margin-right: 0.6rem !important; }
  /* Ensure collapsed menu opens below brand/toggler */
  .navbar .collapse.navbar-collapse {
    order: 3 !important; 
    flex-basis: 100% !important; 
    width: 100% !important; 
    margin-top: 4px !important; /* Reduced from 6px */
    padding: 4px 0 !important; /* Reduced from 8px - minimal padding around menu */
  }
  .navbar .collapse.navbar-collapse.show { 
    display: block !important; 
  }
  .navbar .collapse.navbar-collapse:not(.show) {
    display: none !important;
  }
  /* Apply same styles during the collapsing animation to prevent "snap" effect */
  .navbar .collapsing {
    order: 3 !important; 
    flex-basis: 100% !important; 
    width: 100% !important; 
    margin-top: 4px !important;
    padding: 4px 0 !important;
  }
  /* Force navbar nav links to be visible when collapsed */
  .navbar .collapse.navbar-collapse .navbar-nav,
  .navbar .collapsing .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important; /* Remove any gap between nav items */
  }
  .navbar .collapse.navbar-collapse .navbar-nav .nav-item,
  .navbar .collapsing .navbar-nav .nav-item {
    margin: 0 !important; /* Remove any margin on nav-item containers */
    padding: 0 !important; /* Remove any padding on nav-item containers */
  }
  .navbar .collapse.navbar-collapse .navbar-nav .nav-link,
  .navbar .collapsing .navbar-nav .nav-link {
    display: block !important;
    padding: 5px 12px !important; /* Slightly more vertical padding for better spacing */
    line-height: 1.3 !important; /* Tight line height */
    min-height: unset !important; /* Remove min-height that's adding extra space */
    margin: 0 !important; /* Remove any margin on links */
    color: #fff !important;
    font-size: 15px !important;
  }
  /* Keep active page orange when hamburger menu is open */
  .navbar .collapse.navbar-collapse .navbar-nav .nav-link.active {
    color: var(--color-secondary) !important;
  }
  /* Make Account dropdown items match nav-link spacing */
  .navbar .collapse.navbar-collapse .dropdown-menu,
  .navbar .collapsing .dropdown-menu {
    padding: 0 !important; /* No padding on menu container */
  }
  .navbar .collapse.navbar-collapse .dropdown-item,
  .navbar .collapsing .dropdown-item {
    padding: 5px 12px !important; /* Match nav-link spacing */
    line-height: 1.3 !important; /* Tight line height */
    min-height: unset !important; /* Remove any min-height */
    margin: 0 !important; /* Remove any margin */
    font-size: 14px !important;
  }

  /* Sports/my-tracked – 60px container height, centered 50px logos */
  #upcoming-games .list-group-item .d-flex.align-items-center.justify-content-center,
  #recent-games .list-group-item .d-flex.align-items-center.justify-content-center {
    min-height: 60px !important;
    height: 60px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 5px !important;
  }
  #upcoming-games .list-group-item .d-flex.align-items-center.justify-content-center img,
  #recent-games .list-group-item .d-flex.align-items-center.justify-content-center img {
    max-height: 50px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
  }
  #upcoming-games .list-group-item .d-flex.align-items-center.justify-content-center a,
  #recent-games .list-group-item .d-flex.align-items-center.justify-content-center a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Team detail page: absolute right-align Track/Untrack button */
  [data-page="sports-team-detail"] .col-md-9 > .d-flex.justify-content-between {
    position: relative !important;
  }
  [data-page="sports-team-detail"] #track-team-btn {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
  }
  [data-page="sports-team-detail"] h1 {
    padding-right: 120px !important; /* Space for button */
  }
  
  /* Team detail page: 60px container height, centered 50px logos */
  [data-page="sports-team-detail"] .list-group-item .d-flex.align-items-center.justify-content-center {
    min-height: 60px !important;
    height: 60px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 5px !important;
  }
  [data-page="sports-team-detail"] .list-group-item .d-flex.align-items-center.justify-content-center img {
    max-height: 50px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
  }
  [data-page="sports-team-detail"] .list-group-item .d-flex.align-items-center.justify-content-center a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Shows page: smaller network logos */
  .network-logo-shows { max-height: 22px !important; max-width: 64px !important; }
  /* Shows page: enlarge list posters and placeholders by 50% */
  .show-poster-list { max-height: 150px !important; }
  .show-poster-placeholder { height: 150px !important; width: 100px !important; }
  
  /* Calendar page: make controls mobile-friendly */
  .calendar-controls {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: center !important;
  }
  .calendar-controls > .d-flex.gap-3 {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .calendar-title-nav {
    order: -1 !important; /* Put month navigation at top */
  }
  .calendar-view-switcher .btn,
  .calendar-filter-switcher .btn {
    font-size: 14px !important;
    padding: 6px 12px !important;
  }
  
  /* Shows/my-tracked page: center all buttons in btn-actions container */
  .btn-actions {
    justify-content: center !important;
    align-items: center !important;
  }
  
  /* Shows/my-tracked: make watched button form and button full width */
  .btn-actions .watched-episode-form {
    width: 100% !important;
    margin: 0 !important;
  }
  .btn-actions .watched-episode-btn {
    width: 100% !important;
  }
  
  /* Sports/my-tracked: override right-alignment, center and stack buttons */
  #upcoming-games .btn-actions,
  #recent-games .btn-actions {
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
} 

@media (max-width: 768px) {
  .centered-narrow { max-width: 360px; margin-inline: auto; text-align: center; }
  .cta-narrow { max-width: 360px; margin-inline: auto; }
  .logo-row-tight { height: 340px !important; min-height: 340px !important; }
  .agenda-list { list-style: none; padding: 0; margin: 0; }
  .agenda-day { font-weight: 700; margin: 12px 0 8px; }
  .agenda-item { padding: 10px 12px; border-radius: 12px; background: var(--color-surface); box-shadow: var(--shadow-sm); margin-bottom: 10px; }
} 

@media (max-width: 768px) {
  /* Whats On Today: channel logos ~50% smaller */
  .today-card .provider-logos img,
  .today-card .network-logos img,
  .today-card .airing-on-logos img { max-height: 16px !important; }

  /* Sports my-tracked: channel logos ~25% smaller than current 24px → 18px */
  #upcoming-games .provider-logos img,
  #recent-games .provider-logos img { max-height: 18px !important; }

  /* Sports upcoming/recent: single column (image, description, channels, buttons) */
  #upcoming-games .list-group-item,
  #recent-games .list-group-item { display: block !important; }

  /* Footer center/stack */
  footer .row { justify-content: center !important; text-align: center !important; }
  footer .row > [class^="col-"] { width: 100% !important; margin-bottom: 16px; }
  footer .text-start { text-align: center !important; }
  footer .d-flex.align-items-center.gap-2 { justify-content: center !important; }
  footer h6 { text-align: center !important; }
  footer ul { text-align: center !important; padding-left: 0 !important; }
  footer .d-flex.justify-content-between.align-items-center { flex-direction: column !important; gap: 8px !important; justify-content: center !important; text-align: center !important; }
  footer .footer-logo { display: block !important; margin: 0 auto 8px auto !important; }
  footer .container-fluid { text-align: center !important; }
  footer .container-fluid .row > .col-md-4, 
  footer .container-fluid .row > .col-md-2 { text-align: center !important; }
  footer .list-unstyled { display: inline-block !important; text-align: center !important; margin: 0 auto !important; }
}