/* Trak — dark, mobile-first dashboard */

:root {
  --bg:        #0b0f14;
  --bg-elev:   #121821;
  --bg-elev2:  #182230;
  --line:      #1f2a38;
  --text:      #e8edf3;
  --muted:     #8b96a6;
  --accent:    #6c8cff;
  --accent-2:  #8a5cff;
  --good:      #38c172;
  --warn:      #f0a44a;
  --danger:    #ff5d6c;
  --radius:    14px;
  --shadow:    0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.25);
  --tap:       44px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px; line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: rgba(11,15,20,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .brand a { color: var(--text); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.5px; text-decoration: none; }
.topnav { display: flex; gap: 14px; align-items: center; }
.topnav a, .topnav .link-btn { color: var(--muted); font-size: 0.9rem; }

.content {
  max-width: 880px;
  margin: 0 auto;
  padding: 16px 14px 96px;
}
.content.narrow { max-width: 540px; }

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr 1fr 64px 1fr 1fr;
  align-items: center;
  background: rgba(11,15,20,0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  z-index: 5;
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: var(--tap); color: var(--muted); font-size: 0.74rem; gap: 2px;
}
.bottom-nav a .ic { font-size: 1.1rem; opacity: 0.8; }
.bottom-nav a.active { color: var(--text); }
.bottom-nav a.add-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white; height: 48px; width: 48px;
  border-radius: 999px; margin: 0 auto;
  font-size: 1.6rem; line-height: 48px; text-align: center;
  box-shadow: 0 6px 18px rgba(108,140,255,0.45);
}
.bottom-nav a.add-btn span { display: block; line-height: 48px; }

@media (min-width: 720px) {
  .bottom-nav { display: none; }
  .content { padding-bottom: 32px; }
  .topnav .link-btn { font-size: 0.95rem; }
}

/* ---------- Typography ---------- */
h1, h2, h3 { margin: 0 0 8px; font-weight: 600; letter-spacing: -0.01em; }
.page-title { font-size: 1.55rem; margin-top: 4px; }
.page-sub   { margin-top: 0; margin-bottom: 14px; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.strong { font-weight: 600; }

/* ---------- Cards & lists ---------- */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px 16px;
  margin: 12px 0;
  box-shadow: var(--shadow);
}
.card h2 { font-size: 1.05rem; margin-bottom: 8px; }
.row { display: flex; align-items: center; }
.row.between { justify-content: space-between; }
.row.gap { gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.list { list-style: none; margin: 8px 0 0; padding: 0; }
.list > li { padding: 10px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.list > li:first-child { border-top: none; }

/* ---------- Forms ---------- */
label { display: block; font-size: 0.85rem; color: var(--muted); margin: 10px 0; }
label.inline-check { display: inline-flex; gap: 8px; align-items: center; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%;
  background: var(--bg-elev2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  margin-top: 6px;
}
textarea { resize: vertical; min-height: 80px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: #5b6675; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .grid-2 { grid-template-columns: 1fr; } }

button, .primary, .secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--bg-elev2);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .primary:hover, .secondary:hover { filter: brightness(1.1); text-decoration: none; }
.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; border-color: transparent; }
.secondary { background: transparent; border-color: var(--line); color: var(--text); }
.block { display: flex; width: 100%; }
.link-btn { background: transparent; border: none; color: var(--accent); padding: 6px 8px; min-height: auto; cursor: pointer; font: inherit; }
.link-btn.danger { color: var(--danger); }
.link-btn.small { font-size: 0.85rem; }
form.inline { display: inline; }

/* ---------- Badges, status, KPIs ---------- */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-elev2); border: 1px solid var(--line);
  font-size: 0.75rem; color: var(--muted);
}
.badge.good { background: rgba(56,193,114,0.15); color: var(--good); border-color: rgba(56,193,114,0.4); }
.badge.ok   { background: rgba(240,164,74,0.15); color: var(--warn); border-color: rgba(240,164,74,0.4); }
.status-good { color: var(--good); font-weight: 600; }

.kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0; }
.kpi { background: var(--bg-elev2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.kpi-label { color: var(--muted); font-size: 0.8rem; }
.kpi-value { font-size: 1.2rem; font-weight: 700; margin-top: 2px; }
.bar { height: 6px; background: var(--bg-elev); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.bar-fill { height: 100%; background: var(--good); }
.bar-fill.blue { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* ---------- Tabs, day list, tables ---------- */
.tabs { display: flex; gap: 4px; margin: 6px 0 14px; }
.tab { padding: 8px 12px; border-radius: 8px; color: var(--muted); border: 1px solid transparent; }
.tab.active { background: var(--bg-elev); color: var(--text); border-color: var(--line); }

.day-list { list-style: none; padding: 0; margin: 0; }
.day-item {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev);
  margin: 8px 0;
}
.day-date { font-weight: 600; }
.day-row { grid-column: 1 / 3; color: var(--muted); font-size: 0.9rem; margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.day-item .link-btn { grid-column: 2; align-self: start; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line); margin-right: 2px; }
.dot.good { background: var(--good); }
.dot.ok   { background: var(--warn); }
.dot.off  { background: var(--line); }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.92rem; }
.data-table th { color: var(--muted); font-weight: 500; font-size: 0.8rem; }
@media (max-width: 640px) { .data-table th:nth-child(n+4), .data-table td:nth-child(n+4) { display: none; } }

.sets-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.sets-table th, .sets-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); }

/* ---------- Flash & errors ---------- */
.flash { padding: 10px 12px; border-radius: 10px; margin: 8px 0; font-size: 0.95rem; }
.flash-success { background: rgba(56,193,114,0.15); border: 1px solid rgba(56,193,114,0.4); color: var(--good); }
.flash-error   { background: rgba(255,93,108,0.15); border: 1px solid rgba(255,93,108,0.4); color: var(--danger); }
.flash-info    { background: rgba(108,140,255,0.15); border: 1px solid rgba(108,140,255,0.4); color: var(--accent); }
.error-wrap { max-width: 480px; margin: 80px auto; padding: 0 20px; text-align: center; }

/* ---------- Auth ---------- */
.auth-body { background: radial-gradient(1200px 600px at 50% -100px, rgba(108,140,255,0.10), transparent 60%), var(--bg); }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 28px; width: 100%; max-width: 360px; box-shadow: var(--shadow); }
.auth-card .brand { font-size: 1.4rem; font-weight: 700; letter-spacing: 1px; }
.auth-card form button { margin-top: 12px; width: 100%; }

/* ---------- Range chips ---------- */
.range-form { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.chip { padding: 6px 12px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
.chip.active { background: var(--accent); color: white; border-color: transparent; }

/* ---------- Feelings & gauge ---------- */
.feelings-card .primary.block { margin-top: 8px; }
.feelings-form { margin-top: 12px; padding: 12px; background: var(--bg-elev2); border-radius: 12px; border: 1px solid var(--line); }
.feeling-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.feeling-chips .chip { cursor: pointer; transition: transform .08s ease, border-color .15s ease, background .15s ease; }
.feeling-chips .chip:active { transform: scale(0.97); }
.feeling-chips .chip.selected { color: white; border-color: transparent; }
.feeling-chips .chip.valence-negative.selected { background: var(--danger); }
.feeling-chips .chip.valence-neutral.selected  { background: #6b7280; }
.feeling-chips .chip.valence-positive.selected { background: var(--good); }

.intensity-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.intensity-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 10px; border-radius: 999px; outline: none;
  background: linear-gradient(90deg, #38c172 0%, #f0a44a 50%, #ff5d6c 100%);
}
.intensity-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: white; border: 2px solid var(--bg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  cursor: pointer;
}
.intensity-slider::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: white; border: 2px solid var(--bg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  cursor: pointer;
}
.intensity-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 4px 10px; border-radius: 999px;
  font-weight: 700; color: white;
  background: hsl(calc(120 - (var(--i) - 1) * 13.3), 60%, 48%);
  border: 1px solid rgba(255,255,255,0.18);
}

.feeling-list { margin-top: 10px; }
.feeling-row { padding: 8px 0; gap: 10px; align-items: flex-start; }
.feeling-row .valence-dot { flex: 0 0 10px; margin-top: 6px; }
.valence-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.valence-dot.positive { background: var(--good); }
.valence-dot.negative { background: var(--danger); }
.valence-dot.neutral  { background: #8b96a6; }

/* Daily gauge */
.gauge-wrap { margin-top: 14px; padding: 12px; background: var(--bg-elev2); border: 1px solid var(--line); border-radius: 12px; }
.gauge-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.gauge-header h3 { margin: 0; font-size: 0.95rem; }
.gauge-dominant {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 12px; border-radius: 10px; margin: 4px 0 12px;
  border: 1px solid var(--line);
}
.gauge-dominant.hot  { background: linear-gradient(135deg, rgba(255,93,108,0.18), transparent 70%); border-color: rgba(255,93,108,0.45); }
.gauge-dominant.mid  { background: linear-gradient(135deg, rgba(240,164,74,0.18), transparent 70%); border-color: rgba(240,164,74,0.45); }
.gauge-dominant.calm { background: linear-gradient(135deg, rgba(56,193,114,0.18), transparent 70%); border-color: rgba(56,193,114,0.45); }
.gauge-feel { font-size: 1.15rem; font-weight: 700; }
.gauge-bars { display: flex; flex-direction: column; gap: 6px; }
.gauge-row { display: grid; grid-template-columns: 80px 1fr 90px; align-items: center; gap: 8px; }
.gauge-label { color: var(--muted); font-size: 0.85rem; }
.gauge-bar { height: 10px; background: var(--bg-elev); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.gauge-fill { height: 100%; width: var(--pct, 0%); border-radius: 999px; transition: width .4s ease; }
.gauge-row.negative .gauge-fill { background: linear-gradient(90deg, #ff5d6c, #ff8a5a); }
.gauge-row.neutral  .gauge-fill { background: linear-gradient(90deg, #8b96a6, #6b7280); }
.gauge-row.positive .gauge-fill { background: linear-gradient(90deg, #38c172, #6c8cff); }
.gauge-count { color: var(--muted); font-size: 0.85rem; text-align: right; }
@media (max-width: 480px) { .gauge-row { grid-template-columns: 70px 1fr 80px; } }

/* ---------- Insights page ---------- */
.insight-summary .kpi-row { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .insight-summary .kpi-row { grid-template-columns: 1fr 1fr; } }
.insight-callout.worst { border-color: rgba(255,93,108,0.45); background: linear-gradient(135deg, rgba(255,93,108,0.10), transparent 70%); }
.insight-callout.best  { border-color: rgba(56,193,114,0.45); background: linear-gradient(135deg, rgba(56,193,114,0.10), transparent 70%); }
.insight-callout h2 { font-size: 1rem; }
.trigger-callout-list { list-style: none; margin: 0; padding: 0; }
.trigger-callout-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.trigger-callout-list li:last-child { border-bottom: none; }
.intensity-pill.small { padding: 2px 7px; font-size: 0.78rem; min-width: 38px; }
.context-table td { font-size: 0.88rem; }
.context-table tr.negative { background: rgba(255,93,108,0.06); }
.context-table tr.positive { background: rgba(56,193,114,0.06); }
.context-table tr.neutral  { background: rgba(139,150,166,0.04); }

/* ---------- Chart wrappers (mobile-friendly height) ---------- */
.chart-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  margin: 8px 0 4px;
}
.chart-wrap.tall { height: 280px; }
.chart-wrap.short { height: 180px; }
@media (max-width: 640px) {
  .chart-wrap { height: 200px; }
  .chart-wrap.tall { height: 240px; }
  .chart-wrap.short { height: 160px; }
}
canvas { display: block; max-width: 100%; }

/* ---------- Pagination ---------- */
.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 16px 0 8px;
  padding: 10px 12px;
  background: var(--bg-elev2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.page-link {
  padding: 8px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.page-link:hover { border-color: var(--accent); text-decoration: none; }
.page-link.disabled { color: var(--muted); opacity: 0.5; cursor: not-allowed; }
.page-status { color: var(--text); font-size: 0.9rem; }
.page-status .muted { color: var(--muted); }

/* ---------- Add hub picker ---------- */
.add-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
@media (max-width: 480px) {
  .add-grid { grid-template-columns: 1fr; }
}
.add-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--bg-elev2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  min-height: 72px;
  transition: transform .08s ease, border-color .15s ease;
}
.add-card:hover { border-color: var(--accent); text-decoration: none; }
.add-card:active { transform: scale(0.98); }
.add-card .ic { font-size: 1.8rem; width: 40px; text-align: center; flex: 0 0 40px; }
.add-card .body { flex: 1; }
.add-card .title { font-weight: 600; font-size: 1rem; }
.add-card .desc { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.add-card .arrow { color: var(--muted); font-size: 1.2rem; }
.section-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 10px;
}

/* ---------- Responsive tables (hide non-essential columns on small screens) ---------- */
@media (max-width: 640px) {
  .context-table th:nth-child(n+4),
  .context-table td:nth-child(n+4) { display: none; }
  .context-table th:nth-child(3),
  .context-table td:nth-child(3) { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

details summary { cursor: pointer; color: var(--muted); padding: 6px 0; }