v1.0.3: Fix expression textbox error state and UI consistency

- Fixed theme class application from html to body element for proper CSS inheritance
- Removed CSS conflicts between base styles and error/success states
- Fixed focus state interference with error/success background colors
- Changed error message panel to fixed placement (no more UI jumping)
- Added theme-consistent styling for alert-success in all theme modes
- Expression textbox now properly shows red/green backgrounds in manual themes
- Status message now shows Expression is correct vs error message consistently

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jmespath-playground",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A React-based web application for testing JMESPath expressions against JSON data",
   "main": "index.js",
   "scripts": {

src/App.css

@@ -183,9 +183,9 @@ footer a:hover {
 }
 
 .theme-light .jmespath-input {
-  background-color: #ffffff !important;
+  background-color: #ffffff;
-  border: 1px solid #ced4da !important;
+  border: 1px solid #ced4da;
-  color: #495057 !important;
+  color: #495057;
 }
 
 .theme-light .json-input, 
@@ -195,15 +195,26 @@ footer a:hover {
   color: #495057 !important;
 }
 
+/* Success and Error state overrides - must come after base input rules */
+.theme-light .jmespath-input.success {
+  background-color: #d4edda !important;
+  border-color: #c3e6cb !important;
+  color: #155724 !important;
+}
+
+.theme-light .jmespath-input.error {
+  background-color: #f8d7da !important;
+  border-color: #f5c6cb !important;
+  color: #721c24 !important;
+}
+
 .theme-light .text-muted {
   color: #6c757d !important;
 }
 
 .theme-light .jmespath-input:focus {
-  background-color: var(--bg-primary-light) !important;
+  border-color: var(--accent-color);
-  border-color: var(--accent-color) !important;
+  box-shadow: 0 0 0 0.2rem var(--accent-shadow);
-  color: var(--text-secondary-light) !important;
-  box-shadow: 0 0 0 0.2rem var(--accent-shadow) !important;
 }
 
 .theme-light .jmespath-input::placeholder {
@@ -233,6 +244,12 @@ footer a:hover {
   color: #721c24 !important;
 }
 
+.theme-light .alert-success {
+  background-color: #d4edda !important;
+  border-color: #c3e6cb !important;
+  color: #155724 !important;
+}
+
 .theme-light .btn-primary {
   background-color: var(--btn-primary) !important;
   border-color: var(--btn-primary) !important;
@@ -332,9 +349,22 @@ footer a:hover {
 }
 
 .theme-dark .jmespath-input {
-  background-color: var(--bg-card-dark) !important;
+  background-color: var(--bg-card-dark);
-  border: 1px solid #505050 !important;
+  border: 1px solid #505050;
-  color: var(--text-primary-dark) !important;
+  color: var(--text-primary-dark);
+}
+
+/* Success and Error state overrides - must come after base input rules */
+.theme-dark .jmespath-input.success {
+  background-color: #1e4a1e !important;
+  border-color: #2c6d2c !important;
+  color: #d4edda !important;
+}
+
+.theme-dark .jmespath-input.error {
+  background-color: #4a1e1e !important;
+  border-color: #6d2c2c !important;
+  color: #f8d7da !important;
 }
 
 .theme-dark .jmespath-input::placeholder {
@@ -342,9 +372,7 @@ footer a:hover {
 }
 
 .theme-dark .jmespath-input:focus {
-  background-color: #404040 !important;
+  border-color: var(--accent-color);
-  border-color: var(--accent-color) !important;
-  color: var(--text-primary-dark) !important;
 }
 
 .theme-dark .json-input, 
@@ -376,6 +404,12 @@ footer a:hover {
   color: #f8d7da !important;
 }
 
+.theme-dark .alert-success {
+  background-color: #1e4a1e !important;
+  border-color: #2c6d2c !important;
+  color: #d4edda !important;
+}
+
 .theme-dark .text-muted {
   color: var(--text-muted-dark) !important;
 }

src/App.js

@@ -33,12 +33,16 @@ function App() {
     // Apply theme to document
     const applyTheme = (selectedTheme) => {
       const root = document.documentElement;
-      root.className = ''; // Clear existing theme classes
+      const body = document.body;
+      
+      // Clear existing theme classes from both html and body
+      root.className = '';
+      body.classList.remove('theme-light', 'theme-dark');
       
       if (selectedTheme === 'light') {
-        root.classList.add('theme-light');
+        body.classList.add('theme-light');
       } else if (selectedTheme === 'dark') {
-        root.classList.add('theme-dark');
+        body.classList.add('theme-dark');
       }
       // 'auto' uses CSS media queries (no class needed)
     };
@@ -310,16 +314,14 @@ function App() {
               <div className="card-body">
                 <input
                   type="text"
-                  className={`form-control jmespath-input ${error ? 'error' : ''}`}
+                  className={`form-control jmespath-input ${error ? 'error' : 'success'}`}
                   value={jmespathExpression}
                   onChange={handleJmespathChange}
                   placeholder="Enter JMESPath expression (e.g., people[*].name)"
                 />
-                {error && (
+                <div className={`alert mt-2 mb-0 ${error ? 'alert-danger' : 'alert-success'}`}>
-                  <div className="alert alert-danger mt-2 mb-0">
+                  <small>{error || 'Expression is correct'}</small>
-                    <small>{error}</small>
                 </div>
-                )}
               </div>
             </div>
           </div>

src/index.css

@@ -96,13 +96,13 @@ code {
 
 /* Additional specificity for jmespath-input with error class */
 .theme-dark .jmespath-input.error {
-  background-color: var(--error-bg-dark) !important;
+  background-color: #4a1e1e !important;
-  border-color: var(--error-border-dark) !important;
+  border-color: #6d2c2c !important;
-  color: var(--error-text-dark) !important;
+  color: #f8d7da !important;
 }
 
 .theme-light .jmespath-input.error {
-  background-color: var(--error-bg-light) !important;
+  background-color: #f8d7da !important;
-  border-color: var(--error-border-light) !important;
+  border-color: #f5c6cb !important;
-  color: var(--error-text-light) !important;
+  color: #721c24 !important;
 }