/* MediTime Pro - shared stylesheet
   Dark navy theme matching the meditime.uk site. One theme only.
   Pink = Paracetamol, Blue = Ibuprofen, same meaning as always. */

@font-face {
  font-family: 'Sora';
  src: url('fonts/Sora.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --bg: #0D1526;
  --card: #16233B;
  --panel: rgba(255, 255, 255, 0.07);
  --panel-strong: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.12);
  --text: #F2F5FA;
  --muted: #A9B7CE;
  --dim: #64748F;
  --pink: #EE2B65;
  --blue: #2271F1;
  --green: #11D493;
  --danger: #F1274C;
  --radius: 26px;
  --radius-sm: 14px;

  /* Theme-dependent extras (dark defaults) */
  --card-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  --chip-bg: rgba(0, 0, 0, 0.22);
  --pink-soft: #FF9DBE;
  --blue-soft: #9DC2FF;
  --green-soft: #7FE0BF;
  --danger-soft: #FF9DAD;
  --ring-track: rgba(255, 255, 255, 0.1);
  --dot-border: rgba(255, 255, 255, 0.25);
}

/* Light theme: same layout, flipped palette */
html[data-theme="light"] {
  --bg: #E9EEF6;
  --card: #FFFFFF;
  --panel: rgba(13, 21, 38, 0.05);
  --panel-strong: rgba(13, 21, 38, 0.09);
  --line: rgba(13, 21, 38, 0.14);
  --text: #1B2740;
  --muted: #5B6B8A;
  --dim: #8B99B3;

  --card-shadow: 0 14px 36px rgba(22, 35, 59, 0.12);
  --chip-bg: rgba(13, 21, 38, 0.06);
  --pink-soft: #C22A5C;
  --blue-soft: #2059B8;
  --green-soft: #1E8F68;
  --danger-soft: #C23A50;
  --ring-track: rgba(13, 21, 38, 0.1);
  --dot-border: rgba(13, 21, 38, 0.25);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--blue); }

/* ---------- Top navigation ---------- */
.topnav {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  overflow: hidden;
}

.topnav a {
  float: left;
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 10px;
}

.topnav a.active {
  color: var(--text);
  background: var(--panel);
}

.topnav a:hover { color: var(--text); }

.topnav a.icon { display: none; }

@media screen and (max-width: 640px) {
  .topnav a:not(:first-child) { display: none; }
  .topnav a.icon { float: right; display: block; font-size: 17px; }
  .topnav.responsive { position: relative; }
  .topnav.responsive .icon { position: absolute; right: 10px; top: 8px; }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  width: 38px;
  height: 38px;
  max-width: none;
  padding: 0;
  border-radius: 50%;
  background: var(--panel);
  color: var(--muted);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: absolute;
  top: 14px;
  right: 14px;
}

.theme-toggle:hover { background: var(--panel-strong); color: var(--text); }

.card { position: relative; }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  width: 92vw;
  max-width: 420px;
  margin: 22px auto;
  padding: 26px 22px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card h1 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  text-align: center;
}

.card p {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 12px;
}

.card label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  align-self: flex-start;
}

/* ---------- Logo ---------- */
.app-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.app-logo img { height: 44px; }

.pro-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  padding: 4px 10px;
  border-radius: 999px;
}

.tagline {
  color: var(--dim);
  font-size: 12.5px;
  margin-bottom: 18px;
  text-align: center;
}

/* ---------- Buttons ---------- */
button {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel-strong);
  border: none;
  border-radius: var(--radius-sm);
  padding: 15px 18px;
  width: 100%;
  max-width: 340px;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

button:active { transform: scale(0.985); }

button:disabled {
  color: var(--dim);
  background: var(--panel);
  cursor: default;
  transform: none;
}

button.take-pink { background: var(--pink); color: #fff; }
button.take-blue { background: var(--blue); color: #fff; }
button.take-pink:disabled,
button.take-blue:disabled { background: var(--panel); color: var(--dim); }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Person list (main page) ---------- */
.legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
}

.legend span { display: flex; align-items: center; gap: 6px; }

.m-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.m-dot.p { background: var(--pink); }
.m-dot.i { background: var(--blue); }

.person-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.person-card {
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 15px 16px 14px;
  max-width: none;
  text-align: left;
}

.person-card:hover { border-color: var(--line); }

.person-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.person-name {
  font-size: 17px;
  font-weight: 700;
}

.person-go { color: var(--dim); font-size: 15px; }

.person-status {
  display: flex;
  gap: 9px;
}

.chip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 8px 6px;
  border-radius: 10px;
  background: var(--chip-bg);
  color: var(--muted);
}

.chip.ok.p { background: var(--pink); color: #fff; }
.chip.ok.i { background: var(--blue); color: #fff; }
.chip.ok .m-dot { background: #fff; }

.chip.wait { opacity: 0.75; }
.chip .fa { font-size: 12px; }

/* ---------- Tracker (user page) ---------- */
.tracker-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.tracker-name { font-size: 20px; font-weight: 700; }

.tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-strong);
  padding: 4px 10px;
  border-radius: 999px;
}

.ring-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0 6px;
}

.ring { position: relative; width: 200px; height: 200px; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring .track { stroke: var(--ring-track); }
.ring .bar {
  stroke: var(--pink);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s linear, stroke 0.25s ease;
}

.ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 26px;
}

.ring-label .t {
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.ring-label .s {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 5px;
}

.info-box {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  margin-bottom: 4px;
  min-height: 20px;
}

.message-box {
  color: var(--muted);
  background: var(--panel);
  border-radius: 10px;
  font-size: 12.5px;
  text-align: center;
  padding: 8px 12px;
  margin: 8px 0 2px;
  display: none;
  width: 100%;
}

/* Med toggle panels */
.med-toggles {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 16px;
}

.med-toggle {
  background: var(--panel);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  cursor: pointer;
  max-width: none;
  text-align: left;
}

.med-toggle .m-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 9px;
}

.med-toggle.selected.p { border-color: var(--pink); background: rgba(238, 43, 101, 0.1); }
.med-toggle.selected.i { border-color: var(--blue); background: rgba(34, 113, 241, 0.1); }

.dose-dots {
  display: flex;
  gap: 6px;
}

.dose-dots span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--dot-border);
  display: inline-block;
}

.dose-dots.para span.taken { background: var(--pink); border-color: var(--pink); }
.dose-dots.ibu  span.taken { background: var(--blue); border-color: var(--blue); }

/* ---------- User buttons (edit names) ---------- */
.user-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.user-buttons button { max-width: none; background: var(--panel); }
.user-buttons button:hover { background: var(--panel-strong); }

/* ---------- Forms ---------- */
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  max-width: 340px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  margin-bottom: 16px;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
}

::placeholder { color: var(--dim); }

/* ---------- Status / notices ---------- */
.status {
  display: none;
  width: 100%;
  max-width: 340px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  text-align: center;
  margin-bottom: 14px;
}

.status.ok    { display: block; background: rgba(17, 212, 147, 0.15); color: var(--green-soft); }
.status.error { display: block; background: rgba(241, 39, 76, 0.15); color: var(--danger-soft); }

.price {
  font-size: 40px;
  font-weight: 800;
  color: var(--text);
  margin: 8px 0 14px;
}

/* ---------- Undo ---------- */
.last-dose {
  width: 100%;
  background: var(--panel);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 16px;
}

.last-dose strong { color: var(--text); }

/* ---------- Text pages ---------- */
.card.text-page { align-items: flex-start; }
.card.text-page h1 { text-align: left; }
.card.text-page p { font-size: 14px; }
.card.text-page a { color: var(--pink); }