@metropolle/design-system 1.0.0-beta.20250821024300.dfbe136 → 1.0.0-beta.2026.1.1.1723.0f6bc6d

package/dist/css/components.css

@@ -42,6 +42,58 @@
   width: 100%;
 }
 
+/* =========================
+   Modal Styles
+   NOTE: Modal styling is handled 100% via inline styles in Modal.tsx
+   (same approach as ProfileCard for visual consistency)
+   NO CSS classes are used for the modal card itself.
+   ========================= */
+
+/* Header close button sizing + alignment */
+.mds-modal-header > button[aria-label="Fechar"] {
+  /* Size and reset */
+  font-size: 1rem !important;
+  line-height: 1 !important;
+  transition: none !important;
+  padding: 0 !important;
+  background: transparent !important;
+  border: none !important;
+  /* Colors from DS tokens with robust fallback */
+  color: var(--mds-color-text-secondary, var(--text-secondary, rgba(0,0,0,0.65))) !important;
+  /* Absolute centering like the left icon */
+  position: absolute !important;
+  right: 16px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  width: 32px !important;
+  height: 32px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+.mds-modal-header > button[aria-label="Fechar"]:hover,
+.mds-modal-header > button[aria-label="Fechar"]:focus,
+.mds-modal-header > button[aria-label="Fechar"]:focus-visible {
+  /* Keep centered on interactive states and avoid lifts/shadows */
+  position: absolute !important;
+  right: 16px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  box-shadow: none !important;
+  transition: none !important;
+  color: var(--mds-color-text-primary, var(--text-primary, #111827)) !important;
+}
+
+/* Responsive modal */
+@media (max-width: 768px) {
+  .mds-modal-overlay .mds-modal-card,
+  .modal-overlay .mds-modal-card {
+    min-width: 90vw !important;
+    max-width: 95vw !important;
+    margin: 20px !important;
+  }
+}
+
 /* Button Sizes */
 .mds-button--sm {
   padding: var(--mds-spacing-sm) var(--mds-spacing-md);
@@ -275,7 +327,7 @@
   font-size: var(--mds-typography-fontSize-4xl);
   line-height: var(--mds-typography-lineHeight-tight);
   letter-spacing: var(--mds-typography-letterSpacing-brand);
-  font-weight: var(--mds-typography-fontWeight-normal);
+  font-weight: var(--mds-typography-fontWeight-bold);
   color: var(--mds-color-text-primary);
 }
 
@@ -288,17 +340,59 @@
   font-family: var(--mds-typography-fontFamily-brand);
 }
 
+/* Brand Logo Size Variants - Consistent across all environments */
+.mds-brand-logo--sm {
+  font-size: 1.5rem;  /* 24px - Navbar size */
+  letter-spacing: -0.03rem;
+}
+
+.mds-brand-logo--md {
+  font-size: 2rem;    /* 32px - Medium contexts */
+  letter-spacing: -0.04rem;
+}
+
+.mds-brand-logo--lg {
+  font-size: 2.125rem; /* 34px - Landing/hero contexts */
+  letter-spacing: var(--mds-typography-letterSpacing-brand);
+}
+
+/* Navbar-specific brand logo - always consistent size */
+.navbar-brand-logo,
+.navbar__brand-logo,
+.login-brand-logo {
+  font-size: 1.5rem !important;
+  letter-spacing: -0.03rem !important;
+  font-weight: var(--mds-typography-fontWeight-bold) !important;
+  font-family: var(--mds-typography-fontFamily-brand) !important;
+  color: var(--mds-color-text-primary) !important;
+}
+
 /* Brand Logo Responsive */
 @media (max-width: 768px) {
   .mds-text--brand,
   .mds-brand-logo,
-  .mds-brand-logo--sm,
-  .mds-brand-logo--md,
-  .mds-brand-logo--lg,
   .logo-brand {
     font-size: 1.8rem;
     letter-spacing: var(--mds-typography-letterSpacing-tight);
   }
+
+  .mds-brand-logo--sm,
+  .navbar-brand-logo,
+  .navbar__brand-logo,
+  .login-brand-logo {
+    font-size: 1.25rem !important;
+    letter-spacing: -0.02rem !important;
+  }
+
+  .mds-brand-logo--md {
+    font-size: 1.5rem;
+    letter-spacing: -0.03rem;
+  }
+
+  .mds-brand-logo--lg {
+    font-size: 1.8rem;
+    letter-spacing: var(--mds-typography-letterSpacing-tight);
+  }
 }
 
 /* Glass Card - Enhanced styles (complementing base tokens.css) */
@@ -327,7 +421,1381 @@
   outline-offset: 2px;
 }
 
-/* Dark mode support (future) */
-@media (prefers-color-scheme: dark) {
-  /* Enhanced styles for dark mode when implemented */
-}
+/* Dashboard Components */
+
+/* Dashboard Action Controls */
+.mds-dashboard-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--mds-spacing-md);
+}
+
+/* Period Filter Dropdown */
+.mds-period-filter {
+  position: relative;
+  display: inline-block;
+}
+
+.mds-period-filter__select {
+  padding: var(--mds-spacing-sm) var(--mds-spacing-md);
+  font-weight: var(--mds-typography-fontWeight-medium);
+  font-size: var(--mds-typography-fontSize-sm);
+  font-family: var(--mds-typography-fontFamily-brand);
+  border-radius: var(--mds-spacing-borderRadius-md);
+  cursor: pointer;
+  outline: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  padding-right: 2rem;
+  min-width: 140px;
+  transition: var(--mds-effects-transition-normal);
+  
+  /* Theme-specific styles are applied via CSS custom properties */
+  background-color: var(--mds-dashboard-control-bg);
+  color: var(--mds-dashboard-control-color);
+  border: 1px solid var(--mds-dashboard-control-border);
+  background-image: var(--mds-dashboard-control-dropdown-icon);
+  background-position: right 8px center;
+  box-shadow: var(--mds-dashboard-control-shadow);
+}
+
+.mds-period-filter__select:hover:not(:disabled) {
+  background-color: var(--mds-dashboard-control-bg-hover);
+  box-shadow: var(--mds-dashboard-control-shadow-hover);
+}
+
+.mds-period-filter__select:disabled {
+  opacity: var(--mds-effects-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* Dropdown Options Styling - High specificity to override compat rules */
+select.mds-period-filter__select option {
+  background-color: var(--mds-dashboard-control-option-bg) !important;
+  color: var(--mds-dashboard-control-option-color) !important;
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm) !important;
+  -webkit-appearance: none !important;
+}
+
+select.mds-period-filter__select option:hover,
+select.mds-period-filter__select option:focus,
+select.mds-period-filter__select option:checked {
+  background-color: var(--mds-dashboard-control-option-bg-hover) !important;
+  color: var(--mds-dashboard-control-option-color-hover) !important;
+}
+
+/* Enhanced contrast for webkit-based browsers */
+select.mds-period-filter__select option:focus,
+select.mds-period-filter__select option:active,
+select.mds-period-filter__select option[selected] {
+  background-color: var(--mds-dashboard-control-option-bg-hover) !important;
+  color: var(--mds-dashboard-control-option-color-hover) !important;
+  font-weight: 500 !important;
+}
+
+/* Additional styling for browsers that support it */
+.mds-period-filter__select::-webkit-scrollbar {
+  width: 8px;
+}
+
+.mds-period-filter__select::-webkit-scrollbar-track {
+  background: var(--mds-dashboard-control-option-bg);
+}
+
+.mds-period-filter__select::-webkit-scrollbar-thumb {
+  background: var(--mds-dashboard-control-border);
+  border-radius: 4px;
+}
+
+.mds-period-filter__select::-webkit-scrollbar-thumb:hover {
+  background: var(--mds-dashboard-control-border-disabled);
+}
+
+/* =========================
+   Generic Dropdown/Select Component
+   ========================= */
+
+/* Generic dropdown container */
+.mds-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* Generic themed select - inherits dashboard control styling */
+.mds-select-themed {
+  padding: var(--mds-spacing-sm) var(--mds-spacing-md) !important;
+  font-weight: var(--mds-typography-fontWeight-medium) !important;
+  font-size: var(--mds-typography-fontSize-sm) !important;
+  font-family: var(--mds-typography-fontFamily-brand) !important;
+  border-radius: var(--mds-spacing-borderRadius-md) !important;
+  cursor: pointer !important;
+  outline: none !important;
+  -webkit-appearance: none !important;
+     -moz-appearance: none !important;
+          appearance: none !important;
+  background-repeat: no-repeat !important;
+  background-size: 16px !important;
+  padding-right: 2rem !important;
+  transition: var(--mds-effects-transition-normal) !important;
+
+  /* Theme-specific styles are applied via CSS custom properties */
+  background-color: var(--mds-dashboard-control-bg) !important;
+  color: var(--mds-dashboard-control-color) !important;
+  border: 1px solid var(--mds-dashboard-control-border) !important;
+  background-image: var(--mds-dashboard-control-dropdown-icon) !important;
+  background-position: right 8px center !important;
+  box-shadow: var(--mds-dashboard-control-shadow) !important;
+}
+
+.mds-select-themed:hover:not(:disabled) {
+  background-color: var(--mds-dashboard-control-bg-hover) !important;
+  box-shadow: var(--mds-dashboard-control-shadow-hover) !important;
+}
+
+.mds-select-themed:disabled {
+  opacity: var(--mds-effects-opacity-disabled) !important;
+  cursor: not-allowed !important;
+}
+
+/* Dropdown Options Styling - High specificity to override compat rules */
+select.mds-select-themed option {
+  background-color: var(--mds-dashboard-control-option-bg) !important;
+  color: var(--mds-dashboard-control-option-color) !important;
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm) !important;
+  -webkit-appearance: none !important;
+}
+
+select.mds-select-themed option:hover,
+select.mds-select-themed option:focus,
+select.mds-select-themed option:checked {
+  background-color: var(--mds-dashboard-control-option-bg-hover) !important;
+  color: var(--mds-dashboard-control-option-color-hover) !important;
+}
+
+/* Enhanced contrast for webkit-based browsers */
+select.mds-select-themed option:focus,
+select.mds-select-themed option:active,
+select.mds-select-themed option[selected] {
+  background-color: var(--mds-dashboard-control-option-bg-hover) !important;
+  color: var(--mds-dashboard-control-option-color-hover) !important;
+  font-weight: 500 !important;
+}
+
+/* Maximum specificity for geo dropdowns to ensure they always work */
+html .mds-dropdown select.mds-select-themed option {
+  background-color: var(--mds-dashboard-control-option-bg) !important;
+  color: var(--mds-dashboard-control-option-color) !important;
+}
+
+html .mds-dropdown select.mds-select-themed option:hover,
+html .mds-dropdown select.mds-select-themed option:focus,
+html .mds-dropdown select.mds-select-themed option:checked {
+  background-color: var(--mds-dashboard-control-option-bg-hover) !important;
+  color: var(--mds-dashboard-control-option-color-hover) !important;
+}
+
+/* Absolute specificity to override any browser or other CSS */
+html body .mds-dropdown select.mds-select-themed option,
+html body div .mds-dropdown select.mds-select-themed option {
+  background-color: var(--mds-dashboard-control-option-bg) !important;
+  color: var(--mds-dashboard-control-option-color) !important;
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm) !important;
+  font-size: var(--mds-typography-fontSize-sm) !important;
+  font-family: var(--mds-typography-fontFamily-brand) !important;
+}
+
+html body .mds-dropdown select.mds-select-themed option:hover,
+html body .mds-dropdown select.mds-select-themed option:focus,
+html body .mds-dropdown select.mds-select-themed option:checked,
+html body div .mds-dropdown select.mds-select-themed option:hover,
+html body div .mds-dropdown select.mds-select-themed option:focus,
+html body div .mds-dropdown select.mds-select-themed option:checked {
+  background-color: var(--mds-dashboard-control-option-bg-hover) !important;
+  color: var(--mds-dashboard-control-option-color-hover) !important;
+  font-weight: 500 !important;
+}
+
+/* Ultimate specificity safeguard for geo dropdowns */
+html body div.mds-dropdown select.mds-select-themed {
+  background-color: var(--mds-dashboard-control-bg) !important;
+  color: var(--mds-dashboard-control-color) !important;
+  border: 1px solid var(--mds-dashboard-control-border) !important;
+  background-image: var(--mds-dashboard-control-dropdown-icon) !important;
+  background-position: right 8px center !important;
+  background-repeat: no-repeat !important;
+  background-size: 16px !important;
+  padding-right: 2rem !important;
+}
+
+/* Additional styling for browsers that support it */
+.mds-select-themed::-webkit-scrollbar {
+  width: 8px;
+}
+
+.mds-select-themed::-webkit-scrollbar-track {
+  background: var(--mds-dashboard-control-option-bg);
+}
+
+.mds-select-themed::-webkit-scrollbar-thumb {
+  background: var(--mds-dashboard-control-border);
+  border-radius: 4px;
+}
+
+.mds-select-themed::-webkit-scrollbar-thumb:hover {
+  background: var(--mds-dashboard-control-border-disabled);
+}
+
+/* Compatibility alias - maps period filter to generic themed select */
+.mds-period-filter__select {
+  /* Copy all styles from .mds-select-themed for full compatibility */
+  padding: var(--mds-spacing-sm) var(--mds-spacing-md);
+  font-weight: var(--mds-typography-fontWeight-medium);
+  font-size: var(--mds-typography-fontSize-sm);
+  font-family: var(--mds-typography-fontFamily-brand);
+  border-radius: var(--mds-spacing-borderRadius-md);
+  cursor: pointer;
+  outline: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  padding-right: 2rem;
+  min-width: 140px;
+  transition: var(--mds-effects-transition-normal);
+
+  /* Theme-specific styles are applied via CSS custom properties */
+  background-color: var(--mds-dashboard-control-bg);
+  color: var(--mds-dashboard-control-color);
+  border: 1px solid var(--mds-dashboard-control-border);
+  background-image: var(--mds-dashboard-control-dropdown-icon);
+  background-position: right 8px center;
+  box-shadow: var(--mds-dashboard-control-shadow);
+}
+
+.mds-period-filter__select:hover:not(:disabled) {
+  background-color: var(--mds-dashboard-control-bg-hover);
+  box-shadow: var(--mds-dashboard-control-shadow-hover);
+}
+
+.mds-period-filter__select:disabled {
+  opacity: var(--mds-effects-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* Dashboard Refresh Button */
+.mds-dashboard-refresh {
+  padding: var(--mds-spacing-sm) var(--mds-spacing-md);
+  font-weight: var(--mds-typography-fontWeight-medium);
+  font-size: var(--mds-typography-fontSize-sm);
+  font-family: var(--mds-typography-fontFamily-brand);
+  border-radius: var(--mds-spacing-borderRadius-md);
+  cursor: pointer;
+  outline: none;
+  border: 1px solid var(--mds-dashboard-control-border);
+  transition: var(--mds-effects-transition-normal);
+  min-width: 140px;
+  width: 140px;
+  
+  /* Theme-specific styles */
+  background-color: var(--mds-dashboard-control-bg);
+  color: var(--mds-dashboard-control-color);
+  box-shadow: var(--mds-dashboard-control-shadow);
+}
+
+.mds-dashboard-refresh:hover:not(:disabled) {
+  background-color: var(--mds-dashboard-control-bg-hover);
+  transform: translateY(-2px);
+  box-shadow: var(--mds-dashboard-control-shadow-hover);
+}
+
+.mds-dashboard-refresh:disabled {
+  opacity: var(--mds-effects-opacity-disabled);
+  cursor: not-allowed;
+  background-color: transparent !important;
+  border: 2px solid var(--mds-dashboard-control-border-disabled);
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+/* Theme Support - Default (Dark Theme) */
+:root {
+  /* Dashboard Control Variables - Dark Theme (default) */
+  --mds-dashboard-control-bg: rgba(0, 0, 0, 0.35);
+  --mds-dashboard-control-bg-hover: rgba(0, 0, 0, 0.5);
+  --mds-dashboard-control-color: #ffffff;
+  --mds-dashboard-control-border: rgba(255, 255, 255, 0.18);
+  --mds-dashboard-control-border-disabled: rgba(255, 255, 255, 0.3);
+  --mds-dashboard-control-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --mds-dashboard-control-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --mds-dashboard-control-dropdown-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  
+  /* Dropdown Options - Dark Theme */
+  --mds-dashboard-control-option-bg: #2a2a2a;
+  --mds-dashboard-control-option-color: #ffffff;
+  --mds-dashboard-control-option-bg-hover: #505050;
+  --mds-dashboard-control-option-color-hover: #ffffff;
+  
+  /* Login specific variables - Dark Theme */
+  --mds-login-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
+  --mds-input-bg: rgba(255, 255, 255, 0.1);
+  --mds-input-focus-border: #aaaaaa;
+  --mds-input-focus-bg: rgba(255, 255, 255, 0.15);
+  --mds-input-focus-shadow: 0 4px 12px rgba(170, 170, 170, 0.2);
+  --mds-error-bg: rgba(200, 200, 200, 0.15);
+  --mds-error-border: rgba(200, 200, 200, 0.3);
+}
+
+/* Theme Toggle (square, themed) */
+.mds-theme-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--mds-theme-toggle-size, 2.5rem);
+  height: var(--mds-theme-toggle-size, 2.5rem);
+  min-width: var(--mds-theme-toggle-size, 2.5rem);
+  padding: 0;
+  border-radius: var(--mds-spacing-borderRadius-md);
+  border: 1px solid var(--mds-dashboard-control-border);
+  background-color: var(--mds-dashboard-control-bg);
+  color: var(--mds-dashboard-control-color);
+  box-shadow: var(--mds-dashboard-control-shadow);
+  cursor: pointer;
+  outline: none;
+  transition: var(--mds-effects-transition-normal);
+}
+
+/* Force dark background in dark theme */
+.mds-theme-toggle[data-theme="dark"] {
+  background-color: rgba(0, 0, 0, 0.35) !important;
+  border: 1px solid rgba(255, 255, 255, 0.18) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
+}
+
+.mds-theme-toggle:hover:not(:disabled) {
+  background-color: var(--mds-dashboard-control-bg-hover);
+  box-shadow: var(--mds-dashboard-control-shadow-hover);
+}
+
+/* Force dark hover in dark theme */
+.mds-theme-toggle[data-theme="dark"]:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+}
+
+.mds-theme-toggle:disabled {
+  opacity: var(--mds-effects-opacity-disabled);
+  cursor: not-allowed;
+  background-color: transparent !important;
+  border: 2px solid var(--mds-dashboard-control-border-disabled);
+  box-shadow: none !important;
+}
+
+.mds-theme-toggle--sm { --mds-theme-toggle-size: 2rem; }
+.mds-theme-toggle--md { --mds-theme-toggle-size: 2.5rem; }
+.mds-theme-toggle--lg { --mds-theme-toggle-size: 3rem; }
+
+/* Monochromatic theme toggle icons via CSS pseudo-elements */
+.mds-theme-toggle[data-theme="light"]::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 20px;
+  height: 20px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='%23000000'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.mds-theme-toggle[data-theme="dark"]::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 20px;
+  height: 20px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23ffffff'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+/* Light Theme Support */
+[data-theme="light"] {
+  --mds-dashboard-control-bg: rgba(0, 0, 0, 0.1);
+  --mds-dashboard-control-bg-hover: rgba(0, 0, 0, 0.15);
+  --mds-dashboard-control-color: #1a1a1a;
+  --mds-dashboard-control-border: rgba(0, 0, 0, 0.1);
+  --mds-dashboard-control-border-disabled: rgba(0, 0, 0, 0.3);
+  --mds-dashboard-control-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --mds-dashboard-control-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --mds-dashboard-control-dropdown-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  
+  /* Dropdown Options - Light Theme */
+  --mds-dashboard-control-option-bg: #ffffff;
+  --mds-dashboard-control-option-color: #1a1a1a;
+  --mds-dashboard-control-option-bg-hover: #f0f7ff;
+  --mds-dashboard-control-option-color-hover: #1a1a1a;
+  
+  /* Login specific variables - Light Theme */
+  --mds-login-bg: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 50%, #dcdcdc 100%);
+  --mds-input-bg: rgba(255, 255, 255, 0.8);
+  --mds-input-focus-border: #666666;
+  --mds-input-focus-bg: rgba(255, 255, 255, 1);
+  --mds-input-focus-shadow: 0 4px 12px rgba(102, 102, 102, 0.15);
+  --mds-error-bg: rgba(150, 150, 150, 0.1);
+  --mds-error-border: rgba(150, 150, 150, 0.3);
+}
+
+/* Form Input Styles */
+.mds-input {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: var(--mds-spacing-md) var(--mds-spacing-md);
+  font-family: var(--mds-typography-fontFamily-brand);
+  font-size: var(--mds-typography-fontSize-base);
+  font-weight: var(--mds-typography-fontWeight-normal);
+  line-height: var(--mds-typography-lineHeight-normal);
+  color: var(--mds-color-text-primary);
+  background-color: var(--mds-color-background-primary);
+  border: 2px solid var(--mds-color-border-medium);
+  border-radius: var(--mds-spacing-borderRadius-md);
+  outline: none;
+  transition: var(--mds-effects-transition-normal);
+}
+
+.mds-input:focus {
+  border-color: var(--mds-color-brand-primary);
+  box-shadow: 0 0 0 3px rgba(0, 111, 238, 0.1);
+}
+
+.mds-input:disabled {
+  opacity: var(--mds-effects-opacity-disabled);
+  cursor: not-allowed;
+  background-color: var(--mds-color-background-secondary);
+}
+
+.mds-input--error {
+  border-color: #dc2626;
+  background-color: #fef2f2;
+}
+
+.mds-input--error:focus {
+  border-color: #dc2626;
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+}
+
+/* Textarea specific styles */
+.mds-textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+/* Select specific styles */
+.mds-select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right var(--mds-spacing-md) center;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  padding-right: calc(var(--mds-spacing-md) + 24px);
+}
+
+.mds-select:disabled {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+}
+
+/* Select dropdown option styles for .mds-input - fixes Edge/Windows dropdown visibility */
+select.mds-input {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  color-scheme: dark; /* Forces OS to render dropdown with dark theme on Edge/Chrome Windows */
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right var(--mds-spacing-md) center;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  padding-right: calc(var(--mds-spacing-md) + 24px);
+  cursor: pointer;
+}
+
+select.mds-input:disabled {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  cursor: not-allowed;
+}
+
+select.mds-input option {
+  background-color: var(--mds-dashboard-control-option-bg) !important;
+  color: var(--mds-dashboard-control-option-color) !important;
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm) !important;
+}
+
+select.mds-input option:hover,
+select.mds-input option:focus,
+select.mds-input option:checked {
+  background-color: var(--mds-dashboard-control-option-bg-hover) !important;
+  color: var(--mds-dashboard-control-option-color-hover) !important;
+}
+
+/* Light theme override for select.mds-input */
+html[data-theme="light"] select.mds-input {
+  color-scheme: light;
+}
+
+/* ============================================
+   Custom Select Component (JavaScript-rendered dropdown)
+   Cross-browser compatible - works on Edge/Chrome Windows
+   ============================================ */
+
+/* Select Trigger Button */
+.mds-select-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  font-family: var(--mds-typography-fontFamily-brand, system-ui, sans-serif);
+  font-size: 0.95rem;
+  line-height: 1.5;
+  color: var(--mds-color-text-primary, #ffffff);
+  background-color: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: left;
+  outline: none;
+  overflow: hidden;
+}
+
+.mds-select-trigger:hover:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.25);
+}
+
+.mds-select-trigger:focus:not(:disabled) {
+  border-color: var(--mds-color-primary, #3b82f6);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
+}
+
+.mds-select-trigger--open {
+  border-color: var(--mds-color-primary, #3b82f6);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
+}
+
+.mds-select-trigger--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: rgba(255, 255, 255, 0.04);
+}
+
+.mds-select-trigger--loading {
+  cursor: wait;
+}
+
+.mds-select-trigger--error {
+  border-color: var(--mds-color-error, #ef4444);
+}
+
+.mds-select-trigger--error:focus {
+  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
+}
+
+.mds-select-trigger--full-width {
+  width: 100%;
+}
+
+/* Select Trigger Value */
+.mds-select-trigger__value {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mds-select-trigger__placeholder {
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+}
+
+/* Select Trigger Icon */
+.mds-select-trigger__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+  transition: transform 0.2s ease;
+}
+
+.mds-select-trigger--open .mds-select-trigger__icon {
+  transform: rotate(180deg);
+}
+
+.mds-select-chevron {
+  width: 16px;
+  height: 16px;
+}
+
+.mds-select-spinner {
+  width: 16px;
+  height: 16px;
+  animation: mds-select-spin 1s linear infinite;
+}
+
+@keyframes mds-select-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Select Dropdown */
+.mds-select-dropdown {
+  background-color: var(--mds-dashboard-control-option-bg, #2a2a2a);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  animation: mds-select-dropdown-enter 0.15s ease-out;
+}
+
+@keyframes mds-select-dropdown-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Select Search */
+.mds-select-search {
+  position: relative;
+  padding: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.mds-select-search__input {
+  width: 100%;
+  padding: 8px 12px 8px 36px;
+  font-family: var(--mds-typography-fontFamily-brand, system-ui, sans-serif);
+  font-size: 0.9rem;
+  color: var(--mds-color-text-primary, #ffffff);
+  background-color: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 6px;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.mds-select-search__input:focus {
+  border-color: var(--mds-color-primary, #3b82f6);
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.mds-select-search__input::-moz-placeholder {
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+}
+
+.mds-select-search__input::placeholder {
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+}
+
+.mds-select-search__icon {
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+  pointer-events: none;
+}
+
+/* Select Options List */
+.mds-select-options {
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+  overflow-y: auto;
+  max-height: inherit;
+}
+
+/* Select Option */
+.mds-select-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 12px;
+  font-size: 0.95rem;
+  color: var(--mds-dashboard-control-option-color, #ffffff);
+  background-color: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.mds-select-option:hover,
+.mds-select-option--highlighted {
+  background-color: var(--mds-dashboard-control-option-bg-hover, #505050);
+}
+
+.mds-select-option--selected {
+  color: var(--mds-color-primary, #3b82f6);
+  font-weight: 500;
+}
+
+.mds-select-option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mds-select-option--disabled:hover {
+  background-color: transparent;
+}
+
+.mds-select-option--empty {
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+  font-style: italic;
+  cursor: default;
+}
+
+.mds-select-option--empty:hover {
+  background-color: transparent;
+}
+
+.mds-select-option__label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mds-select-option__check {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--mds-color-primary, #3b82f6);
+}
+
+/* Select Size Variants */
+.mds-select--sm .mds-select-trigger {
+  padding: 6px 10px;
+  font-size: 0.85rem;
+}
+
+.mds-select--sm .mds-select-option {
+  padding: 6px 10px;
+  font-size: 0.85rem;
+}
+
+.mds-select--lg .mds-select-trigger {
+  padding: 14px 16px;
+  font-size: 1.05rem;
+}
+
+.mds-select--lg .mds-select-option {
+  padding: 12px 16px;
+  font-size: 1.05rem;
+}
+
+/* Light Theme Overrides */
+html[data-theme="light"] .mds-select-trigger {
+  color: var(--mds-color-text-primary, #1a1a1a);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.15);
+}
+
+html[data-theme="light"] .mds-select-trigger:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.08);
+  border-color: rgba(0, 0, 0, 0.25);
+}
+
+html[data-theme="light"] .mds-select-trigger__placeholder {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+html[data-theme="light"] .mds-select-trigger__icon {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+html[data-theme="light"] .mds-select-dropdown {
+  background-color: var(--mds-dashboard-control-option-bg, #ffffff);
+  border-color: rgba(0, 0, 0, 0.15);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="light"] .mds-select-search {
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="light"] .mds-select-search__input {
+  color: var(--mds-color-text-primary, #1a1a1a);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.15);
+}
+
+html[data-theme="light"] .mds-select-search__input:focus {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+html[data-theme="light"] .mds-select-search__input::-moz-placeholder {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+html[data-theme="light"] .mds-select-search__input::placeholder {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+html[data-theme="light"] .mds-select-search__icon {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+html[data-theme="light"] .mds-select-option {
+  color: var(--mds-dashboard-control-option-color, #1a1a1a);
+}
+
+html[data-theme="light"] .mds-select-option:hover,
+html[data-theme="light"] .mds-select-option--highlighted {
+  background-color: var(--mds-dashboard-control-option-bg-hover, #f0f7ff);
+}
+
+html[data-theme="light"] .mds-select-option--empty {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+/* Label styles */
+.mds-label {
+  display: block;
+  font-family: var(--mds-typography-fontFamily-brand);
+  font-size: var(--mds-typography-fontSize-sm);
+  font-weight: var(--mds-typography-fontWeight-medium);
+  color: var(--mds-color-text-primary);
+  margin-bottom: var(--mds-spacing-xs);
+}
+
+.mds-label--required::after {
+  content: " *";
+  color: #dc2626;
+}
+
+/* Field group */
+.mds-field {
+  margin-bottom: var(--mds-spacing-lg);
+}
+
+.mds-field-error {
+  display: block;
+  font-family: var(--mds-typography-fontFamily-brand);
+  font-size: var(--mds-typography-fontSize-sm);
+  color: #dc2626;
+  margin-top: var(--mds-spacing-xs);
+}
+
+.mds-field-help {
+  display: block;
+  font-family: var(--mds-typography-fontFamily-brand);
+  font-size: var(--mds-typography-fontSize-sm);
+  color: var(--mds-color-text-secondary);
+  margin-top: var(--mds-spacing-xs);
+}
+
+/* Dashboard Layout Utilities */
+.mds-dashboard-grid {
+  display: grid;
+  gap: var(--mds-spacing-xl);
+}
+
+.mds-dashboard-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--mds-spacing-lg);
+}
+
+.mds-dashboard-charts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: var(--mds-spacing-lg);
+}
+
+/* Dashboard Content Sections */
+.mds-dashboard-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mds-spacing-xl);
+}
+
+/* ========================================
+   Layout Utility Classes - @back optimization
+   ======================================== */
+
+/* Flexbox utilities */
+.mds-flex {
+  display: flex;
+}
+
+.mds-flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.mds-flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mds-flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.mds-flex-start {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.mds-flex-end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+/* Spacing utilities */
+.mds-gap-xs { gap: var(--mds-spacing-xs); }
+.mds-gap-sm { gap: var(--mds-spacing-sm); }
+.mds-gap-md { gap: var(--mds-spacing-md); }
+.mds-gap-lg { gap: var(--mds-spacing-lg); }
+.mds-gap-xl { gap: var(--mds-spacing-xl); }
+
+/* Padding utilities */
+.mds-p-xs { padding: var(--mds-spacing-xs); }
+.mds-p-sm { padding: var(--mds-spacing-sm); }
+.mds-p-md { padding: var(--mds-spacing-md); }
+.mds-p-lg { padding: var(--mds-spacing-lg); }
+.mds-p-xl { padding: var(--mds-spacing-xl); }
+
+/* Margin utilities */
+.mds-m-xs { margin: var(--mds-spacing-xs); }
+.mds-m-sm { margin: var(--mds-spacing-sm); }
+.mds-m-md { margin: var(--mds-spacing-md); }
+.mds-m-lg { margin: var(--mds-spacing-lg); }
+.mds-m-xl { margin: var(--mds-spacing-xl); }
+
+/* Margin bottom utilities */
+.mds-mb-xs { margin-bottom: var(--mds-spacing-xs); }
+.mds-mb-sm { margin-bottom: var(--mds-spacing-sm); }
+.mds-mb-md { margin-bottom: var(--mds-spacing-md); }
+.mds-mb-lg { margin-bottom: var(--mds-spacing-lg); }
+.mds-mb-xl { margin-bottom: var(--mds-spacing-xl); }
+
+/* ========================================
+   Dashboard Layout Classes - @back optimization
+   ======================================== */
+
+/* Dashboard container */
+.mds-dashboard-container {
+  display: flex;
+  min-height: 100vh;
+  font-family: var(--mds-typography-fontFamily-brand);
+  transition: all 0.3s ease;
+  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  color: #ffffff;
+}
+
+/* Light theme dashboard container */
+html[data-theme="light"] .mds-dashboard-container {
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
+  color: #1a1a1a;
+}
+
+/* Dashboard main content */
+.mds-dashboard-main {
+  flex: 1;
+  margin-left: 260px;
+  margin-top: 60px;
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - 60px);
+}
+
+/* Page header */
+.mds-page-header {
+  padding: var(--mds-spacing-lg) var(--mds-spacing-xl) var(--mds-spacing-md) var(--mds-spacing-xl);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+/* Dark theme page header */
+html[data-theme="dark"] .mds-page-header {
+  background-color: rgba(30, 41, 59, 0.4);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Light theme page header */
+html[data-theme="light"] .mds-page-header {
+  background-color: rgba(255, 255, 255, 0.7);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+/* Page title */
+.mds-page-title {
+  margin: 0 0 var(--mds-spacing-xs) 0;
+  font-size: var(--mds-typography-fontSize-xl);
+  font-weight: var(--mds-typography-fontWeight-semibold);
+  color: var(--mds-colors-color-text-primary);
+}
+
+/* Page description */
+.mds-page-description {
+  margin: 0;
+  font-size: var(--mds-typography-fontSize-sm);
+  color: var(--mds-colors-color-text-secondary);
+  line-height: var(--mds-typography-lineHeight-normal);
+}
+
+/* Main content area */
+.mds-main-content {
+  flex: 1;
+  padding: var(--mds-spacing-xl);
+  overflow-y: auto;
+  position: relative;
+}
+
+/* ========================================
+   Navbar Classes - @back optimization
+   ======================================== */
+
+/* Fixed navbar */
+.mds-navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  z-index: 1000;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  font-family: var(--mds-typography-fontFamily-brand);
+}
+
+/* Dark theme navbar */
+html[data-theme="dark"] .mds-navbar {
+  background-color: rgba(30, 41, 59, 0.95);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Light theme navbar */
+html[data-theme="light"] .mds-navbar {
+  background-color: rgba(255, 255, 255, 0.95);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* Navbar content container */
+.mds-navbar-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  max-width: 100%;
+}
+
+/* Navbar brand section */
+.mds-navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--mds-spacing-md);
+}
+
+/* Navbar actions section */
+.mds-navbar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--mds-spacing-md);
+}
+
+/* User info in navbar */
+.mds-navbar-user {
+  font-size: var(--mds-typography-fontSize-sm);
+  color: var(--mds-colors-color-text-secondary);
+  margin-right: var(--mds-spacing-sm);
+}
+
+/* Sidebar-width brand section */
+.mds-navbar-brand-section {
+  width: 260px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Center user info section */
+.mds-navbar-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+/* User info badge */
+.mds-navbar-user-badge {
+  display: flex;
+  align-items: center;
+  gap: var(--mds-spacing-sm);
+  font-size: var(--mds-typography-fontSize-sm);
+  padding: var(--mds-spacing-sm) var(--mds-spacing-md);
+  border-radius: 20px;
+  border: 1px solid;
+  font-weight: var(--mds-typography-fontWeight-medium);
+}
+
+/* Dark theme user badge */
+html[data-theme="dark"] .mds-navbar-user-badge {
+  color: #888;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Light theme user badge */
+html[data-theme="light"] .mds-navbar-user-badge {
+  color: #666;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+/* User badge elements */
+.mds-navbar-user-badge .user-name {
+  font-weight: var(--mds-typography-fontWeight-medium);
+}
+
+.mds-navbar-user-badge .user-separator {
+  opacity: 0.7;
+}
+
+.mds-navbar-user-badge .user-email {
+  opacity: 0.8;
+}
+
+/* Dark mode support (future) */
+@media (prefers-color-scheme: dark) {
+  /* Enhanced styles for dark mode when implemented */
+}
+
+/* ========================================
+   DataTable Component Styles
+   ======================================== */
+
+/* DataTable Base Styles */
+.data-table {
+  position: relative;
+  border-radius: 24px;
+  backdrop-filter: blur(24px);
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  font-family: var(--mds-typography-fontFamily-brand);
+}
+
+/* Loading Animation */
+.data-table-spinner {
+  width: 32px;
+  height: 32px;
+  border: 2px solid transparent;
+  border-top: 2px solid white;
+  border-radius: 50%;
+  animation: mds-spin 1s linear infinite;
+}
+
+/* Responsive Breakpoints */
+@media (max-width: 768px) {
+  .data-table[role="table"] {
+    display: block !important;
+  }
+
+  .data-table .table-header {
+    display: none !important;
+  }
+
+  .data-table .table-body {
+    display: block !important;
+  }
+
+  .data-table .table-row {
+    display: block !important;
+    border: 1px solid var(--mds-color-border-medium) !important;
+    border-radius: 12px !important;
+    margin-bottom: 16px !important;
+    padding: 16px !important;
+    background: rgba(255, 255, 255, 0.05) !important;
+  }
+
+  .data-table .table-cell {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    padding: 8px 0 !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+  }
+
+  .data-table .table-cell:last-child {
+    border-bottom: none !important;
+    justify-content: center !important;
+    margin-top: 12px !important;
+  }
+
+  .data-table .table-cell::before {
+    content: attr(data-label) !important;
+    font-weight: var(--mds-typography-fontWeight-medium) !important;
+    color: var(--mds-color-text-secondary) !important;
+    font-size: var(--mds-typography-fontSize-xs) !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+    min-width: 100px !important;
+  }
+
+  .data-table .table-actions {
+    flex-direction: column !important;
+    gap: var(--mds-spacing-sm) !important;
+  }
+
+  .data-table .table-actions button {
+    width: 100% !important;
+    justify-content: center !important;
+  }
+}
+
+/* Tablet Breakpoint */
+@media (max-width: 1024px) and (min-width: 769px) {
+  .data-table .table-row {
+    font-size: var(--mds-typography-fontSize-sm) !important;
+  }
+
+  .data-table .table-cell {
+    padding: var(--mds-spacing-sm) var(--mds-spacing-md) !important;
+  }
+
+  .data-table .table-actions button {
+    padding: var(--mds-spacing-xs) var(--mds-spacing-sm) !important;
+    font-size: var(--mds-typography-fontSize-xs) !important;
+  }
+}
+
+/* Utility Classes */
+.data-table-compact .table-cell {
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm) !important;
+}
+
+.data-table-audit .table-row {
+  border-left: 3px solid transparent;
+}
+
+.data-table-audit .table-row[data-action="CREATE"] {
+  border-left-color: rgba(34, 197, 94, 0.5);
+}
+
+.data-table-audit .table-row[data-action="UPDATE"] {
+  border-left-color: rgba(59, 130, 246, 0.5);
+}
+
+.data-table-audit .table-row[data-action="DELETE"] {
+  border-left-color: rgba(239, 68, 68, 0.5);
+}
+
+/* Scrollbar Styling */
+.data-table .table-body::-webkit-scrollbar {
+  width: 8px;
+}
+
+.data-table .table-body::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+}
+
+.data-table .table-body::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+.data-table .table-body::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* Badge and Chip Styles */
+.data-table-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 16px;
+  font-size: var(--mds-typography-fontSize-xs);
+  font-weight: var(--mds-typography-fontWeight-medium);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  white-space: nowrap;
+}
+
+.data-table-badge.primary {
+  background-color: rgba(59, 130, 246, 0.2);
+  border-color: rgba(59, 130, 246, 0.3);
+  color: #3b82f6;
+}
+
+.data-table-badge.success {
+  background-color: rgba(34, 197, 94, 0.2);
+  border-color: rgba(34, 197, 94, 0.3);
+  color: #22c55e;
+}
+
+.data-table-badge.warning {
+  background-color: rgba(234, 179, 8, 0.2);
+  border-color: rgba(234, 179, 8, 0.3);
+  color: #eab308;
+}
+
+.data-table-badge.danger {
+  background-color: rgba(239, 68, 68, 0.2);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: #ef4444;
+}
+
+.data-table-badge.info {
+  background-color: rgba(147, 51, 234, 0.2);
+  border-color: rgba(147, 51, 234, 0.3);
+  color: #9333ea;
+}
+
+/* Code/Monospace Cell Styling */
+.data-table-code {
+  font-family: 'Courier New', monospace;
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 4px 12px;
+  border-radius: 8px;
+  display: inline-block;
+  font-size: var(--mds-typography-fontSize-sm);
+  word-break: break-all;
+}