/**
 * MSW Activity Cost vs Calories Burned Tracker
 * v1.1.0 - Senior-friendly, responsive
 */

.msw-activity-tracker { max-width: 900px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 18px; line-height: 1.6; color: #2c3e50; }
.msw-activity-tracker *, .msw-activity-tracker *::before, .msw-activity-tracker *::after { box-sizing: border-box; }

/* HEADER */
.msw-activity-tracker .msw-calc-header { text-align: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 3px solid #27ae60; }
.msw-activity-tracker .msw-calc-header h2 { font-size: 30px; color: #2c3e50; margin: 0 0 8px; }
.msw-calc-subtitle { font-size: 17px; color: #666; margin: 0; }

/* INFO BANNER */
.msw-info-banner { display: flex; align-items: flex-start; gap: 15px; background: #eafaf1; border: 1px solid #c8e6d5; border-radius: 10px; padding: 20px; margin-bottom: 24px; }
.msw-info-icon { font-size: 28px; flex-shrink: 0; }
.msw-info-text { font-size: 16px; color: #2d6a4f; line-height: 1.5; }

/* SECTIONS */
.msw-section { margin-bottom: 28px; }
.msw-section h3 { font-size: 22px; color: #2c3e50; margin: 0 0 8px; }
.msw-section-desc { font-size: 16px; color: #666; margin: 0 0 16px; }

/* WEIGHT INPUT */
.msw-weight-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.msw-weight-input-group label { display: block; font-size: 16px; font-weight: 600; color: #555; margin-bottom: 6px; }
.msw-weight-field { display: flex; align-items: center; gap: 8px; }
.msw-weight-field input { width: 120px; padding: 12px 14px; font-size: 18px; border: 2px solid #d1d5db; border-radius: 8px; text-align: center; }
.msw-weight-field input:focus { border-color: #27ae60; outline: none; box-shadow: 0 0 0 3px rgba(39,174,96,0.15); }
.msw-field-note { font-size: 13px; color: #999; margin: 6px 0 0; }

/* UNIT TOGGLE */
.msw-unit-toggle { display: flex; border: 2px solid #d1d5db; border-radius: 8px; overflow: hidden; }
.msw-unit-btn { padding: 10px 18px; font-size: 16px; font-weight: 700; border: none; background: #f8f9fa; color: #888; cursor: pointer; transition: all 0.2s; }
.msw-unit-btn.active { background: #27ae60; color: #fff; }
.msw-unit-btn:hover:not(.active) { background: #ecf0f1; }

/* ACTIVITY CARD */
.msw-activity-card { background: #fff; border: 2px solid #e0e6ed; border-radius: 12px; padding: 20px; margin-bottom: 14px; transition: border-color 0.2s; }
.msw-activity-card:hover { border-color: #27ae60; }
.msw-activity-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.msw-activity-number { font-size: 16px; font-weight: 700; color: #27ae60; }
.msw-remove-activity { width: 36px; height: 36px; border: 2px solid #e0e6ed; border-radius: 50%; background: #fff; color: #e74c3c; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.msw-remove-activity:hover { background: #e74c3c; color: #fff; border-color: #e74c3c; }

/* FORM GRID */
.msw-activity-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.msw-form-group-wide { grid-column: 1 / -1; }
.msw-form-group label { display: block; font-size: 14px; font-weight: 600; color: #555; margin-bottom: 4px; }
.msw-form-group select, .msw-form-group input { width: 100%; font-size: 17px; border: 2px solid #d1d5db; border-radius: 8px; background: #fff; color: #2c3e50; }
.msw-form-group select:focus, .msw-form-group input:focus { border-color: #27ae60; outline: none; box-shadow: 0 0 0 3px rgba(39,174,96,0.15); }

/* ADD BUTTON */
.msw-btn-add { display: block; width: 100%; padding: 14px; font-size: 18px; font-weight: 700; border: 3px dashed #c8e6d5; border-radius: 12px; background: #f0faf4; color: #27ae60; cursor: pointer; transition: all 0.2s; }
.msw-btn-add:hover { background: #d4efdf; border-color: #27ae60; }

/* RESULTS */
.msw-results-section { background: #f8f9fa; border: 2px solid #e0e6ed; border-radius: 14px; padding: 24px; }

/* SUMMARY GRID */
.msw-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.msw-summary-card { background: #fff; border: 2px solid #e0e6ed; border-radius: 12px; padding: 16px; text-align: center; }
.msw-card-icon { font-size: 28px; margin-bottom: 4px; }
.msw-card-label { font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.msw-card-value { font-size: 24px; font-weight: 800; color: #2c3e50; margin: 4px 0; }
.msw-card-sublabel { font-size: 13px; color: #27ae60; font-weight: 600; }

/* COMPARISON TABLE */
.msw-comparison-section { margin-bottom: 24px; }
.msw-comparison-section h4 { font-size: 20px; margin: 0 0 12px; }
.msw-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.msw-comparison-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.msw-comparison-table th { background: #2c3e50; color: #fff; padding: 12px 14px; text-align: left; font-size: 14px; white-space: nowrap; }
.msw-comparison-table td { padding: 12px 14px; border-bottom: 1px solid #e0e6ed; }
.msw-comparison-table tr:hover { background: #f0faf4; }
.msw-total-row { background: #eafaf1 !important; }
.msw-total-row td { font-weight: 700; border-top: 2px solid #27ae60; }

/* INSIGHTS */
.msw-insights-section { margin-bottom: 20px; }
.msw-insights-section h4 { font-size: 20px; margin: 0 0 12px; }
.msw-insight-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid #e0e6ed; border-radius: 10px; margin-bottom: 10px; }
.msw-insight-icon { font-size: 24px; flex-shrink: 0; }
.msw-insight-text { font-size: 16px; color: #444; line-height: 1.5; }

/* ACTION BUTTONS */
.msw-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: 2px solid #e0e6ed; }
.msw-btn { font-size: 17px; font-weight: 600; padding: 12px 24px; border: none; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.msw-btn-save { background: #3498db; color: #fff; }
.msw-btn-save:hover { background: #2980b9; }
.msw-btn-print { background: #8e44ad; color: #fff; }
.msw-btn-print:hover { background: #7d3c98; }

/* PRINT */
@media print {
    .msw-btn, .msw-remove-activity, .msw-btn-add, .msw-info-banner, .msw-actions { display: none !important; }
    .msw-activity-tracker { max-width: 100%; }
    .msw-activity-card, .msw-summary-card, .msw-insight-item { break-inside: avoid; border: 1px solid #ccc; }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .msw-summary-grid { grid-template-columns: 1fr 1fr; }
    .msw-activity-form-grid { grid-template-columns: 1fr; }
    .msw-form-group-wide { grid-column: 1; }
}
@media (max-width: 480px) {
    .msw-summary-grid { grid-template-columns: 1fr; }
}