From f2d669d705814e51ca42b9f0fd7e3553208d7ab7 Mon Sep 17 00:00:00 2001
From: Johan Lundberg <lundberg@sunet.se>
Date: Thu, 19 Feb 2026 11:30:35 +0100
Subject: [PATCH] feat: add admin base template and CSS styles

---
 src/porchlight/static/style.css          | 163 +++++++++++++++++++++++
 src/porchlight/templates/admin/base.html |   9 ++
 2 files changed, 172 insertions(+)
 create mode 100644 src/porchlight/templates/admin/base.html

diff --git a/src/porchlight/static/style.css b/src/porchlight/static/style.css
index 7385b3a..cc7fa9c 100644
--- a/src/porchlight/static/style.css
+++ b/src/porchlight/static/style.css
@@ -146,6 +146,169 @@ main {
     border-bottom-color: var(--accent);
 }
 
+/* ---------- Admin ---------- */
+
+.admin-nav {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-4);
+    margin-bottom: var(--sp-6);
+    border-bottom: 1px solid var(--border);
+    padding-bottom: var(--sp-3);
+}
+
+.admin-nav a {
+    color: var(--fg-muted);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: var(--font-size-sm);
+    padding-bottom: var(--sp-3);
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.admin-nav a:hover {
+    color: var(--fg);
+}
+
+.admin-nav a[aria-current="page"] {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+
+.admin-badge {
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    color: var(--accent-fg);
+    background: var(--accent);
+    padding: var(--sp-1) var(--sp-2);
+    border-radius: var(--radius);
+    line-height: 1;
+}
+
+.admin-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--font-size-sm);
+}
+
+.admin-table th,
+.admin-table td {
+    text-align: left;
+    padding: var(--sp-2) var(--sp-3);
+    border-bottom: 1px solid var(--border);
+}
+
+.admin-table th {
+    font-weight: 600;
+    color: var(--fg-muted);
+    font-size: var(--font-size-sm);
+}
+
+.admin-table tbody tr:hover {
+    background: var(--surface);
+}
+
+.status-badge {
+    display: inline-block;
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    padding: var(--sp-1) var(--sp-2);
+    border-radius: var(--radius);
+    line-height: 1;
+}
+
+.status-active {
+    background: var(--success-bg);
+    color: var(--success-fg);
+}
+
+.status-inactive {
+    background: var(--error-bg);
+    color: var(--error-fg);
+}
+
+.group-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-1);
+    font-size: var(--font-size-sm);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: var(--sp-1) var(--sp-2);
+    line-height: 1;
+}
+
+.group-tag button {
+    background: none;
+    border: none;
+    color: var(--fg-muted);
+    cursor: pointer;
+    padding: 0;
+    font-size: var(--font-size-sm);
+    line-height: 1;
+}
+
+.group-tag button:hover {
+    color: var(--error-fg);
+}
+
+.admin-search {
+    display: flex;
+    gap: var(--sp-2);
+    margin-bottom: var(--sp-4);
+}
+
+.admin-search input[type="text"] {
+    flex: 1;
+    margin-bottom: 0;
+}
+
+.pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: var(--sp-4);
+    font-size: var(--font-size-sm);
+}
+
+.admin-detail section {
+    margin-bottom: var(--sp-6);
+}
+
+.invite-url {
+    font-family: ui-monospace, monospace;
+    font-size: var(--font-size-sm);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: var(--sp-3) var(--sp-4);
+    word-break: break-all;
+    margin-bottom: var(--sp-4);
+}
+
+.confirm-danger {
+    background: var(--error-bg);
+    border: 1px solid color-mix(in srgb, var(--error-fg) 20%, transparent);
+    border-radius: var(--radius);
+    padding: var(--sp-4);
+    margin-bottom: var(--sp-4);
+}
+
+@media (prefers-color-scheme: dark) {
+    .status-active {
+        background: var(--success-bg);
+        color: var(--success-fg);
+    }
+
+    .status-inactive {
+        background: var(--error-bg);
+        color: var(--error-fg);
+    }
+}
+
 /* ---------- Typography ---------- */
 
 h1 {
diff --git a/src/porchlight/templates/admin/base.html b/src/porchlight/templates/admin/base.html
new file mode 100644
index 0000000..d838751
--- /dev/null
+++ b/src/porchlight/templates/admin/base.html
@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+{% block content %}
+<nav class="admin-nav" aria-label="Administration">
+    <span class="admin-badge">Admin</span>
+    <a href="/admin/users" {% if active_page == "users" %}aria-current="page"{% endif %}>Users</a>
+</nav>
+{% block admin_content %}{% endblock %}
+{% endblock %}