/* * 04_show_card.css 
 * Contains: All styles for the show cards, grid/list layout, and episode lists
 */

/* ---------------------------------- */
/* 7. Show Card Grid               */
/* ---------------------------------- */
#showsContainer {
    display: grid;
    /* This is the main desktop grid rule */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
	max-width: 1600px;
	margin: 0 auto;
}

#exploreContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
}

/* --- NEW GRADIENT CROSS-FADE --- */

/* This creates the two gradient layers: green (::before) and red (::after) */
.show-card::before,
.show-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* This is the 1-second transition that will animate! */
    transition: opacity 1s ease;
    
    z-index: 0; /* Sit behind the card content */
    pointer-events: none;
}

/* Green "Watched" Layer (Default) */
.show-card::before {
    background: linear-gradient(to bottom, #1c2e19, var(--background-color));
    opacity: 1; /* Visible by default */
}

/* Red "Unwatched" Layer */
.show-card::after {
    background: linear-gradient(to bottom, #331817, var(--background-color));
    opacity: 0; /* Hidden by default */
}

/* --- FADE LOGIC --- */

/* When .unwatched-card class is present: */
/* 1. Hide the Green Layer */
.show-card.unwatched-card::before {
    opacity: 0;
}
/* 2. Show the Red Layer */
.show-card.unwatched-card::after {
    opacity: 1;
}


/* This rule ensures the card content (text, images, etc.)
   sits ON TOP of our new gradient layers. */
.show-card > * {
    position: relative;
    z-index: 1;
}



.show-card {
	background: none;
	border-radius: 8px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    overflow: hidden;
    position: relative;
}

.show-card .countdown-timer {
    min-height: 90px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
}


/* Disables native long-press menus on cards */
#showsContainer .show-card {
    -webkit-user-select: none; /* Safari/iOS */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE */
    user-select: none;         /* Chrome/Opera/future */
    -webkit-touch-callout: none; /* iOS Safari */
}

/* ---------------------------------- */
/* 8. Show Card - Header           */
/* ---------------------------------- */
.card-header {
    display: flex;
    gap: 15px;
    padding: 15px 0px;
	min-height: 200px;
}

.card-header img {
    width: 100px;
    height: 140px;
    object-fit: cover;
    border-radius: 5px;
	margin:auto;
}

.card-header-text {
    flex-grow: 1;    /* Allows it to take up available space */
    flex-shrink: 1;  /* Allows it to shrink if needed */
    min-width: 0;    /* The key flexbox fix to allow shrinking */
	margin:auto;
	
}

.card-header-text h2 {
    margin: 0 0 10px 0;
    color: var(--primary-color);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes badge to the right */
    min-width: 0; 
}
  
.show-title-text {
    white-space: normal;
    min-width: 0;
    flex-shrink: 1;
}

/* Status badge (used in header and top bar) */
.status-badge.ended {
    display: inline-block;
    background-color: var(--danger-color);
    color: white;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: bold;
    vertical-align: middle;
    text-transform: uppercase;
    flex-shrink: 0; /* Stop the badge from shrinking */
    margin-left: 8px; /* Add some space */
}

/* ---------------------------------- */
/* 9. Show Card - Info Details     */
/* ---------------------------------- */
.show-summary {
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--text-color-secondary);
    padding: 0 15px 15px 15px;
}

.next-airdate {
    font-size: 0.85rem;
    color: var(--text-color-secondary);
    margin-top: 5px;
    font-weight: 300;
}

.unwatched-count {
    font-size: 0.8rem;
    font-weight: bold;
    margin-top: 8px;
}

.unwatched-count.status-unwatched {
    color: var(--danger-color);
}

.unwatched-count.status-watched-all {
    color: var(--success-color);
}

.future-count {
    font-size: 0.8rem;
    color: var(--text-color-secondary);
    margin-top: 4px;
    margin-bottom: 4px;
}

.days-til-next {
    font-size: 1rem;
    color: light gray;
    font-style: italic;
    margin-top: 3px;
    height: 1em;
}

.star-rating-container {
    margin-top: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.star-rating-container.not-rated {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-color-secondary);
}

.star-rating-value {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--text-color);
    margin-right: 6px;
}

.star {
    font-size: 1.1rem;
    line-height: 1;
}

.star.full {
    color: #ffd700;
}

.star.empty {
    color: var(--border-color);
}

/* ---------------------------------- */
/* 10. Show Card - Episode List     */
/* ---------------------------------- */
.card-body h3 {
    padding: 0 15px;
    margin: 0 0 16px 0;
    font-size: 1.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.card-body > h3 {
    /* Hides the "All Episodes" title on the main card */
    display: none;
}

.card-body-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.card-body-header h3 {
    padding: 0;
    margin: 0 0 10px 0;
    font-size: 0.8rem;
    border-top: none;
    padding-top: 0;
}

.watch-all-btn {
    background: none;
    border: 1px solid var(--text-color-secondary);
    color: var(--text-color-secondary);
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 10px;
}

.watch-all-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.episode-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 250px;
    overflow-y: auto;
    font-size: 0.85rem;
}

.episode-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px;
    user-select: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.episode-name {
    font-weight: 400;
    padding-right: 10px;
    pointer-events: none;
    flex-grow: 1;          
    min-width: 0;          
    white-space: nowrap;   
    overflow: hidden;      
    text-overflow: ellipsis; 
}

.episode-airdate {
    font-weight: 300;
    white-space: nowrap;
    pointer-events: none;
}

.episode-list li.watched {
    text-decoration: line-through;
    opacity: 0.7;
}

.episode-list li .episode-airdate {
    opacity: 0.8;
}

.episode-list li.season-odd {
    background-color: #242424;
}

.episode-list li.season-even {
    background-color: var(--surface-color);
}

.episode-list li.season-separator {
    background-color: transparent !important;
    padding: 15px 15px 5px 15px;
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
    font-size: 1.1em;
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color 0.2s;
}

.episode-list li.season-separator:first-child {
    margin-top: 0;
    border-top: none;
}

.episode-list li.season-separator:hover {
    color: #fff;
}

.episode-list li.season-separator::before {
    content: '▼';
    font-size: 0.7em;
    margin-right: 10px;
    transition: transform 0.2s ease-in-out;
}

.episode-list li.season-separator.collapsed::before {
    transform: rotate(-90deg);
}

.episode-list li.episode-item.hidden {
    display: none;
}

.episode-list li.future-episode {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none; 
}

/* Season "Mark as Watched" Checkbox */
.season-checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 20px;
    background-color: transparent;
    border: 2px solid var(--text-color-secondary);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.season-checkbox-container:not(.completed):hover {
    border-color: white;
}

.season-checkbox-container.completed {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.season-checkmark {
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg) translateY(-1px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.season-checkbox-container.completed .season-checkmark {
    opacity: 1;
}

.season-checkbox-container.future-season {
    opacity: 0.6;
    cursor: not-allowed;
}

.card-header-text > .status-badge {
    display: inline-block; /* This is the Grid View badge */
    margin-top: 8px; /* Give it space */
}
.card-header-text h2 .status-badge {
    display: none; /* Hide the List View badge */
}

/* --- NEW: List View Logo Container --- */
.list-view-logo-container {
    display: none; /* Hidden by default (in Grid View) */
    flex-shrink: 0;
    width: 50px; /* This is the width of the area you circled */
    padding-left: 15px;
    box-sizing: border-box;
}

.list-view-logo-container .card-platform-logo {
    /* Use the same class as the grid logo */
    width: 100%;
    height: 60px; /* Give it a fixed height in the list */
    object-fit: contain;
    opacity: 0.7;
}

/* ---------------------------------- */
/* 12. List View Specific Styles    */
/* ---------------------------------- */
#showsContainer.list-view {
    grid-template-columns: 1fr;
    max-width: 900px;
    margin: 0 auto;
    gap: 10px;
}

/* --- HIDE Grid View elements --- */
#showsContainer.list-view .card-top-bar,
#showsContainer.list-view .card-header-text > .status-badge,
#showsContainer.list-view .list-view-logo-container,
#showsContainer.list-view .next-airdate,
#showsContainer.list-view .countdown-next-label { /* Hide "Next:" text */
    display: none !important;
}

/* --- SHOW List View badge --- */
#showsContainer.list-view .card-header-text h2 .status-badge {
    display: inline-block;
    margin-left: 10px;
    font-size: 0.7em;
    padding: 2px 6px;
}

/* --- Main Card Layout --- */
#showsContainer.list-view .show-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 120px;
    max-height: 120px;
    padding: 0;
}

/* Left Side (Poster + Text) */
#showsContainer.list-view .card-header {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    padding: 0;
    margin: 0;
    min-height: auto;
}

#showsContainer.list-view .card-header img {
    width: 80px; 
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
    flex-shrink: 0;
}

#showsContainer.list-view .card-header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 15px;
    flex-grow: 1;
    gap: 2px;
    overflow: hidden;
}

#showsContainer.list-view .card-header-text h2 {
    font-size: 1.3rem;
    margin: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Right Side (Black Countdown Box) */
#showsContainer.list-view .countdown-timer {
    width: 150px;
    min-width: 150px;
    min-height: auto;
    margin-left: auto; 
    border-top: none;
    border-left: 1px solid var(--border-color);
    padding: 5px;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#showsContainer.list-view .countdown-timer .grid-flow-col {
    gap: 8px; /* Space between numbers */
}

/* Make numbers White and visible */
#showsContainer.list-view .countdown-timer .text-5xl {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

/* Style the small labels (D, H, M, S) */
#showsContainer.list-view .countdown-timer .flex-col span[data-i18n-key] {
    font-size: 0.65rem;
    color: #aaa;
    margin-top: 2px;
    display: block; /* Ensure they show up under numbers */
}

#showsContainer.list-view .countdown-timer .flex-col {
    padding: 0;
    min-width: 20px;
    align-items: center;
}

#showsContainer.list-view .card-body {
    display: none;
}

/* Styles for search result cards (re-used from explore page) */
.explore-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: border-color 0.2s;
}
.explore-card:hover {
    border-color: var(--primary-color);
}
.explore-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 210 / 295;
    object-fit: cover;
    pointer-events: none; /* Make click fall through to card */
}
.explore-card-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    pointer-events: none; /* Make click fall through to card */
}
.explore-card h3 {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin: 0 0 8px 0;
    flex-grow: 1; 
}
.explore-card .star-rating-container {
    margin-bottom: 10px;
}
.add-show-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 8px;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
    pointer-events: all; /* Allow button to be clicked */
}
.add-show-btn:hover {
    background-color: #3593d6;
}
.add-show-btn.added {
    background-color: var(--success-color);
    cursor: not-allowed;
}

/* This ensures the grid-view styles apply in search mode */
.showsContainer.search-mode {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* --- NEW: Season Tab UI inside Show Card --- */

/* 1. Hide the old "All Episodes" H3 in the card */
.show-card .card-body-header h3 {
    display: none;
}

/* 2. Hide the old collapsible season-separator list item */
.show-card .episode-list li.season-separator {
    display: none;
}



.show-card .season-tab-container {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); 
    gap: 8px;
    padding: 0 15px 15px 15px; /* Match card padding */
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}

/* 4. Style each "S01" tab box (default "inactive" state) */
.show-card .season-tab {
    display: flex;
    align-items: center;
    /* This will push the checkmark to the right */
    justify-content: space-between; 
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.show-card .season-tab .season-tab-label {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--text-color-secondary); /* Inactive text color */
    transition: color 0.2s ease;
    pointer-events: none;

}

/* 5. Style the hover state */
.show-card .season-tab:hover {
    border-color: var(--text-color-secondary);
}
.show-card .season-tab:hover .season-tab-label {
    color: var(--text-color);
}

/* 7. Adjust the checkbox inside the tab */
.show-card .season-tab .season-checkbox-container {
    margin: 0;
    width: 20px;
    height: 20px;
}
.show-card .season-tab .season-checkbox-container .season-checkmark {
    width: 5px;
    height: 10px;
}

/* 8. Style the content area */
.show-card .season-content-container {
    position: relative;
    max-height: 250px; /* Same as old .episode-list max-height */
    overflow-y: auto;
}

/* 9. Hide all episode lists by default */
.show-card .season-content-container .episode-list {
    display: none;
    max-height: none; /* Container handles scroll */
    overflow-y: visible;
}

/* 10. Show the active episode list */
.show-card .season-content-container .episode-list.active {
    display: block;
    animation: fadeIn 0.3s ease; /* Re-use global animation */
}

.show-card .season-tab-group {
display: flex;  
align-items: center;
	grid-template-columns: 1fr;
    justify-content: space-between; /* Pushes icon to the right */
    gap: 10px;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%; /* Make it full width on the card */
    box-sizing: border-box; /* Include padding in width */
	grid-column: 1 / -1;
}

.show-card .season-tab-group:hover {
    border-color: var(--text-color-secondary);
}

.show-card .season-tab-group .season-tab-label {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--text-color-secondary);
    transition: color 0.2s ease;
    pointer-events: none;
}

.show-card .season-tab-group:hover .season-tab-label {
    color: var(--text-color);
}

.show-card .season-tab-group.expanded {
    border-color: var(--text-color-secondary);
}
.show-card .season-tab-group.expanded .season-tab-label {
    color: var(--text-color);
}

/* Icon for expand/collapse */
.show-card .season-group-toggle-icon {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-color-secondary); /* Points down */
    transition: all 0.2s ease;
    pointer-events: none; /* Pass clicks to parent */
}

.show-card .season-tab.active .season-group-toggle-icon {
    transform: rotate(180deg); /* Points up */
}

.show-card .season-tab-group.expanded .season-group-toggle-icon {
    transform: rotate(180deg); /* Points up */
}

/* Wrapper for the individual tabs */
.show-card .season-tabs-individual-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 0 15px; 
    flex-basis: 100%;

    /* V-- ADD THIS LINE --V */
    grid-column: 1 / -1;
}

.show-card .season-tabs-individual-wrapper.hidden {
    display: none;
}

/* New wrapper for icons */
.show-card .season-group-icons {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between checkmark and arrow */
    pointer-events: none; /* Pass clicks to parent */
}

/* Style the checkmark container inside the group */
.show-card .season-tab-group .season-checkbox-container {
    display: none; /* Hide by default */
    width: 20px; /* Match individual tabs */
    height: 20px;
    border: 2px solid var(--text-color-secondary);
    border-radius: 5px;
    margin: 0; /* Remove any default margins */
}

/* Style the checkmark itself */
.show-card .season-tab-group .season-checkbox-container .season-checkmark {
    width: 5px; /* Match individual tabs */
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg) translateY(-1px);
    opacity: 0;
}

/* --- THIS IS THE KEY --- */
/* Show the checkmark when the group is completed */
.show-card .season-tab-group.completed .season-checkbox-container {
    display: flex; /* Show the box */
    align-items: center;
    justify-content: center;
    background-color: var(--success-color);
    border-color: var(--success-color);
}

/* Show the checkmark *glyph* */
.show-card .season-tab-group.completed .season-checkbox-container .season-checkmark {
    opacity: 1;
}