/*
 * dashboard.css
 * Shared design tokens (CSS variables), reset, and base styles used by
 * every dashboard template.  Individual templates keep their own
 * component-level styles but link to this file to avoid duplicating the
 * root variables and body reset on every page load.
 */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  --bg:         #0f1117;
  --surface:    #1a1d27;
  --border:     #2a2d3a;
  --text:       #e8eaf0;
  --muted:      #8b8fa8;
  --accent:     #4f8ef7;
  --green:      #22c55e;
  --red:        #ef4444;
  --yellow:     #eab308;
  --green-dim:  #14532d;
  --red-dim:    #3f1212;
  --blue-dim:   #1d4ed8;
  --yellow-dim: #3f2d00;
  --radius:     14px;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Base body ──────────────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  /* Leave room for fixed bottom nav */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
}

/* ── Bottom navigation bar ──────────────────────────────────────────────── */
.bnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  padding: 6px 0 calc(env(safe-area-inset-bottom, 0px) + 6px);
}
.bnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 1px; text-decoration: none; font-size: 10px;
  color: var(--muted); padding: 4px 0;
}
.bnav a.active { color: var(--accent); }
.bnav-icon { font-size: 16px; line-height: 1; }

/* ── Toast notification ─────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 16px) + 16px);
  left: 50%; transform: translateX(-50%);
  padding: 10px 20px; border-radius: 20px;
  font-size: 14px; font-weight: 600;
  z-index: 200; display: none;
  white-space: nowrap; pointer-events: none;
}
.toast.show { display: block; }
.toast-green  { background: var(--green-dim); color: var(--green); border: 1px solid var(--green); }
.toast-red    { background: var(--red-dim);   color: var(--red);   border: 1px solid var(--red); }
.toast-blue   { background: var(--blue-dim);  color: var(--accent); border: 1px solid var(--accent); }

/* ── Spinner (used on buttons while async actions are pending) ──────────── */
.spinner { display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Generic divider ────────────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border); }

/* ── Sort chips ─────────────────────────────────────────────────────────── */
.sort-chip {
  font-size: 12px; padding: 4px 10px; border-radius: 20px;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sort-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }