@j2-health/design-system 0.1.0

package/dist/style.css

@@ -0,0 +1,1254 @@
+/* Target alerts without description - align icon and text midlines */
+._alert_1yhxg_2:not(.ant-alert-with-description) {
+  display: flex;
+  align-items: center;
+  padding-bottom: 6px; /* Reduced from default 12px to balance vertical alignment with icon */
+}
+
+._alert_1yhxg_2:not(.ant-alert-with-description) .ant-alert-icon {
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  margin-top: 2px; /* Fine-tune vertical position to match text midline (derived from sizeXXS / 2) */
+}
+
+._alert_1yhxg_2:not(.ant-alert-with-description)
+  .ant-alert-close-icon {
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  margin-top: 2px; /* Match icon alignment */
+}
+
+._alert_1yhxg_2:not(.ant-alert-with-description) .ant-alert-message {
+  line-height: 1.5714285714285714; /* Theme line height token value */
+}
+
+/* Align close icon for alerts WITH description */
+._alert_1yhxg_2.ant-alert-with-description .ant-alert-close-icon {
+  align-self: flex-start;
+  margin-top: 4px; /* Align with larger icon */
+}
+._tooltip_1g39l_1 {
+  padding: var(--j2-padding-sm);
+  border-radius: var(--j2-border-radius-lg);
+  box-shadow: 0px 9px 28px 8px #0000000d;
+  background-color: var(--j2-color-bg-elevated);
+  font-size: var(--j2-font-size);
+  font-family: var(--j2-font-family);
+}
+.ant-btn-default {
+  &:focus-visible {
+    border-color: var(--j2-color-primary-hover);
+  }
+}
+
+.ant-btn-text {
+  &:active {
+    background-color: var(--j2-gray-2) !important;
+  }
+}
+
+.ant-btn-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.ant-btn-dashed {
+  border: none !important;
+  background-color: var(--j2-gray-3);
+
+  &.ant-btn-color-dangerous {
+    background-color: var(--j2-color-error-bg) !important;
+    border: 1px solid var(--j2-color-error-border) !important;
+  }
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--j2-gray-3) !important;
+    color: var(--j2-color-primary-text-hover) !important;
+
+    &.ant-btn-color-dangerous {
+      background-color: var(--j2-color-error-bg-hover) !important;
+      color: var(--j2-color-error-hover) !important;
+      border: 1px solid var(--j2-color-error-border-hover) !important;
+    }
+  }
+
+  &:disabled {
+    background-color: var(--j2-gray-3) !important;
+    border: 1px solid var(--j2-color-border) !important;
+    color: var(--j2-color-text-disabled) !important;
+  }
+}
+
+.ant-btn-background-ghost {
+  &.ant-btn-primary {
+    background-color: var(--j2-color-primary);
+    border-color: #ffffff;
+    color: #ffffff;
+
+    &:hover,
+    &:focus-visible {
+      &:not(:disabled) {
+        background-color: var(--j2-color-primary-active) !important;
+        color: #ffffff !important;
+        border-color: #ffffff !important;
+      }
+    }
+  }
+
+  &:hover,
+  &:focus-visible {
+    &:not(:disabled) {
+      border-color: var(--j2-color-primary-hover) !important;
+      background-color: var(--j2-gray-4) !important;
+    }
+  }
+}
+.ant-card:not(.ant-card-bordered) {
+  box-shadow: none;
+
+  .ant-card-head {
+    border-bottom: none;
+  }
+}
+
+.ant-card-type-inner {
+  background-color: var(--j2-color-bg-layout);
+}
+
+.j2-card {
+  .ant-card-head {
+    border-bottom: none;
+    min-height: 40px;
+  }
+
+  /* Soften Ant's default hover shadow — the stock lift is too heavy next to
+     j2's flatter visual language. Keeps a subtle cue without competing with
+     selected-state borders. Also preserve the border on hover: Ant drops it
+     to transparent by default, which reads as the card collapsing. */
+  &.ant-card-hoverable:hover {
+    border-color: var(--j2-color-border);
+    box-shadow: var(--j2-box-shadow-tertiary);
+  }
+
+  .ant-tabs .ant-tabs-tab {
+    font-size: var(--j2-font-size);
+  }
+
+  &.ant-card-type-inner {
+    &.inner-basic {
+      background-color: white;
+      > .ant-card-head {
+        /* restore border */
+        border-bottom: 1px solid var(--j2-color-border-secondary);
+        /* restore justify-content */
+        justify-content: center;
+      }
+    }
+  }
+}
+
+.j2-card-default {
+  .ant-card-head {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .ant-tabs-nav-wrap {
+    max-height: 40px;
+  }
+}
+
+.j2-card-large {
+  padding: 0px 32px 32px 32px;
+
+  .ant-card-head {
+    justify-content: flex-end;
+    padding: 0;
+  }
+
+  .ant-card-body {
+    padding: 16px 0px 0px 0px;
+  }
+
+  .ant-card-head-wrapper {
+    min-height: 56px;
+    align-items: flex-end;
+  }
+}
+
+.j2-card-compact {
+  .ant-card-body {
+    padding: 8px 12px;
+  }
+}
+
+.j2-card-small {
+  .ant-card-head {
+    min-height: 38px;
+
+    .ant-card-head-wrapper {
+      .ant-card-head-title {
+        padding-top: 8px;
+        padding-bottom: 8px;
+      }
+    }
+  }
+}
+._default_yukjt_1 .ant-collapse-header-text,
+._warning_yukjt_2 .ant-collapse-header-text,
+._error_yukjt_3 .ant-collapse-header-text {
+  display: flex;
+  align-items: center;
+  gap: var(--j2-size-xs);
+}
+
+/* Warning state */
+._warning_yukjt_2.ant-collapse {
+  border-color: var(--j2-color-warning-border);
+  background-color: var(--j2-color-warning-bg);
+}
+
+._warning_yukjt_2 .ant-collapse-item {
+  border-bottom-color: var(--j2-color-warning-border) !important;
+}
+
+._warning_yukjt_2 .ant-collapse-content {
+  border-top-color: var(--j2-color-warning-border) !important;
+}
+
+._warning_yukjt_2 .ant-collapse-header {
+  color: var(--j2-color-text) !important;
+}
+
+/* Error state */
+._error_yukjt_3.ant-collapse {
+  border-color: var(--j2-color-error-border);
+  background-color: var(--j2-color-error-bg);
+}
+
+._error_yukjt_3 .ant-collapse-item {
+  border-bottom-color: var(--j2-color-error-border) !important;
+}
+
+._error_yukjt_3 .ant-collapse-content {
+  border-top-color: var(--j2-color-error-border) !important;
+}
+
+._error_yukjt_3 .ant-collapse-header {
+  color: var(--j2-color-text) !important;
+}
+.j2-drawer {
+  .ant-drawer-header {
+    height: 64px;
+  }
+
+  .ant-drawer-body {
+    background-color: var(--j2-gray-2);
+  }
+
+  .ant-drawer-title {
+    font-size: var(--j2-font-size-heading-4);
+    color: var(--j2-color-primary-text);
+  }
+
+  .ant-drawer-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--j2-gray-3);
+    height: 72px;
+  }
+}
+.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item {
+  color: var(--j2-color-primary-text);
+
+  &:hover {
+    color: var(--j2-color-primary-text-hover);
+  }
+}
+
+.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-selected {
+  &,
+  &:hover {
+    background-color: var(--j2-color-primary);
+    color: white;
+  }
+}
+
+.ant-dropdown-menu.j2-dropdown-slim-menu .ant-dropdown-menu-item-group-list {
+  margin: 0;
+}
+._j2FilterForm_rdja9_1 {
+  ._filterFormTitle_rdja9_2 {
+    font-size: var(--j2-font-size-lg);
+    line-height: var(--j2-line-height-heading-4);
+  }
+  ._filterFormConjunction_rdja9_6 {
+    color: var(--j2-color-primary-text);
+  }
+
+  ._filterFormFieldsContainer_rdja9_10 {
+    background-color: var(--j2-gray-2);
+    border-radius: var(--j2-border-radius);
+  }
+
+  ._filterFormGroupContainer_rdja9_15 {
+    background-color: #fff;
+    border-radius: var(--j2-border-radius);
+  }
+}
+.ant-form-item .ant-form-item-label > label {
+  align-items: start;
+  padding-top: 8px;
+
+  &::before {
+    margin-top: 6px;
+  }
+}
+._j2InputNumber_1jmfn_1.ant-input-number {
+  &:hover {
+    .ant-input-number-handler-wrap {
+      max-width: 100%;
+      width: auto;
+    }
+  }
+
+  .ant-input-number-handler-wrap {
+    max-width: 0;
+    transition: max-width 0.2s;
+
+    .ant-input-number-handler {
+      height: 50%;
+      padding: 0 12px;
+      color: var(--j2-color-primary);
+    }
+
+    .ant-input-number-handler-up {
+      align-items: flex-end;
+    }
+
+    .ant-input-number-handler-down {
+      border-block-start: none;
+      align-items: flex-start;
+    }
+  }
+}
+._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);
+  }
+}
+
+._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;
+}
+
+._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;
+}
+
+._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;
+}
+._messageIcon_1k9xp_1 {
+  margin-right: 0.5rem;
+}
+/* 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;
+  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);
+}
+
+.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;
+}
+
+/* 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);
+}
+
+/* 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);
+}
+
+.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);
+}
+
+/* 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);
+}
+
+/* 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;
+        }
+      }
+    }
+  }
+}
+.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);
+}
+
+.ant-notification-notice-description {
+  font-size: var(--j2-font-size);
+  line-height: var(--j2-line-height);
+  color: var(--j2-color-text);
+}
+
+._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;
+}
+
+._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;
+}
+
+.ant-pagination:not(.ant-pagination-mini) .ant-pagination-options-quick-jumper {
+  gap: var(--j2-margin-xs);
+}
+
+.ant-pagination-options-quick-jumper input {
+  margin: 0px !important;
+}
+
+.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);
+}
+.ant-tag .anticon + span {
+  margin-inline-start: var(--j2-margin-xxs);
+}
+._hemisphericSelect_2ivoh_1 {
+  .ant-select-selector {
+    border-radius: 9999px !important;
+  }
+
+  .ant-select-selection-placeholder {
+    color: var(--j2-color-primary) !important;
+  }
+}
+
+._summarizedSelect_2ivoh_11 {
+  .ant-select-arrow {
+    color: var(--j2-color-primary);
+  }
+
+  .ant-select-selection-item {
+    background: none !important;
+    border: none !important;
+  }
+}
+
+._isActive_2ivoh_22 {
+  .ant-select-selector {
+    background: var(--j2-color-primary) !important;
+
+    .ant-select-selection-item-content {
+      color: white !important;
+    }
+  }
+
+  .ant-select-arrow {
+    color: white !important;
+  }
+}
+
+._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;
+}
+
+._menuContainerMultiple_2ivoh_46 .ant-select-item-option-selected {
+  background: var(--j2-color-primary-bg-hover) !important;
+}
+
+._menuContainerMultiple_2ivoh_46
+  .ant-select-item-option-selected
+  .ant-select-item-option-content {
+  color: inherit;
+}
+
+/*
+ * Headlined variant styles
+ * Ant Design 5 uses :where() with 0 specificity, so our class selectors override without !important
+ */
+
+._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;
+}
+
+._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;
+}
+
+._headlinedSelect_2ivoh_61.ant-select .ant-select-arrow {
+  height: 16px;
+  width: 16px;
+  right: 0;
+}
+
+._headlinedSelect_2ivoh_61.ant-select .ant-select-selection-item {
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+/* Hover state - show underline */
+._headlinedSelect_2ivoh_61.ant-select:hover .ant-select-selector {
+  border-bottom-color: var(--j2-color-primary);
+}
+
+/* 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);
+}
+
+._headlinedSelect_2ivoh_61.ant-select-open .ant-select-selection-item,
+._headlinedSelect_2ivoh_61.ant-select-focused
+  .ant-select-selection-item {
+  color: inherit;
+}
+
+/* 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;
+}
+
+._menuContainer_2ivoh_36._headlinedMenuContainer_2ivoh_105
+  .ant-select-item-option-selected
+  .ant-select-item-option-content {
+  color: white;
+}
+
+._clearAllButton_2ivoh_116 {
+  color: var(--j2-color-primary);
+}
+
+._clearAllButton_2ivoh_116:hover {
+  background-color: var(--j2-color-primary-bg-hover);
+}
+.j2Steps {
+  .ant-steps-item-custom > .ant-steps-icon {
+    display: flex;
+    align-items: center;
+  }
+
+  .ant-steps-item-custom:has(.vertical-check-icon) > .ant-steps-item-container {
+    align-items: flex-start;
+  }
+
+  .check-icon,
+  .vertical-check-icon {
+    display: flex;
+    justify-content: center;
+    border-radius: 50%;
+  }
+
+  .check-icon {
+    align-items: center !important;
+  }
+
+  .vertical-check-icon {
+    align-items: flex-start !important;
+  }
+
+  .check-small,
+  .check-default {
+    border-radius: 50%;
+  }
+
+  .check-small {
+    width: 24px;
+    height: 24px;
+    background-color: var(--j2-blue-1);
+  }
+
+  .check-default {
+    width: 32px;
+    height: 32px;
+    background-color: var(--j2-blue-1);
+  }
+
+  .check-default svg,
+  .check-small svg {
+    display: block;
+    margin: auto;
+  }
+
+  .ant-steps-item-title::after {
+    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;
+  }
+
+  .ant-switch-inner-checked:has(svg) {
+    justify-content: flex-end !important;
+    padding-left: 0 !important;
+  }
+
+  .ant-switch-inner-unchecked:has(svg) {
+    justify-content: flex-start !important;
+    padding-left: 0 !important;
+  }
+
+  .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;
+  }
+}
+._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;
+
+  tr {
+    td:last-of-type {
+      border-inline-end: none !important;
+    }
+  }
+
+  tr:last-of-type.ant-table-row .ant-table-cell {
+    border-bottom: none !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;
+}
+
+._logoContainer_1eoor_18 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 10px;
+}
+
+._logoLink_1eoor_25 {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+._logo_1eoor_14 {
+  height: var(--logo-size, 64px);
+  width: auto; /* Maintains aspect ratio */
+  max-width: 100%;
+}
+
+/* Responsive sizing */
+@media (max-width: 768px) {
+  ._logo_1eoor_14 {
+    width: 60px;
+  }
+}
+
+/* Navigation content */
+._navContent_1eoor_46 {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+._navSection_1eoor_54 {
+  border-bottom: 1px solid #e1e1e1;
+  padding: 8px 0;
+}
+
+._sectionHeader_1eoor_59 {
+  padding: 8px 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;
+}
+
+._sectionItems_1eoor_73 {
+  display: flex;
+  flex-direction: column;
+}
+
+/* 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;
+}
+
+._navItem_1eoor_79:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+._navItem_1eoor_79._active_1eoor_96 {
+  background-color: #dfe5ed;
+}
+
+._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);
+}
+
+._navItemIcon_1eoor_100 svg {
+  width: 24px;
+  height: 24px;
+}
+
+._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;
+}
+
+/* Legacy collapsed state support */
+._navMenuContainer_1eoor_127 {
+  height: 100vh;
+  display: inline-block;
+
+  &._collapsed_1eoor_131 {
+    width: 80px;
+
+    ._headerContainer_1eoor_134 {
+      ._logo_1eoor_14 {
+        display: block;
+      }
+
+      .toggle-button {
+        display: none;
+      }
+
+      &:hover {
+        ._logo_1eoor_14 {
+          display: none;
+        }
+
+        .toggle-button {
+          display: block;
+        }
+      }
+    }
+  }
+}
+/* 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;
+}
+
+._userProfile_r06sp_7:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+._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;
+}
+
+._avatarImage_r06sp_38 {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+._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;
+}
+
+/* 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;
+}
+
+._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);
+}
+
+._popoverUserInfo_r06sp_78 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+._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;
+}
+
+._popoverAvatar_r06sp_86 ._avatarImage_r06sp_38 {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+._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;
+}
+
+._popoverActions_r06sp_113 {
+  padding: 8px 16px;
+  display: flex;
+}
+
+/* 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;
+}
+
+._popoverActions_r06sp_113 button:hover {
+  background-color: rgba(25, 118, 210, 0.04);
+}
+
+/* Specific button variants */
+._logOutButton_r06sp_138 {
+  border: 1px solid #2196f3;
+  background: transparent;
+}
+
+._changeClientButton_r06sp_143 {
+  border: none;
+}