@j2-health/design-system 0.2.0 → 0.2.1

package/dist/style.css

@@ -336,190 +336,141 @@
     }
   }
 }
-._j2Popover_1egkj_1 {
-  .ant-popover-inner {
-    padding: var(--j2-padding-lg);
-  }
-
-  &._smallPadding_1egkj_6,
-  &._smPadding_1egkj_7 .ant-popover-inner {
-    padding: var(--j2-padding-sm);
-  }
-
-  &._xxsPadding_1egkj_11 .ant-popover-inner {
-    padding: var(--j2-padding-xxs);
-  }
-
-  &._xsPadding_1egkj_15 .ant-popover-inner {
-    padding: var(--j2-padding-xs);
-  }
-
-  &._mdPadding_1egkj_19 .ant-popover-inner {
-    padding: var(--j2-padding-md);
-  }
-
-  &._xlPadding_1egkj_23 .ant-popover-inner {
-    padding: var(--j2-padding-xl);
-  }
-
-  .ant-popover-title {
-    font-size: var(--j2-font-size-heading-4);
-    font-weight: var(--j2-font-weight-strong);
-    line-height: var(--j2-line-height-heading-4);
-  }
+/* Main container */
+._navContainer_1eoor_2 {
+  width: 186px;
+  height: 100vh;
+  background-color: #efefef;
+  border-right: 1px solid #e1e1e1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  font-family: 'Roboto', sans-serif;
 }
 
-._popoverHeader_1egkj_34 {
-  box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);
-  border-radius: var(--j2-border-radius) var(--j2-border-radius) 0 0;
-  font-weight: bold;
+/* Logo section */
+._logoSection_1eoor_14 {
+  padding: 24px 0;
 }
 
-._scrollable_1egkj_40 {
-  .ant-popover-inner {
-    padding: 0;
-  }
-
-  .ant-popover-title {
-    top: 0;
-    z-index: 10;
-    position: sticky;
-    margin-bottom: 0;
-    background: white;
-    padding: var(--j2-padding-sm);
-    box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);
-    font-size: var(--j2-font-size);
-    border-radius: var(--j2-border-radius) var(--j2-border-radius) 0 0;
-  }
-
-  .ant-popover-inner-content {
-    padding: var(--j2-padding-sm) var(--j2-padding-sm) var(--j2-padding-sm)
-      var(--j2-padding-sm);
-    overflow: auto;
-    max-height: 295px;
-  }
-}
-._categoryName_jejns_1 {
-  color: var(--j2-color-text-secondary);
-}
-._j2Menu_11mko_1 .ant-menu-submenu-selected .ant-menu-submenu-title {
-  color: inherit;
+._logoContainer_1eoor_18 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 10px;
 }
 
-._j2Menu_11mko_1 .ant-menu-item-divider {
-  margin: 0 12px;
+._logoLink_1eoor_25 {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  cursor: pointer;
 }
 
-._j2Menu_11mko_1.ant-menu-light.ant-menu-root.ant-menu-inline,
-._j2Menu_11mko_1.ant-menu-light.ant-menu-root.ant-menu-vertical {
-  border-inline-end: none;
-  border-right: none;
+._logo_1eoor_14 {
+  height: var(--logo-size, 64px);
+  width: auto; /* Maintains aspect ratio */
+  max-width: 100%;
 }
 
-._j2Menu_11mko_1._compact_11mko_15 {
-  .ant-menu-submenu-selected .ant-menu-submenu-title {
-    color: #ffffff;
-    background-color: var(--j2-color-primary-active);
+/* Responsive sizing */
+@media (max-width: 768px) {
+  ._logo_1eoor_14 {
+    width: 60px;
   }
+}
 
-  .ant-menu-item-icon {
-    margin-left: -2px !important;
-  }
+/* Navigation content */
+._navContent_1eoor_46 {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
-.ant-menu-item-icon {
-  vertical-align: middle !important;
+._navSection_1eoor_54 {
+  border-bottom: 1px solid #e1e1e1;
+  padding: 8px 0;
 }
-._messageIcon_1k9xp_1 {
-  margin-right: 0.5rem;
+
+._sectionHeader_1eoor_59 {
+  padding: 8px 0;
 }
-/* Modal Component Styling */
-.j2-modal .ant-modal-content {
-  background: var(--j2-color-bg-elevated);
-  border-radius: var(--j2-border-radius-lg);
-  padding: 0;
-  overflow: hidden;
+
+._sectionTitle_1eoor_63 {
+  font-family: 'Roboto', sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 1px;
+  color: rgba(0, 0, 0, 0.87);
+  padding: 0 16px;
+  text-transform: uppercase;
 }
 
-/* Header styling */
-.j2-modal .ant-modal-header {
-  background: transparent;
-  border-bottom: none;
-  padding: var(--j2-padding-md) var(--j2-padding-content-horizontal-lg)
-    var(--j2-padding-xs) var(--j2-padding-content-horizontal-lg);
-  margin: 0;
-  box-shadow:
-    0px 1px 2px 0px rgba(0, 0, 0, 0.03),
-    0px 1px 6px -1px rgba(0, 0, 0, 0.02),
-    0px 2px 4px 0px rgba(0, 0, 0, 0.02);
+._sectionItems_1eoor_73 {
+  display: flex;
+  flex-direction: column;
 }
 
-.j2-modal .ant-modal-title {
-  font-family: var(--j2-font-family);
-  font-weight: var(--j2-font-weight-strong);
-  font-size: var(--j2-font-size-lg);
-  line-height: var(--j2-line-height-lg);
-  color: var(--j2-color-text-heading);
-  margin: 0;
+/* Navigation items */
+._navItem_1eoor_79 {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  transition: background-color 0.2s ease;
+  min-height: 40px;
 }
 
-/* Icon modal specific header styling */
-.j2-modal-with-icon .ant-modal-header {
-  padding: var(--j2-padding-md) var(--j2-padding-content-horizontal-lg) 0
-    var(--j2-padding-content-horizontal-lg);
+._navItem_1eoor_79:hover {
+  background-color: rgba(0, 0, 0, 0.04);
 }
 
-/* Close button styling */
-.j2-modal .ant-modal-close {
-  top: var(--j2-padding);
-  right: var(--j2-padding-md);
-  width: 22px;
-  height: 22px;
-  color: var(--j2-color-icon);
+._navItem_1eoor_79._active_1eoor_96 {
+  background-color: #dfe5ed;
 }
 
-.j2-modal .ant-modal-close-x {
+._navItemIcon_1eoor_100 {
+  width: 32px;
+  height: 24px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  font-size: 16px;
-  color: var(--j2-color-icon);
+  justify-content: flex-start;
+  margin-right: 0;
+  color: rgba(0, 0, 0, 0.87);
 }
 
-/* Body styling */
-.j2-modal .ant-modal-body {
-  font-family: var(--j2-font-family);
-  font-weight: var(--j2-font-weight-normal);
-  font-size: var(--j2-font-size);
-  line-height: var(--j2-line-height);
-  color: var(--j2-color-text);
+._navItemIcon_1eoor_100 svg {
+  width: 24px;
+  height: 24px;
 }
 
-/* Footer styling */
-.j2-modal .ant-modal-footer {
-  background: transparent;
-  border-top: none;
-  padding: 0 var(--j2-padding-content-horizontal-lg) var(--j2-padding-md)
-    var(--j2-padding-content-horizontal-lg);
-  margin: 0;
-  text-align: right;
+._navItemLabel_1eoor_115 {
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  letter-spacing: 0.15px;
+  line-height: 1.5;
+  flex: 1;
+  padding: 4px 0;
 }
 
-/* Backdrop/mask styling */
-.j2-modal .ant-modal-mask {
-  background: var(--j2-color-bg-mask);
-}
-._navMenuContainer_1ul3o_1 {
+/* Legacy collapsed state support */
+._navMenuContainer_1eoor_127 {
   height: 100vh;
   display: inline-block;
 
-  &._collapsed_1ul3o_5 {
+  &._collapsed_1eoor_131 {
     width: 80px;
 
-    ._headerContainer_1ul3o_8 {
-      ._logo_1ul3o_9 {
+    ._headerContainer_1eoor_134 {
+      ._logo_1eoor_14 {
         display: block;
       }
 
@@ -528,7 +479,7 @@
       }
 
       &:hover {
-        ._logo_1ul3o_9 {
+        ._logo_1eoor_14 {
           display: none;
         }
 
@@ -539,262 +490,462 @@
     }
   }
 }
-.ant-notification-notice-message {
-  font-size: var(--j2-font-size-lg);
-  font-weight: var(--j2-font-weight-strong);
-  line-height: var(--j2-line-height-lg);
-  color: var(--j2-color-text-heading);
+/* User section */
+._userSection_r06sp_2 {
+  padding: 12px 0;
+  border-top: none;
 }
 
-.ant-notification-notice-description {
-  font-size: var(--j2-font-size);
-  line-height: var(--j2-line-height);
-  color: var(--j2-color-text);
+._userProfile_r06sp_7 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  transition: background-color 0.2s ease;
 }
 
-._messageOnly_1pxqk_14 {
-  .ant-notification-notice-message {
-    font-weight: var(--j2-font-weight-normal);
-  }
-  .ant-notification-notice-message {
-    margin-bottom: 0 !important;
-  }
-}
-._modalTitleWithIcon_5g0kf_1 {
-  display: flex;
-  gap: var(--j2-padding-sm);
-  align-items: flex-start;
+._userProfile_r06sp_7:hover {
+  background-color: rgba(0, 0, 0, 0.04);
 }
 
-._modalIcon_5g0kf_7 {
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
+._userAvatar_r06sp_24 {
+  width: 32px;
+  height: 32px;
+  background-color: #ab47bc;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: #ffffff;
+  font-family: 'Rubik', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
 }
 
-._modalTitleContent_5g0kf_16 {
-  flex: 1;
-  min-width: 0;
-}
-
-._modalTitleText_5g0kf_21 {
-  font-family: var(--j2-font-family);
-  font-weight: var(--j2-font-weight-strong);
-  font-size: var(--j2-font-size-lg);
-  line-height: var(--j2-line-height-lg);
-  color: var(--j2-color-text-heading);
-  margin: 0;
-}
-
-._modalContentWithIcon_5g0kf_30 {
-  margin-left: calc(24px + var(--j2-padding-sm));
-}
-.ant-pagination {
-  gap: var(--j2-margin-xs);
+._avatarImage_r06sp_38 {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
-.ant-pagination li:not(.ant-pagination-total-text) {
-  margin-inline-end: 0 !important;
+._userName_r06sp_44 {
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  letter-spacing: 0.15px;
+  line-height: 1.5;
+  width: 96px;
 }
 
-.ant-pagination-item-active {
-  background-color: var(--j2-blue-9) !important;
+/* Popover styles */
+._popover_r06sp_55 {
+  position: absolute;
+  left: 186px; /* Position to the right of the nav */
+  bottom: 0;
+  width: 280px;
+  background: white;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  overflow: hidden;
 }
 
-.ant-pagination-item-active a {
-  color: white !important;
+._popoverHeader_r06sp_67 {
+  padding: 16px 20px 12px;
+  font-family: 'Roboto', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.ant-pagination-prev button,
-.ant-pagination-next button {
-  padding: 0;
+._popoverUserInfo_r06sp_78 {
   display: flex;
   align-items: center;
-  justify-content: center;
-}
-
-.ant-pagination-prev button:hover,
-.ant-pagination-next button:hover {
-  background-color: var(--j2-color-bg-text-hover) !important;
-}
-
-.ant-pagination-disabled button,
-.ant-pagination-disabled button:hover {
-  cursor: not-allowed;
-  background-color: transparent !important;
-  pointer-events: none;
-}
-
-.ant-pagination-disabled button svg {
-  color: var(--j2-color-text-disabled) !important;
+  gap: 12px;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-._jump-button_bwjnt_41 {
-  padding: 0;
+._popoverAvatar_r06sp_86 {
+  width: 40px;
+  height: 40px;
+  background-color: #ab47bc;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: #ffffff;
+  font-family: 'Rubik', sans-serif;
+  font-size: 18px;
+  font-weight: 400;
 }
 
-.ant-pagination-options {
-  display: flex !important;
-  align-items: center !important;
-  gap: var(--j2-margin-xs);
-  margin-inline-start: 0 !important;
+._popoverAvatar_r06sp_86 ._avatarImage_r06sp_38 {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
-.ant-pagination-total-text {
-  color: var(--j2-color-text);
-  margin-inline-end: var(--j2-margin-xs) !important;
+._popoverUserName_r06sp_105 {
+  font-family: 'Roboto', sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  letter-spacing: 0.15px;
 }
 
-.ant-pagination-options-quick-jumper {
-  display: flex !important;
-  align-items: center !important;
+._popoverActions_r06sp_113 {
+  padding: 8px 16px;
+  display: flex;
 }
 
-.ant-pagination:not(.ant-pagination-mini) .ant-pagination-options-quick-jumper {
-  gap: var(--j2-margin-xs);
+/* Base button styles for all popover buttons */
+._popoverActions_r06sp_113 button {
+  flex: 1;
+  padding: 5px 15px;
+  color: #2196f3;
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
 }
 
-.ant-pagination-options-quick-jumper input {
-  margin: 0px !important;
+._popoverActions_r06sp_113 button:hover {
+  background-color: rgba(25, 118, 210, 0.04);
 }
 
-.ant-pagination.ant-pagination-mini .ant-pagination-options-quick-jumper input {
-  margin-inline-start: var(--j2-margin-xs) !important;
-}
-.j2-rate.ant-rate {
-  color: var(--j2-gold-6);
+/* Specific button variants */
+._logOutButton_r06sp_138 {
+  border: 1px solid #2196f3;
+  background: transparent;
 }
-.ant-tag .anticon + span {
-  margin-inline-start: var(--j2-margin-xxs);
+
+._changeClientButton_r06sp_143 {
+  border: none;
 }
-._hemisphericSelect_2ivoh_1 {
-  .ant-select-selector {
-    border-radius: 9999px !important;
+._j2Popover_1egkj_1 {
+  .ant-popover-inner {
+    padding: var(--j2-padding-lg);
   }
 
-  .ant-select-selection-placeholder {
-    color: var(--j2-color-primary) !important;
+  &._smallPadding_1egkj_6,
+  &._smPadding_1egkj_7 .ant-popover-inner {
+    padding: var(--j2-padding-sm);
   }
-}
 
-._summarizedSelect_2ivoh_11 {
-  .ant-select-arrow {
-    color: var(--j2-color-primary);
+  &._xxsPadding_1egkj_11 .ant-popover-inner {
+    padding: var(--j2-padding-xxs);
   }
 
-  .ant-select-selection-item {
-    background: none !important;
-    border: none !important;
+  &._xsPadding_1egkj_15 .ant-popover-inner {
+    padding: var(--j2-padding-xs);
   }
-}
-
-._isActive_2ivoh_22 {
-  .ant-select-selector {
-    background: var(--j2-color-primary) !important;
 
-    .ant-select-selection-item-content {
-      color: white !important;
-    }
+  &._mdPadding_1egkj_19 .ant-popover-inner {
+    padding: var(--j2-padding-md);
   }
 
-  .ant-select-arrow {
-    color: white !important;
+  &._xlPadding_1egkj_23 .ant-popover-inner {
+    padding: var(--j2-padding-xl);
   }
-}
-
-._menuContainer_2ivoh_36 .ant-select-item-option-selected {
-  background: var(--j2-color-primary) !important;
-}
 
-._menuContainer_2ivoh_36
-  .ant-select-item-option-selected
-  .ant-select-item-option-content {
-  color: white;
+  .ant-popover-title {
+    font-size: var(--j2-font-size-heading-4);
+    font-weight: var(--j2-font-weight-strong);
+    line-height: var(--j2-line-height-heading-4);
+  }
 }
 
-._menuContainerMultiple_2ivoh_46 .ant-select-item-option-selected {
-  background: var(--j2-color-primary-bg-hover) !important;
+._popoverHeader_1egkj_34 {
+  box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);
+  border-radius: var(--j2-border-radius) var(--j2-border-radius) 0 0;
+  font-weight: bold;
 }
 
-._menuContainerMultiple_2ivoh_46
-  .ant-select-item-option-selected
-  .ant-select-item-option-content {
-  color: inherit;
-}
+._scrollable_1egkj_40 {
+  .ant-popover-inner {
+    padding: 0;
+  }
 
-/*
- * Headlined variant styles
- * Ant Design 5 uses :where() with 0 specificity, so our class selectors override without !important
- */
+  .ant-popover-title {
+    top: 0;
+    z-index: 10;
+    position: sticky;
+    margin-bottom: 0;
+    background: white;
+    padding: var(--j2-padding-sm);
+    box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);
+    font-size: var(--j2-font-size);
+    border-radius: var(--j2-border-radius) var(--j2-border-radius) 0 0;
+  }
 
-._headlinedSelect_2ivoh_61.ant-select.ant-select-single {
-  font-size: var(--j2-font-size-heading-2);
-  height: 40px;
-  width: -moz-fit-content !important;
-  width: fit-content !important;
+  .ant-popover-inner-content {
+    padding: var(--j2-padding-sm) var(--j2-padding-sm) var(--j2-padding-sm)
+      var(--j2-padding-sm);
+    overflow: auto;
+    max-height: 295px;
+  }
+}
+._categoryName_jejns_1 {
+  color: var(--j2-color-text-secondary);
+}
+._j2Menu_11mko_1 .ant-menu-submenu-selected .ant-menu-submenu-title {
+  color: inherit;
 }
 
-._headlinedSelect_2ivoh_61.ant-select .ant-select-selector {
+._j2Menu_11mko_1 .ant-menu-item-divider {
+  margin: 0 12px;
+}
+
+._j2Menu_11mko_1.ant-menu-light.ant-menu-root.ant-menu-inline,
+._j2Menu_11mko_1.ant-menu-light.ant-menu-root.ant-menu-vertical {
+  border-inline-end: none;
+  border-right: none;
+}
+
+._j2Menu_11mko_1._compact_11mko_15 {
+  .ant-menu-submenu-selected .ant-menu-submenu-title {
+    color: #ffffff;
+    background-color: var(--j2-color-primary-active);
+  }
+
+  .ant-menu-item-icon {
+    margin-left: -2px !important;
+  }
+}
+
+.ant-menu-item-icon {
+  vertical-align: middle !important;
+}
+/* Modal Component Styling */
+.j2-modal .ant-modal-content {
+  background: var(--j2-color-bg-elevated);
+  border-radius: var(--j2-border-radius-lg);
+  padding: 0;
+  overflow: hidden;
+}
+
+/* Header styling */
+.j2-modal .ant-modal-header {
   background: transparent;
-  padding-left: 0;
-  padding-right: 4px;
-  font-size: var(--j2-font-size-heading-2);
-  border-bottom: 1px solid transparent;
-  border-radius: 0;
+  border-bottom: none;
+  padding: var(--j2-padding-md) var(--j2-padding-content-horizontal-lg)
+    var(--j2-padding-xs) var(--j2-padding-content-horizontal-lg);
+  margin: 0;
+  box-shadow:
+    0px 1px 2px 0px rgba(0, 0, 0, 0.03),
+    0px 1px 6px -1px rgba(0, 0, 0, 0.02),
+    0px 2px 4px 0px rgba(0, 0, 0, 0.02);
 }
 
-._headlinedSelect_2ivoh_61.ant-select .ant-select-arrow {
-  height: 16px;
-  width: 16px;
-  right: 0;
+.j2-modal .ant-modal-title {
+  font-family: var(--j2-font-family);
+  font-weight: var(--j2-font-weight-strong);
+  font-size: var(--j2-font-size-lg);
+  line-height: var(--j2-line-height-lg);
+  color: var(--j2-color-text-heading);
+  margin: 0;
 }
 
-._headlinedSelect_2ivoh_61.ant-select .ant-select-selection-item {
-  font-weight: 600;
-  line-height: 1.3;
+/* Icon modal specific header styling */
+.j2-modal-with-icon .ant-modal-header {
+  padding: var(--j2-padding-md) var(--j2-padding-content-horizontal-lg) 0
+    var(--j2-padding-content-horizontal-lg);
 }
 
-/* Hover state - show underline */
-._headlinedSelect_2ivoh_61.ant-select:hover .ant-select-selector {
-  border-bottom-color: var(--j2-color-primary);
+/* Close button styling */
+.j2-modal .ant-modal-close {
+  top: var(--j2-padding);
+  right: var(--j2-padding-md);
+  width: 22px;
+  height: 22px;
+  color: var(--j2-color-icon);
 }
 
-/* Open/focused state - keep underline and text color */
-._headlinedSelect_2ivoh_61.ant-select-open .ant-select-selector,
-._headlinedSelect_2ivoh_61.ant-select-focused .ant-select-selector {
-  border-bottom-color: var(--j2-color-primary);
+.j2-modal .ant-modal-close-x {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  color: var(--j2-color-icon);
 }
 
-._headlinedSelect_2ivoh_61.ant-select-open .ant-select-selection-item,
-._headlinedSelect_2ivoh_61.ant-select-focused
-  .ant-select-selection-item {
-  color: inherit;
+/* Body styling */
+.j2-modal .ant-modal-body {
+  font-family: var(--j2-font-family);
+  font-weight: var(--j2-font-weight-normal);
+  font-size: var(--j2-font-size);
+  line-height: var(--j2-line-height);
+  color: var(--j2-color-text);
 }
 
-/* Headline dropdown styles - needs !important to override .menuContainer */
-._menuContainer_2ivoh_36._headlinedMenuContainer_2ivoh_105
-  .ant-select-item-option-selected {
-  background: var(--j2-color-primary) !important;
+/* Footer styling */
+.j2-modal .ant-modal-footer {
+  background: transparent;
+  border-top: none;
+  padding: 0 var(--j2-padding-content-horizontal-lg) var(--j2-padding-md)
+    var(--j2-padding-content-horizontal-lg);
+  margin: 0;
+  text-align: right;
+}
+
+/* Backdrop/mask styling */
+.j2-modal .ant-modal-mask {
+  background: var(--j2-color-bg-mask);
+}
+._navMenuContainer_1ul3o_1 {
+  height: 100vh;
+  display: inline-block;
+
+  &._collapsed_1ul3o_5 {
+    width: 80px;
+
+    ._headerContainer_1ul3o_8 {
+      ._logo_1ul3o_9 {
+        display: block;
+      }
+
+      .toggle-button {
+        display: none;
+      }
+
+      &:hover {
+        ._logo_1ul3o_9 {
+          display: none;
+        }
+
+        .toggle-button {
+          display: block;
+        }
+      }
+    }
+  }
+}
+._modalTitleWithIcon_5g0kf_1 {
+  display: flex;
+  gap: var(--j2-padding-sm);
+  align-items: flex-start;
+}
+
+._modalIcon_5g0kf_7 {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+._modalTitleContent_5g0kf_16 {
+  flex: 1;
+  min-width: 0;
+}
+
+._modalTitleText_5g0kf_21 {
+  font-family: var(--j2-font-family);
+  font-weight: var(--j2-font-weight-strong);
+  font-size: var(--j2-font-size-lg);
+  line-height: var(--j2-line-height-lg);
+  color: var(--j2-color-text-heading);
+  margin: 0;
+}
+
+._modalContentWithIcon_5g0kf_30 {
+  margin-left: calc(24px + var(--j2-padding-sm));
+}
+.ant-pagination {
+  gap: var(--j2-margin-xs);
+}
+
+.ant-pagination li:not(.ant-pagination-total-text) {
+  margin-inline-end: 0 !important;
+}
+
+.ant-pagination-item-active {
+  background-color: var(--j2-blue-9) !important;
+}
+
+.ant-pagination-item-active a {
+  color: white !important;
+}
+
+.ant-pagination-prev button,
+.ant-pagination-next button {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ant-pagination-prev button:hover,
+.ant-pagination-next button:hover {
+  background-color: var(--j2-color-bg-text-hover) !important;
+}
+
+.ant-pagination-disabled button,
+.ant-pagination-disabled button:hover {
+  cursor: not-allowed;
+  background-color: transparent !important;
+  pointer-events: none;
+}
+
+.ant-pagination-disabled button svg {
+  color: var(--j2-color-text-disabled) !important;
+}
+
+._jump-button_bwjnt_41 {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ant-pagination-options {
+  display: flex !important;
+  align-items: center !important;
+  gap: var(--j2-margin-xs);
+  margin-inline-start: 0 !important;
+}
+
+.ant-pagination-total-text {
+  color: var(--j2-color-text);
+  margin-inline-end: var(--j2-margin-xs) !important;
+}
+
+.ant-pagination-options-quick-jumper {
+  display: flex !important;
+  align-items: center !important;
 }
 
-._menuContainer_2ivoh_36._headlinedMenuContainer_2ivoh_105
-  .ant-select-item-option-selected
-  .ant-select-item-option-content {
-  color: white;
+.ant-pagination:not(.ant-pagination-mini) .ant-pagination-options-quick-jumper {
+  gap: var(--j2-margin-xs);
 }
 
-._clearAllButton_2ivoh_116 {
-  color: var(--j2-color-primary);
+.ant-pagination-options-quick-jumper input {
+  margin: 0px !important;
 }
 
-._clearAllButton_2ivoh_116:hover {
-  background-color: var(--j2-color-primary-bg-hover);
+.ant-pagination.ant-pagination-mini .ant-pagination-options-quick-jumper input {
+  margin-inline-start: var(--j2-margin-xs) !important;
+}
+.j2-rate.ant-rate {
+  color: var(--j2-gold-6);
 }
 .j2Steps {
   .ant-steps-item-custom > .ant-steps-icon {
@@ -848,407 +999,256 @@
     color: var(--j2-blue-9);
   }
 }
-.j2-switch {
-  &.ant-switch {
-    min-width: 44px !important;
-    width: 44px !important;
-  }
-
-  &.ant-switch-small {
-    min-width: 28px !important;
-    width: 28px !important;
-  }
-
-  .ant-switch-inner-checked {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: flex-start !important;
-  }
-
-  .ant-switch-inner-unchecked {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: flex-end !important;
+._hemisphericSelect_2ivoh_1 {
+  .ant-select-selector {
+    border-radius: 9999px !important;
   }
 
-  .ant-switch-inner-checked:has(svg) {
-    justify-content: flex-end !important;
-    padding-left: 0 !important;
+  .ant-select-selection-placeholder {
+    color: var(--j2-color-primary) !important;
   }
+}
 
-  .ant-switch-inner-unchecked:has(svg) {
-    justify-content: flex-start !important;
-    padding-left: 0 !important;
+._summarizedSelect_2ivoh_11 {
+  .ant-select-arrow {
+    color: var(--j2-color-primary);
   }
 
-  .ant-switch-inner-checked svg,
-  .ant-switch-inner-unchecked svg {
-    display: block !important;
-    -o-object-fit: contain !important;
-       object-fit: contain !important;
-    flex-shrink: 0 !important;
+  .ant-select-selection-item {
+    background: none !important;
+    border: none !important;
   }
 }
-._bordered_1vc5s_1 .ant-table-cell:not(.ant-table-cell-fix-left-last) {
-  border-left: none !important;
-  border-right: none !important;
-}
-
-.ant-table-cell {
-  vertical-align: middle;
-}
-
-.ant-table-bordered .ant-table-row .ant-table-cell {
-  border-bottom: 1px solid var(--j2-color-border-secondary) !important;
-}
 
-.ant-table-bordered .ant-table-container {
-  border-right: 1px solid var(--j2-color-border-secondary);
-  border-bottom: 1px solid var(--j2-color-border-secondary) !important;
-  border-radius: var(--j2-border-radius);
-  overflow: hidden;
+._isActive_2ivoh_22 {
+  .ant-select-selector {
+    background: var(--j2-color-primary) !important;
 
-  tr {
-    td:last-of-type {
-      border-inline-end: none !important;
+    .ant-select-selection-item-content {
+      color: white !important;
     }
   }
 
-  tr:last-of-type.ant-table-row .ant-table-cell {
-    border-bottom: none !important;
+  .ant-select-arrow {
+    color: white !important;
   }
 }
 
-.ant-table-wrapper .ant-table-container
-  table
-  > thead
-  > tr:first-child
-  > *:last-child {
-  border-start-end-radius: var(--j2-border-radius);
-  border-right: none !important;
-}
-
-.ant-spin-container.ant-spin-blur th {
-  visibility: hidden;
-}
-
-.ant-table-thead > tr > th {
-  white-space: nowrap;
-  color: var(--j2-color-primary) !important;
-}
-
-._alternatingRows_1vc5s_49 .ant-table-tbody > tr:nth-child(even) {
-  background-color: #fafafa !important;
-}
-
-._alternatingRows_1vc5s_49
-  .ant-table-tbody > tr:nth-child(even) > .ant-table-cell-fix-left,
-._alternatingRows_1vc5s_49
-  .ant-table-tbody > tr:nth-child(even) > .ant-table-cell-fix-right {
-  background-color: inherit !important;
-}
-
-.ant-table-column-sorters {
-  margin-right: 1rem !important;
-}
-/* Main container */
-._navContainer_1eoor_2 {
-  width: 186px;
-  height: 100vh;
-  background-color: #efefef;
-  border-right: 1px solid #e1e1e1;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  font-family: 'Roboto', sans-serif;
-}
-
-/* Logo section */
-._logoSection_1eoor_14 {
-  padding: 24px 0;
+._menuContainer_2ivoh_36 .ant-select-item-option-selected {
+  background: var(--j2-color-primary) !important;
 }
 
-._logoContainer_1eoor_18 {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 10px;
+._menuContainer_2ivoh_36
+  .ant-select-item-option-selected
+  .ant-select-item-option-content {
+  color: white;
 }
 
-._logoLink_1eoor_25 {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  cursor: pointer;
+._menuContainerMultiple_2ivoh_46 .ant-select-item-option-selected {
+  background: var(--j2-color-primary-bg-hover) !important;
 }
 
-._logo_1eoor_14 {
-  height: var(--logo-size, 64px);
-  width: auto; /* Maintains aspect ratio */
-  max-width: 100%;
+._menuContainerMultiple_2ivoh_46
+  .ant-select-item-option-selected
+  .ant-select-item-option-content {
+  color: inherit;
 }
 
-/* Responsive sizing */
-@media (max-width: 768px) {
-  ._logo_1eoor_14 {
-    width: 60px;
-  }
-}
+/*
+ * Headlined variant styles
+ * Ant Design 5 uses :where() with 0 specificity, so our class selectors override without !important
+ */
 
-/* Navigation content */
-._navContent_1eoor_46 {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  overflow-x: hidden;
+._headlinedSelect_2ivoh_61.ant-select.ant-select-single {
+  font-size: var(--j2-font-size-heading-2);
+  height: 40px;
+  width: -moz-fit-content !important;
+  width: fit-content !important;
 }
 
-._navSection_1eoor_54 {
-  border-bottom: 1px solid #e1e1e1;
-  padding: 8px 0;
+._headlinedSelect_2ivoh_61.ant-select .ant-select-selector {
+  background: transparent;
+  padding-left: 0;
+  padding-right: 4px;
+  font-size: var(--j2-font-size-heading-2);
+  border-bottom: 1px solid transparent;
+  border-radius: 0;
 }
 
-._sectionHeader_1eoor_59 {
-  padding: 8px 0;
+._headlinedSelect_2ivoh_61.ant-select .ant-select-arrow {
+  height: 16px;
+  width: 16px;
+  right: 0;
 }
 
-._sectionTitle_1eoor_63 {
-  font-family: 'Roboto', sans-serif;
-  font-size: 12px;
-  font-weight: 400;
-  letter-spacing: 1px;
-  color: rgba(0, 0, 0, 0.87);
-  padding: 0 16px;
-  text-transform: uppercase;
+._headlinedSelect_2ivoh_61.ant-select .ant-select-selection-item {
+  font-weight: 600;
+  line-height: 1.3;
 }
 
-._sectionItems_1eoor_73 {
-  display: flex;
-  flex-direction: column;
+/* Hover state - show underline */
+._headlinedSelect_2ivoh_61.ant-select:hover .ant-select-selector {
+  border-bottom-color: var(--j2-color-primary);
 }
 
-/* Navigation items */
-._navItem_1eoor_79 {
-  display: flex;
-  align-items: center;
-  padding: 8px 16px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  text-align: left;
-  width: 100%;
-  transition: background-color 0.2s ease;
-  min-height: 40px;
+/* Open/focused state - keep underline and text color */
+._headlinedSelect_2ivoh_61.ant-select-open .ant-select-selector,
+._headlinedSelect_2ivoh_61.ant-select-focused .ant-select-selector {
+  border-bottom-color: var(--j2-color-primary);
 }
 
-._navItem_1eoor_79:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+._headlinedSelect_2ivoh_61.ant-select-open .ant-select-selection-item,
+._headlinedSelect_2ivoh_61.ant-select-focused
+  .ant-select-selection-item {
+  color: inherit;
 }
 
-._navItem_1eoor_79._active_1eoor_96 {
-  background-color: #dfe5ed;
+/* Headline dropdown styles - needs !important to override .menuContainer */
+._menuContainer_2ivoh_36._headlinedMenuContainer_2ivoh_105
+  .ant-select-item-option-selected {
+  background: var(--j2-color-primary) !important;
 }
 
-._navItemIcon_1eoor_100 {
-  width: 32px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin-right: 0;
-  color: rgba(0, 0, 0, 0.87);
+._menuContainer_2ivoh_36._headlinedMenuContainer_2ivoh_105
+  .ant-select-item-option-selected
+  .ant-select-item-option-content {
+  color: white;
 }
 
-._navItemIcon_1eoor_100 svg {
-  width: 24px;
-  height: 24px;
+._clearAllButton_2ivoh_116 {
+  color: var(--j2-color-primary);
 }
 
-._navItemLabel_1eoor_115 {
-  font-family: 'Roboto', sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  color: rgba(0, 0, 0, 0.87);
-  letter-spacing: 0.15px;
-  line-height: 1.5;
-  flex: 1;
-  padding: 4px 0;
+._clearAllButton_2ivoh_116:hover {
+  background-color: var(--j2-color-primary-bg-hover);
+}
+.ant-tag .anticon + span {
+  margin-inline-start: var(--j2-margin-xxs);
 }
+.j2-switch {
+  &.ant-switch {
+    min-width: 44px !important;
+    width: 44px !important;
+  }
 
-/* Legacy collapsed state support */
-._navMenuContainer_1eoor_127 {
-  height: 100vh;
-  display: inline-block;
+  &.ant-switch-small {
+    min-width: 28px !important;
+    width: 28px !important;
+  }
 
-  &._collapsed_1eoor_131 {
-    width: 80px;
+  .ant-switch-inner-checked {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+  }
 
-    ._headerContainer_1eoor_134 {
-      ._logo_1eoor_14 {
-        display: block;
-      }
+  .ant-switch-inner-unchecked {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+  }
 
-      .toggle-button {
-        display: none;
-      }
+  .ant-switch-inner-checked:has(svg) {
+    justify-content: flex-end !important;
+    padding-left: 0 !important;
+  }
 
-      &:hover {
-        ._logo_1eoor_14 {
-          display: none;
-        }
+  .ant-switch-inner-unchecked:has(svg) {
+    justify-content: flex-start !important;
+    padding-left: 0 !important;
+  }
 
-        .toggle-button {
-          display: block;
-        }
-      }
-    }
+  .ant-switch-inner-checked svg,
+  .ant-switch-inner-unchecked svg {
+    display: block !important;
+    -o-object-fit: contain !important;
+       object-fit: contain !important;
+    flex-shrink: 0 !important;
   }
 }
-/* User section */
-._userSection_r06sp_2 {
-  padding: 12px 0;
-  border-top: none;
-}
-
-._userProfile_r06sp_7 {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 16px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  width: 100%;
-  text-align: left;
-  transition: background-color 0.2s ease;
+._bordered_1vc5s_1 .ant-table-cell:not(.ant-table-cell-fix-left-last) {
+  border-left: none !important;
+  border-right: none !important;
 }
 
-._userProfile_r06sp_7:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+.ant-table-cell {
+  vertical-align: middle;
 }
 
-._userAvatar_r06sp_24 {
-  width: 32px;
-  height: 32px;
-  background-color: #ab47bc;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #ffffff;
-  font-family: 'Rubik', sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
+.ant-table-bordered .ant-table-row .ant-table-cell {
+  border-bottom: 1px solid var(--j2-color-border-secondary) !important;
 }
 
-._avatarImage_r06sp_38 {
-  width: 100%;
-  height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
-}
+.ant-table-bordered .ant-table-container {
+  border-right: 1px solid var(--j2-color-border-secondary);
+  border-bottom: 1px solid var(--j2-color-border-secondary) !important;
+  border-radius: var(--j2-border-radius);
+  overflow: hidden;
 
-._userName_r06sp_44 {
-  font-family: 'Roboto', sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  color: rgba(0, 0, 0, 0.87);
-  letter-spacing: 0.15px;
-  line-height: 1.5;
-  width: 96px;
-}
+  tr {
+    td:last-of-type {
+      border-inline-end: none !important;
+    }
+  }
 
-/* Popover styles */
-._popover_r06sp_55 {
-  position: absolute;
-  left: 186px; /* Position to the right of the nav */
-  bottom: 0;
-  width: 280px;
-  background: white;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  overflow: hidden;
+  tr:last-of-type.ant-table-row .ant-table-cell {
+    border-bottom: none !important;
+  }
 }
 
-._popoverHeader_r06sp_67 {
-  padding: 16px 20px 12px;
-  font-family: 'Roboto', sans-serif;
-  font-size: 12px;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+.ant-table-wrapper .ant-table-container
+  table
+  > thead
+  > tr:first-child
+  > *:last-child {
+  border-start-end-radius: var(--j2-border-radius);
+  border-right: none !important;
 }
 
-._popoverUserInfo_r06sp_78 {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 20px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+.ant-spin-container.ant-spin-blur th {
+  visibility: hidden;
 }
 
-._popoverAvatar_r06sp_86 {
-  width: 40px;
-  height: 40px;
-  background-color: #ab47bc;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #ffffff;
-  font-family: 'Rubik', sans-serif;
-  font-size: 18px;
-  font-weight: 400;
+.ant-table-thead > tr > th {
+  white-space: nowrap;
+  color: var(--j2-color-primary) !important;
 }
 
-._popoverAvatar_r06sp_86 ._avatarImage_r06sp_38 {
-  width: 100%;
-  height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+._alternatingRows_1vc5s_49 .ant-table-tbody > tr:nth-child(even) {
+  background-color: #fafafa !important;
 }
 
-._popoverUserName_r06sp_105 {
-  font-family: 'Roboto', sans-serif;
-  font-size: 18px;
-  font-weight: 400;
-  color: rgba(0, 0, 0, 0.87);
-  letter-spacing: 0.15px;
+._alternatingRows_1vc5s_49
+  .ant-table-tbody > tr:nth-child(even) > .ant-table-cell-fix-left,
+._alternatingRows_1vc5s_49
+  .ant-table-tbody > tr:nth-child(even) > .ant-table-cell-fix-right {
+  background-color: inherit !important;
 }
 
-._popoverActions_r06sp_113 {
-  padding: 8px 16px;
-  display: flex;
+.ant-table-column-sorters {
+  margin-right: 1rem !important;
 }
-
-/* Base button styles for all popover buttons */
-._popoverActions_r06sp_113 button {
-  flex: 1;
-  padding: 5px 15px;
-  color: #2196f3;
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  letter-spacing: 0.5px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: nowrap;
+._messageIcon_1k9xp_1 {
+  margin-right: 0.5rem;
 }
-
-._popoverActions_r06sp_113 button:hover {
-  background-color: rgba(25, 118, 210, 0.04);
+.ant-notification-notice-message {
+  font-size: var(--j2-font-size-lg);
+  font-weight: var(--j2-font-weight-strong);
+  line-height: var(--j2-line-height-lg);
+  color: var(--j2-color-text-heading);
 }
 
-/* Specific button variants */
-._logOutButton_r06sp_138 {
-  border: 1px solid #2196f3;
-  background: transparent;
+.ant-notification-notice-description {
+  font-size: var(--j2-font-size);
+  line-height: var(--j2-line-height);
+  color: var(--j2-color-text);
 }
 
-._changeClientButton_r06sp_143 {
-  border: none;
+._messageOnly_1pxqk_14 {
+  .ant-notification-notice-message {
+    font-weight: var(--j2-font-weight-normal);
+  }
+  .ant-notification-notice-message {
+    margin-bottom: 0 !important;
+  }
 }