From 7736c19c02bfb5e0e6d9ca3c51d381ec9fb12798 Mon Sep 17 00:00:00 2001
From: fynks <75840152+fynks@users.noreply.github.com>
Date: Tue, 30 Sep 2025 17:51:53 +0500
Subject: [PATCH] Enhance status indicator styles and add table wrapper for
 improved accessibility

---
 dist/css/styles.css | 28 ++++++++++++++++------------
 dist/index.html     |  2 ++
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/dist/css/styles.css b/dist/css/styles.css
index afad7cf..117a1c5 100644
--- a/dist/css/styles.css
+++ b/dist/css/styles.css
@@ -1803,8 +1803,8 @@ tr:hover {
   width: 1.9rem;
   height: 1.9rem;
   border-radius: var(--radius-full);
-  border: 1.5px solid var(--border-secondary);
-  background: var(--bg-primary);
+  border: 1.5px solid color-mix(in srgb, var(--border-secondary) 70%, transparent);
+  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
   color: var(--text-secondary);
   font-weight: var(--font-semibold);
   letter-spacing: .02em;
@@ -1818,25 +1818,29 @@ tr:hover {
 }
 
 .status-indicator[data-supported="true"] {
-  background: rgba(16, 185, 129, .18);
-  border-color: rgba(16, 185, 129, .45);
-  color: var(--success);
+  background: linear-gradient(145deg, rgba(16, 185, 129, .16), rgba(16, 185, 129, .08));
+  border-color: rgba(16, 185, 129, .55);
+  color: color-mix(in srgb, var(--success) 92%, #fff 8%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
 }
 
 [data-theme="dark"] .status-indicator[data-supported="true"] {
-  background: rgba(16, 185, 129, .25);
-  border-color: rgba(16, 185, 129, .55);
+  background: linear-gradient(145deg, rgba(16, 185, 129, .32), rgba(16, 185, 129, .18));
+  border-color: rgba(16, 185, 129, .7);
+  box-shadow: inset 0 1px 0 rgba(16, 185, 129, .25);
 }
 
 .status-indicator[data-supported="false"] {
-  background: rgba(239, 68, 68, .12);
-  border-color: rgba(239, 68, 68, .3);
-  color: var(--error);
+  background: linear-gradient(145deg, rgba(239, 68, 68, .14), rgba(239, 68, 68, .06));
+  border-color: rgba(239, 68, 68, .45);
+  color: color-mix(in srgb, var(--error) 90%, #fff 10%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
 }
 
 [data-theme="dark"] .status-indicator[data-supported="false"] {
-  background: rgba(239, 68, 68, .18);
-  border-color: rgba(239, 68, 68, .35);
+  background: linear-gradient(145deg, rgba(239, 68, 68, .28), rgba(239, 68, 68, .15));
+  border-color: rgba(239, 68, 68, .55);
+  box-shadow: inset 0 1px 0 rgba(239, 68, 68, .2);
 }
 
 .status-cell:hover .status-indicator,
diff --git a/dist/index.html b/dist/index.html
index 34bc872..bf053da 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -239,6 +239,7 @@
                         <div class="pricing-container">
                             <div id="pricing-table-container" class="data-table-container" role="region"
                                 aria-live="polite" aria-label="Pricing table">
+                                 <div class="table-wrapper" role="presentation"></div>
                                 <table class="data-table pricing-table" aria-label="Pricing comparison table">
                                     <thead>
                                         <tr>
@@ -345,6 +346,7 @@
                                     </tbody>
                                 </table>
                             </div>
+                            </div>
 
                             <div class="alert alert-info" role="alert">
                                 <svg class="alert-icon" role="img" aria-hidden="true">