:root {
  --epic-red: #e52329;
  --epic-green: #8fc043;
  --epic-blue: #2daae2;
  --epic-amber: #d88e1c;
  --dark-bg: #1a1a1a;
  --warm-grey: #f5f4f0;
  --ink: #1a1a1a;
  --muted: #6b6b6b;
  --line: #e9e7e2;
  --ms-blue: #0078D4;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "ss01", "cv11";
  color: var(--ink);
  background: var(--warm-grey);
  -webkit-font-smoothing: antialiased;
}

/* Topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--dark-bg); color: white;
  position: sticky; top: 0; z-index: 10;
  padding-top: max(14px, env(safe-area-inset-top));
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  display: inline-block; width: 18px; height: 18px;
  background: var(--epic-red); border-radius: 4px;
}
.brand-name { font-weight: 700; letter-spacing: 0.02em; }
#nav-user { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.role-chip {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  padding: 3px 8px; border-radius: 999px; color: #e5e5e5;
}
#logout {
  background: transparent; color: white; border: 1px solid #444; padding: 6px 12px;
  border-radius: 999px; cursor: pointer; font: inherit;
}

main { padding: 24px 20px 80px; max-width: 1100px; margin: 0 auto; }

/* Signed out */
.centred { text-align: center; padding: 64px 16px; }
.centred h1 { font-size: 36px; margin: 8px 0 12px; }
.centred p { color: var(--muted); margin: 0 0 32px; }
.btn-primary {
  display: inline-block; background: var(--ms-blue); color: white;
  padding: 14px 24px; border-radius: 999px; text-decoration: none; font-weight: 600;
}
.btn-primary:hover { background: #006abf; }

/* Dashboard */
.dash-title { font-size: 28px; margin: 8px 0; }
.dash-sub { color: var(--muted); margin: 0 0 24px; font-size: 14px; }

.tile-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tile {
  background: white; border-radius: 16px;
  border: 1px solid var(--line);
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.tile header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.tile h2 { font-size: 16px; margin: 0; letter-spacing: 0.01em; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ccc; }
.dot.green { background: var(--epic-green); }
.dot.amber { background: var(--epic-amber); }
.dot.red { background: var(--epic-red); }
.tile-body { font-size: 14px; min-height: 100px; }
.tile-body.skel { color: var(--muted); font-style: italic; }
.tile-empty, .tile-empty-sm { color: var(--muted); padding: 8px 0; font-size: 13px; }
.tile-meta {
  margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.metric-row .meta { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 6px; }
.metric-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; border-bottom: 1px dashed var(--line);
}
.metric-row:last-child { border: none; }
.metric-row .label { color: var(--muted); }
.metric-row .value { font-variant-numeric: tabular-nums; font-weight: 600; }
.value.red { color: var(--epic-red); }
.value.amber { color: var(--epic-amber); }
.value.green { color: var(--epic-green); }

/* Self-service */
.section-title { margin: 32px 0 12px; font-size: 18px; }
.self-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.self-card {
  background: white; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; text-decoration: none; color: var(--ink); font-weight: 500;
  text-align: center;
}
.self-card:hover { border-color: var(--epic-blue); }

.foot {
  text-align: center; color: var(--muted); font-size: 12px; padding: 24px 16px 48px;
}
#env-badge { padding: 2px 8px; background: var(--warm-grey); border-radius: 4px; }

@media (prefers-color-scheme: dark) {
  body { background: #0f0f0f; color: #f0eee8; }
  .tile, .self-card { background: #1c1c1c; border-color: #2a2a2a; color: #f0eee8; }
  .metric-row, .tile-meta { border-color: #2a2a2a; }
  .foot { color: #888; }
  .self-card { color: #f0eee8; }
}

@media (max-width: 520px) {
  main { padding: 16px 12px 80px; }
  .dash-title { font-size: 22px; }
  .tile { padding: 14px 16px; }
}

/* ===== Management dashboard ===== */
.tile-wide { grid-column: 1 / -1; }

.tuning-panel {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end;
  padding: 12px 14px; margin: 8px 0 14px; border-radius: 8px;
  background: rgba(32, 128, 141, 0.06);
  border: 1px solid rgba(32, 128, 141, 0.18);
  font-size: 13px;
}
.tuning-panel label {
  display: flex; flex-direction: column; gap: 4px;
  color: var(--muted); font-size: 12px;
}
.tuning-panel input[type=number] {
  width: 84px; padding: 6px 8px; border-radius: 6px;
  border: 1px solid #ccc; background: #fff; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.tuning-panel button {
  padding: 7px 14px; border-radius: 6px; border: 0;
  background: var(--epic-blue, #20808D); color: #fff;
  font-weight: 500; cursor: pointer; font-size: 13px;
}
.tuning-panel button.btn-secondary {
  background: transparent; color: var(--epic-blue, #20808D);
  border: 1px solid var(--epic-blue, #20808D);
}
.tune-status { color: var(--muted); font-size: 12px; }
.tuning-applied-meta {
  color: var(--muted); font-size: 11px;
  margin-bottom: 8px; font-variant-numeric: tabular-nums;
}

/* Monthly chart */
.chart-legend {
  display: flex; gap: 16px; margin-bottom: 6px;
  font-size: 12px; color: var(--muted);
}
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Events margin rows */
.evrows { display: flex; flex-direction: column; gap: 6px; }
.evrow {
  display: grid; grid-template-columns: 1fr 200px 80px;
  align-items: center; gap: 10px; padding: 6px 4px;
  border-bottom: 1px solid var(--border, #eee); font-size: 13px;
}
.evrow-label { display: flex; flex-direction: column; min-width: 0; }
.evrow-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evrow-meta { font-size: 11px; color: var(--muted); }
.evrow-bar { background: #f1f1ee; height: 10px; border-radius: 5px; overflow: hidden; }
.evrow-bar .bar { height: 100%; border-radius: 5px; }
.bar-neg { background: #A12C7B; }
.bar-amber { background: #DA7101; }
.bar-pos { background: #437A22; }
.evrow-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

@media (prefers-color-scheme: dark) {
  .tuning-panel input[type=number] {
    background: #2a2a2a; color: #f0eee8; border-color: #3a3a3a;
  }
  .evrow-bar { background: #2a2a2a; }
  .evrow { border-color: #2a2a2a; }
}

@media (max-width: 600px) {
  .evrow { grid-template-columns: 1fr 120px 70px; }
  .tuning-panel { font-size: 12px; }
}