cosmos-explorer/src/less/DarkModeMenus.less

body.isDarkMode {
  .ms-Callout.ms-ContextualMenu-Callout {
    --bodyBackgroundColor: var(--colorNeutralBackground1);
    --bodyTextColor: var(--colorNeutralForeground1);
    
    .ms-Callout-main {
      background-color: var(--colorNeutralBackground1);
    }
  }
  
  .ms-ContextualMenu-container,
  .ms-ContextualMenu-list,
  .ms-ContextualMenu-list.is-open {
    background-color: var(--colorNeutralBackground1);
  }
  
  .ms-ContextualMenu-item {
    background-color: var(--colorNeutralBackground1);
  }
  
  .ms-ContextualMenu-link {
    color: var(--colorNeutralForeground1);
    background-color: var(--colorNeutralBackground1);
    
    &:hover, &:focus {
      background-color: var(--colorNeutralBackground3);
    }
  }
  
  .ms-ContextualMenu-itemText {
    color: var(--colorNeutralForeground1);
  }
  
  .ms-ContextualMenu-icon {
    color: var(--colorNeutralForeground1);
  }
}

body.isDarkMode {
  .fui-MenuPopover {
    background-color: var(--colorNeutralBackground1);
  }
  
  .fui-MenuList {
    background-color: var(--colorNeutralBackground1);
  }
  
  .fui-MenuItem {
    color: var(--colorNeutralForeground1);
    background-color: var(--colorNeutralBackground1);
    
    &:hover, &:focus {
      background-color: var(--colorNeutralBackground3);
    }
  }

  // Global Dropdown styling - less intrusive
  .ms-Dropdown {
    .ms-Dropdown-title {
      background-color: var(--colorNeutralBackground2);
      color: var(--colorNeutralForeground1);
      border: 1px solid var(--colorNeutralStroke1);
    }
    
    .ms-Dropdown-caretDown {
      color: var(--colorNeutralForeground1);
    }
  }
  
  // Dropdown callout styling
  .ms-Callout.ms-Dropdown-callout {
    background-color: var(--colorNeutralBackground2);
    border: 1px solid var(--colorNeutralStroke1);
    
    .ms-Dropdown-items {
      background-color: var(--colorNeutralBackground2);
      max-height: 200px;
      overflow-y: auto;
    }
    
    .ms-Dropdown-item {
      background-color: transparent;
      color: var(--colorNeutralForeground1);
      min-height: 32px;
      padding: 8px 12px;
      
      &:hover {
        background-color: var(--colorNeutralBackground4);
        color: var(--colorNeutralForeground1);
      }
      
      &.is-selected {
        background-color: var(--colorBrandBackground);
        color: var(--colorNeutralForegroundOnBrand);
      }
    }
    
    .ms-Dropdown-optionText {
      color: var(--colorNeutralForeground1);
    }
  }
}

// Global tooltip override - highest specificity
body.isDarkMode {
  // TooltipHost specific styling
  .ms-TooltipHost {
    .ms-Callout {
      background-color: var(--colorNeutralBackground3);
      border: 1px solid var(--colorNeutralStroke1);
    }
    
    .ms-Callout-main {
      background-color: var(--colorNeutralBackground3);
      color: var(--colorNeutralForeground1);
      border: none;
    }
    
    .ms-Tooltip-content {
      background-color: var(--colorNeutralBackground3);
      color: var(--colorNeutralForeground1);
    }
  }

  .ms-Callout,
  .ms-Tooltip,
  [role="tooltip"],
  div[class*="tooltip"],
  

  .ms-Callout-main {
    color: var(--colorNeutralForeground1);
    border: 1px solid var(--colorNeutralStroke1);
  }

  .ms-Tooltip-content {
    background-color: var(--colorNeutralBackground3);
    color: var(--colorNeutralForeground1);
  }

  .ms-TooltipHost {
    .ms-Callout-main {
      background-color: var(--colorNeutralBackground3);
      color: var(--colorNeutralForeground1);
    }
  }

  .ms-Callout-container,
  .ms-Tooltip-container {
    background-color: transparent;
    
    .ms-Callout-main {
      border: 1px solid var(--colorNeutralStroke1);
      color: var(--colorNeutralForeground1);
    }
  }

  .ms-Layer {
    background-color: transparent;
    
    .ms-Callout,
    .ms-Tooltip,
    [role="tooltip"] {
      background-color: var(--colorNeutralBackground3);
      color: var(--colorNeutralForeground1);
      
      .ms-Callout-main {
        border: none;
        color: var(--colorNeutralForeground1);
      }
    }
  }

  .ms-Callout-beak,
  .ms-Tooltip-beak {
    background-color: var(--colorNeutralBackground3);
    border-color: var(--colorNeutralStroke1);
  }
  
  .ms-Callout-container,
  .ms-Callout-calloutMain,
  .ms-Tooltip-subText,
  div[data-portal-element],
  [data-portal-node] > div,
  .ms-Layer > div {
    border-color: var(--colorNeutralStroke1);
  }
  
  .ms-Fabric {
    [role="tooltip"],
    .ms-Tooltip {
      * {
        background-color: var(--colorNeutralBackground3);
        color: var(--colorNeutralForeground1);
        border-color: var(--colorNeutralStroke1);
      }
    }
  }
  
  [style*="background-color: rgb(255, 255, 255)"],
  [style*="background-color: white"],
  [style*="background: white"],
  [style*="background: rgb(255, 255, 255)"] {
    background-color: var(--colorNeutralBackground3);
    border-color: var(--colorNeutralStroke1);
  }

  // Tab styling for dark theme
  .nav-tabs {
    .tabList {
      border-color: var(--colorNeutralStroke1);
      
      &.active {
        border-bottom-color: var(--colorBrandBackground);
      }
      
      &:hover {
        background-color: var(--colorNeutralBackground3);
      }
    }
  }

  .tabNavText {
    color: var(--colorNeutralForeground1);
  }

  .cancelButton {
    color: var(--colorNeutralForeground1);
    
    &:hover {
      background-color: var(--colorNeutralBackground4);
    }
    
    .close-Icon {
      color: var(--colorNeutralForeground1);
    }
  }

  .tabIcon {
    color: var(--colorNeutralForeground1);
  }

  // DetailsList dark theme styling
  .ms-DetailsList {
    .ms-DetailsHeader {
      background-color: var(--colorNeutralBackground2);
      
      .ms-DetailsHeader-cell {
        background-color: var(--colorNeutralBackground2);
        color: var(--colorNeutralForeground1);
        border-color: var(--colorNeutralStroke1);
      }
      
      .ms-DetailsHeader-cellTitle {
        color: var(--colorNeutralForeground1);
      }
    }
    
    .ms-DetailsRow {
      background-color: var(--colorNeutralBackground1);
      color: var(--colorNeutralForeground1);
      border-color: var(--colorNeutralStroke1);
      
      &:hover {
        background-color: var(--colorNeutralBackground3);
        color: var(--colorNeutralForeground1);
      }
      
      .ms-DetailsRow-cell {
        background-color: inherit;
        color: var(--colorNeutralForeground1);
      }
    }
  }

  .ms-MessageBar {
    color: var(--colorNeutralForeground1);
    background-color: var(--colorNeutralBackground3);
    border: 1px solid var(--colorNeutralStroke1);
    
    &.ms-MessageBar--info {
      background-color: var(--colorNeutralBackground3);
      border-color: var(--colorNeutralStroke1);
    }
    
    &.ms-MessageBar--warning {
      background-color: var(--colorStatusWarningBackground1);
      border-color: var(--colorStatusWarningBorder1);
    }
    
    &.ms-MessageBar--severeWarning {
      background-color: var(--colorStatusDangerBackground1);
      border-color: var(--colorStatusDangerBorder1);
    }
    
    &.ms-MessageBar--error {
      background-color: var(--colorStatusDangerBackground1);
      border-color: var(--colorStatusDangerBorder1);
    }
    
    &.ms-MessageBar--success {
      background-color: var(--colorStatusSuccessBackground1);
      border-color: var(--colorStatusSuccessBorder1);
    }
    
    .ms-MessageBar-content,
    .ms-MessageBar-innerText,
    .ms-MessageBar-icon,
    .ms-MessageBar-text {
      color: var(--colorNeutralForeground1);
      background-color: transparent;
    }
    
    .ms-MessageBar-innerTextPadding {
      background-color: transparent;
    }
    
    // High specificity override for any nested elements
    * {
      color: var(--colorNeutralForeground1);
    }
    
    // Ensure links maintain proper colors
    .ms-Link {
      color: var(--colorBrandForeground1);
    }
  }

  body.isDarkMode .ms-MessageBar {
    background-color: var(--colorStatusWarningBackground1);
    border: 1px solid var(--colorStatusWarningBorder1);
    
    &.ms-MessageBar--info {
      background-color: var(--colorNeutralBackground3);
      border: 1px solid var(--colorNeutralStroke1);
    }
  }

  // Additional MessageBar container styling
  .ms-MessageBar-content {
    background-color: transparent;
    
    .ms-Link {
      color: var(--colorBrandForeground1);
    }
  }

  .ms-Button {
    background-color: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    
    &:hover {
      background-color: var(--colorNeutralBackground3);
      color: var(--colorNeutralForeground1);
    }
    
    &:focus {
      background-color: var(--colorNeutralBackground1);
      color: var(--colorNeutralForeground1);
    }
    
    &.ms-Button--default {
      background-color: var(--colorNeutralBackground1);
      color: var(--colorNeutralForeground1);
      border-color: var(--colorNeutralStroke1);
      
      &:hover {
        background-color: var(--colorNeutralBackground3);
        color: var(--colorNeutralForeground1);
      }
    }
    
    &.ms-Button--primary {
      background-color: var(--colorBrandBackground);
      color: var(--colorNeutralForegroundOnBrand);
      border-color: var(--colorBrandStroke1);
      
      &:hover {
        background-color: var(--colorBrandBackgroundHover);
        color: var(--colorNeutralForegroundOnBrand);
        border-color: var(--colorBrandStroke1);
      }
    }
    
    .ms-Button-label {
      color: inherit;
    }
    
    .ms-Button-icon {
      color: inherit;
    }
  }

  .ms-Dialog {
    .ms-Dialog-actions {
      .ms-Button {
        background-color: var(--colorNeutralBackground1);
        color: var(--colorNeutralForeground1);
        border-color: var(--colorNeutralStroke1);
        
        &:hover {
          background-color: var(--colorNeutralBackground3);
          color: var(--colorNeutralForeground1);
        }
        
        &.ms-Button--primary {
          background-color: var(--colorBrandBackground);
          color: var(--colorNeutralForegroundOnBrand);
          
          &:hover {
            background-color: var(--colorBrandBackgroundHover);
            color: var(--colorNeutralForegroundOnBrand);
          }
        }
      }
    }
  }

  .ms-IconButton {
    background-color: transparent;
    color: var(--colorNeutralForeground1);
    
    &:hover {
      background-color: var(--colorNeutralBackground4);
      color: var(--colorNeutralForeground1);
    }
    
    &:focus {
      background-color: var(--colorNeutralBackground3);
      color: var(--colorNeutralForeground1);
    }
    
    .ms-Icon {
      color: var(--colorNeutralForeground1);
    }
  }

  button {
    &:not(.ms-Button):not(.ms-IconButton) {
      background-color: var(--colorNeutralBackground1);
      color: var(--colorNeutralForeground1);
      
      &:hover {
        background-color: var(--colorNeutralBackground3);
        color: var(--colorNeutralForeground1);
      }
      
      &:focus {
        border-color: var(--colorBrandStroke1);
      }
    }
  }

  // Close icons and cancel buttons
  .close-Icon,
  .cancelButton,
  [class*="close"],
  [class*="cancel"] {
    color: var(--colorNeutralForeground1);
    background-color: transparent;
    
    &:hover {
      background-color: var(--colorNeutralBackground4);
      color: var(--colorNeutralForeground1);
    }
  }

  // FluentUI Pivot component dark theme styling
  .ms-Pivot {
    background-color: var(--colorNeutralBackground1);
    
    .ms-Pivot-link {
      color: var(--colorNeutralForeground1);
      background-color: transparent;
      
      &:hover {
        background-color: var(--colorNeutralBackground1Hover);
        color: var(--colorNeutralForeground1);
      }
      
      &.is-selected {
        background-color: transparent;
        color: var(--colorNeutralForeground1);
        
        &::before {
          background-color: var(--colorCompoundBrandBackground);
        }
      }
      
      &:focus {
        background-color: transparent;
        color: var(--colorNeutralForeground1);
      }
    }
  }
}