/* Auto-generated from Figma tokens + component selector map — do not edit */

/* === Button === */
.ant-btn {
  border-radius: 4px;
  font-family: Asap, sans-serif;
  font-size: 14px;
  line-height: 1.571;
}
.ant-btn.ant-btn-primary {
  background: linear-gradient(171deg, var(--pl-color-neutral-8) 0%, var(--pl-color-neutral-10) 100%) !important;
  border: 1px solid var(--pl-color-neutral-8) !important;
  box-shadow: 0px 2px 0px 0px rgba(18, 46, 94, 0.15);
  color: var(--pl-neutral-text-color-text-light-solid) !important;
  text-shadow: none !important;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s !important;
}
.ant-btn.ant-btn-primary:hover, .ant-btn.ant-btn-primary:focus {
  background: var(--pl-color-neutral-8) !important;
  border-color: var(--pl-color-neutral-8) !important;
  color: var(--pl-neutral-text-color-text-light-solid) !important;
}
.ant-btn.ant-btn-primary:active {
  background: var(--pl-color-neutral-9) !important;
  border-color: var(--pl-color-neutral-9) !important;
  color: var(--pl-neutral-text-color-text-light-solid) !important;
}
.ant-btn.ant-btn-primary[disabled],
.ant-btn.ant-btn-primary[disabled]:hover {
  background: #E9ECF1 !important;
  border-color: #C4CBDA !important;
  color: #8A95A8 !important;
  box-shadow: none !important;
}
.ant-btn-default {
  background: var(--pl-neutral-bg-color-bg-container);
  border-color: var(--pl-neutral-border-color-border);
  color: var(--pl-neutral-text-color-text);
  box-shadow: 0px 2px 0px 0px rgba(18, 46, 94, 0.06);
}
.ant-btn-default:hover {
  border-color: var(--pl-semantic-primary-color-primary-hover);
  color: var(--pl-semantic-primary-color-primary-hover);
}
.ant-btn-default:active {
  border-color: var(--pl-semantic-primary-color-primary-active);
  color: var(--pl-semantic-primary-color-primary-active);
}
.ant-btn.ant-btn-dangerous.ant-btn-default {
  border-color: var(--pl-semantic-error-color-error);
  color: var(--pl-semantic-error-color-error);
}
.ant-btn.ant-btn-dangerous.ant-btn-default:hover {
  border-color: var(--pl-semantic-error-color-error-hover);
  color: var(--pl-semantic-error-color-error-hover);
}
.ant-btn.ant-btn-dangerous.ant-btn-default:active {
  border-color: var(--pl-semantic-error-color-error-active);
  color: var(--pl-semantic-error-color-error-active);
}
.ant-btn-dangerous.ant-btn-primary {
  background: var(--pl-semantic-error-color-error) !important;
  border-color: var(--pl-semantic-error-color-error) !important;
}
.ant-btn-dangerous.ant-btn-primary:hover {
  background: var(--pl-semantic-error-color-error-hover) !important;
  border-color: var(--pl-semantic-error-color-error-hover) !important;
}

/* === Tabs === */
.pl-site-navigation-tabs > .ant-tabs-nav::before {
  border-bottom: 1px solid var(--pl-neutral-border-color-border-secondary);
}
.pl-site-navigation-tabs .ant-tabs-tab {
  padding: 8px 0;
  font-family: Asap, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  max-width: 320px;
  transition: color 0.2s;
}
.pl-site-navigation-tabs .ant-tabs-tab + .ant-tabs-tab {
  margin-left: 32px;
}
.pl-site-navigation-tabs .ant-tabs-tab .ant-tabs-tab-btn {
  color: var(--pl-neutral-text-color-text-secondary);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-site-navigation-tabs .ant-tabs-tab:hover .ant-tabs-tab-btn {
  color: var(--pl-semantic-primary-color-primary-hover);
}
.pl-site-navigation-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--pl-semantic-primary-color-primary) !important;
  font-weight: 600;
}
.pl-site-navigation-tabs .ant-tabs-ink-bar {
  background: linear-gradient(90deg, var(--pl-color-seablue-5) 9%, var(--pl-color-seablue-7) 95%) !important;
  height: 2px !important;
}
.pl-site-navigation-tabs .ant-tabs-tab-remove {
  margin-left: 8px;
  font-size: 12px;
  color: var(--pl-neutral-text-color-text-quaternary);
  transition: color 0.2s;
  opacity: 0;
}
.pl-site-navigation-tabs .ant-tabs-tab:hover .ant-tabs-tab-remove, .pl-site-navigation-tabs .ant-tabs-tab-active .ant-tabs-tab-remove {
  opacity: 1;
}
.pl-site-navigation-tabs .ant-tabs-tab-remove:hover {
  color: var(--pl-neutral-text-color-text);
}
.pl-site-navigation-tabs .ant-tabs-nav-more {
  padding: 12px 16px;
  font-size: 16px;
  color: var(--pl-neutral-text-color-text-secondary);
  /* The "..." button sits inside .ant-tabs-nav-operations, which is AntDesign's hover
     trigger for the overflow dropdown. Letting the button receive pointer events makes
     the dropdown flicker (hover churns between the button and the trigger as the button
     re-renders on open). Routing pointer events to the trigger div keeps hover stable. */
  pointer-events: none;
}

/* Suppress the stray outline on non-keyboard (mouse) focus only, so keyboard users keep a
   visible focus indicator (:focus-visible). */
.pl-site-navigation-tabs .ant-tabs-nav-more:focus:not(:focus-visible) {
  outline: none;
}

/* Targets the Tabs "more" popup (portaled to document.body as `.ant-dropdown`) without affecting
   other dropdowns, via its inner `.ant-tabs-dropdown-menu` list. Keeps it inside the viewport
   `--pl-tabs-more-popup-right` is computed by tab-overflow-fit.js. !important wins
   over AntDesign's own inline left/right. */
.ant-dropdown:has(> .ant-tabs-dropdown-menu) {
  left: unset !important;
  right: var(--pl-tabs-more-popup-right, 8px) !important;
  max-width: calc(100vw - 16px) !important;
}

/* === Breadcrumb === */
.pl-page-header .ant-breadcrumb {
  font-family: Asap, sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: var(--pl-neutral-text-color-text-secondary);
  min-width: 0;
  overflow: hidden;
}
.pl-page-header .ant-breadcrumb ol {
  flex-wrap: nowrap;
  align-items: center;
}
.pl-page-header .ant-breadcrumb ol > li {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.pl-page-header .ant-breadcrumb ol > li:last-child {
  flex-shrink: 1;
  min-width: 0;
}
.pl-page-header .ant-breadcrumb ol > li:last-child .ant-breadcrumb-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-page-header .ant-breadcrumb a {
  color: var(--pl-neutral-text-color-text-secondary);
}
.pl-page-header .ant-breadcrumb a:hover {
  color: var(--pl-semantic-primary-color-primary);
}
.pl-page-header .ant-breadcrumb-separator {
  font-size: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-inline: 8px;
  color: var(--pl-neutral-text-color-text-quaternary);
  flex-shrink: 0;
}
.pl-page-header .ant-breadcrumb-separator::after {
  content: '';
  display: block;
  width: 6px;
  height: 10px;
  background: currentColor;
  mask: url('../icons/chevron-right.svg') no-repeat center / contain;
  -webkit-mask: url('../icons/chevron-right.svg') no-repeat center / contain;
}
.pl-page-header .ant-breadcrumb > span:last-child {
  color: var(--pl-neutral-text-color-text);
}

/* === PageHeaderActions === */
.pl-page-header-btn.ant-btn-text {
  color: var(--pl-neutral-text-color-text-quaternary);
}
.pl-page-header-btn.ant-btn-text:hover {
  color: var(--pl-neutral-text-color-text);
}

/* === Tag === */
.pl-tag-status-green {
  background: var(--pl-color-aquamarine-5);
}

/* === PageTitle === */
.pl-page-title-text {
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.33;
  color: var(--pl-neutral-text-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Flex items refuse to shrink below content width without this, which would wrap the title instead. */
  min-width: 0;
}
.pl-page-title-more.ant-btn {
  color: var(--pl-neutral-text-color-text-tertiary);
}
.pl-page-title-more.ant-btn:hover {
  color: var(--pl-neutral-text-color-text);
}

/* === Badge === */
/* Tooltip host element: hugs the tag so it acts as the flex item the bare tag used to be. */
.pl-badge-host {
  display: inline-flex;
  align-items: center;
}

.pl-badge.ant-tag {
  --badge-bg: var(--pl-domain-project-status-color-inactive-bg);
  --badge-border: var(--pl-domain-project-status-color-inactive-border);
  --badge-text: var(--pl-domain-project-status-color-inactive-text);
  --badge-icon: var(--pl-domain-project-status-color-inactive-icon);
  --badge-icon-filter: brightness(0) saturate(100%) invert(76%) sepia(10%) saturate(456%) hue-rotate(185deg) brightness(91%) contrast(87%); /* #AAB3C5 inactive default */

  height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 20px;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding: 1px 8px;
  margin: 0;
  border-radius: 3px;
  border: 1px solid var(--badge-border);
  background: var(--badge-bg);
  color: var(--badge-text);
}

.pl-badge.ant-tag p { margin: 0; display: inline; }
.pl-badge .pl-badge-icon {
  width: auto;
  height: 100%;
  padding: 2px 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  filter: var(--badge-icon-filter);
}

/* Status variants — override variables (specificity matches base via .pl-badge.pl-badge-*) */
/* Icon filters: brightness(0) makes image black, then invert/sepia/saturate/hue-rotate target the icon color */
.pl-badge.pl-badge-active {
  --badge-bg: var(--pl-domain-project-status-color-active-bg);
  --badge-border: var(--pl-domain-project-status-color-active-border);
  --badge-text: var(--pl-domain-project-status-color-active-text);
  --badge-icon: var(--pl-domain-project-status-color-active-icon);
  --badge-icon-filter: brightness(0) saturate(100%) invert(68%) sepia(31%) saturate(663%) hue-rotate(118deg) brightness(93%) contrast(87%); /* #4CC2AE */
}
.pl-badge.pl-badge-inactive {
  --badge-bg: var(--pl-domain-project-status-color-inactive-bg);
  --badge-border: var(--pl-domain-project-status-color-inactive-border);
  --badge-text: var(--pl-domain-project-status-color-inactive-text);
  --badge-icon: var(--pl-domain-project-status-color-inactive-icon);
  --badge-icon-filter: brightness(0) saturate(100%) invert(76%) sepia(10%) saturate(456%) hue-rotate(185deg) brightness(91%) contrast(87%); /* #AAB3C5 */
}
.pl-badge.pl-badge-template {
  --badge-bg: var(--pl-domain-project-status-color-template-bg);
  --badge-border: var(--pl-domain-project-status-color-template-border);
  --badge-text: var(--pl-domain-project-status-color-template-text);
  --badge-icon: var(--pl-domain-project-status-color-template-icon);
  --badge-icon-filter: brightness(0) saturate(100%) invert(82%) sepia(46%) saturate(627%) hue-rotate(7deg) brightness(103%) contrast(93%); /* #F2D70D */
}
.pl-badge.pl-badge-archived {
  --badge-bg: var(--pl-domain-project-status-color-archived-bg);
  --badge-border: var(--pl-domain-project-status-color-archived-border);
  --badge-text: var(--pl-domain-project-status-color-archived-text);
  --badge-icon: var(--pl-domain-project-status-color-archived-icon);
  --badge-icon-filter: brightness(0) saturate(100%) invert(97%) sepia(5%) saturate(401%) hue-rotate(183deg) brightness(93%) contrast(93%); /* #E9ECF1 */
}
.pl-badge.pl-badge-idea {
  --badge-bg: var(--pl-domain-project-status-color-idea-bg);
  --badge-border: var(--pl-domain-project-status-color-idea-border);
  --badge-text: var(--pl-domain-project-status-color-idea-text);
  --badge-icon: var(--pl-domain-project-status-color-idea-icon);
  --badge-icon-filter: brightness(0) saturate(100%) invert(56%) sepia(93%) saturate(1645%) hue-rotate(165deg) brightness(97%) contrast(94%); /* #0DB5F2 */
}
.pl-badge.pl-badge-initiative {
  --badge-bg: var(--pl-domain-project-status-color-initiative-bg);
  --badge-border: var(--pl-domain-project-status-color-initiative-border);
  --badge-text: var(--pl-domain-project-status-color-initiative-text);
  --badge-icon: var(--pl-domain-project-status-color-initiative-icon);
  --badge-icon-filter: brightness(0) saturate(100%) invert(42%) sepia(43%) saturate(896%) hue-rotate(241deg) brightness(89%) contrast(93%); /* #A45DC2 */
}
.pl-badge.pl-badge-locked {
  --badge-bg: var(--pl-domain-project-status-color-locked-bg);
  --badge-border: var(--pl-domain-project-status-color-locked-border);
  --badge-text: var(--pl-domain-project-status-color-locked-text);
  --badge-icon: var(--pl-domain-project-status-color-locked-icon);
  --badge-icon-filter: brightness(0) saturate(100%) invert(46%) sepia(60%) saturate(2054%) hue-rotate(342deg) brightness(98%) contrast(97%); /* #F56738 */
}

/* === TabHeader === */
.pl-tab-header .pl-mv-title {
  font-size: 12px;
  color: var(--pl-neutral-text-color-text-tertiary);
}
/* The notification-dot colour lives with the rest of its styling in pl-layout.css
   (.pl-tab-header .pl-notification-dot) — kept in one place to avoid drift. */

/* === ActionBar === */
.pl-action-bar .ant-btn.ant-btn-default {
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
}
.pl-action-bar .ant-btn.ant-btn-default > .anticon + span {
  margin-left: 0;
}
.pl-action-bar .ant-btn.ant-btn-default > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pl-action-bar-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.pl-action-bar-icon-plus {  background-color: currentColor; -webkit-mask-image: url('/icons/icon-plus.svg'); mask-image: url('/icons/icon-plus.svg'); }
.pl-action-bar-icon-schedule {  background-color: currentColor; -webkit-mask-image: url('/icons/icon-calculate-schedule.svg'); mask-image: url('/icons/icon-calculate-schedule.svg'); }
.pl-action-bar-icon-filter {  background-color: currentColor; -webkit-mask-image: url('/icons/icon-filter.svg'); mask-image: url('/icons/icon-filter.svg'); }
.pl-action-bar-icon-view {  background-color: currentColor; -webkit-mask-image: url('/icons/icon-view.svg'); mask-image: url('/icons/icon-view.svg'); }
.pl-action-bar .ant-btn-text {
  color: var(--pl-neutral-text-color-text-secondary);
}
.pl-action-bar .ant-btn-text:hover {
  background: var(--pl-color-neutral-1);
  color: var(--pl-neutral-text-color-text);
}
.pl-action-bar .ant-btn-text:active {
  background: var(--pl-color-neutral-3);
}

.pl-action-bar .pl-ab-search-btn:active {
  color: var(--pl-neutral-text-color-text);
}
/* Secondary (default) and text buttons change state instantly — no hover/active animation. */
.pl-action-bar .ant-btn-default,
.pl-action-bar .ant-btn-text {
  transition: none;
}
.pl-action-bar .ant-divider-vertical {
  margin: 0;
  height: 24px;
}

/* Filter active-count pill — inline after the "Filter" label, matches Figma node 13010:13775. */
.pl-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background-color: var(--pl-semantic-primary-color-primary, #0070B5);
  color: #fff;
  font-size: 11px;
  /* Match line-height to the pill height so the single digit sits on the vertical centre;
     line-height:1 let the Asap glyph ride slightly high. */
  line-height: 16px;
  font-weight: 600;
  text-align: center;
}

/* === VariantDropdown (Figma 17:1287) === */
.pl-variant-trigger-btn.ant-btn {
  height: 32px;
  padding: 0 16px;
  border: 1px solid #C4CBDA;
  border-radius: 4px;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: Asap, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.57;
  color: #0D1A26;
}
.pl-variant-trigger-btn.ant-btn:hover,
.pl-variant-trigger-btn.ant-btn:focus,
.pl-variant-trigger-btn.ant-dropdown-open {
  border-color: #495769;
  color: #495769;
}
.pl-variant-trigger-chevron {
  font-size: 12px;
  line-height: 0;
}

.pl-variant-dropdown-overlay .pl-variant-menu {
  width: 181px;
  padding: 4px;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
              0px 3px 6px -4px rgba(0, 0, 0, 0.12),
              0px 6px 16px 0px rgba(0, 0, 0, 0.08);
  font-family: Asap, sans-serif;
}

.pl-variant-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 5px 12px;
  border-radius: 3px;
  background-clip: padding-box;
  font-size: 14px;
  line-height: 1.57;
  color: #0D1A26;
  cursor: pointer;
}
.pl-variant-item:hover {
  background: linear-gradient(170deg, var(--pl-semantic-contrast-color-gradient-bg-hover-from) 0%, var(--pl-semantic-contrast-color-gradient-bg-hover-to) 100%);
}
.pl-variant-item.pl-variant-selected,
.pl-variant-item.pl-variant-selected:hover {
  background: #E9FAFD;
  color: #0070B5;
}

.pl-variant-title {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-variant-icon-btn {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #6A778B;
  cursor: pointer;
}
.pl-variant-icon-btn > i {
  font-size: 14px;
  line-height: 1;
}
.pl-variant-icon-hover {
  opacity: 0;
  transition: opacity 0.1s ease-in, color 0.1s ease-in;
}
.pl-variant-item:hover .pl-variant-icon-hover {
  opacity: 1;
}
.pl-variant-icon-hover:hover {
  color: #0070B5;
}
.pl-variant-star-active {
  color: #0070B5;
}
.pl-variant-icon-delete:hover {
  color: #C22704;
}
.pl-variant-dot {
  position: absolute;
  top: 2px;
  right: -6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(148deg, #0DB5F2 8%, #0070B5 100%);
  border: 1px solid #FFFFFF;
  box-sizing: content-box;
}

.pl-variant-divider {
  height: 1px;
  margin: 4px 0;
  background: rgba(49, 66, 84, 0.07);
}

.pl-variant-group-title {
  height: 32px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1.57;
  color: #6A778B;
}

/* === SaveModuleVariantPanel (Figma 17:1686 secondary page) === */
.pl-save-mv-panel {
  width: 254px;
  padding: 4px;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
              0px 3px 6px -4px rgba(0, 0, 0, 0.12),
              0px 6px 16px 0px rgba(0, 0, 0, 0.08);
  font-family: Asap, sans-serif;
}
.pl-save-mv-title {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 5px 4px 5px 4px;
}
.pl-save-mv-title-text {
  flex: 1 1 auto;
  font-size: 12px;
  line-height: 1.83;
  color: #6A778B;
}
.pl-save-mv-back {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  color: #6A778B;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.1s ease-in;
}
.pl-save-mv-back:hover {
  background: rgba(0, 0, 0, 0.06);
}
.pl-save-mv-back:focus {
  outline: none;
}
.pl-save-mv-back > i {
  font-size: 12px;
  line-height: 0;
}
.pl-save-mv-close-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #6A778B;
}
.pl-save-mv-close-btn > i {
  font-size: 12px;
  line-height: 0;
}
.pl-save-mv-close-btn.ant-btn-text,
.pl-save-mv-close-btn.ant-btn-text:hover,
.pl-save-mv-close-btn.ant-btn-text:focus {
  color: #6A778B !important;
}

.pl-save-mv-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 12px 16px;
}
.pl-save-mv-submit-btn {
  width: 100%;
}
.pl-save-mv-name-input {
  width: 100%;
  height: 32px;
  padding: 4px 11px;
  font-family: Asap, sans-serif;
  font-size: 14px;
  line-height: 1.57;
  color: #0D1A26;
  background: #FFFFFF;
  border: 1px solid #C4CBDA;
  border-radius: 4px;
  box-sizing: border-box;
  outline: none;
}
.pl-save-mv-name-input::placeholder {
  color: #8A95A8;
}
.pl-save-mv-name-input:focus {
  border-color: var(--pl-semantic-primary-color-primary, #1677FF);
}
.pl-save-mv-divider {
  height: 1px;
  background: rgba(49, 66, 84, 0.07);
  margin: 4px 0;
}
.pl-save-mv-section-title {
  height: 32px;
  padding: 5px 4px 5px 12px;
  display: flex;
  align-items: center;
}
.pl-save-mv-section-title-text {
  font-size: 12px;
  line-height: 1.83;
  color: #6A778B;
}
.pl-save-mv-list {
  display: flex;
  flex-direction: column;
}
.pl-save-mv-item {
  padding: 5px 12px;
  font-size: 14px;
  line-height: 1.57;
  color: #0D1A26;
  cursor: pointer;
  border-radius: 3px;
  background-clip: padding-box;
}
.pl-save-mv-item:hover {
  background: linear-gradient(170deg, var(--pl-semantic-contrast-color-gradient-bg-hover-from) 0%, var(--pl-semantic-contrast-color-gradient-bg-hover-to) 100%);
}

/* === View button — dot indicator when current variant has unsaved changes === */
.pl-view-label {
  position: relative;
  display: inline-block;
}
.pl-view-dot {
  position: absolute;
  top: 2px;
  right: -6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(148deg, #0DB5F2 8%, #0070B5 100%);
  border: 1px solid #FFFFFF;
  box-sizing: content-box;
}

/* === View dropdown overlay container & empty-state === */
.pl-view-dropdown-overlay .pl-view-dropdown-menu {
  min-width: 200px;
  padding: 4px;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
              0px 3px 6px -4px rgba(0, 0, 0, 0.12),
              0px 6px 16px 0px rgba(0, 0, 0, 0.08);
  font-family: Asap, sans-serif;
}
.pl-view-dropdown-empty {
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #8A95A8;
  text-align: center;
}

/* === SaveModuleVariantTrigger (row inside parent View dropdown) === */
.pl-save-mv-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  height: 32px;
  font-size: 14px;
  line-height: 1.57;
  color: #0D1A26;
  cursor: pointer;
  border-radius: 3px;
  background-clip: padding-box;
}
.pl-save-mv-trigger:hover {
  background: linear-gradient(170deg, var(--pl-semantic-contrast-color-gradient-bg-hover-from) 0%, var(--pl-semantic-contrast-color-gradient-bg-hover-to) 100%);
}
.pl-save-mv-trigger-label {
  position: relative;
  display: inline-block;
  min-width: 0;
}
.pl-save-mv-trigger-chevron {
  font-size: 12px;
  line-height: 0;
  color: var(--pl-neutral-text-color-text-quaternary, #8A95A8);
}

/* === UserDropdown === */
.pl-user-dropdown-overlay {
  min-width: 0;
}
.pl-user-dropdown-overlay .pl-user-dropdown-menu {
  /* Match the trigger width: sidebar (280px) - 2×padding (16px) */
  min-width: calc(280px - 2 * 16px);
  box-sizing: border-box;
}
.pl-user-dropdown-menu {
  padding: 4px !important;
  border-radius: 8px !important;
  background: #FFFFFF;
  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
              0px 3px 6px -4px rgba(0, 0, 0, 0.12),
              0px 6px 16px 0px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.pl-user-dropdown-menu .ant-menu-item {
  padding: 5px 12px;
  border-radius: 3px !important;
  background-clip: padding-box;
  overflow: hidden;
}
/* AntDesign uses a separate ::after layer for the highlight slot on selected items;
   suppress it so the rounded hover bg stays the only paint. */
.pl-user-dropdown-menu .ant-menu-item::after {
  display: none !important;
}
.pl-user-dropdown-menu .ant-menu-item:hover,
.pl-user-dropdown-menu .ant-menu-item-active,
.pl-user-dropdown-menu .ant-menu-item:not(.ant-menu-item-selected):hover {
  background: linear-gradient(153deg, var(--pl-semantic-contrast-color-gradient-bg-hover-from) 0%, var(--pl-semantic-contrast-color-gradient-bg-hover-to) 100%) !important;
  background-clip: padding-box !important;
}
.pl-user-dropdown-menu .ant-menu-title-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pl-user-dropdown-menu .ant-menu-title-content > i {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  color: #6A778B;
}
.pl-user-dropdown-menu .ant-menu-item-divider {
  margin: 4px 0;
}

/* === Anchored menus (context menu, column chooser, scale menu) === */
/* Measured by the overlay, never seen: a point, not a box. */
/* Width comes from the Dropdown's Style parameter: it renders width: fit-content inline, which
   no class rule can outrank. */
.pl-menu-anchor {
  position: absolute;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The list can outgrow the viewport; it scrolls rather than running off it. */
.pl-column-chooser .ant-dropdown-menu {
  max-height: 400px;
  overflow-y: auto;
}

/* Context-menu rows: a fixed icon slot keeps labels aligned whether or not an item has one. */
.pl-context-menu .pl-menu-item-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pl-context-menu .pl-menu-item-icon {
  flex: 0 0 16px;
  text-align: center;
}
/* AntDesign leaves the submenu arrow at its static position, which a block row pushes onto the
   next line; centre it on the row instead. */
.pl-context-menu .ant-dropdown-menu-submenu-expand-icon {
  top: 50%;
  transform: translateY(-50%);
}

/* === Shared dropdown overlay base === */
/* A submenu popup nests its own list, which this already matches; the popup wrapper around it
   only has to stop contributing a second frame of its own. */
.pl-dropdown-overlay.ant-dropdown-menu-submenu-popup {
  padding: 0;
  background: none;
  box-shadow: none;
}

.pl-dropdown-overlay .ant-dropdown-menu {
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
              0px 3px 6px -4px rgba(0, 0, 0, 0.12),
              0px 6px 16px 0px rgba(0, 0, 0, 0.08);
}
.pl-dropdown-overlay .ant-dropdown-menu-item {
  padding: 5px 12px;
  border-radius: 3px;
  background-clip: padding-box;
  font-family: Asap, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.57;
  color: var(--pl-neutral-text-color-text);
}
.pl-dropdown-overlay .ant-dropdown-menu-item:hover,
.pl-dropdown-overlay .ant-dropdown-menu-item-active {
  background: linear-gradient(153deg, var(--pl-semantic-contrast-color-gradient-bg-hover-from) 0%, var(--pl-semantic-contrast-color-gradient-bg-hover-to) 100%) !important;
}
.pl-dropdown-overlay .ant-menu-title-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pl-dropdown-overlay .ant-menu-title-content > img {
  display: inline-block;
  width: 14px !important;
  height: 14px !important;
  max-width: 14px;
  max-height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}
.pl-dropdown-overlay .ant-dropdown-menu-item-divider,
.pl-dropdown-overlay .ant-menu-item-divider {
  margin: 4px 0;
}

/* === Scale context menu === */
/* Its rows are zoom controls and checkboxes rather than commands, so they carry no item padding
   and the card itself has to hold them off its edges. */
.pl-scale-context-menu .ant-dropdown-menu {
  padding: 8px 11px;
  max-height: 400px;
  overflow-y: auto;
}
.pl-scale-context-menu .ant-dropdown-menu-item {
  padding: 0;
  line-height: inherit;
}
.pl-scale-context-menu .ant-dropdown-menu-item:hover,
.pl-scale-context-menu .ant-dropdown-menu-item-active {
  background: none !important;
}
.pl-scale-context-menu .ant-menu-title-content {
  font-size: 11px;
  display: flex;
  gap: 5px;
  align-items: start;
}

/* === OverflowMenu === */
.pl-overflow-menu-overlay .ant-dropdown-menu {
  width: 181px;
}
.pl-overflow-menu-overlay .ant-menu-item-danger.ant-dropdown-menu-item {
  color: var(--pl-semantic-error-color-error-text);
}
.pl-overflow-menu-overlay .ant-menu-item-danger .ant-menu-title-content > img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(97%) saturate(5063%) hue-rotate(14deg) brightness(83%) contrast(103%); /* #C22704 error text */
}
/* Non-clickable section headings (MenuItemGroup title) rendered from text datafields. */
.pl-dropdown-overlay .ant-dropdown-menu-item-group-title,
.pl-dropdown-overlay .ant-menu-item-group-title {
  padding: 5px 12px;
  color: var(--pl-neutral-text-color-text-tertiary);
}

/* === Sidebar Creation Menu === */
.pl-sidebar-creation-menu-overlay .ant-dropdown-menu {
  width: 253px;
}
.pl-sidebar-creation-menu-overlay .ant-dropdown-menu-item-group-title,
.pl-sidebar-creation-menu-overlay .ant-menu-item-group-title {
  padding: 5px 12px;
  font-family: Asap, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.57;
  color: var(--pl-neutral-text-color-text-tertiary);
}