@j3m-quantum/ui 1.3.0 → 1.4.0

package/dist/styles/index.css

@@ -430,23 +430,78 @@
   --j3m-bg-input-disabled: var(--j3m-glass-light-20);
   --j3m-bg-sidebar: #E8E8E8; /* Solid sidebar in glass mode */
 
-  /* Legacy surface tokens */
-  --surface-bg: var(--j3m-glass-light-40);
-  --surface-border: var(--j3m-glass-border-white);
+  /* Legacy surface tokens - SOLID colors for portal components (match solid light mode) */
+  --surface-bg: var(--j3m-gray-1);
+  --surface-border: var(--j3m-gray-6);
   --surface-shadow: var(--j3m-glass-shadow-md);
   --surface-radius: var(--j3m-radius-l);
-  --surface-blur: var(--j3m-blur-lg);
+  --surface-blur: 0;
   
-  /* Overlay surfaces (dialogs, popovers, etc) */
-  --overlay-bg: var(--j3m-glass-light-70);
-  --overlay-border: var(--j3m-glass-border-light);
+  /* Overlay surfaces (dialogs, popovers, etc) - WHITE to match solid light mode */
+  --overlay-bg: var(--j3m-gray-1);
+  --overlay-border: var(--j3m-gray-6);
   --overlay-shadow: var(--j3m-glass-shadow-lg);
-  --overlay-blur: var(--j3m-blur-lg);
+  --overlay-blur: 0;
   
-  /* Shadcn overrides for glass */
-  --input-bg: var(--j3m-glass-light-50);
+  /* Shadcn overrides for glass - Portal components use WHITE to match solid light mode */
+  --input-bg: var(--j3m-gray-1);
   --card: var(--j3m-glass-light-50);
-  --popover: var(--j3m-glass-light-70);
+  --popover: var(--j3m-gray-1);
+  
+  /* Dialog, Sheet, Drawer use popover token - ensure they're white */
+  --dialog: var(--j3m-gray-1);
+}
+
+/* Light Glass Mode - Portal Components (Dialog, Sheet, Drawer, Popover, HoverCard)
+   These render outside the app tree via React Portals.
+   Use WHITE backgrounds to match solid light mode. */
+.theme-glass:not(.dark) [data-slot="dialog-content"],
+.theme-glass:not(.dark) [data-slot="sheet-content"],
+.theme-glass:not(.dark) [data-slot="drawer-content"],
+.theme-glass:not(.dark) [data-slot="popover-content"],
+.theme-glass:not(.dark) [data-slot="hover-card-content"],
+.theme-glass:not(.dark) [data-slot="dropdown-menu-content"],
+.theme-glass:not(.dark) [data-slot="context-menu-content"],
+.theme-glass:not(.dark) [data-slot="menubar-content"],
+.theme-glass:not(.dark) [data-slot="select-content"] {
+  background: var(--j3m-gray-1) !important;
+  border-color: var(--j3m-gray-6) !important;
+  color: var(--j3m-gray-12) !important;
+}
+
+/* Light Glass Mode - Command component and its children */
+.theme-glass:not(.dark) [data-slot="command"] {
+  background: transparent !important;
+}
+
+.theme-glass:not(.dark) [data-slot="command-input-wrapper"] {
+  background: var(--j3m-gray-1) !important;
+  border-color: var(--j3m-gray-6) !important;
+}
+
+.theme-glass:not(.dark) [data-slot="command-list"] {
+  background: var(--j3m-gray-1) !important;
+  border-color: var(--j3m-gray-6) !important;
+}
+
+.theme-glass:not(.dark) [data-slot="command-input"] {
+  color: var(--j3m-gray-12) !important;
+}
+
+.theme-glass:not(.dark) [data-slot="command-item"] {
+  color: var(--j3m-gray-12) !important;
+}
+
+.theme-glass:not(.dark) [data-slot="command-group-heading"] {
+  color: var(--j3m-gray-9) !important;
+}
+
+/* Light Glass Mode - Calendar should match solid mode */
+.theme-glass:not(.dark) [data-slot="calendar"],
+.theme-glass:not(.dark) .rdp {
+  background: var(--j3m-gray-1) !important;
+  border-color: var(--j3m-gray-6) !important;
+  color: var(--j3m-gray-12) !important;
 }
 
 /* ========================================
@@ -459,14 +514,14 @@
   /* Override frosted glass tokens for dark mode */
   --j3m-glass-frosted: var(--j3m-glass-dark-surface);
   --j3m-glass-frosted-strong: var(--j3m-glass-dark-elevated);
-  --j3m-glass-frosted-card: var(--j3m-glass-dark-surface);
+  --j3m-glass-frosted-card: var(--j3m-glass-dark-surface); /* Cards same darkness as sections (70%) */
   --j3m-glass-border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
   --j3m-glass-border-light: var(--j3m-glass-dark-border-light);
   --j3m-glass-border-white: var(--j3m-glass-dark-border);
   --j3m-glass-border-subtle: var(--j3m-glass-dark-border-subtle);
   
   /* Override text colors for visibility */
-  --card-foreground: rgba(255, 255, 255, 0.95);
+  --card-foreground: var(--accent-foreground);
   --accent-foreground: #FFFFFF;
   --foreground: rgba(255, 255, 255, 0.95);
   --muted-foreground: rgba(255, 255, 255, 0.6);
@@ -488,40 +543,50 @@
     radial-gradient(at 0% 100%, rgba(22, 27, 34, 0.6) 0px, transparent 50%),
     linear-gradient(180deg, #0a0a0f 0%, #0d1117 50%, #161b22 100%);
 
-  /* Background & Surface Tokens (Dark Glass) - using semantic tokens */
+  /* Background & Surface Tokens (Dark Glass) - Use SOLID colors to match solid dark mode */
   --j3m-bg-app: transparent;
   --j3m-bg-page: transparent;
-  --j3m-bg-surface: var(--j3m-glass-dark-surface);
-  --j3m-bg-surface-hover: var(--j3m-glass-dark-surface-hover);
-  --j3m-bg-surface-active: var(--j3m-glass-dark-surface-active);
-  --j3m-bg-elevated: var(--j3m-glass-dark-elevated);
-  --j3m-bg-elevated-hover: var(--j3m-glass-dark-elevated-hover);
-  --j3m-bg-overlay: var(--j3m-glass-dark-overlay);
-  --j3m-bg-muted: var(--j3m-glass-dark-muted);
-  --j3m-bg-subtle: var(--j3m-glass-dark-subtle);
-  --j3m-bg-element: var(--j3m-glass-dark-element);
-  --j3m-bg-element-hover: var(--j3m-glass-dark-element-hover);
-  --j3m-bg-element-active: var(--j3m-glass-dark-element-active);
-  --j3m-bg-input: var(--j3m-glass-dark-input);
-  --j3m-bg-input-disabled: var(--j3m-glass-dark-subtle);
-  --j3m-bg-sidebar: #1a1a1a; /* Solid dark sidebar in glass mode */
-
-  /* Legacy surface tokens */
-  --surface-bg: var(--j3m-glass-dark-surface);
-  --surface-border: var(--j3m-glass-dark-border);
-  --overlay-bg: var(--j3m-glass-dark-overlay);
-  --overlay-border: var(--j3m-glass-dark-border-light);
+  --j3m-bg-surface: var(--j3m-gray-13);
+  --j3m-bg-surface-hover: var(--j3m-gray-12);
+  --j3m-bg-surface-active: #404040;
+  --j3m-bg-elevated: var(--j3m-gray-12);
+  --j3m-bg-elevated-hover: #404040;
+  --j3m-bg-overlay: var(--j3m-gray-13);
+  --j3m-bg-muted: var(--j3m-gray-12);
+  --j3m-bg-subtle: var(--j3m-gray-11);
+  --j3m-bg-element: var(--j3m-gray-12);
+  --j3m-bg-element-hover: #404040;
+  --j3m-bg-element-active: #4a4a4a;
+  --j3m-bg-input: var(--j3m-gray-11);
+  --j3m-bg-input-disabled: var(--j3m-gray-10);
+  --j3m-bg-sidebar: var(--j3m-gray-13);
+
+  /* Legacy surface tokens - SOLID colors for portal components */
+  --surface-bg: var(--j3m-gray-13);
+  --surface-border: var(--j3m-gray-11);
+  --overlay-bg: var(--j3m-gray-13);
+  --overlay-border: var(--j3m-gray-11);
   
-  /* Dark glass borders */
-  --border: var(--j3m-glass-dark-border);
+  /* Dark glass borders - SOLID to match solid dark mode */
+  --border: var(--j3m-gray-11);
   
-  /* Text colors for dark glass */
-  --foreground: rgba(255, 255, 255, 0.95);
-  --muted-foreground: rgba(255, 255, 255, 0.6);
+  /* Text colors - match solid dark mode */
+  --foreground: var(--j3m-gray-1);
+  --muted-foreground: var(--j3m-gray-7);
+  
+  /* Shadcn overrides for dark glass - Use SOLID colors to match solid dark mode */
+  --card: var(--j3m-gray-13);
+  --popover: var(--j3m-gray-13);
+  --secondary: var(--j3m-gray-12);
+  --accent: #404040;
+  --accent-foreground: var(--j3m-gray-1);
   
-  /* Shadcn overrides for dark glass */
-  --card: var(--j3m-glass-dark-surface);
-  --popover: var(--j3m-glass-dark-overlay);
+  /* Sidebar tokens - match solid dark mode */
+  --sidebar: var(--j3m-gray-13);
+  --sidebar-foreground: var(--j3m-gray-1);
+  --sidebar-border: var(--j3m-gray-11);
+  --sidebar-accent: #404040;
+  --sidebar-accent-foreground: var(--j3m-gray-1);
   
   /* Orange accent glow for interactive elements */
   --j3m-glass-shadow-glow: 0 0 20px rgba(243, 108, 33, 0.3);
@@ -532,30 +597,35 @@
    Applied inside glass surfaces to adjust nested components
    ======================================== */
 
+/* Glass Context - Applied inside glass surfaces
+   - card: Keeps glass appearance for in-app content
+   - popover: WHITE solid to match solid light mode */
 .glass-context {
   --background: var(--j3m-glass-light-80);
   --input: var(--j3m-glass-light-50);
   --card: var(--j3m-glass-light-70);
-  --popover: var(--j3m-glass-light-80);
+  --popover: var(--j3m-gray-1);
   --muted: var(--j3m-glass-light-50);
   --muted-foreground: rgba(0, 0, 0, 0.55);
   --secondary: var(--j3m-glass-light-80);
   --border: var(--j3m-glass-border-light);
 }
 
-/* Dark glass context - override for dark mode */
+/* Dark glass context - Use SOLID dark mode colors to match solid dark mode */
 .dark .glass-context,
 .theme-glass.dark .glass-context {
-  --background: var(--j3m-glass-dark-surface);
-  --input: var(--j3m-glass-dark-input);
-  --card: var(--j3m-glass-dark-surface);
-  --popover: var(--j3m-glass-dark-overlay);
-  --muted: var(--j3m-glass-dark-muted);
-  --muted-foreground: rgba(255, 255, 255, 0.6);
-  --secondary: var(--j3m-glass-dark-element);
-  --border: var(--j3m-glass-dark-border);
-  --foreground: rgba(255, 255, 255, 0.95);
-  --card-foreground: rgba(255, 255, 255, 0.95);
+  --background: var(--j3m-gray-12);
+  --input: var(--j3m-gray-11);
+  --card: var(--j3m-gray-13);
+  --popover: var(--j3m-gray-13);
+  --muted: var(--j3m-gray-12);
+  --muted-foreground: var(--j3m-gray-7);
+  --secondary: var(--j3m-gray-12);
+  --accent: #404040;
+  --accent-foreground: var(--j3m-gray-1);
+  --border: var(--j3m-gray-11);
+  --foreground: var(--j3m-gray-1);
+  --card-foreground: var(--j3m-gray-1);
 }
 
 /* ========================================
@@ -1282,13 +1352,16 @@ textarea,
 
 /* --- SWITCH --- */
 .glass-context [data-slot="switch"],
+.glass-context [data-slot="theme-switch"],
 .glass-context [role="switch"] {
   background: rgba(255, 255, 255, 0.5) !important;
   border-color: rgba(0, 0, 0, 0.15) !important;
 }
 
 .glass-context [data-slot="switch"][data-state="checked"],
-.glass-context [role="switch"][data-state="checked"] {
+.glass-context [data-slot="theme-switch"][data-state="checked"],
+.glass-context [role="switch"][data-state="checked"],
+.glass-context [role="switch"][aria-checked="true"] {
   background: var(--primary) !important;
   border-color: var(--primary) !important;
 }
@@ -1351,12 +1424,13 @@ textarea,
 }
 
 /* --- CALENDAR --- */
-/* Glass mode - same background as input boxes, keep default hover/selected states */
+/* Glass mode - use solid white to match solid light mode */
 .glass-context [data-slot="calendar"],
 .glass-context .rdp {
-  background: rgba(255, 255, 255, 0.8) !important;
-  border: 1px solid rgba(0, 0, 0, 0.15) !important;
+  background: var(--j3m-gray-1) !important;
+  border: 1px solid var(--j3m-gray-6) !important;
   border-radius: var(--j3m-radius-l) !important;
+  color: var(--j3m-gray-12) !important;
 }
 
 /* Remove inner white background from calendar grid */
@@ -1600,15 +1674,6 @@ textarea,
 .glass-context [data-slot="sheet-content"] {
   background: var(--sidebar) !important;
   border-color: var(--sidebar-border) !important;
-  padding-left: 1.5rem !important;
-  padding-right: 1.5rem !important;
-}
-
-.glass-context [data-slot="sheet-header"],
-.glass-context [data-slot="sheet-footer"],
-.glass-context [data-slot="sheet-body"] {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
 }
 
 /* --- DIALOG --- */
@@ -1624,40 +1689,56 @@ textarea,
 }
 
 .glass-context [data-slot="command"] {
-  background: transparent !important;
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
+  background: var(--j3m-gray-1) !important;
+  background-color: var(--j3m-gray-1) !important;
+  border: 1px solid var(--j3m-gray-6) !important;
+  border-width: 1px !important;
+  border-style: solid !important;
+  box-shadow: var(--shadow-md) !important;
   outline: none !important;
+  border-radius: var(--j3m-radius-l) !important;
+  overflow: hidden !important;
 }
 
+/* Command in glass-context - unified container styling */
 .glass-context [data-slot="command-input-wrapper"] {
-  background: var(--sidebar) !important;
-  border: 1px solid var(--sidebar-border) !important;
-  border-radius: var(--j3m-radius-full) !important;
-  padding-left: 1rem !important;
-  padding-right: 1rem !important;
+  background: transparent !important;
+  border: 0 !important;
+  border-width: 0 !important;
+  border-bottom: 1px solid var(--j3m-gray-6) !important;
+  border-radius: 0 !important;
+  padding-left: 0.75rem !important;
+  padding-right: 0.75rem !important;
 }
 
 .glass-context [data-slot="command-input"] {
   background: transparent !important;
-  color: var(--sidebar-foreground) !important;
+  color: var(--j3m-gray-12) !important;
 }
 
 .glass-context [data-slot="command-input"]::placeholder {
-  color: var(--muted-foreground) !important;
+  color: var(--j3m-gray-9) !important;
+}
+
+/* Override generic input focus styles for command-input */
+.glass-context [data-slot="command-input"]:focus,
+.glass-context [data-slot="command-input"]:focus-visible {
+  border-color: transparent !important;
+  box-shadow: none !important;
+  outline: none !important;
 }
 
 .glass-context [data-slot="command-input-wrapper"]:focus-within {
-  border-color: var(--j3m-orange-9) !important;
-  box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.2) !important;
+  border-bottom-color: var(--j3m-gray-8) !important;
+  box-shadow: none !important;
 }
 
 .glass-context [data-slot="command-list"] {
-  background: var(--sidebar) !important;
-  border: 1px solid var(--sidebar-border) !important;
-  border-radius: var(--j3m-radius-l) !important;
-  margin-top: 0.25rem !important;
+  background: transparent !important;
+  border: 0 !important;
+  border-width: 0 !important;
+  border-radius: 0 !important;
+  margin-top: 0 !important;
 }
 
 .glass-context [data-slot="command-group"] {
@@ -1665,7 +1746,11 @@ textarea,
 }
 
 .glass-context [data-slot="command-item"] {
-  color: var(--sidebar-foreground) !important;
+  color: var(--j3m-gray-12) !important;
+}
+
+.glass-context [data-slot="command-group-heading"] {
+  color: var(--j3m-gray-9) !important;
 }
 
 /* Command item hover - use accent (grey) not primary (orange) */
@@ -1695,6 +1780,25 @@ textarea,
 }
 
 /* --- SCROLL AREA --- */
+/* Solid Light Mode - dark thumb on light background */
+[data-slot="scroll-area-thumb"] {
+  background: rgba(0, 0, 0, 0.25) !important;
+}
+
+[data-slot="scroll-area-thumb"]:hover {
+  background: rgba(0, 0, 0, 0.4) !important;
+}
+
+/* Solid Dark Mode - light thumb on dark background */
+.dark [data-slot="scroll-area-thumb"] {
+  background: rgba(255, 255, 255, 0.25) !important;
+}
+
+.dark [data-slot="scroll-area-thumb"]:hover {
+  background: rgba(255, 255, 255, 0.4) !important;
+}
+
+/* Glass Light Mode - same as light solid for consistency */
 .glass-context [data-slot="scroll-area"] {
   background: var(--sidebar) !important;
   border: 1px solid var(--sidebar-border) !important;
@@ -1745,23 +1849,41 @@ textarea,
    Styling for components inside .dark .glass-context
    ======================================== */
 
-/* --- CARDS (Dark Glass) - ALL cards in dark glass mode --- */
+/* --- CARDS (Dark Glass) - Base styling for ALL dark glass cards --- */
+/* Freestanding cards on background image = Same darkness as sections (70%) */
 .dark.theme-glass [data-slot="card"],
-.theme-glass.dark [data-slot="card"],
+.theme-glass.dark [data-slot="card"] {
+  background: var(--j3m-glass-dark-surface) !important; /* 70% dark - matches section darkness */
+  backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
+  -webkit-backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
+  border: 1px solid var(--j3m-glass-dark-border-light) !important;
+  box-shadow: var(--j3m-glass-shadow-md) !important;
+  color: var(--j3m-gray-1) !important;
+  position: relative;
+}
+
+/* Cards INSIDE glass sections = SAME darkness as sections for consistency */
 .dark .glass-context [data-slot="card"],
+.dark.theme-glass .glass-context [data-slot="card"],
 .theme-glass.dark .glass-context [data-slot="card"] {
-  background: var(--sidebar) !important;
-  border: 1px solid var(--sidebar-border) !important;
-  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15) !important;
-  color: var(--sidebar-foreground) !important;
+  background: var(--j3m-glass-dark-surface) !important; /* 70% dark - matches section darkness */
 }
 
-/* Remove the light gradient border pseudo-element in dark mode */
+/* Gradient border for glass edge effect on dark cards */
 .dark.theme-glass [data-slot="card"]::before,
 .theme-glass.dark [data-slot="card"]::before,
-.dark .glass-context [data-slot="card"]::before,
-.theme-glass.dark .glass-context [data-slot="card"]::before {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
+.dark .glass-context [data-slot="card"]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
 }
 
 /* Card text colors in dark glass */
@@ -1769,7 +1891,7 @@ textarea,
 .theme-glass.dark [data-slot="card"] *,
 .dark.theme-glass .glass-context *,
 .theme-glass.dark .glass-context * {
-  --card-foreground: var(--sidebar-foreground);
+  --card-foreground: rgba(255, 255, 255, 0.95);
 }
 
 /* --- INPUT FIELDS (Dark Glass) --- */
@@ -1788,8 +1910,12 @@ textarea,
 
 .dark .glass-context input::placeholder,
 .dark .glass-context [data-slot="input"]::placeholder,
+.dark .glass-context textarea::placeholder,
+.dark .glass-context [data-slot="textarea"]::placeholder,
 .theme-glass.dark .glass-context input::placeholder,
-.theme-glass.dark .glass-context [data-slot="input"]::placeholder {
+.theme-glass.dark .glass-context [data-slot="input"]::placeholder,
+.theme-glass.dark .glass-context textarea::placeholder,
+.theme-glass.dark .glass-context [data-slot="textarea"]::placeholder {
   color: var(--muted-foreground) !important;
 }
 
@@ -1801,6 +1927,40 @@ textarea,
   color: var(--sidebar-foreground) !important;
 }
 
+.dark .glass-context [data-slot="select-trigger"] [data-slot="select-value"],
+.theme-glass.dark .glass-context [data-slot="select-trigger"] [data-slot="select-value"] {
+  color: var(--sidebar-foreground) !important;
+}
+
+/* Select placeholder text in dark glass */
+.dark .glass-context [data-slot="select-trigger"] [data-placeholder],
+.theme-glass.dark .glass-context [data-slot="select-trigger"] [data-placeholder] {
+  color: var(--muted-foreground) !important;
+}
+
+/* --- NATIVE SELECT (Dark Glass) --- */
+.dark .glass-context select,
+.dark .glass-context [data-slot="native-select"],
+.theme-glass.dark .glass-context select,
+.theme-glass.dark .glass-context [data-slot="native-select"] {
+  background: var(--sidebar) !important;
+  border-color: var(--sidebar-border) !important;
+  color: var(--sidebar-foreground) !important;
+}
+
+.dark .glass-context select:focus,
+.dark .glass-context [data-slot="native-select"]:focus,
+.theme-glass.dark .glass-context select:focus,
+.theme-glass.dark .glass-context [data-slot="native-select"]:focus {
+  border-color: var(--j3m-orange-9) !important;
+  box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.3) !important;
+}
+
+.dark .glass-context [data-slot="native-select-icon"],
+.theme-glass.dark .glass-context [data-slot="native-select-icon"] {
+  color: var(--muted-foreground) !important;
+}
+
 /* --- BUTTONS (Dark Glass) --- */
 .dark .glass-context [data-slot="button"][data-variant="outline"],
 .dark .glass-context [data-slot="button"][data-variant="secondary"],
@@ -1864,6 +2024,22 @@ textarea,
   color: var(--sidebar-foreground) !important;
 }
 
+.dark .glass-context tfoot,
+.dark .glass-context [data-slot="table-footer"],
+.theme-glass.dark .glass-context tfoot,
+.theme-glass.dark .glass-context [data-slot="table-footer"] {
+  background: var(--muted) !important;
+}
+
+.dark .glass-context caption,
+.dark .glass-context [data-slot="table-caption"],
+.theme-glass.dark .glass-context caption,
+.theme-glass.dark .glass-context [data-slot="table-caption"] {
+  background: var(--sidebar) !important;
+  border-top: 1px solid var(--sidebar-border) !important;
+  color: var(--muted-foreground) !important;
+}
+
 /* --- DROPDOWN/POPOVER (Dark Glass) --- */
 .dark .glass-context [data-slot="dropdown-menu-content"],
 .dark .glass-context [data-slot="popover-content"],
@@ -1976,10 +2152,25 @@ textarea,
 }
 
 /* --- COMMAND (Dark Glass) --- */
+.dark .glass-context [data-slot="command"],
+.theme-glass.dark .glass-context [data-slot="command"] {
+  background: var(--sidebar) !important;
+  background-color: var(--sidebar) !important;
+  border: 1px solid var(--sidebar-border) !important;
+  border-width: 1px !important;
+  border-style: solid !important;
+}
+
 .dark .glass-context [data-slot="command-input-wrapper"],
 .theme-glass.dark .glass-context [data-slot="command-input-wrapper"] {
-  background: var(--sidebar) !important;
-  border-color: var(--sidebar-border) !important;
+  background: transparent !important;
+  border-bottom-color: var(--sidebar-border) !important;
+}
+
+.dark .glass-context [data-slot="command-input-wrapper"]:focus-within,
+.theme-glass.dark .glass-context [data-slot="command-input-wrapper"]:focus-within {
+  border-bottom-color: var(--j3m-gray-8) !important;
+  box-shadow: none !important;
 }
 
 .dark .glass-context [data-slot="command-input"],
@@ -1992,10 +2183,21 @@ textarea,
   color: var(--muted-foreground) !important;
 }
 
+/* Override generic input focus styles for command-input in dark glass */
+.dark .glass-context [data-slot="command-input"]:focus,
+.dark .glass-context [data-slot="command-input"]:focus-visible,
+.theme-glass.dark .glass-context [data-slot="command-input"]:focus,
+.theme-glass.dark .glass-context [data-slot="command-input"]:focus-visible {
+  border-color: transparent !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
 .dark .glass-context [data-slot="command-list"],
 .theme-glass.dark .glass-context [data-slot="command-list"] {
-  background: var(--sidebar) !important;
-  border-color: var(--sidebar-border) !important;
+  background: transparent !important;
+  border: 0 !important;
+  border-width: 0 !important;
 }
 
 .dark .glass-context [data-slot="command-item"],
@@ -2078,13 +2280,31 @@ textarea,
   border-color: var(--sidebar-border) !important;
 }
 
-/* --- CALENDAR (Dark Glass) --- */
+/* --- CALENDAR (Dark Glass) - Match solid dark mode --- */
 .dark .glass-context [data-slot="calendar"],
 .dark .glass-context .rdp,
 .theme-glass.dark .glass-context [data-slot="calendar"],
-.theme-glass.dark .glass-context .rdp {
-  background: var(--sidebar) !important;
-  border-color: var(--sidebar-border) !important;
+.theme-glass.dark .glass-context .rdp,
+.theme-glass.dark [data-slot="calendar"],
+.theme-glass.dark .rdp {
+  background: var(--j3m-gray-13) !important;
+  border-color: var(--j3m-gray-11) !important;
+  color: var(--j3m-gray-1) !important;
+}
+
+/* Calendar weekday row - remove background, use light text */
+.dark .glass-context [data-slot="calendar"] thead,
+.dark .glass-context [data-slot="calendar"] .rdp-weekdays,
+.dark .glass-context [data-slot="calendar"] .rdp-weekday,
+.theme-glass.dark .glass-context [data-slot="calendar"] thead,
+.theme-glass.dark .glass-context [data-slot="calendar"] .rdp-weekdays,
+.theme-glass.dark .glass-context [data-slot="calendar"] .rdp-weekday,
+.theme-glass.dark [data-slot="calendar"] thead,
+.theme-glass.dark [data-slot="calendar"] .rdp-weekdays,
+.theme-glass.dark [data-slot="calendar"] .rdp-weekday {
+  background: transparent !important;
+  background-color: transparent !important;
+  color: var(--muted-foreground) !important;
 }
 
 /* --- SLIDER (Dark Glass) --- */
@@ -2124,13 +2344,26 @@ textarea,
 
 /* --- SWITCH (Dark Glass) --- */
 .dark .glass-context [data-slot="switch"],
+.dark .glass-context [data-slot="theme-switch"],
 .dark .glass-context [role="switch"],
 .theme-glass.dark .glass-context [data-slot="switch"],
+.theme-glass.dark .glass-context [data-slot="theme-switch"],
 .theme-glass.dark .glass-context [role="switch"] {
   background: var(--muted) !important;
   border-color: var(--sidebar-border) !important;
 }
 
+/* Switch checked state - orange background */
+.dark .glass-context [data-slot="switch"][data-state="checked"],
+.dark .glass-context [data-slot="theme-switch"][data-state="checked"],
+.dark .glass-context [role="switch"][aria-checked="true"],
+.theme-glass.dark .glass-context [data-slot="switch"][data-state="checked"],
+.theme-glass.dark .glass-context [data-slot="theme-switch"][data-state="checked"],
+.theme-glass.dark .glass-context [role="switch"][aria-checked="true"] {
+  background: var(--primary) !important;
+  border-color: var(--primary) !important;
+}
+
 /* ========================================
    TOAST/SONNER POSITIONING
    Position toasts at top-center of screen
@@ -2150,12 +2383,51 @@ textarea,
   transform: translateX(-50%) !important;
 }
 
-/* Glass mode toast styling */
-.glass-context [data-sonner-toast],
-.glass-context .sonner-toast {
-  background: var(--sidebar) !important;
-  border-color: var(--sidebar-border) !important;
-  color: var(--sidebar-foreground) !important;
+/* Light Glass mode toast styling - WHITE to match solid light mode */
+.theme-glass:not(.dark) [data-sonner-toast],
+.theme-glass:not(.dark) .sonner-toast {
+  background: var(--j3m-gray-1) !important;
+  border-color: var(--j3m-gray-6) !important;
+  color: var(--j3m-gray-12) !important;
+}
+
+/* Dark glass toast - solid dark background with bright text */
+.theme-glass.dark [data-sonner-toast],
+.theme-glass.dark .sonner-toast,
+.dark.theme-glass [data-sonner-toast],
+.dark.theme-glass .sonner-toast {
+  background: var(--j3m-gray-13) !important;
+  border-color: var(--j3m-gray-11) !important;
+  color: var(--j3m-gray-1) !important;
+}
+
+.theme-glass.dark [data-sonner-toast] *,
+.theme-glass.dark .sonner-toast *,
+.dark.theme-glass [data-sonner-toast] *,
+.dark.theme-glass .sonner-toast * {
+  color: var(--j3m-gray-1) !important;
+}
+
+.theme-glass.dark [data-sonner-toast] [data-description],
+.dark.theme-glass [data-sonner-toast] [data-description] {
+  color: var(--j3m-gray-7) !important;
+}
+
+/* Solid Dark mode toast - ensure dark background */
+.dark:not(.theme-glass) [data-sonner-toast],
+.dark:not(.theme-glass) .sonner-toast {
+  background: var(--j3m-gray-13) !important;
+  border-color: var(--j3m-gray-11) !important;
+  color: var(--j3m-gray-1) !important;
+}
+
+.dark:not(.theme-glass) [data-sonner-toast] *,
+.dark:not(.theme-glass) .sonner-toast * {
+  color: var(--j3m-gray-1) !important;
+}
+
+.dark:not(.theme-glass) [data-sonner-toast] [data-description] {
+  color: var(--j3m-gray-7) !important;
 }
 
 /* ========================================