From f6e80333980112106a82e65d959dd3e7b5c88ec6 Mon Sep 17 00:00:00 2001
From: marijo <marijo@novosel.dk>
Date: Tue, 9 Jun 2026 12:40:25 +0000
Subject: [PATCH] Style update

---
 style.css | 78 +++++++++++++++++++++++++++----------------------------
 1 file changed, 38 insertions(+), 40 deletions(-)

diff --git a/style.css b/style.css
index b625bfe..ff7165b 100644
--- a/style.css
+++ b/style.css
@@ -1,16 +1,17 @@
 :root {
-  --bg: #18120F;
-  --panel: #241A16;
-  --ink: #F5EADC;
-  --muted: #B9A89A;
-  --brand: #C9874A;
-  --brand-dark: #E0A15F;
-  --accent: #A38A63;
-  --good: #A38A63;
-  --warn: #C9874A;
-  --bad: #D96B5F;
-  --line: rgba(163,138,99,.32);
-  --shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
+  --bg: #0b0b0b;
+  --panel: #1b1b1b;
+  --field: #101010;
+  --ink: #f2f2f2;
+  --muted: #aaa;
+  --brand: #2f8f3a;
+  --brand-dark: #3baa48;
+  --accent: #2d6cdf;
+  --good: #2f8f3a;
+  --warn: #d9822b;
+  --bad: #d65b4f;
+  --line: #333;
+  --shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
   --radius: 14px;
 }
 
@@ -19,7 +20,7 @@
 body {
   margin: 0;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  background: radial-gradient(circle at top left, rgba(163,138,99,.16), transparent 32rem), radial-gradient(circle at top right, rgba(201,135,74,.14), transparent 30rem), var(--bg);
+  background: linear-gradient(rgba(11,11,11,.82), rgba(11,11,11,.92)), var(--bg);
   color: var(--ink);
 }
 
@@ -28,8 +29,8 @@ body {
   top: 0;
   z-index: 50;
   padding: .35rem clamp(.45rem, 2vw, 1.25rem);
-  background: linear-gradient(180deg, rgba(72,55,43,.82), rgba(58,43,34,.68));
-  border-bottom: 1px solid rgba(163,138,99,.32);
+  background: linear-gradient(180deg, rgba(58,58,58,.62), rgba(34,34,34,.48));
+  border-bottom: 1px solid var(--line);
   box-shadow: 0 2px 16px #0008;
   backdrop-filter: blur(12px);
 }
@@ -74,9 +75,9 @@ h2 { margin-bottom: 0; font-size: 1.1rem; }
 .header-entries {
   margin: .25rem 0 .25rem;
   padding: .25rem .35rem;
-  border: 1px solid rgba(163,138,99,.26);
+  border: 1px solid var(--line);
   border-radius: 10px;
-  background: rgba(24,18,15,.72);
+  background: rgba(16,16,16,.84);
 }
 .header-entries.is-collapsed tbody { display: none; }
 .header-entries thead { cursor: pointer; user-select: none; }
@@ -94,14 +95,14 @@ h2 { margin-bottom: 0; font-size: 1.1rem; }
   min-height: 1.45rem;
   padding: .22rem .45rem;
   border-radius: 999px;
-  background: rgba(201,135,74,.18);
-  color: var(--brand-dark);
-  border: 1px solid rgba(201,135,74,.50);
+  background: rgba(217,130,43,.18);
+  color: var(--warn);
+  border: 1px solid rgba(217,130,43,.55);
   font-size: .72rem;
   font-weight: 800;
   line-height: 1;
 }
-.header-warning.bad { background: rgba(126,59,50,.36); color: #F1B5A9; border-color: rgba(217,107,95,.55); }
+.header-warning.bad { background: rgba(214,91,79,.22); color: #f0aaa3; border-color: rgba(214,91,79,.55); }
 .header-action-button {
   appearance: none;
   display: inline-flex;
@@ -110,7 +111,7 @@ h2 { margin-bottom: 0; font-size: 1.1rem; }
   min-height: 1.45rem;
   padding: .22rem .45rem;
   border-radius: 999px;
-  background: #18120F;
+  background: var(--field);
   color: var(--ink);
   border: 1px solid var(--accent);
   font-size: .72rem;
@@ -118,10 +119,10 @@ h2 { margin-bottom: 0; font-size: 1.1rem; }
   cursor: pointer;
   line-height: 1;
 }
-.header-action-button:hover { background: var(--accent); color: #18120F; border-color: var(--accent); transform: none; }
+.header-action-button:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); transform: none; }
 .planner-column-header {
   margin-top: .15rem;
-  border-top: 1px solid rgba(163,138,99,.24);
+  border-top: 1px solid var(--line);
   padding-top: .1rem;
 }
 .planner-header-table th {
@@ -150,8 +151,8 @@ main {
 }
 
 .card, .panel {
-  background: rgba(36,26,22,.92);
-  border: 1px solid rgba(163,138,99,.32);
+  background: rgba(27,27,27,.88);
+  border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
 }
@@ -210,10 +211,10 @@ input, select, textarea {
   padding: .7rem .8rem;
   font: inherit;
   color: var(--ink);
-  background: #18120F;
+  background: var(--field);
 }
 textarea { resize: vertical; }
-input:focus, select:focus, textarea:focus { outline: 3px solid rgba(201,135,74,.22); border-color: var(--brand); }
+input:focus, select:focus, textarea:focus { outline: 3px solid rgba(217,130,43,.22); border-color: var(--brand); }
 
 .checkbox-row {
   display: flex;
@@ -238,13 +239,13 @@ button {
 }
 button:hover { background: var(--brand-dark); transform: translateY(-1px); }
 button.ghost {
-  background: #18120F;
+  background: var(--field);
   color: var(--ink);
   border: 1px solid var(--accent);
 }
-button.ghost:hover { background: var(--accent); color: #18120F; }
+button.ghost:hover { background: var(--accent); color: var(--ink); }
 button.small { padding: .36rem .55rem; font-size: .78rem; }
-button.danger { background: #7E3B32; color: var(--ink); border: 1px solid #7E3B32; }
+button.danger { background: #5a2320; color: var(--ink); border: 1px solid #5a2320; }
 .actions { display: flex; justify-content: flex-end; gap: .6rem; }
 .help-text { color: var(--muted); margin: 0; font-size: .9rem; }
 .hidden { display: none !important; }
@@ -302,14 +303,14 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
   align-items: center;
   padding: .2rem .55rem;
   border-radius: 999px;
-  background: #26383A;
+  background: #333;
   color: var(--ink);
   font-size: .78rem;
   font-weight: 800;
 }
-.pill.approved, .pill.confirmed { background: #1f3b32; color: var(--ink); }
-.pill.unpaid { background: rgba(201,135,74,.22); color: var(--brand-dark); }
-.important-col { background: rgba(163,138,99,.13); font-size: 1rem; }
+.pill.approved, .pill.confirmed { background: #17351a; color: var(--ink); }
+.pill.unpaid { background: rgba(217,130,43,.22); color: var(--brand-dark); }
+.important-col { background: rgba(47,143,58,.14); font-size: 1rem; }
 .balance-override-input {
   width: 5.2rem;
   padding: .28rem .35rem;
@@ -325,7 +326,7 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
 .warnings { display: grid; gap: .55rem; }
 .warning {
   border-left: 4px solid var(--warn);
-  background: rgba(201,135,74,.16);
+  background: rgba(217,130,43,.16);
   padding: .65rem .75rem;
   border-radius: 12px;
 }
@@ -397,7 +398,7 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
     gap: .12rem .32rem;
     align-items: center;
     padding: .18rem 0;
-    border-bottom: 1px solid rgba(163,138,99,.22);
+    border-bottom: 1px solid rgba(51,51,51,.85);
   }
   .compact-entries-table tbody tr:last-child { border-bottom: 0; }
   .compact-entries-table td {
@@ -446,9 +447,6 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
   }
   .planner-body-table td:nth-child(1) {
     grid-column: 1 / 2;
-    font-weight: 900;
-    font-size: .78rem;
-    line-height: 1.1;
   }
   .planner-body-table td:nth-child(2) {
     grid-column: 2 / -1;