admin: restore form styling

The invoice form's text inputs, textareas and label layout depended on
.contact-form rules that were deleted with the contact form, so they
fell back to white browser defaults with labels running inline. Give
every admin form (.invoice-form) one style: labels above fields, gray
inputs on the surface token, a focus state, single column on phones,
and the submit button styled like the rest.

Assisted-by: Claude:opus-5

public/style.css

@@ -498,7 +498,20 @@ fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
     color: var(--text-strong);
     border-color: var(--text-ghost);
 }
-.invoice-form select {
+.invoice-form .field {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+    margin-bottom: 16px;
+}
+.invoice-form label {
+    color: var(--text-dim);
+    font-size: 0.85rem;
+}
+.invoice-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
+.invoice-form select,
+.invoice-form textarea {
     width: 100%;
     box-sizing: border-box;
     background: var(--surface);
@@ -508,18 +521,55 @@ fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
     padding: 8px 10px;
     font-family: inherit;
     font-size: 0.95rem;
+    color-scheme: dark;
 }
-.invoice-form input[type="date"] {
+.invoice-form input[type="date"],
-    width: 100%;
+.invoice-form input[inputmode="decimal"] {
-    box-sizing: border-box;
-    background: var(--surface);
-    color: var(--text-strong);
-    border: 1px solid var(--border);
-    border-radius: 3px;
-    padding: 8px 10px;
     font-family: var(--font-mono);
     font-size: 0.92rem;
-    color-scheme: dark;
+}
+.invoice-form textarea {
+    resize: vertical;
+    min-height: 72px;
+}
+.invoice-form input::placeholder,
+.invoice-form textarea::placeholder {
+    color: var(--text-ghost);
+}
+.invoice-form input:focus,
+.invoice-form select:focus,
+.invoice-form textarea:focus {
+    outline: none;
+    border-color: var(--text-ghost);
+    background: var(--surface-alt);
+}
+.invoice-form input[type="file"] {
+    padding: 6px;
+    color: var(--text-dim);
+}
+.invoice-form label:has(> input[type="checkbox"]) {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    color: var(--text-strong);
+}
+.invoice-form .field .link-button {
+    align-self: flex-start;
+    margin: 2px 0 0;
+}
+.invoice-form h2 {
+    margin-top: 32px;
+}
+.invoice-form fieldset[disabled] input,
+.invoice-form fieldset[disabled] select,
+.invoice-form fieldset[disabled] textarea {
+    opacity: 0.7;
+}
+.invoice-form > .download-button,
+.invoice-form fieldset > .download-button {
+    margin-top: 8px;
+    cursor: pointer;
+    font-family: inherit;
 }
 .download-button {
     display: inline-block;
@@ -538,6 +588,9 @@ fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
 }
 
 @media (max-width: 560px) {
+    .invoice-grid {
+        grid-template-columns: 1fr;
+    }
     dl.kv {
         grid-template-columns: 1fr;
         gap: 2px 0;

views/admin/invoices/new.erb

@@ -12,7 +12,7 @@
 <% end %>
 
 <section class="section">
-    <form class="contact-form invoice-form" method="post" action="/admin/invoices" autocomplete="off">
+    <form class="invoice-form" method="post" action="/admin/invoices" autocomplete="off">
         <input type="hidden" name="authenticity_token" value="<%= csrf_token %>" />
 
         <h2>Client</h2>
@@ -117,7 +117,7 @@
         </div>
         <script type="application/json" id="crypto-defaults"><%== CryptoAsset.default_addresses.to_json %></script>
 
-        <button type="submit">Create invoice</button>
+        <button type="submit" class="download-button">Create invoice</button>
     </form>
 </section>