/* Phase Shift Visualizer Specific Styles */
@import url(./variables.css);
@import url('./shared.css');

/* Phase shift grid layout */
.charts-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 8px;
    min-height: 0;
}

.charts-grid .chart-item:first-child {
    grid-column: 1;
    grid-row: 1;
}

.charts-grid .complex-chart-item {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.charts-grid .chart-item:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}

.charts-grid .chart-item:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
}

/* Phase shift semantic colors */
.phase-shifted {
    color: var(--color-orange);
    font-weight: bold;
}

.cosine-component {
    color: var(--color-blue);
    font-weight: bold;
}

.sine-component {
    color: var(--color-green);
    font-weight: bold;
}

.decomposed-sum {
    color: var(--color-red);
    font-weight: bold;
}

/* Responsive behavior */
@media (max-width: 664px) {
    body {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .main-container {
        height: auto;
        min-height: 100vh;
        padding: 5px 5px 70px 5px;
    }

    .header {
        margin-bottom: 5px;
    }

    .charts-section {
        gap: 3px;
        flex: none;
        flex-direction: column;
        height: auto;
    }

    .charts-grid {
        flex: none;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .charts-grid .chart-item:first-child,
    .charts-grid .complex-chart-item,
    .charts-grid .chart-item:nth-child(3),
    .charts-grid .chart-item:nth-child(4) {
        grid-column: unset;
        grid-row: unset;
    }

    .chart-item {
        height: calc((100vh - var(--header-max-height) - var(--mobile-controls-space)) / var(--mobile-chart-divisor));
        min-height: calc((100vh - var(--header-max-height) - var(--mobile-controls-space)) / var(--mobile-chart-divisor));
        max-height: 300px;
    }

    .complex-chart-item {
        height: calc((100vh - var(--header-max-height) - var(--mobile-controls-space)) / var(--mobile-chart-divisor));
        min-height: calc((100vh - var(--header-max-height) - var(--mobile-controls-space)) / var(--mobile-chart-divisor));
        max-height: 300px;
    }

    .controls {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #ddd;
        padding: 8px;
        margin: 0;
        z-index: 1000;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    }
}

@media (max-width: 480px) {
    .chart-item {
        height: calc((100vh - var(--header-max-height) - var(--mobile-controls-space)) / var(--small-mobile-chart-divisor));
        min-height: calc((100vh - var(--header-max-height) - var(--mobile-controls-space)) / var(--small-mobile-chart-divisor));
        max-height: 250px;
    }

    .complex-chart-item {
        height: calc((100vh - var(--header-max-height) - var(--mobile-controls-space)) / var(--small-mobile-chart-divisor));
        min-height: calc((100vh - var(--header-max-height) - var(--mobile-controls-space)) / var(--small-mobile-chart-divisor));
        max-height: 250px;
    }
}