/* Responsive Design - Media Queries */

/* Tablet and smaller desktop adjustments */
@media (max-width: 1200px) and (min-width: 769px) {
    .main-wrapper {
        flex-direction: column;
        height: auto;
    }
    
    .container {
        flex: 0 1 auto;
        min-height: 0;
        max-height: 60vh;
    }
    
    .visualization-container {
        min-height: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }
    
    .chart-container {
        min-height: 250px;
        max-height: 40vh;
    }
    
    .educational-panel {
        width: 100%;
        max-height: 400px;
        flex-shrink: 0;
        margin-top: var(--spacing-2xl);
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    /* Reduce padding and margins for mobile */
    .main-wrapper {
        flex-direction: column;
        height: auto;
        padding: var(--spacing-md);
        margin: var(--spacing-md) 0;
    }
    
    .container {
        flex: 0 1 auto;
        min-height: 0;
        max-height: none;
        padding: var(--spacing-lg);
        gap: var(--spacing-lg);
    }
    
    .visualization-container {
        min-height: 0;
        flex: 1 1 auto;
        overflow: visible;
    }
    
    /* Header adjustments */
    header h1 {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-md);
    }
    
    /* Controls bar - clean vertical stacking */
    .controls-bar {
        flex-direction: column;
        gap: var(--spacing-base);
        padding: var(--spacing-lg);
    }
    
    .control-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .control-group label {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-heading);
    }
    
    /* Make inputs and selects touch-friendly and full width */
    select,
    input[type="number"],
    input[type="text"] {
        font-size: var(--font-size-base);
        padding: var(--spacing-lg);
        min-height: 48px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Button adjustments - full width and prominent */
    button {
        min-height: 48px;
        padding: var(--spacing-lg) var(--spacing-xl);
        font-size: var(--font-size-lg);
        width: 100%;
        margin-top: var(--spacing-md);
    }
    
    /* Checkbox and label groups */
    .control-group input[type="checkbox"] + label,
    .control-group label:has(+ input[type="checkbox"]) {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        cursor: pointer;
    }
    
    /* Bonuses bar - vertical stacking */
    .bonuses-bar {
        flex-direction: column;
        gap: var(--spacing-base);
        padding: var(--spacing-lg);
    }
    
    .bonus-input-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .bonus-input-group label {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
    }
    
    .bonus-input-group input {
        min-height: 48px;
        width: 100%;
    }
    
    /* Bonus buttons */
    .bonus-buttons {
        display: flex;
        gap: var(--spacing-md);
        width: 100%;
    }
    
    .bonus-buttons button {
        flex: 1;
        margin-top: 0;
        min-height: 44px;
        font-size: var(--font-size-base);
    }
    
    /* Ensure bonus controls align to the right */
    .bonuses-controls {
        margin-left: auto;
        flex-shrink: 0;
        width: auto;
    }
    
    /* Probability display */
    .probability-display {
        font-size: var(--font-size-base);
        padding: var(--spacing-lg);
        margin: var(--spacing-md) 0;
        text-align: center;
    }
    
    /* Results wrapper - stack chart and table vertically */
    .results-wrapper {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .chart-container {
        min-height: 280px;
        max-height: 50vh;
        padding: var(--spacing-md);
    }
    
    /* Chart controls - adjust positioning for mobile */
    .chart-mode-select {
        top: var(--spacing-sm);
        left: var(--spacing-sm);
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
        min-height: 32px;
    }
    
    .chart-info-icon {
        top: var(--spacing-sm);
        right: var(--spacing-sm);
    }
    
    .info-icon {
        width: 1.6em;
        height: 1.6em;
        font-size: var(--font-size-base);
    }
    
    .info-tooltip {
        width: calc(100vw - var(--spacing-3xl));
        max-width: 280px;
        right: 0;
        font-size: var(--font-size-xs);
    }
    
    /* Data table container */
    .data-table-container {
        min-height: 200px;
        max-height: 40vh;
        padding: var(--spacing-md);
    }
    
    .data-table-header {
        font-size: var(--font-size-sm);
    }
    
    .data-table table {
        font-size: var(--font-size-xs);
    }
    
    .data-table th,
    .data-table td {
        padding: var(--spacing-sm) var(--spacing-xs);
    }
    
    /* Educational panel - stack below main content */
    .educational-panel {
        width: 100%;
        max-width: 100%;
        margin-top: var(--spacing-lg);
        max-height: none;
        padding: var(--spacing-lg);
    }
    
    .educational-panel h2 {
        font-size: var(--font-size-base);
    }
    
    .formula-section h3 {
        font-size: var(--font-size-sm);
    }
    
    .formula-section p {
        font-size: var(--font-size-xs);
    }
    
    .formula {
        font-size: var(--font-size-xs);
        overflow-x: auto;
        padding: var(--spacing-md);
    }
}

/* Small mobile devices (phones in portrait) */
@media (max-width: 480px) {
    .main-wrapper {
        padding: var(--spacing-sm);
        margin: var(--spacing-sm) 0;
    }
    
    .container {
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }
    
    header h1 {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-sm);
    }
    
    /* Controls bar - tighter spacing */
    .controls-bar {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }
    
    /* Chart container - adjust for very small screens */
    .chart-container {
        min-height: 240px;
        max-height: 45vh;
        padding: var(--spacing-sm);
    }
    
    /* Data table - smaller font for very small screens */
    .data-table table {
        font-size: 10px;
    }
    
    .data-table th,
    .data-table td {
        padding: var(--spacing-xs);
    }
    
    /* Ensure bonus controls align to the right */
    .bonuses-controls {
        margin-left: auto;
        flex-shrink: 0;
        width: auto;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-wrapper {
        padding: var(--spacing-xl);
        margin: var(--spacing-xl);
    }
    
    .controls-bar {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: var(--spacing-md);
    }
    
    .control-group {
        flex: 1 1 calc(33.333% - var(--spacing-md));
        min-width: 140px;
    }
    
    /* Ensure controls fit without scrolling */
    .control-group label {
        font-size: var(--font-size-sm);
    }
    
    select,
    input[type="number"],
    input[type="text"] {
        font-size: var(--font-size-sm);
        padding: var(--spacing-md);
    }
    
    /* DC group - ensure left alignment */
    .dc-group {
        justify-content: flex-start;
        align-items: center;
    }
    
    .results-wrapper {
        flex-direction: column;
    }
    
    .chart-container {
        min-height: 400px;
    }
    
    .data-table-container {
        min-height: 300px;
    }
    
    /* Ensure bonus controls align to the right */
    .bonuses-controls {
        margin-left: auto;
        flex-shrink: 0;
    }
}

/* iPad Pro and similar tablet sizes */
@media (min-width: 1025px) and (max-width: 1366px) {
    .main-wrapper {
        padding: var(--spacing-lg);
        margin: var(--spacing-lg);
    }
    
    .container {
        padding: var(--spacing-lg);
    }
    
    .controls-bar {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        align-items: flex-end;
    }
    
    .control-group {
        flex: 0 1 auto;
        min-width: 100px;
        max-width: 150px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
        justify-content: flex-end;
    }
    
    /* DC group needs more space and should not be constrained by control-group max-width */
    .dc-group {
        flex: 0 1 auto;
        min-width: 220px;
        max-width: none;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: var(--spacing-xs);
        justify-content: flex-start;
    }
    
    /* Make labels more compact */
    .control-group label {
        font-size: var(--font-size-xs);
        white-space: nowrap;
        line-height: 1.2;
    }
    
    /* Compact inputs - ensure consistent height */
    .control-group select,
    .control-group input[type="number"],
    .control-group input[type="text"] {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm) var(--spacing-md);
        min-height: 36px;
        height: 36px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Compact button */
    button {
        min-width: 100px;
        flex-shrink: 0;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-sm);
        height: 36px;
        align-self: flex-end;
    }
    
    /* DC group - override control-group constraints, ensure no overlap */
    .dc-group {
        flex-direction: row;
        align-items: flex-end;
        gap: var(--spacing-xs);
        max-width: none;
        min-width: 220px;
        flex: 0 1 auto;
        justify-content: flex-start;
    }
    
    .dc-group .checkbox-group {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        margin-right: 0;
        flex-shrink: 0;
        width: auto;
    }
    
    .dc-group #comparison {
        width: auto;
        min-width: 50px;
        height: 36px;
        flex-shrink: 0;
        margin-left: var(--spacing-xs);
    }
    
    .dc-group .target-input {
        width: 55px;
        min-width: 55px;
        max-width: 55px;
        height: 36px;
        flex-shrink: 0;
    }
    
    /* Other checkbox groups */
    .control-group:has(.checkbox-group):not(.dc-group) {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    
    /* Ensure all inputs align at bottom */
    .controls-bar {
        align-items: flex-end;
    }
    
    /* Bonuses bar should also wrap */
    .bonuses-bar {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: var(--spacing-base);
        padding: var(--spacing-md);
        align-items: flex-end;
    }
    
    .bonuses-container {
        align-items: flex-end;
    }
    
    .bonus-input-group {
        min-width: 100px;
        max-width: 120px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .bonus-input-group input {
        width: 100%;
        height: 36px;
    }
    
    .bonuses-controls {
        align-items: flex-end;
        margin-left: auto;
        flex-shrink: 0;
    }
    
    .bonuses-controls .btn-small {
        height: 36px;
        width: 36px;
        min-width: 36px;
    }
    
    /* Results - keep side by side if space allows */
    .results-wrapper {
        flex-direction: row;
        gap: var(--spacing-lg);
    }
    
    .chart-container {
        flex: 2;
        min-height: 400px;
    }
    
    .data-table-container {
        flex: 1;
        min-height: 400px;
        max-height: 60vh;
        overflow: visible;
    }
    
    .data-table {
        overflow-y: auto;
        max-height: calc(60vh - 100px);
    }
    
    .data-table table {
        font-size: var(--font-size-sm);
    }
    
    .data-table th,
    .data-table td {
        padding: var(--spacing-md) var(--spacing-sm);
        white-space: nowrap;
    }
}

/* Large desktop screens - ensure container stretches to full height */
@media (min-width: 1367px) {
    .container {
        flex: 1;
        min-height: 0;
        align-self: stretch;
    }
}