/* --- Advanced BMI & Health Dashboard Specific Styles --- */

/* THE FIX: A dedicated wide container for this tool */
main.container-wide {
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px 15px;
    width: 100%;
}

:root {
    --info-color: #3b82f6; --info-light: #eff6ff; --warning-color: #f59e0b;
    --danger-color: #ef4444; --success-color: #10b981; --underweight-color: #3b82f6;
    --obese-color-1: #f97316; --obese-color-2: #dc2626;
    --risk-low: var(--success-color); --risk-moderate: var(--warning-color);
    --risk-high: var(--obese-color-1); --risk-very-high: var(--danger-color);
}

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 25px; }
.dashboard-panel { background-color: var(--secondary-bg); border-radius: 16px; display: flex; flex-direction: column; border: 1px solid var(--border-color); overflow: hidden; }
.panel-header { padding: 25px 30px; }
.panel-content { padding: 0 30px 30px 30px; display: flex; flex-direction: column; flex-grow: 1; }
.panel-title { font-size: 22px; font-weight: 700; margin: 0; text-align: center; color: var(--heading-color); }
fieldset { border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
legend { font-size: 16px; font-weight: 600; color: var(--accent-color); padding: 0 10px; }
.input-group { margin-bottom: 18px; position: relative; }
.input-group label { display: flex; align-items: center; font-weight: 500; color: var(--text-color); margin-bottom: 8px; font-size: 14px; }
.input-group .tooltip-icon { margin-left: 8px; color: var(--info-color); cursor: help; width: 1em; height: 1em; }
.input-group [data-lucide] { position: absolute; top: 42px; left: 14px; color: var(--text-color); font-size: 14px; width: 1em; height: 1em; }
.input-group input, .input-group select { padding-left: 40px; }
.input-group .height-imperial-inputs { display: flex; gap: 10px; }
.input-group input.input-error { border-color: var(--danger-color); }
.toggle-group { display: flex; border-radius: var(--border-radius-sm); overflow: hidden; border: 1px solid var(--border-color); }
.toggle-group button { flex: 1; padding: 12px; border: none; background-color: var(--secondary-bg); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-color); transition: background-color 0.2s, color 0.2s; }
.toggle-group button.active { background-color: var(--accent-color); color: white; }
.action-buttons { display: flex; gap: 15px; margin-top: auto; }
.btn-secondary { background-color: #6c757d; color: white; flex: 1; border: none; padding: 12px; border-radius: var(--border-radius-sm); font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-secondary:hover { background-color: #5a6268; }
.bmi-result-display { text-align: center; margin-bottom: 25px;}
.bmi-value { font-size: clamp(48px, 10vw, 64px); font-weight: 800; line-height: 1.1; }
.bmi-category { font-size: 20px; font-weight: 600; padding: 4px 16px; border-radius: 99px; display: inline-block; color: #fff; margin-top: 5px; }
.bmi-scale-container { display: flex; width: 100%; height: 12px; border-radius: 6px; overflow: hidden; margin: 20px 0 10px 0; cursor: pointer; }
.bmi-scale-segment { flex-grow: 1; transition: transform 0.3s, filter 0.3s; }
.bmi-scale-segment:hover { filter: brightness(1.1); transform: scaleY(1.3); }
.bmi-scale-segment.active { transform: scaleY(1.8); z-index: 2; filter: brightness(1.05); }
.underweight { background-color: var(--underweight-color); } .normal { background-color: var(--success-color); } .overweight { background-color: var(--warning-color); } .obese1 { background-color: var(--obese-color-1); } .obese2 { background-color: var(--danger-color); }
#bmi-scale-info { font-size: 13px; color: var(--text-color); height: 1.5em; font-weight: 500; }
.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.card-title { font-size: 18px; font-weight: 700; margin: 25px 0 15px 0; display: flex; align-items: center; gap: 10px; color: var(--heading-color); border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.card-title:first-of-type { margin-top: 0; }
.metric-item { display: flex; align-items: center; gap: 12px; background-color: var(--input-bg); padding: 12px; border-radius: 10px; border: 1px solid var(--border-color);}
.metric-item [data-lucide] { color: var(--accent-color); background-color: var(--info-light); width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; padding: 8px; }
.metric-item .label { font-size: 14px; font-weight: 500; color: var(--text-color); }
.metric-item .value { font-size: 20px; font-weight: 600; color: var(--heading-color); }
.metric-item .unit { font-size: 13px; margin-left: 4px; color: var(--text-color); }
.goal-metric { margin-top:15px; background-color: var(--info-light); }
.goal-metric [data-lucide] { background-color: var(--accent-color); color: white; }
.goal-metric .value { font-size: 24px; }
.table-container { overflow-x: auto; }
.health-risk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.health-risk-table th, .health-risk-table td { padding: 12px 8px; text-align: center; border: 1px solid var(--border-color); }
.health-risk-table th { font-weight: 600; font-size: 12px; background-color: var(--input-bg); text-transform: uppercase; color: var(--text-color);}
.health-risk-table td:first-child { text-align: left; font-weight: 500; }
.risk-indicator { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 6px; } /* Added margin-right */
.highlight-col { background-color: var(--info-light); }
.macro-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 15px 0; }
.macro-bar-segment { height: 100%; transition: width 0.3s ease; }
.macro-legend { display: flex; justify-content: space-around; font-size: 13px; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-color-box { width: 12px; height: 12px; border-radius: 3px; }
#results-column-child { grid-column: 1 / -1; }
.child-result-panel { text-align: center; padding: 30px; }
.child-result-panel .percentile { font-size: 48px; font-weight: 700; color: var(--accent-color); }
.child-result-panel .category { font-size: 24px; font-weight: 600; }
.panel-subtitle { font-size:13px; color:var(--text-color); margin:-15px 0 15px 0; }

/* STYLES FOR THE NEW INFO/SEO SECTION */
.info-card { margin-top: 25px; }
.info-card h2, .info-card h3 { text-align: left; justify-content: flex-start; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.info-card h2 { font-size: 1.8rem; }
.info-card h3 { font-size: 1.4rem; margin-top: 25px; }
.info-card p { line-height: 1.7; }
.definition-list-aligned { display: grid; grid-template-columns: max-content 1fr; gap: 15px 25px; margin-top: 20px; align-items: baseline; }
.definition-list-aligned dt { font-weight: 700; color: var(--heading-color); }
.definition-list-aligned dd { margin: 0; line-height: 1.7; color: var(--text-color); }

@media (max-width: 1023px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .results-panel .panel-header { cursor: pointer; position: relative; }
    .results-panel .panel-header::after { content: ''; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center; background-color: var(--text-color); width: 24px; height: 24px; position: absolute; right: 30px; top: 50%; transform: translateY(-50%) rotate(0deg); transition: transform 0.3s ease, background-color 0.3s ease; }
    .results-panel.is-open .panel-header::after { transform: translateY(-50%) rotate(180deg); background-color: var(--accent-color); }
    .results-panel .panel-content { display: none; }
    .results-panel.is-open .panel-content { display: flex; }
    .results-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .definition-list-aligned { grid-template-columns: 1fr; gap: 5px 0; }
}