@metropolle/design-system 1.2025.1-2.5.1903 → 1.2026.0-1.2.1231

package/dist/css/components.css

@@ -44,131 +44,11 @@
 
 /* =========================
    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.
    ========================= */
 
-/* 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 */
@@ -460,17 +340,59 @@ html:not([data-theme]) .modal-overlay .mds-modal-card {
   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) */
@@ -994,6 +916,372 @@ html body div.mds-dropdown select.mds-select-themed {
   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;