From 4763199f1688559aea2c71405ee05672e4dbddee Mon Sep 17 00:00:00 2001
From: Andrew Beal <andrew.business@tuta.com>
Date: Sun, 31 May 2026 14:57:03 +0100
Subject: [PATCH] refactor: replace !important with doubled class selectors for
 specificity

Remove !important flags from API key validation and transparent button styles by using doubled class selectors (.class.class) to increase CSS specificity. Add explanatory comments documenting the specificity approach for future maintainability.
---
 Styles/custom_styles.css | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/Styles/custom_styles.css b/Styles/custom_styles.css
index 1c02a11..ce34315 100644
--- a/Styles/custom_styles.css
+++ b/Styles/custom_styles.css
@@ -87,16 +87,18 @@ body:not(.is-tablet) .workspace-drawer.mod-right {
 /* Settings Styles */
 /* ============================== */
 
-.api-key-setting-ok input[type="text"],
-.api-key-setting-ok input[type="password"],
-.api-key-setting-ok textarea {
-  border-color: var(--color-green) !important;
+/* Class is doubled to raise specificity above Obsidian's input border
+   styles without referencing their selectors (future-proof) or !important. */
+.api-key-setting-ok.api-key-setting-ok input[type="text"],
+.api-key-setting-ok.api-key-setting-ok input[type="password"],
+.api-key-setting-ok.api-key-setting-ok textarea {
+  border-color: var(--color-green);
 }
 
-.api-key-setting-error input[type="text"],
-.api-key-setting-error input[type="password"],
-.api-key-setting-error textarea {
-  border-color: var(--color-red) !important;
+.api-key-setting-error.api-key-setting-error input[type="text"],
+.api-key-setting-error.api-key-setting-error input[type="password"],
+.api-key-setting-error.api-key-setting-error textarea {
+  border-color: var(--color-red);
 }
 
 .api-key-setting-error .setting-item-control {
@@ -133,11 +135,17 @@ body:not(.is-tablet) .workspace-drawer.mod-right {
 /* CSS Variables for Common Components */
 /* ============================== */
 
-.transparent-button {
-  border: none !important;
-  outline: none !important;
-  box-shadow: none !important;
-  background-color: transparent !important;
+/* Doubled class + explicit interactive states beat Obsidian's
+   button / button:hover / button:focus styles (specificity 0-1-1)
+   without referencing their selectors or using !important. */
+.transparent-button.transparent-button,
+.transparent-button.transparent-button:hover,
+.transparent-button.transparent-button:focus,
+.transparent-button.transparent-button:active {
+  border: none;
+  outline: none;
+  box-shadow: none;
+  background-color: transparent;
 }
 
 .search-trigger {