/* Optimized Spacing for Maximum Screen Real Estate Efficiency */
/* This file reduces unnecessary padding/margin and improves content density */

/* ===============================================
   HEADER OPTIMIZATION
   Reduce header padding while maintaining usability
   =============================================== */

/* Add bottom border to header for visual separation */
.header {
    border-bottom: 1px solid var(--border) !important;
}

/* Desktop header - more compact */
@media (min-width: 1025px) {
    .header {
        padding: 12px 20px !important; /* Reduced from 1em 2em (16px 32px) */
        min-height: 48px !important;
        height: auto !important;
    }
    
    .header-content {
        gap: 16px !important; /* Reduced from 24px */
    }
}

/* Tablet header */
@media (min-width: 769px) and (max-width: 1024px) {
    .header {
        padding: 10px 16px !important;
        min-height: 44px !important;
    }
    
    .header-content {
        gap: 12px !important;
    }
}

/* Mobile header - already compact, just ensure consistency */
@media (max-width: 768px) {
    .header {
        padding: 6px 8px !important; /* Reduced from 8px 12px */
        min-height: 44px !important;
    }
    
    .header-content {
        gap: 6px !important;
    }
}

/* ===============================================
   TIMELINE CONTAINER OPTIMIZATION
   Reduce timeline padding and improve density
   =============================================== */

.timeline-container {
    padding: 8px 16px !important; /* Reduced from 1em 1em (16px 16px) */
    /* Stick to top within results scroll area */
    top: 0 !important;
    z-index: 50; /* Ensure it's below the header */
    position: sticky;
}

@media (max-width: 768px) {
    .timeline-container {
        padding: 6px 8px !important;
        top: 0 !important;
    }
}

/* Slightly reduced timeline height but with room for labels */
.timeline {
    height: 70px !important; /* Balanced - reduced from 80px but room for labels */
    margin: 8px 0 !important; /* Reduced from 16px */
}

/* Adjust timeline marks for new height */
.timeline-mark.major {
    top: 25px !important; /* Center on 70px: (70-20)/2 = 25px */
}

.timeline-mark.minor {
    top: 30px !important; /* Center on 70px: (70-10)/2 = 30px */
}

/* Adjust timeline labels */
.timeline-labels {
    margin-top: 8px !important; /* Keep original spacing for readability */
    padding: 0 16px !important;
    font-size: 11px !important; /* Slightly smaller */
}

/* Adjust timeline mark labels */
.timeline-mark-label {
    top: 48px !important; /* Adjusted for 70px timeline */
    font-size: 11px !important;
}

.timeline-mark-label.stack-level-1 {
    top: 60px !important;
    font-size: 10px !important;
}

.timeline-mark-label.stack-level-2 {
    top: 72px !important;
    font-size: 9px !important;
}

/* Mobile timeline */
@media (max-width: 768px) {
    .timeline {
        height: 55px !important; /* Slightly more room on mobile too */
    }
    
    .timeline-mark.major {
        top: 17px !important; /* Center on 55px */
    }
    
    .timeline-mark.minor {
        top: 22px !important; /* Center on 55px */
    }
    
    .timeline-mark-label {
        top: 38px !important;
        font-size: 10px !important;
    }
    
    .timeline-labels {
        font-size: 10px !important;
        padding: 0 8px !important;
    }
}

/* ===============================================
   SEARCH FILTERS OPTIMIZATION
   Reduce filter section padding and margins
   =============================================== */

.search-filters {
    /* Calculate new top position with optimized header and timeline */
    top: 112px !important;
    margin: 0 0 16px 0 !important; /* Reduced from 2em (32px) */
    padding: 0 !important;
}

@media (max-width: 768px) {
    .search-filters {
        /* Mobile: 44px header + 6px padding + 55px timeline + 6px padding + 8px labels = 119px */
        top: 119px !important;
        margin: 0 0 12px 0 !important;
    }
}

/* Compact filter header */
.search-filters-header {
    padding: 10px 16px !important; /* Reduced from 15px 20px */
    gap: 8px !important; /* Reduced from 10px */
}

.search-filters-header h3 {
    font-size: 16px !important; /* Reduced from 18px */
}

/* Even more compact when collapsed */
.search-filters.has-collapsed-content .search-filters-header {
    padding: 8px 12px !important; /* Reduced from 10px 15px */
}

.search-filters.has-collapsed-content .search-filters-header h3 {
    font-size: 13px !important; /* Reduced from 14px */
}

.search-filters.has-collapsed-content {
    margin: 0 0 8px 0 !important; /* Reduced from 1em */
}

/* Compact filter content */
.filter-content {
    padding: 12px 16px !important; /* Reduce if exists */
}

.filter-group {
    margin-bottom: 12px !important; /* Reduce spacing between filter groups */
}

.filter-group:last-child {
    margin-bottom: 0 !important;
}

/* ===============================================
   MAIN CONTENT & VIDEO GRID OPTIMIZATION
   Reduce content padding and gaps
   =============================================== */

.main-content {
    padding: 16px !important; /* Reduced from 24px */
    /* padding-top handled by sticky-fix.css */
    min-height: 100vh !important;
}

@media (max-width: 768px) {
    .main-content {
        padding: 8px !important; /* Reduced from 16px 12px */
    }
}

/* Video grid optimization */
.videos-grid {
    gap: 12px !important; /* Reduced from 16px */
    padding-top: 16px !important; /* Reduced from 24px */
}

@media (max-width: 768px) {
    .videos-grid {
        gap: 6px !important; /* Reduced from 8px */
        padding-top: 8px !important;
    }
}

/* Compact video card info */
.video-info {
    padding: 12px !important; /* Reduced from 16px */
}

.video-title {
    font-size: 14px !important; /* Reduced from 16px */
    margin-bottom: 6px !important; /* Reduced from 8px */
    line-height: 1.3 !important; /* Tighter line height */
}

.video-meta {
    font-size: 12px !important; /* Reduced from 13px */
    gap: 8px !important; /* Reduced from 12px */
}

/* Small cards get even more compact */
.videos-grid.small-cards .video-info {
    padding: 8px !important; /* Reduced from 10px */
}

.videos-grid.small-cards .video-title {
    font-size: 12px !important; /* Reduced from 13px */
    margin-bottom: 4px !important;
}

.videos-grid.small-cards .video-meta {
    font-size: 10px !important; /* Reduced from 11px */
}

/* ===============================================
   CHANNEL INFO OPTIMIZATION
   Compact channel information display
   =============================================== */

.channel-info {
    gap: 8px !important; /* Reduced from 12px */
}

.channel-avatar {
    width: 36px !important; /* Reduced from 48px */
    height: 36px !important;
}

.channel-name {
    font-size: 16px !important; /* Reduced from 18px */
}

.video-count {
    font-size: 12px !important; /* Reduced from 14px */
}

/* ===============================================
   LANDING PAGE OPTIMIZATION
   Reduce landing page spacing for immediate access
   =============================================== */

.landing-page {
    padding: 20px !important; /* Reduced from 1em */
}

.hero-text {
    margin-bottom: 24px !important; /* Reduced from 40px */
    padding: 0 16px !important; /* Reduced from 0 20px */
}

.hero-text h1 {
    margin-bottom: 16px !important; /* Reduced from 24px */
    font-size: 2.5rem !important; /* Reduced from 3rem */
}

.logo-title-container {
    gap: 16px !important; /* Reduced from 24px */
    margin-bottom: 20px !important; /* Reduced from 30px */
}

.landing-search-container {
    margin-top: 24px !important; /* Reduced from 40px */
}

/* Mobile landing page */
@media (max-width: 768px) {
    .landing-page {
        padding: 12px !important;
    }
    
    .hero-text {
        margin-bottom: 16px !important; /* Reduced from 20px */
    }
    
    .hero-text h1 {
        font-size: 2rem !important; /* Reduced from 2.5rem */
    }
    
    .logo-title-container {
        gap: 12px !important; /* Reduced from 16px */
        margin-bottom: 16px !important; /* Reduced from 20px */
    }
}

/* ===============================================
   BODY AND GENERAL OPTIMIZATION
   =============================================== */

body {
    padding-bottom: 16px !important; /* Reduced from 24px */
}

@media (max-width: 768px) {
    body {
        padding-bottom: 8px !important; /* Reduced for mobile */
    }
}

/* ===============================================
   LIST AND DETAILS VIEW OPTIMIZATION
   =============================================== */

/* List view - more compact */
.videos-grid.view-list .video-card {
    padding: 6px 10px !important; /* Reduced from 8px 12px */
    min-height: 32px !important; /* Reduced from 40px */
}

/* Details view - tighter table */
.details-header span {
    padding: 8px 10px !important; /* Reduced from 10px 12px */
    font-size: 11px !important; /* Reduced from 12px */
}

.videos-grid.view-details .video-title,
.videos-grid.view-details .video-date,
.videos-grid.view-details .video-duration,
.videos-grid.view-details .video-views,
.videos-grid.view-details .video-age {
    padding: 8px 10px !important; /* Reduced from 10px 12px */
    font-size: 12px !important; /* Reduced from 13px */
}

/* ===============================================
   TIMELINE MODE SELECTOR OPTIMIZATION
   =============================================== */

.timeline-mode-selector {
    padding: 3px 6px !important; /* Reduced from 4px 8px */
    gap: 3px !important; /* Reduced from 4px */
    margin-left: 8px !important;
    margin-right: 8px !important; /* Reduced from 15px */
}

.timeline-mode-nav {
    padding: 2px 3px !important; /* Reduced from 2px 4px */
}

.timeline-mode-nav svg {
    width: 12px !important; /* Reduced from 14px */
    height: 12px !important;
}

.timeline-mode-label {
    font-size: 11px !important; /* Reduced from 12px */
    min-width: 70px !important; /* Reduced from 85px */
    padding: 2px 4px !important; /* Reduced from 2px 6px */
}

/* ===============================================
   PLACEHOLDER AND ERROR MESSAGE OPTIMIZATION
   =============================================== */

.placeholder {
    padding: 32px 16px !important; /* Reduced from 48px 24px */
}

.placeholder h2 {
    font-size: 24px !important; /* Reduced from 28px */
    margin-bottom: 12px !important; /* Reduced from 16px */
}

.placeholder p {
    font-size: 16px !important; /* Reduced from 18px */
}

.error-message {
    padding: 12px !important; /* Reduced from 16px */
    margin: 12px 0 !important; /* Reduced from 16px */
}

/* ===============================================
   SPECIAL ADJUSTMENTS FOR MAXIMUM DENSITY MODE
   Can be toggled with a class on body
   =============================================== */

body.max-density .header {
    padding: 8px 12px !important;
    min-height: 40px !important;
}

body.max-density .timeline-container {
    padding: 4px 8px !important;
    top: 0 !important;
}

body.max-density .timeline {
    height: 40px !important;
    margin: 4px 0 !important;
}

body.max-density .search-filters {
    top: 96px !important;
    margin: 0 0 8px 0 !important;
}

body.max-density .search-filters-header {
    padding: 6px 12px !important;
}

body.max-density .videos-grid {
    gap: 8px !important;
    padding-top: 8px !important;
}

body.max-density .video-info {
    padding: 8px !important;
}

body.max-density .video-title {
    font-size: 13px !important;
    margin-bottom: 4px !important;
}

/* ===============================================
   FOOTER OPTIMIZATION
   =============================================== */

.footer-links {
    margin-top: 20px !important; /* Reduced from 30px */
    gap: 12px !important; /* Reduced from 20px */
}

.footer-link {
    padding: 6px 12px !important; /* Reduced from 8px 16px */
    font-size: 11px !important; /* Reduced from 13px */
}

/* ===============================================
   SCROLLBAR OPTIMIZATION
   Make scrollbars thinner to save space
   =============================================== */

::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-secondary);
}