thuttu/Car-Service-Database
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
thuttu
2026-08-26 22:39:33 +03:00
commit 2ade668e3e
10 changed files with 1640 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+120
View File
@@ -0,0 +1,120 @@
const state = { orders: [], users: [] };
const $ = (selector) => document.querySelector(selector);
async function request(url, options) {
const response = await fetch(url, options);
const data = await response.json();
if (!response.ok) throw new Error(data.error || 'Request failed.');
return data;
}
function showError(error) { $('#notice').textContent = error.message; }
function formatTime(value) { return new Date(value).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); }
function titleCase(value) { return value.replaceAll('_', ' '); }
function emptyMessage(message) { return `<div class="empty-state">${message}</div>`; }
function escapeHtml(value) { return String(value ?? '').replace(/[&<>'"]/g, (character) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[character])); }
async function loadOverview() {
try {
const [summary, appointments, orders] = await Promise.all([request('/api/summary'), request('/api/appointments'), request('/api/orders')]);
$('#today-appointments').textContent = summary.today_appointments;
$('#active-orders').textContent = summary.active_orders;
$('#customer-count').textContent = summary.customers;
$('#vehicle-count').textContent = summary.vehicles;
$('#appointments-list').innerHTML = appointments.length ? appointments.map((appointment) => `<div class="list-row"><span class="time">${formatTime(appointment.scheduled_at)}</span><div><div class="item-title">${appointment.customer_name}</div><div class="item-meta">${appointment.make} ${appointment.model} · ${appointment.reason}</div></div><span class="status ${appointment.status}">${titleCase(appointment.status)}</span></div>`).join('') : emptyMessage('No appointments scheduled for today.');
$('#orders-list').innerHTML = orders.length ? orders.slice(0, 5).map((order) => `<div class="list-row"><span class="time">${order.registration_number}</span><div><div class="item-title">${order.make} ${order.model}</div><div class="item-meta">${order.complaint}</div></div><span class="status ${order.status}">${titleCase(order.status)}</span></div>`).join('') : emptyMessage('No active service orders.');
} catch (error) { showError(error); }
}
async function loadCustomers() {
try {
const customers = await request('/api/customers');
$('#customers-table').innerHTML = customers.length ? customers.map((customer) => `<tr><td><strong>${customer.first_name} ${customer.last_name}</strong></td><td>${customer.email || '—'}<br />${customer.phone || ''}</td><td>${customer.vehicle_count}</td><td>${new Date(customer.created_at || Date.now()).toLocaleDateString()}</td></tr>`).join('') : `<tr><td colspan="4">${emptyMessage('No customers yet.')}</td></tr>`;
} catch (error) { showError(error); }
}
async function loadOrders() {
try {
state.orders = await request('/api/service-records');
$('#orders-table').innerHTML = state.orders.length ? state.orders.map((order) => `<tr><td>${escapeHtml(order.service_date)}</td><td>${escapeHtml(order.vin || '—')}</td><td><strong>${escapeHtml(order.license_plate)}</strong></td><td>${Number(order.mileage).toLocaleString()} km</td><td>${escapeHtml(order.customer_name)}</td><td>${escapeHtml(order.technician)}</td><td>${escapeHtml(order.complaint)}</td><td><select class="status-select" data-order-id="${order.service_order_id}"><option value="${order.status}" selected>${titleCase(order.status)}</option><option value="open">Open</option><option value="in_progress">In progress</option><option value="waiting_for_parts">Waiting for parts</option><option value="ready">Ready</option><option value="closed">Closed</option></select></td><td><button class="edit-button" data-record-id="${order.service_order_id}">Edit</button></td></tr>`).join('') : `<tr><td colspan="9">${emptyMessage('No service records yet.')}</td></tr>`;
document.querySelectorAll('.status-select').forEach((select) => select.addEventListener('change', updateOrderStatus));
document.querySelectorAll('.edit-button[data-record-id]').forEach((button) => button.addEventListener('click', () => editRecord(state.orders.find((order) => order.service_order_id === button.dataset.recordId))));
} catch (error) { showError(error); }
}
async function loadUsers() {
try {
state.users = await request('/api/users');
$('#users-table').innerHTML = state.users.map((user) => `<tr><td><strong>${escapeHtml(user.display_name)}</strong>${escapeHtml(user.username)}<br />${escapeHtml(user.email || '')}</td><td>${escapeHtml(titleCase(user.role))}</td><td><span class="permission ${user.can_read ? 'allowed' : ''}">${user.can_read ? 'Yes' : 'No'}</span></td><td><span class="permission ${user.can_add ? 'allowed' : ''}">${user.can_add ? 'Yes' : 'No'}</span></td><td><span class="permission ${user.can_delete ? 'allowed' : ''}">${user.can_delete ? 'Yes' : 'No'}</span></td><td><button class="edit-button" data-user-id="${user.user_id}">Edit</button> <button class="delete-button" data-user-id="${user.user_id}" data-user-name="${escapeHtml(user.display_name)}">Delete</button></td></tr>`).join('');
document.querySelectorAll('.delete-button').forEach((button) => button.addEventListener('click', deleteUser));
document.querySelectorAll('.edit-button[data-user-id]').forEach((button) => button.addEventListener('click', () => editUser(state.users.find((user) => user.user_id === button.dataset.userId))));
} catch (error) { showError(error); }
}
async function deleteUser(event) {
function editUser(user) {
const form = $('#user-form'); form.dataset.editId = user.user_id;
form.elements.username.value = user.username; form.elements.username.disabled = true;
form.elements.displayName.value = user.display_name; form.elements.email.value = user.email || '';
form.elements.role.value = user.role; form.elements.canRead.checked = user.can_read; form.elements.canAdd.checked = user.can_add; form.elements.canDelete.checked = user.can_delete;
$('#user-dialog-title').textContent = 'Edit user'; $('#user-submit-button').textContent = 'Save changes'; $('#user-dialog').showModal();
}
function editRecord(record) {
const form = $('#record-form'); form.dataset.editId = record.service_order_id;
form.elements.serviceDate.value = record.service_date.slice(0, 10); form.elements.customerName.value = record.customer_name; form.elements.customerEmail.value = record.customer_email || '';
form.elements.vin.value = record.vin || ''; form.elements.licensePlate.value = record.license_plate; form.elements.mileage.value = record.mileage; form.elements.technicianName.value = record.technician; form.elements.complaint.value = record.complaint;
$('#record-dialog-title').textContent = 'Edit service record'; $('#record-submit-button').textContent = 'Save changes'; $('#record-dialog').showModal();
}
if (!window.confirm(`Delete ${event.target.dataset.userName}?`)) return;
try { await request(`/api/users/${event.target.dataset.userId}`, { method: 'DELETE' }); await loadUsers(); } catch (error) { showError(error); }
}
async function updateOrderStatus(event) {
try { await request(`/api/orders/${event.target.dataset.orderId}/status`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: event.target.value }) }); await loadOrders(); await loadOverview(); } catch (error) { showError(error); }
}
function switchView(viewName) {
document.querySelectorAll('.view').forEach((view) => view.classList.toggle('active-view', view.id === `${viewName}-view`));
document.querySelectorAll('.nav-item').forEach((item) => item.classList.toggle('active', item.dataset.view === viewName));
$('#page-title').textContent = viewName === 'overview' ? 'Good morning, workshop.' : viewName === 'customers' ? 'Your customer directory.' : viewName === 'orders' ? 'Keep the bays moving.' : 'Manage workshop access.';
if (viewName === 'customers') loadCustomers();
if (viewName === 'orders') loadOrders();
if (viewName === 'users') loadUsers();
}
document.querySelectorAll('[data-view]').forEach((button) => button.addEventListener('click', () => switchView(button.dataset.view)));
document.querySelectorAll('#new-customer-button, #new-customer-button-secondary').forEach((button) => button.addEventListener('click', () => $('#customer-dialog').showModal()));
$('#new-user-button').addEventListener('click', () => { const form = $('#user-form'); delete form.dataset.editId; form.reset(); form.elements.username.disabled = false; $('#user-dialog-title').textContent = 'Add user'; $('#user-submit-button').textContent = 'Create user'; $('#user-dialog').showModal(); });
$('#cancel-user-button').addEventListener('click', () => $('#user-dialog').close());
$('#close-user-button').addEventListener('click', () => $('#user-dialog').close());
$('#new-record-button').addEventListener('click', () => $('#record-dialog').showModal());
$('#cancel-record-button').addEventListener('click', () => $('#record-dialog').close());
$('#close-record-button').addEventListener('click', () => $('#record-dialog').close());
$('#customer-form').addEventListener('submit', async (event) => {
event.preventDefault();
try { await request('/api/customers', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(Object.fromEntries(new FormData(event.target))) }); event.target.reset(); $('#customer-dialog').close(); await loadOverview(); await loadCustomers(); } catch (error) { showError(error); }
});
$('#user-form').addEventListener('submit', async (event) => {
event.preventDefault();
try {
const form = new FormData(event.target);
const editId = event.target.dataset.editId;
await request(editId ? `/api/users/${editId}` : '/api/users', { method: editId ? 'PATCH' : 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: form.get('username'), displayName: form.get('displayName'), email: form.get('email'), role: form.get('role'), canRead: form.has('canRead'), canAdd: form.has('canAdd'), canDelete: form.has('canDelete') }) });
event.target.reset(); delete event.target.dataset.editId; event.target.elements.username.disabled = false; $('#user-dialog-title').textContent = 'Add user'; $('#user-submit-button').textContent = 'Create user'; $('#user-dialog').close(); await loadUsers();
} catch (error) { showError(error); }
});
$('#record-form').addEventListener('submit', async (event) => {
event.preventDefault();
try {
const form = Object.fromEntries(new FormData(event.target));
const editId = event.target.dataset.editId;
await request(editId ? `/api/service-records/${editId}` : '/api/service-records', { method: editId ? 'PATCH' : 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form) });
event.target.reset(); delete event.target.dataset.editId; $('#record-dialog-title').textContent = 'Add service record'; $('#record-submit-button').textContent = 'Create service record'; $('#record-dialog').close(); await loadOrders(); await loadOverview();
} catch (error) { showError(error); }
});
loadOverview();
public/index.html
+51
View File
@@ -0,0 +1,51 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bayline Service Desk</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<div class="app-shell">
<aside class="sidebar">
<div class="brand"><span class="brand-mark">B</span><span>Bayline<br /><strong>Service Desk</strong></span></div>
<nav aria-label="Main navigation">
<button class="nav-item active" data-view="overview"><span>Overview</span><small>01</small></button>
<button class="nav-item" data-view="customers"><span>Customers</span><small>02</small></button>
<button class="nav-item" data-view="orders"><span>Service records</span><small>03</small></button>
<button class="nav-item" data-view="users"><span>Accounts</span><small>04</small></button>
</nav>
<div class="sidebar-footer"><span class="status-dot"></span><span>Database online</span><small>PostgreSQL 16</small></div>
</aside>
<main class="main-content">
<header class="topbar"><div><p class="eyebrow">Wednesday, August 26, 2026</p><h1 id="page-title">Good morning, workshop.</h1></div><button class="primary-button" id="new-customer-button">+ New customer</button></header>
<div id="notice" class="notice" role="status"></div>
<section id="overview-view" class="view active-view">
<div class="metric-grid">
<article class="metric-card"><span class="metric-label">Today’s appointments</span><strong id="today-appointments">—</strong><span class="metric-note">Scheduled for today</span></article>
<article class="metric-card accent"><span class="metric-label">Active service orders</span><strong id="active-orders">—</strong><span class="metric-note">Work currently in motion</span></article>
<article class="metric-card"><span class="metric-label">Customers</span><strong id="customer-count">—</strong><span class="metric-note">In the workshop database</span></article>
<article class="metric-card"><span class="metric-label">Vehicles</span><strong id="vehicle-count">—</strong><span class="metric-note">Registered vehicles</span></article>
</div>
<div class="content-grid">
<section class="panel"><div class="panel-heading"><div><p class="eyebrow">Today</p><h2>Appointments</h2></div><button class="text-button" data-view="customers">View customers →</button></div><div id="appointments-list" class="list-container"><div class="empty-state">Loading appointments...</div></div></section>
<section class="panel dark-panel"><div class="panel-heading"><div><p class="eyebrow">Workshop floor</p><h2>Active work</h2></div><button class="text-button light" data-view="orders">All orders →</button></div><div id="orders-list" class="list-container"><div class="empty-state">Loading service orders...</div></div></section>
</div>
</section>
<section id="customers-view" class="view"><div class="section-heading"><div><p class="eyebrow">Directory</p><h2>Customers</h2><p class="subheading">People and vehicles connected to your workshop.</p></div><button class="primary-button" id="new-customer-button-secondary">+ New customer</button></div><div class="panel table-panel"><div class="table-wrap"><table><thead><tr><th>Customer</th><th>Contact</th><th>Vehicles</th><th>Added</th></tr></thead><tbody id="customers-table"></tbody></table></div></div></section>
<section id="orders-view" class="view"><div class="section-heading"><div><p class="eyebrow">Workshop floor</p><h2>Service records</h2><p class="subheading">VIN, plate, mileage, date, customer, and technician in one view.</p></div><button class="primary-button" id="new-record-button">+ Add service record</button></div><div class="panel table-panel"><div class="table-wrap"><table><thead><tr><th>Service date</th><th>VIN</th><th>License plate</th><th>Mileage</th><th>Customer</th><th>Technician</th><th>Complaint</th><th>Status</th></tr></thead><tbody id="orders-table"></tbody></table></div></div></section>
<section id="users-view" class="view"><div class="section-heading"><div><p class="eyebrow">Access control</p><h2>User accounts</h2><p class="subheading">Manage workshop staff and their database rights.</p></div><button class="primary-button" id="new-user-button">+ Add user</button></div><div class="panel table-panel"><div class="table-wrap"><table><thead><tr><th>User</th><th>Role</th><th>Read</th><th>Add</th><th>Delete</th><th>Actions</th></tr></thead><tbody id="users-table"></tbody></table></div></div></section>
</main>
</div>
<dialog id="customer-dialog"><form method="dialog" id="customer-form"><div class="dialog-heading"><div><p class="eyebrow">Directory</p><h2>Add customer</h2></div><button class="close-button" value="cancel" aria-label="Close">×</button></div><label>First name<input name="firstName" required /></label><label>Last name<input name="lastName" required /></label><label>Email<input name="email" type="email" /></label><label>Phone<input name="phone" type="tel" /></label><button class="primary-button" value="default">Save customer</button></form></dialog>
<dialog id="user-dialog"><form method="dialog" id="user-form"><div class="dialog-heading"><div><p class="eyebrow">Access control</p><h2 id="user-dialog-title">Add user</h2></div><button class="close-button" type="button" id="close-user-button" aria-label="Close">×</button></div><label>Username<input name="username" required /></label><label>Display name<input name="displayName" required /></label><label>Email<input name="email" type="email" /></label><label>Role<select name="role"><option value="viewer">Viewer</option><option value="technician">Technician</option><option value="service_advisor">Service advisor</option><option value="admin">Administrator</option></select></label><fieldset><legend>Rights</legend><label class="check-label"><input name="canRead" type="checkbox" checked /> Read records</label><label class="check-label"><input name="canAdd" type="checkbox" /> Add records</label><label class="check-label"><input name="canDelete" type="checkbox" /> Delete records</label></fieldset><div class="dialog-actions"><button class="secondary-button" type="button" id="cancel-user-button">Cancel</button><button class="primary-button" id="user-submit-button" value="default">Create user</button></div></form></dialog>
<dialog id="record-dialog"><form method="dialog" id="record-form"><div class="dialog-heading"><div><p class="eyebrow">Workshop floor</p><h2 id="record-dialog-title">Add service record</h2></div><button class="close-button" type="button" id="close-record-button" aria-label="Close">×</button></div><label>Service date<input name="serviceDate" type="date" required /></label><label>Customer name<input name="customerName" placeholder="First and last name" required /></label><label>Customer email<input name="customerEmail" type="email" /></label><label>VIN<input name="vin" minlength="17" maxlength="17" required /></label><label>License plate number<input name="licensePlate" required /></label><label>Car mileage<input name="mileage" type="number" min="0" step="1" required /></label><label>Technician<input name="technicianName" required /></label><label>Complaint or service requested<textarea name="complaint" rows="3" required></textarea></label><div class="dialog-actions"><button class="secondary-button" type="button" id="cancel-record-button">Cancel</button><button class="primary-button" id="record-submit-button" value="default">Create service record</button></div></form></dialog>
<script src="/app.js"></script>
</body>
</html>
public/styles.css
+24
View File
@@ -0,0 +1,24 @@
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { --ink: #18201f; --muted: #72807c; --line: #dfe7e2; --paper: #f5f7f4; --white: #fff; --mint: #b9e9cf; --mint-deep: #75c99e; --orange: #f2a65a; --navy: #1b3131; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px 'DM Sans', sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { display: grid; grid-template-columns: 238px 1fr; min-height: 100vh; }
.sidebar { background: var(--navy); color: #e5f1eb; display: flex; flex-direction: column; padding: 30px 20px 22px; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 12px; line-height: 1.25; letter-spacing: .04em; color: #b9cfc5; }
.brand strong { color: white; font: 600 17px 'Space Grotesk', sans-serif; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; background: var(--mint); color: var(--navy); font: 700 20px 'Space Grotesk', sans-serif; }
nav { display: grid; gap: 8px; margin-top: 76px; }
.nav-item { border: 0; border-left: 2px solid transparent; background: transparent; color: #a9c0b6; display: flex; justify-content: space-between; padding: 12px 12px; text-align: left; }
.nav-item small { color: #6d8c7e; }.nav-item.active, .nav-item:hover { background: #294542; border-left-color: var(--mint); color: white; }
.sidebar-footer { margin-top: auto; border-top: 1px solid #34504a; padding: 18px 4px 0; color: #a9c0b6; font-size: 12px; display: grid; grid-template-columns: 10px 1fr; gap: 4px 7px; }.sidebar-footer small { grid-column: 2; color: #6d8c7e; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-deep); margin-top: 4px; }
.main-content { max-width: 1450px; width: 100%; padding: 48px 5.5%; margin: auto; }.topbar, .section-heading, .panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }.eyebrow { color: #84918d; font-size: 11px; font-weight: 700; letter-spacing: .12em; margin: 0 0 7px; text-transform: uppercase; }.topbar h1, h2 { font: 600 32px 'Space Grotesk', sans-serif; letter-spacing: -.055em; margin: 0; }.section-heading h2, .panel-heading h2 { font-size: 23px; }.subheading { color: var(--muted); margin: 8px 0 0; }
.primary-button { background: var(--ink); border: 0; color: white; padding: 12px 17px; font-weight: 700; }.primary-button:hover { background: #30423f; }.text-button { background: transparent; border: 0; color: #71847b; padding: 5px 0; }.text-button.light { color: #bad9cc; }.notice { min-height: 20px; color: #b15b27; padding-top: 20px; }.notice:empty { padding-top: 0; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 42px 0 38px; }.metric-card { background: var(--white); border: 1px solid var(--line); min-height: 155px; padding: 20px; display: flex; flex-direction: column; }.metric-card.accent { background: var(--mint); border-color: var(--mint); }.metric-label { color: #6c7b75; font-size: 12px; font-weight: 700; }.metric-card strong { font: 600 44px 'Space Grotesk', sans-serif; letter-spacing: -.08em; margin: 18px 0 10px; }.metric-note { color: #85918d; font-size: 12px; }.content-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; }.panel { background: var(--white); border: 1px solid var(--line); padding: 25px; }.dark-panel { background: var(--navy); border-color: var(--navy); color: white; }.panel-heading { align-items: flex-start; }.list-container { margin-top: 22px; }.list-row { border-top: 1px solid var(--line); display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; padding: 15px 0; align-items: center; }.dark-panel .list-row { border-color: #34504a; }.time { color: #71847b; font-weight: 700; font-size: 12px; }.dark-panel .time { color: var(--mint); }.item-title { font-weight: 700; }.item-meta { color: var(--muted); font-size: 12px; margin-top: 4px; }.dark-panel .item-meta { color: #9bb3aa; }.status { display: inline-block; background: #edf2ee; color: #60706a; font-size: 11px; font-weight: 700; padding: 5px 8px; text-transform: capitalize; white-space: nowrap; }.status.ready, .status.confirmed { background: #dff5e8; color: #27784a; }.status.in_progress { background: #fff0dc; color: #a36218; }.empty-state { color: var(--muted); padding: 30px 0; text-align: center; }.view { display: none; }.active-view { display: block; }.section-heading { align-items: flex-start; margin: 25px 0 32px; }.table-panel { padding: 0; }.table-wrap { overflow-x: auto; }table { border-collapse: collapse; width: 100%; }th, td { border-bottom: 1px solid var(--line); padding: 17px 20px; text-align: left; white-space: nowrap; }th { color: #8a9691; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }td { color: #465550; }td strong { color: var(--ink); display: block; }.dialog-heading { display: flex; justify-content: space-between; margin-bottom: 25px; }.close-button { background: transparent; border: 0; font-size: 28px; line-height: 1; color: var(--muted); }.dialog-heading h2 { font-size: 24px; }dialog { border: 0; padding: 0; width: min(420px, calc(100% - 32px)); box-shadow: 0 18px 60px #13272533; }dialog::backdrop { background: #122b2a99; }.dialog-heading, dialog form { padding: 26px; }dialog form { display: grid; gap: 15px; }dialog form .dialog-heading { margin: -26px -26px 0; }label { color: #64726d; font-size: 12px; font-weight: 700; display: grid; gap: 7px; }input { border: 1px solid var(--line); padding: 11px; color: var(--ink); outline-color: var(--mint-deep); }
@media (max-width: 900px) { .app-shell { grid-template-columns: 1fr; }.sidebar { padding: 18px; }.sidebar nav { display: flex; margin-top: 24px; overflow-x: auto; }.nav-item { flex: 1; min-width: 145px; }.sidebar-footer { display: none; }.main-content { padding: 30px 20px; }.metric-grid { grid-template-columns: repeat(2, 1fr); margin-top: 30px; }.content-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .topbar { align-items: flex-start; flex-direction: column; }.topbar h1 { font-size: 27px; }.metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.metric-card { min-height: 135px; padding: 15px; }.metric-card strong { font-size: 34px; }.panel { padding: 18px; }.list-row { grid-template-columns: 58px 1fr; }.list-row .status { grid-column: 2; justify-self: start; }.section-heading { flex-direction: column; } }
.permission { color: #a15b4e; font-size: 12px; font-weight: 700; }.permission.allowed { color: #27784a; }.delete-button { background: transparent; border: 1px solid #e5c9c4; color: #a15b4e; padding: 7px 10px; }.delete-button:hover { background: #fff1ee; }select { border: 1px solid var(--line); padding: 10px; background: white; color: var(--ink); }fieldset { border: 1px solid var(--line); display: grid; gap: 10px; padding: 12px; }legend { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }.check-label { display: flex; align-items: center; gap: 8px; }.check-label input { accent-color: var(--navy); }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; }.secondary-button { background: transparent; border: 1px solid var(--line); color: var(--ink); padding: 12px 17px; font-weight: 700; }.secondary-button:hover { background: var(--paper); }
.edit-button { background: transparent; border: 1px solid var(--line); color: var(--ink); padding: 7px 10px; }.edit-button:hover { background: var(--paper); }