@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Inter:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Montserrat:wght@400;800&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #140706;
    color: #f0e2e2;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 16px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    font-family: 'JetBrains Mono', sans-serif;
}

.tech-font { 
    font-family: 'JetBrains Mono', sans-serif; 
}

.txt-red { color: #ef4444; }
.txt-blue { color: #3b82f6; }
.txt-yellow { color: #eab308; }
.txt-white { color: #ffffff; }
.txt-green {
    color: #35bc2e; 
}

/* --- Top bar --- */
.top-bar {
    width: 100%;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    z-index: 10;
}

.app-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.title {
    font-size: 24px;
    color: #ffffff;
    font-weight: bold;
    
}

.subtitle {
    font-size: 13px;
    color: #38bdf8;
    margin-top: 2px;
}

/* Buttons: Play, Pause, Reset */
.control {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn {
    border: none;
    background: transparent;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-play { color: #39f3af; }
.btn-play:hover { background: #39f3af; color: #ffffff; }
.btn-play svg { fill: currentColor; }

.btn-pause { color: #a3b4cc; }
.btn-pause:hover { background: #a3b4cc; color: #ffffff; }

.btn-reset { color: #fa3838; }
.btn-reset:hover { background: #fa3838; color: #ffffff; }

.btn-help {color: #ffffff; }
.btn-reset:help { background: #ffffff; color: #ffffff; }

/* Sliders */
.parameters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
}

.slider {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 192px;
}

.slider-label {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.0em;
    
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(96, 96, 110, 0.3);
    border-radius: 9999px;
    height: 6px;
    width: 100%;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #737374;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(223, 223, 223, 0.6);
    transition: transform 0.1s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }


/* --- Main area under the top bar --- */
.main-area {
    flex: 1;
    display: flex;
    gap: 16px;
    width: 100%;
    overflow: hidden;
}

.simulation-area {
    flex: 1;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#agent-simulation-canvas {
    width: 100%;
    height: 100%;
    display: block;
    background-color: #0a0d1a;
}

.canvas-legend {
    position: absolute;
    bottom: 16px;
    left: 16px;
    pointer-events: none;
    display: flex;
    gap: 16px;
    font-size: 16px;
    letter-spacing: 0.05em;
    background-color: rgba(2, 6, 23, 0.8);
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
}

.boundary-controls {
    position: absolute;
    top: 16px;
    left: 16px;

    display: flex;
    align-items: center;
    gap: 12px;

    background: rgba(2, 6, 23, 0.8);
    backdrop-filter: blur(16px);
    padding: 8px 12px;
    border-radius: 8px;
}

#btn-add-boundary {
    font-size: 16px;
    font-weight: bold;
    border: 1px solid rgba(255, 255, 255, 0.15); 
    background: transparent;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.current-infected-percentage {
    position: absolute;
    top: 16px;
    right: 16px;

    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 8px 12px;
    border-radius: 8px;

    background-color: rgba(2, 6, 23, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);

    font-size: 14px;
    pointer-events: none;
}

.metric {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.metric.r0 {
    opacity: 0.9;
}
.legend {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.dot-sus { background-color: #ffffff; }
.dot-inf { background-color: #ff0000; }
.dot-rec { background-color: #0062ff; }

/* --- Analysis area right to the agents simualtion --- */
.analysis-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    overflow-y: auto;
    padding-right: 4px;
}

.population-statistics, .epidemic-summary {
    padding: 16px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.sir-charts {
    padding: 16px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.charts {
    flex: 1;
}

.analysis-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #e0e8f1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.panel-title svg {
    width: 14px;
    height: 14px;
    color: #94a3b8;
}

.metrics-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 10px;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}




.val-bold-red {
    font-weight: bold;
    color: #fe0404;
}

.metric-row.txt-red .val-bold { color: #ef4444; }
.metric-row.txt-blue .val-bold { color: #3b82f6; }

.glass-panel {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}