/* Layout Fix for Converter - Full Width Right Panel */

/* Override converter layout to ensure right panel uses full width */
.converter-layout {
    display: grid;
    grid-template-columns: 420px 1fr !important; /* Left panel fixed, right panel takes all remaining space */
    gap: 2rem;
    width: 100%;
    max-width: 100%;
}

/* Ensure main content doesn't restrict width too much */
.main-content {
    max-width: 1800px !important; /* Increase from 1600px to allow more space */
}

/* Make sure right panel uses full width and height */
.right-panel {
    width: 100%;
    min-width: 0; /* Prevent grid blowout */
    height: 100%;
}

/* Ensure panels have equal height */
.converter-layout {
    align-items: stretch;
}

.left-panel .panel-card,
.right-panel .panel-card {
    height: 100%;
}

/* Ensure canvas container uses full width */
.canvas-container {
    width: 100%;
}

.canvas-wrapper {
    width: 100%;
}

/* Hide all zoom controls */
.zoom-controls {
    display: none !important;
}

/* Ensure no zoom controls appear anywhere */
.canvas-container .zoom-controls,
.converter-right .zoom-controls,
.panel-card .zoom-controls,
.right-panel .zoom-controls,
#converter-tool .zoom-controls {
    display: none !important;
}

/* Position canvas container properly */
.canvas-container {
    position: relative;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .converter-layout {
        grid-template-columns: 380px 1fr !important;
    }
}

@media (max-width: 1024px) {
    .converter-layout {
        grid-template-columns: 1fr !important; /* Stack vertically on smaller screens */
    }
    
    .left-panel {
        position: static;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 0 1rem;
    }
    
    .converter-layout {
        gap: 1rem;
    }
}