/*
  STYLE.CSS — How Predictability looks
  
  This controls colours, fonts, spacing, and layout.
  Using CSS variables (the --name: value things) so we can 
  change the whole theme by changing values in one place.
  
  The dark theme matches the old Pacing Arc app for now.
  
  Built by E. + P77, 16 July 2026.
*/

/* ── CSS VARIABLES ─────────────────────────────────────
   These are like settings. Change a value here and it 
   changes everywhere that uses it. */
:root {
  --bg: #1a1a2e;        /* main background — dark blue */
  --bg2: #16162b;       /* slightly darker background for cards */
  --text: #e0e0e0;      /* main text colour — light grey */
  --muted: #888;        /* subtle text — dimmer grey */
  --accent: #f0c674;    /* highlight colour — warm gold */
  --green: #81c784;     /* positive / met / good */
  --red: #ef5350;       /* negative / unmet / warning */
  --border: #2a2a4a;    /* borders between sections */
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── BASE STYLES ───────────────────────────────────────
   These apply to the whole page. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;   /* makes sizing more intuitive */
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;        /* fills at least the full screen height */
  padding: 20px;
}

/* ── TYPOGRAPHY ────────────────────────────────────────*/
h1 {
  font-size: 1.5em;
  color: var(--accent);
  margin-bottom: 4px;
}

h2 {
  font-size: 1.1em;
  color: var(--accent);
  margin-bottom: 12px;
  margin-top: 24px;
}

.subtle {
  color: var(--muted);
  font-size: 0.85em;
}

.error {
  color: var(--red);
  font-size: 0.85em;
  margin-top: 8px;
}

/* ── APP CONTAINER ─────────────────────────────────────*/
#app {
  max-width: 600px;          /* don't stretch too wide on big screens */
  margin: 0 auto;            /* centre on the page */
}

/* ── LOGIN SECTION ─────────────────────────────────────*/
#login-section {
  text-align: center;
  padding-top: 40px;
}

#login-section input {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 8px auto;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--text);
  font-size: 1em;
}

#login-section button {
  margin-top: 12px;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg);
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
}

#login-section button:hover {
  opacity: 0.9;
}

/* Password field with eye toggle */
.password-wrapper {
  position: relative;
  max-width: 300px;
  margin: 8px auto;
}

.password-wrapper input {
  width: 100%;
  padding-right: 44px;         /* make room for the eye button */
}

.eye-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none !important;
  font-size: 1.2em;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.6;
}

.eye-btn:hover {
  opacity: 1;
}

/* Subtle link — for "Forgot password?" and "Back to login" */
.subtle-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85em;
}

.subtle-link:hover {
  color: var(--accent);
}

/* ── RESET PASSWORD SECTION ────────────────────────────
   Same layout as login — centred, simple, calming. */
#reset-section {
  text-align: center;
  padding-top: 40px;
}

#reset-section input {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 8px auto;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--text);
  font-size: 1em;
}

#reset-section button {
  margin-top: 12px;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg);
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
}

#reset-section button:hover {
  opacity: 0.9;
}

/* ── HEADER ────────────────────────────────────────────*/
header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* ── WALL READINGS ─────────────────────────────────────*/
#wall-readings, #need-readings {
  background: var(--bg2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.wall-row {
  margin-bottom: 14px;
}

.wall-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.wall-name {
  font-weight: 600;
  font-size: 0.9em;
  text-transform: capitalize;    /* first letter uppercase */
}

.wall-taha {
  font-size: 0.75em;
  color: var(--muted);
}

.wall-bar-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The track is the horizontal line the marker sits on */
.wall-bar-track {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  position: relative;
}

/* The centre line — shows where neutral (0) is */
.wall-bar-centre {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--muted);
}

/* The marker — shows the actual wall value */
.wall-bar-marker {
  position: absolute;
  top: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;       /* makes it a circle */
  transform: translateX(-50%);  /* centres it on the position */
}

.wall-value {
  font-size: 0.8em;
  font-weight: 600;
  min-width: 35px;
  text-align: right;
}

.wall-time {
  font-size: 0.7em;
  color: var(--muted);
}

/* ── NEEDS ─────────────────────────────────────────────*/
.needs-group {
  margin-bottom: 12px;
}

.needs-group-label {
  font-size: 0.75em;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.needs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Individual need tag — the little pill shapes */
.need-tag {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8em;
}

.need-tag.unmet {
  background: rgba(239, 83, 80, 0.12);    /* transparent red */
  color: var(--red);
  border: 1px solid rgba(239, 83, 80, 0.25);
}

.need-tag.met {
  background: rgba(129, 199, 132, 0.12);  /* transparent green */
  color: var(--green);
  border: 1px solid rgba(129, 199, 132, 0.25);
}

/* ── STATUS BAR ────────────────────────────────────────*/
#status-bar {
  text-align: center;
  padding: 12px;
  margin-top: 16px;
}