/* ================================================================
   Blood Pressure Tracker — Elderly-Friendly Chinese UI
   Large fonts · High contrast · Big tap targets
   ================================================================ */

/* ── Reset & Base ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --red:        #c0392b;
  --red-dark:   #a93226;
  --red-light:  #fadbd8;
  --green:      #1e8449;
  --green-light:#d5f5e3;
  --orange:     #d35400;
  --orange-light:#fde8d8;
  --blue:       #1a5276;
  --blue-light: #d6eaf8;
  --purple:     #6c3483;
  --purple-light:#e8daef;
  --gray:       #7f8c8d;
  --gray-light: #ecf0f1;
  --text:       #1a252f;
  --text-soft:  #5d6d7e;
  --white:      #ffffff;
  --bg:         #f0f2f5;
  --border:     #d5d8dc;
  --shadow:     0 2px 16px rgba(0,0,0,0.10);
}

html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  padding-bottom: 40px;
}

/* ── Header ──────────────────────────────────────────────────────── */
header {
  background: var(--red);
  color: var(--white);
  padding: 20px 20px 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
}

.header-inner {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

header h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 3px;
  line-height: 1.2;
}

.header-date {
  font-size: 17px;
  opacity: 0.88;
  margin-top: 5px;
  letter-spacing: 1px;
}

/* ── Main Layout ─────────────────────────────────────────────────── */
main {
  max-width: 500px;
  margin: 0 auto;
  padding: 16px 14px;
}

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: 20px;
  padding: 22px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.card h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
  letter-spacing: 1px;
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}

.card-header-row h2 {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* ── Input Form ──────────────────────────────────────────────────── */
.input-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.input-group label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.input-group label .unit {
  font-size: 15px;
  font-weight: 500;
  color: var(--gray);
}

.input-group input[type="number"] {
  display: block;
  width: 100%;
  height: 70px;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  background: var(--gray-light);
  border: 2.5px solid var(--border);
  border-radius: 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.18s, background 0.18s;
}

.input-group input[type="number"]:focus {
  border-color: var(--red);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(192,57,43,0.15);
}

.input-group input::placeholder {
  font-size: 20px;
  font-weight: 400;
  color: #bdc3c7;
}

/* Remove number input arrows */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Save Button ─────────────────────────────────────────────────── */
#save-btn {
  display: block;
  width: 100%;
  height: 70px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 6px;
  color: var(--white);
  background: var(--red);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  -webkit-appearance: none;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 4px 14px rgba(192,57,43,0.40);
}

#save-btn:active {
  background: var(--red-dark);
  transform: scale(0.97);
}

/* ── Reading Items ────────────────────────────────────────────────── */
/*
   Grid columns:
   [date/time 70px] [bp values, fills space] [status badge, min 78px] [delete 34px]
   This keeps every row perfectly aligned like a table.
*/
.reading-item {
  display: grid;
  grid-template-columns: 70px 1fr minmax(78px, auto) 34px;
  align-items: center;
  column-gap: 10px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--border);
}

.reading-item:last-child {
  border-bottom: none;
}

.reading-date-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.reading-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.3;
}

.reading-time {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray);
  line-height: 1.3;
}

.reading-values {
  min-width: 0; /* prevents grid blowout */
}

.reading-bp {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.reading-bp-label {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 500;
  letter-spacing: 0;
}

.reading-pulse {
  font-size: 14px;
  color: var(--text-soft);
  margin-top: 3px;
}

.reading-pulse strong {
  color: var(--text);
  font-weight: 700;
}

/* ── Status Badges ───────────────────────────────────────────────── */
.status-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.5px;
  text-align: center;
}

.status-normal  { background: var(--green-light);  color: var(--green); }
.status-elevated{ background: var(--orange-light); color: var(--orange); }
.status-high    { background: var(--red-light);    color: var(--red); }
.status-low     { background: var(--blue-light);   color: var(--blue); }
.status-crisis  { background: var(--purple-light); color: var(--purple); }

/* ── Delete Button ───────────────────────────────────────────────── */
.delete-btn {
  background: none;
  border: none;
  color: var(--border);
  font-size: 22px;
  padding: 8px 6px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
  flex-shrink: 0;
}

.delete-btn:active {
  color: var(--red);
}

/* ── Clear All Button ────────────────────────────────────────────── */
.clear-btn {
  background: none;
  border: 2px solid var(--border);
  color: var(--gray);
  font-size: 15px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  -webkit-appearance: none;
  transition: border-color 0.15s, color 0.15s;
}

.clear-btn:active {
  border-color: var(--red);
  color: var(--red);
}

/* ── History Groups ──────────────────────────────────────────────── */
.history-group {
  margin-bottom: 6px;
}

.history-group-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-soft);
  padding: 10px 0 4px;
  letter-spacing: 1px;
}

/* ── Empty State ─────────────────────────────────────────────────── */
.empty-msg {
  text-align: center;
  color: var(--gray);
  font-size: 19px;
  padding: 22px 0;
}

/* ── Toast Notification ──────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: rgba(26,37,47,0.93);
  color: var(--white);
  padding: 15px 32px;
  border-radius: 40px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 999;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

/* ── Responsive: larger phones / landscape ───────────────────────── */
@media (min-width: 420px) {
  .input-row {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .input-group {
    flex: 1 1 calc(33% - 10px);
    min-width: 110px;
  }
}

@media (prefers-color-scheme: dark) {
  /* Kept light for elderly readability — skip dark mode */
}

/* ================================================================
   VIEW MANAGEMENT — position:fixed overlays for auth screens
   ================================================================ */

/* Auth overlay views: always display:flex, toggled by .view-active */
#view-loading,
#view-login {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 500;
  display: flex;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

/* App view: hidden by default, shown by JS */
#view-app { display: none; }

/* Active state — JS adds this class */
.view-active {
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* ── Loading Screen ──────────────────────────────────────────────── */
#view-loading {
  background: var(--red);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 22px;
}

#view-loading p {
  color: var(--white);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
}

.spinner {
  width: 52px;
  height: 52px;
  border: 5px solid rgba(255,255,255,0.28);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Login Screen ────────────────────────────────────────────────── */
#view-login {
  background: linear-gradient(155deg, #1976d2 0%, #0d3b7a 100%);
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}

.login-card {
  background: var(--white);
  border-radius: 28px;
  padding: 40px 32px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 16px 56px rgba(0,0,0,0.32);
  text-align: center;
}

.login-logo {
  font-size: 60px;
  line-height: 1;
  margin-bottom: 12px;
}

.login-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 3px;
  margin-bottom: 6px;
}

.login-sub {
  font-size: 18px;
  color: var(--text-soft);
  margin-bottom: 28px;
}

.login-card .input-group {
  margin-bottom: 16px;
  text-align: left;
}

.login-card .input-group label {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.login-card .input-group input {
  display: block;
  width: 100%;
  height: 68px;
  font-size: 22px;
  font-weight: 600;
  padding: 0 18px;
  color: var(--text);
  background: var(--gray-light);
  border: 2.5px solid var(--border);
  border-radius: 14px;
  outline: none;
  -webkit-appearance: none;
  transition: border-color 0.18s, background 0.18s;
}

.login-card .input-group input:focus {
  border-color: #1976d2;
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(25,118,210,0.15);
}

.login-card .input-group input::placeholder {
  font-size: 18px;
  font-weight: 400;
  color: #bdc3c7;
}

.profile-select {
  display: block;
  width: 100%;
  height: 68px;
  font-size: 22px;
  font-weight: 600;
  padding: 0 18px;
  color: var(--text);
  background: var(--gray-light);
  border: 2.5px solid var(--border);
  border-radius: 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%237f8c8d' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 28px;
  padding-right: 48px;
  transition: border-color 0.18s;
}

.profile-select:focus {
  border-color: #1976d2;
  background-color: var(--white);
  box-shadow: 0 0 0 3px rgba(25,118,210,0.15);
}

.login-error {
  color: var(--red);
  font-size: 17px;
  font-weight: 600;
  min-height: 24px;
  margin-bottom: 8px;
  text-align: center;
}

.login-card .auth-btn {
  background: #1976d2;
  box-shadow: 0 4px 18px rgba(25,118,210,0.40);
}


/* ── Auth Screens (original — now only used structurally) ────────── */

.auth-card {
  background: var(--white);
  border-radius: 28px;
  padding: 38px 28px 34px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 16px 56px rgba(0,0,0,0.32);
  text-align: center;
}

.auth-logo {
  font-size: 62px;
  line-height: 1;
  margin-bottom: 12px;
}

.auth-title {
  font-size: 30px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 3px;
  margin-bottom: 10px;
}

.auth-sub {
  font-size: 18px;
  color: var(--text-soft);
  line-height: 1.7;
  margin-bottom: 22px;
}

.auth-sub strong {
  display: block;
  color: var(--text);
  margin-top: 4px;
  word-break: break-all;
  font-size: 17px;
}

/* Auth uses same .input-group as app, but full width */
.auth-card .input-group {
  margin-bottom: 16px;
  text-align: left;
}

.auth-card .input-group label {
  font-size: 20px;
  font-weight: 700;
}

.auth-card .input-group input {
  height: 68px;
  font-size: 22px;
  border-radius: 14px;
  text-align: left;
  padding: 0 18px;
}

/* OTP input — large centred monospace */
.otp-input {
  text-align: center !important;
  letter-spacing: 0.45em !important;
  font-family: ui-monospace, SFMono-Regular, monospace !important;
  font-size: 34px !important;
  font-weight: 800 !important;
}

.auth-btn {
  display: block;
  width: 100%;
  height: 68px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 5px;
  color: var(--white);
  background: var(--red);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  margin-top: 6px;
  box-shadow: 0 4px 18px rgba(192,57,43,0.40);
  -webkit-appearance: none;
  transition: background 0.15s, transform 0.1s;
}

.auth-btn:active  { background: var(--red-dark); transform: scale(0.97); }
.auth-btn:disabled { background: var(--gray); box-shadow: none; cursor: not-allowed; }

.auth-link-btn {
  display: block;
  background: none;
  border: none;
  color: var(--red);
  font-size: 17px;
  font-weight: 600;
  margin-top: 18px;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  text-align: center;
  -webkit-appearance: none;
}

.auth-note {
  font-size: 15px;
  color: var(--text-soft);
  margin-top: 14px;
  line-height: 1.7;
}

/* ── Header — user info & logout ─────────────────────────────────── */
.header-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-email {
  font-size: 14px;
  opacity: 0.88;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-btn {
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.40);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  cursor: pointer;
  -webkit-appearance: none;
  transition: background 0.15s;
  white-space: nowrap;
}

.logout-btn:active { background: rgba(255,255,255,0.35); }

/* ── Sync Status Bar ─────────────────────────────────────────────── */
.sync-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 11px 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  z-index: 200;
  transition: opacity 0.3s;
}

.sync-bar--hidden  { display: none; }
.sync-bar--syncing { background: #2980b9; color: var(--white); }
.sync-bar--synced  { background: var(--green); color: var(--white); }
.sync-bar--offline { background: var(--orange); color: var(--white); }

/* ── Pending-sync dot on unsynced readings ───────────────────────── */
.sync-dot {
  color: var(--orange);
  font-size: 10px;
  vertical-align: middle;
  margin-right: 3px;
  line-height: 1;
}

/* ── Tablet / desktop: header layout tweak for user info ─────────── */
@media (min-width: 768px) {
  .header-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
  .header-right {
    align-items: flex-end;
  }
  .auth-card {
    padding: 48px 40px 42px;
  }
  .auth-title { font-size: 34px; }
}

/* ================================================================
   RESPONSIVE LAYOUT — Tablet & Desktop
   ================================================================ */

/* ── Fluid base font size ────────────────────────────────────────── */
html {
  font-size: clamp(16px, 1.5vw + 13px, 20px);
}

/* ── iPad portrait (768px – 1023px): 2-column grid ──────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  .header-inner {
    max-width: 960px;
    gap: 24px;
  }

  header h1 { font-size: 32px; }

  main {
    max-width: 960px;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: 340px 1fr;
    column-gap: 20px;
    align-items: start;
  }

  #input-card {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 106px;
    align-self: start;
  }

  #today-card,
  #history-card { grid-column: 2; }

  .card { padding: 24px 22px; }

  #save-btn { height: 72px; font-size: 28px; }
}

/* ── iPad landscape / small desktop (1024px – 1279px) ───────────── */
@media (min-width: 1024px) and (max-width: 1279px) {

  .header-inner {
    max-width: 1100px;
    gap: 28px;
  }

  header h1 { font-size: 34px; }

  main {
    max-width: 1100px;
    padding: 24px 32px;
    display: grid;
    grid-template-columns: 380px 1fr;
    column-gap: 28px;
    align-items: start;
  }

  #input-card {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 110px;
    align-self: start;
  }

  #today-card,
  #history-card { grid-column: 2; }

  .card { padding: 28px 26px; border-radius: 24px; }

  .card h2 { font-size: 24px; margin-bottom: 20px; }

  #save-btn { height: 74px; font-size: 28px; }

  .reading-bp { font-size: 30px; }
}

/* ── Desktop (1280px+) ───────────────────────────────────────────── */
@media (min-width: 1280px) {

  .header-inner {
    max-width: 1200px;
    gap: 32px;
  }

  header { padding: 22px 40px 18px; }

  header h1 { font-size: 36px; }

  main {
    max-width: 1200px;
    padding: 28px 40px;
    display: grid;
    grid-template-columns: 420px 1fr;
    column-gap: 36px;
    align-items: start;
  }

  #input-card {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 118px;
    align-self: start;
  }

  #today-card,
  #history-card { grid-column: 2; }

  .card { padding: 32px 30px; border-radius: 24px; }

  .card h2 { font-size: 26px; margin-bottom: 22px; }

  .input-group label { font-size: 22px; }

  .input-group input[type="number"] { height: 76px; font-size: 36px; }

  #save-btn { height: 76px; font-size: 30px; }

  .reading-bp { font-size: 32px; }

  .empty-msg { font-size: 20px; padding: 28px 0; }
}

/* ================================================================
   RESPONSIVE LAYOUT — Tablet & Desktop
   ================================================================ */

/* ── Fluid base font size (overrides the static 18px above) ─────── */
html {
  font-size: clamp(16px, 1.5vw + 13px, 20px);
}

/* ── iPad portrait (768px – 1023px): 2-column grid ──────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  .header-inner {
    max-width: 960px;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 24px;
  }

  header h1 { font-size: 32px; }

  main {
    max-width: 960px;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: 340px 1fr;
    column-gap: 20px;
    align-items: start;
  }

  /* Input card: left column, spans all rows, sticky below header */
  #input-card {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 106px;
    align-self: start;
  }

  /* Today + history: right column, stacked */
  #today-card,
  #history-card {
    grid-column: 2;
  }

  .card { padding: 24px 22px; }

  #save-btn {
    height: 72px;
    font-size: 28px;
  }
}

/* ── iPad landscape / small desktop (1024px – 1279px) ───────────── */
@media (min-width: 1024px) and (max-width: 1279px) {

  .header-inner {
    max-width: 1100px;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 28px;
  }

  header h1 { font-size: 34px; }

  main {
    max-width: 1100px;
    padding: 24px 32px;
    display: grid;
    grid-template-columns: 380px 1fr;
    column-gap: 28px;
    align-items: start;
  }

  #input-card {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 110px;
    align-self: start;
  }

  #today-card,
  #history-card {
    grid-column: 2;
  }

  .card {
    padding: 28px 26px;
    border-radius: 24px;
  }

  .card h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  #save-btn {
    height: 74px;
    font-size: 28px;
  }

  .reading-bp { font-size: 30px; }
}

/* ── Desktop (1280px+): centred, generous spacing ────────────────── */
@media (min-width: 1280px) {

  .header-inner {
    max-width: 1200px;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 32px;
  }

  header {
    padding: 22px 40px 18px;
  }

  header h1 { font-size: 36px; }

  main {
    max-width: 1200px;
    padding: 28px 40px;
    display: grid;
    grid-template-columns: 420px 1fr;
    column-gap: 36px;
    align-items: start;
  }

  #input-card {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 118px;
    align-self: start;
  }

  #today-card,
  #history-card {
    grid-column: 2;
  }

  .card {
    padding: 32px 30px;
    border-radius: 24px;
  }

  .card h2 {
    font-size: 26px;
    margin-bottom: 22px;
  }

  .input-group label { font-size: 22px; }

  .input-group input[type="number"] {
    height: 76px;
    font-size: 36px;
  }

  #save-btn {
    height: 76px;
    font-size: 30px;
  }

  .reading-bp { font-size: 32px; }

  .empty-msg {
    font-size: 20px;
    padding: 28px 0;
  }
}