/* * 09_responsive.css
 * =================================================================
 * DESKTOP-FIRST RESPONSIVE STYLES
 * Your main CSS files define the largest desktop look.
 * This file ONLY uses (max-width) to shrink the site for smaller screens.
 * ================================================================= */

/* ---------------------------------- */
/* 1. Small Desktop (e.g., Laptops)
/* (max-width: 1600px) 
/* ---------------------------------- */
@media (max-width: 1600px) {
    #appContainer {
        max-width: 1500px;
    }
	
    /* Make modal smaller */
    .modal-content {
        max-width: 1200px;
    }
}

/* ---------------------------------- */
/* 2. Smaller Laptops
/* (max-width: 1200px) 
/* ---------------------------------- */
@media (max-width: 1200px) {
    #appContainer {
        max-width: 1200px; /* Default container size */
    }

    /* Revert to smaller grid cards */
    #showsContainer.grid-view {
        grid-template-columns: repeat(auto-fill, minmax(300px, 2fr));
        gap: 15px;
    }

    /* Make modal smaller */
    .modal-content {
        max-width: 800px;
    }
}


/* ---------------------------------- */
/* 3. Tablet & Mobile (max-width: 768px) 
/* ---------------------------------- */
@media (max-width: 768px) {
    
    #appContainer {
         /* Uses default max-width (1100px) or shrinks to 100% width */
    }
	
	.card-header {
        display: flex;
        gap: 10px;
        padding: 15px 0px;
        min-height: 260px;
    }

    /* --- Main Card Grid --- */
   #showsContainer.grid-view {
        /* Force 2 columns on tablet */
        grid-template-columns: 1fr 1fr; 
        gap: 15px;
    }

    .show-card {
        cursor: pointer;
    }

    .card-top-bar {
        width: 100%;
    }

/* --- COMPACT LIST VIEW FOR MOBILE --- */

    /* 1. Increase card height to fit 3 lines of text */
    #showsContainer.list-view .show-card {
        min-height: 115px; /* Increased from 90px */
        max-height: 115px;
        position: relative; 
    }

    /* 2. Widen Poster to maintain aspect ratio */
    #showsContainer.list-view .card-header img {
        width: 76px; /* Increased from 60px */
    }

    /* 3. Text adjustments */
	#showsContainer.list-view .card-header-text {
        /* Force alignment to the top */
        justify-content: flex-start !important;
        
        /* KILL THE YELLOW SPACE (Margins) */
        margin: 0 !important;
        
        /* Padding top/bottom */
        padding: 4px 10px 0 10px !important;
        
        gap: 0;
    }

    #showsContainer.list-view .card-header-text h2 {
        font-size: 1rem;
        white-space: normal; 
        line-height: 1.1;
        max-height: 2.2em;
        
        /* Ensure title has no top spacing */
        margin-top: 0 !important;
        
        /* ADDED GAP HERE */
        margin-bottom: 6px !important; 
    }
    
    /* Ensure all 3 lines fit nicely and tightly */
    #showsContainer.list-view .unwatched-count,
    #showsContainer.list-view .future-count,
    #showsContainer.list-view .next-airdate {
        font-size: 0.75rem;
        line-height: 1.15; /* Tighter line height */
        display: block; 
        margin: 0; /* No margins */
    }
    
    /* Hide Rating on mobile list */
    #showsContainer.list-view .star-rating-container {
        display: none;
    }

    /* 4. The Black Bar (Bottom Strip) */
    #showsContainer.list-view .countdown-timer {
        position: absolute;
        bottom: 0;
        
        /* Adjusted to match new image width */
        left: 76px; 
        width: calc(100% - 76px); 
        
        height: 32px; 
        min-width: unset;
        border-left: none;
        border-top: 1px solid var(--border-color);
        background: rgba(0,0,0,0.7); 
        
        /* Force Flex Row Layout */
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        
        padding: 0 10px;
        margin: 0;
        z-index: 10;
    }
    
    /* Numbers Row */
    #showsContainer.list-view .countdown-timer .grid-flow-col {
        gap: 8px;
        display: flex;
        align-items: center;
    }
    
    /* Numbers - Force Visibility & Color */
    #showsContainer.list-view .countdown-timer .text-5xl {
        font-size: 0.9rem !important; 
        font-weight: 700;
        color: #4CAF50 !important; /* Green */
        line-height: 1;
        display: inline-block !important;
    }
    
    /* Hide the "DAYS", "HRS" labels */
    #showsContainer.list-view .countdown-timer .flex-col span[data-i18n-key] {
        display: none !important;
    }
    
    /* Ensure flex wrappers don't collapse */
    #showsContainer.list-view .countdown-timer .flex-col {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        min-width: auto;
    }
    
    /* Add small suffixes (d h m s) */
    #showsContainer.list-view .countdown-timer .flex-col:nth-child(1) .text-5xl::after { content: 'd'; font-size:0.8em; color:#ccc; font-weight: normal; margin-left:1px;}
    #showsContainer.list-view .countdown-timer .flex-col:nth-child(2) .text-5xl::after { content: 'h'; font-size:0.8em; color:#ccc; font-weight: normal; margin-left:1px;}
    #showsContainer.list-view .countdown-timer .flex-col:nth-child(3) .text-5xl::after { content: 'm'; font-size:0.8em; color:#ccc; font-weight: normal; margin-left:1px;}
    #showsContainer.list-view .countdown-timer .flex-col:nth-child(4) .text-5xl::after { content: 's'; font-size:0.8em; color:#ccc; font-weight: normal; margin-left:1px;}

    /* Hide Date Label on mobile */
    #showsContainer.list-view .countdown-date-label {
        display: none !important; 
    }

    /* 5. Tiny Logo on Mobile */
    #showsContainer.list-view .list-view-logo-container {
        bottom: 4px;
        right: 4px;
        display: block !important;
        position: absolute;
        padding: 0;
        z-index: 11;
    }
    
    #showsContainer.list-view .card-platform-logo {
        height: 15px !important; 
        max-height: 15px !important;
        width: auto !important;
    }

    /* Remove Button */
    #showsContainer.list-view .remove-btn {
        top: 2px;
        right: 2px;
        padding: 5px;
        width: 20px;
    }

    /* --- Calendar --- */
    .calendar-header {
        flex-direction: column;
        align-items: center; 
        gap: 15px;
    }

    .fc-header-toolbar {
        display: flex;
        flex-direction: column;
        gap: 15px; 
    }

    .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
        order: -1; 
    }
    
	/* 1. Push the button to the right */
    #showsContainer.list-view .countdown-timer.ended-container {
        justify-content: flex-end !important; /* Align to right */
        padding-right: 35px !important;       /* Leave space for the logo */
    }

    /* 2. Make the "Ended" button smaller */
    #showsContainer.list-view .countdown-timer.ended-container .status-badge.ended {
        font-size: 0.65rem !important; /* Smaller font */
        padding: 2px 8px !important;   /* Compact padding */
        height: auto !important;
        line-height: 1.2 !important;
        display: inline-block !important;
    }
	
    /* --- Modal --- */
    .modal-content {
        max-width: 600px; 
    }
    
    /* --- Cast List (in modal) --- */
    .cast-list {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
    .cast-photo {
        height: 180px;
    }
}


/* ---------------------------------- */
/* 4. Large Mobile
/* (max-width: 550px) 
/* ---------------------------------- */
@media (max-width: 550px) {
    .card-body-header h3 {
        display: none;
    }
    
    .toast {
        min-width: 350px;
        max-width: 85%;
        font-size: 14px;
        padding: 14px 20px;
    }
    
    #showsContainer.grid-view {
        grid-template-columns: 1fr 1fr; 
        gap: 10px;
    }

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

    .show-card {
        cursor: pointer;
    }
    
    /* Styles h3 *inside the modal* on mobile */
    .card-body h3 {
        padding: 0 10px;
        margin: 0 0 10px 0;
        font-size: 1rem;
        border-top: 1px solid var(--border-color);
        padding-top: 10px;
    }
    
    #showsContainer.list-view .show-card {
        flex-direction: row;
    }

    /* Apply column layout ONLY to grid view */
    #showsContainer:not(.list-view) .show-card {
        flex-direction: column; 
        align-items: flex-start; 
        padding: 10px; 
        height: auto; 
        min-height: 200px; 
    }

    #showsContainer:not(.list-view) .show-card .show-image-container {
        width: 100%; 
        height: auto; 
        margin-bottom: 10px; 
    }

    #showsContainer:not(.list-view) .show-card .show-image-container img {
        width: 100%;
        height: auto;
        border-radius: 8px; 
    }

    #showsContainer:not(.list-view) .show-card .card-header {
        flex-direction: column; 
        align-items: flex-start; 
        padding-bottom: 5px; 
        width: 100%; 
        font-size: 0.9em; 
    }

    #showsContainer:not(.list-view) .show-card .show-name {
        margin-bottom: 5px; 
        font-size: 1.1em; 
        text-align: left; 
    }

    #showsContainer:not(.list-view) .show-card .show-rating {
        display: flex; 
        align-items: center;
        gap: 5px;
        margin-bottom: 5px; 
    }
    
    .card-header-text h2 {
        font-size: 1.2em; 
    }

    #showsContainer:not(.list-view) .show-card .show-rating .rating-stars,
    #showsContainer:not(.list-view) .show-card .show-rating .rating-value {
        display: block; 
    }

    /* GRID VIEW HIDING RULES - Ensure this doesn't touch list view */
    #showsContainer:not(.list-view) .show-card .future-count,
    #showsContainer:not(.list-view) .show-card .days-til-next,
    #showsContainer:not(.list-view) .show-card .show-summary, 
    #showsContainer:not(.list-view) .show-card .next-episode-info { 
        display: none !important;
    }
    
    /* Mobile Card Top Bar */
    #showsContainer:not(.list-view) .status-badge.ended {
        position: absolute;
        margin:auto; 
        font-size: 1rem;
        padding: 2px 6px;
        z-index: 6;   
    }

    #showsContainer:not(.list-view) .card-header {
        padding: 8px; 
    }
    
    .controls-container {
        gap: 10px;
        margin-bottom: 15px;
        flex-wrap: nowrap;
        align-items: center; 
    }
    
    #authContainer {
        max-width: none;
        width: 100%;
        box-sizing: border-box; /* Ensure padding is included */
    }
    
    /* --- Mobile Modal Layout --- */
    .modal-content .card-header {
        flex-direction: column; /* Stack poster-column and text-column */
    }

    .modal-content .card-header-text {
        padding: 15px; /* Add padding around summary */
        margin-top: 0;
    }
    
    .modal-poster-column {
        width: 100%;
    }
    
    .modal-content .modal-poster-column > img {
        width: 100%;
        height: 250px; 
        object-fit: cover; 
        object-position: 50% 25%; 
        margin: 0;
        border-radius: 8px 8px 0 0; 
    }
    
    /* --- Explore Page --- */
    #exploreContainer {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px; /* Reduce gap for 3 columns */
    }
    
    .explore-card h3 {
        font-size: 0.9rem; /* Make title smaller */
    }
    .explore-card .star-rating-container {
        display: none; /* Hide stars to save space */
    }
    .explore-card .add-show-btn {
        padding: 6px; /* Make button smaller */
        font-size: 0.8rem;
    }
}


/* ---------------------------------- */
/* 5. Small Mobile (e.g., iPhone SE)
/* (max-width: 430px) 
/* ---------------------------------- */
@media (max-width: 430px) {
    
    body {
        padding: 10px;
    }
        
    .card-header-text h2 {
        font-size: 1.em;
        flex-wrap: wrap;
    }
    
    .show-title-text {
        white-space: wrap;
        min-width: 0;
        flex-shrink: 1;
    }

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

    #showsContainer:not(.list-view) {
        gap: 8px;
    }

    #showsContainer:not(.list-view) .show-card {
        padding: 8px;
        min-height: unset;
    }

    #showsContainer:not(.list-view) .show-card .show-name {
        font-size: 1rem;
    }

    #showsContainer:not(.list-view) .show-card .show-rating {
        margin-bottom: 3px;
    }
	
    .unwatched-count {
        font-size: 0.75rem;
        margin-top: 5px;
    }
    .next-airdate,
    .days-til-next,
    .future-count {
        font-size: 0.75rem;
        margin-top: 2px;
    }

    .star-rating-value {
        font-size: 0.8rem;
    }
    .star {
        font-size: 0.9rem;
    }
    
    .controls-container {
        gap: 5px;
        margin-bottom: 15px;
        flex-wrap: nowrap;
        align-items: center; 
    }
    
    #showsContainer:not(.list-view) .status-badge.ended {
        top: 6px;
        left: 6px;
        font-size: 0.65rem;
        padding: 2px 5px;
    }

    #showsContainer:not(.list-view) .remove-btn {
        top: 6px;
        right: 6px;
        width: 90px;
        height: 18px;
        font-size: 0.65rem;
    }
	
   
    .card-body h3 {
        padding: 0 5px;
        font-size: 1rem;
        border-top: 1px solid var(--border-color);
        margin:0;
    }
    
    .episode-list li.season-separator::before {
        content: '▼';
        font-size: 0.7em;
        margin-right: -10px;
        transition: transform 0.2s ease-in-out;
    }
    
    /* Adds breathing room to the bottom of the modal */
    .modal-content .card-body {
        padding-bottom: 15px;
    }
}

/* --- Mobile Font Size Fix for Small Viewports --- */
@media (max-width: 400px) {

    /* 1. Show Title (e.g., "7 vs. Wild") */
    .show-card .card-header-text h2 {
        font-size: 1.1rem; /* Adjust as needed */
        margin-bottom: 2px; /* Tightens spacing */
    }

    /* 2. Star Rating */
    .show-card .star-rating-container {
        font-size: 0.8rem; 
    }

    /* 3. Status Text (Unwatched, Next Episode) */
    .show-card .unwatched-count,
    .show-card .future-count,
    .show-card .next-airdate {
        font-size: 0.75rem;
        line-height: 1.3; /* Improves readability */
    }

    /* 4. Countdown "NEXT:" Label */
    .countdown-timer .countdown-next-label {
        font-size: 0.8rem;
    }

    /* 5. Countdown Numbers (e.g., "00") */
    .countdown-timer .countdown {
        font-size: 0.7rem; /* Adjust as needed */
    }

    /* 6. Countdown Units (e.g., "DAYS", "HOURS") */
    .countdown-timer .grid > div > span:last-child {
        font-size: 0.6rem; /* Makes units smaller */
        padding-top: 0;
    }
    
    /* 7. Tighten padding on countdown timer */
    .countdown-timer .flex-col {
        padding: 2px; 
    }
    
    .countdown-timer .grid {
        gap: 8px; /* Reduce gap between numbers */
    }
	
	/* New label style */
	.control-label {
		font-size: 0.5rem; /* 12px */
		color: var(--text-color-secondary);
		font-weight: 200;
	}
}