/* ========================================
   PERIODIC TABLE TRACKER STYLES
   ======================================== */

/* Main container - flex layout */
.main-content-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

/* ===== LEFT SIDE COLUMN ===== */
/* Contains Help Popup (top) + Periodic Table (bottom) */
.left-side-column {
    order: -1 !important;
    flex: 0 0 400px;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 200px);
}

/* Help Popup - Inside left column (appears on top) */
.left-side-column .help-popup-container-new {
    flex: 0 0 auto;
    width: 100%;
}

/* Periodic Table Tracker - Cyber-Voxel Style */
.left-side-column .periodic-table-tracker {
    flex: 1 1 auto;
    width: 100%;
    overflow-y: auto;
    background: var(--cyber-dark-2);
    border-radius: var(--voxel-radius-md);
    padding: var(--voxel-2x);
    box-shadow: var(--voxel-shadow-lg), var(--glow-cyber-cyan);
    border: 4px solid var(--cyber-cyan);
    position: relative;
}

/* Scanline effect */
.left-side-column .periodic-table-tracker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 243, 255, 0.03),
        rgba(0, 243, 255, 0.03) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 1;
}

/* Tracker Header */
.tracker-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
}

.tracker-icon {
    font-size: 1.5rem;
}

.tracker-title {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--cyber-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 15px var(--cyber-cyan);
    position: relative;
    z-index: 2;
}

/* Periodic Table Grid */
.periodic-table-grid {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    grid-auto-rows: 22px;
    gap: 2px;
    margin-bottom: 15px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* Element Cell - Voxel Style */
.pt-element {
    position: relative;
    border-radius: var(--voxel-radius-sm);
    cursor: pointer;
    transition: all 0.2s linear;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.pt-element:hover {
    transform: scale(1.2) translateY(-3px);
    z-index: 10;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4), 0 0 15px currentColor;
}

/* Current Element Highlight - Cyber Glow */
.pt-element.current {
    animation: currentElementCyberPulse 1.5s ease-in-out infinite;
    transform: scale(1.3);
    z-index: 100;
    border: 3px solid var(--cyber-yellow);
    box-shadow: 
        4px 4px 0 rgba(0, 0, 0, 0.5),
        0 0 25px currentColor, 
        0 0 40px currentColor,
        0 0 60px var(--cyber-yellow);
}

@keyframes currentElementCyberPulse {
    0%, 100% {
        box-shadow: 
            4px 4px 0 rgba(0, 0, 0, 0.5),
            0 0 25px currentColor,
            0 0 40px currentColor;
        transform: scale(1.3);
    }
    50% {
        box-shadow: 
            6px 6px 0 rgba(0, 0, 0, 0.6),
            0 0 35px currentColor,
            0 0 60px currentColor,
            0 0 80px var(--cyber-yellow);
        transform: scale(1.4);
    }
}

/* Element Family Colors */
.pt-element[data-family="alkali-metals"] {
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
}

.pt-element[data-family="alkaline-earth-metals"] {
    background: linear-gradient(135deg, #ffa726, #ff9800);
}

.pt-element[data-family="transition-metals"] {
    background: linear-gradient(135deg, #42a5f5, #2196f3);
}

.pt-element[data-family="post-transition-metals"] {
    background: linear-gradient(135deg, #66bb6a, #4caf50);
}

.pt-element[data-family="metalloids"] {
    background: linear-gradient(135deg, #ab47bc, #9c27b0);
}

.pt-element[data-family="nonmetals"] {
    background: linear-gradient(135deg, #26c6da, #00bcd4);
}

.pt-element[data-family="halogens"] {
    background: linear-gradient(135deg, #ffca28, #ffc107);
}

.pt-element[data-family="noble-gases"] {
    background: linear-gradient(135deg, #8d6e63, #795548);
}

.pt-element[data-family="lanthanides"] {
    background: linear-gradient(135deg, #ec407a, #e91e63);
}

.pt-element[data-family="actinides"] {
    background: linear-gradient(135deg, #5c6bc0, #3f51b5);
}

/* Legend - Voxel Block Style */
.tracker-legend {
    background: var(--cyber-dark-3);
    padding: var(--voxel-2x);
    border-radius: var(--voxel-radius-md);
    border: 3px solid var(--cyber-cyan);
    box-shadow: var(--voxel-shadow-sm);
    position: relative;
    z-index: 2;
}

.legend-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--cyber-cyan);
    margin-bottom: var(--voxel-unit);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px var(--cyber-cyan);
}

.legend-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: #ddd;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: var(--voxel-radius-sm);
    border: 2px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.legend-item[data-family="alkali-metals"] .legend-color {
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
}

.legend-item[data-family="alkaline-earth-metals"] .legend-color {
    background: linear-gradient(135deg, #ffa726, #ff9800);
}

.legend-item[data-family="transition-metals"] .legend-color {
    background: linear-gradient(135deg, #42a5f5, #2196f3);
}

.legend-item[data-family="post-transition-metals"] .legend-color {
    background: linear-gradient(135deg, #66bb6a, #4caf50);
}

.legend-item[data-family="metalloids"] .legend-color {
    background: linear-gradient(135deg, #ab47bc, #9c27b0);
}

.legend-item[data-family="nonmetals"] .legend-color {
    background: linear-gradient(135deg, #26c6da, #00bcd4);
}

.legend-item[data-family="halogens"] .legend-color {
    background: linear-gradient(135deg, #ffca28, #ffc107);
}

.legend-item[data-family="noble-gases"] .legend-color {
    background: linear-gradient(135deg, #8d6e63, #795548);
}

.legend-item[data-family="lanthanides"] .legend-color {
    background: linear-gradient(135deg, #ec407a, #e91e63);
}

.legend-item[data-family="actinides"] .legend-color {
    background: linear-gradient(135deg, #5c6bc0, #3f51b5);
}

/* ===== MIDDLE & RIGHT CONTAINERS ===== */
/* Quiz slides container - flexible middle area */
.slides-container {
    flex: 1 1 auto;
    min-width: 500px;
}

/* Score and Dashboard - right side */
.score-display-container {
    flex: 0 0 auto;
}

.quiz-dashboard {
    flex: 0 0 auto;
}

/* Scrollbar Styling */
.periodic-table-tracker::-webkit-scrollbar {
    width: 6px;
}

.periodic-table-tracker::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.periodic-table-tracker::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
}

.periodic-table-tracker::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2, #667eea);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1400px) {
    .left-side-column {
        flex: 0 0 350px;
        min-width: 350px;
    }
    
    .periodic-table-grid {
        grid-auto-rows: 20px;
        gap: 1px;
    }
    
    .pt-element {
        font-size: 7px;
    }
}

@media (max-width: 1200px) {
    .main-content-container {
        flex-wrap: wrap !important;
    }
    
    .left-side-column {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 100%;
        max-height: 500px;
        order: -1 !important;
        margin-bottom: 10px;
    }
    
    .slides-container {
        min-width: 400px;
    }
}

@media (max-width: 768px) {
    .left-side-column {
        gap: 8px;
    }
    
    .periodic-table-tracker {
        padding: 10px;
    }
    
    .periodic-table-grid {
        grid-auto-rows: 18px;
        gap: 1px;
        padding: 5px;
    }
    
    .pt-element {
        font-size: 6px;
    }
    
    .legend-items {
        grid-template-columns: 1fr;
    }
}