/* Health Metrics Tracker – Modern UI */
:root {
  --hmt-bg: #0b1020; /* Deep night */
  --hmt-surface: #121833; /* Card surface */
  --hmt-soft-surface: #0f1530; /* Softer surface */
  --hmt-primary: #6ea8ff; /* Soft blue */
  --hmt-primary-strong: #4c93ff;
  --hmt-accent: #a78bfa; /* Purple accent */
  --hmt-success: #22c55e;
  --hmt-warning: #f59e0b;
  --hmt-danger: #ef4444;
  --hmt-text: #e6eaf5;
  --hmt-muted: #9aa3b2;
  --hmt-border: #1e274a;
  --hmt-ring: rgba(110, 168, 255, 0.45);
  --hmt-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --hmt-radius: 14px;
  --hmt-gap: 16px; /* unified spacing */
}

/* Light theme variable overrides */
body.hmt-theme-light {
  --hmt-bg: #f8fafc; /* Slate-50 */
  --hmt-surface: #ffffff; /* White card */
  --hmt-soft-surface: #f1f5f9; /* Slate-100 */
  --hmt-primary: #2563eb; /* Blue-600 */
  --hmt-primary-strong: #1d4ed8; /* Blue-700 */
  --hmt-accent: #7c3aed; /* Violet-600 */
  --hmt-success: #16a34a; /* Green-600 */
  --hmt-warning: #d97706; /* Amber-600 */
  --hmt-danger: #dc2626;  /* Red-600 */
  --hmt-text: #0f172a; /* Slate-900 */
  --hmt-muted: #475569; /* Slate-600 */
  --hmt-border: #e2e8f0; /* Slate-200 */
  --hmt-ring: rgba(37, 99, 235, 0.25);
  --hmt-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  --hmt-gap: 16px;
}

/* Global theme application: makes the page look clearly different */
body.hmt-theme-dark {
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(76,147,255,0.10), transparent 60%),
    radial-gradient(1000px 700px at 100% 20%, rgba(167,139,250,0.10), transparent 60%),
    linear-gradient(180deg, #0b1020 0%, #0b1020 60%, #0a0f1e 100%);
  color: var(--hmt-text) !important;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji" !important;
}

body.hmt-theme-dark a { color: var(--hmt-primary); text-decoration: none; }
body.hmt-theme-dark a:hover { filter: brightness(1.1); }

body.hmt-theme-light a { color: var(--hmt-primary); text-decoration: none; }
body.hmt-theme-light a:hover { filter: brightness(0.95); }

body.hmt-theme-dark h1,
body.hmt-theme-dark h2,
body.hmt-theme-dark h3,
body.hmt-theme-dark h4,
body.hmt-theme-dark h5,
body.hmt-theme-dark h6 { color: var(--hmt-text) !important; }

body.hmt-theme-light h1,
body.hmt-theme-light h2,
body.hmt-theme-light h3,
body.hmt-theme-light h4,
body.hmt-theme-light h5,
body.hmt-theme-light h6 { color: var(--hmt-text) !important; }

/* Soften default WP content wrappers */
body.hmt-theme-dark .entry-content > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
body.hmt-theme-dark .site, 
body.hmt-theme-dark .site-content, 
body.hmt-theme-dark .content-area, 
body.hmt-theme-dark .entry-content { background: transparent !important; color: var(--hmt-text) !important; }
body.hmt-theme-dark input, 
body.hmt-theme-dark select, 
body.hmt-theme-dark textarea { color: var(--hmt-text) !important; background: #0d1430 !important; border-color: var(--hmt-border) !important; }
body.hmt-theme-dark .button, 
body.hmt-theme-dark button, 
body.hmt-theme-dark input[type=submit] { background: linear-gradient(180deg, var(--hmt-primary), var(--hmt-primary-strong)) !important; color: #0b1020 !important; border: none !important; border-radius: 12px !important; }

body.hmt-theme-light .entry-content > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
body.hmt-theme-light .site,
body.hmt-theme-light .site-content,
body.hmt-theme-light .content-area,
body.hmt-theme-light .entry-content { background: transparent !important; color: var(--hmt-text) !important; }
/* Neutralize theme/Gutenberg width classes inside our container */
.hmt-container .alignwide,
.hmt-container .alignfull,
.hmt-container [class*="wp-block"],
.hmt-container .wp-block-group,
.hmt-container .wp-block-group__inner-container {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.hmt-theme-light input,
body.hmt-theme-light select,
body.hmt-theme-light textarea { color: var(--hmt-text) !important; background: #ffffff !important; border-color: var(--hmt-border) !important; }
body.hmt-theme-light .button,
body.hmt-theme-light button,
body.hmt-theme-light input[type=submit] { background: linear-gradient(180deg, var(--hmt-primary), var(--hmt-primary-strong)) !important; color: #fff !important; border: none !important; border-radius: 12px !important; }

/* Layout */
body.hmt-theme-dark .hmt-container {
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

body.hmt-theme-light .hmt-container {
  max-width: none;
  margin: 0 auto;
  padding: 0;
}
/* UNIFIED SPACING: All plugin blocks get consistent vertical gaps and equal widths */
.hmt-container,
.hmt-chart-container {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Single source of truth for vertical spacing between ALL plugin blocks */
.hmt-container + *,
.hmt-chart-container + *,
* + .hmt-container,
* + .hmt-chart-container {
  margin-top: calc(var(--hmt-gap) * 2) !important;
}

body.hmt-theme-dark .hmt-section {
  background: linear-gradient(180deg, var(--hmt-surface), var(--hmt-soft-surface));
  border: 1px solid var(--hmt-border);
  border-radius: var(--hmt-radius);
  box-shadow: var(--hmt-shadow);
  padding: 20px;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

body.hmt-theme-light .hmt-section {
  background: var(--hmt-surface);
  border: 1px solid var(--hmt-border);
  border-radius: var(--hmt-radius);
  box-shadow: var(--hmt-shadow);
  padding: 20px;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Ensure full width for key blocks and consistent inner spacing */
.hmt-section,
.hmt-card,
.hmt-chart-container { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
.hmt-section > * + * { margin-top: var(--hmt-gap); }
.hmt-section p { margin: 0; }
/* Remove stray margins from common content elements inside our sections */
.hmt-section h1, .hmt-section h2, .hmt-section h3, .hmt-section h4, .hmt-section h5, .hmt-section h6,
.hmt-section ul, .hmt-section ol { margin: 0; }

/* Reset ALL margins on our components - spacing controlled by sibling rules above */
.hmt-stats,
.bmi-meter-container,
.hmt-section,
.hmt-chart-container,
.hmt-container > *,
.wp-block-group,
[class*="wp-block"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Internal spacing within containers */
.hmt-container > * + * { margin-top: calc(var(--hmt-gap) * 2) !important; }

/* Specific spacing: form section to chart container */
.hmt-section.hmt-measurement-form + .hmt-chart-container,
.hmt-container:has(.hmt-measurement-form) + .hmt-chart-container {
  margin-top: calc(var(--hmt-gap) * 2) !important;
}

/* Specific spacing: chart container to profile section */
.hmt-chart-container + .hmt-section,
.hmt-chart-container + .hmt-container:has(.hmt-section) {
  margin-top: calc(var(--hmt-gap) * 2) !important;
}

/* WordPress/Gutenberg compatibility: neutralize all theme spacing around our blocks */
.hmt-container,
.hmt-chart-container {
  --wp--style--block-gap: 0 !important;
}

/* Remove WordPress block wrapper interference */
.wp-block-group,
[class*="wp-block"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

:where(.is-layout-flow) > .hmt-container,
:where(.is-layout-flow) > .hmt-chart-container {
  margin-block-start: 0 !important;
}

:where(.is-layout-flow) > * + .hmt-container,
:where(.is-layout-flow) > * + .hmt-chart-container {
  margin-block-start: calc(var(--hmt-gap) * 2) !important;
}

/* Headings */
body.hmt-theme-dark .hmt-title {
  color: var(--hmt-text);
  font-size: 1.4rem;
  line-height: 1.25;
  margin: 0 0 var(--hmt-gap) 0;
}

body.hmt-theme-light .hmt-title {
  color: var(--hmt-text);
  font-size: 1.4rem;
  line-height: 1.25;
  margin: 0 0 var(--hmt-gap) 0;
}

.hmt-subtitle { color: var(--hmt-muted); margin-bottom: var(--hmt-gap); }

/* Grid */
.hmt-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--hmt-gap);
}

.hmt-col-12 { grid-column: span 12; }
.hmt-col-6 { grid-column: span 6; }
.hmt-col-4 { grid-column: span 4; }
.hmt-col-3 { grid-column: span 3; }

@media (max-width: 1024px) {
  .hmt-col-6, .hmt-col-4, .hmt-col-3 { grid-column: span 12; }
}

/* Cards */
body.hmt-theme-dark .hmt-card {
  background: linear-gradient(180deg, var(--hmt-surface), var(--hmt-soft-surface));
  border: 1px solid var(--hmt-border);
  border-radius: var(--hmt-radius);
  box-shadow: var(--hmt-shadow);
  padding: 18px;
}

body.hmt-theme-light .hmt-card {
  background: var(--hmt-surface);
  border: 1px solid var(--hmt-border);
  border-radius: var(--hmt-radius);
  box-shadow: var(--hmt-shadow);
  padding: 18px;
}

/* Stats */
.hmt-stats {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--hmt-gap);
}

.hmt-stat-card { grid-column: span 6; }
.hmt-stat-label { color: var(--hmt-muted); font-size: 0.95rem; margin-bottom: 6px; display: block; }
.hmt-stat-value { color: var(--hmt-text); font-weight: 600; font-size: 2.6rem; line-height: 1.1; }
.hmt-unit { color: var(--hmt-muted); font-size: 1rem; margin-left: 6px; font-weight: 400; }
.hmt-stat-date { color: var(--hmt-muted); font-size: 0.85rem; margin-top: 6px; display: block; }

@media (max-width: 768px) {
  .hmt-stats { grid-template-columns: repeat(1, 1fr); }
  .hmt-stat-card { grid-column: span 12; }
  .hmt-stat-value { font-size: 2.2rem; }
}

/* Forms */
.hmt-form { display: grid; gap: var(--hmt-gap); }
.hmt-form-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--hmt-gap); }
.hmt-form-col-6 { grid-column: span 6; }
.hmt-form-col-12 { grid-column: span 12; }

@media (max-width: 768px) {
  .hmt-form-col-6 { grid-column: span 12; }
}

body.hmt-theme-dark .hmt-label { color: var(--hmt-text) !important; font-weight: 500; margin-bottom: 6px; display: block; }
body.hmt-theme-dark .hmt-input, body.hmt-theme-dark .hmt-select {
  appearance: none;
  width: 100%;
  padding: 12px 14px;
  color: var(--hmt-text);
  background: #0d1430;
  border: 1px solid var(--hmt-border);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
body.hmt-theme-dark .hmt-input:focus, body.hmt-theme-dark .hmt-select:focus { border-color: var(--hmt-primary) !important; box-shadow: 0 0 0 4px var(--hmt-ring) !important; }

body.hmt-theme-light .hmt-label { color: var(--hmt-text) !important; font-weight: 500; margin-bottom: 6px; display: block; }
body.hmt-theme-light .hmt-input, body.hmt-theme-light .hmt-select {
  appearance: none;
  width: 100%;
  padding: 12px 14px;
  color: var(--hmt-text);
  background: #ffffff;
  border: 1px solid var(--hmt-border);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
body.hmt-theme-light .hmt-input:focus, body.hmt-theme-light .hmt-select:focus { border-color: var(--hmt-primary) !important; box-shadow: 0 0 0 4px var(--hmt-ring) !important; }

.hmt-checkbox label { color: var(--hmt-muted); display: flex; align-items: center; gap: 10px; }

.hmt-stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Status card background by state (applied to Current Weight) */
.hmt-status-card { position: relative; overflow: hidden; }
.hmt-status-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  z-index: 0;
  opacity: 0.4; /* default strength */
}
.hmt-status-card > * { position: relative; z-index: 1; }
/* Explicit buckets with tuned opacity per state */
.hmt-status-card.is-green::before { background: #16a34a; opacity: 0.18; }
.hmt-status-card.is-orange-light::before { background: #fdba74; opacity: 0.35; }
.hmt-status-card.is-orange-dark::before { background: #f97316; opacity: 0.50; }
.hmt-status-card.is-red-light::before { background: #ef4444; opacity: 0.6; }
.hmt-status-card.is-red-dark::before { background: #b91c1c; opacity: 0.80; }

/* Improve contrast for strong red */
.hmt-status-card.is-red-dark .hmt-stat-label,
.hmt-status-card.is-red-dark .hmt-stat-value,
.hmt-status-card.is-red-dark .hmt-unit,
.hmt-status-card.is-red-dark .hmt-stat-date { color: #fff; }

/* Delta badge (over-/underweight indicator) */
.hmt-delta-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
}
.hmt-delta-badge.badge-green { background: #16a34a; color: #fff; }
.hmt-delta-badge.badge-okay  { background: #64748b; color: #fff; }
.hmt-delta-badge.badge-orange{ background: #f97316; color: #fff; }
.hmt-delta-badge.badge-red   { background: #dc2626; color: #fff; }

/* Buttons */
.hmt-actions { display: flex; gap: var(--hmt-gap); align-items: center; }
body.hmt-theme-dark .hmt-button {
  background: linear-gradient(180deg, var(--hmt-primary), var(--hmt-primary-strong));
  color: #0b1020;
  padding: 12px 18px;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, filter .2s ease;
}
body.hmt-theme-dark .hmt-button:hover { filter: brightness(1.08); }
body.hmt-theme-dark .hmt-button:active { transform: translateY(1px); }
body.hmt-theme-dark .hmt-button.secondary { background: #1b244a; color: var(--hmt-text); }

body.hmt-theme-light .hmt-button {
  background: linear-gradient(180deg, var(--hmt-primary), var(--hmt-primary-strong));
  color: #ffffff;
  padding: 12px 18px;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, filter .2s ease;
}
body.hmt-theme-light .hmt-button:hover { filter: brightness(0.98); }
body.hmt-theme-light .hmt-button:active { transform: translateY(1px); }
body.hmt-theme-light .hmt-button.secondary { background: #e2e8f0; color: var(--hmt-text); }

/* Chart */
body.hmt-theme-dark .hmt-chart-container {
  position: relative;
  background: linear-gradient(180deg, var(--hmt-surface), var(--hmt-soft-surface));
  border: 1px solid var(--hmt-border);
  border-radius: var(--hmt-radius);
  box-shadow: var(--hmt-shadow);
  padding: 16px;
  min-height: 280px;
}
.hmt-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--hmt-gap); }
.hmt-period-selector { min-width: 180px; }
.hmt-chart { width: 100% !important; max-width: 100% !important; height: 100% !important; display: block; }
body.hmt-theme-dark .hmt-chart-empty { color: var(--hmt-muted); text-align: center; padding: 24px; }

body.hmt-theme-light .hmt-chart-container {
  position: relative;
  background: var(--hmt-surface);
  border: 1px solid var(--hmt-border);
  border-radius: var(--hmt-radius);
  box-shadow: var(--hmt-shadow);
  padding: 16px;
  min-height: 280px;
}
body.hmt-theme-light .hmt-chart-empty { color: var(--hmt-muted); text-align: center; padding: 24px; }

/* BMI visuals */
/* Remove default extra margin; we will set contextual spacing to avoid double gaps */
.bmi-meter-container { margin-top: 0; border: 1px solid var(--hmt-border); border-radius: 12px; padding: 14px; }
/* When BMI block comes right after the stats grid, use exactly one unified gap */
.hmt-stats + .bmi-meter-container { margin-top: calc(var(--hmt-gap) * 2); }
/* Ensure consistent spacing when stats are followed by the measurement form directly */
.hmt-stats + .hmt-section.hmt-measurement-form { margin-top: calc(var(--hmt-gap) * 2); }
body.hmt-theme-dark .bmi-meter-container { background: #0d1430; }
body.hmt-theme-dark .bmi-meter { background: #101736; }
body.hmt-theme-light .bmi-meter-container { background: #ffffff; }
.bmi-meter { position: relative; height: 56px; border-radius: 10px; overflow: hidden; }
.bmi-gradient { position: absolute; inset: 0; opacity: .45; background: linear-gradient(90deg,
    /* Underweight (<=18) */
    #3b82f6 0%, #3b82f6 15%,
    /* Healthy (18–24.9) ends exactly at BMI 25 == 50% */
    #16a34a 15%, #16a34a 50%,
    /* Slightly overweight (just above 25 up to ~28) */
    #f59e0b 50%, #f59e0b 65%,
    /* Overweight (28–30) */
    #ea580c 65%, #ea580c 80%,
    /* Obese (>=30) */
    #b91c1c 80%, #b91c1c 100%
); }
.bmi-scale { position: static; display: flex; justify-content: space-between; align-items: center; padding: 6px 2px; gap: 10px; margin-top: 6px; pointer-events: none; color: var(--hmt-muted); font-size: .85rem; }
.scale-marker { position: absolute; bottom: 0; transform: translateX(-50%); text-align: center; }
.scale-marker span { display: block; color: var(--hmt-muted); font-size: .8rem; margin-bottom: 4px; }
.scale-marker::before { content: ''; display: block; width: 2px; height: 10px; background: #475569; margin: 0 auto; }
.scale-marker.underweight { left: 0%; }
.scale-marker.normal-start { left: 17.5%; }
.scale-marker.normal-end { left: 50%; }
.scale-marker.overweight { left: 75%; }
.scale-marker.obese { left: 100%; }
.bmi-pointer { position: absolute; top: 0; width: 3px; height: 100%; background: #c7d2fe; box-shadow: 0 0 10px rgba(167,139,250,.6); }
.bmi-text { margin-top: 10px; color: #0b1020; background: #c7d2fe; padding: 6px 12px; border-radius: 999px; font-weight: 600; display: inline-block; }
.bmi-text.underweight { background: #93c5fd; }
.bmi-text.normal { background: #86efac; }
.bmi-text.slightly-overweight { background: #fde68a; }
.bmi-text.moderately-overweight { background: #fcd34d; }
.bmi-text.very-overweight { background: #fdba74; }
.bmi-text.severely-overweight { background: #fca5a5; }

/* Pills */
.hmt-info-pills { display: flex; flex-wrap: wrap; gap: var(--hmt-gap); margin-top: var(--hmt-gap); }
body.hmt-theme-dark .hmt-info-pill { background: #0d1430; color: var(--hmt-text); border: 1px solid var(--hmt-border); border-radius: 999px; padding: 8px 12px; font-size: .95rem; }
body.hmt-theme-light .hmt-info-pill { background: #f1f5f9; color: var(--hmt-text); border: 1px solid var(--hmt-border); border-radius: 999px; padding: 8px 12px; font-size: .95rem; }

/* Messages */
.hmt-message { padding: 12px 14px; border-radius: 12px; font-weight: 500; }
body.hmt-theme-dark .hmt-message-success { background: rgba(34,197,94,.15); color: #86efac; border: 1px solid rgba(34,197,94,.35); }
body.hmt-theme-dark .hmt-message-error { background: rgba(239,68,68,.15); color: #fecaca; border: 1px solid rgba(239,68,68,.35); }
body.hmt-theme-dark .hmt-message-info { background: rgba(110,168,255,.15); color: #bdd4ff; border: 1px solid rgba(110,168,255,.35); }
body.hmt-theme-light .hmt-message-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
body.hmt-theme-light .hmt-message-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
body.hmt-theme-light .hmt-message-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* Utility */
.hmt-muted { color: var(--hmt-muted); }
.hmt-spacer-s { height: 8px; }
.hmt-spacer-m { height: 16px; }
.hmt-spacer-l { height: 24px; }

.hmt-registration-form-wrapper {
  max-width: 480px;
  margin: 2rem auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

.hmt-registration-form-wrapper .hmt-card-header {
  text-align: center;
}

.hmt-registration-form-wrapper .hmt-card-footer {
  text-align: center;
}

.hmt-registration-form-wrapper .required {
  color: var(--hmt-danger);
}

.hmt-metric-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .hmt-metric-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

.hmt-metric-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  border-radius: 12px;
  background: var(--hmt-soft-surface);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.hmt-metric-card:hover {
  filter: brightness(0.98);
  transform: translateY(-2px);
}

.hmt-metric-card.is-active {
  background: var(--hmt-surface);
  border-color: currentColor;
  box-shadow: var(--hmt-shadow);
}

.hmt-metric-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 8px;
  color: #ffffff;
}

.hmt-metric-card-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--hmt-text);
}

.hmt-metric-card.is-active .hmt-metric-card-label {
  color: inherit;
}

.hmt-chart-top-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}