juxscript 1.0.28 → 1.0.30

package/presets/styles/base.css

@@ -1,1380 +0,0 @@
-
-/* ============================================
-   GLOBAL RESET & BASE STYLES
-   ============================================ */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-normal);
-  color: var(--color-text-primary);
-  background: var(--color-background);
-  transition: background-color var(--transition-base), color var(--transition-base);
-  overflow: hidden;
-}
-
-/* ============================================
-   APP CONTAINER - Main Layout Grid
-   ============================================ */
-#app {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  grid-template-rows: auto 1fr auto;
-  grid-template-areas:
-    "header header header"
-    "sidebar main aside"
-    "footer footer footer";
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-}
-
-/* ============================================
-   HEADER - Top Navigation Bar
-   ============================================ */
-#appheader {
-  grid-area: header;
-  background: var(--color-surface-elevated);
-  border-bottom: var(--border-width) solid var(--color-border);
-  display: flex;
-  align-items: center;
-  padding: 0 var(--space-lg);
-  height: 48px;
-  z-index: 100;
-  transition: background-color var(--transition-base), border-color var(--transition-base);
-}
-
-#appheader-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  gap: var(--space-xl);
-}
-
-#appheader-logo {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-primary);
-  text-decoration: none;
-  padding: var(--space-sm) var(--space-md);
-  border-radius: var(--radius-md);
-  transition: background-color var(--transition-fast);
-}
-
-#appheader-logo:hover {
-  background: var(--color-surface-hover);
-}
-
-#appheader-nav {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-#appheader-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-}
-
-/* ============================================
-   SIDEBAR - Left Navigation
-   ============================================ */
-.jux-sidebar,
-#appaside {
-  grid-area: sidebar;
-  width: 260px;
-  background: var(--color-surface-base);
-  border-right: var(--border-width) solid var(--color-border);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  transition: width var(--transition-base);
-  position: relative;
-}
-
-.jux-sidebar-collapsed,
-#appaside.jux-sidebar-collapsed {
-  width: 60px;
-}
-
-.jux-sidebar-expand-on-hover.jux-sidebar-collapsed.jux-sidebar-hover-expanded,
-#appaside.jux-sidebar-expand-on-hover.jux-sidebar-collapsed.jux-sidebar-hover-expanded {
-  width: 260px;
-  z-index: 1000;
-  /* box-shadow: var(--shadow-lg); */
-}
-
-.jux-sidebar-menu {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: var(--space-sm);
-}
-
-.jux-sidebar-menu::-webkit-scrollbar {
-  width: 6px;
-}
-
-.jux-sidebar-menu::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: var(--radius-full);
-}
-
-.jux-sidebar-toggle {
-  margin-top: auto;
-  order: 999;
-  width: 32px;
-  height: 32px;
-  margin-left: auto;
-  margin-right: var(--space-lg);
-  margin-bottom: var(--space-lg);
-  border: none;
-  background: var(--color-surface-elevated);
-  color: var(--color-text-secondary);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all var(--transition-base);
-  border: var(--border-width) solid var(--color-border);
-}
-
-.jux-sidebar-toggle:hover {
-  background: var(--color-surface-hover);
-  color: var(--color-text-primary);
-}
-
-.jux-sidebar-collapsed .jux-sidebar-toggle,
-#appaside.jux-sidebar-collapsed .jux-sidebar-toggle {
-  margin-left: 14px;
-  margin-right: 14px;
-}
-
-.jux-sidebar-hover-expanded .jux-sidebar-toggle,
-#appaside.jux-sidebar-hover-expanded .jux-sidebar-toggle {
-  margin-left: auto;
-  margin-right: var(--space-lg);
-}
-
-.jux-sidebar-toggle-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--font-size-lg);
-}
-
-/* Menu inside sidebar */
-.jux-sidebar .jux-menu {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xs);
-}
-
-.jux-sidebar .jux-menu-item {
-  list-style: none;
-}
-
-.jux-sidebar .jux-menu-link,
-.jux-sidebar .jux-menu-button {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-sm) var(--space-md);
-  border-radius: var(--radius-md);
-  color: var(--color-text-secondary);
-  text-decoration: none;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  transition: all var(--transition-fast);
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  width: 100%;
-  text-align: left;
-  white-space: nowrap;
-  position: relative;
-}
-
-.jux-sidebar .jux-menu-link:hover,
-.jux-sidebar .jux-menu-button:hover {
-  background: var(--color-surface-hover);
-  color: var(--color-text-primary);
-}
-
-.jux-sidebar .jux-menu-item-active > .jux-menu-link,
-.jux-sidebar .jux-menu-item-active > .jux-menu-button,
-.jux-sidebar .jux-menu-link-active {
-  background: var(--color-brand-subtle);
-  color: var(--color-brand);
-  font-weight: var(--font-weight-semibold);
-}
-
-.jux-sidebar .jux-menu-icon {
-  flex-shrink: 0;
-  width: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.jux-sidebar .jux-menu-label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.jux-sidebar .jux-menu-chevron {
-  flex-shrink: 0;
-  transition: transform var(--transition-fast);
-  font-size: var(--font-size-sm);
-  color: var(--color-text-tertiary);
-}
-
-.jux-sidebar .jux-menu-item-open > .jux-menu-button .jux-menu-chevron {
-  transform: rotate(90deg);
-}
-
-/* Collapsed state - hide labels and chevrons */
-.jux-sidebar-collapsed .jux-menu-label,
-.jux-sidebar-collapsed .jux-menu-chevron,
-#appaside.jux-sidebar-collapsed .jux-menu-label,
-#appaside.jux-sidebar-collapsed .jux-menu-chevron {
-  display: none;
-}
-
-.jux-sidebar-collapsed .jux-menu-link,
-.jux-sidebar-collapsed .jux-menu-button,
-#appaside.jux-sidebar-collapsed .jux-menu-link,
-#appaside.jux-sidebar-collapsed .jux-menu-button {
-  justify-content: center;
-  padding: var(--space-sm);
-}
-
-/* Hover-expanded state - show labels */
-.jux-sidebar-hover-expanded .jux-menu-label,
-.jux-sidebar-hover-expanded .jux-menu-chevron,
-#appaside.jux-sidebar-hover-expanded .jux-menu-label,
-#appaside.jux-sidebar-hover-expanded .jux-menu-chevron {
-  display: inline;
-}
-
-.jux-sidebar-hover-expanded .jux-menu-link,
-.jux-sidebar-hover-expanded .jux-menu-button,
-#appaside.jux-sidebar-hover-expanded .jux-menu-link,
-#appaside.jux-sidebar-hover-expanded .jux-menu-button {
-  justify-content: flex-start;
-  padding: var(--space-sm) var(--space-md);
-}
-
-/* Submenus */
-.jux-sidebar .jux-menu-submenu {
-  display: none;
-  flex-direction: column;
-  gap: var(--space-xs);
-  padding-left: var(--space-xl);
-  margin-top: var(--space-xs);
-  border-left: 2px solid var(--color-border);
-  margin-left: var(--space-lg);
-}
-
-.jux-sidebar .jux-menu-item-open > .jux-menu-submenu {
-  display: flex;
-}
-
-.jux-sidebar .jux-menu-submenu .jux-menu-link,
-.jux-sidebar .jux-menu-submenu .jux-menu-button {
-  font-size: var(--font-size-xs);
-  padding: var(--space-xs) var(--space-md);
-}
-
-/* Hide submenus when collapsed */
-.jux-sidebar-collapsed .jux-menu-submenu,
-#appaside.jux-sidebar-collapsed .jux-menu-submenu {
-  display: none !important;
-}
-
-/* Show submenus when hover-expanded and open */
-.jux-sidebar-hover-expanded .jux-menu-item-open > .jux-menu-submenu,
-#appaside.jux-sidebar-hover-expanded .jux-menu-item-open > .jux-menu-submenu {
-  display: flex !important;
-}
-
-/* ============================================
-   MAIN CONTENT - Center Area
-   ============================================ */
-#appmain {
-  grid-area: main;
-  background: var(--color-background);
-  overflow-y: auto;
-  overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-#appmain-content {
-  flex: 1;
-  padding: var(--space-3xl) var(--space-2xl);
-  max-width: 1600px;
-  width: 100%;
-  margin: 0 auto;
-}
-
-/* Custom scrollbar for main content */
-#appmain::-webkit-scrollbar {
-  width: 8px;
-}
-
-#appmain::-webkit-scrollbar-track {
-  background: var(--color-surface-base);
-}
-
-#appmain::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: var(--radius-full);
-}
-
-#appmain::-webkit-scrollbar-thumb:hover {
-  background: var(--color-border-hover);
-}
-
-/* ============================================
-   RIGHT SIDEBAR - Optional Panel
-   ============================================ */
-#appsidebar {
-  grid-area: aside;
-  width: 280px;
-  background: var(--color-surface-base);
-  border-left: var(--border-width) solid var(--color-border);
-  display: none;
-  flex-direction: column;
-  overflow: hidden;
-  transition: width var(--transition-base), background-color var(--transition-base);
-}
-
-#appsidebar.show {
-  display: flex;
-}
-
-#appsidebar.collapsed {
-  width: 0;
-  border: none;
-}
-
-#appsidebar-header {
-  padding: var(--space-lg);
-  border-bottom: var(--border-width) solid var(--color-border);
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-#appsidebar-content {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: var(--space-lg);
-}
-
-#appsidebar-content::-webkit-scrollbar {
-  width: 6px;
-}
-
-#appsidebar-content::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-#appsidebar-content::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: var(--radius-full);
-}
-
-#appsidebar-content::-webkit-scrollbar-thumb:hover {
-  background: var(--color-border-hover);
-}
-
-#appsidebar-footer {
-  padding: var(--space-lg);
-  border-top: var(--border-width) solid var(--color-border);
-  font-size: var(--font-size-xs);
-  color: var(--color-text-tertiary);
-}
-
-/* ============================================
-   FOOTER - Bottom Bar
-   ============================================ */
-#appfooter {
-  grid-area: footer;
-  background: var(--color-surface-elevated);
-  border-top: var(--border-width) solid var(--color-border);
-  padding: var(--space-lg) var(--space-2xl);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: var(--font-size-sm);
-  color: var(--color-text-tertiary);
-  transition: background-color var(--transition-base), border-color var(--transition-base);
-}
-
-#appfooter-content {
-  display: flex;
-  align-items: center;
-  gap: var(--space-xl);
-}
-
-#appfooter-legal {
-  display: flex;
-  align-items: center;
-  gap: var(--space-lg);
-}
-
-#appfooter a {
-  color: var(--color-text-secondary);
-  text-decoration: none;
-  transition: color var(--transition-fast);
-}
-
-#appfooter a:hover {
-  color: var(--color-text-primary);
-}
-
-/* ============================================
-   THEME TOGGLE - Dark/Light Mode Button
-   ============================================ */
-#theme-toggle {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-#theme-toggle button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-md);
-  border: none;
-  background: var(--color-surface-hover);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  font-size: var(--font-size-lg);
-}
-
-#theme-toggle button:hover {
-  background: var(--color-surface-active);
-  color: var(--color-text-primary);
-  transform: scale(1.05);
-}
-
-#theme-toggle button:active {
-  transform: scale(0.95);
-}
-
-/* Mobile Sidebar Backdrop */
-.jux-sidebar-backdrop {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 999;
-  backdrop-filter: blur(4px);
-  animation: fadeIn 0.2s ease-out;
-}
-
-.jux-sidebar-backdrop.show {
-  display: block;
-}
-
-/* ============================================
-   RESPONSIVE DESIGN
-   ============================================ */
-@media (max-width: 1024px) {
-  #appaside {
-    display: none;
-  }
-  
-  #app {
-    grid-template-columns: auto 1fr;
-    grid-template-areas:
-      "sidebar header"
-      "sidebar main"
-      "sidebar footer";
-  }
-}
-
-@media (max-width: 768px) {
-  /* Move sidebar toggle to header on mobile */
-  .jux-sidebar-toggle,
-  #appaside .jux-sidebar-toggle {
-    position: fixed;
-    top: 8px;
-    left: var(--space-md);
-    z-index: 1001;
-    margin: 0;
-  }
-  
-  .jux-sidebar,
-  #appaside {
-    display: none;
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    z-index: 1000;
-    width: 260px;
-    box-shadow: var(--shadow-xl);
-    transform: translateX(-100%);
-    transition: transform var(--transition-base);
-  }
-  
-  .jux-sidebar.open,
-  #appaside.open {
-    display: flex;
-    transform: translateX(0);
-  }
-  
-  #app {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "header"
-      "main"
-      "footer";
-  }
-  
-  #appmain-content {
-    padding: var(--space-2xl) var(--space-lg);
-  }
-  
-  #appheader {
-    padding: 0 var(--space-md) 0 calc(var(--space-md) + 48px);
-  }
-}
-
-/* ============================================
-   ANIMATIONS
-   ============================================ */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideIn {
-  from {
-    transform: translateX(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.animate-fade-in {
-  animation: fadeIn var(--transition-base) ease-out;
-}
-
-.animate-slide-in {
-  animation: slideIn var(--transition-base) ease-out;
-}
-
-/* ============================================
-   JUX COMPONENT STYLES
-   ============================================ */
-
-/* Icon Component */
-.jux-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  line-height: 1;
-}
-
-.jux-icon img,
-.jux-icon svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-/* Hero Component */
-.jux-hero {
-  padding: var(--space-3xl) 0;
-  margin-bottom: var(--space-2xl);
-}
-
-.jux-hero-title {
-  font-size: var(--font-size-3xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-primary);
-  margin-bottom: var(--space-md);
-  line-height: var(--line-height-tight);
-}
-
-.jux-hero-subtitle {
-  font-size: var(--font-size-lg);
-  color: var(--color-text-secondary);
-  line-height: var(--line-height-normal);
-}
-
-/* Hero centered variant */
-.jux-hero.jux-hero-centered {
-  text-align: center;
-}
-
-.jux-hero.jux-hero-centered .jux-hero-title,
-.jux-hero.jux-hero-centered .jux-hero-subtitle {
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/* Card Component */
-.jux-card {
-  background: var(--color-surface-elevated);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: var(--space-xl);
-  transition: all var(--transition-base);
-  position: relative;
-  overflow: hidden;
-}
-
-.jux-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, var(--color-brand), var(--color-info));
-  transform: translateY(-100%);
-  transition: transform var(--transition-base);
-  z-index: 1;
-}
-
-.jux-card:hover {
-  box-shadow: var(--shadow-md);
-  border-color: var(--color-border-hover);
-  transform: translateY(-2px);
-}
-
-.jux-card:hover::before {
-  transform: translateY(0);
-}
-
-.jux-card-title {
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-primary);
-  margin-bottom: var(--space-lg);
-  letter-spacing: -0.01em;
-  position: relative;
-  z-index: 2;
-  padding-right: calc(var(--font-size-2xl) + var(--space-lg));
-}
-
-.jux-card-icon {
-  position: absolute;
-  top: var(--space-xl);
-  right: var(--space-xl);
-  font-size: var(--font-size-2xl);
-  line-height: 1;
-  opacity: 0.8;
-  transition: opacity var(--transition-fast);
-  z-index: 2;
-}
-
-.jux-card:hover .jux-card-icon {
-  opacity: 1;
-}
-
-.jux-card-body {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  line-height: var(--line-height-relaxed);
-  position: relative;
-  z-index: 2;
-}
-
-.jux-card-body .jux-card-title {
-  display: block;
-  margin-top: 0;
-}
-
-.jux-card-content {
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-primary);
-  text-align: center;
-  padding: var(--space-xl) 0;
-}
-
-.jux-card-body .jux-card-content {
-  font-size: var(--font-size-sm);
-  text-align: left;
-  padding: 0;
-  font-weight: var(--font-weight-normal);
-}
-
-.jux-card-footer {
-  margin-top: var(--space-xl);
-  padding-top: var(--space-lg);
-  border-top: var(--border-width) solid var(--color-border);
-}
-
-.jux-card-actions {
-  display: flex;
-  gap: var(--space-md);
-  justify-content: flex-start;
-}
-
-/* List Component */
-.jux-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-  list-style: none;
-  padding: 0;
-  margin: var(--space-lg);
-}
-
-.jux-list-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-}
-
-.jux-list-header {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-lg);
-  padding: 0 var(--space-lg);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.jux-list-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-lg);
-  padding: var(--space-lg);
-  background: var(--color-surface-elevated);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-lg);
-  transition: all var(--transition-base);
-  cursor: pointer;
-}
-
-.jux-list-item:hover {
-  background: var(--color-surface-hover);
-  border-color: var(--color-border-hover);
-  box-shadow: var(--shadow-sm);
-}
-
-.jux-list-item.jux-list-item-selected {
-  border-color: var(--color-brand);
-  box-shadow: 0 0 0 3px var(--color-brand-subtle);
-}
-
-.jux-list-item-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  color: var(--color-text-primary);
-}
-
-.jux-list-item-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xs);
-}
-
-.jux-list-item-title {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-primary);
-  line-height: var(--line-height-tight);
-}
-
-.jux-list-item-body {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  line-height: var(--line-height-normal);
-}
-
-.jux-list-item-metadata {
-  font-size: var(--font-size-xs);
-  color: var(--color-text-tertiary);
-  margin-left: auto;
-  padding-left: var(--space-lg);
-  white-space: nowrap;
-}
-
-.jux-list-item-success {
-  border-left: 3px solid var(--color-success);
-}
-
-.jux-list-item-warning {
-  border-left: 3px solid var(--color-warning);
-}
-
-.jux-list-item-error {
-  border-left: 3px solid var(--color-danger);
-}
-
-.jux-list-item-info {
-  border-left: 3px solid var(--color-info);
-}
-
-/* Container Component */
-.jux-container {
-  width: 100%;
-}
-
-/* Button Component */
-.jux-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-sm);
-  padding: var(--space-sm) var(--space-lg);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  position: relative;
-  overflow: hidden;
-}
-
-.jux-button::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  border-radius: var(--radius-full);
-  background: rgba(255, 255, 255, 0.1);
-  transform: translate(-50%, -50%);
-  transition: width var(--transition-slow), height var(--transition-slow);
-}
-
-.jux-button:hover {
-  background: var(--color-surface-hover);
-  border-color: var(--color-border-hover);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
-}
-
-.jux-button:hover::before {
-  width: 300px;
-  height: 300px;
-}
-
-.jux-button-primary {
-  background: var(--color-brand);
-  color: var(--color-text-inverse);
-  border-color: var(--color-brand);
-}
-
-.jux-button-primary:hover {
-  background: var(--color-brand-hover);
-  border-color: var(--color-brand-hover);
-  box-shadow: var(--shadow-md), var(--shadow-glow);
-  transform: translateY(-2px);
-}
-
-.jux-button:active {
-  transform: translateY(0);
-}
-
-.jux-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none;
-}
-
-/* Table Component */
-.jux-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--font-size-sm);
-}
-
-.jux-table thead {
-  background: var(--color-surface-base);
-  border-bottom: 2px solid var(--color-border);
-}
-
-.jux-table th {
-  padding: var(--space-md) var(--space-lg);
-  text-align: left;
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-primary);
-  font-size: var(--font-size-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border-bottom: var(--border-width) solid var(--color-border);
-}
-
-.jux-table td {
-  padding: var(--space-md) var(--space-lg);
-  color: var(--color-text-primary);
-  border-bottom: var(--border-width) solid var(--color-border);
-}
-
-.jux-table tbody tr {
-  transition: background-color var(--transition-fast);
-}
-
-.jux-table tbody tr:hover {
-  background: var(--color-surface-hover);
-}
-
-.jux-table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-/* Alternating row colors for better readability */
-.jux-table tbody tr:nth-child(even) {
-  background: var(--color-surface-base);
-}
-
-.jux-table tbody tr:nth-child(even):hover {
-  background: var(--color-surface-hover);
-}
-
-/* Input Component */
-.jux-input {
-  margin-bottom: var(--space-lg);
-  position: relative;
-}
-
-.jux-input-label {
-  display: block;
-  margin-bottom: var(--space-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-  font-size: var(--font-size-sm);
-}
-
-.jux-input-required {
-  color: var(--color-error);
-}
-
-.jux-input-element {
-  width: 100%;
-  padding: var(--space-md) var(--space-lg);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-base);
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  transition: all var(--transition-fast);
-  box-sizing: border-box;
-  font-family: var(--font-family-base);
-}
-
-.jux-input-element:hover {
-  border-color: var(--color-border-hover);
-}
-
-.jux-input-element:focus {
-  outline: none;
-  border-color: var(--color-border-focus);
-  box-shadow: 0 0 0 3px var(--color-brand-subtle);
-}
-
-.jux-input-element:disabled {
-  background-color: var(--color-surface-hover);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.jux-input-element.jux-input-invalid {
-  border-color: var(--color-error);
-}
-
-.jux-input-element.jux-input-invalid:focus {
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-}
-
-.jux-input-element::placeholder {
-  color: var(--color-text-tertiary);
-}
-
-.jux-input-error {
-  color: var(--color-error);
-  font-size: var(--font-size-xs);
-  margin-top: var(--space-xs);
-}
-
-.jux-input-counter {
-  text-align: right;
-  font-size: var(--font-size-xs);
-  color: var(--color-text-secondary);
-  margin-top: var(--space-xs);
-}
-
-.jux-input-icon {
-  position: absolute;
-  left: var(--space-lg);
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--color-text-tertiary);
-  pointer-events: none;
-  font-size: var(--font-size-lg);
-  z-index: 1;
-}
-
-.jux-input-container.jux-input-with-icon .jux-input-element {
-  padding-left: calc(var(--space-lg) * 2 + var(--font-size-lg));
-}
-
-.jux-input-container:not(.jux-input-with-icon) .jux-input-element {
-  padding-left: var(--space-lg);
-}
-
-/* File Upload Component */
-.jux-fileupload {
-  margin: var(--space-xl);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-  min-width: 200px;
-  flex: 1;
-  align-items: center;
-}
-
-.jux-fileupload-label {
-  display: block;
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 2px;
-  width: fit-content;
-  text-align: center;
-  white-space: nowrap;
-}
-
-.jux-fileupload-input {
-  display: none;
-}
-
-.jux-fileupload-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-lg);
-  padding: var(--space-2xl) var(--space-lg);
-  background: var(--color-surface-elevated);
-  border: 2px dashed var(--color-border);
-  border-radius: var(--radius-xl);
-  color: var(--color-text-secondary);
-  font-family: inherit;
-  font-size: var(--font-size-sm);
-  cursor: pointer;
-  transition: all var(--transition-base);
-  position: relative;
-  overflow: wrap;
-  width: 100%;
-}
-
-.jux-fileupload-icon {
-  font-size: 2rem;
-  line-height: 1;
-  opacity: 0.6;
-  transition: opacity var(--transition-fast), transform var(--transition-bounce);
-}
-
-.jux-fileupload-button:hover .jux-fileupload-icon {
-  opacity: 1;
-  transform: translateY(-4px);
-}
-
-.jux-fileupload-text {
-  font-weight: var(--font-weight-medium);
-  margin-top: var(--space-xs);
-}
-
-.jux-fileupload-button:hover:not(:disabled) {
-  background: var(--color-surface-hover);
-  border-color: var(--color-brand);
-  color: var(--color-brand);
-  box-shadow: var(--shadow-md);
-}
-
-.jux-fileupload-button:active:not(:disabled) {
-  transform: scale(0.98);
-}
-
-.jux-fileupload-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  background: var(--color-surface-base);
-}
-
-.jux-fileupload-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xs);
-  margin-top: var(--space-xs);
-  color: var(--color-text-tertiary);
-  font-style: italic;
-  font-size: var(--font-size-xs);
-}
-
-.jux-fileupload-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-sm) var(--space-md);
-  background: var(--color-surface-base);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-md);
-  color: var(--color-text-primary);
-  font-size: var(--font-size-sm);
-  font-style: normal;
-  animation: slideIn var(--transition-base) ease-out;
-  transition: all var(--transition-fast);
-}
-
-.jux-fileupload-item:hover {
-  background: var(--color-surface-hover);
-  border-color: var(--color-border-hover);
-  transform: translateX(2px);
-  box-shadow: var(--shadow-xs);
-}
-
-.jux-fileupload-item::before {
-  content: '📄';
-  font-size: 1.1rem;
-  filter: saturate(0.5);
-}
-
-/* Progress Component */
-.jux-progress {
-  margin-bottom: var(--space-lg);
-}
-
-.jux-progress-label {
-  margin-bottom: var(--space-sm);
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  font-weight: var(--font-weight-medium);
-}
-
-.jux-progress-track {
-  width: 100%;
-  height: 8px;
-  background: var(--color-surface-base);
-  border-radius: var(--radius-full);
-  overflow: hidden;
-  position: relative;
-}
-
-.jux-progress-bar {
-  height: 100%;
-  background: var(--color-brand);
-  border-radius: var(--radius-full);
-  transition: width var(--transition-slow);
-  position: relative;
-}
-
-.jux-progress-bar-default {
-  background: var(--color-brand);
-}
-
-.jux-progress-bar-success {
-  background: var(--color-success);
-}
-
-.jux-progress-bar-warning {
-  background: var(--color-warning);
-}
-
-.jux-progress-bar-error {
-  background: var(--color-danger);
-}
-
-.jux-progress-bar-info {
-  background: var(--color-info);
-}
-
-.jux-progress-bar-striped {
-  background-image: linear-gradient(
-    45deg,
-    rgba(255, 255, 255, 0.15) 25%,
-    transparent 25%,
-    transparent 50%,
-    rgba(255, 255, 255, 0.15) 50%,
-    rgba(255, 255, 255, 0.15) 75%,
-    transparent 75%,
-    transparent
-  );
-  background-size: 1rem 1rem;
-}
-
-.jux-progress-bar-animated {
-  animation: progress-stripes 1s linear infinite;
-}
-
-@keyframes progress-stripes {
-  0% { background-position: 1rem 0; }
-  100% { background-position: 0 0; }
-}
-
-/* Progress size variants */
-.jux-progress-sm .jux-progress-track {
-  height: 4px;
-}
-
-.jux-progress-md .jux-progress-track {
-  height: 8px;
-}
-
-.jux-progress-lg .jux-progress-track {
-  height: 12px;
-}
-
-/* Alert Component */
-.jux-alert {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-md);
-  padding: var(--space-lg);
-  border-radius: var(--radius-lg);
-  border: var(--border-width) solid;
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-  animation: alertSlideIn var(--transition-base) ease-out;
-  transition: all var(--transition-fast);
-  box-shadow: var(--shadow-lg);
-  width: 100%;
-  position: relative;
-  z-index: 1000;
-  transform-origin: top center;
-  margin-bottom: 0;
-}
-
-/* Alert Stack Effect (Scoped to .jux-alert-stack container) */
-.jux-alert-stack {
-  position: relative;
-  min-height: 80px;
-  display: flex;
-  flex-direction: column-reverse; /* Keep newest at bottom of DOM but appearing correctly */
-}
-
-/* Base stack state: Hidden for all */
-.jux-alert-stack .jux-alert {
-  display: none !important;
-  transition: all var(--transition-bounce), opacity var(--transition-base);
-  margin-bottom: 0;
-  transform-origin: top center;
-}
-
-/* Top Visible Alert: The one with no UN-HIDDEN siblings after it in the DOM */
-.jux-alert-stack .jux-alert:not([style*="display: none"]):not(:has(~ .jux-alert:not([style*="display: none"]))) {
-  display: flex !important;
-  position: relative;
-  z-index: 20;
-  opacity: 1;
-  transform: translateY(0) scale(1);
-}
-
-/* Second Visible Alert: The one with exactly one UN-HIDDEN sibling after it */
-.jux-alert-stack .jux-alert:not([style*="display: none"]):has(~ .jux-alert:not([style*="display: none"])):not(:has(~ .jux-alert:not([style*="display: none"]) ~ .jux-alert:not([style*="display: none"]))) {
-  display: flex !important;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10;
-  opacity: 0.5;
-  transform: translateY(var(--space-sm)) scale(0.98);
-  pointer-events: none;
-}
-
-.jux-alert-close {
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  color: inherit;
-  font-size: var(--font-size-2xl);
-  line-height: 1;
-  cursor: pointer;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-sm);
-  transition: all var(--transition-fast);
-  opacity: 0.6;
-}
-
-
-/* Alert Type Variants */
-.jux-alert-info {
-  background: var(--color-surface-elevated);
-  border-color: currentColor;
-  color: var(--color-info);
-}
-
-.jux-alert-success {
-  background: var(--color-surface-elevated);
-  border-color: currentColor;
-  color: var(--color-success);
-}
-
-.jux-alert-warning {
-  background: var(--color-surface-elevated);
-  border-color: currentColor;
-  color: var(--color-warning);
-}
-
-.jux-alert-error {
-  background: var(--color-surface-elevated);
-  border-color: currentColor;
-  color: var(--color-danger);
-}