/* :root variables removed to inherit from style.css */
/* body styling removed to inherit from style.css */

/* Styles specific to risk_return_modeler.html */
/* Use global variables like var(--apple-primary), var(--apple-content-background) etc. */

.container { max-width: 1400px; margin: 0 auto; } /* This might be fine if a wider container is needed for this page specifically */
header { text-align: center; margin-bottom: 2rem; }
/* header h1 color will be inherited from style.css body or h1 styles */
/* header p color will be inherited */

/* Dashboard Section */
.dashboard-container {
  display: grid;
  grid-template-columns: 350px 1fr; /* This layout structure is specific to the page */
  gap: 2rem;
  background: var(--apple-content-background); /* Use global content background */
  padding: 2rem;
  border-radius: var(--border-radius-large); /* Use global large radius for consistency with content-card */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); /* Use global shadow */
  margin-bottom: 2rem;
  border: 1px solid var(--apple-border); /* Add border like content-card */
}

.controls-panel h2, .results-panel h2 { font-size: 1.5rem; margin-top: 0; margin-bottom: 1.5rem; }
.results-panel h2 span { color: var(--apple-primary); } /* Use global primary color */

.control-group { margin-bottom: 1.5rem; }
.control-group label { font-weight: 500; display: block; margin-bottom: 0.5rem; } /* Aligns with .form-label */
.control-group label span { font-weight: bold; color: var(--apple-primary); } /* Use global primary color */
input[type="range"] { width: 100%; cursor: pointer; accent-color: var(--apple-primary); } /* Style range input */

.presets { display: flex; gap: 0.5rem; margin: 1rem 0; }
.preset-btn { /* Style to look like a small outline button */
  flex: 1; padding: 0.375rem 0.75rem; font-size: 0.8rem;
  border: 1px solid var(--apple-primary);
  background-color: transparent;
  color: var(--apple-primary);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: all 0.2s;
}
.preset-btn:hover, .preset-btn.active {
  background-color: var(--apple-primary);
  color: white;
}

/* UPDATED CARD LAYOUT */
.probability-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card { /* These are small stat cards, let's style them similar to performance-metric */
  background-color: var(--apple-light-gray); /* Use global light gray */
  padding: 1rem;
  border-radius: var(--border-radius-standard); /* Use global standard radius */
  text-align: center;
  border: 1px solid var(--apple-border); /* Use global border color */
}
.card h3 { /* Subdued heading for the stat card */
    margin: 0 0 0.25rem 0;
    font-size: 0.875rem;
    color: var(--apple-secondary); /* Use global secondary text color */
    font-weight: 400;
}
.card p { /* The main stat value */
    margin: 0;
    font-size: 1.5rem; /* Match .performance-metric p */
    font-weight: 600;
    line-height: 1.2;
    color: var(--apple-dark); /* Default color for the stat value */
}

/* Specific text colors for stat cards, using global theme colors where appropriate */
.card-positive p { color: var(--apple-success); } /* Global success green */
.card-target p { color: var(--apple-primary); } /* Global primary blue */
.card-loss-any p { color: #fd7e14; } /* Orange - can keep if distinct, or map to a global warning/error */
.card-loss-major p { color: var(--apple-error); } /* Global error red */
.card-loss-severe p { color: #b02a37; } /* Darker red - can keep if distinct, or use var(--apple-error) and adjust lightness if needed */
.card-loss-total p { color: var(--apple-dark); } /* Global dark for total loss, or pure black if preferred */

/* Visualizations Section */
.visualizations-container { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }

.chart-wrapper {
  background: var(--apple-content-background);
  padding: 1.5rem;
  border-radius: var(--border-radius-large);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
  position: relative; /* This is crucial for the fix */
  min-height: 400px;
  border: 1px solid var(--apple-border);
}

/* --- THIS IS THE FIX --- */
/* Force the canvas to be constrained by its parent wrapper */
.chart-wrapper canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Chart.js options already add padding, but this ensures it fits edge-to-edge within the wrapper */
  box-sizing: border-box; 
  padding: 1.5rem; /* Match the wrapper's padding so chart elements don't hit the edge */
}
/* --- END OF FIX --- */

.chart-wrapper h3 {
  text-align: center;
  font-weight: 500;
  margin: 0 0 1.5rem 0;
  color: var(--apple-dark);
  /* Add relative position to ensure title appears ON TOP of the canvas */
  position: relative; 
  z-index: 10;
}

/* Education Section */
.education-container {
  background: var(--apple-content-background);  /* Use global content background */
  padding: 2rem;  /* Align with .content-card padding */
  border-radius: var(--border-radius-large); /* Use global large radius */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); /* Use global shadow */
  border: 1px solid var(--apple-border); /* Add border */
}
.tabs { font-size: 0.9rem; }
.tabs input[type="radio"] { display: none; }
.tabs label {
  display: inline-block; padding: 0.75rem 1.25rem; margin-right: 0.5rem; cursor: pointer;
  border: 1px solid var(--apple-border);
  border-bottom: none;
  border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; /* Use global small radius */
  background: var(--apple-light-gray); /* Use a light inactive tab background */
  color: var(--apple-secondary);
  position: relative;
  bottom: -1px;
}
.tabs input:checked + label {
  background: var(--apple-content-background); /* Active tab matches content card background */
  color: var(--apple-primary); /* Active tab text uses primary color */
  font-weight: 500;
  border-color: var(--apple-border);
}
.tab-content {
  display: none;
  padding: 1.5rem;
  border: 1px solid var(--apple-border);
  border-radius: 0 var(--border-radius-small) var(--border-radius-small) var(--border-radius-small); /* Match tab radius */
  background: var(--apple-content-background); /* Ensure content area has bg */
}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3 { display: block; }

/* Table styling within education section - align with global table if possible or make harmonious */
.education-container table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.9rem; }
.education-container th, .education-container td {
    padding: 0.625rem 1rem; /* Match .allocation-table cells */
    text-align: left;
    border-bottom: 1px solid var(--apple-border);
}
.education-container thead th {
    background-color: var(--apple-light-gray); /* Match .allocation-table header */
    font-weight: 500;
    color: var(--apple-dark);
}
.education-container tbody tr:hover { background-color: var(--apple-light-gray); opacity: 0.7; } /* Slight hover effect */
.education-container td:nth-child(2), .education-container td:nth-child(3) { text-align: center; } /* Keep specific alignment if needed */

.education-container ul { padding-left: 20px; }
.education-container a { color: var(--apple-primary); font-weight: 500; text-decoration: none; }
.education-container a:hover { text-decoration: underline; }

/* Footer is part of base.html, so its styling will be inherited */
/* Remove page-specific footer styles if any were here */

/* Responsive Design */
@media (max-width: 1200px) {
  .dashboard-container, .visualizations-container { grid-template-columns: 1fr; }
}
@media (max-width: 992px) {
  .probability-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  body { padding: 1rem; }
  .dashboard-container { grid-template-columns: 1fr; }
  .probability-cards { grid-template-columns: 1fr; }
  .tabs label { display: block; width: auto; margin-bottom: 5px; }
  #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3 { border-radius: 5px; }
  .chart-wrapper { height: 350px; }
}