/* --- UNIFIED STYLESHEET (style.css) --- */

/* ----------------------------------------
   Base, Header & Tab Styling
   ---------------------------------------- */
body { font-family: 'Open Sans', sans-serif; line-height: 1.6; color: #333; padding-top: 20px; }
.tasks-heading { text-align: center; font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #444; }
.v-tabs ul { display: flex; justify-content: left; list-style: none; padding: 0; margin: 0; border-bottom: 1px solid #ddd; }
.v-tabs li a { display: inline-block; padding: 0.75rem 1.25rem; text-decoration: none; color: #333; font-weight: 500; cursor: pointer; }
.v-tabs li.is-active a { color: #3273dc; border-bottom: 3px solid #3273dc; }
.v-tabs a:hover { background-color: #f0f0f0; border-radius: 4px; }
.subheading-box { background-color: #f7fdf7; border-left: 4px solid #3c763d; padding: 0.75rem 1.5rem; margin: 1.5rem 0; border-radius: 4px; }
.subheading-box .title { color: #3c763d; font-size: 1.25rem; margin: 0; font-weight: 600; }

/* ----------------------------------------
   Main Content Panels & Observation Box
   ---------------------------------------- */
.white-boxed-panel { background-color: #fff; border: 1px solid #dbdbdb; border-radius: 8px; padding: 2rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); height: 100%; }
.v-datalist-container.components-list { border: 2px solid #8dc63f; border-radius: 8px; padding: 1.5rem; background-color: #fafafa; height: 100%; }
.v-datalist-title { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #eee; text-align: center; font-weight: 600; color: #363636; }
#observations .placeholder { color: #777; font-style: italic; }
#observations h4 { font-weight: 600; color: #363636; margin-top: 1rem; }
#observations .result-highlight { font-weight: bold; color: #3273dc; font-family: monospace; font-size: 1.1em; background-color: #eef4ff; padding: 2px 5px; border-radius: 4px; }
#observations hr { margin: 1.5rem 0; background-color: #eee; }
.theory-box { margin-top: 1.5rem; padding: 1rem; background-color: #f5f5f5; border-left: 4px solid #b5b5b5; border-radius: 4px; }
.theory-box h5 { font-weight: bold; margin-bottom: 0.5rem; }
.theory-box p, .theory-box ol { font-size: 0.9em; line-height: 1.5; }
.theory-box ol { padding-left: 20px; }

/* ----------------------------------------
   General & Shared Styles
   ---------------------------------------- */
.charts-container { display: flex; justify-content: space-around; gap: 20px; flex-wrap: wrap; margin-top: 2rem; width: 100%; }
.chart-wrapper { flex: 1; min-width: 300px; max-width: 700px; height: 350px; position: relative; margin: 0 auto; }
.controls-container { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; padding: 1rem; background-color: #f9f9f9; border-radius: 8px; margin-bottom: 1.5rem; }
.control-item { display: flex; flex-direction: column; gap: 5px; }
.control-item label { font-size: 0.9em; font-weight: 500; }
.control-item input, .control-item select { padding: 8px; border-radius: 4px; border: 1px solid #ccc; width: 200px; }
.button.is-primary { background-color: #3273dc; }
.button.is-primary:hover { background-color: #2759a5; }

/* ----------------------------------------
   Exp 1: Convergence Styles
   ---------------------------------------- */
.convergence-description { background-color: #f5f5f5; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; border-left: 4px solid #3273dc; }
.convergence-description .image-container { text-align: center; margin-top: 1rem; }
.convergence-description img { max-width: 60%; height: auto; border: 1px solid #ddd; border-radius: 4px; }
.convergence-controls { background-color: transparent; border: 1px dashed #ccc; }
#observations .error { color: #ff3860; font-weight: bold; }

/* ----------------------------------------
   Exp 2: WLLN Styles (UPDATED SECTION)
   ---------------------------------------- */
.wlln-controls {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items to the top */
    gap: 40px;
    flex-wrap: wrap;
    background-color: #fdfdfd;
    padding: 1.25rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid #e0e0e0;
}
.wlln-controls .control-item {
    align-items: flex-start;
    gap: 8px;
}
.wlln-controls .control-item label {
    font-size: 0.9em;
    font-weight: 500;
    color: #555;
    margin: 0;
}
/* ADDED STYLE FOR BLANK LABEL */
.wlln-controls .control-item label.blank-label {
    visibility: hidden;
}
.wlln-controls .control-item select {
    padding: 10px 15px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: white;
    font-size: 0.95em;
    min-width: 200px;
}
.wlln-controls .parameters {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%; /* Ensure container takes full height */
}
.wlln-controls .param-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wlln-controls .param-item label {
    font-size: 1.1em;
    font-weight: 500;
    color: #444;
}
.wlln-controls .param-item input {
    width: 70px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-align: center;
    font-size: 1em;
}
.slider-container { padding: 1rem 0; text-align: center; }
.slider-container label { display: block; margin-bottom: 10px; font-weight: 500; }
.slider { width: 80%; }
.run-controls { text-align: center; padding-top: 1.5rem; border-top: 1px solid #eee; }

.observation-stats p { margin-bottom: 1em; }
.observation-stats span { font-weight: bold; color: #3273dc; font-family: monospace; font-size: 1.1em; background-color: #eef4ff; padding: 2px 5px; border-radius: 4px; }
#obs-context, #obs-realtime, #obs-conclusion { margin-bottom: 1.5rem; }

/* ----------------------------------------
   Responsiveness
   ---------------------------------------- */
@media (max-width: 768px) {
    .white-boxed-panel { padding: 1.5rem; }
    .chart-wrapper { height: 300px; }
    .wlln-controls, .convergence-controls { flex-direction: column; align-items: stretch; gap: 25px; }
    .wlln-controls .control-item select, .wlln-controls .param-item input { width: 100%; }
    .convergence-description img { max-width: 100%; }
}