/*
Shared theme + navbar styles for the reports app.
Copy to: app/shared/styles.css — load on every page with:
Dark theme tokens match peaka-reports so report pages, the landing
page, and the admin page all share one consistent look.
*/
:root {
--bg: #0f172a; /* page background */
--card: #1e293b; /* card background */
--border: #334155; /* card / divider border */
--text: #f1f5f9; /* primary text */
--muted: #94a3b8; /* secondary / muted text */
--accent: #6366f1; /* links, active nav, primary accent */
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Inter", system-ui, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.5;
}
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* ---- Navbar ---------------------------------------------------------- */
/* nav.js injects as the first child of . */
.nav-bar {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 0.85rem 1.5rem;
background: var(--card);
border-bottom: 1px solid var(--border);
}
.nav-bar .nav-brand {
font-weight: 700;
font-size: 1rem;
color: var(--text);
}
.nav-bar .nav-brand:hover {
text-decoration: none;
color: var(--accent);
}
.nav-bar .nav-links {
display: flex;
gap: 1rem;
align-items: center;
}
.nav-bar .nav-links a {
color: var(--muted);
font-size: 0.9rem;
}
.nav-bar .nav-links a:hover,
.nav-bar .nav-links a.active {
color: var(--text);
text-decoration: none;
}
/* pushes auth area / roles to the far right */
.nav-bar .nav-spacer {
flex: 1;
}
/* role pills — populated by peaka-auth's decorateNavFromIdentity() */
.nav-bar .roles {
display: flex;
gap: 0.4rem;
}
.role-pill {
background: var(--border);
color: var(--text);
border-radius: 999px;
padding: 0.15rem 0.6rem;
font-size: 0.72rem;
text-transform: lowercase;
}
.role-pill.admin {
background: var(--accent);
}
.nav-bar .nav-auth button {
background: transparent;
border: 1px solid var(--border);
color: var(--text);
border-radius: 6px;
padding: 0.3rem 0.75rem;
font-size: 0.85rem;
cursor: pointer;
}
.nav-bar .nav-auth button:hover {
border-color: var(--accent);
}
/* ---- Landing page report list --------------------------------------- */
.page-wrap {
max-width: 1100px;
margin: 0 auto;
padding: 2.5rem 1.5rem;
}
.page-wrap h1 {
font-size: 1.6rem;
margin-bottom: 0.25rem;
}
.page-wrap .subtitle {
color: var(--muted);
margin-bottom: 2rem;
}
.report-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
}
.report-card {
display: block;
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1.25rem;
color: var(--text);
}
.report-card:hover {
border-color: var(--accent);
text-decoration: none;
}
.report-card h2 {
font-size: 1.05rem;
margin-bottom: 0.35rem;
}
.report-card p {
color: var(--muted);
font-size: 0.9rem;
}
.empty-state {
color: var(--muted);
padding: 2rem 0;
}