/* Reset and base styles scoped to our app */
.logistic-function-app {
    --lf-primary-color: #2196F3;
    --lf-secondary-color: #FF9800;
    --lf-background-color: #1e1e1e;
    --lf-text-color: #e0e0e0;
    --lf-border-color: #333333;
    --lf-success-color: #4CAF50;
    --lf-danger-color: #F44336;
    --lf-grid-color: rgba(255, 255, 255, 0.1);
    --lf-track-background: #000000;
    --lf-control-background: #2d2d2d;
    
    /* Layout */
    --lf-spacing-small: 4px;
    --lf-spacing-medium: 8px;
    --lf-spacing-large: 16px;
    --lf-border-radius: 4px;
    --lf-control-height: 32px;
    --lf-control-panel-width: 250px;
    
    /* Z-index management */
    --lf-z-canvas: 1;
    --lf-z-controls: 2;
    --lf-z-tooltip: 3;

    /* Typography */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--lf-text-color);
    
    /* Box model reset */
    box-sizing: border-box;
    margin: 0;
    padding: var(--lf-spacing-medium);
    width: 800px;
    height: 830px;
    background-color: var(--lf-background-color);
}

/* Ensure all elements inside use the same box model */
.logistic-function-app * {
    box-sizing: inherit;
}

/* Main Layout */
.lf-main-layout {
    display: flex;
    gap: var(--lf-spacing-medium);
    height: 100%;
}

/* Tracks Container */
.lf-tracks-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--lf-spacing-medium);
}

/* Individual Track Styling */
.lf-track {
    position: relative;
    background: var(--lf-track-background);
    border-radius: var(--lf-border-radius);
    padding: var(--lf-spacing-medium);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.lf-track canvas {
    display: block;
    width: 100%;
    height: 250px;
    background: var(--lf-track-background);
    border: 1px solid var(--lf-border-color);
    border-radius: var(--lf-border-radius);
}

.lf-track-label {
    position: absolute;
    top: var(--lf-spacing-medium);
    left: var(--lf-spacing-medium);
    background: rgba(0, 0, 0, 0.7);
    padding: var(--lf-spacing-small) var(--lf-spacing-medium);
    border-radius: var(--lf-border-radius);
    font-weight: 500;
}

.lf-track-1 canvas,
.lf-track-3 canvas {
    cursor: grab;
}

.lf-track-1 canvas:active,
.lf-track-3 canvas:active {
    cursor: grabbing;
}

/* Control Panel */
.lf-control-panel {
    width: var(--lf-control-panel-width);
    flex-shrink: 0;
    background: var(--lf-control-background);
    border: 1px solid var(--lf-border-color);
    border-radius: var(--lf-border-radius);
    padding: var(--lf-spacing-medium);
    height: fit-content;
    position: sticky;
    top: var(--lf-spacing-medium);
}

.lf-parameter-controls,
.lf-view-controls {
    margin: var(--lf-spacing-large) 0;
    padding-top: var(--lf-spacing-medium);
    border-top: 1px solid var(--lf-border-color);
}

.lf-action-controls {
    margin: var(--lf-spacing-large) 0;
    padding-top: var(--lf-spacing-medium);
    border-top: 1px solid var(--lf-border-color);
    display: flex;
    gap: var(--lf-spacing-medium);
    justify-content: center;
}

/* Control Groups */
.lf-control-group {
    margin-bottom: var(--lf-spacing-medium);
}

.lf-control-group:last-child {
    margin-bottom: 0;
}

.lf-control-group label {
    display: block;
    margin-bottom: var(--lf-spacing-small);
    font-weight: 500;
    color: var(--lf-text-color);
}

/* Form Controls */
.lf-slider {
    width: 100%;
    height: var(--lf-control-height);
    -webkit-appearance: none;
    background: var(--lf-background-color);
    border-radius: var(--lf-border-radius);
    outline: none;
}

.lf-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--lf-primary-color);
    border-radius: 50%;
    cursor: pointer;
}

.lf-input {
    width: 100%;
    height: var(--lf-control-height);
    padding: 0 var(--lf-spacing-medium);
    border: 1px solid var(--lf-border-color);
    border-radius: var(--lf-border-radius);
    background: var(--lf-background-color);
    color: var(--lf-text-color);
    font-size: inherit;
}

.lf-select {
    width: 100%;
    height: var(--lf-control-height);
    padding: 0 var(--lf-spacing-medium);
    border: 1px solid var(--lf-border-color);
    border-radius: var(--lf-border-radius);
    background: var(--lf-background-color);
    color: var(--lf-text-color);
    cursor: pointer;
}

.lf-checkbox {
    margin-right: var(--lf-spacing-small);
}

/* Buttons */
.lf-button {
    height: var(--lf-control-height);
    padding: 0 var(--lf-spacing-large);
    border: 1px solid var(--lf-border-color);
    border-radius: var(--lf-border-radius);
    background: var(--lf-background-color);
    color: var(--lf-text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.lf-button:hover {
    background: var(--lf-control-background);
}

.lf-button-primary {
    background: var(--lf-primary-color);
    color: white;
    border-color: var(--lf-primary-color);
}

.lf-button-primary:hover {
    background: color-mix(in srgb, var(--lf-primary-color) 90%, black);
}

.lf-button-secondary {
    background: var(--lf-secondary-color);
    color: white;
    border-color: var(--lf-secondary-color);
}

.lf-button-secondary:hover {
    background: color-mix(in srgb, var(--lf-secondary-color) 90%, black);
}

/* Status Display */
.lf-status-display {
    margin-top: var(--lf-spacing-large);
    padding-top: var(--lf-spacing-medium);
    border-top: 1px solid var(--lf-border-color);
}

/* Value Display */
.lf-value-display {
    display: inline-block;
    margin-left: var(--lf-spacing-medium);
    font-family: monospace;
    color: var(--lf-text-color);
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .lf-main-layout {
        flex-direction: column;
    }
    
    .lf-control-panel {
        width: 100%;
        position: static;
    }
    
    .lf-action-controls {
        flex-direction: column;
    }
}