/* 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;
}
/* Firefox leaves flex-basis out of the row's intrinsic width, so the slot needs a real width or the menu comes out 16px too narrow and labels wrap. */
.pl-context-menu .pl-menu-item-icon {
  flex: none;
  width: 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);
}
/* The status-message log, opened from a module's status pill. Lives here rather than in the
   pill's scoped stylesheet because AntDesign portals a Popover overlay out of the component. */
.pl-status-log-overlay .ant-popover-inner {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pl-neutral-border-color-border-secondary);
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08),
              0 3px 6px -4px rgba(0, 0, 0, 0.12),
              0 9px 28px 8px rgba(0, 0, 0, 0.05);
  /* The overlay's pinned bottom edge is the bound, so a long log never runs off-window. */
  max-height: 100%;
  min-height: 0;
}

.pl-status-log-overlay .ant-popover-inner-content {
  padding: 0;
}

.pl-status-log-overlay .pl-status-log {
  width: 560px;
  max-width: calc(100vw - 32px);
}

.pl-status-log-overlay .pl-status-log-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--pl-neutral-border-color-border-secondary);
}

.pl-status-log-overlay .pl-status-log-title {
  font: 600 14px/1 Asap, sans-serif;
  color: var(--pl-neutral-text-color-text);
}

.pl-status-log-overlay .pl-status-log-count {
  font: 400 12px/1 Asap, sans-serif;
  color: var(--pl-neutral-text-color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.pl-status-log-overlay .pl-status-log-header-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.pl-status-log-overlay .pl-status-log-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--pl-neutral-text-color-text-secondary);
  font-size: 13px;
  cursor: pointer;
}

.pl-status-log-overlay .pl-status-log-settings:hover {
  background: var(--pl-neutral-fill-color-fill-quaternary);
  color: var(--pl-neutral-text-color-text);
}

.pl-status-log-overlay .pl-status-log-settings:focus-visible {
  outline: 2px solid var(--pl-semantic-primary-color-primary);
  outline-offset: 1px;
}

/* Every message in view is module-less, so the origin column is dropped for the whole log --
   per-row collapsing would leave the rows misaligned, each row being its own grid. */
.pl-status-log-overlay .pl-status-log-no-origin .pl-status-log-row {
  grid-template-columns: 76px minmax(0, 1fr);
}

.pl-status-log-overlay .pl-status-log-no-origin .pl-status-log-origin {
  display: none;
}

/* AntDesign hangs the log below the pill and bounds its height by nothing, so a long log runs off
   the bottom of a short window with its last row cut through the middle. Pinning the overlay's
   bottom edge makes the space between the pill and the window the log's bound: the overlay
   stretches, drawing nothing itself, while the card inside grows only as far as its rows need.
   This replaces subtracting a guess from the window height, which cannot be right for a module
   halfway down the screen. Only the placements that hang downwards: a popover AntDesign has
   flipped above the pill sets its own bottom, and pinning ours would fight it. */
.pl-status-log-overlay[class*='ant-popover-placement-bottom'] {
  bottom: 16px !important;
}

.pl-status-log-overlay .ant-popover-content {
  display: flex;
  height: 100%;
  min-height: 0;
  /* Not stretch: the card is as tall as its rows, and only the bound above cuts it short. */
  align-items: flex-start;
}

.pl-status-log-overlay .ant-popover-inner-content,
.pl-status-log-overlay .pl-status-log {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* The rows are the part that gives: the header keeps its 40px and they scroll underneath it. */
.pl-status-log-overlay .pl-status-log-rows {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* AntDesign anchors the log to the pill's right edge and lets the left edge fall where it may, so
   on a narrow window a 560px card hangs off the left of the screen with its first column cut off.
   Below the width where the card still clears that edge, both edges are pinned instead: the log
   becomes a sheet inset from the window, keeping its 560px where that fits and shrinking with the
   window below it. The arrow goes with the anchoring, having nothing left to point at. */
@media (max-width: 800px) {
  .pl-status-log-overlay {
    left: 16px !important;
    right: 16px !important;
  }

  .pl-status-log-overlay .ant-popover-content,
  .pl-status-log-overlay .ant-popover-inner,
  .pl-status-log-overlay .ant-popover-inner-content,
  .pl-status-log-overlay .pl-status-log {
    width: 100%;
    max-width: 560px;
  }

  .pl-status-log-overlay .ant-popover-arrow {
    display: none;
  }
}

/* The popover is min(560px, viewport - 32px) wide, so the viewport alone decides when the origin
   column stops being affordable: below this it takes more of the row than the message it
   qualifies. The origin stays in the row's tooltip, and the row still leads to its module. */
@media (max-width: 640px) {
  .pl-status-log-overlay .pl-status-log-rows .pl-status-log-row {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .pl-status-log-overlay .pl-status-log-rows .pl-status-log-origin {
    display: none;
  }
}

/* One tooltip surface for the whole client, applied to every AntDesign tooltip rather than
   opted into per call site: the design system's spotlight ground, the 4px system radius and
   Asap at 13px. The client's own tooltip component -- what a data field, a badge or a bar
   hovers -- carries the same values in Shared.Components/TooltipComponents/PlTooltip.razor.css,
   and the two have to move together for a tooltip to look the same wherever it comes from. */
.ant-tooltip .ant-tooltip-inner {
  min-height: 0;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--pl-neutral-bg-color-bg-spotlight);
  color: var(--pl-neutral-text-color-text-light-solid);
  font: 400 13px/1.4 Asap, sans-serif;
}

.ant-tooltip .ant-tooltip-arrow-content,
.ant-tooltip .ant-tooltip-arrow::before {
  background: var(--pl-neutral-bg-color-bg-spotlight);
}