/*
  Copyright 2025 John Greth <https://github.com/jgreth0>

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
*/

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header Styles */
.header {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header h1 {
    color: #2c3e50;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.subtitle {
    color: #2c3e50;
    font-size: 1.1rem;
}

/* Controls Section */
.controls {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.control-buttons {
    grid-column: span 2;
    text-align: center;
}

/* Schedule Selection */
.schedule-selection {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.schedule-selection h2,
.rate-adjustment h2 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.radio-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    background: white;
    border-radius: 6px;
    border: 2px solid #ecf0f1;
    transition: all 0.3s ease;
}

.radio-item:hover {
    border-color: #3498db;
    background-color: #f8f9fa;
}

.radio-item input[type="radio"] {
    display: none;
}

.radio-custom {
    width: 18px;
    height: 18px;
    border: 2px solid #7f8c8d;
    border-radius: 50%;
    margin-right: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.radio-item input[type="radio"]:checked + .radio-custom {
    border-color: #3498db;
    background-color: #3498db;
}

/* Schedule type specific colors when checked */
.radio-item:has(input[value="FR"]:checked) .radio-custom {
    border-color: #e74c3c;
    background-color: #e74c3c;
}

.radio-item:has(input[value="VR"]:checked) .radio-custom {
    border-color: #f39c12;
    background-color: #f39c12;
}

.radio-item:has(input[value="FI"]:checked) .radio-custom {
    border-color: #27ae60;
    background-color: #27ae60;
}

.radio-item:has(input[value="VI"]:checked) .radio-custom {
    border-color: #9b59b6;
    background-color: #9b59b6;
}

.radio-item input[type="radio"]:checked + .radio-custom::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.radio-label {
    font-weight: 500;
    color: #2c3e50;
}

/* Schedule Type Colors */
.radio-item:has(input[value="FR"]:checked) {
    border-color: #e74c3c;
    background-color: #fdf2f2;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.3);
}

.radio-item:has(input[value="VR"]:checked) {
    border-color: #f39c12;
    background-color: #fef9e7;
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

.radio-item:has(input[value="FI"]:checked) {
    border-color: #27ae60;
    background-color: #f0f9f4;
    box-shadow: 0 0 10px rgba(39, 174, 96, 0.3);
}

.radio-item:has(input[value="VI"]:checked) {
    border-color: #9b59b6;
    background-color: #f7f1f8;
    box-shadow: 0 0 10px rgba(155, 89, 182, 0.3);
}

/* Rate Adjustment */
.rate-adjustment {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.slider-container {
    position: relative;
}

.slider-label {
    display: block;
    margin-bottom: 15px;
    font-weight: 500;
    color: #2c3e50;
}

.slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #ecf0f1;
    outline: none;
    -webkit-appearance: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3498db;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3498db;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.slider-marks {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.9rem;
    color: #2c3e50;
}

/* Simulation and Graph Container */
.simulation-graph-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 30px;
    margin-bottom: 40px;
}

/* Simulation Area */
.simulation {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.simulation-display {
    position: relative;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fireworks-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.response-area {
    z-index: 2;
}

/* Buttons */
.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary {
    background-color: #1f618d;
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background-color: #154360;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(31, 97, 141, 0.3);
}

.btn-primary:disabled {
    background-color: #7f8c8d;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background-color: #34495e;
    color: white;
}

.btn-secondary:hover {
    background-color: #2c3e50;
}

.btn-tertiary {
    background-color: #34495e;
    color: white;
    text-decoration: none;
    display: inline-block;
    margin-left: 10px;
}

.btn-tertiary:hover {
    background-color: #2c3e50;
}

.btn-large {
    padding: 20px 40px;
    font-size: 1.2rem;
    border-radius: 50px;
}

/* Graph Section */
.graph-section {
    display: flex;
    flex-direction: column;
}

.graph-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    height: 100%;
}

.graph-container h2 {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 1.3rem;
    text-align: center;
}

.graph-box {
    position: relative;
    background: #f8f9fa;
    border: 2px solid #ecf0f1;
    border-radius: 6px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#response-graph {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    max-width: 100%;
    height: auto;
}

.graph-axes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.y-axis-label {
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-size: 0.9rem;
    color: #2c3e50;
    font-weight: 500;
    white-space: nowrap;
}

.x-axis-label {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    color: #2c3e50;
    font-weight: 500;
}

/* Results Section */
.results {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.stat-item {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #3498db;
}

/* Dynamic border colors based on current schedule */
body.schedule-FR .stat-item {
    border-left-color: #e74c3c;
}

body.schedule-VR .stat-item {
    border-left-color: #f39c12;
}

body.schedule-FI .stat-item {
    border-left-color: #27ae60;
}

body.schedule-VI .stat-item {
    border-left-color: #9b59b6;
}

.stat-item h3 {
    color: #2c3e50;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: #2c3e50;
}

/* Fireworks Animation Styles */
.firework {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: firework-burst 2s ease-out forwards;
}

@keyframes firework-burst {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    20% {
        transform: scale(1);
        opacity: 1;
    }
    40% {
        transform: scale(2);
        opacity: 0.8;
    }
    60% {
        transform: scale(1.5);
        opacity: 0.6;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}