/* =========================
   MYWELLNESS+ COLOR SYSTEM
   Desert / Sage Theme
   ========================= */

:root {
  /* ---- Neutrals ---- */
  --bg-main: #F6F1E7;          /* sand */
  --bg-card: #FFFFFF;
  --bg-soft: #EFE7DA;          /* parchment */

  --text-primary: #2E2A26;     /* charcoal */
  --text-muted: #6E665E;

  /* ---- Brand / Accent ---- */
  --sage: #7A8F6A;             /* cactus green */
  --sage-dark: #5F7252;

  --terracotta: #D47A5A;       /* flower */
  --terracotta-soft: #E7A58A;

  --gold: #C9A45C;             /* logo ring */
  --gold-soft: #E6D3A3;

  /* ---- UI ---- */
  --border-soft: #DDD3C5;
  --shadow-soft: 0 4px 12px rgba(0,0,0,0.06);

  --button-primary: var(--sage);
  --button-primary-text: #FFFFFF;

  --button-secondary: var(--terracotta);
  --button-secondary-text: #FFFFFF;

  --focus-ring: var(--gold);

  /* ---- Status ---- */
  --success: #7A9A6A;
  --warning: #C98C3D;
  --error: #B85C4A;
}

/* =========================
   DARK MODE (DESERT NIGHT)
   ========================= */

[data-theme="dark"] {
  --bg-main: #1E1C19;          /* desert night */
  --bg-card: #2A2622;
  --bg-soft: #332F2A;

  --text-primary: #F3EFE9;
  --text-muted: #B9B2A8;

  --sage: #8FAF7E;
  --sage-dark: #6E8D61;

  --terracotta: #D98A6A;
  --terracotta-soft: #E6A892;

  --gold: #D6B36A;
  --gold-soft: #EAD7A8;

  --border-soft: #3E3A35;
  --shadow-soft: 0 6px 18px rgba(0,0,0,0.4);

  --button-primary: var(--sage);
  --button-primary-text: #1E1C19;

  --button-secondary: var(--terracotta);
  --button-secondary-text: #1E1C19;

  --focus-ring: var(--gold);

  --success: #8FBF8A;
  --warning: #D8A24D;
  --error: #D47A6A;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg-main);
  color: var(--text-primary);
}

html, body {
font-family: "Arial, Helvetica, sans-serif";
height: 100%;
}

.onboarding-card { max-width: 760px; margin: 0 auto; }

.form-stack{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.form-stack label{
  font-weight: 600;
}

.form-actions-stack{
  display: flex;
  gap: 12px;
  margin-top: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.form-actions-stack .btn,
.form-actions-stack button{
  width: fit-content;
}

.auth-shell {
  min-height: calc(100vh - 90px);
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 520px;
}

.auth-card label {
  display: block;
  margin: 10px 0 6px;
  font-weight: 600; /* optional but makes forms clearer */
}

.auth-card input,
.auth-card select,
.auth-card textarea {
  width: 100%;
}

.center { text-align: center; }
.mt-12 { margin-top: 12px; }

/* A stripped header used for login/register only */
.header-min {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px !important;
  border-radius: 14px;
}

/* Auth links section */
.auth-alt {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.auth-alt .muted {
  margin: 0;
}

.auth-card button {
  display: block;
  margin: 1rem auto 0 auto;
}

/* The container that holds "This Week" and "Last Week" cards */
.week-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 900px) {
  .week-compare { grid-template-columns: 1fr; }
}

/* The Changes block must span both columns */
.week-changes {
  grid-column: 1 / -1;          /* this is the critical part */
  width: 100%;
  margin-top: 10px;

  display: grid;
  justify-items: center;         /* centers the content block */
  text-align: center;
}

/* Base list styling */
.changes-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;

  display: grid;
  gap: 10px 28px;
}

/* < 5 items: one centered column, list should NOT stretch full width */
.changes-list.one-col {
  grid-template-columns: 1fr;
  width: fit-content;            /* centers visually */
  max-width: 720px;
  justify-items: center; 
  max-width: 520px;
  margin: 0 auto;        /* center each li block */
}

/* >= 5 items: two columns, centered */
.changes-list.two-col {
  grid-template-columns: 1fr 1fr;
  width: min(920px, 100%);
  justify-items: start;   
  column-gap: 18px;   /* tighten */
  max-width: 640px;   /* prevents it from spreading too wide */
  margin: 0 auto;          /* looks nicer in 2 col */
}

/* li formatting */
.changes-list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.10));
}

/* When one column, keep the text nice but still centered as a block */
.changes-list.one-col li {
  width: 100%;
  text-align: center;            /* makes it read centered */
  border-bottom: none;
}

.section-title {
  text-align: center;
  margin: 0 0 6px 0;
}

.section-subtitle {
  text-align: center;
  margin: 0 0 18px 0;
}

.chart-title {
  text-align: center;
  margin: 0 0 8px 0;
}

.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.chart-card {
  padding: 14px;
}

.chart-small {
  height: 220px;     /* tweak */
}

.chart-large {
  height: 360px;     /* tweak */
}

/* Coach-only: bigger but controlled */
.chart-coach-small { height: 260px; }
.chart-coach-large { height: 420px; }

canvas { width: 100% !important; height: 100% !important; }

/* Force common text elements to follow the theme variables */
.card, p, li, label, input, select, textarea, h1, h2, h3 {
  color: var(--text-primary);
}

h1 {
  text-align: center;
}

input, textarea, select {
  color: #111 !important;
  background: #fff !important;
}

input::placeholder, textarea::placeholder {
  color: rgba(0,0,0,.45) !important;
}

select option {
  color: #111;
}

select, option {
  color: var(--text-primary);
  background: var(--bg-card);
}

select:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.nav-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.nav-btn:hover{
  background: rgba(255,255,255,0.14);
}

.nav-btn.danger{
  border-color: rgba(255,80,80,0.35);
  background: rgba(255,80,80,0.12);
}

.nav-btn.danger:hover{
  background: rgba(255,80,80,0.18);
}

.nav-link{
  display:inline-block;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: inherit;
  font-size: 15px;
  line-height: 1;
}

.nav-link:hover{
  background: rgba(255,255,255,0.10);
  opacity: 0.9;
}

.muted {
  color: var(--muted-text, #6b6b6b);
}

.card p, .card li, .card em, .card strong {
  color: inherit;
}

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 18px;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-main);
}

.topbar{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}

.brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-logo{
  height: 75px;
  width: 75px;
  border-radius: 50%;
}

.topbar-title{
  text-align: center;
  justify-self: center;
  font-size: 20px;
}

.topbar-actions{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}

.brand-logo:hover{
  transform: scale(1.03);
}

.chart-heading {
  text-align: center;
  margin-bottom: 6px;
}

h1, h2, h3 {
  margin-top: 12px;
}

h2 {
  color: var(--sage);
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-soft);
}

.card:hover {
  transform: translateY(-2px);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button {
  background-color: var(--button-primary);
  color: var(--button-primary-text);
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}

button.secondary {
  background: transparent;
  color: var(--terracotta);
  border: 2px solid var(--terracotta);
}

[data-theme="dark"] button.secondary {
  color: var(--gold);
  border-color: var(--gold);
}

button.secondary:hover {
  background-color: var(--terracotta);
  color: var(--terracotta);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.6rem 1rem;
  border-radius:6px;
  cursor:pointer;
  text-decoration:none;
  font-weight:600;
  color: inherit;
}

.btn:hover {
  color: var(--sage)
}

.btn-outline{
  background: transparent;
  color: var(--button-secondary);
  border: 1px solid var(--button-secondary);
}

.btn-outline:hover{
  opacity: 0.9;
}

.icon-btn{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  padding:0;
}

.password-wrapper {
  position: relative;
  width: 100%;
}

.password-wrapper input {
  width: 100%;
  padding-right: 62px; /* room for the toggle button */
  box-sizing: border-box;
}

/* Make the eye look like a mini button */
.password-wrapper .toggle-btn {
  position: absolute;
  right: 10px;
  top: 120%;
  transform: translateY(-50%);

  /* match your main button feel */
  background-color: var(--terracotta);
  color: var(--button-primary-text); /* or set a specific one if needed */
  border: none;
  border-radius: 6px;

  gap: 20px 0px;
  padding: 0.35rem 0.6rem;  /* smaller than main button */
  cursor: pointer;

  line-height: 1;
}

/* small hover effect without changing theme */
.password-wrapper .toggle-btn:hover {
  filter: brightness(1.05);
}

.password-wrapper .toggle-btn:active {
  transform: translateY(-50%) scale(0.98);
}

/* --- Wheel "stage" keeps the CENTER anchored --- */
.wheel-stage {
  width: 420px;        /* adjust if you want slightly bigger/smaller */
  height: 420px;
  display: grid;
  place-items: center; /* centers the image inside the stage */
}

.wheel-container {
  display: flex;
  justify-content: center;
  margin: 24px 0 28px;
}

.wellness-wheel {
  width: 820px;      
  max-width: 100%;
  height: auto;
}

.onboarding-shell{
  max-width: 1100px;
  margin: 0 auto;
}

.onboarding-layout{
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.onboarding-image{
  display: flex;
  justify-content: center;
}

.wheel-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;   /* tweak this number up/down */
}

.wheel-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.wellness-wheel,
.wheel-image {
  margin-left: -48px;  
}

.onboarding-content{
  flex: 1;
}

@media (max-width: 900px) {
  .onboarding-layout {
    flex-direction: column;
    text-align: center;
  }

  .onboarding-image,
  .onboarding-content {
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  .wellness-wheel {
    width: 480px;
  }

  .wheel-image {
    max-width: 460px;
  }
}

/* --- QUICK LAYOUT UTILITIES --- */
.center { text-align: center; }
.center > * { margin-left: auto; margin-right: auto; }

.stack { display: flex; flex-direction: column; gap: 14px; }

/* Smaller input + button for compact sections */
.input-sm {
  max-width: 340px;
}

.button-sm {
  padding: 0.45rem 0.8rem;
  font-size: 0.95rem;
}

/* Centered action row (Save/Continue + Skip) */
.form-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* If you want the "skip" link to visually behave */
.form-actions a {
  text-decoration: none;
  opacity: 0.9;
}
.form-actions a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Dashboard cards: center most content by default */
.card.center-card { text-align: center; }

/* Keep lists readable even inside centered cards */
.card.center-card ul,
.card.center-card ol {
  text-align: left;
  display: inline-block;  /* keeps list block compact & centered */
  margin: 0.5rem auto 0 auto;
}

/* Optional: 2-column bullets when desired */
.bullets-2col {
  columns: 2;
  column-gap: 28px;
}
@media (max-width: 720px) {
  .bullets-2col { columns: 1; }
}

/* trends: pull columns closer */
.week-compare { gap: 14px; }           /* if week-compare is flex/grid, this helps */
.week-changes { margin-top: 10px; }    /* tighten spacing */
.changes-list.one-col { columns: 1; }
.changes-list.two-col { columns: 2; column-gap: 18px; }
@media (max-width: 720px) { .changes-list.two-col { columns: 1; } }

/* Coach header title bigger */
.big-header {
  font-size: 1.6rem;
  line-height: 1.2;
}

.step-indicator {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  margin-bottom: 12px;
}

.big-header {
  font-size: 1.8rem;
  line-height: 1.15;
  text-align: center;
}