@metropolle/design-system 1.0.0-beta.2 → 1.0.0-beta.2025.10.2.18.1677567

package/dist/css/components.css

@@ -42,6 +42,178 @@
   width: 100%;
 }
 
+/* =========================
+   Modal Styles
+   ========================= */
+
+/* Modal overlay styles */
+.mds-modal-overlay,
+.modal-overlay {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  background-color: transparent !important;
+  backdrop-filter: blur(4px) !important;
+  z-index: 9999 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* Modal card styles - Liquid Glass Effect */
+.mds-modal-overlay .mds-modal-card,
+.modal-overlay .mds-modal-card {
+  background: rgba(255, 255, 255, 0.3) !important;
+  backdrop-filter: blur(20px) !important;
+  -webkit-backdrop-filter: blur(20px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.4) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.2) !important,
+    0 0 0 1px rgba(255, 255, 255, 0.2) !important,
+    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
+  color: var(--text-primary) !important;
+  min-width: 320px !important;
+  max-width: 600px !important;
+  width: 90vw !important;
+  border-radius: 16px !important;
+  position: relative !important;
+  overflow: hidden !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  transform: translate(0, 0) !important;
+}
+
+/* Inner glow effect */
+.mds-modal-overlay .mds-modal-card::before,
+.modal-overlay .mds-modal-card::before {
+  content: '' !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0.05) 50%,
+    rgba(255, 255, 255, 0.02) 100%
+  ) !important;
+  border-radius: 16px !important;
+  pointer-events: none !important;
+  z-index: -1 !important;
+}
+
+/* Border glow */
+.mds-modal-overlay .mds-modal-card::after,
+.modal-overlay .mds-modal-card::after {
+  content: '' !important;
+  position: absolute !important;
+  top: -1px !important;
+  left: -1px !important;
+  right: -1px !important;
+  bottom: -1px !important;
+  background: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.3),
+    rgba(255, 255, 255, 0.1),
+    rgba(255, 255, 255, 0.05),
+    rgba(255, 255, 255, 0.1),
+    rgba(255, 255, 255, 0.3)
+  ) !important;
+  border-radius: 16px !important;
+  z-index: -2 !important;
+  opacity: 0.6 !important;
+  animation: mdsLiquidBorder 3s ease-in-out infinite !important;
+}
+
+@keyframes mdsLiquidBorder {
+  0%, 100% { opacity: 0.6; transform: scale(1); }
+  50% { opacity: 0.8; transform: scale(1.02); }
+}
+
+/* No hover lift or color change */
+.mds-modal-overlay .mds-modal-card,
+.mds-modal-overlay .mds-modal-card:hover,
+.modal-overlay .mds-modal-card,
+.modal-overlay .mds-modal-card:hover {
+  transform: none !important;
+}
+.mds-modal-overlay .mds-modal-card:hover::after,
+.modal-overlay .mds-modal-card:hover::after {
+  opacity: 0.6 !important;
+  animation-duration: 3s !important;
+}
+
+/* Light theme */
+html[data-theme="light"] .mds-modal-overlay .mds-modal-card,
+html[data-theme="light"] .modal-overlay .mds-modal-card {
+  background: rgba(255, 255, 255, 0.35) !important;
+  border: 1px solid rgba(255, 255, 255, 0.5) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.15) !important,
+    0 0 0 1px rgba(255, 255, 255, 0.3) !important,
+    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
+}
+
+/* Dark theme */
+html[data-theme="dark"] .mds-modal-overlay .mds-modal-card,
+html:not([data-theme]) .mds-modal-overlay .mds-modal-card,
+html[data-theme="dark"] .modal-overlay .mds-modal-card,
+html:not([data-theme]) .modal-overlay .mds-modal-card {
+  background: rgba(30, 41, 59, 0.5) !important;
+  border: 1px solid rgba(255, 255, 255, 0.35) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.5) !important,
+    0 0 0 1px rgba(255, 255, 255, 0.25) !important,
+    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
+}
+
+/* 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 +447,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);
 }
 
@@ -327,7 +499,1015 @@
   outline-offset: 2px;
 }
 
+/* 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");
+}
+
+/* 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;
+}