/* HealthAdvisor - Light Health Theme */
:root {
  --bg-primary: #f5f7fa; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-hover: #e8f4f8;
  --text-primary: #1a202c; --text-secondary: #4a5568; --text-muted: #a0aec0;
  --accent: #3182ce; --accent-hover: #2c5282; --border: #e2e8f0;
  --success: #38a169; --error: #e53e3e; --warning: #d69e2e;
  --radius: 8px; --radius-lg: 12px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg-primary); color: var(--text-primary); font: 16px/1.6 'Roboto', -apple-system, sans-serif; min-height: 100vh; }
input, select, button, textarea { font: inherit; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px var(--space-md); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1); }
button { cursor: pointer; transition: all 0.2s; }
button:hover:not(:disabled) { background: var(--bg-hover); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
.container { max-width: 900px; margin: 0 auto; padding: var(--space-lg); }
.container-wide { max-width: 1100px; }
.header { text-align: center; padding: 40px var(--space-lg); margin-bottom: var(--space-lg); }
.header h1 { font-size: 28px; color: var(--accent); margin-bottom: var(--space-sm); }
.header p { color: var(--text-secondary); }
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-md); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.flex { display: flex; align-items: center; gap: var(--space-sm); }
.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }

/* Buttons */
.btn { padding: 12px 24px; border-radius: var(--radius); font-weight: 500; border: none; }
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-secondary { background: transparent; border: 1px solid var(--border); }
.btn-full { width: 100%; }

/* Forms */
.form-group { margin-bottom: var(--space-md); }
.form-group label { display: block; margin-bottom: var(--space-sm); font-weight: 500; color: var(--text-secondary); }
.form-group input, .form-group select, .form-group textarea { width: 100%; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* Chat */
.chat-container { display: flex; flex-direction: column; height: calc(100vh - 200px); min-height: 400px; }
.chat-messages { flex: 1; overflow-y: auto; padding: var(--space-md); }
.message { max-width: 80%; margin-bottom: var(--space-md); padding: var(--space-md); border-radius: var(--radius-lg); }
.message-user { background: var(--accent); color: white; margin-left: auto; border-bottom-right-radius: 4px; }
.message-assistant { background: var(--bg-hover); border-bottom-left-radius: 4px; }
.message-sources { font-size: 12px; margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid rgba(0,0,0,0.1); color: var(--text-secondary); }
.message-safety { background: rgba(229, 62, 62, 0.1); border: 1px solid var(--error); }
.chat-input { display: flex; gap: var(--space-sm); padding: var(--space-md); border-top: 1px solid var(--border); background: var(--bg-card); }
.chat-input input { flex: 1; }
.suggestions { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: 0 var(--space-md) var(--space-md); }
.suggestion-btn { padding: 8px 16px; font-size: 14px; background: var(--bg-card); border: 1px solid var(--accent); color: var(--accent); border-radius: 20px; }
.suggestion-btn:hover { background: var(--accent); color: white; }

/* Progress & Goals */
.progress-bar { height: 10px; background: var(--border); border-radius: 5px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--success)); transition: width 0.3s; }
.goal-card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-md); align-items: center; padding: var(--space-lg); }
.goal-card.completed .goal-progress-ring { --ring-color: var(--success); }
.goal-progress-ring { width: 80px; height: 80px; position: relative; }
.goal-progress-ring svg { transform: rotate(-90deg); }
.goal-progress-ring circle { fill: none; stroke-width: 8; }
.goal-progress-ring .bg { stroke: var(--border); }
.goal-progress-ring .fg { stroke: var(--ring-color, var(--accent)); stroke-linecap: round; transition: stroke-dashoffset 0.5s; }
.goal-progress-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.goal-info { min-width: 0; }
.goal-info h3 { font-size: 16px; margin-bottom: 4px; }
.goal-info .category { font-size: 12px; color: var(--text-muted); margin-bottom: var(--space-sm); }
.goal-info .target { font-size: 14px; color: var(--text-secondary); }
.goal-actions { display: flex; flex-direction: column; gap: var(--space-sm); }
@media (max-width: 600px) { .goal-card { grid-template-columns: 1fr; text-align: center; } .goal-progress-ring { margin: 0 auto; } .goal-actions { flex-direction: row; justify-content: center; } }

/* Onboarding */
.step-indicator { display: flex; justify-content: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.step { width: 32px; height: 32px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-weight: 500; color: var(--text-muted); }
.step.active { background: var(--accent); color: white; }
.step.completed { background: var(--success); color: white; }
.profile-select { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); }
.profile-option { padding: var(--space-lg); border: 2px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; text-align: center; transition: all 0.2s; }
.profile-option:hover { border-color: var(--accent); background: var(--bg-hover); }
.profile-option.selected { border-color: var(--accent); background: rgba(49, 130, 206, 0.1); }
.profile-option h3 { margin-bottom: var(--space-sm); }
.profile-option p { font-size: 14px; color: var(--text-secondary); }

/* States */
.loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 40px; color: var(--text-secondary); }
.spinner { width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.alert { padding: var(--space-md); border-radius: var(--radius); margin-bottom: var(--space-md); }
.alert-success { background: rgba(56, 161, 105, 0.1); border: 1px solid var(--success); color: var(--success); }
.alert-error { background: rgba(229, 62, 62, 0.1); border: 1px solid var(--error); color: var(--error); }
.hidden { display: none !important; }

/* Weekly Plan */
.plan-grid { display: grid; grid-template-columns: repeat(7, minmax(100px, 1fr)); gap: var(--space-sm); overflow-x: auto; padding-bottom: var(--space-sm); }
@media (max-width: 900px) { .plan-grid { grid-template-columns: repeat(7, minmax(120px, 1fr)); } }
.plan-day { background: var(--bg-hover); border-radius: var(--radius); padding: var(--space-sm); min-height: 100px; min-width: 100px; }
.plan-day-header { font-weight: 600; font-size: 12px; text-align: center; padding: var(--space-sm); background: var(--accent); color: white; border-radius: var(--radius) var(--radius) 0 0; margin: calc(-1 * var(--space-sm)); margin-bottom: var(--space-sm); }
.activity-item { background: var(--bg-card); border-radius: var(--radius); padding: var(--space-sm); margin-bottom: var(--space-sm); font-size: 12px; border-left: 3px solid var(--accent); }
.activity-item.completed { opacity: 0.7; border-left-color: var(--success); background: rgba(56, 161, 105, 0.05); }
.activity-info { margin-bottom: 6px; }
.activity-info strong { display: block; font-size: 13px; margin-bottom: 2px; }
.activity-time, .activity-duration { font-size: 10px; color: var(--text-muted); margin-right: var(--space-sm); }
.activity-actions { display: flex; gap: 4px; flex-wrap: wrap; }

/* Navigation - consistent across all pages */
.main-nav { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-lg); background: var(--bg-card); border-bottom: 1px solid var(--border); margin-bottom: var(--space-md); }
.main-nav .logo { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; text-decoration: none; }
.main-nav .logo .logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3); }
.main-nav .logo .logo-text { background: linear-gradient(135deg, var(--accent) 0%, #38a169 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.main-nav .logo:hover { text-decoration: none; }
.main-nav .nav-links { display: flex; gap: var(--space-sm); }
.main-nav .nav-links a { padding: 8px 16px; border-radius: var(--radius); color: var(--text-secondary); text-decoration: none; transition: all 0.2s; }
.main-nav .nav-links a:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.main-nav .nav-links a.active { background: var(--accent); color: white; }
.main-nav .logout { color: var(--text-muted); font-size: 14px; }
.main-nav .version { font-size: 14px; color: var(--text-muted); }

/* Utilities */
.mb-0 { margin-bottom: 0; }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 12px; }