[WORK IN PROGRESS] Basic Admin UI Enhancements with toggle fixes

admin/css/wp-allstars-admin.css

@@ -109,25 +109,50 @@
     }
 }
 
-/* Base Toggle Switch Component */
+/* Setting notification */
+.wp-setting-notification {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 10px;
+    background: #00a32a;
+    color: white;
+    padding: 3px 10px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+    animation: fadeIn 0.3s ease-in-out;
+    height: 20px;
+    box-sizing: border-box;
+    position: relative;
+    transform: translateY(-3px);
+    white-space: nowrap;
+    min-width: 60px;
+    justify-content: center;
+}
+
+.wp-setting-notification.error {
+    background: #d63638;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+/* Toggle Switch */
 .wp-toggle-switch {
     position: relative;
     display: inline-block;
-    width: 36px;
+    width: 40px;
     height: 20px;
-    flex-shrink: 0;
-    cursor: pointer;
-    pointer-events: all;
-    z-index: 2;
+    vertical-align: middle;
+    margin-right: 8px;
 }
 
 .wp-toggle-switch input {
     opacity: 0;
     width: 0;
     height: 0;
-    margin: 0;
-    padding: 0;
-    position: absolute;
 }
 
 .wp-toggle-slider {
@@ -139,7 +164,7 @@
     bottom: 0;
     background-color: #ccc;
     transition: .3s;
-    border-radius: 20px;
+    border-radius: 34px;
 }
 
 .wp-toggle-slider:before {
@@ -152,15 +177,55 @@
     background-color: white;
     transition: .3s;
     border-radius: 50%;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 input:checked + .wp-toggle-slider {
     background-color: #2271b1;
 }
 
+input:focus + .wp-toggle-slider {
+    box-shadow: 0 0 1px #2271b1;
+}
+
 input:checked + .wp-toggle-slider:before {
-    transform: translateX(16px);
+    transform: translateX(20px);
+}
+
+/* Settings layout */
+.wp-setting-row {
+    background: #fff;
+    border: 1px solid #e5e5e5;
+    box-shadow: 0 1px 1px rgba(0,0,0,.04);
+    padding: 20px;
+    margin-bottom: 20px;
+    border-radius: 3px;
+}
+
+.wp-setting-header {
+    position: relative;
+}
+
+.wp-setting-main {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.wp-setting-left {
+    display: flex;
+    align-items: center;
+}
+
+.wp-setting-label {
+    font-weight: 600;
+    margin: 0;
+    font-size: 14px;
+}
+
+.wp-setting-description {
+    margin: 10px 0 0;
+    color: #666;
+    font-size: 13px;
 }
 
 /* Tab Content Area - GLOBAL SETTINGS - All tab spacing should inherit from here */
@@ -717,28 +782,6 @@ input:checked + .wp-toggle-slider:before {
     }
 }
 
-/* Settings Notification */
-.wp-setting-notification {
-    display: inline-flex;
-    align-items: center;
-    margin-left: 10px;
-    background: #00a32a;
-    color: white;
-    padding: 3px 10px;
-    border-radius: 12px;
-    font-size: 12px;
-    font-weight: 500;
-    animation: fadeIn 0.3s ease-in-out;
-    height: 20px;
-    box-sizing: border-box;
-    position: relative;
-    transform: translateY(-3px);
-}
-
-.wp-setting-notification.error {
-    background: #d63638;
-}
-
 /* Add space for notification to prevent layout shifts */
 .wp-setting-left label,
 .wp-allstars-toggle-left label,
@@ -758,11 +801,6 @@ input:checked + .wp-toggle-slider:before {
     line-height: 1.4;
 }
 
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
 .wpa-loading-overlay {
     position: absolute;
     top: 0;