@howssatoshi/quantumcss 1.4.0 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@howssatoshi/quantumcss",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Advanced utility-first CSS framework with JIT generation and modern components",
   "main": "dist/quantum.min.css",
   "bin": {

package/src/defaults.js

@@ -62,6 +62,24 @@ const utilityMaps = {
   'overflow-visible': { property: 'overflow', value: 'visible' },
   'border-none': { property: 'border-width', value: '0' },
   'bg-transparent': { property: 'background-color', value: 'transparent' },
+  'relative': { property: 'position', value: 'relative' },
+  'absolute': { property: 'position', value: 'absolute' },
+  'top-1/2': { property: 'top', value: '50%' },
+  'left-4': { property: 'left', value: '1rem' },
+  'pl-12': { property: 'padding-left', value: '3rem' },
+  '-translate-y-1/2': { property: 'transform', value: 'translateY(-50%)' },
+  'pointer-events-none': { property: 'pointer-events', value: 'none' },
+  'w-5': { property: 'width', value: '1.25rem' },
+  'h-5': { property: 'height', value: '1.25rem' },
+  'z-10': { property: 'z-index', value: '10' },
+  'form-row': {
+    property: ['display', 'justify-content', 'align-items', 'gap'],
+    value: ['flex', 'space-between', 'center', '1rem']
+  },
+  'dialog-close': {
+    property: ['position', 'top', 'right', 'width', 'height', 'border-radius', 'display', 'align-items', 'justify-content', 'cursor'],
+    value: ['absolute', '1.5rem', '1.5rem', '2rem', '2rem', '50%', 'flex', 'center', 'center', 'pointer']
+  },
   'glass': {
     property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-width', 'border-color'], 
     value: ['rgba(255, 255, 255, 0.03)', 'blur(16px)', 'blur(16px)', '1px', 'rgba(255, 255, 255, 0.1)'] 
@@ -74,11 +92,11 @@ const utilityMaps = {
   },
   'btn-starlight': {
     property: ['background', 'color', 'border', 'box-shadow', 'font-weight', 'transition', 'height', 'padding', 'display', 'align-items', 'justify-content', 'border-radius', 'cursor'],
-    value: ['linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%)', '#000', 'none', '0 0 20px rgba(0, 212, 255, 0.3)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.75rem', 'pointer']
+    value: ['linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%)', '#000', 'none', '0 0 20px rgba(0, 212, 255, 0.3)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.5rem', 'pointer']
   },
   'btn-secondary': {
     property: ['background', 'color', 'border', 'font-weight', 'transition', 'height', 'padding', 'display', 'align-items', 'justify-content', 'border-radius', 'cursor', 'backdrop-filter', '-webkit-backdrop-filter'],
-    value: ['rgba(255, 255, 255, 0.05)', '#ffffff', '1px solid rgba(255, 255, 255, 0.15)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.75rem', 'pointer', 'blur(12px)', 'blur(12px)']
+    value: ['rgba(255, 255, 255, 0.05)', '#ffffff', '1px solid rgba(255, 255, 255, 0.15)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.5rem', 'pointer', 'blur(12px)', 'blur(12px)']
   },
   'input-starlight': {
     property: ['background-color', 'border', 'color', 'border-radius', 'padding', 'appearance', 'transition', 'height'],
@@ -88,10 +106,23 @@ const utilityMaps = {
     property: ['background-color', 'border', 'color', 'border-radius', 'padding', 'appearance', 'transition', 'min-height', 'width', 'display'],
     value: ['rgba(255, 255, 255, 0.04)', '1px solid rgba(255, 255, 255, 0.15)', 'inherit', '0.75rem', '1rem', 'none', 'all 0.2s ease', '8rem', '100%', 'block']
   },
-  'checkbox-starlight': {
-    property: ['appearance', 'width', 'height', 'background', 'border', 'border-radius', 'cursor', 'transition', 'position', 'display', 'align-items', 'justify-content'],
-    value: ['none', '1.25rem', '1.25rem', 'rgba(255, 255, 255, 0.05)', '1px solid rgba(255, 255, 255, 0.2)', '0.375rem', 'pointer', 'all 0.2s ease', 'relative', 'inline-flex', 'center', 'center']
-  }
-};
-
-module.exports = { defaultTheme, utilityMaps };
+      'checkbox-starlight': {
+      property: ['appearance', 'width', 'height', 'background', 'border', 'border-radius', 'cursor', 'transition', 'position', 'display', 'align-items', 'justify-content'],
+      value: ['none', '1.25rem', '1.25rem', 'rgba(255, 255, 255, 0.05)', '1px solid rgba(255, 255, 255, 0.2)', '0.375rem', 'pointer', 'all 0.2s ease', 'relative', 'inline-flex', 'center', 'center']
+    },
+    'search-container': 'relative block w-full',
+    'search-input': 'pl-12 w-full',
+    'search-icon': 'absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none z-10 w-5 h-5',
+    'nav-glass': {
+      property: ['background', 'backdrop-filter', '-webkit-backdrop-filter', 'border-bottom', 'width', 'display', 'flex-direction', 'padding', 'position', 'top', 'z-index'],
+      value: ['rgba(255, 255, 255, 0.05)', 'blur(24px)', 'blur(24px)', '1px solid rgba(255, 255, 255, 0.1)', '100%', 'flex', 'column', '0', 'sticky', '0', '1000']
+    },
+    'starlight-nav': 'nav-glass w-full sticky top-0 z-[1000]',
+    'starlight-search': 'search-container w-full max-w-144',
+    'starlight-dashboard': 'dashboard-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8',
+    'starlight-gallery': 'starlight-gallery grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4',
+    'starlight-form': 'starlight-card grid grid-cols-1 md:grid-cols-2 gap-8',
+    'starlight-dialog': 'starlight-dialog ani-scale-in'
+  };
+  
+  module.exports = { defaultTheme, utilityMaps };

package/src/generator.js

@@ -77,7 +77,7 @@ function generateCSS(configPath) {
     gap: 'gap', 'gap-x': 'column-gap', 'gap-y': 'row-gap'
   };
 
-  function getRulesForClass(fullCls) {
+  function getRulesForClass(fullCls, processedPresets = new Set()) {
     let cls = fullCls, variant = null, breakpoint = null, isNeg = false;
     if (cls.startsWith('-')) { isNeg = true; cls = cls.substring(1); }
     const parts = cls.split(':');
@@ -86,22 +86,23 @@ function generateCSS(configPath) {
       const p = parts[currentPart];
       if (breakpoints[p]) { breakpoint = p; }
       else if (p === 'dark') { breakpoint = 'dark'; }
+      else if (p === 'light') { breakpoint = 'light'; }
       else if (['hover', 'focus', 'placeholder', 'group-hover'].includes(p)) { variant = p; }
       else { cls = parts.slice(currentPart).join(':'); break; }
       currentPart++;
     }
 
-    // Check Presets
-    if (config.componentPresets && config.componentPresets[cls]) {
-      const presetClasses = config.componentPresets[cls].split(/\s+/);
+    // Check Presets (User Config & Defaults)
+    const presetValue = (config.componentPresets && config.componentPresets[cls]) || (utilityMaps[cls] && typeof utilityMaps[cls] === 'string' ? utilityMaps[cls] : null);
+    
+    if (presetValue && !processedPresets.has(cls)) {
+      processedPresets.add(cls);
+      const presetClasses = presetValue.split(/\s+/);
       let allGroups = [];
       presetClasses.forEach(pCls => {
-        const subGroups = getRulesForClass(pCls);
+        const subGroups = getRulesForClass(pCls, new Set(processedPresets));
         if (subGroups) {
           subGroups.forEach(group => {
-            // Apply the preset's own breakpoint/variant to sub-groups if they don't have one?
-            // Actually, usually presets are used as base classes.
-            // If someone does md:btn-primary, we want the md: to apply to all rules in the preset.
             allGroups.push({
               breakpoint: breakpoint || group.breakpoint,
               variant: variant || group.variant,
@@ -114,9 +115,9 @@ function generateCSS(configPath) {
     }
 
     let property = null, value = null, customSelector = null;
-    if (utilityMaps[cls]) {
+    if (utilityMaps[cls] && typeof utilityMaps[cls] === 'object') {
       const entry = utilityMaps[cls];
-      if (typeof entry === 'object' && !Array.isArray(entry)) { property = entry.property; value = entry.value; }
+      if (!Array.isArray(entry)) { property = entry.property; value = entry.value; }
       else { property = entry; }
     }
 
@@ -135,7 +136,16 @@ function generateCSS(configPath) {
         if (theme.fontSize[valKey]) { property = ['font-size', 'line-height']; value = [theme.fontSize[valKey], (valKey.includes('xl') || parseInt(valKey) >= 3) ? '1.2' : '1.5']; }
         else { const color = resolveColor(valKey); if (color) { property = 'color'; value = color; } }
       } else if (prefix === 'bg') { const color = resolveColor(valKey); if (color) { property = 'background-color'; value = color; } }
-      else if (prefix === 'z') { property = 'z-index'; value = isNeg ? `-${valKey}` : valKey; }
+      else if (prefix === 'z') { 
+        if (valKey.startsWith('[') && valKey.endsWith(']')) value = valKey.slice(1, -1);
+        else value = isNeg ? `-${valKey}` : valKey;
+        property = 'z-index';
+      }
+      else if (prefix === 'top') {
+        property = 'top';
+        if (valKey.startsWith('[') && valKey.endsWith(']')) value = valKey.slice(1, -1);
+        else value = theme.spacing[valKey] || valKey;
+      }
       else if (prefix === 'aspect') {
         property = ['aspect-ratio', 'width', 'height'];
         let ratio = 'auto';
@@ -186,7 +196,11 @@ function generateCSS(configPath) {
         else if (v.includes('/')) v = `${(parseInt(v.split('/')[0])/parseInt(v.split('/')[1])*100).toFixed(2)}%`;
         else v = theme.spacing[v] || v;
         value = isNeg ? (Array.isArray(v) ? v.map(x => `-${x}`) : `-${v}`) : v;
-      } else if (prefix === 'border') {
+      } else if (prefix === 'shadow') {
+        if (theme.shadows[valKey]) { property = 'box-shadow'; value = theme.shadows[valKey]; }
+        else if (valKey === '') { property = 'box-shadow'; value = theme.shadows.md || '0 4px 6px -1px rgb(0 0 0 / 0.1)'; }
+      }
+      else if (prefix === 'border') {
         const color = resolveColor(valKey);
         if (color) { property = 'border-color'; value = color; }
         else if (['l', 'r', 't', 'b'].includes(cParts[1])) {
@@ -225,11 +239,19 @@ function generateCSS(configPath) {
       let selector = customSelector || `.${escapedFull}`;
       if (variant) { if (variant === 'group-hover') selector = `.group:hover ${selector}`; else selector += `:${variant}`}
       
-      const block = `${selector} {
+      if (breakpoint === 'light') {
+        const block = `body.light-mode ${selector} {
 ${rules.join('\n')}
 }
 `;
-      if (breakpoint) responsiveUtils[breakpoint].add(block); else utilities.add(block);
+        utilities.add(block);
+      } else {
+        const block = `${selector} {
+${rules.join('\n')}
+}
+`;
+        if (breakpoint) responsiveUtils[breakpoint].add(block); else utilities.add(block);
+      }
     });
   }
 

package/src/starlight.js

@@ -35,6 +35,137 @@ const Starlight = {
         container.appendChild(star);
       }
     });
+  },
+
+  /**
+   * Initializes navigation menu toggles for mobile view.
+   * Expects a toggle element with class '.hamburger' and a menu with class '.nav-menu-mobile'.
+   */
+  initNavigation() {
+    const toggles = document.querySelectorAll('.hamburger');
+    
+    toggles.forEach(toggle => {
+      // Find the closest navigation container or parent
+      const nav = toggle.closest('nav') || toggle.closest('.starlight-nav') || toggle.parentElement;
+      if (!nav) return;
+
+      // Find the menu - it might be inside the nav or a sibling
+      let menu = nav.querySelector('.nav-menu-mobile');
+      if (!menu && nav.nextElementSibling && nav.nextElementSibling.classList.contains('nav-menu-mobile')) {
+        menu = nav.nextElementSibling;
+      }
+      
+      if (menu) {
+        toggle.addEventListener('click', (e) => {
+          e.stopPropagation();
+          const isActive = toggle.classList.toggle('active');
+          menu.classList.toggle('active', isActive);
+        });
+
+        // Close menu when clicking outside
+        document.addEventListener('click', (e) => {
+          if (!menu.contains(e.target) && !toggle.contains(e.target)) {
+            menu.classList.remove('active');
+            toggle.classList.remove('active');
+          }
+        });
+      }
+    });
+  },
+
+  /**
+   * Initializes dropdown menus.
+   * Toggles '.active' class on '.dropdown' elements when clicked.
+   */
+  initDropdowns() {
+    const dropdowns = document.querySelectorAll('.dropdown');
+    
+    dropdowns.forEach(dropdown => {
+      const toggle = dropdown.querySelector('.dropdown-toggle') || dropdown.querySelector('button') || dropdown.querySelector('a');
+      
+      if (toggle) {
+        toggle.addEventListener('click', (e) => {
+          // If it's a link that points somewhere, let it work normally
+          if (toggle.tagName === 'A' && toggle.getAttribute('href') && toggle.getAttribute('href') !== '#') {
+            return;
+          }
+          
+          e.preventDefault();
+          e.stopPropagation();
+          
+          const isActive = dropdown.classList.contains('active');
+          
+          // Close all other dropdowns
+          document.querySelectorAll('.dropdown.active').forEach(d => {
+            if (d !== dropdown) d.classList.remove('active');
+          });
+          
+          dropdown.classList.toggle('active', !isActive);
+        });
+      }
+    });
+
+    // Close dropdowns when clicking outside
+    document.addEventListener('click', (e) => {
+      if (!e.target.closest('.dropdown')) {
+        document.querySelectorAll('.dropdown.active').forEach(d => {
+          d.classList.remove('active');
+        });
+      }
+    });
+  },
+
+  /**
+   * Initializes accordion components.
+   * Toggles '.active' class on '.accordion-item' when header is clicked.
+   */
+  initAccordions() {
+    const headers = document.querySelectorAll('.accordion-header');
+    
+    headers.forEach(header => {
+      header.addEventListener('click', () => {
+        const item = header.parentElement;
+        const group = item.closest('.accordion-group');
+        const isActive = item.classList.contains('active');
+        
+        // If in a group, close others
+        if (group) {
+          group.querySelectorAll('.accordion-item').forEach(i => i.classList.remove('active'));
+        }
+        
+        item.classList.toggle('active', !isActive);
+      });
+    });
+  },
+
+  /**
+   * Initializes tab components.
+   * Switches '.active' class on buttons and panels.
+   */
+  initTabs() {
+    const tabLists = document.querySelectorAll('.tab-list');
+    
+    tabLists.forEach(list => {
+      const buttons = list.querySelectorAll('.tab-button');
+      const container = list.parentElement;
+      
+      buttons.forEach(button => {
+        button.addEventListener('click', () => {
+          const targetId = button.getAttribute('data-tab');
+          if (!targetId) return;
+          
+          // Update buttons
+          buttons.forEach(btn => btn.classList.remove('active'));
+          button.classList.add('active');
+          
+          // Update panels
+          const panels = container.querySelectorAll('.tab-panel');
+          panels.forEach(panel => {
+            panel.classList.toggle('active', panel.id === targetId);
+          });
+        });
+      });
+    });
   }
 };
 
@@ -45,5 +176,9 @@ if (typeof window !== 'undefined') {
     if (document.querySelector('.starlight-stars')) {
       Starlight.initStars();
     }
+    Starlight.initNavigation();
+    Starlight.initDropdowns();
+    Starlight.initAccordions();
+    Starlight.initTabs();
   });
 }

package/src/styles/quantum-base.css

@@ -1,7 +1,7 @@
 /*!
  * QuantumCSS + Starlight UI
  * Advanced utility-first framework with ethereal cosmic aesthetics
- * Version: 1.4.0
+ * Version: 1.4.2
  * Features: Modern CSS, JIT Engine, Starlight Components, Dark Mode
  */
 
@@ -350,8 +350,8 @@ textarea {
 .bg-warning { background-color: var(--color-warning); }
 .bg-error { background-color: var(--color-error); }
 .bg-neutral { background-color: var(--color-neutral); }
-.bg-white { background-color: #ffffff; }
-.bg-black { background-color: #000000; }
+.bg-white { background-color: #ffffff; color: #0f172a; }
+.bg-black { background-color: #000000; color: #ffffff; }
 
 /* Border Utilities */
 .border-0 { border-width: 0px; }

package/src/styles/quantum-components.css

@@ -158,12 +158,18 @@ body.light-mode .btn-secondary {
 /* Card Component */
 .card {
   background-color: white;
+  color: #1e293b;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   overflow: hidden;
   transition: all var(--duration-200) var(--ease-in-out);
 }
 
+body.light-mode .card {
+  background-color: white;
+  color: #1e293b;
+}
+
 .card:hover {
   box-shadow: var(--shadow-lg);
   transform: translateY(-2px);
@@ -182,6 +188,12 @@ body.light-mode .btn-secondary {
   padding: var(--space-6);
   border-top: 1px solid #e5e7eb;
   background-color: #f9fafb;
+  color: #1e293b;
+}
+
+body.light-mode .card-footer {
+  background-color: #f9fafb;
+  color: #1e293b;
 }
 
 /* Input Component */
@@ -192,10 +204,16 @@ body.light-mode .btn-secondary {
   border: 1px solid #d1d5db;
   border-radius: var(--radius-md);
   background-color: white;
+  color: #1e293b;
   font-size: 1rem;
   transition: all var(--duration-150) var(--ease-in-out);
 }
 
+body.light-mode .input {
+  background-color: white;
+  color: #1e293b;
+}
+
 textarea.input {
   min-height: 100px;
 }
@@ -237,6 +255,11 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   cursor: not-allowed;
 }
 
+body.light-mode .input:disabled {
+  background-color: #f3f4f6;
+  color: #6b7280;
+}
+
 .input-error {
   border-color: var(--color-error);
 }
@@ -366,6 +389,7 @@ body.light-mode .badge-error {
 
 .modal-content {
   background-color: white;
+  color: #1e293b;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-2xl);
   max-width: 90vw;
@@ -373,6 +397,11 @@ body.light-mode .badge-error {
   overflow-y: auto;
 }
 
+body.light-mode .modal-content {
+  background-color: white;
+  color: #1e293b;
+}
+
 /* Loading Spinner */
 .spinner {
   display: inline-block;
@@ -445,6 +474,7 @@ body.light-mode .skeleton {
   top: 100%;
   left: 0;
   background-color: white;
+  color: #1e293b;
   border: 1px solid #e5e7eb;
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
@@ -456,6 +486,11 @@ body.light-mode .skeleton {
   transition: all var(--duration-150) var(--ease-in-out);
 }
 
+body.light-mode .dropdown-content {
+  background-color: white;
+  color: #1e293b;
+}
+
 .dropdown.active .dropdown-content {
   opacity: 1;
   visibility: visible;
@@ -470,11 +505,22 @@ body.light-mode .skeleton {
   background: none;
   border: none;
   cursor: pointer;
+  color: #1e293b;
   transition: background-color var(--duration-150) var(--ease-in-out);
 }
 
 .dropdown-item:hover {
   background-color: #f3f4f6;
+  color: #1e293b;
+}
+
+body.light-mode .dropdown-item {
+  color: #1e293b;
+}
+
+body.light-mode .dropdown-item:hover {
+  background-color: #f3f4f6;
+  color: #1e293b;
 }
 
 /* Accordion Component */
@@ -488,6 +534,7 @@ body.light-mode .skeleton {
 .accordion-header {
   padding: var(--space-4);
   background-color: #f9fafb;
+  color: #1e293b;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
@@ -497,16 +544,33 @@ body.light-mode .skeleton {
 
 .accordion-header:hover {
   background-color: #f3f4f6;
+  color: #1e293b;
 }
 
 .accordion-content {
   padding: var(--space-4);
   background-color: white;
+  color: #1e293b;
   max-height: 0;
   overflow: hidden;
   transition: max-height var(--duration-300) var(--ease-in-out);
 }
 
+body.light-mode .accordion-header {
+  background-color: #f9fafb;
+  color: #1e293b;
+}
+
+body.light-mode .accordion-header:hover {
+  background-color: #f3f4f6;
+  color: #1e293b;
+}
+
+body.light-mode .accordion-content {
+  background-color: white;
+  color: #1e293b;
+}
+
 .accordion-item.active .accordion-content {
   max-height: 500px;
 }
@@ -522,23 +586,44 @@ body.light-mode .skeleton {
 /* Tab Component */
 .tab-list {
   display: flex;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .tab-button {
-  padding: var(--space-2) var(--space-4);
+  padding: var(--space-3) var(--space-4);
   background: none;
   border: none;
   cursor: pointer;
   border-bottom: 2px solid transparent;
+  color: var(--text-secondary);
+  font-weight: 500;
   transition: all var(--duration-150) var(--ease-in-out);
 }
 
 .tab-button:hover {
-  background-color: #f3f4f6;
+  background-color: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
 }
 
 .tab-button.active {
+  border-bottom-color: var(--color-starlight-blue);
+  color: var(--color-starlight-blue);
+}
+
+body.light-mode .tab-list {
+  border-bottom-color: #e2e8f0;
+}
+
+body.light-mode .tab-button {
+  color: #64748b;
+}
+
+body.light-mode .tab-button:hover {
+  background-color: #f1f5f9;
+  color: #0f172a;
+}
+
+body.light-mode .tab-button.active {
   border-bottom-color: var(--color-primary);
   color: var(--color-primary);
 }
@@ -657,4 +742,80 @@ body.light-mode .skeleton {
 @keyframes slideDown {
   from { transform: translateY(-20px); opacity: 0; }
   to { transform: translateY(0); opacity: 1; }
+}
+
+/* Table Component */
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.table-wrapper::-webkit-scrollbar {
+  height: 8px;
+}
+
+.table-wrapper::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb {
+  background: var(--color-starlight-blue, #3b82f6);
+  border-radius: 4px;
+}
+
+body.light-mode .table-wrapper::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  text-align: left;
+  color: var(--text-primary);
+}
+
+.table th {
+  padding: var(--space-3) var(--space-4);
+  font-weight: 600;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+
+.table td {
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+}
+
+.table tbody tr:hover {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+/* Light Mode Table Styles */
+body.light-mode .table th {
+  background-color: #f8fafc;
+  border-bottom-color: #e2e8f0;
+  color: #0f172a;
+}
+
+body.light-mode .table td {
+  border-bottom-color: #e2e8f0;
+  color: #334155;
+}
+
+body.light-mode .table tbody tr:hover {
+  background-color: #f1f5f9;
+}
+
+/* Overflow Utility */
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
 }