From ceeee2a46a4aebe16ba6dabacdfe9f3403718c0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gon=C3=A7alo=20Rodrigues?=
 <95761178+GoncaloRodri@users.noreply.github.com>
Date: Sun, 14 Jun 2026 16:03:45 +0100
Subject: [PATCH] style: add .form-input/.form-label CSS classes for dark-theme
 form fields (#22)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Org templates use class="form-input" and class="form-label" which had no
CSS definition — browsers fell back to white-box defaults, clashing with
the dark teal theme.

- .form-input: dark bg (--bg2), teal border, accent focus ring + glow,
  placeholder dimming, file input button styling
- .form-label: uppercase micro-label style (11px, --text3) matching the
  existing card section headers throughout the app
- textarea.form-input: resize:vertical, min-height, line-height
- select option / .form-input option: dark background on dropdown items
- Keep .form-group label unchanged so existing non-org templates are unaffected

Co-authored-by: Gonçalo Rodrigues <guga@Goncalos-MacBook-Pro.local>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../services/api/main/templates/base.html     | 43 +++++++++++++++++--
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/apps/finance/services/api/main/templates/base.html b/apps/finance/services/api/main/templates/base.html
index 5931399..85d0eff 100644
--- a/apps/finance/services/api/main/templates/base.html
+++ b/apps/finance/services/api/main/templates/base.html
@@ -345,9 +345,19 @@
       margin-bottom: 5px;
       letter-spacing: 0.3px;
     }
+    .form-label {
+      display: block;
+      font-size: 11px;
+      font-weight: 700;
+      color: var(--text3);
+      margin-bottom: 5px;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+    }
     .form-group input,
     .form-group select,
-    .form-group textarea {
+    .form-group textarea,
+    .form-input {
       width: 100%;
       padding: 9px 12px;
       border: 1px solid var(--border2);
@@ -355,16 +365,41 @@
       font-size: 13.5px;
       background: var(--bg2);
       color: var(--text);
-      transition: border-color 0.18s ease, box-shadow 0.18s ease;
+      transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
       outline: none;
+      box-sizing: border-box;
+      font-family: inherit;
     }
     .form-group input:focus,
-    .form-group select:focus {
+    .form-group select:focus,
+    .form-group textarea:focus,
+    .form-input:focus {
       border-color: var(--accent);
       box-shadow: 0 0 0 3px var(--accent-glow);
+      background: var(--bg3);
+    }
+    .form-group input::placeholder,
+    .form-input::placeholder { color: var(--text3); opacity: 0.7; }
+    .form-input[type="file"] {
+      padding: 7px 10px;
+      cursor: pointer;
+      color: var(--text2);
+    }
+    .form-input[type="file"]::-webkit-file-upload-button {
+      background: var(--bg3);
+      border: 1px solid var(--border2);
+      border-radius: 4px;
+      color: var(--text2);
+      font-size: 12px;
+      padding: 4px 10px;
+      margin-right: 10px;
+      cursor: pointer;
+      font-family: inherit;
     }
     input[type="color"] { padding: 4px; height: 38px; cursor: pointer; }
-    select option { background: var(--bg2); color: var(--text); }
+    select option,
+    .form-input option { background: var(--bg2); color: var(--text); }
+    textarea.form-input { resize: vertical; min-height: 72px; line-height: 1.5; }
 
     /* ── Badges ──────────────────────────────────────────────────────── */
     .badge {